@zanichelli/albe-web-components 18.5.3 → 18.5.4

package/dist/cjs/z-table.cjs.entry.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-96af6326.js');
 require('./index-62712250.js');
-require('./index-364e3f60.js');
-require('./index-bf197d11.js');
-require('./index-339004f9.js');
+require('./index-1c7cd5df.js');
+require('./index-f011b2e3.js');
+require('./index-c798013f.js');
 require('./utils-93961cb6.js');
 require('./index-97a4c18d.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-6ba31c6e.js');
-require('./index-aeea3159.js');
+require('./index-09238e31.js');
+require('./index-66928615.js');
 
-const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
+const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
 const ZTableStyle0 = stylesCss;
 
 const ZTable = class {
@@ -45,7 +45,7 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: 'a37bf2d018aedf198e11248d9952c062deddc545', expandable: this.expandable }, index.h("div", { key: 'a769b79ee55eb5425bb6c72059437f051967c3b3', class: "table", role: "table" }, index.h("slot", { key: '0ba782144cc2f139484954747d530d6f1c606a0d' }))));
+        return (index.h(index.Host, { key: '6749b44ab2c28b92e6b282487bf9f23c40cead58', expandable: this.expandable }, index.h("div", { key: '633237695b09182263ac74b5118d533a8cae33b8', class: "table", role: "table" }, index.h("slot", { key: 'f46d287050238e137ababadae8b8eb1ffdb96c7b' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-table.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-table.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,8TAA8T,CAAC;AACjV,qBAAe,SAAS;;MCeX,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;KAC7E;;;;IAOD,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC;YACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,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;KACJ;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,IAC/BD,kEACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,IAEZA,oEAAa,CACT,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n  position: relative;\n  display: block;\n  overflow: auto;\n  max-width: 100%;\n  box-sizing: border-box;\n  background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n  --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","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"],"version":3}
+{"file":"z-table.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,8WAA8W,CAAC;AACjY,qBAAe,SAAS;;MCeX,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;KAC7E;;;;IAOD,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC;YACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,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;KACJ;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,IAC/BD,kEACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,IAEZA,oEAAa,CACT,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n  position: relative;\n  display: block;\n  overflow: auto;\n  min-width: max-content;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n  background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n  --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","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"],"version":3}

package/dist/cjs/z-td.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ba31c6e.js');
+const index = require('./index-09238e31.js');
 require('./index-96af6326.js');
 require('./index-97a4c18d.js');
 

package/dist/cjs/z-tfoot.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-364e3f60.js');
+const index = require('./index-1c7cd5df.js');
 require('./index-96af6326.js');
 
 

package/dist/cjs/z-th.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aeea3159.js');
+const index = require('./index-66928615.js');
 require('./index-96af6326.js');
 require('./index-97a4c18d.js');
 

package/dist/cjs/z-thead.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf197d11.js');
+const index = require('./index-f011b2e3.js');
 require('./index-96af6326.js');
 
 

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -45,7 +45,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'be2523fdc92c4f08670a086cd86a55c4948129b2', name: "toasts" });
+        return index.h("slot", { key: 'a9c11e55185366906495c445a3352f72254ae390', name: "toasts" });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-toast-notification.cjs.entry.js

@@ -4172,7 +4172,7 @@ const ZToastNotification = class {
             } })))));
     }
     render() {
-        return (index.h(index.Host, { key: '5bb937ac057201c971f4aa0e96a08c683c7e6c95', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
+        return (index.h(index.Host, { key: '2be336d6b255e861e1e60fc7fab83ae29a5dfb1b', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }

package/dist/cjs/z-toggle-button.cjs.entry.js

@@ -25,10 +25,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (index.h("button", { key: '603e31baab82eafe1c1c4bd9085e628bc3990d35', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (index.h("button", { key: '7ea71641a362b06f79fc18c44f5722f148d68bca', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, index.h("z-icon", { key: 'b56ebc0a31dbed5a4b18a88db9b54da3eb85153d', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, index.h("z-icon", { key: 'b6362ba86a8f2e9ae5778e70ec28712a541841cd', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/cjs/z-toggle-switch.cjs.entry.js

@@ -33,14 +33,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (index.h(index.Host, { key: 'c5dec4dd88ebbc289c430d79137f64904ad7431c' }, index.h("input", { key: '3c9c3e98b5bece430c7bf8378ca6c724975caf67', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: 'ce26f0e2288f9727cf848352c9f6ffdd384a334e', htmlFor: this.htmlid, class: {
+        return (index.h(index.Host, { key: '25e15bfaa9fadcb7b96251ff8146905877233624' }, index.h("input", { key: '9f4f0be0fcf7fba56195998a16966b74a6e2324c', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: 'cc29c0e884c74f3beeaf81290ba607f17c67701a', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, index.h("span", { key: 'a44a40d2ecfbad16904ebf8d15b78f3ca50719c1' }, index.h("slot", { key: '9d1286b581c8709f809f4a9f2bce9fc756523426' })), index.h("span", { key: 'aaf437ff81d1777cc3d0b46204828519f97a2244', class: {
+            } }, index.h("span", { key: '757ccbc98f2a7f91ff5b3477fc149f4496d87189' }, index.h("slot", { key: '505879e878f513c75c8d9af2a82ede3259fe39a0' })), index.h("span", { key: '7d56c1e57c886cfe8f7ab2ce903958f07a1e83ba', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, index.h("span", { key: 'd9b41cfd137d7a0de200d5cb7cb948794f787fa9', class: "circle" }, this.checked && (index.h("z-icon", { key: '369501daa858675d995e35d8458ea1e5a2ec044d', width: 12, height: 12, name: "checkmark" })))))));
+            } }, index.h("span", { key: 'b2c587e20596144ddd26ab0a002ad560df156aa6', class: "circle" }, this.checked && (index.h("z-icon", { key: 'd438e7f776b8eae418293bfa827b4950285dc6da', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -21,7 +21,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (index.h("z-popover", { key: '9eaca4c0a1c2a54075e95ff8e22e8845d72592a7', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: '12010f81d4f78fcefb1f6b03092229cc47655bbd' })));
+        return (index.h("z-popover", { key: '7f3f2a54754ce53b4480eed65116bdff1cd0ac30', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: '37f2dab454e27b1817c9fc3ae68e5f29dfee13e8' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/cjs/z-tr.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-339004f9.js');
+const index = require('./index-c798013f.js');
 require('./index-96af6326.js');
 require('./utils-93961cb6.js');
 require('./index-97a4c18d.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-6ba31c6e.js');
-require('./index-aeea3159.js');
+require('./index-09238e31.js');
+require('./index-66928615.js');
 
 
 

package/dist/cjs/z-visually-hidden.cjs.entry.js

@@ -12,7 +12,7 @@ const ZVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '3d75845d1ec7fa620b82b32f68fe73368d800e61' });
+        return index.h("slot", { key: 'b76451842cf32ab957ee81e9b689e94e35256524' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

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

@@ -29,7 +29,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '8c866902e986231a18c02c447bc390d14f55aecf', role: "cell", "menu-open": this.isMenuOpen, tabIndex: 0 }, h("div", { key: '83b6e697548f7fec6705e74111253564066005d8', class: "cell--content" }, h("slot", { key: '4129469503f265975bf5a28aa1ea576fa2e3311b' }), this.showMenu && (h("div", { key: 'd70b2bb104a891270515e7428593ce9cedbd882c', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'cacd10ac34bb695883c1e0d63dc96623fa3c59e9', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'e6fdca5d2ba1047264c0703a222c3c5a5c30480b', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'e3e996e448fd49d4248d98d219a899ea254d7fd1', 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" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"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,EAC1B,QAAQ,EAAE,CAAC;YAEX,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        tabIndex={0}\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.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

@@ -3,7 +3,7 @@
   display: flex;
   max-width: 100%;
   align-items: center;
-  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+  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);
 }
@@ -25,12 +25,6 @@
   z-index: 2;
 }
 
-:host(:focus) {
-  z-index: 20;
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
 .cell--content {
   display: flex;
   width: 100%;

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

@@ -3,7 +3,7 @@
   display: flex;
   max-width: 100%;
   align-items: center;
-  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+  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);
 }
@@ -25,12 +25,6 @@
   z-index: 2;
 }
 
-:host(:focus) {
-  z-index: 20;
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
 .cell--content {
   display: flex;
   width: 100%;
@@ -92,6 +86,7 @@
 }
 
 .z-th--sort-button {
+  position: relative;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -99,6 +94,14 @@
   outline: none;
 }
 
+.z-th--sort-button:focus,
+.z-th--sort-button:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  opacity: 1;
+  outline: none;
+  pointer-events: all;
+}
+
 @media (min-width: 768px) and (hover: hover) {
   :host([show-sorting="hover"]) .z-th--sort-button {
     opacity: 0;

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

@@ -36,7 +36,7 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'a37bf2d018aedf198e11248d9952c062deddc545', expandable: this.expandable }, h("div", { key: 'a769b79ee55eb5425bb6c72059437f051967c3b3', class: "table", role: "table" }, h("slot", { key: '0ba782144cc2f139484954747d530d6f1c606a0d' }))));
+        return (h(Host, { key: '6749b44ab2c28b92e6b282487bf9f23c40cead58', expandable: this.expandable }, h("div", { key: '633237695b09182263ac74b5118d533a8cae33b8', class: "table", role: "table" }, h("slot", { key: 'f46d287050238e137ababadae8b8eb1ffdb96c7b' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,6 +2,7 @@ import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { PopoverPosition, SortDirection, VisibilityCondition } from "../../../beans";
+import { boolean } from "../../../utils/utils";
 import "../../z-button/index";
 import "./index";
 import "./index.stories.css";
@@ -176,6 +177,7 @@ export const Sticky = {
  */
 export const CellsWithContextualMenu = {
     argTypes: {
+        isFocusable: boolean,
         showMenu: {
             control: {
                 type: "inline-radio",
@@ -193,6 +195,7 @@ export const CellsWithContextualMenu = {
         },
     },
     args: {
+        isFocusable: true,
         showMenu: VisibilityCondition.HOVER,
         popoverPosition: PopoverPosition.AUTO,
     },
@@ -203,7 +206,7 @@ export const CellsWithContextualMenu = {
         "--z-table--cells-padding": args["--z-table--cells-padding"],
     })}
     >
-      <z-thead>
+      <z-thead .isFocusable=${args.isFocusable}>
         <z-tr>
           <z-th>Colonna 1</z-th>
           <z-th
@@ -237,6 +240,7 @@ export const CellsWithContextualMenu = {
  */
 export const SortAction = {
     argTypes: {
+        isFocusable: boolean,
         showSorting: {
             options: Object.values(VisibilityCondition),
             control: {
@@ -245,6 +249,7 @@ export const SortAction = {
         },
     },
     args: {
+        isFocusable: true,
         showSorting: VisibilityCondition.HOVER,
     },
     render: (args) => html `<z-table
@@ -254,7 +259,7 @@ export const SortAction = {
         "--z-table--cells-padding": args["--z-table--cells-padding"],
     })}
     >
-      <z-thead>
+      <z-thead .isFocusable=${args.isFocusable}>
         <z-tr>
           <z-th
             .sortDirection=${SortDirection.ASC}

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

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

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

@@ -4,8 +4,10 @@
   position: relative;
   display: block;
   overflow: auto;
+  min-width: max-content;
   max-width: 100%;
   box-sizing: border-box;
+  padding: var(--space-unit);
   background-color: var(--color-surface01);
 }
 

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

@@ -8,7 +8,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '68f9134c92fd8aa1db8236ca1cae82945b8dff40', role: "rowgroup" }, h("slot", { key: 'e76426e09634deb41395104af9c37f8f75415435' })));
+        return (h(Host, { key: 'a7106c5ef3c347b7cc797a6cd1031e5d29cf2ae3', role: "rowgroup", tabIndex: -1 }, h("slot", { key: 'cd4f042bdfd7df449603fbcb49cf4b78da6f4d36' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -6,9 +6,10 @@ import { Host, h } from "@stencil/core";
 export class ZThead {
     constructor() {
         this.sticky = false;
+        this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: '8f4e7bb738d8d4cf6aaf83faf5b2ecd4ed58feac', role: "rowgroup" }, h("slot", { key: '2a7dfe21b40cb26c57c98b6cae40dc801b22e7e3' })));
+        return (h(Host, { key: '17fe1d87112460ce7b7dd16e72cb3be1b92c7eb3', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'ef0c0e95a383057b7ed5964f7c24cb8a59b31808' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }
@@ -41,8 +42,27 @@ export class ZThead {
                 "attribute": "sticky",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "isFocusable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The element is focusable"
+                },
+                "attribute": "is-focusable",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=index.js.map

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

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

package/dist/collection/components/table/z-thead/styles.css

@@ -17,3 +17,8 @@
   top: 0;
   box-shadow: 0 2px 4px -2px var(--shadow-color-base);
 }
+
+:host(:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}

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

@@ -39,11 +39,25 @@ export class ZTr {
         this.expanded = !this.expanded;
         this.expand.emit({ expanded: this.expanded });
     }
+    onKeyDown(event) {
+        if (!this.expandable) {
+            return;
+        }
+        const active = document.activeElement;
+        if (active !== this.host) {
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.expanded = !this.expanded;
+            this.expand.emit({ expanded: this.expanded });
+        }
+    }
     componentWillLoad() {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '6b028d12da65adf37eb6637ddf9bfd06d9f0db24', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this) }, h("div", { key: '598c2865ff6df8c8b6335e08a559407c6074bc6a', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'b6b1ec7c8817f0a2494b509f536d640d54012620', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'ed1dee7ce70dfee25497d7ba33ce3655217f6d0f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '13d5eea11840b0a28dff58fe144791d8e9cfaca5', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '5a8cbf39900a7569b0fb31d225be6fade59c82ea', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '75f7a74a6eda8f50d40beedbe387da74d58c276b', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'd34b5aa1778f3d830fd80354c79cd93a9b703737', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'fef99c968e191fe7970665b9a45721fada207db0', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'f1cf676da370f0c2500914decdc5f09e1e647b7f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'cd09d8ed8cf0a33137d4d1d91ec9720227f359ba', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

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

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