@zanichelli/albe-web-components 18.2.0 → 18.2.1-rc1

package/dist/components/z-section-title.js.map

@@ -1 +1 @@
-{"file":"z-section-title.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,6zBAA6zB,CAAC;AACh1B,4BAAe,SAAS;;MCgBXA,eAAa;;;;;+BAMwB,4BAA4B,CAAC,MAAM;yBAMvE,IAAI;;IAMhB,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;KAC9E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG,EAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,KACtF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,EACD,6DAAM,IAAI,EAAC,eAAe,GAAG,EAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,KACrF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZSectionTitle"],"sources":["src/components/z-section-title/styles.css?tag=z-section-title&encapsulation=shadow","src/components/z-section-title/index.tsx"],"sourcesContent":[":host {\n  --z-section-title--divider-color: var(--red500);\n\n  display: flex;\n  width: fit-content;\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n::slotted(*) {\n  margin: 0;\n}\n\n::slotted([slot=\"secondary-title\"]) {\n  padding-bottom: calc(var(--space-unit) / 2);\n  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5rem;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"primary-title\"]) {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-sb);\n  line-height: 2rem;\n}\n\n:host([uppercase]:not([uppercase=\"false\"])) ::slotted([slot=\"primary-title\"]) {\n  text-transform: uppercase;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  ::slotted([slot=\"primary-title\"]) {\n    font-size: var(--font-size-7);\n    line-height: 2.25rem;\n  }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-section-title.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,6zBAA6zB,CAAC;AACh1B,4BAAe,SAAS;;MCgBXA,eAAa;;;;;+BAMwB,4BAA4B,CAAC,MAAM;yBAMvE,IAAI;;IAMhB,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;KAC9E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG,EAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,KACtF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,EACD,6DAAM,IAAI,EAAC,eAAe,GAAG,EAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,KACrF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZSectionTitle"],"sources":["src/components/deprecated/z-section-title/styles.css?tag=z-section-title&encapsulation=shadow","src/components/deprecated/z-section-title/index.tsx"],"sourcesContent":[":host {\n  --z-section-title--divider-color: var(--red500);\n\n  display: flex;\n  width: fit-content;\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n::slotted(*) {\n  margin: 0;\n}\n\n::slotted([slot=\"secondary-title\"]) {\n  padding-bottom: calc(var(--space-unit) / 2);\n  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5rem;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"primary-title\"]) {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-sb);\n  line-height: 2rem;\n}\n\n:host([uppercase]:not([uppercase=\"false\"])) ::slotted([slot=\"primary-title\"]) {\n  text-transform: uppercase;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  ::slotted([slot=\"primary-title\"]) {\n    font-size: var(--font-size-7);\n    line-height: 2.25rem;\n  }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-select.js

@@ -482,7 +482,7 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '3d387c6835c33fd7fe875223800a342d3fc50762', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '50d85283f13af94f07e960f17e2f8126c7f2469e', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-table.js

@@ -37,7 +37,7 @@ const ZTable$1 = /*@__PURE__*/ proxyCustomElement(class ZTable extends HTMLEleme
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '18f6152b1942c333fb95a9f7e7a23715bf27675d', expandable: this.expandable }, h("div", { key: 'fc7084c01d72828d9d2d8a565a1498a111504992', class: "table", role: "table" }, h("slot", { key: '78d5bf7370f5497868f2277e29d9ad8191123c5e' }))));
+        return (h(Host, { key: 'a37bf2d018aedf198e11248d9952c062deddc545', expandable: this.expandable }, h("div", { key: 'a769b79ee55eb5425bb6c72059437f051967c3b3', class: "table", role: "table" }, h("slot", { key: '0ba782144cc2f139484954747d530d6f1c606a0d' }))));
     }
     get host() { return this; }
     static get style() { return ZTableStyle0; }

package/dist/components/z-tbody.js

@@ -10,7 +10,7 @@ const ZTbody$1 = /*@__PURE__*/ proxyCustomElement(class ZTbody extends HTMLEleme
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'b489d32d81a796eafef0fa82f9bb24c53db9e7f7', role: "rowgroup" }, h("slot", { key: '89b11f845de05e0a40dc0180fa45a23c2fd281c7' })));
+        return (h(Host, { key: 'c14251b56741e89faba797de5c531dc539b4561b', role: "rowgroup" }, h("slot", { key: '3d2168a3fdc01ff6f68f19f3c346d6732fb7aab0' })));
     }
     static get style() { return ZTbodyStyle0; }
 }, [1, "z-tbody"]);

