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

package/dist/collection/components/list/z-list-element/index.stories.js

@@ -1,128 +0,0 @@
-import { html } from "lit";
-import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, ListDividerType, ListSize, ListType, } from "../../../beans";
-import { getColorTokens } from "../../../utils/storybook-utils";
-import "../z-list/index";
-import "./index";
-const StoryMeta = {
-    title: "ZList/ZListElement",
-    component: "z-list-element",
-    argTypes: {
-        alignButton: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ExpandableListButtonAlign),
-        },
-        dividerColor: {
-            control: {
-                type: "select",
-            },
-            options: getColorTokens().map((token) => token.replace("--", "")),
-        },
-        dividerType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListDividerType),
-        },
-        dividerSize: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(DividerSize),
-        },
-        expandableStyle: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ExpandableListStyle),
-        },
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListSize),
-        },
-        color: {
-            control: {
-                type: "select",
-            },
-            options: getColorTokens().map((token) => token.replace("--", "")),
-        },
-        listType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListType),
-        },
-    },
-    args: {
-        alignButton: ExpandableListButtonAlign.LEFT,
-        clickable: false,
-        dividerColor: "color-surface03",
-        dividerType: ListDividerType.NONE,
-        dividerSize: DividerSize.SMALL,
-        expandable: false,
-        expandableStyle: ExpandableListStyle.ACCORDION,
-        listElementId: 0,
-        size: ListSize.MEDIUM,
-        color: "color-default-text",
-        disabled: true,
-        listElementPosition: "0",
-        listType: ListType.NONE,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-list>
-      <z-list-element
-        align-button=${args.alignButton}
-        .clickable=${args.clickable}
-        divider-color=${args.dividerColor}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        .expandable=${args.expandable}
-        expandable-style=${args.expandableStyle}
-        list-element-id=${args.listElementId}
-        size=${args.size}
-        color=${args.color}
-        .disabled=${args.disabled}
-        list-element-position=${args.listElementPosition}
-        list-type=${args.listType}
-        ><span>Elemento 1</span><span slot="inner-content">Inner content</span></z-list-element
-      >
-      <z-list-element
-        align-button=${args.alignButton}
-        .clickable=${args.clickable}
-        divider-color=${args.dividerColor}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        .expandable=${args.expandable}
-        expandable-style=${args.expandableStyle}
-        list-element-id=${args.listElementId}
-        size=${args.size}
-        color=${args.color}
-        .disabled=${args.disabled}
-        list-element-position=${args.listElementPosition}
-        list-type=${args.listType}
-        >Elemento 2</z-list-element
-      >
-      <z-list-element
-        align-button=${args.alignButton}
-        .clickable=${args.clickable}
-        divider-color=${args.dividerColor}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        .expandable=${args.expandable}
-        expandable-style=${args.expandableStyle}
-        list-element-id=${args.listElementId}
-        size=${args.size}
-        color=${args.color}
-        .disabled=${args.disabled}
-        list-element-position=${args.listElementPosition}
-        list-type=${args.listType}
-        >Elemento 3</z-list-element
-      >
-    </z-list>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-element/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListElement} from \".\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\nimport {getColorTokens} from \"../../../utils/storybook-utils\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZList/ZListElement\",\n  component: \"z-list-element\",\n  argTypes: {\n    alignButton: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ExpandableListButtonAlign),\n    },\n    dividerColor: {\n      control: {\n        type: \"select\",\n      },\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n    },\n    dividerType: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListDividerType),\n    },\n    dividerSize: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(DividerSize),\n    },\n    expandableStyle: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ExpandableListStyle),\n    },\n    size: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListSize),\n    },\n    color: {\n      control: {\n        type: \"select\",\n      },\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n    },\n    listType: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListType),\n    },\n  },\n  args: {\n    alignButton: ExpandableListButtonAlign.LEFT,\n    clickable: false,\n    dividerColor: \"color-surface03\",\n    dividerType: ListDividerType.NONE,\n    dividerSize: DividerSize.SMALL,\n    expandable: false,\n    expandableStyle: ExpandableListStyle.ACCORDION,\n    listElementId: 0,\n    size: ListSize.MEDIUM,\n    color: \"color-default-text\",\n    disabled: true,\n    listElementPosition: \"0\",\n    listType: ListType.NONE,\n  },\n} satisfies Meta<ZListElement>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-list>\n      <z-list-element\n        align-button=${args.alignButton}\n        .clickable=${args.clickable}\n        divider-color=${args.dividerColor}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        .expandable=${args.expandable}\n        expandable-style=${args.expandableStyle}\n        list-element-id=${args.listElementId}\n        size=${args.size}\n        color=${args.color}\n        .disabled=${args.disabled}\n        list-element-position=${args.listElementPosition}\n        list-type=${args.listType}\n        ><span>Elemento 1</span><span slot=\"inner-content\">Inner content</span></z-list-element\n      >\n      <z-list-element\n        align-button=${args.alignButton}\n        .clickable=${args.clickable}\n        divider-color=${args.dividerColor}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        .expandable=${args.expandable}\n        expandable-style=${args.expandableStyle}\n        list-element-id=${args.listElementId}\n        size=${args.size}\n        color=${args.color}\n        .disabled=${args.disabled}\n        list-element-position=${args.listElementPosition}\n        list-type=${args.listType}\n        >Elemento 2</z-list-element\n      >\n      <z-list-element\n        align-button=${args.alignButton}\n        .clickable=${args.clickable}\n        divider-color=${args.dividerColor}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        .expandable=${args.expandable}\n        expandable-style=${args.expandableStyle}\n        list-element-id=${args.listElementId}\n        size=${args.size}\n        color=${args.color}\n        .disabled=${args.disabled}\n        list-element-position=${args.listElementPosition}\n        list-type=${args.listType}\n        >Elemento 3</z-list-element\n      >\n    </z-list>`,\n} satisfies StoryObj<ZListElement>;\n"]}

