@zanichelli/albe-web-components 19.2.12-rc3 → 19.2.12

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

@@ -9,9 +9,12 @@ const ZTbody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '62b5b227fbdaac2918101db68c60cb68ae9e1ed8', role: "rowgroup" }, index.h("slot", { key: 'ecfc5c26435fb7f03b5e9ea89111499b3b75f3ca' })));
+        return (index.h(index.Host, { key: '9ffbee51d10b3318d8044e8f4f45beff637ce8a3', role: "rowgroup" }, index.h("slot", { key: '5143bbe7239e2804d24e634dba17e60060d1c6d0' })));
     }
 };
 ZTbody.style = stylesCss();
 
 exports.z_tbody = ZTbody;
+//# sourceMappingURL=z-tbody.entry.cjs.js.map
+
+//# sourceMappingURL=z-tbody.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-tbody.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,0CAA0C,CAAC;;MCWvD,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody implements ComponentInterface {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -45,7 +45,7 @@ const ZTd = class {
         this.updateColspan();
     }
     render() {
-        return (index.h(index.Host, { key: '3de2b08ae7ba78632945b3c7a18c39cbc91dd03f', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: '0c281b227221cbd01d76ee8e5909d2ea77071f9a', class: "cell--content" }, index.h("slot", { key: 'fb6a90291b513310d4f48ea3a26c5dfe197d6434' }), this.showMenu && (index.h("div", { key: 'dd2c301848ea64effee47f2c5e690eab30259d19', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: 'b010e8ef6fcd68289f1e5599216c416dcf866788', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: '055d4c47c314f74939b4de3ec60ad43d20beaad2', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: '2d097873fe805093434e9b932c0e36082f5a15a5', name: "contextual-menu" })))))));
+        return (index.h(index.Host, { key: '1058d07bd54d368be4c3ac73bbcb44efd8a1705b', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: '3cd22ea20154c545d48ed73063feb9b1534df313', class: "cell--content" }, index.h("slot", { key: '6b14788ea5f25d84609bb9e5e60aa450507a44e6' }), this.showMenu && (index.h("div", { key: 'a35b449393363b0c36cb9baf93e930eb832eb7ec', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: 'ff31b6ad5a6c104f9c6e9ef565119d5f81d3f91a', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: '919445e5e5d477795a6e21fa7d69c1974da6b05e', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: '637935f871e288248376025f899d2c2490dead9c', name: "contextual-menu" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -57,3 +57,6 @@ const ZTd = class {
 ZTd.style = zTableCellsCss();
 
 exports.z_td = ZTd;
+//# sourceMappingURL=z-td.entry.cjs.js.map
+
+//# sourceMappingURL=z-td.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-td.cjs.entry.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,2hCAA2hC,CAAC;;MCY7iC,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAcE;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAEd;;;;AAIG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAwB,IAAI;AAEpC;;AAEG;AAEH,QAAA,IAAA,CAAA,eAAe,GAAqBA,uBAAe,CAAC,IAAI;AAExD;;AAEG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAmEnB;IAnDW,aAAa,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,OAAO,CAAA,CAAE;;aAC9C;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;;QAG/C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;;AAGpC,IAAA,iBAAiB,CAAC,EAAc,EAAA;QACtC,EAAE,CAAC,eAAe,EAAE;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI;;IAG5C,iBAAiB,GAAA;QACf,IAAI,CAAC,aAAa,EAAE;;IAGtB,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,MAAM,EAAA,WAAA,EACA,IAAI,CAAC,UAAU,EAAA,EAE1BD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,EACZ,IAAI,CAAC,QAAQ,KACZA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC9CA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAEE,qBAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAEC,mBAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,CAC1C,EACFH,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAA,EAE9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,CAAQ,CAC1B,CACR,CACP,CACG,CACD;;;;;;;;;;;;;","names":["PopoverPosition","h","Host","ButtonVariant","ControlSize"],"sources":["src/components/table/cells/z-table-cells.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n","import {Component, ComponentInterface, 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: \"../z-table-cells.css\",\n  shadow: true,\n})\nexport class ZTd implements ComponentInterface {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -13,9 +13,12 @@ const ZTfoot = class {
         this.sticky = false;
     }
     render() {
-        return (index.h(index.Host, { key: '0ecae481f9b2e870d3f4d8898755d15e561154b7', role: "rowgroup", tabIndex: -1 }, index.h("slot", { key: '7d028233f9e6ff2bfdbcc5b00841db5eb5020643' })));
+        return (index.h(index.Host, { key: 'e200294dd24c6a58722245df0b90b8b562fd7293', role: "rowgroup", tabIndex: -1 }, index.h("slot", { key: '0db022a1de8dcbe5457598ab55aacd7b07b9dcb4' })));
     }
 };
 ZTfoot.style = stylesCss();
 
 exports.z_tfoot = ZTfoot;
+//# sourceMappingURL=z-tfoot.entry.cjs.js.map
+
+//# sourceMappingURL=z-tfoot.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-tfoot.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,gOAAgO,CAAC;;MCW7O,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAYf;IAVC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,EAAE,EAAA,EAEZD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  border-top: 1px solid var(--color-surface03);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","import {Component, ComponentInterface, 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 implements ComponentInterface {\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"],"version":3}

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

@@ -74,7 +74,7 @@ const ZTh = class {
         this.updateColspan();
     }
     render() {
-        return (index.h(index.Host, { key: 'deec9e49e024f48b68fe8f54ebb141dcc2b19ec1', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, index.h("div", { key: '65fefbfef58a64f3287a2f1b5defd301392bba2b', class: "cell--content" }, index.h("slot", { key: 'a88011856bacb3b2e0875ed46b8b1468660e5b31' }), this.showSorting && (index.h("button", { key: '46f462137de04bb88eda2e14767660fc4629f087', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, index.h("z-icon", { key: 'bcfe38f7ff932f2074dad3ab11b5df5867292654', name: this.sortDirection === index$1.SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (index.h("div", { key: '90ccc4ecc6f49f8d41a45c9979fabebfd8bcad01', class: "cell--menu-container" }, index.h("z-button", { key: '58b57db3a7129b6a811eca6f014a7b2c02050a41', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), index.h("z-popover", { key: '927004bdbc077e358c00b765d58b64a70f95c83d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: '3b5dbcb8631fa4383366ff718c7e9a080b7ca3be', name: "contextual-menu" })))))));
+        return (index.h(index.Host, { key: '029656c92d8e6abda98ecb1c1f8f37df5561993b', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, index.h("div", { key: 'a00a37619da7fba5ce5f0ff00644c321f6324d3d', class: "cell--content" }, index.h("slot", { key: '427c778843968776001f3a8486df91a32a51a620' }), this.showSorting && (index.h("button", { key: '77d2f3841e1398e9df475d91445a9ccd52133335', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, index.h("z-icon", { key: '3e29de562c699e7ea2b1acab0273d759f80f5b1f', name: this.sortDirection === index$1.SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (index.h("div", { key: 'a6fe1bc8e02e9f5238835c57f32a2a17b5f3e5a2', class: "cell--menu-container" }, index.h("z-button", { key: '7df03bf2a1411aa5357a9f31f2812572a9e564df', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), index.h("z-popover", { key: '73ecdad7bc49295072fa2163e6c94413e269755e', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: 'c5cb377cc2304e37f508589f818fb97037d9935d', name: "contextual-menu" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -86,3 +86,6 @@ const ZTh = class {
 ZTh.style = zTableCellsCss() + stylesCss();
 
 exports.z_th = ZTh;
+//# sourceMappingURL=z-th.entry.cjs.js.map
+
+//# sourceMappingURL=z-th.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-th.cjs.entry.js","mappings":"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","names":["PopoverPosition","SortDirection","h","Host","ButtonVariant","ControlSize"],"sources":["src/components/table/cells/z-table-cells.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n",":host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n.cell--content {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n.z-th--sort-button:focus,\n.z-th--sort-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  opacity: 1;\n  outline: none;\n  pointer-events: all;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-sorting=\"hover\"]) .z-th--sort-button {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n  :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n  :host([show-sorting=\"always\"]) .z-th--sort-button,\n  :host([sorted]) .z-th--sort-button {\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  width: calc(100% - 12px);\n  height: calc(100% - 10px);\n  background-color: transparent;\n  content: \"\";\n}\n","import {Component, ComponentInterface, 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  styleUrls: [\"../z-table-cells.css\", \"styles.css\"],\n  shadow: true,\n})\nexport class ZTh implements ComponentInterface {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Sorted state of the column.\n   */\n  @Prop({reflect: true, mutable: true})\n  sorted: boolean | null = false;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      this.sorted = false;\n\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sorted = true;\n\n    this.sort.emit({sortDirection: this.sortDirection});\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showSorting && (\n            <button\n              class=\"z-th--sort-button\"\n              type=\"button\"\n              onClick={this.handleSort.bind(this)}\n            >\n              <z-icon\n                name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n                width={14}\n                height={14}\n              />\n            </button>\n          )}\n          {this.showMenu && (\n            <div class=\"cell--menu-container\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLElement)}\n                onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n              />\n              <z-popover\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -17,10 +17,13 @@ const ZThead = class {
         this.isFocusable = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'a41caa6571e3a2e4c0b46df9c28507d347011c52', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, index.h("slot", { key: 'fbe9305e97ac906ce0296b871d65d33c75749bd1' })));
+        return (index.h(index.Host, { key: 'c32f2b2d2921e034d18d3b7121f59ee7b3b7b398', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, index.h("slot", { key: 'f74ef0383c4111415134df8ae1492fda11da8568' })));
     }
     get host() { return index.getElement(this); }
 };
 ZThead.style = stylesCss();
 
 exports.z_thead = ZThead;
+//# sourceMappingURL=z-thead.entry.cjs.js.map
+
+//# sourceMappingURL=z-thead.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-thead.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,kUAAkU,CAAC;;MCW/U,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK;AAYpB;IAVC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,EAAE,EAAA,EAEnCD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;;","names":["h","Host"],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-bottom-border-size: var(\n    --border-size-medium\n  ); /* Needed to handle the border of the expand button cell */\n\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n  box-shadow: none;\n  outline: none;\n}\n","import {Component, ComponentInterface, 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 implements ComponentInterface {\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"],"version":3}

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

@@ -45,7 +45,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return index.h("slot", { key: '8219e6e96e73aee72df4e2d8d2e0e9155e8f7a2e', name: "toasts" });
+        return index.h("slot", { key: '0566f651d80145e7781e792714aab742850714f7', name: "toasts" });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -57,3 +57,6 @@ const ZToastNotificationList = class {
 ZToastNotificationList.style = stylesCss();
 
 exports.z_toast_notification_list = ZToastNotificationList;
+//# sourceMappingURL=z-toast-notification-list.entry.cjs.js.map
+
+//# sourceMappingURL=z-toast-notification-list.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-toast-notification-list.cjs.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,g+CAAg+C,CAAC;;MCQ7+C,sBAAsB,GAAA,MAAA;AALnC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUE,QAAA,IAAA,CAAA,QAAQ,GAA8BA,iCAAyB,CAAC,SAAS;;AAIzE,QAAA,IAAA,CAAA,WAAW,GAAa,IAAI;AAEpB,QAAA,IAAA,CAAA,iBAAiB,GAAc,EAAE;AAuC1C;AApCC,IAAA,oBAAoB,CAAC,QAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC;QAC5D,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;;aAC7E;AACL,YAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;;;IAIzF,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE;;;IAIpB,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;AAC9D,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC;AAC5D,QAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;IAGvF,iBAAiB,GAAA;AACvB,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjH,IAAI,UAAU,EAAE;AACd,YAAA,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AAC1B,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;gBACjC,MAAM,OAAO,GAAG,IAAI;gBACpB,IAAI,CAAC,MAAM,EAAE;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC;AACnC,aAAC,CAAC;;;IAIN,MAAM,GAAA;AACJ,QAAA,OAAOC,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAQ;;;;;;;;;;;;;","names":["ToastNotificationPosition","h"],"sources":["src/components/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 10000;\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: calc(var(--space-unit) * 2);\n  margin-bottom: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n  width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n  margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n  top: 0;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    margin: calc(var(--space-unit) * 3);\n  }\n\n  :host([position=\"top-centre\"]) {\n    top: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-start;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"top-right\"]) {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"bottom-centre\"]) {\n    bottom: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-end;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    right: 0;\n    bottom: 0;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-end;\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 50vw;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    margin: calc(var(--space-unit) * 4);\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 33vw;\n  }\n}\n","import {Component, ComponentInterface, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList implements ComponentInterface {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[] = [];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"],"version":3}

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

@@ -4200,19 +4200,19 @@ const ZToastNotification = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6d582aa79426417081842e17e0ccb61fffec81a0', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (index.h(index.Host, { key: 'cb958b060a71a07a4ecce7638880632a729b244e', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, index.h("div", { key: '3b509ad43470b3bd5ceec401d28ce887a7f1de10', class: "toast-notification-container" }, index.h("div", { key: '7caaa8f330f15214c827eb89666ea2fdbbde3920', class: "toast-notification-content" }, index.h("div", { key: '49ad47ccf665b0bbcdbf94430cc2dab1e05219ab', class: "toast-notification-text" }, this.heading && index.h("span", { key: 'c2ea1e161d8c6bbefc9cff2ff27eadc713f5c133', class: "title" }, this.heading), index.h("span", { key: 'f93072a79ae141440445746ad654de84b50d2441', class: "message" }, index.h("slot", { key: '09d8108c415599d93b67925496fd52416fac4907', name: "message" }, this.message && index.h("span", { key: '011e00ae54cee5a33059cef9760576781c63f737', innerHTML: purify.sanitize(this.message) })))), index.h("div", { key: '67bde6f049f31a6b4e7d84c720b036f974bedba7', class: "button-container", hidden: !this.hasSlottedButton }, index.h("slot", { key: 'c92a7087e89012ee690c8e41577ccee412be112f', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (index.h("button", { key: '41198c2a426c339046948b8969d3002aee7607c3', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, index.h("div", { key: 'bb0c924c4bf765c3c5b10497a705b46ea9355e57', class: "toast-notification-container" }, index.h("div", { key: 'd4c0c26704b32f411c0c2d31fa76d870869fca20', class: "toast-notification-content" }, index.h("div", { key: 'e8e4ed45ff772f585df2c64211e931d27fe65605', class: "toast-notification-text" }, this.heading && index.h("span", { key: '3498d097acea2e76513990226b9e1a25f82dcf36', class: "title" }, this.heading), index.h("span", { key: 'ce6794321d893ed41fbe155326b3e24d7768923b', class: "message" }, index.h("slot", { key: '5af5d1d7a6ebb52ac2e866443a07af15488043be', name: "message" }, this.message && index.h("span", { key: 'e9a525bb1342fb801a96aa6b9c81b485c0e0ddf9', innerHTML: purify.sanitize(this.message) })))), index.h("div", { key: 'd1505e5111a6e9886847828dfa0007273017536b', class: "button-container", hidden: !this.hasSlottedButton }, index.h("slot", { key: 'fd1e6eda846a9351058b0b9103f1564bd7641a04', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (index.h("button", { key: '57243b952bc95fd15669fa39ac43848e652559f6', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == index$1.KeyboardCode.SPACE || e.code == index$1.KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, index.h("z-icon", { key: '3316d0e9e999039cd99eb96faa37c81219e5617b', name: "multiply-circled" }))))));
+            } }, index.h("z-icon", { key: '5c88075aa5be21bf3e8838701473793fe5e04dfe', name: "multiply-circled" }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -4230,3 +4230,6 @@ const ZToastNotification = class {
 ZToastNotification.style = stylesCss();
 
 exports.z_toast_notification = ZToastNotification;
+//# sourceMappingURL=z-toast-notification.entry.cjs.js.map
+
+//# sourceMappingURL=z-toast-notification.cjs.entry.js.map