@zanichelli/albe-web-components 13.1.0-rc3 → 13.1.1

package/dist/collection/components/z-contextual-menu/index.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-contextual-menu/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC1C,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yEAAyE;SAChF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uLAAuL;SAC9L,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZContextualMenu} from \"./index\";\n\ndescribe(\"Suite test ZContextualMenu\", () => {\n  it(\"Test render ZContextualMenu vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZContextualMenu],\n      html: `<z-contextual-menu popover-position=\"bottom_right\"></z-contextual-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-contextual-menu popover-position=\"bottom_right\">\n        <mock:shadow-root>\n          <button aria-label=\"apri menu contestuale\">\n            <z-icon fill=\"color-primary01\" name=\"contextual-menu\"></z-icon>\n          </button>\n          <z-popover position=\"bottom_right\">\n            <div class=\"popover-content-container\">\n              <z-list>\n                <z-list-group divider-type=\"element\"></z-list-group>\n              </z-list>\n            </div>\n          </z-popover>\n        </mock:shadow-root>\n      </z-contextual-menu>\n    `);\n  });\n\n  it(\"Test render ZContextualMenu elements prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZContextualMenu],\n      html: `<z-contextual-menu popover-position=\"bottom_right\" elements='[{\"icon\":\"share\",\"text\":\"Element 1\",\"key\": \"0\"},{\"icon\":\"delete\",\"text\":\"Elemento 2\",\"key\": \"1\"}]''></z-contextual-menu>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-contextual-menu '=\"\" elements='[{\"icon\":\"share\",\"text\":\"Element 1\",\"key\": \"0\"},{\"icon\":\"delete\",\"text\":\"Elemento 2\",\"key\": \"1\"}]' popover-position=\"bottom_right\">\n        <mock:shadow-root>\n            <button aria-label=\"apri menu contestuale\">\n              <z-icon fill=\"color-primary01\" name=\"contextual-menu\"></z-icon>\n            </button>\n            <z-popover position=\"bottom_right\">\n                 <div class=\"popover-content-container\">\n                   <z-list>\n                     <z-list-group divider-type=\"element\">\n                       <z-list-element align-button=\"left\" class=\"my-z-list-element\" clickable=\"\" color=\"color-primary01\" expandable-style=\"accordion\" iscontextualmenu=\"\" listelementid=\"0\">\n                         <div class=\"element-container\">\n                         <div class=\"element-icon\">\n                           <z-icon height=\"16\" name=\"share\" width=\"16\"></z-icon>\n                           </div>\n                           <div class=\"element-text\">\n                             <span>\n                               Element 1\n                             </span>\n                           </div>\n                         </div>\n                       </z-list-element>\n                       <z-list-element align-button=\"left\" class=\"my-z-list-element\" clickable=\"\" color=\"color-primary01\" expandable-style=\"accordion\" iscontextualmenu=\"\" listelementid=\"1\">\n                         <div class=\"element-container\">\n                         <div class=\"element-icon\">\n                           <z-icon  height=\"16\" name=\"delete\" width=\"16\"></z-icon>\n                           </div>\n                           <div class=\"element-text\">\n                             <span>\n                               Elemento 2\n                             </span>\n                           </div>\n                         </div>\n                       </z-list-element>\n                     </z-list-group>\n                   </z-list>\n                 </div>\n               </z-popover>\n        </mock:shadow-root>\n      </z-contextual-menu>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-contextual-menu/styles.css

@@ -1,60 +0,0 @@
-: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;
-}

package/dist/collection/components/z-contextual-menu/test.e2e.js

@@ -1,11 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("z-contextual-menu test end2end", () => {
-    it("Test that component exists", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<z-contextual-menu></z-contextual-menu>`);
-        const el = await page.find("z-contextual-menu");
-        expect(el).not.toBeNull();
-        expect(el.shadowRoot).not.toBeNull;
-    });
-});
-//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/z-contextual-menu/test.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../src/components/z-contextual-menu/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IAC9C,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;QACjE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC1B,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndescribe(\"z-contextual-menu test end2end\", () => {\n  it(\"Test that component exists\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<z-contextual-menu></z-contextual-menu>`);\n    const el = await page.find(\"z-contextual-menu\");\n    expect(el).not.toBeNull();\n    expect(el.shadowRoot).not.toBeNull;\n  });\n});\n"]}

package/dist/collection/deprecated/navigation-tab.css

@@ -1,138 +0,0 @@
-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;
-}
-
-/* Size small (only available for horizontal) */
-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;
-}
-
-/* Orientation Vertical */
-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%;
-}