package/dist/components/z-td.js

@@ -36,7 +36,7 @@ const ZTd$1 = /*@__PURE__*/ proxyCustomElement(class ZTd extends HTMLElement {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '9c7d03779f5c51ed26cd794d62f6fe489afa557c', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '71494ed002d042d686248cc9382e6b8f98ec4f18', class: "cell--content" }, h("slot", { key: 'd4d89e6814b00e5e120468727205cff474201d00' }), this.showMenu && (h("div", { key: '60a3e28f42528ea07f9fed652f645397f949d197', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '5bc9cfaa9f5215eb4068a6243c80131a1ea8b5c3', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'f9d6370971330f8fe989a59c5adeaecfa9d66180', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '7e14e87932afb69dc68ffa04a874981770368c5e', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'c9c2a31f99dc72acd54744c8c1abdbb56b0a7df3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'f503630802052c5c3566b725aba40ea0923d60da', class: "cell--content" }, h("slot", { key: 'e26dc22a7b21eef5475d10124312384593957bf8' }), this.showMenu && (h("div", { key: '4c7204766c53e4502ff24e51e9ea751620246278', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '3d0f59414241c2b195dd45cf74f678b15e957cac', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '68d2f577c442c9a72009dd6365cd4182e9333d5a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c90cf570174b2e2af659ae02e217d725a1951cb4', name: "contextual-menu" })))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-tfoot.js

@@ -11,7 +11,7 @@ const ZTfoot$1 = /*@__PURE__*/ proxyCustomElement(class ZTfoot extends HTMLEleme
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '441a3e0656da274193c4a12681b9e9d641690982', role: "rowgroup" }, h("slot", { key: '5e80207cbf1238b2141fcd657cb10fc18be7bccb' })));
+        return (h(Host, { key: '68f9134c92fd8aa1db8236ca1cae82945b8dff40', role: "rowgroup" }, h("slot", { key: 'e76426e09634deb41395104af9c37f8f75415435' })));
     }
     static get style() { return ZTfootStyle0; }
 }, [1, "z-tfoot", {

package/dist/components/z-th.js

@@ -56,7 +56,7 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'e8bf215c5bdf5c0486d0de3768919d54a94b8b46', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'e7dfc68ddaeac9f1f763eb62e2717ea5e166df16', class: "cell--content" }, h("slot", { key: '96edba7522e8e43bcfecea9d305ffc9840548020' }), this.showSorting && (h("button", { key: '81cef37216c2c823b1027df224ddb905d3c9d412', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'b00db383bf202b9f774781551a6e59329fed10b2', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '2762feca4feeff61aa673d2a3535f91c9ee7db03', class: "cell--menu-container" }, h("z-button", { key: 'e91a00179db0075255b57d5f946e3c321883faf6', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'c632eb1071f2533aa86251e8e345eda845512693', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'bc3aa447b61972c3299352d49f27c9a060a2ce4d', name: "contextual-menu" })))))));
+        return (h(Host, { key: '80d84d10038bfd5171b1596db3175c4e915e3c81', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'b98f5cbe6c9fa873e39f46ba701c76755a4f9da7', class: "cell--content" }, h("slot", { key: 'f7d2b12496eb334bf07fcfc80e42cacf95a2b6c7' }), this.showSorting && (h("button", { key: '000518536845b9b1383d2aa90a655000a2d0cc0b', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '61cedbe8a54e51cac9d94f00e4d9d84dbcc1b48d', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '3c2ac483288672ac1c65dc3586fb9b346abe53e9', class: "cell--menu-container" }, h("z-button", { key: '6a495a201dc8343267ef8892bc97150c2d4ec4fc', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'b97a3477c4f63bccb2445304676ad2127a26d9df', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'd51ba2caa4e7929e3aedf3beec9b95f4c9b1cf24', name: "contextual-menu" })))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-thead.js

@@ -11,7 +11,7 @@ const ZThead$1 = /*@__PURE__*/ proxyCustomElement(class ZThead extends HTMLEleme
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '96a3a467d89c4de659693e31c46f8aee89497140', role: "rowgroup" }, h("slot", { key: 'd1af4ab3b7b484f5de8b16a9d4a74e93ae65ee60' })));
+        return (h(Host, { key: '8f4e7bb738d8d4cf6aaf83faf5b2ecd4ed58feac', role: "rowgroup" }, h("slot", { key: '2a7dfe21b40cb26c57c98b6cae40dc801b22e7e3' })));
     }
     static get style() { return ZTheadStyle0; }
 }, [1, "z-thead", {

package/dist/components/z-tr.js

@@ -45,7 +45,7 @@ const ZTr$1 = /*@__PURE__*/ proxyCustomElement(class ZTr extends HTMLElement {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '5ce42271810a5e186701cef65ba6d0e4b7f044fe', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'e699c444b5d3f21e5468e895a1b4f39829077cc9', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '9f4dee6f1fd647c40fe3612ed52ccff4f8231778', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '572c95ff115f9c00c07a2e84130020e2f03031c5', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '97c0be024dde1cf6e218ddaaef53a2b4ca723d37', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: 'c7aef75dce7ad486aa08145e3df1a9a4fbc0a086', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '474efb8147efb3045b2d671081674330209674ae', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'd4f77c52514979ee1e52483d1031d222f8b60dfd', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'a488e44b2b9119f2b96aeb42c2880f16650685a6', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '03ec3ec33b29e7ec504282289fa0daf8990deef5', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-tree-list.js

@@ -106,7 +106,7 @@ const ZTreeList$1 = /*@__PURE__*/ proxyCustomElement(class ZTreeList extends HTM
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'a69d54dfd302656adc09278ac77cde23a7c1e69c', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '780851098b592574ee55839e4a28d030d9bfa5b7', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: '860eebd2ba1f46fb493bc07eb245596a9dc8be99', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '6a5876f627d499e9c04464383463f97d5caa1272', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-visually-hidden.js

@@ -10,7 +10,7 @@ const ZVisuallyHidden$1 = /*@__PURE__*/ proxyCustomElement(class ZVisuallyHidden
         this.__attachShadow();
     }
     render() {
-        return h("slot", { key: '9ce7d87881fa96e717bc1556d5242cbfe68d0739' });
+        return h("slot", { key: '3d75845d1ec7fa620b82b32f68fe73368d800e61' });
     }
     static get style() { return ZVisuallyHiddenStyle0; }
 }, [1, "z-visually-hidden"]);

package/dist/docs/themes/index.stories.js

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import "../../src/components/z-section-title/index";
+import "../../src/components/deprecated/z-section-title/index";
 import { getPalettes, getThemeColorTokens } from "../../src/utils/storybook-utils";
 import "./index.stories.css";
 export default {

package/dist/docs/themes/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/themes/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,4CAA4C,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,mBAAmB,EAAC,MAAM,iCAAiC,CAAC;AACjF,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE;QACrB,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACxG,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;QAChF,MAAM,YAAY,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;QAE1D,OAAO,IAAI,CAAA;;;;;;;;;;;;gBAYC,4CAA4C;;;;;;;;;;;cAW9C,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEgB,KAAK;;;;qDAIG,KAAK;;;oDAGN,gBAAgB,CAAC,KAAK,CAAC;;4BAE/C,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;;eAK/E,CACF;cACC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACxC,CAAC,gBAAgB,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA;;2DAEqC,KAAK;;;;yDAIP,KAAK;;;wDAGN,YAAY,CAAC,KAAK,CAAC;;gCAE3C,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;;mBAK/E;YACH,CAAC,CAAC,EAAE,CACP;;;;KAIR,CAAC;IACJ,CAAC;CACiB,CAAC;AAErB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;QAEZ,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CACzB,CAAC,WAAW,EAAE,EAAE,CACd,IAAI,CAAA;iDACmC,WAAW;;gBAE5C,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CACzB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+CAEgB,KAAK;;;;uDAIG,KAAK;;;0BAGlC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;iBAI3E,CACF;;iBAEE,CACV;;GAEJ;CACiB,CAAC","sourcesContent":["import {StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"../../src/components/z-section-title/index\";\nimport {getPalettes, getThemeColorTokens} from \"../../src/utils/storybook-utils\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Colors\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  tags: [\"!autodocs\"],\n};\n\nexport const Themes = {\n  render: (_, context) => {\n    const [currentTheme, currentThemeVariant] = context.parameters.themes[context.globals.theme].split(\" \");\n    const themeColorTokens = getThemeColorTokens(currentTheme, currentThemeVariant);\n    const defaultTheme = getThemeColorTokens(\"theme-default\");\n\n    return html`\n      <div class=\"colors-story themes\">\n        <p>\n          Currently available color themes: <strong>default</strong>, <strong>black</strong>,\n          <strong>black-red</strong>, <strong>black-yellow</strong>, <strong>dark</strong>, and <strong>red</strong>.\n        </p>\n        <p>\n          Each theme has a CSS class that can be used to theme any html element and each class name is the \"theme-\"\n          prefix + the theme's name (\"theme-default\", \"theme-red\", ...). Themes variants like \"black-red\" or\n          \"black-yellow\" can be applied to the related main theme by using both classes (variant class names have te\n          same form of main themes plus a double dash and the variant name, like \"theme-black--red\"):\n        </p>\n        <code>${'<div class=\"theme-black theme-black--red\">'}</code>\n        <p>\n          On this page you can see the value of the color tokens for each theme. Switch the theme from the list in the\n          toolbar.\n        </p>\n        <p class=\"interactive-1\">\n          Note: the tokens marked with \"<span class=\"reference\">*</span>\" are inherited from the default theme.\n        </p>\n        <div class=\"tokens-container\">\n          <div class=\"title section-title-4\">Color tokens</div>\n          <ul>\n            ${Object.keys(themeColorTokens).map(\n              (token) => html`\n                <li>\n                  <span class=\"token-name\">${token}</span>\n                  <div class=\"color\">\n                    <div\n                      class=\"color-box\"\n                      style=\"background-color: var(${token})\"\n                    ></div>\n                    <div>\n                      <span class=\"interactive-2\">${themeColorTokens[token]}</span>\n                      <span class=\"interactive-3\"\n                        >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span\n                      >\n                    </div>\n                  </div>\n                </li>\n              `\n            )}\n            ${Object.keys(defaultTheme).map((token) =>\n              !themeColorTokens[token]\n                ? html`\n                    <li>\n                      <span class=\"token-name inherited\">${token}<span class=\"reference\">*</span></span>\n                      <div class=\"color\">\n                        <div\n                          class=\"color-box\"\n                          style=\"background-color: var(${token})\"\n                        ></div>\n                        <div>\n                          <span class=\"interactive-2\">${defaultTheme[token]}</span>\n                          <span class=\"interactive-3\"\n                            >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span\n                          >\n                        </div>\n                      </div>\n                    </li>\n                  `\n                : \"\"\n            )}\n          </ul>\n        </div>\n      </div>\n    `;\n  },\n} satisfies StoryObj;\n\nconst palettes = getPalettes();\n\nexport const Palettes = {\n  render: () => html`\n    <div class=\"colors-story palettes\">\n      ${Object.keys(palettes).map(\n        (paletteName) =>\n          html`<div class=\"tokens-container\">\n            <div class=\"title section-title-4\">${paletteName}</div>\n            <ul>\n              ${palettes[paletteName].map(\n                (token) => html`\n                  <li>\n                    <span class=\"token-name\">${token}</span>\n                    <div class=\"color\">\n                      <div\n                        class=\"color-box\"\n                        style=\"background-color: var(${token})\"\n                      ></div>\n                      <div class=\"interactive-2\">\n                        ${getComputedStyle(document.documentElement).getPropertyValue(token)}\n                      </div>\n                    </div>\n                  </li>\n                `\n              )}\n            </ul>\n          </div>`\n      )}\n    </div>\n  `,\n} satisfies StoryObj;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/themes/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,uDAAuD,CAAC;AAC/D,OAAO,EAAC,WAAW,EAAE,mBAAmB,EAAC,MAAM,iCAAiC,CAAC;AACjF,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE;QACrB,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACxG,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;QAChF,MAAM,YAAY,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;QAE1D,OAAO,IAAI,CAAA;;;;;;;;;;;;gBAYC,4CAA4C;;;;;;;;;;;cAW9C,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEgB,KAAK;;;;qDAIG,KAAK;;;oDAGN,gBAAgB,CAAC,KAAK,CAAC;;4BAE/C,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;;eAK/E,CACF;cACC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACxC,CAAC,gBAAgB,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA;;2DAEqC,KAAK;;;;yDAIP,KAAK;;;wDAGN,YAAY,CAAC,KAAK,CAAC;;gCAE3C,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;;mBAK/E;YACH,CAAC,CAAC,EAAE,CACP;;;;KAIR,CAAC;IACJ,CAAC;CACiB,CAAC;AAErB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;QAEZ,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CACzB,CAAC,WAAW,EAAE,EAAE,CACd,IAAI,CAAA;iDACmC,WAAW;;gBAE5C,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CACzB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+CAEgB,KAAK;;;;uDAIG,KAAK;;;0BAGlC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;iBAI3E,CACF;;iBAEE,CACV;;GAEJ;CACiB,CAAC","sourcesContent":["import {StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"../../src/components/deprecated/z-section-title/index\";\nimport {getPalettes, getThemeColorTokens} from \"../../src/utils/storybook-utils\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Colors\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  tags: [\"!autodocs\"],\n};\n\nexport const Themes = {\n  render: (_, context) => {\n    const [currentTheme, currentThemeVariant] = context.parameters.themes[context.globals.theme].split(\" \");\n    const themeColorTokens = getThemeColorTokens(currentTheme, currentThemeVariant);\n    const defaultTheme = getThemeColorTokens(\"theme-default\");\n\n    return html`\n      <div class=\"colors-story themes\">\n        <p>\n          Currently available color themes: <strong>default</strong>, <strong>black</strong>,\n          <strong>black-red</strong>, <strong>black-yellow</strong>, <strong>dark</strong>, and <strong>red</strong>.\n        </p>\n        <p>\n          Each theme has a CSS class that can be used to theme any html element and each class name is the \"theme-\"\n          prefix + the theme's name (\"theme-default\", \"theme-red\", ...). Themes variants like \"black-red\" or\n          \"black-yellow\" can be applied to the related main theme by using both classes (variant class names have te\n          same form of main themes plus a double dash and the variant name, like \"theme-black--red\"):\n        </p>\n        <code>${'<div class=\"theme-black theme-black--red\">'}</code>\n        <p>\n          On this page you can see the value of the color tokens for each theme. Switch the theme from the list in the\n          toolbar.\n        </p>\n        <p class=\"interactive-1\">\n          Note: the tokens marked with \"<span class=\"reference\">*</span>\" are inherited from the default theme.\n        </p>\n        <div class=\"tokens-container\">\n          <div class=\"title section-title-4\">Color tokens</div>\n          <ul>\n            ${Object.keys(themeColorTokens).map(\n              (token) => html`\n                <li>\n                  <span class=\"token-name\">${token}</span>\n                  <div class=\"color\">\n                    <div\n                      class=\"color-box\"\n                      style=\"background-color: var(${token})\"\n                    ></div>\n                    <div>\n                      <span class=\"interactive-2\">${themeColorTokens[token]}</span>\n                      <span class=\"interactive-3\"\n                        >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span\n                      >\n                    </div>\n                  </div>\n                </li>\n              `\n            )}\n            ${Object.keys(defaultTheme).map((token) =>\n              !themeColorTokens[token]\n                ? html`\n                    <li>\n                      <span class=\"token-name inherited\">${token}<span class=\"reference\">*</span></span>\n                      <div class=\"color\">\n                        <div\n                          class=\"color-box\"\n                          style=\"background-color: var(${token})\"\n                        ></div>\n                        <div>\n                          <span class=\"interactive-2\">${defaultTheme[token]}</span>\n                          <span class=\"interactive-3\"\n                            >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span\n                          >\n                        </div>\n                      </div>\n                    </li>\n                  `\n                : \"\"\n            )}\n          </ul>\n        </div>\n      </div>\n    `;\n  },\n} satisfies StoryObj;\n\nconst palettes = getPalettes();\n\nexport const Palettes = {\n  render: () => html`\n    <div class=\"colors-story palettes\">\n      ${Object.keys(palettes).map(\n        (paletteName) =>\n          html`<div class=\"tokens-container\">\n            <div class=\"title section-title-4\">${paletteName}</div>\n            <ul>\n              ${palettes[paletteName].map(\n                (token) => html`\n                  <li>\n                    <span class=\"token-name\">${token}</span>\n                    <div class=\"color\">\n                      <div\n                        class=\"color-box\"\n                        style=\"background-color: var(${token})\"\n                      ></div>\n                      <div class=\"interactive-2\">\n                        ${getComputedStyle(document.documentElement).getPropertyValue(token)}\n                      </div>\n                    </div>\n                  </li>\n                `\n              )}\n            </ul>\n          </div>`\n      )}\n    </div>\n  `,\n} satisfies StoryObj;\n"]}

package/dist/esm/{index-9a0ea49b.js → index-0ea3c7c8.js}

@@ -8,11 +8,11 @@ const ZTbody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'b489d32d81a796eafef0fa82f9bb24c53db9e7f7', role: "rowgroup" }, h("slot", { key: '89b11f845de05e0a40dc0180fa45a23c2fd281c7' })));
+        return (h(Host, { key: 'c14251b56741e89faba797de5c531dc539b4561b', role: "rowgroup" }, h("slot", { key: '3d2168a3fdc01ff6f68f19f3c346d6732fb7aab0' })));
     }
 };
 ZTbody.style = ZTbodyStyle0;
 
 export { ZTbody as Z };
 
