@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

package/dist/esm/index-39a920c4.js

@@ -1,65 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { P as PopoverPosition, S as SortDirection, B as ButtonVariant, e as ControlSize } from './index-106473a8.js';
-
-const stylesCss = ":host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}: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{z-index:1;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{z-index:1;opacity:1;pointer-events:all}}:host{z-index:1;padding:0;background-color:var(--color-background);font-weight:var(--font-sb)}.cell--content{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2))}:host([show-sorting]) .cell--content{column-gap:var(--space-unit)}.z-th--sort-button{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}.z-th--sort-button:focus,.z-th--sort-button:focus-visible{box-shadow:var(--shadow-focus-primary);opacity:1;outline:none;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-sorting=\"hover\"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting=\"hover\"]:hover) .z-th--sort-button,:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting=\"always\"]) .z-th--sort-button,:host([sorted]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting=\"always\"]) .z-th--sort-button::after,:host([sorted]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:\"\"}";
-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.sorted = false;
-        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.
-     * @fires sort
-     */
-    handleSort() {
-        if (!this.sortDirection) {
-            this.sorted = false;
-            return;
-        }
-        this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
-        this.sorted = true;
-        this.sort.emit({ sortDirection: this.sortDirection });
-    }
-    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: '411a78aacd4b76ea9180828a7567aaaa92f9a3fa', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'a4d93cc27f9e8e69cffac93180ac54c9a6f79a21', class: "cell--content" }, h("slot", { key: 'b205cd6628dbfd09638a23ea6ad4bbe577303a87' }), this.showSorting && (h("button", { key: 'e28f86801a946cd89a30c9b8e289a653916299da', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'fbbb4bb4ff4cfba7958afbf05edad06b5e8c725c', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '0d288653fbaef390090c540d4c3ac707d30a05c2', class: "cell--menu-container" }, h("z-button", { key: 'ff413fe7178f5d072fdee95f42ca37f06b6b7a92', 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: '675231832d5e2adf277f470b476ca7e4d5579272', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '6f3dba38c66701f7bf169a35b6793a09388c6bb2', name: "contextual-menu" })))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-};
-ZTh.style = ZThStyle0;
-
-export { ZTh as Z };
-
-//# sourceMappingURL=index-39a920c4.js.map

package/dist/esm/index-39a920c4.js.map

@@ -1 +0,0 @@
-{"file":"index-39a920c4.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,svEAAsvE,CAAC;AACzwE,kBAAe,SAAS;;MCYX,GAAG;;;;;wBAekB,IAAI;2BAQD,IAAI;sBAM9B,KAAK;;sBAYW,KAAK;+BAMZ,eAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,WAAW,GAAG,YAAY,CAAC;KAC9E;;;;;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEpB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAC,CAAC,CAAC;KACrD;IAGS,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,EACjC,QAAQ,EAAE,IAAI,CAAC,WAAW,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,WAAW,KACf,+DACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnC,+DACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI,GAAG,iBAAiB,GAAG,mBAAmB,EACzF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n.cell--content {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  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, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Sorted state of the column.\n   */\n  @Prop({reflect: true, mutable: true})\n  sorted: boolean | null = false;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      this.sorted = false;\n\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sorted = true;\n\n    this.sort.emit({sortDirection: this.sortDirection});\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showSorting && (\n            <button\n              class=\"z-th--sort-button\"\n              type=\"button\"\n              onClick={this.handleSort.bind(this)}\n            >\n              <z-icon\n                name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n                width={14}\n                height={14}\n              />\n            </button>\n          )}\n          {this.showMenu && (\n            <div class=\"cell--menu-container\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLElement)}\n                onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n              />\n              <z-popover\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/index-41934729.js

@@ -1,19 +0,0 @@
-import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
-
-const stylesCss = ":host{display:block;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";
-const ZTfootStyle0 = stylesCss;
-
-const ZTfoot = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sticky = false;
-    }
-    render() {
-        return (h(Host, { key: '0c62e2be78670a3ca9b2b82ab61c79f9cbd8937d', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '1f5e6f45de8205da130383070df5082b36be9d87' })));
-    }
-};
-ZTfoot.style = ZTfootStyle0;
-
-export { ZTfoot as Z };
-
-//# sourceMappingURL=index-41934729.js.map

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

@@ -1 +0,0 @@
-{"file":"index-41934729.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kOAAkO,CAAC;AACrP,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,IAEZ,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\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/index-4845b32f.js

@@ -1,45 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { P as PopoverPosition, B as ButtonVariant, e as ControlSize } from './index-106473a8.js';
-
-const stylesCss = ":host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}: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{z-index:1;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{z-index:1;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: 'eaa97de639cf8d1f64bb3e4a8b826a3dd2debfb4', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '11e1bf9ba47637968fd0373d489e5d8844bb4304', class: "cell--content" }, h("slot", { key: 'f09ea15ae261639c73fc13abbf1382cf21c7ab44' }), this.showMenu && (h("div", { key: 'b59ec3e965b62f42a7c07a56fed17a1ffc4251a4', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '836df0132f086767313c774f15a5118b52031da5', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '5f67dc7eb6f5273d536a399b46e5c3e7b3ab1573', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'ee20304c588e9e8ebdd4a31ac410f247c5fa560c', name: "contextual-menu" })))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-};
-ZTd.style = ZTdStyle0;
-
-export { ZTd as Z };
-
-//# sourceMappingURL=index-4845b32f.js.map

package/dist/esm/index-4845b32f.js.map

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

package/dist/esm/index-599cd05a.js

@@ -1,18 +0,0 @@
-import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
-
-const stylesCss = ":host{display:block;box-sizing:border-box}";
-const ZTbodyStyle0 = stylesCss;
-
-const ZTbody = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '3ad959681c2649e9742c43b6b338802c75601707', role: "rowgroup" }, h("slot", { key: 'fa42cbad29615f222b8fe60843b35e4871007bd3' })));
-    }
-};
-ZTbody.style = ZTbodyStyle0;
-
-export { ZTbody as Z };
-
-//# sourceMappingURL=index-599cd05a.js.map

package/dist/esm/index-599cd05a.js.map

@@ -1 +0,0 @@
-{"file":"index-599cd05a.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}