package/dist/collection/deprecated/z-navigation-tab/index.js

@@ -1,286 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
-import { ICONS } from "../../components/icons/icons";
-/**
- * Single tab component to use inside `z-navigation-tabs`. It renders a button.
- * This component uses the `tab` role:
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
- */
-export class ZNavigationTab {
-    constructor() {
-        this.ariaControls = undefined;
-        this.tabId = undefined;
-        this.selected = false;
-        this.disabled = false;
-        this.orientation = NavigationTabsOrientation.HORIZONTAL;
-        this.size = NavigationTabsSize.BIG;
-        this.icon = undefined;
-        this.label = undefined;
-        this.htmlTitle = 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) {
-            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: '9f7613292bba051a6fbf38a9da4979d9ad46bce3', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("button", { key: '724d57e9b6d12f6f4cf30755ff17e5ae51bdc4a5', tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), disabled: this.disabled, title: this.htmlTitle }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label)));
-    }
-    static get is() { return "z-navigation-tab"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["../navigation-tab.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["../navigation-tab.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "ariaControls": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "link",
-                            "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls"
-                        }],
-                    "text": "`aria-controls` attribute of the tab.\nIdentifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\nThe value must be the `id` of the element it controls."
-                },
-                "attribute": "aria-controls",
-                "reflect": false
-            },
-            "tabId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "link",
-                            "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"
-                        }, {
-                            "name": "deprecated",
-                            "text": "Use native `id` attribute instead"
-                        }],
-                    "text": "`id` attribute of the tab.\nSet this id to the `aria-labelledby` attribute of the controlled `tabpanel` element."
-                },
-                "attribute": "tab-id",
-                "reflect": false
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the tab is selected."
-                },
-                "attribute": "selected",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the tab is disabled."
-                },
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "orientation": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "NavigationTabsOrientation",
-                    "resolved": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
-                    "references": {
-                        "NavigationTabsOrientation": {
-                            "location": "import",
-                            "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsOrientation"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this."
-                },
-                "attribute": "orientation",
-                "reflect": true,
-                "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "NavigationTabsSize",
-                    "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
-                    "references": {
-                        "NavigationTabsSize": {
-                            "location": "import",
-                            "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tab size. Do not set this manually: `z-navigation-tabs` will handle this."
-                },
-                "attribute": "size",
-                "reflect": true,
-                "defaultValue": "NavigationTabsSize.BIG"
-            },
-            "icon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use a native `<button>` instead."
-                        }],
-                    "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
-                },
-                "attribute": "icon",
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label to show in the tab."
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "htmlTitle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Html `title` attribute for the button."
-                },
-                "attribute": "html-title",
-                "reflect": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "selectedEvent",
-                "name": "selected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The tab has been selected."
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "selected",
-                "methodName": "onSelected"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "onClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=index.js.map

package/dist/collection/deprecated/z-navigation-tab/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/deprecated/z-navigation-tab/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAgB,KAAK,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAC,yBAAyB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC1E,OAAO,EAAC,KAAK,EAAC,MAAM,8BAA8B,CAAC;AAEnD;;;;GAIG;AAKH,MAAM,OAAO,cAAc;;;;wBAuBJ,KAAK;wBAML,KAAK;2BAMe,yBAAyB,CAAC,UAAU;oBAMlD,kBAAkB,CAAC,GAAG;;;;;IA4BjD;;OAEG;IACK,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,GAAG,CACpB,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU;YACvD,CAAC,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;YACtC,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;IACL,CAAC;IAGD,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,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,CAAC;YAC7D,IAAI,GAAG,UAAU,CAAC;QACpB,CAAC;QAED,OAAO,cAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;IACvC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,YAAY;YAEhC,+DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,SAAS;gBAEpB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;gBAC9B,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CACjE,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 a button.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n */\n@Component({\n  tag: \"z-navigation-tab\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTab {\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 = 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 = NavigationTabsSize.BIG;\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   * @deprecated Use a native `<button>` instead.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Html `title` attribute for the button.\n   */\n  @Prop()\n  htmlTitle: 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      this.selected = true;\n    }\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(): HTMLZNavigationTabElement {\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        <button\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          disabled={this.disabled}\n          title={this.htmlTitle}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}