-//# sourceMappingURL=index-9a0ea49b.js.map
+//# sourceMappingURL=index-0ea3c7c8.js.map

package/dist/esm/{index-9a0ea49b.js.map → index-0ea3c7c8.js.map}

@@ -1 +1 @@
-{"file":"index-9a0ea49b.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4CAA4C,CAAC;AAC/D,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","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"],"version":3}
+{"file":"index-0ea3c7c8.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4CAA4C,CAAC;AAC/D,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","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"],"version":3}

package/dist/esm/{index-2a83dc12.js → index-2ccbb96f.js}

@@ -31,7 +31,7 @@ const ZTd = class {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '9c7d03779f5c51ed26cd794d62f6fe489afa557c', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '71494ed002d042d686248cc9382e6b8f98ec4f18', class: "cell--content" }, h("slot", { key: 'd4d89e6814b00e5e120468727205cff474201d00' }), this.showMenu && (h("div", { key: '60a3e28f42528ea07f9fed652f645397f949d197', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '5bc9cfaa9f5215eb4068a6243c80131a1ea8b5c3', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'f9d6370971330f8fe989a59c5adeaecfa9d66180', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '7e14e87932afb69dc68ffa04a874981770368c5e', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'c9c2a31f99dc72acd54744c8c1abdbb56b0a7df3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'f503630802052c5c3566b725aba40ea0923d60da', class: "cell--content" }, h("slot", { key: 'e26dc22a7b21eef5475d10124312384593957bf8' }), this.showMenu && (h("div", { key: '4c7204766c53e4502ff24e51e9ea751620246278', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '3d0f59414241c2b195dd45cf74f678b15e957cac', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '68d2f577c442c9a72009dd6365cd4182e9333d5a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c90cf570174b2e2af659ae02e217d725a1951cb4', name: "contextual-menu" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -42,4 +42,4 @@ ZTd.style = ZTdStyle0;
 
 export { ZTd as Z };
 
-//# sourceMappingURL=index-2a83dc12.js.map
+//# sourceMappingURL=index-2ccbb96f.js.map

package/dist/esm/{index-2a83dc12.js.map → index-2ccbb96f.js.map}

@@ -1 +1 @@
-{"file":"index-2a83dc12.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2hCAA2hC,CAAC;AAC9iC,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","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"],"version":3}
+{"file":"index-2ccbb96f.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2hCAA2hC,CAAC;AAC9iC,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","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"],"version":3}

package/dist/esm/{index-43637886.js → index-571f913c.js}

@@ -9,11 +9,11 @@ const ZTfoot = class {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '441a3e0656da274193c4a12681b9e9d641690982', role: "rowgroup" }, h("slot", { key: '5e80207cbf1238b2141fcd657cb10fc18be7bccb' })));
+        return (h(Host, { key: '68f9134c92fd8aa1db8236ca1cae82945b8dff40', role: "rowgroup" }, h("slot", { key: 'e76426e09634deb41395104af9c37f8f75415435' })));
     }
 };
 ZTfoot.style = ZTfootStyle0;
 
 export { ZTfoot as Z };
 
