"use strict";(self.webpackChunkangular_storybook_project=self.webpackChunkangular_storybook_project||[]).push([[5886],{"./src/common/shared/models-mdx/CarouselConfig.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 CarouselConfigReader=()=>react.createElement("div",{className:"panel-content"},react.createElement(dist.oz,null,'# CarouselConfig\n\nDocumentazione dettagliata del custom model **CarouselConfig**, usato nei componenti di Internet Webkit v17. \n**CarouselConfig** è una classe senza costruttore, i campi necessari sono gia valorizzati con i valori di default. Si utilizza per creare l\'Input necessario `carouselConfig` del componente CarouselComponent, per costruire un carousel nell\' UI.\n\n## Implementazione\n<div class="table-responsive">`import { CarouselConfig } from "@inail/internet-webkit/carousel"`</div>\n<br />\n\n***Struttura:***\n`class CarouselConfig {\n\tdots = true;\n\tinfinite = false;\n\tspeed = 300;\n\tslidesToShow = 2;\n\taccessibility = false;\n\tslidesToScroll = 2;\n\tresponsive: CarouselConfigResponsive[] = [{\n\t\tbreakpoint: 1024,\n\t\tsettings: {\n\t\t\tslidesToShow: 1,\n\t\t\tslidesToScroll: 1,\n\t\t\tinfinite: this.infinite,\n\t\t\tdots: this.dots\n\t\t}\n\t}];\n\tprevArrow?: string;\n\tnextArrow?: string;\n}`\n\n***Esempio d\'uso:***\n<br />\n`carouselConfig = new CarouselConfig()`\n\n## API\n<div class="table-responsive">\n  <table class="table">\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>dots</code></td>\n      <td>\n        Booleano che mostra i tre puntini per segnare contenuto ancora da mostrare. Valore default true.\n      </td>\n    </tr>\n    <tr>\n      <td><code>infinite</code></td>\n      <td>\n        Booleano valorizzato a false. Decide se il carousel è scorribile all\' infinito in entrambe direzioni.\n      </td>\n    </tr>\n    <tr>\n      <td><code>speed</code></td>\n      <td>\n        Campo numerico che imposta la velocità dell\'animazione di scroll. Valore di default 300.\n      </td>\n    </tr>\n    <tr>\n      <td><code>slidesToShow</code></td>\n      <td>\n        Campo numerico che imposta il numero di slide visibili su ogni pagina del carousel. Valore default 2, che poi si imposta a 1 slide per pagina, nel momento in cui si attiva il breakpoint di <code>CarouselConfigResponsive</code>.\n      </td>\n    </tr>\n    <tr>\n      <td><code>responsive</code></td>\n      <td>\n        Campo di tipo <code>CarouselConfigResponsive</code> che imposta nuovi valori a certi campi di <code>CarouselConfig</code> nel parametro <code>settings</code> tipo <code>Partial`<CarouselConfig>`</code> quando il browser fa trigger il <code>breakpoint</code> di 1024px.\n      </td>\n    </tr>\n    <tr>\n      <td><code>prevArrow</code> <br /> <code>nextArrow</code></td>\n      <td>\n        Campi di tipo string non obbligatori che impostano i button e le label dei pulsanti del carousel tramite la funzione. <code>updateLabel()</code>. \n        <br />\n        <code> <pre> private updateLabel() {\n            const prevLabel = this.localizationService.instant(\'BUTTON.CAROUSEL_PREV\');\n            const nextLabel = this.localizationService.instant(\'BUTTON.CAROUSEL_NEXT\');\n            const nextArrow = `<button class="slick-next slick-arrow" aria-label="${nextLabel}" type="button" style="display: block;">${nextLabel}  </button>`\n            const prevArrow = `<button class="slick-prev slick-arrow" aria-label="${prevLabel}" type="button" style="display: block;">${prevLabel}  </button>`\n            return { prevArrow, nextArrow };\n          } </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-carousel--basic-carousel">Carousel</a>'));function _createMdxContent(props){return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"Resources/Models/CarouselConfig"}),"\n",(0,jsx_runtime.jsx)(CarouselConfigReader,{})]})}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()}}}]);