@zanichelli/albe-web-components 16.2.1 → 16.3.0-rc1

package/dist/components/z-th.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as PopoverPosition, S as SortDirection, B as ButtonVariant, e as ControlSize } from './index2.js';
+import { P as PopoverPosition, S as SortDirection, W as VisibilityCondition, B as ButtonVariant, e as ControlSize } from './index2.js';
 import { d as defineCustomElement$4 } from './index4.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index22.js';
 
-const stylesCss = ":host{position:relative;display:flex;min-width:128px;box-sizing:border-box;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([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:\"\";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}:host{background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th--sort-button:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
+const stylesCss = ":host{position:relative;display:flex;max-width:100%;box-sizing:border-box;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([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}.cell--content-container{display:flex;width:100%;height:100%;align-items:center}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}:host{z-index:1;box-sizing:border-box;padding:0;background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sticky]){background-color:var(--color-surface02)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:none}:host(:hover) .z-th--sort-button,:host .sort-active{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th-content-container{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between}:host>.zth-body{display:flex;width:100%;height:100%;box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) * 2)}.zth-body:focus{border:2px solid var(--blue800);outline:none}";
 const ZThStyle0 = stylesCss;
 
 const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
@@ -15,6 +15,7 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
         this.sort = createEvent(this, "sort", 7);
         this.colspan = undefined;
         this.showMenu = null;
+        this.showSorting = null;
         this.sticky = false;
         this.sortDirection = undefined;
         this.popoverPosition = PopoverPosition.AUTO;
@@ -31,6 +32,7 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
     }
     /**
      * Handle the click on the sort button.
+     * This method will also handle the z-index logic.
      * @fires sort
      */
     handleSort() {
@@ -38,9 +40,13 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
             return;
         }
         this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
