@zanichelli/albe-web-components 19.2.1 → 19.2.3-RC1

package/dist/components/z-navigation-tabs.js

@@ -1,272 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents } from './index2.js';
-import { d as defineCustomElement$2 } from './index10.js';
-
-const stylesCss = "z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation=\"horizontal\"]>nav{width:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation=\"vertical\"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation=\"vertical\"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation=\"vertical\"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{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;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected=\"true\"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-primary);content:\"\"}z-navigation-tabs[orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{height:var(--border-size-medium)}z-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation=\"vertical\"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation=\"vertical\"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation=\"vertical\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"vertical\"]>nav>[aria-selected=\"true\"]::after{top:0;right:0;width:var(--border-size-large);height:100%}";
-const ZNavigationTabsStyle0 = stylesCss;
-
-const ZNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTabs extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.selected = createEvent(this, "selected", 7);
-        /**
-         * Index of the last tab that held focus.
-         */
-        this.focusedTab = undefined;
-        this.ariaLabel = "";
-        this.orientation = NavigationTabsOrientation.HORIZONTAL;
-        this.size = NavigationTabsSize.BIG;
-        this.selectedTab = undefined;
-        this.canNavigate = undefined;
-        this.canNavigatePrev = undefined;
-        this.canNavigateNext = undefined;
-    }
-    /**
-     * Getter for the direction to check based on current orientation.
-     */
-    get direction() {
-        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
-    }
-    /**
-     * Getter for the dimension to check based on current orientation.
-     */
-    get dimension() {
-        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
-    }
-    get tabs() {
-        return Array.from(this.nav.children);
-    }
-    /**
-     * Scroll into view to center the tab.
-     */
-    scrollToTab(tabElement) {
-        const container = tabElement.parentElement;
-        if (!container) {
-            return;
-        }
-        setTimeout(() => {
-            const isHorizontal = this.orientation === NavigationTabsOrientation.HORIZONTAL;
-            const containerRect = container.getBoundingClientRect();
-            const tabRect = tabElement.getBoundingClientRect();
-            const offset = isHorizontal ? tabRect.left - containerRect.left : tabRect.top - containerRect.top;
-            const containerSize = isHorizontal ? container.clientWidth : container.clientHeight;
-            const tabSize = isHorizontal ? tabElement.clientWidth : tabElement.clientHeight;
-            const scrollAmount = offset - containerSize / 2 + tabSize / 2;
-            container.scrollTo({
-                [isHorizontal ? "left" : "top"]: container[isHorizontal ? "scrollLeft" : "scrollTop"] + scrollAmount,
-                behavior: "smooth",
-            });
-        }, 100);
-    }
-    /**
-     * Scroll the navigation bar half of its size backward.
-     */
-    navigateBackwards() {
-        this.nav.scrollBy({
-            [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,
-            behavior: "smooth",
-        });
-    }
-    /**
-     * Scroll the navigation bar half of its size forward.
-     */
-    navigateForward() {
-        this.nav.scrollBy({
-            [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,
-            behavior: "smooth",
-        });
-    }
-    /**
-     * Check if a keyboard event was triggered by an arrow key.
-     */
-    isArrowNavigation(e) {
-        return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
-    }
-    /**
-     * Check if the navigation buttons are needed.
-     */
-    checkScrollVisible() {
-        if (!this.nav) {
-            return;
-        }
-        this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];
-    }
-    /**
-     * Check if navigation buttons can be enabled for each direction.
-     */
-    checkScrollEnabled() {
-        if (!this.nav) {
-            return;
-        }
-        this.canNavigateNext =
-            this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];
-        this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;
-    }
-    /**
-     * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
-     */
-    onTabSelected() {
-        this.tabs.forEach((tab, i) => {
-            const zicon = tab.querySelector("z-icon");
-            const strokeIcon = zicon === null || zicon === void 0 ? void 0 : zicon.name.replace("-filled", "");
-            if (i !== this.selectedTab) {
-                tab.setAttribute("aria-selected", "false");
-                tab.tabIndex = -1;
-                if (zicon) {
-                    zicon.name = strokeIcon;
-                }
-                return;
-            }
-            if (zicon) {
-                zicon.name = `${strokeIcon}-filled`;
-            }
-            tab.setAttribute("aria-selected", "true");
-        });
-        this.selected.emit(this.selectedTab);
-        if (this.selectedTab !== undefined) {
-            this.scrollToTab(this.tabs[this.selectedTab]);
-        }
-    }
-    /**
-     * Handle click on the tabs.
-     * @param event `click` event triggered by a child tab
-     */
-    handleTabClick(event) {
-        const clickedTab = event.target.closest("[role='tab']");
-        if (!this.tabs.some((child) => child.contains(clickedTab))) {
-            return;
-        }
-        this.selectedTab = this.tabs.indexOf(clickedTab);
-    }
-    /**
-     * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.
-     */
-    onTabFocusIn(event) {
-        const focused = this.tabs.findIndex((tab) => tab.contains(event.target));
-        if (focused === -1) {
-            return;
-        }
-        if (this.selectedTab !== undefined) {
-            this.tabs[this.selectedTab].tabIndex = -1;
-        }
-        this.focusedTab = focused;
-        this.tabs[this.focusedTab].tabIndex = -1;
-        this.scrollToTab(this.tabs[this.focusedTab]);
-    }
-    /**
-     * Handle keyboard navigation through tabs with arrow keys.
-     */
-    navigateThroughTabs(event) {
-        if (!this.tabs.some((tab) => tab.contains(event.target)) || !this.isArrowNavigation(event)) {
-            return true;
-        }
-        event.preventDefault();
-        if ((event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
-            (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
-            // Move forward
-            this.focusedTab++;
-            if (this.focusedTab >= this.tabs.length) {
-                this.focusedTab = 0;
-            }
-        }
-        else if ((event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
-            (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
-            // Move backward
-            this.focusedTab--;
-            if (this.focusedTab < 0) {
-                this.focusedTab = this.tabs.length - 1;
-            }
-        }
-        // Ignore disabled tabs
-        if (this.tabs[this.focusedTab].hasAttribute("disabled") &&
-            this.tabs[this.focusedTab].getAttribute("disabled") !== "false") {
-            return this.navigateThroughTabs(event);
-        }
-        this.tabs[this.focusedTab].focus();
-        this.scrollToTab(this.tabs[this.focusedTab]);
-    }
-    /**
-     * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.
-     */
-    onTabFocusOut(event) {
-        var _a;
-        if (!this.tabs.some((tab) => tab.contains(event.relatedTarget))) {
-            this.tabs[(_a = this.selectedTab) !== null && _a !== void 0 ? _a : 0].tabIndex = 0;
-            this.focusedTab = undefined;
-        }
-    }
-    connectedCallback() {
-        this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());
-    }
-    componentDidLoad() {
-        var _a;
-        // Set role and tabindex to each slotted tab
-        this.tabs.forEach((tab) => {
-            tab.setAttribute("role", "tab");
-            tab.tabIndex = -1;
-        });
-        const preselectedTab = (_a = this.selectedTab) !== null && _a !== void 0 ? _a : this.tabs.findIndex((tab) => tab.ariaSelected === "true");
-        if (preselectedTab !== -1) {
-            this.selectedTab = preselectedTab;
-            this.tabs[preselectedTab].tabIndex = 0;
-            this.onTabSelected();
-        }
-        else {
-            this.tabs[0].tabIndex = 0;
-        }
-        this.resizeObserver.observe(this.nav);
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
-                "interactive-2": this.size === NavigationTabsSize.SMALL,
-                "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "canNavigate": ["checkScrollEnabled"],
-        "selectedTab": ["onTabSelected"]
-    }; }
-    static get style() { return ZNavigationTabsStyle0; }
-}, [4, "z-navigation-tabs", {
-        "ariaLabel": [1, "aria-label"],
-        "orientation": [513],
-        "size": [513],
-        "selectedTab": [1026, "selected-tab"],
-        "canNavigate": [32],
-        "canNavigatePrev": [32],
-        "canNavigateNext": [32]
-    }, [[0, "click", "handleTabClick"], [0, "focusin", "onTabFocusIn"], [0, "keydown", "navigateThroughTabs"], [0, "focusout", "onTabFocusOut"]], {
-        "canNavigate": ["checkScrollEnabled"],
-        "selectedTab": ["onTabSelected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-navigation-tabs", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-navigation-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZNavigationTabs$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZNavigationTabs = ZNavigationTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZNavigationTabs, defineCustomElement };
-
-//# sourceMappingURL=z-navigation-tabs.js.map
+import{proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as e,transformTag as o}from"@stencil/core/internal/client";import{N as s,a as r,b as l}from"./index2.js";import{d as c}from"./index3.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.selected=a(this,"selected",7),this.ariaLabel="",this.orientation=s.HORIZONTAL,this.size=r.BIG,this.selectedTab=void 0,this.focusedTab=void 0}get direction(){return this.orientation==s.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==s.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=t.parentElement;i&&setTimeout((()=>{const a=this.orientation===s.HORIZONTAL,n=i.getBoundingClientRect(),e=t.getBoundingClientRect(),o=(a?e.left-n.left:e.top-n.top)-(a?i.clientWidth:i.clientHeight)/2+(a?t.clientWidth:t.clientHeight)/2;i.scrollTo({[a?"left":"top"]:i[a?"scrollLeft":"scrollTop"]+o,behavior:"smooth"})}),100)}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav["client"+this.dimension]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav["scroll"+this.direction]+this.nav["client"+this.dimension]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(l).includes(t.key)}checkScrollVisible(){this.nav&&(this.canNavigate=this.nav["scroll"+this.dimension]>this.nav["client"+this.dimension])}checkScrollEnabled(){this.nav&&(this.canNavigateNext=this.nav["scroll"+this.direction]+this.nav["client"+this.dimension]<this.nav["scroll"+this.dimension],this.canNavigatePrev=this.nav["scroll"+this.direction]>0)}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon"),n=null==a?void 0:a.name.replace("-filled","");if(i!==this.selectedTab)return t.setAttribute("aria-selected","false"),t.tabIndex=-1,void(a&&(a.name=n));a&&(a.name=n+"-filled"),t.setAttribute("aria-selected","true")})),this.selected.emit(this.selectedTab),void 0!==this.selectedTab&&this.scrollToTab(this.tabs[this.selectedTab])}handleTabClick(t){const i=t.target.closest("[role='tab']");this.tabs.some((t=>t.contains(i)))&&(this.selectedTab=this.tabs.indexOf(i))}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));-1!==i&&(void 0!==this.selectedTab&&(this.tabs[this.selectedTab].tabIndex=-1),this.focusedTab=i,this.tabs[this.focusedTab].tabIndex=-1,this.scrollToTab(this.tabs[this.focusedTab]))}navigateThroughTabs(t){return!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)||(t.preventDefault(),t.key===l.RIGHT&&this.orientation==s.HORIZONTAL||t.key===l.DOWN&&this.orientation==s.VERTICAL?(this.focusedTab++,this.focusedTab>=this.tabs.length&&(this.focusedTab=0)):(t.key===l.LEFT&&this.orientation==s.HORIZONTAL||t.key===l.UP&&this.orientation==s.VERTICAL)&&(this.focusedTab--,this.focusedTab<0&&(this.focusedTab=this.tabs.length-1)),this.tabs[this.focusedTab].hasAttribute("disabled")&&"false"!==this.tabs[this.focusedTab].getAttribute("disabled")?this.navigateThroughTabs(t):(this.tabs[this.focusedTab].focus(),void this.scrollToTab(this.tabs[this.focusedTab])))}onTabFocusOut(t){var i;this.tabs.some((i=>i.contains(t.relatedTarget)))||(this.tabs[null!==(i=this.selectedTab)&&void 0!==i?i:0].tabIndex=0,this.focusedTab=void 0)}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab"),t.tabIndex=-1}));const i=null!==(t=this.selectedTab)&&void 0!==t?t:this.tabs.findIndex((t=>"true"===t.ariaSelected));-1!==i?(this.selectedTab=i,this.tabs[i].tabIndex=0,this.onTabSelected()):this.tabs[0].tabIndex=0,this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;null===(t=this.resizeObserver)||void 0===t||t.disconnect()}render(){return n(e,{key:"761584de624112312c9be881390dac16efd76e80",class:{"interactive-2":this.size===r.SMALL,"interactive-1":this.size!==r.SMALL},scrollable:this.canNavigate},n("button",{key:"450c0b481e8d776a079244036702521c772a385a",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},n("z-icon",{key:"354b37e5367bc03ba1d2551793c62c932b0eb5cb",name:this.orientation===s.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),n("nav",{key:"ca1996b8e92beecacb4ce6a9446efa7478f93d79",role:"tablist","aria-label":this.ariaLabel,ref:t=>this.nav=null!=t?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},n("slot",{key:"7f0f849a6d5e898c246efe58b4582e6c7320fb48"})),n("button",{key:"cb2beffc86bfbac8f196cc783648a48020021270",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},n("z-icon",{key:"ccb768726c813cb0fd7e49c1a0c30c1bbb4961b9",name:this.orientation===s.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return this}static get watchers(){return{canNavigate:[{checkScrollEnabled:0}],selectedTab:[{onTabSelected:0}]}}static get style(){return'z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{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;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}'}},[260,"z-navigation-tabs",{ariaLabel:[1,"aria-label"],orientation:[513],size:[513],selectedTab:[1026,"selected-tab"],canNavigate:[32],canNavigatePrev:[32],canNavigateNext:[32]},[[0,"click","handleTabClick"],[0,"focusin","onTabFocusIn"],[0,"keydown","navigateThroughTabs"],[0,"focusout","onTabFocusOut"]],{canNavigate:[{checkScrollEnabled:0}],selectedTab:[{onTabSelected:0}]}]),v=h,b=function(){"undefined"!=typeof customElements&&["z-navigation-tabs","z-icon"].forEach((t=>{switch(t){case"z-navigation-tabs":customElements.get(o(t))||customElements.define(o(t),h);break;case"z-icon":customElements.get(o(t))||c()}}))};export{v as ZNavigationTabs,b as defineCustomElement}

