"use strict";(self.webpackChunkangular_storybook_project=self.webpackChunkangular_storybook_project||[]).push([[6235],{"./src/common/shared/models-mdx/BootstrapSize.mdx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>MDXContent});var react=__webpack_require__("./node_modules/react/index.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");const BootstrapSizeReader=()=>react.createElement("div",{className:"panel-content"},react.createElement(dist.oz,null,"# BootstrapSize\n\nDocumentazione dettagliata della classe custom  **BootstrapSize**, usata nei componenti di Intranet Webkit v17. \n**BootstrapSize** viene utilizzata per impostare le dimensioni degli elementi del DOM, usando i breakpoint di Bootstrap nell'ordine definito dalla classe. L'ordine di breakpoints e xs, sm, lg, md.\n\n## Implementazione\n<div class=\"table-responsive\">`import {BootstrapSize} from '@inail/intranet-webkit/utils';`</div>\n<br />\n\n***Struttura:***\n`\t/** pay attention to the order. for retrocompatible motivation md is the last */\nconstructor(xs: number, sm: number, lg: number, md?: number) {\n\t\tthis._xs = xs;\n\t\tthis._sm = sm;\n\t\tthis._lg = lg;\n\t\tthis._md = md;\n}`\n\n***Esempio d'uso:***\n<br />\n<div class=\"table-responsive\">`bootstrapSize = new BootstrapSize(12, 12, 12, 12)`</div>\n\n## API\n<div class=\"table-responsive\">\n  <table class=\"table table-documentation\">\n  <thead>\n    <tr>\n      <th><strong>Campo</strong></th>\n      <th><strong>Descrizione</strong></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>xs</code> <br /> <code>sm</code> <br /> <code>lg</code> <br /> <code>md</code></td>\n      <td>\n        Campi di tipo number che impostano le classi `col-` di Bootstrap tramite le funzioni <code>toBootstrapClass()</code> e <code>toComplementaryBootstrapClass()</code>. \n        <br />\n        <code> <pre> \tpublic toBootstrapClass(): string {\n\t      \t  let classString = '';\n\t      \t  if (this.xs) {\n\t      \t  \tclassString += ' col-' + this.xs;\n\t      \t  }\n\t      \t  if (this.sm) {\n\t      \t  \tclassString += ' col-sm-' + this.sm;\n\t      \t  }\n\t      \t  if (this.md) {\n\t      \t  \tclassString += ' col-md-' + this.md;\n\t      \t  }\n\t      \t  if (this.lg) {\n\t      \t  \tclassString += ' col-lg-' + this.lg;\n\t      \t  }\n\t      \t  return classString;\n\t    } </pre> </code>\n        <code> <pre> \t\tpublic toComplementaryBootstrapClass(): string {\n\t        \tlet classString = '';\n\t        \tif (this.xs) {\n\t        \t\tclassString += ' col-' + (12 - this.xs);\n\t        \t}\n\t        \tif (this.sm) {\n\t        \t\tclassString += ' col-sm-' + (12 - this.sm);\n\t        \t}\n\t        \tif (this.md) {\n\t        \t\tclassString += ' col-md-' + (12 - this.md);\n\t        \t}\n\t        \tif (this.lg) {\n\t        \t\tclassString += ' col-lg-' + (12 - this.lg);\n\t        \t}\n\t        \treturn classString;\n\t    } </pre> </code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n</div>\n\n## Casi d'utilizzo\n<br />\n<a href=\"?path=/story/components-elements-alert--alert\">Alert</a>\n<br />\n<a href=\"?path=/story/components-elements-input-detail--input-detail\">Input Detail</a>\n<br />\n<a href=\"?path=/story/components-form-form-controls-checkbox--checkbox\">Form Controls</a>\n<br />\n<a href=\"?path=/story/components-elements-progress-bar--progress-bar\">Progress Bar</a>\n<br />\n<a href=\"?path=/story/components-carousel--basic-carousel\">Expandable Tabs</a>\n<br />\n<a href=\"?path=/story/components-carousel--basic-carousel\">Upload File</a>"));function _createMdxContent(props){return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"Resources/Models/BootstrapSize"}),"\n",(0,jsx_runtime.jsx)(BootstrapSizeReader,{})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={...(0,lib.R)(),...props.components};return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent()}}}]);