-//# sourceMappingURL=index-43637886.js.map
+//# sourceMappingURL=index-571f913c.js.map

package/dist/esm/{index-43637886.js.map → index-571f913c.js.map}

@@ -1 +1 @@
-{"file":"index-43637886.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kOAAkO,CAAC;AACrP,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  border-top: 1px solid var(--color-surface03);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index-571f913c.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kOAAkO,CAAC;AACrP,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  border-top: 1px solid var(--color-surface03);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{index-1294ef3d.js → index-ceebee64.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
 import { r as randomId } from './utils-c7062cf7.js';
-import './index-2a83dc12.js';
-import './index-ea1d61dc.js';
+import './index-2ccbb96f.js';
+import './index-fc0913d1.js';
 
 const stylesCss = ":host{--columns:1;display:grid;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
 const ZTrStyle0 = stylesCss;
@@ -43,7 +43,7 @@ const ZTr = class {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '5ce42271810a5e186701cef65ba6d0e4b7f044fe', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'e699c444b5d3f21e5468e895a1b4f39829077cc9', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '9f4dee6f1fd647c40fe3612ed52ccff4f8231778', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '572c95ff115f9c00c07a2e84130020e2f03031c5', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '97c0be024dde1cf6e218ddaaef53a2b4ca723d37', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: 'c7aef75dce7ad486aa08145e3df1a9a4fbc0a086', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '474efb8147efb3045b2d671081674330209674ae', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'd4f77c52514979ee1e52483d1031d222f8b60dfd', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'a488e44b2b9119f2b96aeb42c2880f16650685a6', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '03ec3ec33b29e7ec504282289fa0daf8990deef5', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -54,4 +54,4 @@ ZTr.style = ZTrStyle0;
 
 export { ZTr as Z };
 
-//# sourceMappingURL=index-1294ef3d.js.map
+//# sourceMappingURL=index-ceebee64.js.map

package/dist/esm/{index-1294ef3d.js.map → index-ceebee64.js.map}

@@ -1 +1 @@
-{"file":"index-1294ef3d.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ojDAAojD,CAAC;AACvkD,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n  /* number of columns of the row. will be set in component's ts code */\n  --columns: 1;\n\n  display: grid;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n  border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n  --show-expandable-button: visible;\n\n  cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n  grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n  border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n  border-left: 0;\n  grid-column: 1 / span calc(var(--columns) + 1);\n  grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n  display: none;\n}\n\n:host([expanded]) {\n  margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n  box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n  background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: auto;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        onClick={this.onRowClick.bind(this)}\n        expanded={this.expanded}\n      >\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index-ceebee64.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ojDAAojD,CAAC;AACvkD,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n  /* number of columns of the row. will be set in component's ts code */\n  --columns: 1;\n\n  display: grid;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n  border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n  --show-expandable-button: visible;\n\n  cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n  grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n  border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n  border-left: 0;\n  grid-column: 1 / span calc(var(--columns) + 1);\n  grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n  display: none;\n}\n\n:host([expanded]) {\n  margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n  box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n  background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: auto;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        onClick={this.onRowClick.bind(this)}\n        expanded={this.expanded}\n      >\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{index-b2c92bbb.js → index-eb53c87f.js}

@@ -9,11 +9,11 @@ const ZThead = class {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '96a3a467d89c4de659693e31c46f8aee89497140', role: "rowgroup" }, h("slot", { key: 'd1af4ab3b7b484f5de8b16a9d4a74e93ae65ee60' })));
+        return (h(Host, { key: '8f4e7bb738d8d4cf6aaf83faf5b2ecd4ed58feac', role: "rowgroup" }, h("slot", { key: '2a7dfe21b40cb26c57c98b6cae40dc801b22e7e3' })));
     }
 };
 ZThead.style = ZTheadStyle0;
 
 export { ZThead as Z };
 
