@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

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

@@ -0,0 +1,260 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { N as NavigationTabsOrientation, F as NavigationTabsSize, G as NavigationTabsKeyboardEvents } from './p-Bla2iV_L.js';
+import { d as defineCustomElement$2 } from './p-DexdQ2O9.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(--blue800)}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 ZNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTabs extends H {
+    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 scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
+            ? { block: "nearest", inline: "center" }
+            : { block: "center", inline: "nearest" });
+        tabElement.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+    }
+    /**
+     * 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: 'a9ef822fd6963ee4726b2ca21e744bd4f05e1ad0', class: {
+                "interactive-2": this.size === NavigationTabsSize.SMALL,
+                "interactive-1": this.size !== NavigationTabsSize.SMALL,
+            }, scrollable: this.canNavigate }, h("button", { key: 'caa08658d0c5c4883999919094d45b228cd55869', 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: 'fedbe3077c767d0fd72b48c9bcab3fec8db43b39', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'b35b18ced0fe4dbd2533c68f8441a2d356175726', 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: '48d80980576b4cd06ad7450430529558aa7ba1eb' })), h("button", { key: 'b36285b9d650e1388082250ea03f82da939af58f', 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: '3f42c48291a15584299869c3064c165647ca7499', 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 stylesCss; }
+}, [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;
+    } });
+}
+defineCustomElement$1();
+
+const ZNavigationTabs = ZNavigationTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZNavigationTabs, defineCustomElement };
+//# sourceMappingURL=z-navigation-tabs.js.map
+
+//# 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","__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-navigation-tabs/index.js"],"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(--blue800);\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 { Host, h } from \"@stencil/core\";\nimport { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize } from \"../../beans\";\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 */\nexport class ZNavigationTabs {\n    constructor() {\n        /**\n         * Index of the last tab that held focus.\n         */\n        this.focusedTab = undefined;\n        this.ariaLabel = \"\";\n        this.orientation = NavigationTabsOrientation.HORIZONTAL;\n        this.size = NavigationTabsSize.BIG;\n        this.selectedTab = undefined;\n        this.canNavigate = undefined;\n        this.canNavigatePrev = undefined;\n        this.canNavigateNext = undefined;\n    }\n    /**\n     * Getter for the direction to check based on current orientation.\n     */\n    get direction() {\n        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n    }\n    /**\n     * Getter for the dimension to check based on current orientation.\n     */\n    get dimension() {\n        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n    }\n    get tabs() {\n        return Array.from(this.nav.children);\n    }\n    /**\n     * Scroll into view to center the tab.\n     */\n    scrollToTab(tabElement) {\n        const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL\n            ? { block: \"nearest\", inline: \"center\" }\n            : { block: \"center\", inline: \"nearest\" });\n        tabElement.scrollIntoView(Object.assign({ behavior: \"smooth\" }, scrollOptions));\n    }\n    /**\n     * Scroll the navigation bar half of its size backward.\n     */\n    navigateBackwards() {\n        this.nav.scrollBy({\n            [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n            behavior: \"smooth\",\n        });\n    }\n    /**\n     * Scroll the navigation bar half of its size forward.\n     */\n    navigateForward() {\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     * Check if a keyboard event was triggered by an arrow key.\n     */\n    isArrowNavigation(e) {\n        return Object.values(NavigationTabsKeyboardEvents).includes(e.key);\n    }\n    /**\n     * Check if the navigation buttons are needed.\n     */\n    checkScrollVisible() {\n        if (!this.nav) {\n            return;\n        }\n        this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n    }\n    /**\n     * Check if navigation buttons can be enabled for each direction.\n     */\n    checkScrollEnabled() {\n        if (!this.nav) {\n            return;\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     * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n     */\n    onTabSelected() {\n        this.tabs.forEach((tab, i) => {\n            const zicon = tab.querySelector(\"z-icon\");\n            const strokeIcon = zicon === null || zicon === void 0 ? void 0 : 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                return;\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     * Handle click on the tabs.\n     * @param event `click` event triggered by a child tab\n     */\n    handleTabClick(event) {\n        const clickedTab = event.target.closest(\"[role='tab']\");\n        if (!this.tabs.some((child) => child.contains(clickedTab))) {\n            return;\n        }\n        this.selectedTab = this.tabs.indexOf(clickedTab);\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    onTabFocusIn(event) {\n        const focused = this.tabs.findIndex((tab) => tab.contains(event.target));\n        if (focused === -1) {\n            return;\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     * Handle keyboard navigation through tabs with arrow keys.\n     */\n    navigateThroughTabs(event) {\n        if (!this.tabs.some((tab) => tab.contains(event.target)) || !this.isArrowNavigation(event)) {\n            return true;\n        }\n        event.preventDefault();\n        if ((event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n            (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {\n            // Move forward\n            this.focusedTab++;\n            if (this.focusedTab >= this.tabs.length) {\n                this.focusedTab = 0;\n            }\n        }\n        else if ((event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n            (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {\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 (this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n            this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\") {\n            return this.navigateThroughTabs(event);\n        }\n        this.tabs[this.focusedTab].focus();\n        this.scrollToTab(this.tabs[this.focusedTab]);\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    onTabFocusOut(event) {\n        var _a;\n        if (!this.tabs.some((tab) => tab.contains(event.relatedTarget))) {\n            this.tabs[(_a = this.selectedTab) !== null && _a !== void 0 ? _a : 0].tabIndex = 0;\n            this.focusedTab = undefined;\n        }\n    }\n    connectedCallback() {\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n    }\n    componentDidLoad() {\n        var _a;\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        const preselectedTab = (_a = this.selectedTab) !== null && _a !== void 0 ? _a : 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        }\n        else {\n            this.tabs[0].tabIndex = 0;\n        }\n        this.resizeObserver.observe(this.nav);\n    }\n    disconnectedCallback() {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n    }\n    render() {\n        return (h(Host, { key: 'a9ef822fd6963ee4726b2ca21e744bd4f05e1ad0', class: {\n                \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n                \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n            }, scrollable: this.canNavigate }, h(\"button\", { key: 'caa08658d0c5c4883999919094d45b228cd55869', 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: 'fedbe3077c767d0fd72b48c9bcab3fec8db43b39', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\", width: 16, height: 16 })), h(\"nav\", { key: 'b35b18ced0fe4dbd2533c68f8441a2d356175726', 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: '48d80980576b4cd06ad7450430529558aa7ba1eb' })), h(\"button\", { key: 'b36285b9d650e1388082250ea03f82da939af58f', 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: '3f42c48291a15584299869c3064c165647ca7499', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\", width: 16, height: 16 }))));\n    }\n    static get is() { return \"z-navigation-tabs\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"ariaLabel\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\"\n                },\n                \"attribute\": \"aria-label\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            },\n            \"orientation\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"NavigationTabsOrientation\",\n                    \"resolved\": \"NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL\",\n                    \"references\": {\n                        \"NavigationTabsOrientation\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::NavigationTabsOrientation\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Navigation tabs orientation.\"\n                },\n                \"attribute\": \"orientation\",\n                \"reflect\": true,\n                \"defaultValue\": \"NavigationTabsOrientation.HORIZONTAL\"\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"NavigationTabsSize\",\n                    \"resolved\": \"NavigationTabsSize.BIG | NavigationTabsSize.SMALL\",\n                    \"references\": {\n                        \"NavigationTabsSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::NavigationTabsSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Navigation tabs size.\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": true,\n                \"defaultValue\": \"NavigationTabsSize.BIG\"\n            },\n            \"selectedTab\": {\n                \"type\": \"number\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Index of the selected tab.\\nUseful to programmatically select a tab.\\nThe tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\"\n                },\n                \"attribute\": \"selected-tab\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"canNavigate\": {},\n            \"canNavigatePrev\": {},\n            \"canNavigateNext\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"selected\",\n                \"name\": \"selected\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the selected tab changes.\\nContains the index of the new selected tab in the `detail` of the event.\"\n                },\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"host\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"canNavigate\",\n                \"methodName\": \"checkScrollEnabled\"\n            }, {\n                \"propName\": \"selectedTab\",\n                \"methodName\": \"onTabSelected\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"click\",\n                \"method\": \"handleTabClick\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"focusin\",\n                \"method\": \"onTabFocusIn\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"keydown\",\n                \"method\": \"navigateThroughTabs\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"focusout\",\n                \"method\": \"onTabFocusOut\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/components/z-notification.js

@@ -0,0 +1,69 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { d as defineCustomElement$2 } from './p-DexdQ2O9.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 ZNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZNotification extends H {
+    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: '3681c9216f7ab0ce532c8b1ed013d7af611151de' }, this.contenticonname && (h("z-icon", { key: 'e7c538a5583873ed4ad95885f1199050b89f6732', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '93855c8906e6a65fa2d762fc447d14ee7a456b53', class: "content-container" }, h("div", { key: '526f760b7739c28154195e7a01ce66b185ccb068', class: "content-text" }, h("slot", { key: '56313ec91ad750e57af3035455aa89db3880ae4e' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'fc2de2fa3ff7cdf5e522f009efa41af06f8a6cca', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '3ba0d198a3617d1a05fb33eb8f3ceb9b0d685503', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '0bba4473674bee1c8c4abbc5792c9cab84c06088', name: "multiply-circle", width: 16, height: 16 })))));
+    }
+    static get style() { return stylesCss; }
+}, [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;
+    } });
+}
+defineCustomElement$1();
+
+const ZNotification = ZNotification$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZNotification, defineCustomElement };
+//# sourceMappingURL=z-notification.js.map
+
+//# sourceMappingURL=z-notification.js.map

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

