@zanichelli/albe-web-components 13.1.0-rc2 → 13.1.0

package/dist/collection/deprecated/z-table-deprecated/z-table-sticky-footer/index.spec.js

@@ -1,16 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { ZTableStickyFooter } from "./index";
-describe("Suite test ZTableStickyFooter", () => {
-    it("Test render ZTableStickyFooter con slot", async () => {
-        const page = await newSpecPage({
-            components: [ZTableStickyFooter],
-            html: `<z-table-sticky-footer><div>dummy</div></z-table-sticky-footer>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-table-sticky-footer>
-        <div>dummy</div>
-      </z-table-sticky-footer>
-    `);
-    });
-});
-//# sourceMappingURL=index.spec.js.map

package/dist/collection/deprecated/z-table-deprecated/z-table-sticky-footer/index.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/deprecated/z-table-deprecated/z-table-sticky-footer/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE3C,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;IAC7C,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,kBAAkB,CAAC;YAChC,IAAI,EAAE,iEAAiE;SACxE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZTableStickyFooter} from \"./index\";\n\ndescribe(\"Suite test ZTableStickyFooter\", () => {\n  it(\"Test render ZTableStickyFooter con slot\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableStickyFooter],\n      html: `<z-table-sticky-footer><div>dummy</div></z-table-sticky-footer>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-sticky-footer>\n        <div>dummy</div>\n      </z-table-sticky-footer>\n    `);\n  });\n});\n"]}

package/dist/collection/deprecated/z-table-deprecated/z-table-sticky-footer/styles.css

@@ -1,11 +0,0 @@
-:host {
-  position: sticky;
-  left: 0;
-  display: block;
-  padding: calc(var(--space-unit) * 2);
-  border-width: var(--border-size-small) 0 var(--border-size-medium);
-  border-style: solid;
-  border-color: var(--color-surface03);
-  background-color: var(--color-surface01);
-  font-weight: var(--font-rg);
-}

package/dist/components/index28.js

@@ -1,45 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const stylesCss = ".sc-z-table-empty-box-h{display:block;padding:calc(var(--space-unit)) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);background-color:var(--color-surface01)}.sc-z-table-empty-box-s>*{margin-top:var(--space-unit)}.cta.sc-z-table-empty-box{display:flex;flex-direction:row;margin-top:calc(var(--space-unit) / 2)}.cta.has-2-cta.sc-z-table-empty-box{flex-direction:column}@media only screen and (min-width: 768px){.sc-z-table-empty-box-h{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 7) calc(var(--space-unit) * 3)\n      calc(var(--space-unit) * 7)}.sc-z-table-empty-box-s>*{margin-right:calc(var(--space-unit) * 2)}.cta.sc-z-table-empty-box{margin-top:var(--space-unit)}.cta.has-2-cta.sc-z-table-empty-box{flex-direction:row}}";
-const ZTableEmptyBoxStyle0 = stylesCss;
-
-const ZTableEmptyBox = /*@__PURE__*/ proxyCustomElement(class ZTableEmptyBox extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.message = "Siamo spiacenti, al momento non sono presenti dati da visualizzare.";
-        this.subtitle = "";
-    }
-    componentWillLoad() {
-        this.hasCta1Slot = !!this.hostElement.querySelector('[slot="cta1"]');
-        this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
-    }
-    render() {
-        return (h(Host, { key: '15246acb9b5e2df169b353883dd30b4dc9f9b298' }, h("span", { key: '78ecd045b2fd73998a446baadfabc9e5ec3d03d1', class: "body-3-sb" }, this.message), h("br", { key: 'b41c15173e3985b96884767fc52d5d4a2816bec8' }), !!this.subtitle && h("span", { class: "body-4" }, this.subtitle), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: {
-                "cta": true,
-                "has-2-cta": !!this.hasCta1Slot && !!this.hasCta2Slot,
-            } }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" })))));
-    }
-    get hostElement() { return this; }
-    static get style() { return ZTableEmptyBoxStyle0; }
-}, [6, "z-table-empty-box", {
-        "message": [1],
-        "subtitle": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-table-empty-box"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-table-empty-box":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTableEmptyBox);
-            }
-            break;
-    } });
-}
-
-export { ZTableEmptyBox as Z, defineCustomElement as d };
-
-//# sourceMappingURL=index28.js.map

package/dist/components/index28.js.map