package/dist/components/z-notification.js

@@ -1,68 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './index10.js';
-
-const stylesCss = ":host{--z-notification--top-offset:0;display:flex;width:100%;box-sizing:border-box;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-inverse-success)}:host([type=\"warning\"]){background:var(--color-inverse-warning)}:host([type=\"error\"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-default-success)}:host([type=\"warning\"]) .status-icon{fill:var(--color-default-warning)}:host([type=\"error\"]) .status-icon{fill:var(--color-default-error)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
-const ZNotificationStyle0 = stylesCss;
-
-const ZNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZNotification extends HTMLElement {
-    handleActionButtonClick(e) {
-        e.preventDefault();
-        this.notificationAction.emit();
-    }
-    handleCloseButtonClick(e) {
-        e.preventDefault();
-        this.notificationClose.emit();
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.notificationAction = createEvent(this, "notificationAction", 7);
-        this.notificationClose = createEvent(this, "notificationClose", 7);
-        this.contenticonname = undefined;
-        this.actiontext = undefined;
-        this.type = undefined;
-        this.showclose = false;
-        this.showshadow = false;
-        this.sticky = false;
-        this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
-        this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
-    }
-    render() {
-        var _a;
-        return (h(Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
-    }
-    static get style() { return ZNotificationStyle0; }
-}, [1, "z-notification", {
-        "contenticonname": [1],
-        "actiontext": [1],
-        "type": [513],
-        "showclose": [4],
-        "showshadow": [516],
-        "sticky": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-notification", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-notification":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZNotification$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZNotification = ZNotification$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZNotification, defineCustomElement };
-
-//# sourceMappingURL=z-notification.js.map
+import{proxyCustomElement as t,HTMLElement as o,createEvent as e,h as n,Host as i,transformTag as a}from"@stencil/core/internal/client";import{d as c}from"./index3.js";const s=t(class extends o{handleActionButtonClick(t){t.preventDefault(),this.notificationAction.emit()}handleCloseButtonClick(t){t.preventDefault(),this.notificationClose.emit()}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.notificationAction=e(this,"notificationAction",7),this.notificationClose=e(this,"notificationClose",7),this.showclose=!1,this.showshadow=!1,this.sticky=!1,this.handleActionButtonClick=this.handleActionButtonClick.bind(this),this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}render(){var t;return n(i,{key:"689bfc013519c2ca0aba16a520c377c6e4edccbc"},this.contenticonname&&n("z-icon",{key:"1c9296c9cac6cb65efe8467d458ba416fd837b37",class:"status-icon",name:this.contenticonname,width:16,height:16}),n("div",{key:"973a065c148873e1009ad072d6c7e3e66b6e674c",class:"content-container"},n("div",{key:"211e47b3cb03cbc180f6a2c2abdade49ad4319e2",class:"content-text"},n("slot",{key:"fb538aac60cb506ee8f30f7a9cf67b2954bfae09"})),!!(null===(t=this.actiontext)||void 0===t?void 0:t.trim())&&n("button",{key:"bbf6e7e24f276e7608cf894611790db8204eb469",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&n("button",{key:"2f65452871ef504088ae5db0d6fa4bf9a8db12cb",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},n("z-icon",{key:"67f6a236ac25106c9e24ea493759364e67a99045",name:"multiply-circle",width:16,height:16})))}static get style(){return':host{--z-notification--top-offset:0;display:flex;width:100%;box-sizing:border-box;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}'}},[257,"z-notification",{contenticonname:[1],actiontext:[1],type:[513],showclose:[4],showshadow:[516],sticky:[516]}]),r=s,l=function(){"undefined"!=typeof customElements&&["z-notification","z-icon"].forEach((t=>{switch(t){case"z-notification":customElements.get(a(t))||customElements.define(a(t),s);break;case"z-icon":customElements.get(a(t))||c()}}))};export{r as ZNotification,l as defineCustomElement}

package/dist/components/z-offcanvas.js

@@ -1,8 +1 @@
-import { Z as ZOffcanvas$1, d as defineCustomElement$1 } from './index23.js';
-
-const ZOffcanvas = ZOffcanvas$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZOffcanvas, defineCustomElement };
-
-//# sourceMappingURL=z-offcanvas.js.map
+import{Z as o,d as s}from"./index12.js";const r=o,t=s;export{r as ZOffcanvas,t as defineCustomElement}

package/dist/components/z-otp.js

@@ -1,75 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { f as InputStatus } from './index2.js';
-import { d as defineCustomElement$3 } from './index10.js';
-import { d as defineCustomElement$2 } from './index13.js';
-
-const stylesCss = "input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
-const ZOtpStyle0 = stylesCss;
-
-const ZOtp$1 = /*@__PURE__*/ proxyCustomElement(class ZOtp extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.otpChange = createEvent(this, "otpChange", 7);
-        this.inputNum = 6;
-        this.status = undefined;
-        this.message = undefined;
-    }
-    emitInputChange(value) {
-        this.otpChange.emit({ value });
-    }
-    componentWillLoad() {
-        this.otp = [...Array(this.inputNum)];
-        this.otpRef = [...Array(this.inputNum)];
-    }
-    render() {
-        return (h("div", { key: '9814a8c35149033a7ce7091ff7d9807cd400f50a', class: "otp-container" }, h("div", { key: 'f85cbf0862d6b50da4a015e8ca6651b56ba96b30', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
-                if (e.keyCode > 47) {
-                    this.otpRef[i].value = "";
-                }
-            }, onKeyUp: (e) => {
-                if (e.keyCode > 47) {
-                    i < this.inputNum - 1 && this.otpRef[i + 1].focus();
-                }
-            }, onInput: (e) => {
-                this.otp[i] = e.target.value;
-                this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '666ac57e8c41d6f6c205839f05337c5ec29bf9ba', message: this.message, status: this.status })));
-    }
-    static get style() { return ZOtpStyle0; }
-}, [1, "z-otp", {
-        "inputNum": [2, "input-num"],
-        "status": [1],
-        "message": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-otp", "z-icon", "z-input-message"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-otp":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZOtp$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-input-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZOtp = ZOtp$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZOtp, defineCustomElement };
-
-//# sourceMappingURL=z-otp.js.map
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,transformTag as n}from"@stencil/core/internal/client";import{f as o}from"./index2.js";import{d as r}from"./index3.js";import{d as a}from"./index8.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.otpChange=s(this,"otpChange",7),this.inputNum=6}emitInputChange(t){this.otpChange.emit({value:t})}componentWillLoad(){this.otp=[...Array(this.inputNum)],this.otpRef=[...Array(this.inputNum)]}render(){return i("div",{key:"b538dc35302cf5f20bc7cf4fbda5675f6cc04297",class:"otp-container"},i("div",{key:"3b385a5b0a9c7b19c217b1ba7c177058a757bcf9",class:"digits-container"},this.otp.map(((t,e)=>i("input",{class:this.status==o.ERROR?"error":null,onKeyDown:t=>{t.keyCode>47&&(this.otpRef[e].value="")},onKeyUp:t=>{t.keyCode>47&&e<this.inputNum-1&&this.otpRef[e+1].focus()},onInput:t=>{this.otp[e]=t.target.value,this.emitInputChange(this.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:t=>this.otpRef[e]=t})))),i("z-input-message",{key:"4ee747f877f8ed6db4b79400be46768bf17bc6ef",message:this.message,status:this.status}))}static get style(){return"input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}"}},[1,"z-otp",{inputNum:[2,"input-num"],status:[1],message:[1]}]),p=c,l=function(){"undefined"!=typeof customElements&&["z-otp","z-icon","z-input-message"].forEach((t=>{switch(t){case"z-otp":customElements.get(n(t))||customElements.define(n(t),c);break;case"z-icon":customElements.get(n(t))||r();break;case"z-input-message":customElements.get(n(t))||a()}}))};export{p as ZOtp,l as defineCustomElement}