@@ -0,0 +1 @@
+{"file":"z-notification.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i0DAAi0D;;MCMt0DA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AACtB,IAAA,uBAAuB,CAAC,CAAC,EAAA;QACrB,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE;;AAElC,IAAA,sBAAsB,CAAC,CAAC,EAAA;QACpB,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE;;AAEjC,IAAA,WAAA,GAAA;;;;;;AACI,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC3B,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACrB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QACnB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC;QACtE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;AACvE;IACD,MAAM,GAAA;AACF,QAAA,IAAI,EAAE;QACN,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,IAAI,CAAC,eAAe,KAAK,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNotification","__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-notification/index.js"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  outline: none;\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 > button,\n.content-container > button {\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  max-width: 800px;\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 { Host, h } from \"@stencil/core\";\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 */\nexport class ZNotification {\n    handleActionButtonClick(e) {\n        e.preventDefault();\n        this.notificationAction.emit();\n    }\n    handleCloseButtonClick(e) {\n        e.preventDefault();\n        this.notificationClose.emit();\n    }\n    constructor() {\n        this.contenticonname = undefined;\n        this.actiontext = undefined;\n        this.type = undefined;\n        this.showclose = false;\n        this.showshadow = false;\n        this.sticky = false;\n        this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n        this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n    }\n    render() {\n        var _a;\n        return (h(Host, { key: '3681c9216f7ab0ce532c8b1ed013d7af611151de' }, this.contenticonname && (h(\"z-icon\", { key: 'e7c538a5583873ed4ad95885f1199050b89f6732', class: \"status-icon\", name: this.contenticonname, width: 16, height: 16 })), h(\"div\", { key: '93855c8906e6a65fa2d762fc447d14ee7a456b53', class: \"content-container\" }, h(\"div\", { key: '526f760b7739c28154195e7a01ce66b185ccb068', class: \"content-text\" }, h(\"slot\", { key: '56313ec91ad750e57af3035455aa89db3880ae4e' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h(\"button\", { key: 'fc2de2fa3ff7cdf5e522f009efa41af06f8a6cca', class: \"action-button\", type: \"button\", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h(\"button\", { key: '3ba0d198a3617d1a05fb33eb8f3ceb9b0d685503', class: \"close-button\", type: \"button\", onClick: this.handleCloseButtonClick }, h(\"z-icon\", { key: '0bba4473674bee1c8c4abbc5792c9cab84c06088', name: \"multiply-circle\", width: 16, height: 16 })))));\n    }\n    static get is() { return \"z-notification\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"contenticonname\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Name of the icon on the left of the content\"\n                },\n                \"attribute\": \"contenticonname\",\n                \"reflect\": false\n            },\n            \"actiontext\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Action button text\"\n                },\n                \"attribute\": \"actiontext\",\n                \"reflect\": false\n            },\n            \"type\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"NotificationType\",\n                    \"resolved\": \"NotificationType.ERROR | NotificationType.SUCCESS | NotificationType.WARNING\",\n                    \"references\": {\n                        \"NotificationType\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::NotificationType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Alert variant type\"\n                },\n                \"attribute\": \"type\",\n                \"reflect\": true\n            },\n            \"showclose\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Enable close icon\"\n                },\n                \"attribute\": \"showclose\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"showshadow\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"deprecated\",\n                            \"text\": \"shadow is available only for the `sticky` version of the notification.\"\n                        }],\n                    \"text\": \"Enable shadow.\"\n                },\n                \"attribute\": \"showshadow\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"sticky\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Enable sticky notification bar.\"\n                },\n                \"attribute\": \"sticky\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"notificationAction\",\n                \"name\": \"notificationAction\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Call to action clicked\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"notificationClose\",\n                \"name\": \"notificationClose\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Close button clicked\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/components/z-offcanvas.js

@@ -0,0 +1,9 @@
+import { Z as ZOffcanvas$1, d as defineCustomElement$1 } from './p-k1oALiEe.js';
+
+const ZOffcanvas = ZOffcanvas$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZOffcanvas, defineCustomElement };
+//# sourceMappingURL=z-offcanvas.js.map
+
+//# 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

@@ -0,0 +1,76 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-Dxu5saXC.js';
+import { H as InputStatus } from './p-Bla2iV_L.js';
+import { d as defineCustomElement$3 } from './p-DexdQ2O9.js';
+import { d as defineCustomElement$2 } from './p-Dog_NtRb.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 ZOtp$1 = /*@__PURE__*/ proxyCustomElement(class ZOtp extends H {
+    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: '7cdafff5e25f865f60e24c543f6bb6a1f7cf99d1', class: "otp-container" }, h("div", { key: '5240bc35e4831a02c716d061ba17d40da8d4fa38', 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: '5f1a3db554221dd987e9550502af92d0bafdb7ff', message: this.message, status: this.status })));
+    }
+    static get style() { return stylesCss; }
+}, [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;
+    } });
+}
+defineCustomElement$1();
+
+const ZOtp = ZOtp$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZOtp, defineCustomElement };
+//# sourceMappingURL=z-otp.js.map
+
+//# 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;;MCE3yBA,MAAI,iBAAAC,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;AACb,IAAA,WAAA,GAAA;;;;;AACI,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;AACjB,QAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;AAC3B;AACD,IAAA,eAAe,CAAC,KAAK,EAAA;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;;IAElC,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;IAE3C,MAAM,GAAA;AACF,QAAA,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KAAI;AAClS,gBAAA,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAChB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;;AAEjC,aAAC,EAAE,OAAO,EAAE,CAAC,CAAC,KAAI;AACd,gBAAA,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;AAChB,oBAAA,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;AAE3D,aAAC,EAAE,OAAO,EAAE,CAAC,CAAC,KAAI;gBACd,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAC5B,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,aAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,iBAAiB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZOtp","__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/z-otp/index.js"],"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 { h } from \"@stencil/core\";\nimport { InputStatus } from \"../../../beans\";\nexport class ZOtp {\n    constructor() {\n        this.inputNum = 6;\n        this.status = undefined;\n        this.message = undefined;\n    }\n    emitInputChange(value) {\n        this.otpChange.emit({ value });\n    }\n    componentWillLoad() {\n        this.otp = [...Array(this.inputNum)];\n        this.otpRef = [...Array(this.inputNum)];\n    }\n    render() {\n        return (h(\"div\", { key: '7cdafff5e25f865f60e24c543f6bb6a1f7cf99d1', class: \"otp-container\" }, h(\"div\", { key: '5240bc35e4831a02c716d061ba17d40da8d4fa38', class: \"digits-container\" }, this.otp.map((_val, i) => (h(\"input\", { class: this.status == InputStatus.ERROR ? \"error\" : null, onKeyDown: (e) => {\n                if (e.keyCode > 47) {\n                    this.otpRef[i].value = \"\";\n                }\n            }, onKeyUp: (e) => {\n                if (e.keyCode > 47) {\n                    i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n            }, onInput: (e) => {\n                this.otp[i] = e.target.value;\n                this.emitInputChange(this.otp.join(\"\"));\n            }, type: \"text\", minlength: \"1\", maxlength: \"1\", autoComplete: \"off\", ref: (el) => (this.otpRef[i] = el) })))), h(\"z-input-message\", { key: '5f1a3db554221dd987e9550502af92d0bafdb7ff', message: this.message, status: this.status })));\n    }\n    static get is() { return \"z-otp\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"inputNum\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Input number\"\n                },\n                \"attribute\": \"input-num\",\n                \"reflect\": false,\n                \"defaultValue\": \"6\"\n            },\n            \"status\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"InputStatus\",\n                    \"resolved\": \"InputStatus.ERROR | InputStatus.SUCCESS | InputStatus.WARNING\",\n                    \"references\": {\n                        \"InputStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::InputStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Input status\"\n                },\n                \"attribute\": \"status\",\n                \"reflect\": false\n            },\n            \"message\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Input message\"\n                },\n                \"attribute\": \"message\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"otpChange\",\n                \"name\": \"otpChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Otp change event\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}