-//# sourceMappingURL=index-b2c92bbb.js.map
+//# sourceMappingURL=index-eb53c87f.js.map

package/dist/esm/{index-b2c92bbb.js.map → index-eb53c87f.js.map}

@@ -1 +1 @@
-{"file":"index-b2c92bbb.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qRAAqR,CAAC;AACxS,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-bottom-border-size: var(\n    --border-size-medium\n  ); /* Needed to handle the border of the expand button cell */\n\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index-eb53c87f.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qRAAqR,CAAC;AACxS,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-bottom-border-size: var(\n    --border-size-medium\n  ); /* Needed to handle the border of the expand button cell */\n\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{index-ea1d61dc.js → index-fc0913d1.js}

@@ -51,7 +51,7 @@ const ZTh = class {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'e8bf215c5bdf5c0486d0de3768919d54a94b8b46', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'e7dfc68ddaeac9f1f763eb62e2717ea5e166df16', class: "cell--content" }, h("slot", { key: '96edba7522e8e43bcfecea9d305ffc9840548020' }), this.showSorting && (h("button", { key: '81cef37216c2c823b1027df224ddb905d3c9d412', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'b00db383bf202b9f774781551a6e59329fed10b2', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '2762feca4feeff61aa673d2a3535f91c9ee7db03', class: "cell--menu-container" }, h("z-button", { key: 'e91a00179db0075255b57d5f946e3c321883faf6', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'c632eb1071f2533aa86251e8e345eda845512693', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'bc3aa447b61972c3299352d49f27c9a060a2ce4d', name: "contextual-menu" })))))));
+        return (h(Host, { key: '80d84d10038bfd5171b1596db3175c4e915e3c81', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'b98f5cbe6c9fa873e39f46ba701c76755a4f9da7', class: "cell--content" }, h("slot", { key: 'f7d2b12496eb334bf07fcfc80e42cacf95a2b6c7' }), this.showSorting && (h("button", { key: '000518536845b9b1383d2aa90a655000a2d0cc0b', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '61cedbe8a54e51cac9d94f00e4d9d84dbcc1b48d', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '3c2ac483288672ac1c65dc3586fb9b346abe53e9', class: "cell--menu-container" }, h("z-button", { key: '6a495a201dc8343267ef8892bc97150c2d4ec4fc', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'b97a3477c4f63bccb2445304676ad2127a26d9df', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'd51ba2caa4e7929e3aedf3beec9b95f4c9b1cf24', name: "contextual-menu" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -62,4 +62,4 @@ ZTh.style = ZThStyle0;
 
 export { ZTh as Z };
 
-//# sourceMappingURL=index-ea1d61dc.js.map
+//# sourceMappingURL=index-fc0913d1.js.map

package/dist/esm/{index-ea1d61dc.js.map → index-fc0913d1.js.map}

@@ -1 +1 @@
-{"file":"index-ea1d61dc.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ktEAAktE,CAAC;AACruE,kBAAe,SAAS;;MCYX,GAAG;;;;;wBAekB,IAAI;2BAQD,IAAI;sBAM9B,KAAK;;sBAYW,KAAK;+BAMZ,eAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,WAAW,GAAG,YAAY,CAAC;KAC9E;;;;;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEpB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAC,CAAC,CAAC;KACrD;IAGS,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,EACjC,QAAQ,EAAE,IAAI,CAAC,WAAW,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,WAAW,KACf,+DACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnC,+DACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI,GAAG,iBAAiB,GAAG,mBAAmB,EACzF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n.cell--content {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-sorting=\"hover\"]) .z-th--sort-button {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n  :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n  :host([show-sorting=\"always\"]) .z-th--sort-button,\n  :host([sorted]) .z-th--sort-button {\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  width: calc(100% - 12px);\n  height: calc(100% - 10px);\n  background-color: transparent;\n  content: \"\";\n}\n\n:host([sorted]) .z-th--sort-button::after,\n.z-th--sort-button:focus:focus-visible::after {\n  box-shadow: var(--shadow-focus-primary);\n}\n","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"],"version":3}
+{"file":"index-fc0913d1.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ktEAAktE,CAAC;AACruE,kBAAe,SAAS;;MCYX,GAAG;;;;;wBAekB,IAAI;2BAQD,IAAI;sBAM9B,KAAK;;sBAYW,KAAK;+BAMZ,eAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,WAAW,GAAG,YAAY,CAAC;KAC9E;;;;;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEpB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAC,CAAC,CAAC;KACrD;IAGS,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,EACjC,QAAQ,EAAE,IAAI,CAAC,WAAW,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,WAAW,KACf,+DACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnC,+DACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI,GAAG,iBAAiB,GAAG,mBAAmB,EACzF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n.cell--content {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-sorting=\"hover\"]) .z-th--sort-button {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n  :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n  :host([show-sorting=\"always\"]) .z-th--sort-button,\n  :host([sorted]) .z-th--sort-button {\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  width: calc(100% - 12px);\n  height: calc(100% - 10px);\n  background-color: transparent;\n  content: \"\";\n}\n\n:host([sorted]) .z-th--sort-button::after,\n.z-th--sort-button:focus:focus-visible::after {\n  box-shadow: var(--shadow-focus-primary);\n}\n","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"],"version":3}