{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/index.ts",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "ItPagination",
          "declaration": {
            "name": "ItPagination",
            "module": "./it-pagination.js"
          }
        },
        {
          "kind": "js",
          "name": "ItPaginationItem",
          "declaration": {
            "name": "ItPaginationItem",
            "module": "./it-pagination-item.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/it-pagination-item.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "ItPaginationItem",
          "members": [
            {
              "kind": "field",
              "name": "shadowRootOptions",
              "type": {
                "text": "object"
              },
              "static": true,
              "default": "{ ...BaseComponent.shadowRootOptions, delegatesFocus: true }"
            },
            {
              "kind": "field",
              "name": "page",
              "type": {
                "text": "string"
              },
              "default": "''",
              "attribute": "page",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "current",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "current",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "disabled",
              "reflects": true
            },
            {
              "kind": "method",
              "name": "updateSlottedElements",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "handleSlotChange",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "handleClick",
              "privacy": "private",
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "any"
                  }
                }
              ]
            }
          ],
          "events": [
            {
              "name": "it-item-click",
              "type": {
                "text": "CustomEvent"
              }
            }
          ],
          "attributes": [
            {
              "name": "page",
              "type": {
                "text": "string"
              },
              "default": "''",
              "fieldName": "page"
            },
            {
              "name": "current",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "current"
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "disabled"
            }
          ],
          "superclass": {
            "name": "BaseComponent",
            "package": "@italia/globals"
          },
          "tagName": "it-pagination-item",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "ItPaginationItem",
          "declaration": {
            "name": "ItPaginationItem",
            "module": "src/it-pagination-item.ts"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "it-pagination-item",
          "declaration": {
            "name": "ItPaginationItem",
            "module": "src/it-pagination-item.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/it-pagination.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "ItPagination",
          "members": [
            {
              "kind": "field",
              "name": "shadowRootOptions",
              "type": {
                "text": "object"
              },
              "static": true,
              "default": "{ ...BaseComponent.shadowRootOptions, delegatesFocus: true }"
            },
            {
              "kind": "field",
              "name": "paginationItems",
              "type": {
                "text": "ItPaginationItem[]"
              },
              "privacy": "private"
            },
            {
              "kind": "field",
              "name": "prevElements",
              "type": {
                "text": "HTMLElement[]"
              },
              "privacy": "private"
            },
            {
              "kind": "field",
              "name": "nextElements",
              "type": {
                "text": "HTMLElement[]"
              },
              "privacy": "private"
            },
            {
              "kind": "field",
              "name": "totalElements",
              "type": {
                "text": "HTMLElement[]"
              },
              "privacy": "private"
            },
            {
              "kind": "field",
              "name": "value",
              "type": {
                "text": "string"
              },
              "default": "'1'",
              "attribute": "value",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "total",
              "default": "undefined",
              "attribute": "total",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "align",
              "type": {
                "text": "PaginationAlignment"
              },
              "default": "'center'",
              "attribute": "align",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "disableResponsive",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "disableResponsive",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "simpleMode",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "simple-mode",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "visiblePages",
              "type": {
                "text": "number"
              },
              "default": "5",
              "attribute": "visible-pages",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "itAriaLabel",
              "type": {
                "text": "string"
              },
              "default": "''",
              "attribute": "it-aria-label",
              "reflects": true
            },
            {
              "kind": "method",
              "name": "emitPageChange",
              "privacy": "private",
              "parameters": [
                {
                  "name": "newPage",
                  "type": {
                    "text": "number"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handleItemClick",
              "privacy": "private",
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "CustomEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handlePrevClick",
              "privacy": "private",
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "MouseEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handleNextClick",
              "privacy": "private",
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "MouseEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "updatePaginationItemsClasses",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "updatePaginationItems",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "updateNavigationButtons",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "handleSlotChange",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "handlePrevSlotChange",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "handleNextSlotChange",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "handleTotalSlotChange",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "calculatePages",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "number[]"
                }
              },
              "description": "Calculate which pages to display based on simpleMode and visiblePages\nReturns an array of page numbers to show"
            },
            {
              "kind": "method",
              "name": "handlePageClick",
              "privacy": "private",
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "MouseEvent"
                  }
                },
                {
                  "name": "page",
                  "type": {
                    "text": "number"
                  }
                }
              ]
            }
          ],
          "attributes": [
            {
              "name": "value",
              "type": {
                "text": "string"
              },
              "default": "'1'",
              "fieldName": "value"
            },
            {
              "name": "total",
              "default": "undefined",
              "fieldName": "total"
            },
            {
              "name": "align",
              "type": {
                "text": "PaginationAlignment"
              },
              "default": "'center'",
              "fieldName": "align"
            },
            {
              "name": "disableResponsive",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "disableResponsive"
            },
            {
              "name": "simple-mode",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "simpleMode"
            },
            {
              "name": "visible-pages",
              "type": {
                "text": "number"
              },
              "default": "5",
              "fieldName": "visiblePages"
            },
            {
              "name": "it-aria-label",
              "type": {
                "text": "string"
              },
              "default": "''",
              "fieldName": "itAriaLabel"
            }
          ],
          "superclass": {
            "name": "BaseComponent",
            "package": "@italia/globals"
          },
          "tagName": "it-pagination",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "ItPagination",
          "declaration": {
            "name": "ItPagination",
            "module": "src/it-pagination.ts"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "it-pagination",
          "declaration": {
            "name": "ItPagination",
            "module": "src/it-pagination.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/types.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "PAGINATION_SIZES",
          "type": {
            "text": "['sm', 'lg']"
          },
          "default": "['sm', 'lg']"
        },
        {
          "kind": "variable",
          "name": "PAGINATION_ALIGNMENTS",
          "type": {
            "text": "['start', 'center', 'end']"
          },
          "default": "['start', 'center', 'end']"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "PAGINATION_SIZES",
          "declaration": {
            "name": "PAGINATION_SIZES",
            "module": "src/types.ts"
          }
        },
        {
          "kind": "js",
          "name": "PAGINATION_ALIGNMENTS",
          "declaration": {
            "name": "PAGINATION_ALIGNMENTS",
            "module": "src/types.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/it-pagination.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "type": {
            "text": "Meta<PaginationProps>"
          },
          "default": "{ title: 'Componenti/Pagination', tags: ['a11y-ok', 'web-component'], decorators: [ (story, context) => { if (context.parameters.overrideMetaWrapper) return story(); return html` <div style=\"padding-block: 2rem;margin:auto;display:flex;\"> <!-- START COMPONENT --> ${story()} <!-- END COMPONENT --> </div> `; }, ], parameters: { layout: 'fullscreen', docs: { source: { excludeDecorators: true }, }, a11y: { config: { rules: [ { id: 'list', enabled: false, }, { id: 'listitem', enabled: false, }, ], }, }, }, args: { value: '1', total: '5', align: 'center', disableResponsive: false, simpleMode: false, visiblePages: 5, itAriaLabel: 'Paginazione', }, argTypes: { value: { control: 'text', description: 'Pagina corrente selezionata', table: { defaultValue: { summary: '1' } }, }, total: { control: false, description: 'Numero totale di pagine, se non specificato viene calcolato in base agli elementi `it-pagination-item` presenti. Utile per indicare un numero di pagine diverso rispetto agli elementi effettivamente presenti (es. con caricamento dinamico) e in modalità simple-mode', table: { defaultValue: { summary: undefined } }, }, align: { control: 'select', description: 'Allineamento della paginazione', options: PAGINATION_ALIGNMENTS, table: { defaultValue: { summary: 'start' } }, }, disableResponsive: { name: 'disable-responsive', control: 'boolean', description: 'Disabilita responsive mode (nasconde pagine non correnti su mobile)', table: { defaultValue: { summary: 'false' } }, }, simpleMode: { name: 'simple-mode', control: false, description: \"Abilita simple mode (mostra solo pagina corrente / totale, ottimizzato per mobile). Vai alla storia dedicata per l'esempio.\", table: { defaultValue: { summary: 'false' } }, }, visiblePages: { name: 'visible-pages', control: 'number', description: \"Numero di pagine visibili quando il totale (total) supera questo valore. Verranno mostrati i puntini '...' per indicare la presenza di ulteriori pagine.\", table: { defaultValue: { summary: '5' } }, }, itAriaLabel: { name: 'it-aria-label', control: 'text', description: \"Imposta l'attributo `aria-label` per il componente, utile per migliorare l'accessibilità.\", table: { defaultValue: { summary: 'Paginazione' } }, }, }, }"
        },
        {
          "kind": "variable",
          "name": "EsempioInterattivo",
          "type": {
            "text": "Story"
          },
          "default": "{ tags: ['!dev'], render: (args) => renderComponent(args, defaultItems), }"
        },
        {
          "kind": "variable",
          "name": "ConNavigazione",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Con pulsanti avanti e indietro', render: () => html` <it-pagination value=\"3\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <it-pagination-item page=\"4\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>4</a> </it-pagination-item> <it-pagination-item page=\"5\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>5</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "ConNavigazioneTestuale",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Con link testuali', render: () => html` <it-pagination value=\"3\"> <a href=\"#\" slot=\"prev\">Precedente</a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <it-pagination-item page=\"4\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>4</a> </it-pagination-item> <it-pagination-item page=\"5\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>5</a> </it-pagination-item> <a href=\"#\" slot=\"next\">Successiva</a> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "AllineamentoStart",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Allineamento a sinistra', render: () => html` <it-pagination value=\"2\" align=\"start\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> <p slot=\"total\">Totale 300 elementi</p> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "AllineamentoCenter",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Allineamento centrato', render: () => html` <it-pagination value=\"2\" align=\"center\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> <p slot=\"total\">Totale 300 elementi</p> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "AllineamentoEnd",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Allineamento a destra', decorators: [(story) => html` <div style=\"width:100%\">${story()}</div> `], render: () => html` <it-pagination value=\"2\" align=\"end\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> <p slot=\"total\">Totale 300 elementi</p> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "Responsive",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Paginazione responsive', render: () => html` <it-pagination value=\"1\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <it-pagination-item page=\"4\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>4</a> </it-pagination-item> <it-pagination-item page=\"5\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina</span>5</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> <p slot=\"total\">Totale 300 elementi</p> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "ConTotale",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Con numero totale di pagine', render: () => html` <it-pagination value=\"3\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <it-pagination-item page=\"4\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>4</a> </it-pagination-item> <it-pagination-item page=\"5\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>5</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> <p slot=\"total\">Totale 300 elementi</p> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "ConPageChanger",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Con selettore pagine', render: () => html` <it-pagination value=\"3\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <it-pagination-item page=\"4\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>4</a> </it-pagination-item> <it-pagination-item page=\"5\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>5</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> <div slot=\"page-changer\"> <label for=\"page-size\" class=\"visually-hidden\">Elementi per pagina:</label> <select id=\"page-size\" class=\"form-select\" style=\"padding-right: 1.5rem;\"> <option value=\"10\">10/pagina</option> <option value=\"20\" selected>20/pagina</option> <option value=\"50\">50/pagina</option> <option value=\"100\">100/pagina</option> </select> </div> </it-pagination> <script> const pageSizeSelect = document.getElementById('page-size'); pageSizeSelect.addEventListener('change', (event) => { const selectedValue = event.target.value; console.log('PageChanger: Elementi per pagina selezionati:', selectedValue); }); </script> `, }"
        },
        {
          "kind": "variable",
          "name": "ConJumpToPage",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Con salto a pagina specifica', render: () => html` <it-pagination id=\"jump\" value=\"5\" total=\"10\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <it-pagination-item page=\"1\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>1</a> </it-pagination-item> <it-pagination-item page=\"2\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>2</a> </it-pagination-item> <it-pagination-item page=\"3\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>3</a> </it-pagination-item> <it-pagination-item page=\"4\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>4</a> </it-pagination-item> <it-pagination-item page=\"5\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>5</a> </it-pagination-item> <it-pagination-item page=\"6\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>6</a> </it-pagination-item> <it-pagination-item page=\"7\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>7</a> </it-pagination-item> <it-pagination-item page=\"8\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>8</a> </it-pagination-item> <it-pagination-item page=\"9\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>9</a> </it-pagination-item> <it-pagination-item page=\"10\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>10</a> </it-pagination-item> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> <div slot=\"jump-to-page\" style=\"display: flex; align-items: center; gap: 0.5rem;\"> <it-input id=\"jumper-example\" type=\"number\" name=\"jumper-example\" placeholder=\"Vai a ...\" label-hidden style=\"width: 80px;\" > <span slot=\"label\">Vai a ...</span> </it-input> </div> </it-pagination> <script> const jumperInput = document.getElementById('jumper-example'); const pagination = document.getElementById('jump'); const pTot = parseInt(pagination.getAttribute('total')); jumperInput.addEventListener('it-change', () => { const pageNumber = jumperInput.value; if (pageNumber < 1 || pageNumber > pTot) { console.log('JumpToPage: Numero di pagina non valido', pageNumber); return; } console.log('JumpToPage: Vai a pagina', pageNumber); pagination.value = pageNumber.toString(); }); </script> `, }"
        },
        {
          "kind": "variable",
          "name": "SimpleMode",
          "type": {
            "text": "Story"
          },
          "default": "{ args: { value: '3', total: '10', }, render: () => html` <it-pagination simple-mode value=\"1\" total=\"5\"> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> </it-pagination> `, }"
        },
        {
          "kind": "variable",
          "name": "MoreMode",
          "type": {
            "text": "Story"
          },
          "default": "{ args: { value: '25', total: '50', visiblePages: 5, }, render: () => html` <it-pagination value=\"25\" total=\"50\" visible-pages=\"5\" disable-responsive> <a href=\"#\" slot=\"prev\"> <it-icon name=\"it-chevron-left\"></it-icon> <span class=\"visually-hidden\">Pagina precedente</span> </a> ${Array.from({ length: 50 }, (_, i) => i + 1).map( (page) => html` <it-pagination-item page=\"${page}\"> <a href=\"#\"><span class=\"d-inline-block d-sm-none\">Pagina </span>${page}</a> </it-pagination-item> `, )} <a href=\"#\" slot=\"next\"> <it-icon name=\"it-chevron-right\"></it-icon> <span class=\"visually-hidden\">Pagina successiva</span> </a> </it-pagination> `, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "EsempioInterattivo",
          "declaration": {
            "name": "EsempioInterattivo",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ConNavigazione",
          "declaration": {
            "name": "ConNavigazione",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ConNavigazioneTestuale",
          "declaration": {
            "name": "ConNavigazioneTestuale",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "AllineamentoStart",
          "declaration": {
            "name": "AllineamentoStart",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "AllineamentoCenter",
          "declaration": {
            "name": "AllineamentoCenter",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "AllineamentoEnd",
          "declaration": {
            "name": "AllineamentoEnd",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Responsive",
          "declaration": {
            "name": "Responsive",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ConTotale",
          "declaration": {
            "name": "ConTotale",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ConPageChanger",
          "declaration": {
            "name": "ConPageChanger",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ConJumpToPage",
          "declaration": {
            "name": "ConJumpToPage",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "SimpleMode",
          "declaration": {
            "name": "SimpleMode",
            "module": "stories/it-pagination.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "MoreMode",
          "declaration": {
            "name": "MoreMode",
            "module": "stories/it-pagination.stories.ts"
          }
        }
      ]
    }
  ]
}