npm - @zanichelli/albe-web-components - Versions diffs - 16.3.0 → 16.3.1 - Mend

@zanichelli/albe-web-components 16.3.0 → 16.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1042) hide show

package/dist/collection/components/table/z-table/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/table/z-table/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTable} from \".\";\nimport {PopoverPosition, SortDirection, VisibilityCondition} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTableStoriesArgs = ZTable & CSSVarsArguments<\"z-table--cells-padding\">;\n\n/*\n ## Accessibility\n \n The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.\n * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.\n * The ARIA attributes used are the following:\n * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled\n * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.\n * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.\n /\nconst StoryMeta = {\n title: \"ZTable\",\n component: \"z-table\",\n args: {\n \"bordered\": true,\n \"--z-table--cells-padding\": \"16px\",\n },\n} satisfies Meta<ZTableStoriesArgs>;\n\nexport default StoryMeta;\n\nconst cellsTemplate = (count = 1): TemplateResult =>\n html`${repeat([...new Array(count)], () => html`<z-td>Contenuto cella</z-td>`)}`;\n\nexport const Default = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], () => html`<z-th>Titolo colonna</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(5)], () => html`<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.\n * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a \"prevent-expand\" class on that item, in order to prevent unwanted row expansions.\n /\nexport const ExpandableRows = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], (_, index) => html`<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(5)}\n </z-tr>\n <z-tr>${repeat([...new Array(8)], () => html`<z-td>Contenuto cella</z-td>`)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked without expanding the row')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n ${cellsTemplate(5)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr>${cellsTemplate(8)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu=\"always\">\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(6)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.\n * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.\n /\nexport const Sticky = {\n args: {\n stickyHeader: true,\n stickyFooter: true,\n stickFirstColumn: true,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n \"height\": \"400px\",\n })}\n >\n <z-thead .sticky=${args.stickyHeader}>\n <z-tr>\n <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>\n ${repeat([...new Array(7)], (_, index) => html`<z-th>Colonna ${index + 2}</z-th>`)}\n </z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(4)}\n </z-tr>\n ${repeat(\n [...new Array(5)],\n () =>\n html`<z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n </z-tr>`\n )}\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(6)}\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot .sticky=${args.stickyFooter}>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.\n * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.\n /\nexport const CellsWithContextualMenu = {\n argTypes: {\n showMenu: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"hidden\",\n },\n },\n popoverPosition: {\n options: Object.values(PopoverPosition),\n control: {\n type: \"select\",\n },\n },\n options: [null, ...Object.values(VisibilityCondition)],\n },\n },\n args: {\n showMenu: VisibilityCondition.HOVER,\n popoverPosition: PopoverPosition.AUTO,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .showMenu=${args.showMenu}\n .popoverPosition=${args.popoverPosition}\n >\n Heading con menu\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>\n ${repeat(\n [...new Array(3)],\n () =>\n html`<z-tr>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n <z-td>Contenuto cella</z-td>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n </z-tr>`\n )}\n </z-tbody>\n </z-table>`,\n};\n\n/\n Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.\n * Clicking the button will fire the `sort` event with the `sortDirection` as detail.\n */\nexport const SortAction = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .sortDirection=${SortDirection.ASC}\n .showMenu=${VisibilityCondition.HOVER}\n >\n Colonna 2 con menu e sorting\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(3)], () => html`<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>\n </z-table>`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/table/z-table/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,eAAe,EAAE,aAAa,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAEnF,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;;;;;;;;GAUG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;QAChB,0BAA0B,EAAE,MAAM;KACnC;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,aAAa,GAAG,CAAC,KAAK,GAAG,CAAC,EAAkB,EAAE,CAClD,IAAI,CAAA,GAAG,MAAM,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,8BAA8B,CAAC,EAAE,CAAC;AAEnF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;kBAEU,IAAI,CAAC,QAAQ;cACjB,QAAQ,CAAC;QACf,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;KAC7D,CAAC;;;gBAGQ,MAAM,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,6BAA6B,CAAC;;iBAEjE,MAAM,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,SAAS,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;eAMzE;CACd,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;kBAEU,IAAI,CAAC,QAAQ;cACjB,QAAQ,CAAC;QACf,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;KAC7D,CAAC;;;gBAGQ,MAAM,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA,iBAAiB,KAAK,GAAG,CAAC,SAAS,CAAC;;;;;;;;;;YAUpF,aAAa,CAAC,CAAC,CAAC;;gBAEZ,MAAM,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,8BAA8B,CAAC;;;;;;;;;;;;;YAavE,aAAa,CAAC,CAAC,CAAC;;;gBAGZ,aAAa,CAAC,CAAC,CAAC;;;;;;;YAOpB,aAAa,CAAC,CAAC,CAAC;;;;;;;;;eASb;CACd,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,gBAAgB,EAAE,IAAI;KACvB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;kBAEU,IAAI,CAAC,QAAQ;cACjB,QAAQ,CAAC;QACf,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;QAC5D,QAAQ,EAAE,OAAO;KAClB,CAAC;;yBAEiB,IAAI,CAAC,YAAY;;0BAEhB,IAAI,CAAC,gBAAgB;YACnC,MAAM,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA,iBAAiB,KAAK,GAAG,CAAC,SAAS,CAAC;;;;;0BAKlE,IAAI,CAAC,gBAAgB;;;;;;;YAOnC,aAAa,CAAC,CAAC,CAAC;;UAElB,MAAM,CACN,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EACjB,GAAG,EAAE,CACH,IAAI,CAAA;8BACc,IAAI,CAAC,gBAAgB;gBACnC,aAAa,CAAC,CAAC,CAAC;oBACZ,CACX;;0BAEiB,IAAI,CAAC,gBAAgB;YACnC,aAAa,CAAC,CAAC,CAAC;;;;;;;;;;;;;0BAaF,IAAI,CAAC,gBAAgB;YACnC,aAAa,CAAC,CAAC,CAAC;;;;yBAIH,IAAI,CAAC,YAAY;;;;;eAK3B;CACd,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;iBACf;aACF;YACD,eAAe,EAAE;gBACf,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;gBACvC,OAAO,EAAE;oBACP,IAAI,EAAE,QAAQ;iBACf;aACF;YACD,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;SACvD;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,mBAAmB,CAAC,KAAK;QACnC,eAAe,EAAE,eAAe,CAAC,IAAI;KACtC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;kBAEU,IAAI,CAAC,QAAQ;cACjB,QAAQ,CAAC;QACf,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;KAC7D,CAAC;;;;;;wBAMgB,IAAI,CAAC,QAAQ;+BACN,IAAI,CAAC,eAAe;;;;;;;;;UASzC,MAAM,CACN,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EACjB,GAAG,EAAE,CACH,IAAI,CAAA;gCACgB,IAAI,CAAC,QAAQ;;;;;gCAKb,IAAI,CAAC,QAAQ;;;;oBAIzB,CACX;;eAEM;CACd,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;kBAEU,IAAI,CAAC,QAAQ;cACjB,QAAQ,CAAC;QACf,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;KAC7D,CAAC;;;;;;6BAMqB,aAAa,CAAC,GAAG;wBACtB,mBAAmB,CAAC,KAAK;;;;;iCAKhB,aAAa,CAAC,IAAI;;;iBAGlC,MAAM,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,SAAS,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;eACzE;CACd,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTable} from \".\";\nimport {PopoverPosition, SortDirection, VisibilityCondition} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTableStoriesArgs = ZTable & CSSVarsArguments<\"z-table--cells-padding\">;\n\n/*\n ## Accessibility\n \n The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.\n * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.\n * The ARIA attributes used are the following:\n * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled\n * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.\n * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.\n /\nconst StoryMeta = {\n title: \"ZTable\",\n component: \"z-table\",\n args: {\n \"bordered\": true,\n \"--z-table--cells-padding\": \"16px\",\n },\n} satisfies Meta<ZTableStoriesArgs>;\n\nexport default StoryMeta;\n\nconst cellsTemplate = (count = 1): TemplateResult =>\n html`${repeat([...new Array(count)], () => html`<z-td>Contenuto cella</z-td>`)}`;\n\nexport const Default = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], () => html`<z-th>Titolo colonna</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(5)], () => html`<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.\n * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a \"prevent-expand\" class on that item, in order to prevent unwanted row expansions.\n /\nexport const ExpandableRows = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], (_, index) => html`<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(5)}\n </z-tr>\n <z-tr>${repeat([...new Array(8)], () => html`<z-td>Contenuto cella</z-td>`)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked without expanding the row')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n ${cellsTemplate(5)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr>${cellsTemplate(8)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu=\"always\">\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(6)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.\n * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.\n /\nexport const Sticky = {\n args: {\n stickyHeader: true,\n stickyFooter: true,\n stickFirstColumn: true,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n \"height\": \"400px\",\n })}\n >\n <z-thead .sticky=${args.stickyHeader}>\n <z-tr>\n <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>\n ${repeat([...new Array(7)], (_, index) => html`<z-th>Colonna ${index + 2}</z-th>`)}\n </z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(4)}\n </z-tr>\n ${repeat(\n [...new Array(5)],\n () =>\n html`<z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n </z-tr>`\n )}\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(6)}\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot .sticky=${args.stickyFooter}>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.\n * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.\n /\nexport const CellsWithContextualMenu = {\n argTypes: {\n showMenu: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"hidden\",\n },\n },\n popoverPosition: {\n options: Object.values(PopoverPosition),\n control: {\n type: \"select\",\n },\n },\n options: [null, ...Object.values(VisibilityCondition)],\n },\n },\n args: {\n showMenu: VisibilityCondition.HOVER,\n popoverPosition: PopoverPosition.AUTO,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .showMenu=${args.showMenu}\n .popoverPosition=${args.popoverPosition}\n >\n Heading con menu\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>\n ${repeat(\n [...new Array(3)],\n () =>\n html`<z-tr>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n <z-td>Contenuto cella</z-td>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n </z-tr>`\n )}\n </z-tbody>\n </z-table>`,\n};\n\n/\n Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.\n * Clicking the button will fire the `sort` event with the `sortDirection` as detail.\n */\nexport const SortAction = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .sortDirection=${SortDirection.ASC}\n .showMenu=${VisibilityCondition.HOVER}\n >\n Colonna 2 con menu e sorting\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(3)], () => html`<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>\n </z-table>`,\n};\n"]}

