@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,283 +0,0 @@
-import { html } from "lit";
-import { repeat } from "lit/directives/repeat.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { PopoverPosition, SortDirection, VisibilityCondition } from "../../../beans";
-import { boolean } from "../../../utils/utils";
-import "../../z-button/index";
-import "./index";
-import "./index.stories.css";
-/**
- * ## Accessibility
- *
- * 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.
- * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.
- * The ARIA attributes used are the following:
- * - [`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
- * - [`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)
- * - [`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.
- * - [`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.
- */
-const StoryMeta = {
-    title: "ZTable",
-    component: "z-table",
-    args: {
-        "bordered": true,
-        "--z-table--cells-padding": "16px",
-    },
-};
-export default StoryMeta;
-const cellsTemplate = (count = 1) => html `${repeat([...new Array(count)], () => html `<z-td>Contenuto cella</z-td>`)}`;
-export const Default = {
-    render: (args) => html `<z-table
-      class="z-table-demo"
-      .bordered=${args.bordered}
-      style=${styleMap({
-        "--z-table--cells-padding": args["--z-table--cells-padding"],
-    })}
-    >
-      <z-thead>
-        <z-tr>${repeat([...new Array(8)], () => html `<z-th>Titolo colonna</z-th>`)}</z-tr>
-      </z-thead>
-      <z-tbody>${repeat([...new Array(5)], () => html `<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>
-      <z-tfoot>
-        <z-tr>
-          <z-td colspan="8">Table footer</z-td>
-        </z-tr>
-      </z-tfoot>
-    </z-table>`,
-};
-/**
- * Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.
- * 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.
- */
-export const ExpandableRows = {
-    render: (args) => html `<z-table
-      class="z-table-demo"
-      .bordered=${args.bordered}
-      style=${styleMap({
-        "--z-table--cells-padding": args["--z-table--cells-padding"],
-    })}
-    >
-      <z-thead>
-        <z-tr>${repeat([...new Array(8)], (_, index) => html `<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>
-      </z-thead>
-      <z-tbody>
-        <z-tr>
-          <z-td>Contenuto cella</z-td>
-          <z-td>Contenuto cella</z-td>
-          <z-td show-menu>
-            <span>Contenuto cella con menu</span>
-            <div slot="contextual-menu">Contenuto del popover</div></z-td
-          >
-          ${cellsTemplate(5)}
-        </z-tr>
-        <z-tr>${repeat([...new Array(8)], () => html `<z-td>Contenuto cella</z-td>`)}</z-tr>
-        <z-tr expandable>
-          <z-td>Contenuto cella</z-td>
-          <z-td>Contenuto cella</z-td>
-          <z-td>
-            <span>Contenuto cella</span>
-            <z-button
-              class="prevent-expand"
-              onclick="alert('button clicked without expanding the row')"
-              icon="plus"
-              size="x-small"
-            ></z-button
-          ></z-td>
-          ${cellsTemplate(5)}
-          <z-td>Contenuto espanso</z-td>
-        </z-tr>
-        <z-tr>${cellsTemplate(8)}</z-tr>
-        <z-tr expandable>
-          <z-td>Contenuto cella</z-td>
-          <z-td show-menu="always">
-            <span>Contenuto cella con menu</span>
-            <div slot="contextual-menu">Contenuto del popover</div></z-td
-          >
-          ${cellsTemplate(6)}
-          <z-td>Contenuto espanso</z-td>
-        </z-tr>
-      </z-tbody>
-      <z-tfoot>
-        <z-tr>
-          <z-td colspan="8">Table footer</z-td>
-        </z-tr>
-      </z-tfoot>
-    </z-table>`,
-};
-/**
- * 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.
- * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.
- */
-export const Sticky = {
-    args: {
-        stickyHeader: true,
-        stickyFooter: true,
-        stickFirstColumn: true,
-    },
-    render: (args) => html `<z-table
-      class="z-table-demo"
-      .bordered=${args.bordered}
-      style=${styleMap({
-        "--z-table--cells-padding": args["--z-table--cells-padding"],
-        "height": "400px",
-    })}
-    >
-      <z-thead .sticky=${args.stickyHeader}>
-        <z-tr>
-          <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>
-          ${repeat([...new Array(7)], (_, index) => html `<z-th>Colonna ${index + 2}</z-th>`)}
-        </z-tr>
-      </z-thead>
-      <z-tbody>
-        <z-tr>
-          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
-          <z-td>Contenuto cella</z-td>
-          <z-td>Contenuto cella</z-td>
-          <z-td show-menu>
-            <span>Contenuto cella con menu</span>
-            <div slot="contextual-menu">Contenuto del popover</div></z-td
-          >
-          ${cellsTemplate(4)}
-        </z-tr>
-        ${repeat([...new Array(5)], () => html `<z-tr>
-              <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
-              ${cellsTemplate(7)}
-            </z-tr>`)}
-        <z-tr expandable>
-          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
-          ${cellsTemplate(6)}
-          <z-td>
-            <span>Contenuto cella</span>
-            <z-button
-              class="prevent-expand"
-              onclick="alert('button clicked')"
-              icon="plus"
-              size="x-small"
-            ></z-button
-          ></z-td>
-          <z-td>Contenuto espanso</z-td>
-        </z-tr>
-        <z-tr expandable>
-          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
-          ${cellsTemplate(7)}
-          <z-td>Contenuto espanso</z-td>
-        </z-tr>
-      </z-tbody>
-      <z-tfoot .sticky=${args.stickyFooter}>
-        <z-tr>
-          <z-td colspan="8">Table footer</z-td>
-        </z-tr>
-      </z-tfoot>
-    </z-table>`,
-};
-/**
- * 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`.
- * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.
- */
-export const CellsWithContextualMenu = {
-    argTypes: {
-        isFocusable: boolean,
-        showMenu: {
-            control: {
-                type: "inline-radio",
-                labels: {
-                    null: "hidden",
-                },
-            },
-            popoverPosition: {
-                options: Object.values(PopoverPosition),
-                control: {
-                    type: "select",
-                },
-            },
-            options: [null, ...Object.values(VisibilityCondition)],
-        },
-    },
-    args: {
-        isFocusable: true,
-        showMenu: VisibilityCondition.HOVER,
-        popoverPosition: PopoverPosition.AUTO,
-    },
-    render: (args) => html `<z-table
-      class="z-table-demo"
-      .bordered=${args.bordered}
-      style=${styleMap({
-        "--z-table--cells-padding": args["--z-table--cells-padding"],
-    })}
-    >
-      <z-thead .isFocusable=${args.isFocusable}>
-        <z-tr>
-          <z-th>Colonna 1</z-th>
-          <z-th
-            .showMenu=${args.showMenu}
-            .popoverPosition=${args.popoverPosition}
-          >
-            Heading con menu
-            <div slot="contextual-menu">Contenuto del popover</div>
-          </z-th>
-          <z-th>Colonna 2</z-th>
-        </z-tr>
-      </z-thead>
-      <z-tbody>
-        ${repeat([...new Array(3)], () => html `<z-tr>
-              <z-td .showMenu=${args.showMenu}>
-                <span>Contenuto cella con menu</span>
-                <div slot="contextual-menu">Contenuto del popover</div>
-              </z-td>
-              <z-td>Contenuto cella</z-td>
-              <z-td .showMenu=${args.showMenu}>
-                <span>Contenuto cella con menu</span>
-                <div slot="contextual-menu">Contenuto del popover</div>
-              </z-td>
-            </z-tr>`)}
-      </z-tbody>
-    </z-table>`,
-};
-/**
- * Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.
- * Clicking the button will fire the `sort` event with the `sortDirection` as detail.
- */
-export const SortAction = {
-    argTypes: {
-        isFocusable: boolean,
-        showSorting: {
-            options: Object.values(VisibilityCondition),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        isFocusable: true,
-        showSorting: VisibilityCondition.HOVER,
-    },
-    render: (args) => html `<z-table
-      class="z-table-demo"
-      .bordered=${args.bordered}
-      style=${styleMap({
-        "--z-table--cells-padding": args["--z-table--cells-padding"],
-    })}
-    >
-      <z-thead .isFocusable=${args.isFocusable}>
-        <z-tr>
-          <z-th
-            .sortDirection=${SortDirection.ASC}
-            .showMenu=${VisibilityCondition.HOVER}
-            .showSorting=${args.showSorting}
-          >
-            Colonna 1 con menu e sorting
-            <div slot="contextual-menu">Contenuto del popover</div>
-          </z-th>
-          <z-th>Colonna 2</z-th>
-          <z-th
-            .sortDirection=${SortDirection.DESC}
-            .showSorting=${args.showSorting}
-            >Colonna 3 con sorting</z-th
-          >
-        </z-tr>
-      </z-thead>
-      <z-tbody>${repeat([...new Array(3)], () => html `<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>
-    </z-table>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"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,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAC7C,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,WAAW,EAAE,OAAO;QACpB,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,WAAW,EAAE,IAAI;QACjB,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;;8BAEsB,IAAI,CAAC,WAAW;;;;wBAItB,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,QAAQ,EAAE;QACR,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE;YACX,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC;YAC3C,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,mBAAmB,CAAC,KAAK;KACvC;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;;8BAEsB,IAAI,CAAC,WAAW;;;6BAGjB,aAAa,CAAC,GAAG;wBACtB,mBAAmB,CAAC,KAAK;2BACtB,IAAI,CAAC,WAAW;;;;;;;6BAOd,aAAa,CAAC,IAAI;2BACpB,IAAI,CAAC,WAAW;;;;;iBAK1B,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 {boolean} from \"../../../utils/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    isFocusable: boolean,\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    isFocusable: true,\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 .isFocusable=${args.isFocusable}>\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  argTypes: {\n    isFocusable: boolean,\n    showSorting: {\n      options: Object.values(VisibilityCondition),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    isFocusable: true,\n    showSorting: VisibilityCondition.HOVER,\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 .isFocusable=${args.isFocusable}>\n        <z-tr>\n          <z-th\n            .sortDirection=${SortDirection.ASC}\n            .showMenu=${VisibilityCondition.HOVER}\n            .showSorting=${args.showSorting}\n          >\n            Colonna 1 con menu e sorting\n            <div slot=\"contextual-menu\">Contenuto del popover</div>\n          </z-th>\n          <z-th>Colonna 2</z-th>\n          <z-th\n            .sortDirection=${SortDirection.DESC}\n            .showSorting=${args.showSorting}\n            >Colonna 3 con sorting</z-th\n          >\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

@@ -1 +0,0 @@
-{"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

@@ -1 +0,0 @@
-{"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,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC;YAEZ,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\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEhE;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAOR,KAAK;2BAMA,KAAK;;IAEnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, 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  @Element() host: HTMLZTheadElement;\n\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  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"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","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  private onKeyDown(event: KeyboardEvent): void {\n    if (!this.expandable) {\n      return;\n    }\n\n    const active = document.activeElement;\n    if (active !== this.host) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this.expanded = !this.expanded;\n      this.expand.emit({expanded: this.expanded});\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        tabIndex={0}\n        expanded={this.expanded}\n        onClick={this.onRowClick.bind(this)}\n        onKeyDown={this.onKeyDown.bind(this)}\n      >\n        <div\n          class=\"z-tr--focus-overlay\"\n          aria-hidden=\"true\"\n        ></div>\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              tabIndex={-1}\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

@@ -1 +0,0 @@
-{"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

@@ -1,165 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { AccordionVariant, ControlSize } from "../../beans";
-import { ICONS } from "../../constants/iconset";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../z-tag/index";
-import "./index";
-const cssPropsArgs = {
-    "--z-accordion-bg": getColorTokenArgConfig(true),
-    "--z-accordion-label-color": getColorTokenArgConfig(true),
-    "--z-accordion-disabled-label-color": Object.assign(Object.assign({}, getColorTokenArgConfig(true)), { if: {
-            arg: "isDisabled",
-            truthy: true,
-        } }),
-    "--z-accordion-content-bg": getColorTokenArgConfig(true),
-    "--z-accordion-content-fg": getColorTokenArgConfig(true),
-    "--z-accordion-hover-color": getColorTokenArgConfig(true),
-    "--z-accordion-highlight-color": Object.assign(Object.assign({}, getColorTokenArgConfig(true)), { if: {
-            arg: "highlight",
-            truthy: true,
-        } }),
-};
-/**
- * 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.
- */
-const StoryMeta = {
-    title: "ZAccordion",
-    component: "z-accordion",
-    argTypes: Object.assign(Object.assign({}, cssPropsArgs), { icon: {
-            options: [null, ...Object.keys(ICONS).sort()],
-            control: {
-                type: "select",
-                labels: {
-                    null: "—",
-                },
-            },
-        }, shadow: {
-            if: {
-                arg: "variant",
-                eq: AccordionVariant.BACKGROUND,
-            },
-        }, size: {
-            options: Object.values(ControlSize),
-            control: {
-                type: "inline-radio",
-            },
-        }, variant: {
-            options: Object.values(AccordionVariant),
-            control: {
-                type: "inline-radio",
-            },
-        } }),
-    args: {
-        "--z-accordion-bg": null,
-        "--z-accordion-label-color": null,
-        "--z-accordion-disabled-label-color": null,
-        "--z-accordion-content-bg": null,
-        "--z-accordion-content-fg": null,
-        "--z-accordion-hover-color": null,
-        "--z-accordion-highlight-color": null,
-        "--z-accordion-right-padding": "var(--space-unit)",
-        "--z-accordion-left-padding": "calc(var(--space-unit) * 2)",
-        "--z-accordion-label-font-weight": "var(--font-sb)",
-        "highlight": false,
-        "icon": null,
-        "isDisabled": false,
-        "label": "Text label",
-        "open": false,
-        "shadow": true,
-        "size": ControlSize.BIG,
-        "variant": AccordionVariant.DEFAULT,
-    },
-    render: (args) => html `<z-accordion
-      .highlight=${args.highlight}
-      .icon=${args.icon}
-      .isDisabled=${args.isDisabled}
-      .open=${args.open}
-      .shadow=${args.shadow}
-      label=${args.label}
-      size=${args.size}
-      variant=${args.variant}
-      style=${styleMap({
-        "--z-accordion-highlight-color": args["--z-accordion-highlight-color"],
-        "--z-accordion-bg": args["--z-accordion-bg"],
-        "--z-accordion-label-color": args["--z-accordion-label-color"],
-        "--z-accordion-disabled-label-color": args["--z-accordion-disabled-label-color"],
-        "--z-accordion-content-bg": args["--z-accordion-content-bg"],
-        "--z-accordion-content-fg": args["--z-accordion-content-fg"],
-        "--z-accordion-hover-color": args["--z-accordion-hover-color"],
-        "--z-accordion-right-padding": args["--z-accordion-right-padding"],
-        "--z-accordion-left-padding": args["--z-accordion-left-padding"],
-        "--z-accordion-label-font-weight": args["--z-accordion-label-font-weight"],
-    })}
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,
-      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita
-      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,
-      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero
-      sum nescius esse utilitatem in historia, non modo voluptatem.
-    </z-accordion>`,
-};
-export default StoryMeta;
-export const Default = {};
-/**
- * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.
- */
-export const Stack = {
-    argTypes: {
-        "--z-accordion-highlight-color2": cssPropsArgs["--z-accordion-highlight-color"],
-        "--z-accordion-highlight-color3": cssPropsArgs["--z-accordion-highlight-color"],
-        "--z-accordion-highlight-color4": cssPropsArgs["--z-accordion-highlight-color"],
-    },
-    args: {
-        "--z-accordion-highlight-color2": null,
-        "--z-accordion-highlight-color3": null,
-        "--z-accordion-highlight-color4": null,
-    },
-    parameters: {
-        controls: {
-            exclude: ["open"],
-        },
-    },
-    render: (args) => html `${[
-        StoryMeta.render(args),
-        StoryMeta.render(Object.assign(Object.assign({}, args), { "--z-accordion-highlight-color": args["--z-accordion-highlight-color2"] })),
-        StoryMeta.render(Object.assign(Object.assign({}, args), { "--z-accordion-highlight-color": args["--z-accordion-highlight-color3"] })),
-        StoryMeta.render(Object.assign(Object.assign({}, args), { "--z-accordion-highlight-color": args["--z-accordion-highlight-color4"] })),
-    ]}`,
-};
-export const WithTags = {
-    render: (args) => html `
-    <z-accordion
-      .highlight=${args.highlight}
-      .icon=${args.icon}
-      .isDisabled=${args.isDisabled}
-      .open=${args.open}
-      .shadow=${args.shadow}
-      label=${args.label}
-      size=${args.size}
-      variant=${args.variant}
-      style=${styleMap({
-        "--z-accordion-highlight-color": args["--z-accordion-highlight-color"],
-        "--z-accordion-bg": args["--z-accordion-bg"],
-        "--z-accordion-label-color": args["--z-accordion-label-color"],
-        "--z-accordion-disabled-label-color": args["--z-accordion-disabled-label-color"],
-        "--z-accordion-content-bg": args["--z-accordion-content-bg"],
-        "--z-accordion-content-fg": args["--z-accordion-content-fg"],
-        "--z-accordion-hover-color": args["--z-accordion-hover-color"],
-        "--z-accordion-right-padding": args["--z-accordion-right-padding"],
-        "--z-accordion-left-padding": args["--z-accordion-left-padding"],
-        "--z-accordion-label-font-weight": args["--z-accordion-label-font-weight"],
-    })}
-    >
-      <z-tag slot="tag">Tag 1</z-tag>
-      <z-tag slot="tag">Tag 2</z-tag>
-      <z-tag slot="tag">Tag 3</z-tag>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,
-      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita
-      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,
-      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero
-      sum nescius esse utilitatem in historia, non modo voluptatem.
-    </z-accordion>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1 +0,0 @@
-{"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,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;2BASR,IAAI;8BAMD,SAAS;2BAOZ,KAAK;yBAMP,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,qDACH,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,aAAa;YAEnB,iEACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,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,IAEvC,IAAI,CAAC,cAAc,CACX;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, ControlSize} 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   * Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed\n   */\n  @Prop()\n  collapsedLabel = \"salta a\";\n\n  /**\n   * Explicitly collapse anchor navigation.\n   * If false will collapse automatically only on mobile.\n   */\n  @Prop({reflect: true})\n  isCollapsed = false;\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\n        collapsed={this.collapsed}\n        class=\"z-scrollbar\"\n      >\n        <z-button\n          class=\"toggle\"\n          size={ControlSize.SMALL}\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          {this.collapsedLabel}\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}