package/dist/collection/components/list/z-list-group/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;;oBAOH,QAAQ,CAAC,MAAM;2BAMD,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;4BAMrB,SAAS;wBAMX,QAAQ,CAAC,IAAI;;oBAY5B,OAAO;;IAId,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;oBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;iBAC9C;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] check for tree items in grouped lists\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"group\";\n\n  private hasHeader: boolean;\n\n  componentDidLoad(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      if (children.length - 1 > i) {\n        children[i].setAttribute(\"divider-type\", this.dividerType);\n        children[i].setAttribute(\"divider-size\", this.dividerSize);\n        children[i].setAttribute(\"divider-color\", this.dividerColor);\n      }\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", i.toString());\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host>\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader && !this.hasTreeItems,\n            \"grouped-tree-list-header\": this.hasTreeItems,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-list-group/index.stories.js

@@ -1,121 +0,0 @@
-import { html } from "lit";
-import { DividerSize, ListDividerType, ListSize, ListType } from "../../../beans";
-import { getColorTokenArgConfig } from "../../../utils/storybook-utils";
-import "../z-list-element/index";
-import "../z-list/index";
-import "./index";
-const StoryMeta = {
-    title: "ZList/ZListGroup",
-    component: "z-list-group",
-    argTypes: {
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListSize),
-        },
-        dividerType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListDividerType),
-        },
-        dividerSize: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(DividerSize),
-        },
-        dividerColor: getColorTokenArgConfig(),
-        listType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListType),
-        },
-    },
-    args: {
-        size: ListSize.SMALL,
-        dividerType: ListDividerType.HEADER,
-        dividerSize: DividerSize.SMALL,
-        dividerColor: "gray200",
-        listType: ListType.NONE,
-        role: "group",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-list>
-      <z-list-group
-        size=${args.size}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        divider-color=${args.dividerColor}
-        list-type=${args.listType}
-        role=${args.role}
-      >
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-      <z-list-group
-        size=${args.size}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        divider-color=${args.dividerColor}
-        list-type=${args.listType}
-        role=${args.role}
-      >
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-    </z-list>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAC,sBAAsB,EAAC,MAAM,gCAAgC,CAAC;AACtE,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;SACxC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,YAAY,EAAE,sBAAsB,EAAE;QACtC,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAC,KAAK;QACpB,WAAW,EAAE,eAAe,CAAC,MAAM;QACnC,WAAW,EAAE,WAAW,CAAC,KAAK;QAC9B,YAAY,EAAE,SAAS;QACvB,QAAQ,EAAE,QAAQ,CAAC,IAAI;QACvB,IAAI,EAAE,OAAO;KACd;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;eAGT,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;;;;iBAIP,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;eAK5B,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;;;;iBAIP,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;GAKxC;CACF,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListGroup} from \".\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\nimport {getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../z-list-element/index\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZList/ZListGroup\",\n  component: \"z-list-group\",\n  argTypes: {\n    size: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListSize),\n    },\n    dividerType: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListDividerType),\n    },\n    dividerSize: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(DividerSize),\n    },\n    dividerColor: getColorTokenArgConfig(),\n    listType: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListType),\n    },\n  },\n  args: {\n    size: ListSize.SMALL,\n    dividerType: ListDividerType.HEADER,\n    dividerSize: DividerSize.SMALL,\n    dividerColor: \"gray200\",\n    listType: ListType.NONE,\n    role: \"group\",\n  },\n} satisfies Meta<ZListGroup>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) => html`\n    <z-list>\n      <z-list-group\n        size=${args.size}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        divider-color=${args.dividerColor}\n        list-type=${args.listType}\n        role=${args.role}\n      >\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n      <z-list-group\n        size=${args.size}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        divider-color=${args.dividerColor}\n        list-type=${args.listType}\n        role=${args.role}\n      >\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n    </z-list>\n  `,\n};\n"]}

