@zanichelli/albe-web-components 16.3.4 → 16.3.6

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

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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7759a0d.js');
+const index = require('./index-b26fbd76.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: '8b2a410e823aa6223e009a4def88f9f1c8dbf488', name: "toasts" });
+        return index.h("slot", { key: '92d1e3eb3d27b178014dec77a61efcf6de185933', name: "toasts" });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2830,7 +2830,7 @@ const ZToastNotification = class {
             } }, index.h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (index.h(index.Host, { key: 'b79165640d2b2537dd8003db29e1c18845f1976c', style: {
+        return (index.h(index.Host, { key: '64e3bc3f5fea2d418f58e010fb4660fc2369dacb', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

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: 'eef4aef08bdcf1537b12b43287cc58c05274bf37', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (index.h("button", { key: 'ff8e644553c0ebb8e943a7be38308fcebcbb9f74', 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: '93a555e6eec548e3932c28cb6574680d34ecdedf', 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: '75be11bb4f5f880aa057a1f519956e683ce4601f', 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: '17bcfee6b1fcfcd715d5d2e8686d5227dc3b16cd' }, index.h("input", { key: '682e25a434a34c9e814103e30cc42cf769f74953', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: 'e0fb9679dded13e315aefaaf6c105e124a46c967', htmlFor: this.htmlid, class: {
+        return (index.h(index.Host, { key: '362b31e90ab912df5167446dfd415dfe8f16beaa' }, index.h("input", { key: '0fe79cb376f214a1ef2f7bfeb70e8538db0bf4be', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: 'e98eb52726eae27cdf4df9c46c96259f77b708ea', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, index.h("span", { key: '9a5ff289a9e7faa3d1354ca8522833415fcdb517' }, index.h("slot", { key: 'cae4d0ba661998799cc549ef5c21398175aa8d0f' })), index.h("span", { key: '8f27fe985dec52b128c6635a0502fd76417f202d', class: {
+            } }, index.h("span", { key: 'a0b1627779aa98080777b817a3930d750904afc9' }, index.h("slot", { key: 'cd44ff95db14fc84f360f64aa08180972cb8d532' })), index.h("span", { key: '070a6d688fd1899554c4a6913ea3df1e5a395403', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, index.h("span", { key: 'a68c0fe55df17f133325eb51a2efbd757842eb97', class: "circle" }, this.checked && (index.h("z-icon", { key: '6e7168d8c6c88771a20381e31b995bc2ebcd89cd', width: 12, height: 12, name: "checkmark" })))))));
+            } }, index.h("span", { key: '0ff0eced728bbc43d0a754374dc233c88abe4603', class: "circle" }, this.checked && (index.h("z-icon", { key: 'bce3b5b876c813e2f9b8c9715a973133ecd3863b', 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: '6ddb780209f561f072220e597e9c03413cb58f79', 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: '3891ffd31f733de168896c550304244f0b2a8131' })));
+        return (index.h("z-popover", { key: '055811eac8115dde60dadaf79951780df2ff64ae', 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: 'bf96152d1131f62d93afbfe155ed0e80ad001385' })));
     }
 };
 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-4bce26ea.js');
+const index = require('./index-30387c1f.js');
 require('./index-96af6326.js');
 require('./utils-257558ff.js');
 require('./index-bab7a651.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-1dfb8b3c.js');
-require('./index-d4272b0e.js');
+require('./index-b504fdc8.js');
+require('./index-0335126f.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: 'cab952b13471ad0b374bdc45ca65bac7dcc75659' });
+        return index.h("slot", { key: '3f4358dfc989f8813ff2aa14180b8ec23ce55494' });
     }
 };
 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: '36a62d2c751b3b889c7f69280418e95ff02192d5', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '6d593df3a5d84033f5ec055a00dc972d113ac4cb' }), this.showMenu && (h("div", { key: '77fbfdd8dc31fcfb6694461c8c0ed430323c3926', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'caf153b8ba5861b3dc7eabf966cdfdd9d3b197da', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'd89b8e0e5b8e622a6e9a08640bff28d64ff0eb07', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '339066d4dd0d6d57ac2358e6a8105aa690b2ca06', name: "contextual-menu" }))))));
+        return (h(Host, { key: '36a62d2c751b3b889c7f69280418e95ff02192d5', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'd9cdf988ecedb17c06b7081919a77122b5d28660', class: "cell--content" }, h("slot", { key: 'f5627d2fea6d851092356ba32932f7ccc1031398' }), this.showMenu && (h("div", { key: 'f58a7b0a33b62aeca07a2fa21958a714345b6dac', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '6b96fb5d5f7108f29a010f93e68f4e9e1b249ab1', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'a73b3a6c8b3aff6c689f14c2b90bc4a2626cff3b', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '9444ad52d7660466cb784e565306fd72922d5426', 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;YAE1B,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;gBAC9C,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;gBACF,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;oBAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACI,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        <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      </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

@@ -1,14 +1,18 @@
 :host {
   position: relative;
   display: flex;
-  min-width: 128px;
-  box-sizing: border-box;
+  max-width: 100%;
   align-items: center;
   padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
   background-color: var(--color-surface01);
   gap: calc(var(--space-unit) * 2) var(--space-unit);
 }
 
+:host,
+* {
+  box-sizing: border-box;
+}
+
 :host([sticky]) {
   position: sticky;
   z-index: 1;
@@ -17,21 +21,23 @@
   box-shadow: 8px 0 16px -8px var(--shadow-color-base);
 }
 
-/* Leave the space for the menu button */
-:host([show-menu])::after {
-  display: inline-block;
+:host([menu-open]) {
+  z-index: 2;
+}
+
+.cell--content {
+  display: flex;
+  width: 100%;
   height: 100%;
-  margin-right: calc(var(--space-unit) * 4);
-  background: transparent;
-  content: "";
-  user-select: none;
+  align-items: center;
+}
+
+:host([show-menu]) .cell--content {
+  column-gap: var(--space-unit);
 }
 
 .cell--menu-container {
-  position: absolute;
-  z-index: 1;
-  top: var(--space-unit);
-  right: var(--space-unit);
+  margin-left: auto;
 }
 
 :host(:not([show-menu])) .cell--menu-container {
@@ -41,6 +47,7 @@
 
 :host(:is([show-menu], [menu-open])) .cell--menu-container,
 :host([show-menu]) .cell--menu-container:focus-within {
+  z-index: 1;
   opacity: 1;
   pointer-events: all;
 }
@@ -56,6 +63,7 @@
   }
 
   :host([show-menu="hover"]:hover) .cell--menu-container {
+    z-index: 1;
     opacity: 1;
     pointer-events: all;
   }

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

@@ -9,8 +9,10 @@ export class ZTh {
     constructor() {
         this.colspan = undefined;
         this.showMenu = null;
+        this.showSorting = null;
         this.sticky = false;
         this.sortDirection = undefined;
+        this.sorted = false;
         this.popoverPosition = PopoverPosition.AUTO;
         this.isMenuOpen = false;
     }
@@ -29,12 +31,12 @@ export class ZTh {
      */
     handleSort() {
         if (!this.sortDirection) {
+            this.sorted = false;
             return;
         }
         this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
-        this.sort.emit({
-            sortDirection: this.sortDirection,
-        });
+        this.sorted = true;
+        this.sort.emit({ sortDirection: this.sortDirection });
     }
     updateColspan() {
         if (this.colspan) {
@@ -48,7 +50,7 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '222509e3075cd7a6668301f8b54cebd3af7bd843', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, h("slot", { key: '728dffd6851b3b9f6647a136c0d84d0da10c894b' }), this.sortDirection && (h("button", { key: 'a75b468b0057f404fdfcafd77cf63f10999f274a', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '9d4ac199ba40228afd8b4ac087effde4ae37f55b', name: this.sortDirection === SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '4769a6dfa1e6222448b1d409746dbe1f6420cc5d', class: "cell--menu-container" }, h("z-button", { key: '90951859a7fdcaddec8769e95d8a65de5c7e5ff7', 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: '3066d766feab4b810d41b78a5f3801cbffa5688d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '9bf90081ba6d5c82cdd9c69f0dd536bda756b8af', name: "contextual-menu" }))))));
+        return (h(Host, { key: 'e0dd2a24787597fa832ba06e3eec6c18a8204f2f', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '4274667d48308bfdaf727f1707ef7d44eb71a356', class: "cell--content" }, h("slot", { key: '52166cb6e7a60e5fb248e22990c8942944ca05fe' }), this.showSorting && (h("button", { key: '1b8c8cbb9539eb83b3381535fdb857bdd9451fe3', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '414ddf43bf9fec1df07cfe4146a4c9bdbc8dacbf', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '7633c04c015392315720bc7566fc59b7cfb2cc1d', class: "cell--menu-container" }, h("z-button", { key: '0786009425989ad4eb5878f665d095c318a335d8', 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: '59ebb822c77766acc18cdb9c4e292aba20407e63', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '801d41cbe534e989407421b60df2a7a7c46e4d22', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }
@@ -105,6 +107,30 @@ export class ZTh {
                 "reflect": true,
                 "defaultValue": "null"
             },
+            "showSorting": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VisibilityCondition",
+                    "resolved": "VisibilityCondition.ALWAYS | VisibilityCondition.HOVER",
+                    "references": {
+                        "VisibilityCondition": {
+                            "location": "import",
+                            "path": "../../../../beans",
+                            "id": "src/beans/index.tsx::VisibilityCondition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the sorting button.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the sort button."
+                },
+                "attribute": "show-sorting",
+                "reflect": true,
+                "defaultValue": "null"
+            },
             "sticky": {
                 "type": "boolean",
                 "mutable": false,
@@ -141,11 +167,29 @@ export class ZTh {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Current sorting direction.\nSet `SortDirection.ASC` or `SortDirection.DESC` to show the sort icon."
+                    "text": "Current sorting direction."
                 },
                 "attribute": "sort-direction",
                 "reflect": false
             },
+            "sorted": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean | null",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sorted state of the column."
+                },
+                "attribute": "sorted",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "popoverPosition": {
                 "type": "string",
                 "mutable": false,

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

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

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

@@ -1,14 +1,18 @@
 :host {
   position: relative;
   display: flex;
-  min-width: 128px;
-  box-sizing: border-box;
+  max-width: 100%;
   align-items: center;
   padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
   background-color: var(--color-surface01);
   gap: calc(var(--space-unit) * 2) var(--space-unit);
 }
 
+:host,
+* {
+  box-sizing: border-box;
+}
+
 :host([sticky]) {
   position: sticky;
   z-index: 1;
@@ -17,21 +21,23 @@
   box-shadow: 8px 0 16px -8px var(--shadow-color-base);
 }
 
-/* Leave the space for the menu button */
-:host([show-menu])::after {
-  display: inline-block;
+:host([menu-open]) {
+  z-index: 2;
+}
+
+.cell--content {
+  display: flex;
+  width: 100%;
   height: 100%;
-  margin-right: calc(var(--space-unit) * 4);
-  background: transparent;
-  content: "";
-  user-select: none;
+  align-items: center;
+}
+
+:host([show-menu]) .cell--content {
+  column-gap: var(--space-unit);
 }
 
 .cell--menu-container {
-  position: absolute;
-  z-index: 1;
-  top: var(--space-unit);
-  right: var(--space-unit);
+  margin-left: auto;
 }
 
 :host(:not([show-menu])) .cell--menu-container {
@@ -41,6 +47,7 @@
 
 :host(:is([show-menu], [menu-open])) .cell--menu-container,
 :host([show-menu]) .cell--menu-container:focus-within {
+  z-index: 1;
   opacity: 1;
   pointer-events: all;
 }
@@ -56,6 +63,7 @@
   }
 
   :host([show-menu="hover"]:hover) .cell--menu-container {
+    z-index: 1;
     opacity: 1;
     pointer-events: all;
   }
@@ -63,30 +71,57 @@
 
 
 :host {
+  z-index: 1;
+  padding: 0;
   background-color: var(--color-surface02);
   font-weight: var(--font-sb);
 }
 
-/* :host([sticky]) {
-  background-color: var(--color-surface02);
-} */
+.cell--content {
+  padding: calc(var(--space-unit) * 2);
+}
 
-:host([sortable]) {
-  cursor: pointer;
+:host([show-sorting]) .cell--content {
+  column-gap: var(--space-unit);
 }
 
 .z-th--sort-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: 0;
   border: none;
-  margin-top: auto;
   background-color: transparent;
   cursor: pointer;
+  outline: none;
 }
 
-.z-th--sort-button:focus {
+@media (min-width: 768px) and (hover: hover) {
+  :host([show-sorting="hover"]) .z-th--sort-button {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([show-sorting="hover"]:hover) .z-th--sort-button,
+  :host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,
+  :host([show-sorting="always"]) .z-th--sort-button,
+  :host([sorted]) .z-th--sort-button {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+:host([show-sorting="hover"]:hover) .z-th--sort-button::after,
+:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,
+:host([show-sorting="always"]) .z-th--sort-button::after,
+:host([sorted]) .z-th--sort-button::after {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: calc(100% - 12px);
+  height: calc(100% - 10px);
+  background-color: transparent;
+  content: "";
+}
+
+:host([sorted]) .z-th--sort-button::after,
+.z-th--sort-button:focus:focus-visible::after {
   box-shadow: var(--shadow-focus-primary);
-  outline: none;
 }

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: '2d8e50a74ff7ccf3c6dc4f5324a512177ad52f45', expandable: this.expandable }, h("div", { key: '5e1d9d44dc90ac06683bf5306f7eecadffe807fe', class: "table", role: "table" }, h("slot", { key: '12a615e336a4ad50390a2ab0b12b2d20b3503f06' }))));
+        return (h(Host, { key: '6fa1464a9d96267c0a1a45078a7b19e15930b2be', expandable: this.expandable }, h("div", { key: '9436f4627cab2b6c474bbfc803b64514cd152fb3', class: "table", role: "table" }, h("slot", { key: 'b9cf927ccd915cf55f4bb2e5a8943ceff347f9f7' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -236,6 +236,17 @@ export const CellsWithContextualMenu = {
  * Clicking the button will fire the `sort` event with the `sortDirection` as detail.
  */
 export const SortAction = {
+    argTypes: {
+        showSorting: {
+            options: Object.values(VisibilityCondition),
+            control: {
+                type: "inline-radio",
+            },
+        },
+    },
+    args: {
+        showSorting: VisibilityCondition.HOVER,
+    },
     render: (args) => html `<z-table
       class="z-table-demo"
       .bordered=${args.bordered}
@@ -245,15 +256,20 @@ export const SortAction = {
     >
       <z-thead>
         <z-tr>
-          <z-th>Colonna 1</z-th>
           <z-th
             .sortDirection=${SortDirection.ASC}
             .showMenu=${VisibilityCondition.HOVER}
+            .showSorting=${args.showSorting}
           >
-            Colonna 2 con menu e sorting
+            Colonna 1 con menu e sorting
             <div slot="contextual-menu">Contenuto del popover</div>
           </z-th>
-          <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>
+          <z-th>Colonna 2</z-th>
+          <z-th
+            .sortDirection=${SortDirection.DESC}
+            .showSorting=${args.showSorting}
+            >Colonna 3 con sorting</z-th
+          >
         </z-tr>
       </z-thead>
       <z-tbody>${repeat([...new Array(3)], () => html `<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>