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

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

@@ -1 +1,272 @@
-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}
+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

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

@@ -0,0 +1 @@
+{"file":"z-navigation-tabs.js","mappings":"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","names":["ZNavigationTabs"],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  --z-navigation-tabs-nav-buttons-bg: ;\n  --z-navigation-tabs-nav-buttons-fg: ;\n\n  position: relative;\n  z-index: 0;\n  display: flex;\n  overflow: hidden;\n  flex-direction: row;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n  box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n  display: none;\n}\n\nz-navigation-tabs .navigation-button {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n  border-radius: var(--border-no-radius);\n  box-shadow: 0 0 4px 1px var(--shadow-color-base);\n  cursor: pointer;\n  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n  outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n  display: none;\n}\n\nz-navigation-tabs > nav {\n  z-index: 0;\n  display: flex;\n  overflow: auto;\n  align-items: center;\n  justify-content: flex-start;\n  scroll-behavior: smooth;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n  width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n  top: 0;\n  width: calc(var(--space-unit) * 4);\n  height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n  left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n  right: 0;\n}\n\n/* Orientation vertical */\nz-navigation-tabs[orientation=\"vertical\"] {\n  width: fit-content;\n  flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n  left: 0;\n  width: 100%;\n  height: calc(var(--space-unit) * 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n  top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n  bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n  height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs */\n\nz-navigation-tabs > nav > * {\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  gap: var(--space-unit);\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n  text-decoration: none;\n}\n\nz-navigation-tabs > nav > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 2px 2px var(--shadow-color-base);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-background);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-primary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-primary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * 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\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel = \"\";\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const container = tabElement.parentElement;\n\n    if (!container) {\n      return;\n    }\n\n    setTimeout(() => {\n      const isHorizontal = this.orientation === NavigationTabsOrientation.HORIZONTAL;\n\n      const containerRect = container.getBoundingClientRect();\n      const tabRect = tabElement.getBoundingClientRect();\n\n      const offset = isHorizontal ? tabRect.left - containerRect.left : tabRect.top - containerRect.top;\n      const containerSize = isHorizontal ? container.clientWidth : container.clientHeight;\n      const tabSize = isHorizontal ? tabElement.clientWidth : tabElement.clientHeight;\n      const scrollAmount = offset - containerSize / 2 + tabSize / 2;\n\n      container.scrollTo({\n        [isHorizontal ? \"left\" : \"top\"]: container[isHorizontal ? \"scrollLeft\" : \"scrollTop\"] + scrollAmount,\n        behavior: \"smooth\",\n      });\n    }, 100);\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        if (zicon) {\n          zicon.name = strokeIcon;\n        }\n\n        return;\n      }\n\n      if (zicon) {\n        zicon.name = `${strokeIcon}-filled`;\n      }\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * 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.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * 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`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-notification.js

@@ -1 +1,70 @@
-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}
+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;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2);margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}: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([borderposition=\"bottom\"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition=\"top\"]){border-top:var(--border-size-medium) solid var(--color-surface03)}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{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.borderposition = "bottom";
+        this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
+        this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '7a717d8687d3e8e6de06c25192f9e2f14b6563c1' }, h("div", { key: 'eee4aa9a69678e7f353ead6ef4e805544e55426e', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '8d582f822e1e4ad440c65002d9a4abb5e0294040', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '2779b5f3d772ee729c67b1616523ccac1b4646f0', class: "content-container" }, h("div", { key: '1e622f63cc7d8523ab52561360a9de5e8829e976', class: "content-text" }, h("slot", { key: 'f0c65317530288e6ddeb9b604d21243858f25220' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '33377e8438a076a2c3eee32ab9f513885e15fbcf', 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],
+        "borderposition": [513]
+    }]);
+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

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

@@ -0,0 +1 @@
+{"file":"z-notification.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,4hEAA4hE,CAAC;AAC/iE,4BAAe,SAAS;;MCaXA,eAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxB,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNotification"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n  --z-notification--content-max-width: 100%;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.action-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-offcanvas.js

@@ -1 +1,8 @@
-import{Z as o,d as s}from"./index12.js";const r=o,t=s;export{r as ZOffcanvas,t as defineCustomElement}
+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

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

@@ -0,0 +1 @@
+{"file":"z-offcanvas.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-otp.js

@@ -1 +1,75 @@
-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}
+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: '78c6a2c425f8b8d222be16db33bb9d12307015d1', class: "otp-container" }, h("div", { key: '18e0d6a908aabdfe49ce4613c094fb12166b0914', 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: '1d3207b1411926edb77efbc8a57e179972b77a2e', 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

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

@@ -0,0 +1 @@
+{"file":"z-otp.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,syBAAsyB,CAAC;AACzzB,mBAAe,SAAS;;MCOXA,MAAI;;;;;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACzC;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,aACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB;gBAC1B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;iBAC3B;aACF,EACD,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;iBACrD;aACF,EACD,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;aACzC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE,EACN,wEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZOtp"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-default-error);\n  background-color: var(--color-inverse-error);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"version":3}