@@ -1 +0,0 @@
-{"file":"index28.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ywBAAywB,CAAC;AAC5xB,6BAAe,SAAS;;MCUX,cAAc;;;;uBAKN,qEAAqE;wBAIpE,EAAE;;IAOtB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACrE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACtE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC7C,4DAAM,EACL,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9D,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,MACxC,WACE,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW;aACtD,IAED,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/deprecated/z-table-deprecated/z-table-empty-box/styles.css?tag=z-table-empty-box&encapsulation=scoped","src/deprecated/z-table-deprecated/z-table-empty-box/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  padding: calc(var(--space-unit)) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);\n  background-color: var(--color-surface01);\n}\n\n::slotted(*) {\n  margin-top: var(--space-unit);\n}\n\n.cta {\n  display: flex;\n  flex-direction: row;\n  margin-top: calc(var(--space-unit) / 2);\n}\n\n.cta.has-2-cta {\n  flex-direction: column;\n}\n\n@media only screen and (min-width: 768px) {\n  :host {\n    padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 7) calc(var(--space-unit) * 3)\n      calc(var(--space-unit) * 7);\n  }\n\n  ::slotted(*) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n\n  .cta {\n    margin-top: var(--space-unit);\n  }\n\n  .cta.has-2-cta {\n    flex-direction: row;\n  }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n/**\n * @deprecated\n */\n@Component({\n  tag: \"z-table-empty-box\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTableEmptyBox {\n  @Element() hostElement: HTMLZTableEmptyBoxElement;\n\n  /** Sets main title message*/\n  @Prop()\n  message?: string = \"Siamo spiacenti, al momento non sono presenti dati da visualizzare.\";\n\n  /** Sets message */\n  @Prop()\n  subtitle?: string = \"\";\n\n  /** Checks if cta1 or cta2 slots exist */\n  private hasCta1Slot: boolean;\n\n  private hasCta2Slot: boolean;\n\n  componentWillLoad(): void {\n    this.hasCta1Slot = !!this.hostElement.querySelector('[slot=\"cta1\"]');\n    this.hasCta2Slot = !!this.hostElement.querySelector('[slot=\"cta2\"]');\n  }\n\n  render(): HTMLZTableEmptyBoxElement {\n    return (\n      <Host>\n        <span class=\"body-3-sb\">{this.message}</span>\n        <br />\n        {!!this.subtitle && <span class=\"body-4\">{this.subtitle}</span>}\n        {(!!this.hasCta1Slot || !!this.hasCta2Slot) && (\n          <div\n            class={{\n              \"cta\": true,\n              \"has-2-cta\": !!this.hasCta1Slot && !!this.hasCta2Slot,\n            }}\n          >\n            <slot name=\"cta1\"></slot>\n            <slot name=\"cta2\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index29.js

@@ -1,120 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { B as ButtonVariant, d as ButtonSize, P as PopoverPosition } from './index2.js';
-import { a as getElementTree } from './utils.js';
-import { d as defineCustomElement$3 } from './index4.js';
-import { d as defineCustomElement$2 } from './index9.js';
-import { d as defineCustomElement$1 } from './index25.js';
-
-const stylesCss = ":host{position:relative;display:table-cell;border-bottom:var(--border-size-medium) solid var(--gray200);background-color:var(--gray50);font-family:var(--font-family-sans);font-weight:var(--font-sb);text-align:start}.container{display:flex;align-items:flex-end}:host(.sortable){cursor:pointer}:host([padding=\"x-small\"]){padding:calc(var(--space-unit) * 0.5)}:host([padding=\"small\"]){padding:calc(var(--space-unit))}:host([padding=\"medium\"]){padding:calc(var(--space-unit) * 2)}:host([padding=\"large\"]){padding:calc(var(--space-unit) * 2.5)}:host([padding=\"special\"]){padding:0}.arrow{padding-left:var(--space-unit);opacity:1}.popover-container{position:absolute;top:var(--space-unit);right:var(--space-unit);display:none}.popover-container z-popover{--z-popover-theme--surface:var(--gray200);position:relative;z-index:1}.popover-container.visible{display:block}:host(:hover) .popover-container{display:block}";
-const ZTableHeaderStyle0 = stylesCss;
-
-const ZTableHeader = /*@__PURE__*/ proxyCustomElement(class ZTableHeader extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.sort = createEvent(this, "sort", 7);
-        this.columnId = undefined;
-        this.padding = "medium";
-        this.sortable = undefined;
-        this.showButton = undefined;
-        this.defaultSortDirection = "asc";
-        this.sortDirection = "none";
-        this.emitOnSort = this.emitOnSort.bind(this);
-    }
-    emitOnSort() {
-        this.sort.emit({
-            columnId: this.columnId,
-            sortDirection: this.sortDirection,
-        });
-    }
-    handleSort() {
-        if (!this.sortable) {
-            return;
-        }
-        this.sortDirection = (() => {
-            switch (this.sortDirection) {
-                case "asc":
-                    return "desc";
-                case "desc":
-                    return "asc";
-                case "none":
-                    return this.defaultSortDirection;
-                default:
-                    return "none";
-            }
-        })();
-        this.emitOnSort();
-    }
-    handleMenuClick() {
-        this.popover.open = !this.popover.open;
-    }
-    handleOutsideClick(e) {
-        const tree = getElementTree(e.target);
-        const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
-        if (!parent && this.popover) {
-            this.popover.open = false;
-        }
-    }
-    handleClickHeaders(e) {
-        const target = e.target;
-        const parent = getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-table-header");
-        if (!this.sortable || !parent) {
-            return;
-        }
-        const parentColumnId = parent.attributes.getNamedItem("column-id").value;
-        const isSortable = target.parentNode.sortable || target.sortable;
-        if (parentColumnId !== this.columnId && isSortable) {
-            this.sortDirection = "none";
-        }
-    }
-    componentWillRender() {
-        this.host.setAttribute("role", "columnheader");
-    }
-    render() {
-        return (h(Host, { key: 'c67ac7a04f00b5252e3c988a46b80843dc911d2e', class: {
-                sortable: this.sortable,
-            }, onClick: () => this.handleSort() }, h("div", { key: 'f569e12c8d7ae2bc30884f11bf1b2636cf66e8d9', class: "container" }, h("slot", { key: 'c524c4ec78be5a6aded8bd4e92018fe16147561f' }), this.sortable && this.sortDirection !== "none" && (h("z-icon", { name: this.sortDirection === "asc" ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPosition.BOTTOM, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
-    }
-    get host() { return this; }
-    static get style() { return ZTableHeaderStyle0; }
-}, [1, "z-table-header", {
-        "columnId": [1, "column-id"],
-        "padding": [513],
-        "sortable": [4],
-        "showButton": [4, "show-button"],
-        "defaultSortDirection": [1, "default-sort-direction"],
-        "sortDirection": [1025, "sort-direction"]
-    }, [[18, "click", "handleOutsideClick"], [18, "click", "handleClickHeaders"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-table-header", "z-button", "z-icon", "z-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-table-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTableHeader);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZTableHeader as Z, defineCustomElement as d };
-
-//# sourceMappingURL=index29.js.map

package/dist/components/index29.js.map

@@ -1 +0,0 @@
-{"file":"index29.js","mappings":"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","names":[],"sources":["src/deprecated/z-table-deprecated/z-table-header/styles.css?tag=z-table-header&encapsulation=shadow","src/deprecated/z-table-deprecated/z-table-header/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: table-cell;\n  border-bottom: var(--border-size-medium) solid var(--gray200);\n  background-color: var(--gray50);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-sb);\n  text-align: start;\n}\n\n.container {\n  display: flex;\n  align-items: flex-end;\n}\n\n:host(.sortable) {\n  cursor: pointer;\n}\n\n:host([padding=\"x-small\"]) {\n  padding: calc(var(--space-unit) * 0.5);\n}\n\n:host([padding=\"small\"]) {\n  padding: calc(var(--space-unit));\n}\n\n:host([padding=\"medium\"]) {\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host([padding=\"large\"]) {\n  padding: calc(var(--space-unit) * 2.5);\n}\n\n:host([padding=\"special\"]) {\n  padding: 0;\n}\n\n/*\nSorting arrow\n*/\n.arrow {\n  padding-left: var(--space-unit);\n  opacity: 1;\n}\n\n/*\nContextual menu\n*/\n.popover-container {\n  position: absolute;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  display: none;\n}\n\n.popover-container z-popover {\n  --z-popover-theme--surface: var(--gray200);\n\n  position: relative;\n  z-index: 1;\n}\n\n.popover-container.visible {\n  display: block;\n}\n\n:host(:hover) .popover-container {\n  display: block;\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop} from \"@stencil/core\";\nimport {ButtonSize, ButtonVariant, PopoverPosition} from \"../../../beans\";\nimport {getElementTree} from \"../../../utils/utils\";\n\n/**\n * @deprecated\n */\n@Component({\n  tag: \"z-table-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTableHeader {\n  @Element() host: HTMLZTableHeaderElement;\n\n  /** Column ID */\n  @Prop()\n  columnId: string;\n\n  /** Set padding size of cell, if special 0px padding will be set */\n  @Prop({reflect: true})\n  padding: \"x-small\" | \"small\" | \"medium\" | \"large\" | \"special\" = \"medium\";\n\n  /** [Optional] Make the header sortable */\n  @Prop()\n  sortable?: boolean;\n\n  /** [Optional] Show contextual menu button */\n  @Prop()\n  showButton?: boolean;\n\n  /** [Optional] Default sort order */\n  @Prop()\n  defaultSortDirection?: \"asc\" | \"desc\" | \"none\" = \"asc\";\n\n  /** Sort direction */\n  @Prop({mutable: true})\n  sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\n\n  private popover?: HTMLZPopoverElement;\n\n  private triggerButton?: HTMLZButtonElement;\n\n  constructor() {\n    this.emitOnSort = this.emitOnSort.bind(this);\n  }\n\n  /** [Optional] callback for sorting */\n  @Event()\n  sort: EventEmitter;\n\n  private emitOnSort(): void {\n    this.sort.emit({\n      columnId: this.columnId,\n      sortDirection: this.sortDirection,\n    });\n  }\n\n  private handleSort(): void {\n    if (!this.sortable) {\n      return;\n    }\n\n    this.sortDirection = (() => {\n      switch (this.sortDirection) {\n        case \"asc\":\n          return \"desc\";\n        case \"desc\":\n          return \"asc\";\n        case \"none\":\n          return this.defaultSortDirection;\n        default:\n          return \"none\";\n      }\n    })();\n\n    this.emitOnSort();\n  }\n\n  private handleMenuClick(): void {\n    this.popover.open = !this.popover.open;\n  }\n\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    const tree = getElementTree(e.target as Element);\n    const parent = tree.find((elem: Element) => elem.nodeName.toLowerCase() === \"z-popover\");\n\n    if (!parent && this.popover) {\n      this.popover.open = false;\n    }\n  }\n\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleClickHeaders(e: MouseEvent): void {\n    const target = e.target as HTMLElement;\n    const parent = getElementTree(target).find((elem: Element) => elem.nodeName.toLowerCase() === \"z-table-header\");\n\n    if (!this.sortable || !parent) {\n      return;\n    }\n\n    const parentColumnId = parent.attributes.getNamedItem(\"column-id\").value;\n    const isSortable =\n      (target.parentNode as HTMLZTableHeaderElement).sortable || (target as HTMLZTableHeaderElement).sortable;\n\n    if (parentColumnId !== this.columnId && isSortable) {\n      this.sortDirection = \"none\";\n    }\n  }\n\n  componentWillRender(): void {\n    this.host.setAttribute(\"role\", \"columnheader\");\n  }\n\n  render(): HTMLZTableHeaderElement {\n    return (\n      <Host\n        class={{\n          sortable: this.sortable,\n        }}\n        onClick={() => this.handleSort()}\n      >\n        <div class=\"container\">\n          <slot />\n          {this.sortable && this.sortDirection !== \"none\" && (\n            <z-icon\n              name={this.sortDirection === \"asc\" ? \"arrow-up\" : \"arrow-down\"}\n              class=\"arrow\"\n            />\n          )}\n        </div>\n\n        {this.showButton && (\n          <div class=\"popover-container\">\n            <z-button\n              ref={(el) => (this.triggerButton = el as HTMLZButtonElement)}\n              class=\"contextual-popover-button\"\n              icon=\"contextual-menu\"\n              variant={ButtonVariant.TERTIARY}\n              size={ButtonSize.X_SMALL}\n              onClick={() => this.handleMenuClick()}\n            ></z-button>\n\n            <z-popover\n              ref={(el) => (this.popover = el as HTMLZPopoverElement)}\n              position={PopoverPosition.BOTTOM}\n              center={true}\n              bindTo={this.triggerButton as HTMLElement}\n            >\n              <div>\n                <slot name=\"contextual-menu\" />\n              </div>\n            </z-popover>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index30.js

@@ -1,46 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './index9.js';
-
-const stylesCss = ".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;--z-tag-text-color:var(--color-primary03);--z-tag-bg:var(--color-hover-primary);display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg);border-radius:var(--border-radius);color:var(--z-tag-text-color);fill:var(--z-tag-text-color);font-family:var(--font-family-sans);line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag:not(:last-child),.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag:not(:last-child){margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}";
-const ZTagStyle0 = stylesCss;
-
-const ZTag = /*@__PURE__*/ proxyCustomElement(class ZTag extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.icon = undefined;
-        this.expandable = undefined;
-    }
-    render() {
-        return (h(Host, { key: '9d45170a5cefce5d815ac7b5402123645a8d243b', class: {
-                "body-5-sb": true,
-                "expandable": this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { name: this.icon }), h("div", { key: '9cf3b9f7b169709cf109cdab4d0cfe346a9eb29c' }, h("slot", { key: 'c26454112b3fa7ce120eaf50844cb82c9e11e751' }))));
-    }
-    static get style() { return ZTagStyle0; }
-}, [6, "z-tag", {
-        "icon": [1],
-        "expandable": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-tag", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTag);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZTag as Z, defineCustomElement as d };
-
-//# sourceMappingURL=index30.js.map

package/dist/components/index30.js.map

@@ -1 +0,0 @@
-{"file":"index30.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,g8BAAg8B,CAAC;AACn9B,mBAAe,SAAS;;MCaX,IAAI;;;;;;;IASf,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,YAAY,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC7C,IAEA,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DACE,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","src/components/z-tag/index.tsx"],"sourcesContent":[":host {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-tag-text-color: var(--color-primary03);\n  --z-tag-bg: var(--color-hover-primary);\n\n  display: flex;\n  width: fit-content;\n  max-width: inherit;\n  height: fit-content;\n  max-height: inherit;\n  padding: calc(var(--space-unit) / 2);\n  background-color: var(--z-tag-bg);\n  border-radius: var(--border-radius);\n  color: var(--z-tag-text-color);\n  fill: var(--z-tag-text-color);\n  font-family: var(--font-family-sans);\n  line-height: 14px;\n  text-transform: uppercase;\n}\n\n:host > z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host(.expandable) > z-icon {\n  margin-right: 0;\n  transition: margin-right 0.3s ease-out;\n}\n\n:host(:not(.expandable)) > z-icon:not(:last-child),\n:host(.expandable:hover) > z-icon:not(:last-child) {\n  margin-right: var(--space-unit);\n  transition: margin-right 0.3s ease-out 0s;\n}\n\n:host(.expandable) > div {\n  overflow: hidden;\n  max-width: 0;\n  max-height: 0;\n}\n\n:host(.expandable:hover) > div {\n  max-width: 100%;\n  max-height: 100%;\n}\n","import {Component, Prop, h, Host} from \"@stencil/core\";\n\n/**\n * Ztag  component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\n@Component({\n  tag: \"z-tag\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTag {\n  /** [optional] Tag icon */\n  @Prop()\n  icon?: string;\n\n  /** [optional] Hide the text and show it on hover*/\n  @Prop()\n  expandable?: boolean;\n\n  render(): HTMLZTagElement {\n    return (\n      <Host\n        class={{\n          \"body-5-sb\": true,\n          \"expandable\": this.expandable && !!this.icon,\n        }}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <div>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-contextual-menu.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZContextualMenu extends Components.ZContextualMenu, HTMLElement {}
-export const ZContextualMenu: {
-    prototype: ZContextualMenu;
-    new (): ZContextualMenu;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-contextual-menu.js

@@ -1,98 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as PopoverPosition } from './index2.js';
-import { d as defineCustomElement$7 } from './index6.js';
-import { d as defineCustomElement$6 } from './index9.js';
-import { d as defineCustomElement$5 } from './index12.js';
-import { d as defineCustomElement$4 } from './index13.js';
-import { d as defineCustomElement$3 } from './index14.js';
-import { d as defineCustomElement$2 } from './index25.js';
-
-const stylesCss = ":host{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg)}button{width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}z-popover{overflow:hidden}.popover-content-container{position:relative;min-width:112px;max-width:280px;background-color:var(--color-surface02);box-shadow:var(--shadow-2);white-space:nowrap}.element-container:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.element-text{overflow:hidden;font-size:14px;text-overflow:ellipsis}.element-container,.disabled-element-container{display:flex;min-height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);fill:var(--color-disabled03);gap:var(--space-unit)}.element-container{fill:var(--color-primary01)}.element-icon{display:flex}";
-const ZContextualMenuStyle0 = stylesCss;
-
-const ZContextualMenu$1 = /*@__PURE__*/ proxyCustomElement(class ZContextualMenu extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.clickContextualMenu = createEvent(this, "clickContextualMenu", 7);
-        this.elements = undefined;
-        this.color = "color-primary01";
-        this.popoverPosition = PopoverPosition.BOTTOM_RIGHT;
-    }
-    componentWillRender() {
-        if (this.elements) {
-            this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
-        }
-    }
-    componentDidLoad() {
-        this.popoverEl.bindTo = this.triggerButton;
-    }
-    showIcon() {
-        return !this.jsonElements.some((element) => !element.icon);
-    }
-    togglePopover() {
-        if (!this.popoverEl.open) {
-            this.popoverEl.open = true;
-        }
-    }
-    render() {
-        var _a, _b;
-        return (h(Host, { key: 'c16eb50a3fd4c78f414d64bf45b59961269a030a' }, h("button", { key: '2b5ef74579725d6b1dbc4e526cb2fa2516fb4a15', ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, h("z-icon", { key: 'e1818a8a1eb9c4b4cf3c364e0e31eb33b887590e', name: "contextual-menu", fill: this.color })), h("z-popover", { key: 'fbe8db8d27abee320aa5faf64d6964b64f416cd1', ref: (el) => (this.popoverEl = el), position: this.popoverPosition }, h("div", { key: 'c3fd6e9dc17712abe5ae95cd1048497b20767ec5', class: "popover-content-container" }, h("z-list", { key: 'dfa04ca3235257d404f861f85e56ea8c5a918a74' }, h("z-list-group", { key: '86e27e74ea9a7b09d2cf4f2a9cd761b7bb07823f', "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
-    }
-    static get style() { return ZContextualMenuStyle0; }
-}, [1, "z-contextual-menu", {
-        "elements": [1],
-        "color": [1],
-        "popoverPosition": [513, "popover-position"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-contextual-menu", "z-divider", "z-icon", "z-list", "z-list-element", "z-list-group", "z-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-contextual-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZContextualMenu$1);
-            }
-            break;
-        case "z-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-list-element":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-list-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZContextualMenu = ZContextualMenu$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZContextualMenu, defineCustomElement };
-
-//# sourceMappingURL=z-contextual-menu.js.map

package/dist/components/z-contextual-menu.js.map

@@ -1 +0,0 @@
-{"file":"z-contextual-menu.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,o4BAAo4B,CAAC;AACv5B,8BAAe,SAAS;;MCOXA,iBAAe;;;;;;;qBAWT,iBAAiB;+BAME,eAAe,CAAC,YAAY;;IAiBhE,mBAAmB;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;SACvE;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;KAC5C;IAEO,QAAQ;QACd,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC5D;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;YACxB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;SAC5B;KACF;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,+DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,gBAC/C,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,IAAG,yBAAyB,GAAG,uBAAuB,EACtF,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAEnC,+DACE,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,IAAI,CAAC,KAAK,GAChB,CACK,EACT,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,4DAAK,KAAK,EAAC,2BAA2B,IACpC,iEACE,qFAA2B,SAAS,IACjC,MAAA,IAAI,CAAC,YAAY,0CAAE,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MACrC,sBACE,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,EAC5B,KAAK,EAAC,mBAAmB,kBACZ,MAAM,sBACF,WAAW,EAC5B,KAAK,EAAE,OAAO,CAAC,QAAQ,GAAG,kBAAkB,GAAG,IAAI,CAAC,KAAK,EACzD,gBAAgB,QAChB,aAAa,EAAE,KAAK,EACpB,WAAW,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAEnE,WAAK,KAAK,EAAE,OAAO,CAAC,QAAQ,GAAG,4BAA4B,GAAG,mBAAmB,IAC9E,IAAI,CAAC,QAAQ,EAAE,KACd,WAAK,KAAK,EAAC,cAAc,IACvB,cACE,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACE,CACP,EACD,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAO,OAAO,CAAC,IAAI,CAAQ,CACvB,CACF,CACS,CAClB,CAAC,CACW,CACR,CACL,CACI,CACP,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZContextualMenu"],"sources":["src/components/z-contextual-menu/styles.css?tag=z-contextual-menu&encapsulation=shadow","src/components/z-contextual-menu/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nbutton {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n\nz-popover {\n  overflow: hidden;\n}\n\n.popover-content-container {\n  position: relative;\n  min-width: 112px;\n  max-width: 280px;\n  background-color: var(--color-surface02);\n  box-shadow: var(--shadow-2);\n  white-space: nowrap;\n}\n\n.element-container:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n.element-text {\n  overflow: hidden;\n  font-size: 14px;\n  text-overflow: ellipsis;\n}\n\n.element-container,\n.disabled-element-container {\n  display: flex;\n  min-height: calc(var(--space-unit) * 4);\n  box-sizing: border-box;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  fill: var(--color-disabled03);\n  gap: var(--space-unit);\n}\n\n.element-container {\n  fill: var(--color-primary01);\n}\n\n.element-icon {\n  display: flex;\n}\n","import {Component, Event, EventEmitter, Prop, h, Host} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-contextual-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZContextualMenu {\n  /**\n   * Elements of ZContextualMenu\n   */\n  @Prop()\n  elements?: string;\n\n  /**\n   * [optional] Sets text color of ZContextualMenu's content\n   */\n  @Prop()\n  color?: string = \"color-primary01\";\n\n  /**\n   * [optional] Sets the position of the popover\n   */\n  @Prop({reflect: true})\n  popoverPosition?: PopoverPosition = PopoverPosition.BOTTOM_RIGHT;\n\n  private triggerButton?: HTMLButtonElement;\n\n  private popoverEl?: HTMLZPopoverElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickContextualMenu\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickContextualMenu: EventEmitter;\n\n  private jsonElements;\n\n  componentWillRender(): void {\n    if (this.elements) {\n      this.jsonElements = JSON.parse(this.elements.replace(/&quot;/g, '\"'));\n    }\n  }\n\n  componentDidLoad(): void {\n    this.popoverEl.bindTo = this.triggerButton;\n  }\n\n  private showIcon(): boolean {\n    return !this.jsonElements.some((element) => !element.icon);\n  }\n\n  private togglePopover(): void {\n    if (!this.popoverEl.open) {\n      this.popoverEl.open = true;\n    }\n  }\n\n  render(): HTMLZContextualMenuElement {\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.triggerButton = el as HTMLButtonElement)}\n          aria-label={this.popoverEl?.open ? \"chiudi menu contestuale\" : \"apri menu contestuale\"}\n          onClick={() => this.togglePopover()}\n        >\n          <z-icon\n            name=\"contextual-menu\"\n            fill={this.color}\n          />\n        </button>\n        <z-popover\n          ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n          position={this.popoverPosition}\n        >\n          <div class=\"popover-content-container\">\n            <z-list>\n              <z-list-group divider-type=\"element\">\n                {this.jsonElements?.map((element, index) => (\n                  <z-list-element\n                    clickable={!element.disabled}\n                    class=\"my-z-list-element\"\n                    align-button=\"left\"\n                    expandable-style=\"accordion\"\n                    color={element.disabled ? `color-disabled03` : this.color}\n                    isContextualMenu\n                    listElementId={index}\n                    onClickItem={(event) => this.clickContextualMenu.emit(event.detail)}\n                  >\n                    <div class={element.disabled ? \"disabled-element-container\" : \"element-container\"}>\n                      {this.showIcon() && (\n                        <div class=\"element-icon\">\n                          <z-icon\n                            name={element.icon}\n                            width={16}\n                            height={16}\n                          />\n                        </div>\n                      )}\n                      <div class=\"element-text\">\n                        <span>{element.text}</span>\n                      </div>\n                    </div>\n                  </z-list-element>\n                ))}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-navigation-tab-link.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZNavigationTabLink extends Components.ZNavigationTabLink, HTMLElement {}
-export const ZNavigationTabLink: {
-    prototype: ZNavigationTabLink;
-    new (): ZNavigationTabLink;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-navigation-tab-link.js

@@ -1,105 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index2.js';
-import { I as ICONS } from './icons.js';
-import { d as defineCustomElement$2 } from './index9.js';
-
-const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--color-highlight)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"horizontal\"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation=\"horizontal\"] z-icon,z-navigation-tab-link[orientation=\"horizontal\"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*,z-navigation-tab-link[disabled]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]>*,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,z-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation=\"vertical\"]>*,z-navigation-tab-link[orientation=\"vertical\"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"vertical\"][selected]>*::after,z-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"vertical\"][selected]>*::after{top:0;right:0;width:var(--border-size-large);height:100%}";
-const ZNavigationTabLinkStyle0 = navigationTabCss;
-
-const ZNavigationTabLink$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTabLink extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.selectedEvent = createEvent(this, "selected", 7);
-        this.ariaControls = undefined;
-        this.tabId = undefined;
-        this.selected = false;
-        this.disabled = false;
-        this.orientation = NavigationTabsOrientation.HORIZONTAL;
-        this.size = NavigationTabsSize.BIG;
-        this.htmlTitle = undefined;
-        this.target = undefined;
-        this.href = undefined;
-        this.icon = undefined;
-        this.label = undefined;
-    }
-    /**
-     * Scroll into view to center the tab.
-     */
-    scrollToTab({ target: button }) {
-        const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
-            ? { block: "nearest", inline: "center" }
-            : { block: "center", inline: "nearest" });
-        button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
-    }
-    onClick() {
-        if (this.disabled) {
-            return;
-        }
-        this.selected = true;
-    }
-    onSelected() {
-        if (this.selected) {
-            this.selectedEvent.emit();
-        }
-    }
-    /**
-     * Render the icon component using the icon's name passed from prop.
-     * Use the `filled` version when the tab is `selected`.
-     * @returns {HTMLElement}
-     */
-    renderIcon() {
-        let icon = this.icon;
-        const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
-        if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
-            icon = iconFilled;
-        }
-        return h("z-icon", { name: icon });
-    }
-    render() {
-        return (h(Host, { key: '77c729dd9c1bfd412d958eb477f2e227ba7fc7a7', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("a", { key: '3b70074a8637c2df922e6c5dcfc38f45c14ae770', tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), href: this.disabled ? null : this.href, title: this.htmlTitle, target: this.target }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label)));
-    }
-    static get watchers() { return {
-        "selected": ["onSelected"]
-    }; }
-    static get style() { return ZNavigationTabLinkStyle0; }
-}, [0, "z-navigation-tab-link", {
-        "ariaControls": [1, "aria-controls"],
-        "tabId": [1, "tab-id"],
-        "selected": [1540],
-        "disabled": [516],
-        "orientation": [513],
-        "size": [513],
-        "htmlTitle": [1, "html-title"],
-        "target": [1],
-        "href": [1],
-        "icon": [1],
-        "label": [1]
-    }, [[0, "click", "onClick"]], {
-        "selected": ["onSelected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-navigation-tab-link", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-navigation-tab-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZNavigationTabLink$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZNavigationTabLink = ZNavigationTabLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZNavigationTabLink, defineCustomElement };
-
-//# sourceMappingURL=z-navigation-tab-link.js.map

package/dist/components/z-navigation-tab-link.js.map

@@ -1 +0,0 @@
-{"file":"z-navigation-tab-link.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,iCAAe,gBAAgB;;MCalBA,oBAAkB;;;;;;;wBAuBR,KAAK;wBAML,KAAK;2BAMZ,yBAAyB,CAAC,UAAU;oBAM3C,kBAAkB,CAAC,GAAG;;;;;;;;;;IA0CrB,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;IAGD,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;KACF;;;;;;IAOO,UAAU;QAChB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YAC5D,IAAI,GAAG,UAAU,CAAC;SACnB;QAED,OAAO,cAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;KACtC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,YAAY,IAEhC,0DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,CAC9C,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNavigationTabLink"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab-link","src/deprecated/z-navigation-tab-link/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n * @deprecated Use a native `<a>` instead.\n */\n@Component({\n  tag: \"z-navigation-tab-link\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTabLink {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size = NavigationTabsSize.BIG;\n\n  /**\n   * Html title attribute for the anchor element.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * Html `target` attribute for the anchor element.\n   */\n  @Prop()\n  target: string;\n\n  /**\n   * Url to set to the anchor element.\n   */\n  @Prop()\n  href: string;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = true;\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabLinkElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <a\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          href={this.disabled ? null : this.href}\n          title={this.htmlTitle}\n          target={this.target}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === \"horizontal\" && this.label}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-navigation-tab.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZNavigationTab extends Components.ZNavigationTab, HTMLElement {}
-export const ZNavigationTab: {
-    prototype: ZNavigationTab;
-    new (): ZNavigationTab;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;