package/dist/collection/components/table/z-tbody/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-tbody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/*\n ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n tag: \"z-tbody\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTbody {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tbody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/*\n ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n tag: \"z-tbody\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTbody {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tfoot/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n /\n@Component({\n tag: \"z-tfoot\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTfoot {\n /\n If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n /\n@Component({\n tag: \"z-tfoot\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTfoot {\n /\n If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-thead/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZThead component.\n * @slot - ZThead content (`z-tr`).\n /\n@Component({\n tag: \"z-thead\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZThead {\n /\n If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZThead component.\n * @slot - ZThead content (`z-tr`).\n /\n@Component({\n tag: \"z-thead\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZThead {\n /\n If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tr/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/*\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/*\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-accordion/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/*\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/*\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"]}

package/dist/collection/components/z-accordion/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AAEjB,MAAM,YAAY,GAAG;IACnB,kBAAkB,EAAE,sBAAsB,CAAC,IAAI,CAAC;IAChD,2BAA2B,EAAE,sBAAsB,CAAC,IAAI,CAAC;IACzD,oCAAoC,kCAC/B,sBAAsB,CAAC,IAAI,CAAC,KAC/B,EAAE,EAAE;YACF,GAAG,EAAE,YAAY;YACjB,MAAM,EAAE,IAAI;SACb,GACF;IACD,0BAA0B,EAAE,sBAAsB,CAAC,IAAI,CAAC;IACxD,0BAA0B,EAAE,sBAAsB,CAAC,IAAI,CAAC;IACxD,2BAA2B,EAAE,sBAAsB,CAAC,IAAI,CAAC;IACzD,+BAA+B,kCAC1B,sBAAsB,CAAC,IAAI,CAAC,KAC/B,EAAE,EAAE;YACF,GAAG,EAAE,WAAW;YAChB,MAAM,EAAE,IAAI;SACb,GACF;CACO,CAAC;AAUX;;GAEG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,aAAa;IACxB,QAAQ,kCACH,YAAY,KACf,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;YAC7C,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE;oBACN,IAAI,EAAE,GAAG;iBACV;aACF;SACF,EACD,MAAM,EAAE;YACN,EAAE,EAAE;gBACF,GAAG,EAAE,SAAS;gBACd,EAAE,EAAE,gBAAgB,CAAC,UAAU;aAChC;SACF,EACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;YACnC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF,EACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;YACxC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF,GACF;IACD,IAAI,EAAE;QACJ,kBAAkB,EAAE,IAAI;QACxB,2BAA2B,EAAE,IAAI;QACjC,oCAAoC,EAAE,IAAI;QAC1C,0BAA0B,EAAE,IAAI;QAChC,0BAA0B,EAAE,IAAI;QAChC,2BAA2B,EAAE,IAAI;QACjC,+BAA+B,EAAE,IAAI;QACrC,6BAA6B,EAAE,mBAAmB;QAClD,4BAA4B,EAAE,6BAA6B;QAC3D,iCAAiC,EAAE,gBAAgB;QACnD,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,YAAY;QACrB,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,WAAW,CAAC,GAAG;QACvB,SAAS,EAAE,gBAAgB,CAAC,OAAO;KACpC;IACD,MAAM,EAAE,CAAC,IAAU,EAAkB,EAAE,CACrC,IAAI,CAAA;mBACW,IAAI,CAAC,SAAS;cACnB,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;gBACP,IAAI,CAAC,MAAM;cACb,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;gBACN,IAAI,CAAC,OAAO;cACd,QAAQ,CAAC;QACf,+BAA+B,EAAE,IAAI,CAAC,+BAA+B,CAAC;QACtE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;QAC5C,2BAA2B,EAAE,IAAI,CAAC,2BAA2B,CAAC;QAC9D,oCAAoC,EAAE,IAAI,CAAC,oCAAoC,CAAC;QAChF,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;QAC5D,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;QAC5D,2BAA2B,EAAE,IAAI,CAAC,2BAA2B,CAAC;QAC9D,6BAA6B,EAAE,IAAI,CAAC,6BAA6B,CAAC;QAClE,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,CAAC;QAChE,iCAAiC,EAAE,IAAI,CAAC,iCAAiC,CAAC;KAC3E,CAAC;;;;;;;mBAOW;CACoB,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE;QACR,gCAAgC,EAAE,YAAY,CAAC,+BAA+B,CAAC;QAC/E,gCAAgC,EAAE,YAAY,CAAC,+BAA+B,CAAC;QAC/E,gCAAgC,EAAE,YAAY,CAAC,+BAA+B,CAAC;KAChF;IACD,IAAI,EAAE;QACJ,gCAAgC,EAAE,IAAI;QACtC,gCAAgC,EAAE,IAAI;QACtC,gCAAgC,EAAE,IAAI;KACvC;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,CAAC;SAClB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA,GAAG;QACL,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;QACtB,SAAS,CAAC,MAAM,iCACX,IAAI,KACP,+BAA+B,EAAE,IAAI,CAAC,gCAAgC,CAAC,IACvE;QACF,SAAS,CAAC,MAAM,iCACX,IAAI,KACP,+BAA+B,EAAE,IAAI,CAAC,gCAAgC,CAAC,IACvE;QACF,SAAS,CAAC,MAAM,iCACX,IAAI,KACP,+BAA+B,EAAE,IAAI,CAAC,gCAAgC,CAAC,IACvE;KACH,EAAE;CACU,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;cACnB,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;gBACP,IAAI,CAAC,MAAM;cACb,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;gBACN,IAAI,CAAC,OAAO;cACd,QAAQ,CAAC;QACf,+BAA+B,EAAE,IAAI,CAAC,+BAA+B,CAAC;QACtE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;QAC5C,2BAA2B,EAAE,IAAI,CAAC,2BAA2B,CAAC;QAC9D,oCAAoC,EAAE,IAAI,CAAC,oCAAoC,CAAC;QAChF,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;QAC5D,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,CAAC;QAC5D,2BAA2B,EAAE,IAAI,CAAC,2BAA2B,CAAC;QAC9D,6BAA6B,EAAE,IAAI,CAAC,6BAA6B,CAAC;QAClE,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,CAAC;QAChE,iCAAiC,EAAE,IAAI,CAAC,iCAAiC,CAAC;KAC3E,CAAC;;;;;;;;;;;GAWL;CACc,CAAC","sourcesContent":["import {Args, Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZAccordion} from \".\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\nconst cssPropsArgs = {\n \"--z-accordion-bg\": getColorTokenArgConfig(true),\n \"--z-accordion-label-color\": getColorTokenArgConfig(true),\n \"--z-accordion-disabled-label-color\": {\n ...getColorTokenArgConfig(true),\n if: {\n arg: \"isDisabled\",\n truthy: true,\n },\n },\n \"--z-accordion-content-bg\": getColorTokenArgConfig(true),\n \"--z-accordion-content-fg\": getColorTokenArgConfig(true),\n \"--z-accordion-hover-color\": getColorTokenArgConfig(true),\n \"--z-accordion-highlight-color\": {\n ...getColorTokenArgConfig(true),\n if: {\n arg: \"highlight\",\n truthy: true,\n },\n },\n} as const;\n\ntype ZAccordionStoriesArgs = ZAccordion &\n CSSVarsArguments<\n \| keyof typeof cssPropsArgs\n \| `z-accordion-${\"left\" \| \"right\"}-padding`\n \| \"z-accordion-label-font-weight\"\n \| `z-accordion-highlight-color${number \| undefined}`\n >;\n\n/*\n To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.\n /\nconst StoryMeta = {\n title: \"ZAccordion\",\n component: \"z-accordion\",\n argTypes: {\n ...cssPropsArgs,\n icon: {\n options: [null, ...Object.keys(ICONS).sort()],\n control: {\n type: \"select\",\n labels: {\n null: \"—\",\n },\n },\n },\n shadow: {\n if: {\n arg: \"variant\",\n eq: AccordionVariant.BACKGROUND,\n },\n },\n size: {\n options: Object.values(ControlSize),\n control: {\n type: \"inline-radio\",\n },\n },\n variant: {\n options: Object.values(AccordionVariant),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n \"--z-accordion-bg\": null,\n \"--z-accordion-label-color\": null,\n \"--z-accordion-disabled-label-color\": null,\n \"--z-accordion-content-bg\": null,\n \"--z-accordion-content-fg\": null,\n \"--z-accordion-hover-color\": null,\n \"--z-accordion-highlight-color\": null,\n \"--z-accordion-right-padding\": \"var(--space-unit)\",\n \"--z-accordion-left-padding\": \"calc(var(--space-unit) 2)\",\n \"--z-accordion-label-font-weight\": \"var(--font-sb)\",\n \"highlight\": false,\n \"icon\": null,\n \"isDisabled\": false,\n \"label\": \"Text label\",\n \"open\": false,\n \"shadow\": true,\n \"size\": ControlSize.BIG,\n \"variant\": AccordionVariant.DEFAULT,\n },\n render: (args: Args): TemplateResult =>\n html`<z-accordion\n .highlight=${args.highlight}\n .icon=${args.icon}\n .isDisabled=${args.isDisabled}\n .open=${args.open}\n .shadow=${args.shadow}\n label=${args.label}\n size=${args.size}\n variant=${args.variant}\n style=${styleMap({\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n })}\n >\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n sum nescius esse utilitatem in historia, non modo voluptatem.\n </z-accordion>`,\n} satisfies Meta<ZAccordionStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZAccordionStoriesArgs>;\n\nexport const Default = {};\n\n/*\n When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.\n */\nexport const Stack = {\n argTypes: {\n \"--z-accordion-highlight-color2\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n \"--z-accordion-highlight-color3\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n \"--z-accordion-highlight-color4\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n },\n args: {\n \"--z-accordion-highlight-color2\": null,\n \"--z-accordion-highlight-color3\": null,\n \"--z-accordion-highlight-color4\": null,\n },\n parameters: {\n controls: {\n exclude: [\"open\"],\n },\n },\n render: (args) =>\n html`${[\n StoryMeta.render(args),\n StoryMeta.render({\n ...args,\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color2\"],\n }),\n StoryMeta.render({\n ...args,\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color3\"],\n }),\n StoryMeta.render({\n ...args,\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color4\"],\n }),\n ]}`,\n} satisfies Story;\n\nexport const WithTags = {\n render: (args) => html`\n <z-accordion\n .highlight=${args.highlight}\n .icon=${args.icon}\n .isDisabled=${args.isDisabled}\n .open=${args.open}\n .shadow=${args.shadow}\n label=${args.label}\n size=${args.size}\n variant=${args.variant}\n style=${styleMap({\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n })}\n >\n <z-tag slot=\"tag\">Tag 1</z-tag>\n <z-tag slot=\"tag\">Tag 2</z-tag>\n <z-tag slot=\"tag\">Tag 3</z-tag>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n sum nescius esse utilitatem in historia, non modo voluptatem.\n </z-accordion>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-accordion/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Args, Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZAccordion} from \".\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\nconst cssPropsArgs = {\n \"--z-accordion-bg\": getColorTokenArgConfig(true),\n \"--z-accordion-label-color\": getColorTokenArgConfig(true),\n \"--z-accordion-disabled-label-color\": {\n ...getColorTokenArgConfig(true),\n if: {\n arg: \"isDisabled\",\n truthy: true,\n },\n },\n \"--z-accordion-content-bg\": getColorTokenArgConfig(true),\n \"--z-accordion-content-fg\": getColorTokenArgConfig(true),\n \"--z-accordion-hover-color\": getColorTokenArgConfig(true),\n \"--z-accordion-highlight-color\": {\n ...getColorTokenArgConfig(true),\n if: {\n arg: \"highlight\",\n truthy: true,\n },\n },\n} as const;\n\ntype ZAccordionStoriesArgs = ZAccordion &\n CSSVarsArguments<\n \| keyof typeof cssPropsArgs\n \| `z-accordion-${\"left\" \| \"right\"}-padding`\n \| \"z-accordion-label-font-weight\"\n \| `z-accordion-highlight-color${number \| undefined}`\n >;\n\n/*\n To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.\n /\nconst StoryMeta = {\n title: \"ZAccordion\",\n component: \"z-accordion\",\n argTypes: {\n ...cssPropsArgs,\n icon: {\n options: [null, ...Object.keys(ICONS).sort()],\n control: {\n type: \"select\",\n labels: {\n null: \"—\",\n },\n },\n },\n shadow: {\n if: {\n arg: \"variant\",\n eq: AccordionVariant.BACKGROUND,\n },\n },\n size: {\n options: Object.values(ControlSize),\n control: {\n type: \"inline-radio\",\n },\n },\n variant: {\n options: Object.values(AccordionVariant),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n \"--z-accordion-bg\": null,\n \"--z-accordion-label-color\": null,\n \"--z-accordion-disabled-label-color\": null,\n \"--z-accordion-content-bg\": null,\n \"--z-accordion-content-fg\": null,\n \"--z-accordion-hover-color\": null,\n \"--z-accordion-highlight-color\": null,\n \"--z-accordion-right-padding\": \"var(--space-unit)\",\n \"--z-accordion-left-padding\": \"calc(var(--space-unit) 2)\",\n \"--z-accordion-label-font-weight\": \"var(--font-sb)\",\n \"highlight\": false,\n \"icon\": null,\n \"isDisabled\": false,\n \"label\": \"Text label\",\n \"open\": false,\n \"shadow\": true,\n \"size\": ControlSize.BIG,\n \"variant\": AccordionVariant.DEFAULT,\n },\n render: (args: Args): TemplateResult =>\n html`<z-accordion\n .highlight=${args.highlight}\n .icon=${args.icon}\n .isDisabled=${args.isDisabled}\n .open=${args.open}\n .shadow=${args.shadow}\n label=${args.label}\n size=${args.size}\n variant=${args.variant}\n style=${styleMap({\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n })}\n >\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n sum nescius esse utilitatem in historia, non modo voluptatem.\n </z-accordion>`,\n} satisfies Meta<ZAccordionStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZAccordionStoriesArgs>;\n\nexport const Default = {};\n\n/*\n When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.\n */\nexport const Stack = {\n argTypes: {\n \"--z-accordion-highlight-color2\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n \"--z-accordion-highlight-color3\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n \"--z-accordion-highlight-color4\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n },\n args: {\n \"--z-accordion-highlight-color2\": null,\n \"--z-accordion-highlight-color3\": null,\n \"--z-accordion-highlight-color4\": null,\n },\n parameters: {\n controls: {\n exclude: [\"open\"],\n },\n },\n render: (args) =>\n html`${[\n StoryMeta.render(args),\n StoryMeta.render({\n ...args,\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color2\"],\n }),\n StoryMeta.render({\n ...args,\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color3\"],\n }),\n StoryMeta.render({\n ...args,\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color4\"],\n }),\n ]}`,\n} satisfies Story;\n\nexport const WithTags = {\n render: (args) => html`\n <z-accordion\n .highlight=${args.highlight}\n .icon=${args.icon}\n .isDisabled=${args.isDisabled}\n .open=${args.open}\n .shadow=${args.shadow}\n label=${args.label}\n size=${args.size}\n variant=${args.variant}\n style=${styleMap({\n \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n })}\n >\n <z-tag slot=\"tag\">Tag 1</z-tag>\n <z-tag slot=\"tag\">Tag 2</z-tag>\n <z-tag slot=\"tag\">Tag 3</z-tag>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n sum nescius esse utilitatem in historia, non modo voluptatem.\n </z-accordion>\n `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-anchor-navigation/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;2BASR,IAAI;yBAMN,KAAK;;IAOjB;;OAEG;IACK,UAAU;QAChB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CACpE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAClE,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,KAAK,cAAc,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS;YAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/*\n Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n /\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /\n If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n /\n @Prop({reflect: true})\n hideUnselected = false;\n\n /\n Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n /\n @Prop()\n autoCurrent = true;\n\n /\n Whether the mobile list is collapsed.\n /\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /* Reference to the nav element. /\n private nav: HTMLElement;\n\n /\n Set `aria-current` attribute to the anchors.\n /\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /\n Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;2BASR,IAAI;yBAMN,KAAK;;IAOjB;;OAEG;IACK,UAAU;QAChB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CACpE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAClE,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,KAAK,cAAc,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS;YAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/*\n Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n /\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /\n If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n /\n @Prop({reflect: true})\n hideUnselected = false;\n\n /\n Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n /\n @Prop()\n autoCurrent = true;\n\n /\n Whether the mobile list is collapsed.\n /\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /* Reference to the nav element. /\n private nav: HTMLElement;\n\n /\n Set `aria-current` attribute to the anchors.\n /\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /\n Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-anchor-navigation/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEqB,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4H7D;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n title: \"ZAnchorNavigation\",\n component: \"z-anchor-navigation\",\n args: {\n hideUnselected: false,\n },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation .hideUnselected=${args.hideUnselected}>\n <div>\n <a\n href=\"#first-section\"\n target=\"_self\"\n >First section</a\n >\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a\n href=\"#second-section\"\n target=\"_self\"\n >Second section</a\n >\n </div>\n <div>\n <a\n href=\"#third-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a\n href=\"#fourth-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div>\n <div id=\"first-section\">\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"second-section\">\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"third-section\">\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"fourth-section\">\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/*\n Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n args: {\n autoCurrent: false,\n },\n parameters: {\n controls: {\n exclude: [\"autoCurrent\"],\n },\n },\n render: (args) => html`\n <script>\n Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n item.addEventListener(\"click\", (ev) => {\n const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n const nav = current?.closest(\"nav\");\n Array.from(nav?.children ?? []).forEach((item) => {\n const isCurrent = item.contains(current);\n if (isCurrent) {\n item.setAttribute(\"data-current\", \"\");\n } else {\n item.removeAttribute(\"data-current\");\n }\n const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n item?.setAttribute(\"aria-current\", isCurrent.toString());\n });\n const section = document.querySelector(\"#\" + sectionID);\n section?.scrollIntoView();\n })\n );\n </script>\n\n <div class=\"z-anchor-navigation-manual-current\">\n <z-button\n size=\"x-small\"\n data-to=\"first-section\"\n >To first section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"second-section\"\n >To second section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"third-section\"\n >To third section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"fourth-section\"\n >Highlight fourth section</z-button\n >\n </div>\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation\n .hideUnselected=${args.hideUnselected}\n .autoCurrent=${args.autoCurrent}\n >\n <div>\n <a id=\"first-section-anchor\">First section</a>\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a id=\"second-section-anchor\">Second section</a>\n </div>\n <div>\n <a id=\"third-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a id=\"fourth-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div class=\"z-anchor-navigation-demo-sections\">\n <div\n class=\"section\"\n id=\"first-section\"\n >\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"second-section\"\n >\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"third-section\"\n >\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"fourth-section\"\n >\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEqB,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4H7D;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n title: \"ZAnchorNavigation\",\n component: \"z-anchor-navigation\",\n args: {\n hideUnselected: false,\n },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation .hideUnselected=${args.hideUnselected}>\n <div>\n <a\n href=\"#first-section\"\n target=\"_self\"\n >First section</a\n >\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a\n href=\"#second-section\"\n target=\"_self\"\n >Second section</a\n >\n </div>\n <div>\n <a\n href=\"#third-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a\n href=\"#fourth-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div>\n <div id=\"first-section\">\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"second-section\">\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"third-section\">\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"fourth-section\">\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/*\n Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n args: {\n autoCurrent: false,\n },\n parameters: {\n controls: {\n exclude: [\"autoCurrent\"],\n },\n },\n render: (args) => html`\n <script>\n Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n item.addEventListener(\"click\", (ev) => {\n const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n const nav = current?.closest(\"nav\");\n Array.from(nav?.children ?? []).forEach((item) => {\n const isCurrent = item.contains(current);\n if (isCurrent) {\n item.setAttribute(\"data-current\", \"\");\n } else {\n item.removeAttribute(\"data-current\");\n }\n const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n item?.setAttribute(\"aria-current\", isCurrent.toString());\n });\n const section = document.querySelector(\"#\" + sectionID);\n section?.scrollIntoView();\n })\n );\n </script>\n\n <div class=\"z-anchor-navigation-manual-current\">\n <z-button\n size=\"x-small\"\n data-to=\"first-section\"\n >To first section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"second-section\"\n >To second section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"third-section\"\n >To third section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"fourth-section\"\n >Highlight fourth section</z-button\n >\n </div>\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation\n .hideUnselected=${args.hideUnselected}\n .autoCurrent=${args.autoCurrent}\n >\n <div>\n <a id=\"first-section-anchor\">First section</a>\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a id=\"second-section-anchor\">Second section</a>\n </div>\n <div>\n <a id=\"third-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a id=\"fourth-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div class=\"z-anchor-navigation-demo-sections\">\n <div\n class=\"section\"\n id=\"first-section\"\n >\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"second-section\"\n >\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"third-section\"\n >\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"fourth-section\"\n >\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}