package/dist/collection/components/list/z-tree-list/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-tree-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n  tag: \"z-tree-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTreeList {\n  @Element() host: HTMLZTreeListElement;\n\n  /** Items to render, if they have the url property they will be rendered as clickable links */\n  @Prop()\n  items: TreeListItem[] | string = [];\n\n  /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n  @Prop({reflect: true})\n  htmlAriaLabelledby: string;\n\n  /** Used for aria-label attribute, sets name in \"tree\" */\n  @Prop({reflect: true})\n  htmlSectionTitle: string;\n\n  /** Emitted on item click, it return the id, name and url of the clicked item */\n  @Event()\n  treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n  private parsedItems: TreeListItem[] = [];\n\n  private htmlTag: string;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  private handleClick(item: TreeListItem): void {\n    this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n  }\n\n  private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n    let ancestor: HTMLElement | null = element;\n\n    for (let i = 0; i < levels; i++) {\n      ancestor = ancestor?.parentElement;\n      if (!ancestor) {\n        return;\n      }\n    }\n\n    return ancestor;\n  }\n\n  private handleArrowNav(event: KeyboardEvent): void {\n    if (event.code === KeyboardCode.TAB) {\n      event.preventDefault();\n\n      return;\n    }\n\n    const focusableElements = this.getFocusableElements();\n    const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n    if (currentIndex === -1) {\n      return;\n    }\n\n    if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n      event.preventDefault();\n\n      const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n      if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n        return;\n      }\n\n      focusableElements[nextIndex].focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_LEFT) {\n      event.preventDefault();\n      const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n      if (\n        !ancestor ||\n        !ancestor.children[0] ||\n        (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n      ) {\n        return;\n      }\n\n      (ancestor.children[0] as HTMLElement).focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_RIGHT) {\n      event.preventDefault();\n\n      const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n      if (!parentElm) {\n        return;\n      }\n\n      const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n      if (!childrenContainer) {\n        return;\n      }\n\n      const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n      if (!firstChild) {\n        return;\n      }\n\n      firstChild.focus();\n    }\n  }\n\n  private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n    this.htmlTag = item.url ? \"a\" : \"span\";\n\n    const treeListContent = (\n      <z-list-element\n        id={key}\n        class={!item.icon ? \"no-icon-elm\" : \"\"}\n        clickable={Boolean(item.url)}\n        hasTreeItems={true}\n        role=\"none\"\n        aria-hidden={undefined}\n      >\n        <this.htmlTag\n          class={{\n            \"list-element\": true,\n            \"z-link\": Boolean(item.url),\n            \"link-clickable\": Boolean(item.url),\n          }}\n          tabIndex={item.url ? 0 : -1}\n          onClick={() => this.handleClick(item)}\n          onKeyUp={(event: KeyboardEvent) => {\n            if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n              this.handleClick(item);\n            }\n          }}\n          onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n          role={item.url ? \"treeitem\" : undefined}\n          aria-hidden={item.url ? undefined : \"true\"}\n          aria-expanded={item.children?.length > 0 && true}\n          aria-level={level}\n          aria-label={item.name}\n          href={item.url}\n        >\n          <span class=\"item ellipsis\">\n            {item.icon && (\n              <z-icon\n                width={16}\n                height={16}\n                fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class={{\n                \"item-label\": true,\n                \"no-icon-label\": !item.icon,\n                \"bold-item\": item.bold,\n              }}\n              title={item.name}\n            >\n              {item.name}\n            </span>\n          </span>\n        </this.htmlTag>\n        {item.children?.length > 0 && (\n          <z-list role=\"group\">\n            <div class=\"children-node\">\n              {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n            </div>\n          </z-list>\n        )}\n      </z-list-element>\n    );\n\n    return treeListContent;\n  }\n\n  render(): HTMLZTreeListElement {\n    const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n    return (\n      <Host\n        class=\"tree-list\"\n        role={hasClickableItems ? \"navigation\" : \"none\"}\n        aria-hidden={hasClickableItems ? undefined : \"true\"}\n        aria-labelledby={this.htmlAriaLabelledby}\n      >\n        <div\n          tabIndex={-1}\n          role={hasClickableItems ? \"tree\" : \"none\"}\n          aria-hidden={hasClickableItems ? undefined : \"true\"}\n          aria-label={this.htmlSectionTitle}\n        >\n          {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-tree-list/index.stories.js