-        this.sort.emit({
-            sortDirection: this.sortDirection,
-        });
+        this.sort.emit({ sortDirection: this.sortDirection });
+        const row = this.host.parentElement;
+        if (row) {
+            const zThElements = Array.from(row.querySelectorAll("z-th"));
+            zThElements.forEach((th) => (th.style.zIndex = "1"));
+        }
+        this.host.style.zIndex = "2";
     }
     updateColspan() {
         if (this.colspan) {
@@ -54,7 +60,11 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
         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: '660ca313ef9c4f960f44e39d388ee68383aa0014', tabIndex: "0", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'd9632f0eb358056fe457d4a7e0850573ed302e1e', tabIndex: 1, class: "zth-body", onClick: () => {
+                if (this.showSorting) {
+                    this.handleSort();
+                }
+            } }, h("div", { key: '30f60a7650a81da5a54406169e2f837b20ce0192', class: "z-th-content-container" }, h("slot", { key: 'f1627b5eddc86e537b246b6c5b49f8e84d6df93e' }), this.showSorting && (h("button", { key: '16c4514224423893aa4c433464af81669ab1d8d6', class: { "z-th--sort-button": true, "sort-active": this.showSorting === VisibilityCondition.ALWAYS }, type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '362508e690d2772ec2683e37e015faada3e6c8b7', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '8cea76eff8e0a693ca7edcffbf236434bfd62ec0', class: "cell--menu-container" }, h("z-button", { key: 'f8eb6c03f1f247c34854dad68ee2528df0315076', 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: '2e0fa31ad07bea35043f229429dccc1e1cb692d9', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'f4587b5003987af9498bcf99ac126e63e8c86ba3', name: "contextual-menu" }))))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -64,6 +74,7 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
 }, [1, "z-th", {
         "colspan": [2],
         "showMenu": [513, "show-menu"],
+        "showSorting": [513, "show-sorting"],
         "sticky": [516],
         "sortDirection": [1025, "sort-direction"],
         "popoverPosition": [1, "popover-position"],

package/dist/components/z-th.js.map

@@ -1 +1 @@
-{"file":"z-th.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,m4CAAm4C,CAAC;AACt5C,kBAAe,SAAS;;MCYXA,KAAG;;;;;;;wBAekB,IAAI;sBAM3B,KAAK;;+BAaI,eAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,WAAW,GAAG,YAAY,CAAC;KAC9E;;;;;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YACb,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CAAC,CAAC;KACJ;IAGS,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,IAEjC,8DAAa,EACZ,IAAI,CAAC,aAAa,KACjB,+DACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnC,+DACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,iBAAiB,GAAG,mBAAmB,EACxF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTh"],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  background-color: var(--color-surface02);\n  font-weight: var(--font-sb);\n}\n\n/* :host([sticky]) {\n  background-color: var(--color-surface02);\n} */\n\n:host([sortable]) {\n  cursor: pointer;\n}\n\n.z-th--sort-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin-top: auto;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.z-th--sort-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * 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":"z-th.js","mappings":"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","names":["ZTh"],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  z-index: 1;\n  box-sizing: border-box;\n  padding: 0;\n  background-color: var(--color-surface02);\n  font-weight: var(--font-sb);\n}\n\n:host([sticky]) {\n  background-color: var(--color-surface02);\n}\n\n:host([sortable]) {\n  cursor: pointer;\n}\n\n.z-th--sort-button {\n  display: none;\n}\n\n:host(:hover) .z-th--sort-button,\n:host .sort-active {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin-top: auto;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.z-th-content-container {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: space-between;\n}\n\n:host > .zth-body {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2);\n}\n\n.zth-body:focus {\n  border: 2px solid var(--blue800);\n  outline: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   * 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   * This method will also handle the z-index logic.\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\n    this.sort.emit({sortDirection: this.sortDirection});\n\n    const row = this.host.parentElement;\n    if (row) {\n      const zThElements = Array.from(row.querySelectorAll(\"z-th\"));\n      zThElements.forEach((th) => (th.style.zIndex = \"1\"));\n    }\n\n    this.host.style.zIndex = \"2\";\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        tabIndex=\"0\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div\n          tabIndex={1}\n          class=\"zth-body\"\n          onClick={() => {\n            if (this.showSorting) {\n              this.handleSort();\n            }\n          }}\n        >\n          <div class=\"z-th-content-container\">\n            <slot></slot>\n            {this.showSorting && (\n              <button\n                class={{\"z-th--sort-button\": true, \"sort-active\": this.showSorting === VisibilityCondition.ALWAYS}}\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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-thead.js

@@ -11,7 +11,7 @@ const ZThead$1 = /*@__PURE__*/ proxyCustomElement(class ZThead extends HTMLEleme
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '44bbf57a110328328c65171e6463a5128d0be2e7', role: "rowgroup" }, h("slot", { key: '1953f6a0c9d96f3cbf66ed0e856391d19e985e20' })));
+        return (h(Host, { key: 'd470fa2c8d59e6155b61631291454921a16b4841', role: "rowgroup" }, h("slot", { key: '109322a6c20ffa8a8f530740a3ebd5c82aad3f2c' })));
     }
     static get style() { return ZTheadStyle0; }
 }, [1, "z-thead", {

package/dist/components/z-toast-notification-list.js

@@ -43,7 +43,7 @@ const ZToastNotificationList$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNo
         }
     }
     render() {
-        return h("slot", { key: 'c358a615637656bb5b4cd475af919c495a278da5', name: "toasts" });
+        return h("slot", { key: '513159cb1778944e6f05d0288e6e5e994be93bba', name: "toasts" });
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/z-toast-notification.js

@@ -2829,7 +2829,7 @@ const ZToastNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotifi
             } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (h(Host, { key: '3553c94f59787f1fdbb0ea349578c61ebbda1c21', style: {
+        return (h(Host, { key: '3316fce284326c930a41993c79e3db2edea03caf', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

package/dist/components/z-toggle-button.js

@@ -24,10 +24,10 @@ const ZToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class ZToggleButton ext
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: 'a0335db670898e98b232857bd9f878f9f6bceaa0', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '66bb73dad322ae69c658327384573f81d3b98419', 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() }, h("z-icon", { key: '353df156fc85eb6824152ec2a5578426263627b7', 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() }, h("z-icon", { key: '8c0baf9fbfa1cdf7e67a95bde1cca92e52ec807a', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
     static get style() { return ZToggleButtonStyle0; }
 }, [1, "z-toggle-button", {

package/dist/components/z-toggle-switch.js

@@ -30,14 +30,14 @@ const ZToggleSwitch$1 = /*@__PURE__*/ proxyCustomElement(class ZToggleSwitch ext
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: 'cd90ad41b289f192e485c0cce90ae2a8057ddd7d' }, h("input", { key: '5cc5e59f8cc0cc0548b072e41149cf7dc31bbcd8', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '9774cc39f7ebe6bd02c5ce0e05d1b53075f4e426', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: '6389bb2d4bfdabffaa56a16db6dd8ecfa5131bbf' }, h("input", { key: 'cc387244dd0e06eba73c8fd297c404a93d5ca626', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '6d2fff265f1da504fa7f457522add6135d135e9f', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '074941585b8a5862f04bd2d404ab74c86bcaa250' }, h("slot", { key: '7fe6486df9479e76a7783646aed3e620f7f1d0f2' })), h("span", { key: 'd4bf4b3febdab1bf8e88c12e1c7aa421b020997c', class: {
+            } }, h("span", { key: '45a9187dc9b39d507054dcdbfcc551339107912b' }, h("slot", { key: 'ea4ef56223b79672776ecf96dc3f6a72e5207c54' })), h("span", { key: 'daf05b63ff8f501ae578e065383e766b8cde9eb7', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: 'c46c06ff10a35060945b9298a551cf66508a5450', class: "circle" }, this.checked && (h("z-icon", { key: '7ed667dc510d42e3e001ad8cb82b5c5f9d012583', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '628c38acdfa68d2d0018da18b1696ab16a749f48', class: "circle" }, this.checked && (h("z-icon", { key: '1d1e368a76fb0e914d3d3f30bd2e776d724ecba6', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get style() { return ZToggleSwitchStyle0; }
 }, [6, "z-toggle-switch", {

package/dist/components/z-tooltip.js

@@ -20,7 +20,7 @@ const ZTooltip$1 = /*@__PURE__*/ proxyCustomElement(class ZTooltip extends HTMLE
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: '2df25a3fa481ccc045d4a49f464c06d9d9c3e555', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '136991637393809eba3d6c6fad0f44209b8c8960' })));
+        return (h("z-popover", { key: '8d7f6392c1f63c4acbe31200d9df9cac9d3a0bf0', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '00216297d52c182feaf93e6e7959c47986f8d581' })));
     }
     static get style() { return ZTooltipStyle0; }
 }, [1, "z-tooltip", {

package/dist/components/z-tr.js

@@ -3,7 +3,7 @@ import { r as randomId } from './utils.js';
 import './index2.js';
 import { d as defineCustomElement$2 } from './index9.js';
 
-const stylesCss = ":host{--columns:1;display:grid;min-width:max-content;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
+const stylesCss = ":host{--columns:1;display:grid;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
 const ZTrStyle0 = stylesCss;
 
 const ZTr$1 = /*@__PURE__*/ proxyCustomElement(class ZTr extends HTMLElement {
@@ -45,7 +45,7 @@ const ZTr$1 = /*@__PURE__*/ proxyCustomElement(class ZTr extends HTMLElement {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '1048c6109f085ef7d6a2c80ee1f821378f1419eb', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'b4333edd3915db24134ec862e61e42af75544544', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'f5d0233257d0ffd2d1221b850f9d33565b882bfe', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '0c0e51bac7a95bab954450447b2bce3dfa0079b6', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'f7af8227af6ec842ead9b12ad13a6d1df448c9a6', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '4c47e5b949ba00727a524d2fe43897e908fc93db', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '78b358626d679a394b40e73c4ebf75c960599e1e', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '76f6b63a082e1f1631048f2d28261b7e4911be3d', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'cc71d3040278fc21df718d68ec762f6ea4710245', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '72fe314d209f884fc303036667632b502b5fff6e', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-tr.js.map

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

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

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

package/dist/esm/index-34477eb0.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-a2130b6a.js';
+import { r as randomId } from './utils-8ade9e2d.js';
+import './index-b8299b2f.js';
+import './index-6a12f127.js';
+
+const stylesCss = ":host{--columns:1;display:grid;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
+const ZTrStyle0 = stylesCss;
+
+const ZTr = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.expand = createEvent(this, "expand", 7);
+        this.expandable = false;
+        this.expanded = false;
+        this.expandableContentId = undefined;
+    }
+    updateColumns() {
+        const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
+        if (this.expandable) {
+            cells.pop();
+        }
+        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+        this.host.style.setProperty("--columns", `${columns}`);
+        if (this.expandable) {
+            const expandableContent = cells.pop();
+            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
+            this.expandableContentId = expandableContent.id;
+        }
+    }
+    /**
+     * Handle click on row.
+     * Skip expansion if the click is on a element with `prevent-expand` css class.
+     */
+    onRowClick(event) {
+        const preventExpand = event.target.closest(".prevent-expand");
+        if (!this.expandable || preventExpand) {
+            return;
+        }
+        this.expanded = !this.expanded;
+        this.expand.emit({ expanded: this.expanded });
+    }
+    componentWillLoad() {
+        this.updateColumns();
+    }
+    render() {
+        return (h(Host, { key: '4c47e5b949ba00727a524d2fe43897e908fc93db', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '78b358626d679a394b40e73c4ebf75c960599e1e', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '76f6b63a082e1f1631048f2d28261b7e4911be3d', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'cc71d3040278fc21df718d68ec762f6ea4710245', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '72fe314d209f884fc303036667632b502b5fff6e', onSlotchange: this.updateColumns.bind(this) })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "expandable": ["updateColumns"]
+    }; }
+};
+ZTr.style = ZTrStyle0;
+
+export { ZTr as Z };
+
+//# sourceMappingURL=index-34477eb0.js.map

package/dist/esm/index-34477eb0.js.map

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

package/dist/esm/{index-b556b384.js → index-46831abe.js}

@@ -9,11 +9,11 @@ const ZTfoot = class {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'b872f68fd9e643528d02adb7bd76f8377a59fcdc', role: "rowgroup" }, h("slot", { key: '6ebdc491ee2459d415a53fb96e5f27405704a99f' })));
+        return (h(Host, { key: 'c668a1b4eb7f5a7c69ba535a0f26aced80382821', role: "rowgroup" }, h("slot", { key: 'a8d4ec90b7ce509013f95821a311a23e5040fbc7' })));
     }
 };
 ZTfoot.style = ZTfootStyle0;
 
 export { ZTfoot as Z };
 
-//# sourceMappingURL=index-b556b384.js.map
+//# sourceMappingURL=index-46831abe.js.map

package/dist/esm/{index-b556b384.js.map → index-46831abe.js.map}

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

package/dist/esm/index-6a12f127.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-a2130b6a.js';
+import { P as PopoverPosition, S as SortDirection, W as VisibilityCondition, B as ButtonVariant, e as ControlSize } from './index-b7dbacb4.js';
+
+const stylesCss = ":host{position:relative;display:flex;max-width:100%;box-sizing:border-box;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([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}.cell--content-container{display:flex;width:100%;height:100%;align-items:center}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}:host{z-index:1;box-sizing:border-box;padding:0;background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sticky]){background-color:var(--color-surface02)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:none}:host(:hover) .z-th--sort-button,:host .sort-active{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th-content-container{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between}:host>.zth-body{display:flex;width:100%;height:100%;box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) * 2)}.zth-body:focus{border:2px solid var(--blue800);outline:none}";
+const ZThStyle0 = stylesCss;
+
+const ZTh = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sort = createEvent(this, "sort", 7);
+        this.colspan = undefined;
+        this.showMenu = null;
+        this.showSorting = null;
+        this.sticky = false;
+        this.sortDirection = undefined;
+        this.popoverPosition = PopoverPosition.AUTO;
+        this.isMenuOpen = false;
+    }
+    /**
+     * Get the value to set to the `aria-sort` attribute based on the current sort direction.
+     */
+    get ariaSortDirection() {
+        if (!this.sortDirection) {
+            return null;
+        }
+        return this.sortDirection === SortDirection.ASC ? "ascending" : "descending";
+    }
+    /**
+     * Handle the click on the sort button.
+     * This method will also handle the z-index logic.
+     * @fires sort
+     */
+    handleSort() {
+        if (!this.sortDirection) {
+            return;
+        }
+        this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
+        this.sort.emit({ sortDirection: this.sortDirection });
+        const row = this.host.parentElement;
+        if (row) {
+            const zThElements = Array.from(row.querySelectorAll("z-th"));
+            zThElements.forEach((th) => (th.style.zIndex = "1"));
+        }
+        this.host.style.zIndex = "2";
+    }
+    updateColspan() {
+        if (this.colspan) {
+            this.host.style.gridColumn = `span ${this.colspan}`;
+        }
+        else {
+            this.host.style.removeProperty("grid-column");
+        }
+    }
+    componentWillLoad() {
+        this.updateColspan();
+    }
+    render() {
+        return (h(Host, { key: '660ca313ef9c4f960f44e39d388ee68383aa0014', tabIndex: "0", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'd9632f0eb358056fe457d4a7e0850573ed302e1e', tabIndex: 1, class: "zth-body", onClick: () => {
+                if (this.showSorting) {
+                    this.handleSort();
+                }
+            } }, h("div", { key: '30f60a7650a81da5a54406169e2f837b20ce0192', class: "z-th-content-container" }, h("slot", { key: 'f1627b5eddc86e537b246b6c5b49f8e84d6df93e' }), this.showSorting && (h("button", { key: '16c4514224423893aa4c433464af81669ab1d8d6', class: { "z-th--sort-button": true, "sort-active": this.showSorting === VisibilityCondition.ALWAYS }, type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '362508e690d2772ec2683e37e015faada3e6c8b7', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '8cea76eff8e0a693ca7edcffbf236434bfd62ec0', class: "cell--menu-container" }, h("z-button", { key: 'f8eb6c03f1f247c34854dad68ee2528df0315076', 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: '2e0fa31ad07bea35043f229429dccc1e1cb692d9', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'f4587b5003987af9498bcf99ac126e63e8c86ba3', name: "contextual-menu" }))))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "colspan": ["updateColspan"]
+    }; }
+};
+ZTh.style = ZThStyle0;
+
+export { ZTh as Z };
+
+//# sourceMappingURL=index-6a12f127.js.map

package/dist/esm/index-6a12f127.js.map

@@ -0,0 +1 @@
+{"file":"index-6a12f127.js","mappings":"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","names":[],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  z-index: 1;\n  box-sizing: border-box;\n  padding: 0;\n  background-color: var(--color-surface02);\n  font-weight: var(--font-sb);\n}\n\n:host([sticky]) {\n  background-color: var(--color-surface02);\n}\n\n:host([sortable]) {\n  cursor: pointer;\n}\n\n.z-th--sort-button {\n  display: none;\n}\n\n:host(:hover) .z-th--sort-button,\n:host .sort-active {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin-top: auto;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.z-th-content-container {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: space-between;\n}\n\n:host > .zth-body {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2);\n}\n\n.zth-body:focus {\n  border: 2px solid var(--blue800);\n  outline: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   * 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   * This method will also handle the z-index logic.\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\n    this.sort.emit({sortDirection: this.sortDirection});\n\n    const row = this.host.parentElement;\n    if (row) {\n      const zThElements = Array.from(row.querySelectorAll(\"z-th\"));\n      zThElements.forEach((th) => (th.style.zIndex = \"1\"));\n    }\n\n    this.host.style.zIndex = \"2\";\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        tabIndex=\"0\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div\n          tabIndex={1}\n          class=\"zth-body\"\n          onClick={() => {\n            if (this.showSorting) {\n              this.handleSort();\n            }\n          }}\n        >\n          <div class=\"z-th-content-container\">\n            <slot></slot>\n            {this.showSorting && (\n              <button\n                class={{\"z-th--sort-button\": true, \"sort-active\": this.showSorting === VisibilityCondition.ALWAYS}}\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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/index-b8299b2f.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-a2130b6a.js';
+import { P as PopoverPosition, B as ButtonVariant, e as ControlSize } from './index-b7dbacb4.js';
+
+const stylesCss = ":host{position:relative;display:flex;max-width:100%;box-sizing:border-box;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([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}.cell--content-container{display:flex;width:100%;height:100%;align-items:center}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}";
+const ZTdStyle0 = stylesCss;
+
+const ZTd = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.colspanChange = createEvent(this, "colspanChange", 6);
+        this.colspan = undefined;
+        this.sticky = false;
+        this.showMenu = null;
+        this.popoverPosition = PopoverPosition.AUTO;
+        this.isMenuOpen = false;
+    }
+    updateColspan() {
+        if (this.colspan) {
+            this.host.style.gridColumn = `span ${this.colspan}`;
+        }
+        else {
+            this.host.style.removeProperty("grid-column");
+        }
+        this.colspanChange.emit(this.colspan || 1);
+    }
+    onMenuButtonClick(ev) {
+        ev.stopPropagation();
+        this.popoverEl.open = !this.popoverEl.open;
+    }
+    componentWillLoad() {
+        this.updateColspan();
+    }
+    render() {
+        return (h(Host, { key: '36a62d2c751b3b889c7f69280418e95ff02192d5', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '82adb24df4f465535b30f5a0ba10c452efeb174e', class: "cell--content-container", style: this.showMenu && { justifyContent: "space-between" } }, h("slot", { key: 'c8696269f69dd2a177857fec6edd6ed3d09000ef' }), this.showMenu && (h("div", { key: '1d4f2f1c37aa62ed345d42bd13bb675008e657db', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'f49b61b2eccd54fc3acd39deaa59641d105034c8', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'a029ccdd0100543058c01f84d0454bb9b5e40cd2', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '90c964239ee1b578d3e566c5658dab44768ddeae', name: "contextual-menu" })))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "colspan": ["updateColspan"]
+    }; }
+};
+ZTd.style = ZTdStyle0;
+
+export { ZTd as Z };
+
+//# sourceMappingURL=index-b8299b2f.js.map

package/dist/esm/index-b8299b2f.js.map

@@ -0,0 +1 @@
+{"file":"index-b8299b2f.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,s4BAAs4B,CAAC;AACz5B,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,4DACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAC,cAAc,EAAE,eAAe,EAAC,IAEzD,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTd {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div\n          class=\"cell--content-container\"\n          style={this.showMenu && {justifyContent: \"space-between\"}}\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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{index-175661e6.js → index-c3b467d4.js}

@@ -8,11 +8,11 @@ const ZTbody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'f3e13d724ae83c0117eafa2bd141a1b9319f0331', role: "rowgroup" }, h("slot", { key: 'f84d2b79230cb6b8305c0b01f4a48f8811634421' })));
+        return (h(Host, { key: 'c858acb53b6f5c2eb2310d359f4be2bdb1e347c8', role: "rowgroup" }, h("slot", { key: '07990becd0b8bbf2d56fa761a62ce4dc329da6ab' })));
     }
 };
 ZTbody.style = ZTbodyStyle0;
 
 export { ZTbody as Z };
 
-//# sourceMappingURL=index-175661e6.js.map
+//# sourceMappingURL=index-c3b467d4.js.map

package/dist/esm/{index-175661e6.js.map → index-c3b467d4.js.map}

@@ -1 +1 @@
-{"file":"index-175661e6.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4CAA4C,CAAC;AAC/D,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index-c3b467d4.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4CAA4C,CAAC;AAC/D,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{index-a81f1558.js → index-ea8cd874.js}

@@ -9,11 +9,11 @@ const ZThead = class {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '44bbf57a110328328c65171e6463a5128d0be2e7', role: "rowgroup" }, h("slot", { key: '1953f6a0c9d96f3cbf66ed0e856391d19e985e20' })));
+        return (h(Host, { key: 'd470fa2c8d59e6155b61631291454921a16b4841', role: "rowgroup" }, h("slot", { key: '109322a6c20ffa8a8f530740a3ebd5c82aad3f2c' })));
     }
 };
 ZThead.style = ZTheadStyle0;
 
 export { ZThead as Z };
 
-//# sourceMappingURL=index-a81f1558.js.map
+//# sourceMappingURL=index-ea8cd874.js.map

package/dist/esm/{index-a81f1558.js.map → index-ea8cd874.js.map}

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