@@ -1,120 +0,0 @@
-import { html } from "lit";
-import "./index";
-const sampleItems = [
-    {
-        name: "Parent 1",
-        icon: "folder",
-        children: [
-            {
-                name: "Child 1.1",
-                icon: "book",
-            },
-            {
-                name: "Child 1.2",
-                icon: "book",
-            },
-        ],
-    },
-    {
-        name: "Parent 2",
-        icon: "folder",
-        children: [
-            {
-                name: "Child 2.1",
-                icon: "book",
-            },
-        ],
-    },
-];
-const clickableItems = [
-    {
-        name: "Parent 1",
-        icon: "folder",
-        url: "#",
-        children: [
-            {
-                name: "Child 1.1",
-                icon: "book",
-                url: "#",
-            },
-            {
-                name: "Child 1.2",
-                icon: "book",
-                url: "#",
-            },
-        ],
-    },
-    {
-        name: "Parent 2",
-        icon: "folder",
-        url: "#",
-        children: [
-            {
-                name: "Child 2.1",
-                icon: "book",
-                url: "#",
-            },
-        ],
-    },
-];
-const boldItems = [
-    {
-        name: "Parent 1",
-        icon: "folder",
-        bold: true,
-        children: [
-            {
-                name: "Child 1.1",
-                icon: "book",
-            },
-            {
-                name: "Child 1.2",
-                icon: "book",
-            },
-        ],
-    },
-    {
-        name: "Parent 2",
-        icon: "folder",
-        bold: true,
-        children: [
-            {
-                name: "Child 2.1",
-                icon: "book",
-            },
-        ],
-    },
-];
-const StoryMeta = {
-    title: "ZList/ZTreeList",
-    component: "z-tree-list",
-    argTypes: {
-        items: { control: "object" },
-    },
-    args: {
-        items: sampleItems,
-    },
-};
-export default StoryMeta;
-const Template = (args) => {
-    return html `<z-tree-list items=${JSON.stringify(args.items)}></z-tree-list>`;
-};
-export const Base = {
-    args: {
-        items: sampleItems,
-    },
-    render: Template,
-};
-export const Bold = {
-    args: {
-        items: boldItems,
-    },
-    render: Template,
-};
-export const Clickable = {
-    args: {
-        items: clickableItems,
-    },
-    render: Template,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-tree-list/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,IAAI,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,SAAS,CAAC;AAEjB,MAAM,WAAW,GAAG;IAClB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;IACrB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;SACF;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAC,OAAO,EAAE,QAAQ,EAAC;KAC3B;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACa,CAAC;AAEjB,eAAe,SAAS,CAAC;AAEzB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE;IACxC,OAAO,IAAI,CAAA,sBAAsB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAa;IACjC,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;KACtB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {TemplateResult, html} from \"lit\";\nimport \"./index\";\n\nconst sampleItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n      },\n    ],\n  },\n];\n\nconst clickableItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    url: \"#\",\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n        url: \"#\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    url: \"#\",\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n        url: \"#\",\n      },\n    ],\n  },\n];\n\nconst boldItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    bold: true,\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    bold: true,\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n      },\n    ],\n  },\n];\n\nconst StoryMeta = {\n  title: \"ZList/ZTreeList\",\n  component: \"z-tree-list\",\n  argTypes: {\n    items: {control: \"object\"},\n  },\n  args: {\n    items: sampleItems,\n  },\n} satisfies Meta;\n\nexport default StoryMeta;\n\nconst Template = (args): TemplateResult => {\n  return html`<z-tree-list items=${JSON.stringify(args.items)}></z-tree-list>`;\n};\n\nexport const Base: StoryObj = {\n  args: {\n    items: sampleItems,\n  },\n  render: Template,\n};\n\nexport const Bold: StoryObj = {\n  args: {\n    items: boldItems,\n  },\n  render: Template,\n};\n\nexport const Clickable: StoryObj = {\n  args: {\n    items: clickableItems,\n  },\n  render: Template,\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/table/cells/z-td/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU;YAE1B,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAa;gBACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;oBAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;oBACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe;wBAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTd {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/cells/z-td/styles.css

@@ -1,71 +0,0 @@
-:host {
-  position: relative;
-  display: flex;
-  max-width: 100%;
-  align-items: center;
-  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));
-  background-color: var(--color-surface01);
-  gap: calc(var(--space-unit) * 2) var(--space-unit);
-}
-
-:host,
-* {
-  box-sizing: border-box;
-}
-
-:host([sticky]) {
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  box-shadow: 8px 0 16px -8px var(--shadow-color-base);
-}
-
-:host([menu-open]) {
-  z-index: 2;
-}
-
-.cell--content {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-}
-
-:host([show-menu]) .cell--content {
-  column-gap: var(--space-unit);
-}
-
-.cell--menu-container {
-  margin-left: auto;
-}
-
-:host(:not([show-menu])) .cell--menu-container {
-  opacity: 0;
-  pointer-events: none;
-}
-
-:host(:is([show-menu], [menu-open])) .cell--menu-container,
-:host([show-menu]) .cell--menu-container:focus-within {
-  z-index: 1;
-  opacity: 1;
-  pointer-events: all;
-}
-
-:host .cell-popover {
-  z-index: 100;
-}
-
-@media (min-width: 768px) and (hover: hover) {
-  :host([show-menu="hover"]) .cell--menu-container {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  :host([show-menu="hover"]:hover) .cell--menu-container {
-    z-index: 1;
-    opacity: 1;
-    pointer-events: all;
-  }
-}
-

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/table/cells/z-th/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Sorted state of the column.\n   */\n  @Prop({reflect: true, mutable: true})\n  sorted: boolean | null = false;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      this.sorted = false;\n\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sorted = true;\n\n    this.sort.emit({sortDirection: this.sortDirection});\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showSorting && (\n            <button\n              class=\"z-th--sort-button\"\n              type=\"button\"\n              onClick={this.handleSort.bind(this)}\n            >\n              <z-icon\n                name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n                width={14}\n                height={14}\n              />\n            </button>\n          )}\n          {this.showMenu && (\n            <div class=\"cell--menu-container\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLElement)}\n                onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n              />\n              <z-popover\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AAEvB;;;;GAIG;AAMH,MAAM,OAAO,MAAM;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9E,CAAC;IAID;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC/B,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO;gBAEZ,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n */\n@Component({\n  tag: \"z-table\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTable {\n  @Element() host: HTMLZTableElement;\n\n  /**\n   * Whether the table cells should show a border between them.\n   */\n  @Prop({reflect: true})\n  bordered = false;\n\n  /**\n   * Whether the table contains some expandable rows.\n   */\n  @State()\n  expandable = false;\n\n  private updateExpandable(): void {\n    this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n  }\n\n  private expandableMutationObserver: MutationObserver;\n\n  /**\n   * Setup the table creating a mutation observer for the expandable attribute.\n   */\n  componentWillLoad(): void {\n    this.expandableMutationObserver = new MutationObserver(() => {\n      this.updateExpandable();\n    });\n    this.expandableMutationObserver.observe(this.host, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"expandable\"],\n      attributeOldValue: false,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.expandableMutationObserver?.disconnect();\n  }\n\n  render(): HTMLZTableElement {\n    return (\n      <Host expandable={this.expandable}>\n        <div\n          class=\"table\"\n          role=\"table\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}