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

package/dist/components/z-app-header.js

@@ -1,367 +1 @@
-import { proxyCustomElement, HTMLElement, h, Fragment, createEvent, Host } from '@stencil/core/internal/client';
-import { g as KeyboardCode, B as ButtonVariant, e as ControlSize, O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
-import { B as Breakpoints } from './breakpoints.js';
-import { a as containsElement } from './utils.js';
-import { d as defineCustomElement$c } from './index5.js';
-import { d as defineCustomElement$b } from './index7.js';
-import { d as defineCustomElement$a } from './index10.js';
-import { d as defineCustomElement$9 } from './index12.js';
-import { d as defineCustomElement$8 } from './index13.js';
-import { d as defineCustomElement$7 } from './index14.js';
-import { d as defineCustomElement$6 } from './index15.js';
-import { d as defineCustomElement$5 } from './index16.js';
-import { d as defineCustomElement$4 } from './index23.js';
-import { d as defineCustomElement$3 } from './index25.js';
-import { d as defineCustomElement$2 } from './index26.js';
-
-const stylesCss = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:\"\";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot=\"menu-button\"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
-const ZAppHeaderStyle0 = stylesCss;
-
-const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
-const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends HTMLElement {
-    onStuck() {
-        const scrollParent = this.scrollParent;
-        if (!scrollParent) {
-            return;
-        }
-        this.sticking.emit(this._stuck);
-    }
-    setMenuFloatingMode() {
-        if (this.menuElements.length === 0) {
-            return;
-        }
-        this.menuElements.forEach((element) => {
-            element.open = false;
-            element.verticalContext = this.drawerOpen;
-        });
-    }
-    onStuckChange() {
-        var _a, _b;
-        if (!this.container) {
-            return;
-        }
-        if (this.stuck) {
-            (_a = this.stuckIntersecObserver) === null || _a === void 0 ? void 0 : _a.observe(this.container);
-        }
-        else {
-            this._stuck = false;
-            (_b = this.stuckIntersecObserver) === null || _b === void 0 ? void 0 : _b.unobserve(this.container);
-        }
-    }
-    get title() {
-        var _a;
-        return (_a = this.hostElement.querySelector('[slot="title"]')) === null || _a === void 0 ? void 0 : _a.textContent.trim();
-    }
-    get scrollParent() {
-        const parent = this.hostElement.offsetParent;
-        if (parent === document.body || parent === document.documentElement) {
-            return window;
-        }
-        return parent;
-    }
-    get canShowMenu() {
-        return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;
-    }
-    get focusableMenu() {
-        return this.menuElements.find((el) => el.htmlTabindex === 0);
-    }
-    openDrawer() {
-        this.drawerOpen = true;
-        this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));
-        setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */
-    }
-    closeDrawer() {
-        this.drawerOpen = false;
-        setTimeout(() => this.burgerButton.focus(), 100);
-    }
-    collectMenuElements() {
-        this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot="menu"]'));
-        this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));
-        this.menuLength = this.menuElements.length;
-        if (!this.enableOffcanvas) {
-            this.menuWidth =
-                this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +
-                    (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;
-        }
-        this.setMenuFloatingMode();
-    }
-    /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */
-    setupMenuResizeObserver() {
-        if (this.enableOffcanvas) {
-            return;
-        }
-        this.menuResizeObserver = new ResizeObserver((entries) => {
-            if (this.isMobile) {
-                this.enableOffcanvas = true;
-                return;
-            }
-            const containerWidth = entries[0].contentBoxSize[0].inlineSize;
-            if (this.menuWidth === 0) {
-                return;
-            }
-            if (this.menuWidth > containerWidth && !this.enableOffcanvas) {
-                this.enableOffcanvas = true;
-            }
-            else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {
-                this.enableOffcanvas = false;
-            }
-        });
-        this.menuResizeObserver.observe(this.container);
-    }
-    hasSlot(slotName) {
-        return this.hostElement.querySelector(`[slot="${slotName}"]`) !== null;
-    }
-    moveFocus(current, receiver) {
-        current.htmlTabindex = -1;
-        receiver.setFocus();
-    }
-    onOffcanvasKeydown(ev) {
-        var _a, _b;
-        if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {
-            return;
-        }
-        const closestMenu = ev.target.closest("z-menu");
-        if (closestMenu) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            // restore tabindex to the zmenu containing the focused element
-            closestMenu.htmlTabindex = 0;
-            this.closeDrawerButton.focus();
-        }
-        else if (ev.target === this.closeDrawerButton) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            if (ev.shiftKey) {
-                // give focus to the last open menu if any or the last menu otherwhise
-                ((_a = this.menuElements.filter((menu) => menu.open).pop()) !== null && _a !== void 0 ? _a : this.menuElements[this.menuLength - 1]).setFocus();
-            }
-            else {
-                // give focus to the first open menu if any or the first menu otherwhise
-                ((_b = this.menuElements.find((menu) => menu.open)) !== null && _b !== void 0 ? _b : this.menuElements[0]).setFocus();
-            }
-        }
-    }
-    /** Close each menu except the one receiving focus/click, if any */
-    manageMenus(ev) {
-        const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target));
-        if (targetMenu) {
-            this.menuElements.forEach((menu) => {
-                if (menu === targetMenu) {
-                    return;
-                }
-                menu.htmlTabindex = -1;
-                if (!this.drawerOpen) {
-                    menu.open = false;
-                }
-            });
-        }
-        else if (!this.drawerOpen) {
-            this.menuElements.forEach((menu) => {
-                menu.open = false;
-            });
-        }
-    }
-    handleKeydown(ev) {
-        var _a, _b;
-        if (ev.key === KeyboardCode.ESC && this.drawerOpen) {
-            this.closeDrawer();
-            return;
-        }
-        if (!this.menuElements.some((elem) => elem.contains(ev.target))) {
-            return;
-        }
-        const current = this.focusableMenu;
-        const currentIndex = this.menuElements.indexOf(current);
-        let receiver;
-        if ((ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||
-            (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)) {
-            receiver = (_a = this.menuElements[currentIndex + 1]) !== null && _a !== void 0 ? _a : this.menuElements[0];
-        }
-        else if ((ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||
-            (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)) {
-            receiver = (_b = this.menuElements[currentIndex - 1]) !== null && _b !== void 0 ? _b : this.menuElements[this.menuLength - 1];
-        }
-        if (!receiver) {
-            return;
-        }
-        if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {
-            if (receiver.open) {
-                current.htmlTabindex = -1;
-                receiver.focusLastItem();
-                return;
-            }
-        }
-        this.moveFocus(current, receiver);
-    }
-    renderSeachbar() {
-        if (this.isMobile && !this.searchPageUrl && this._stuck) {
-            return;
-        }
-        if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
-            return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
-        }
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
-    }
-    renderProductLogos() {
-        return (h(Fragment, null, this.enableZLogo && (h("span", { class: "z-logo" }, h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (h("span", { class: "product-logo" }, h("slot", { name: "product-logo" })))));
-    }
-    renderMenuButton() {
-        return (this.menuLength > 0 &&
-            (this.enableOffcanvas || this._stuck || this.isMobile) && (h("button", { ref: (el) => (this.burgerButton = el), class: "drawer-trigger", "aria-label": "Apri menu", "aria-haspopup": "menu", "aria-expanded": `${this.drawerOpen}`, "aria-controls": "offcanvas-menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))));
-    }
-    renderOffcanvas() {
-        return (h("z-offcanvas", { id: "offcanvas-menu", variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail), onKeyDown: this.onOffcanvasKeydown }, h("div", { slot: "canvasContent" }, h("button", { ref: (el) => (this.closeDrawerButton = el), class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))));
-    }
-    renderStuck() {
-        return (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), h("div", { class: "heading-title" }, this.renderProductLogos(), h("div", { class: "stucked-title" }, h("slot", { name: "stucked-title" }, this.title))), this.enableSearch && this.renderSeachbar())));
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.sticking = createEvent(this, "sticking", 7);
-        this.menuElements = [];
-        this.stuckIntersecObserver = SUPPORT_INTERSECTION_OBSERVER
-            ? new IntersectionObserver(([entry]) => {
-                this._stuck = !entry.isIntersecting;
-            }, { threshold: 0.5 })
-            : undefined;
-        this.stuck = false;
-        this.enableOffcanvas = false;
-        this.enableSearch = false;
-        this.searchPlaceholder = "Cerca";
-        this.searchString = "";
-        this.searchPageUrl = undefined;
-        this.enableZLogo = true;
-        this.drawerOpen = false;
-        this._stuck = false;
-        this.menuLength = undefined;
-        this.isMobile = true;
-        this.isTablet = false;
-        this.openDrawer = this.openDrawer.bind(this);
-        this.closeDrawer = this.closeDrawer.bind(this);
-        this.collectMenuElements = this.collectMenuElements.bind(this);
-        this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);
-    }
-    componentWillLoad() {
-        this.collectMenuElements();
-        // mobile and tablet media queries listeners
-        const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);
-        this.isMobile = mobileMediaQuery.matches;
-        mobileMediaQuery.addEventListener("change", (e) => (this.isMobile = e.matches));
-        const tabletMediaQuery = window.matchMedia(`(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`);
-        this.isTablet = tabletMediaQuery.matches;
-        tabletMediaQuery.addEventListener("change", (e) => (this.isTablet = e.matches));
-    }
-    componentDidLoad() {
-        this.onStuckChange();
-        this.setupMenuResizeObserver();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.menuResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'a823113610378e9d634bf1779f5be2f5dc0c39f1', "menu-length": this.menuLength }, h("div", { key: 'c93cc0d8ef6cfba9875b2a4be50f065a4c276329', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '5138c2f0828d182ca610696b341f7292a12dc29b', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '3ccea8b1134d18c47e7736683090a5cff1f5805c', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7f2e046036bb62644b4d20ebcea6879d146f7900', name: "top-subtitle" }))), h("div", { key: 'a6be051f516f7e23348c7e3781463048f49c4fb5', class: "heading-title" }, h("slot", { key: '561fab39ded745bfc44a3ed6b16df481771b71eb', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'd0339b71194c5b61da665a3ccf38f9188a6b11c9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '016d2598ab5e436713dc70a100100ecc7490729e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '8cef304ecced8d2f4f6ba454db5c7ef74fcaed87', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9bd29440ce257ab3b6f58567713823c2047d7b2c', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "_stuck": ["onStuck"],
-        "drawerOpen": ["setMenuFloatingMode"],
-        "stuck": ["onStuckChange"]
-    }; }
-    static get style() { return ZAppHeaderStyle0; }
-}, [1, "z-app-header", {
-        "stuck": [516],
-        "enableOffcanvas": [1540, "enable-offcanvas"],
-        "enableSearch": [516, "enable-search"],
-        "searchPlaceholder": [1, "search-placeholder"],
-        "searchString": [1025, "search-string"],
-        "searchPageUrl": [1, "search-page-url"],
-        "enableZLogo": [516, "enable-z-logo"],
-        "drawerOpen": [1028, "drawer-open"],
-        "_stuck": [32],
-        "menuLength": [32],
-        "isMobile": [32],
-        "isTablet": [32]
-    }, [[5, "focusin", "manageMenus"], [5, "click", "manageMenus"], [1, "keydown", "handleKeydown"]], {
-        "_stuck": ["onStuck"],
-        "drawerOpen": ["setMenuFloatingMode"],
-        "stuck": ["onStuckChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-app-header", "z-button", "z-divider", "z-icon", "z-input", "z-input-message", "z-list", "z-list-element", "z-list-group", "z-offcanvas", "z-searchbar", "z-tag"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-app-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZAppHeader$1);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "z-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "z-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "z-input-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "z-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "z-list-element":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-list-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-offcanvas":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-searchbar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-tag":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZAppHeader = ZAppHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZAppHeader, defineCustomElement };
-
-//# sourceMappingURL=z-app-header.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as i,Fragment as a,createEvent as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{g as r,e as l,B as c,u as h,O as d}from"./index2.js";import{B as u}from"./breakpoints.js";import{a as p}from"./utils.js";import{d as g}from"./index5.js";import{d as m}from"./index6.js";import{d as f}from"./index3.js";import{d as v}from"./index7.js";import{d as b}from"./index8.js";import{d as w}from"./index9.js";import{d as x}from"./index10.js";import{d as z}from"./index11.js";import{d as k}from"./index12.js";import{d as y}from"./index13.js";import{d as C}from"./index14.js";const M="undefined"!=typeof IntersectionObserver,E=t(class extends e{onStuck(){this.scrollParent&&this.sticking.emit(this._stuck)}setMenuFloatingMode(){0!==this.menuElements.length&&this.menuElements.forEach((t=>{t.open=!1,t.verticalContext=this.drawerOpen}))}onStuckChange(){var t,e;this.container&&(this.stuck?null===(t=this.stuckIntersecObserver)||void 0===t||t.observe(this.container):(this._stuck=!1,null===(e=this.stuckIntersecObserver)||void 0===e||e.unobserve(this.container)))}get title(){var t;return null===(t=this.hostElement.querySelector('[slot="title"]'))||void 0===t?void 0:t.textContent.trim()}get scrollParent(){const t=this.hostElement.offsetParent;return t===document.body||t===document.documentElement?window:t}get canShowMenu(){return!this.enableOffcanvas&&this.menuElements.length>0&&!this.isMobile&&!this.drawerOpen}get focusableMenu(){return this.menuElements.find((t=>0===t.htmlTabindex))}openDrawer(){this.drawerOpen=!0,this.menuElements.forEach(((t,e)=>t.htmlTabindex=0===e?0:-1)),setTimeout((()=>this.menuElements[0].setFocus()),400)}closeDrawer(){this.drawerOpen=!1,setTimeout((()=>this.burgerButton.focus()),100)}collectMenuElements(){this.menuElements=Array.from(this.hostElement.querySelectorAll('[slot="menu"]')),this.menuElements.forEach(((t,e)=>t.htmlTabindex=0===e?0:-1)),this.menuLength=this.menuElements.length,this.enableOffcanvas||(this.menuWidth=this.menuElements.reduce(((t,e)=>t+e.getBoundingClientRect().width),0)+32*(this.menuLength-1)),this.setMenuFloatingMode()}setupMenuResizeObserver(){this.enableOffcanvas||(this.menuResizeObserver=new ResizeObserver((t=>{if(this.isMobile)return void(this.enableOffcanvas=!0);const e=t[0].contentBoxSize[0].inlineSize;0!==this.menuWidth&&(this.menuWidth>e&&!this.enableOffcanvas?this.enableOffcanvas=!0:this.menuWidth<=e&&this.enableOffcanvas&&(this.enableOffcanvas=!1))})),this.menuResizeObserver.observe(this.container))}hasSlot(t){return null!==this.hostElement.querySelector(`[slot="${t}"]`)}moveFocus(t,e){t.htmlTabindex=-1,e.setFocus()}onOffcanvasKeydown(t){var e,i;if(t.key!==r.TAB||!this.drawerOpen)return;const a=t.target.closest("z-menu");a?(t.preventDefault(),t.stopPropagation(),a.htmlTabindex=0,this.closeDrawerButton.focus()):t.target===this.closeDrawerButton&&(t.preventDefault(),t.stopPropagation(),t.shiftKey?(null!==(e=this.menuElements.filter((t=>t.open)).pop())&&void 0!==e?e:this.menuElements[this.menuLength-1]).setFocus():(null!==(i=this.menuElements.find((t=>t.open)))&&void 0!==i?i:this.menuElements[0]).setFocus())}manageMenus(t){const e=this.menuElements.find((e=>p(e,t.target)));e?this.menuElements.forEach((t=>{t!==e&&(t.htmlTabindex=-1,this.drawerOpen||(t.open=!1))})):this.drawerOpen||this.menuElements.forEach((t=>{t.open=!1}))}handleKeydown(t){var e,i;if(t.key===r.ESC&&this.drawerOpen)return void this.closeDrawer();if(!this.menuElements.some((e=>e.contains(t.target))))return;const a=this.focusableMenu,s=this.menuElements.indexOf(a);let n;return t.key===r.ARROW_RIGHT&&!a.verticalContext||t.key===r.ARROW_DOWN&&a.verticalContext?n=null!==(e=this.menuElements[s+1])&&void 0!==e?e:this.menuElements[0]:(t.key===r.ARROW_LEFT&&!a.verticalContext||t.key===r.ARROW_UP&&a.verticalContext)&&(n=null!==(i=this.menuElements[s-1])&&void 0!==i?i:this.menuElements[this.menuLength-1]),n?t.key===r.ARROW_UP&&a.verticalContext&&n.open?(a.htmlTabindex=-1,void n.focusLastItem()):void this.moveFocus(a,n):void 0}renderSeachbar(){if(!this.isMobile||this.searchPageUrl||!this._stuck)return this.searchPageUrl&&(this.isMobile||this.isTablet)?i("z-button",{class:"search-page-button",variant:c.SECONDARY,href:this.searchPageUrl,icon:"search",size:l.X_SMALL}):i("z-searchbar",{value:this.searchString,placeholder:this.searchPlaceholder,showSearchButton:!0,searchButtonIconOnly:this.isMobile||this.isTablet,size:l.X_SMALL,variant:c.SECONDARY,preventSubmit:this.searchString.length<3,onSearchTyping:t=>this.searchString=t.detail})}renderProductLogos(){return i(a,null,this.enableZLogo&&i("span",{class:"z-logo"},i("img",{alt:"Logo Zanichelli"})),this.hostElement.querySelector("[slot='product-logo']")&&i("span",{class:"product-logo"},i("slot",{name:"product-logo"})))}renderMenuButton(){return this.menuLength>0&&(this.enableOffcanvas||this._stuck||this.isMobile)&&i("button",{ref:t=>this.burgerButton=t,class:"drawer-trigger","aria-label":"Apri menu","aria-haspopup":"menu","aria-expanded":""+this.drawerOpen,"aria-controls":"offcanvas-menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"}))}renderOffcanvas(){return i("z-offcanvas",{id:"offcanvas-menu",variant:d.OVERLAY,transitiondirection:h.RIGHT,open:this.drawerOpen,onCanvasOpenStatusChanged:t=>this.drawerOpen=t.detail,onKeyDown:this.onOffcanvasKeydown},i("div",{slot:"canvasContent"},i("button",{ref:t=>this.closeDrawerButton=t,class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer,"aria-hidden":""+!this.drawerOpen,disabled:!this.drawerOpen},i("z-icon",{name:"close"})),i("div",{class:"drawer-content","aria-hidden":""+!this.drawerOpen},i("slot",{name:"menu",onSlotchange:this.collectMenuElements}))))}renderStuck(){return i("div",{class:"heading-stuck"},i("div",{class:"heading-stuck-content"},this.renderMenuButton(),i("div",{class:"heading-title"},this.renderProductLogos(),i("div",{class:"stucked-title"},i("slot",{name:"stucked-title"},this.title))),this.enableSearch&&this.renderSeachbar()))}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.sticking=s(this,"sticking",7),this.stuck=!1,this.enableOffcanvas=!1,this.enableSearch=!1,this.searchPlaceholder="Cerca",this.searchString="",this.enableZLogo=!0,this.drawerOpen=!1,this._stuck=!1,this.isMobile=!0,this.isTablet=!1,this.menuElements=[],this.stuckIntersecObserver=M?new IntersectionObserver((([t])=>{this._stuck=!t.isIntersecting}),{threshold:.5}):void 0,this.openDrawer=this.openDrawer.bind(this),this.closeDrawer=this.closeDrawer.bind(this),this.collectMenuElements=this.collectMenuElements.bind(this),this.onOffcanvasKeydown=this.onOffcanvasKeydown.bind(this)}componentWillLoad(){this.collectMenuElements();const t=window.matchMedia(`(max-width: ${u.MOBILE}px)`);this.isMobile=t.matches,t.addEventListener("change",(t=>this.isMobile=t.matches));const e=window.matchMedia(`(min-width: ${u.MOBILE+1}px) and (max-width: ${u.TABLET}px)`);this.isTablet=e.matches,e.addEventListener("change",(t=>this.isTablet=t.matches))}componentDidLoad(){this.onStuckChange(),this.setupMenuResizeObserver()}disconnectedCallback(){var t;null===(t=this.menuResizeObserver)||void 0===t||t.disconnect()}render(){const t=this.hasSlot("top-subtitle");return i(n,{key:"dc030db81c271ed36850fb287d29ace79851d4a1","menu-length":this.menuLength},i("div",{key:"49d34b66c216a92c80eb9216fa52e48add4cee0a",class:{"heading-panel":!0,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:t=>this.container=t},i("div",{key:"29639ab6d0620491c69651139ddf8311e2177122",class:{"heading-container":!0,"has-top-subtitle":t}},(!this.enableSearch&&this.isMobile||!this.isMobile)&&i("div",{key:"bc685fb828a89777bec6dcc5bc754534f83361cd",class:{"top-subtitle":!0,"has-product-logo":t&&this.hasSlot("product-logo")}},i("slot",{key:"cb2b1468f4b34d11dbf444f2cde0c7cce86cbd1e",name:"top-subtitle"})),i("div",{key:"80036c45fcbd3d490b85f653efb35010b1639b6f",class:"heading-title"},i("slot",{key:"bc4a0397893534c0dac99e081ef0ba5d6db2ecd3",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("slot",{key:"a72c2c657ae430e0cc6b134e843fec1c983e7777",name:"title"}),this.enableSearch&&!this.isMobile&&this.renderSeachbar()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"b620b02b62b99b13e6b4c0c1be0997d3af448aeb",class:"menu-container","aria-label":this.title||void 0},this.canShowMenu&&i("div",{key:"6c1887c703734a0e1ab4b77b821dad2e9bc0c3df",role:"menubar","aria-label":this.title||void 0},i("slot",{key:"2daaf3501852cab84cf2b3a85a770553dc70a101",name:"menu",onSlotchange:this.collectMenuElements})))),this.renderOffcanvas(),this._stuck&&this.renderStuck())}get hostElement(){return this}static get watchers(){return{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}}static get style(){return':host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url(\'data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>\')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}'}},[257,"z-app-header",{stuck:[516],enableOffcanvas:[1540,"enable-offcanvas"],enableSearch:[516,"enable-search"],searchPlaceholder:[1,"search-placeholder"],searchString:[1025,"search-string"],searchPageUrl:[1,"search-page-url"],enableZLogo:[516,"enable-z-logo"],drawerOpen:[1028,"drawer-open"],_stuck:[32],menuLength:[32],isMobile:[32],isTablet:[32]},[[5,"focusin","manageMenus"],[5,"click","manageMenus"],[1,"keydown","handleKeydown"]],{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}]),S=E,j=function(){"undefined"!=typeof customElements&&["z-app-header","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-offcanvas","z-searchbar","z-tag"].forEach((t=>{switch(t){case"z-app-header":customElements.get(o(t))||customElements.define(o(t),E);break;case"z-button":customElements.get(o(t))||g();break;case"z-divider":customElements.get(o(t))||m();break;case"z-icon":customElements.get(o(t))||f();break;case"z-input":customElements.get(o(t))||v();break;case"z-input-message":customElements.get(o(t))||b();break;case"z-list":customElements.get(o(t))||w();break;case"z-list-element":customElements.get(o(t))||x();break;case"z-list-group":customElements.get(o(t))||z();break;case"z-offcanvas":customElements.get(o(t))||k();break;case"z-searchbar":customElements.get(o(t))||y();break;case"z-tag":customElements.get(o(t))||C()}}))};export{S as ZAppHeader,j as defineCustomElement}

package/dist/components/z-aria-alert.js

@@ -1,35 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { t as ZAriaAlertMode } from './index2.js';
-
-const ZAriaAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZAriaAlert extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.mode = ZAriaAlertMode.POLITE;
-    }
-    render() {
-        return (h(Host, { key: '507fd85bea3bc6cdfa0915afaf57866e29cc36e3', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b28a7129f907a00beb9e5aa186f2960d7d6c4d1d' })));
-    }
-}, [4, "z-aria-alert", {
-        "mode": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-aria-alert"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-aria-alert":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZAriaAlert$1);
-            }
-            break;
-    } });
-}
-
-const ZAriaAlert = ZAriaAlert$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZAriaAlert, defineCustomElement };
-
-//# sourceMappingURL=z-aria-alert.js.map
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as r,transformTag as i}from"@stencil/core/internal/client";import{t as s}from"./index2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.mode=s.POLITE}render(){return a(r,{key:"13857c631b48af312fa399d224dd299d24ad7026","aria-live":this.mode,"aria-atomic":"true","aria-relevant":"additions"},a("slot",{key:"b5f4501e8230e2d669eb24d431a39e58232eab20"}))}},[260,"z-aria-alert",{mode:[1]}]),o=n,d=function(){"undefined"!=typeof customElements&&["z-aria-alert"].forEach((e=>{"z-aria-alert"===e&&(customElements.get(i(e))||customElements.define(i(e),n))}))};export{o as ZAriaAlert,d as defineCustomElement}

package/dist/components/z-avatar.js

@@ -1,66 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { A as AvatarSize } from './index2.js';
-
-const stylesCss = ":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
-const ZAvatarStyle0 = stylesCss;
-
-const ZAvatar$1 = /*@__PURE__*/ proxyCustomElement(class ZAvatar extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        var _a, _b;
-        this.size = AvatarSize.MEDIUM;
-        this.text = undefined;
-        this.textColor = "color-white";
-        this.backgroundColor = "gray700";
-        this.image = undefined;
-        if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
-            console.warn("z-avatar must contain at least one prop between text and image");
-        }
-    }
-    getTextSize() {
-        if (this.size === AvatarSize.SMALL) {
-            return "5";
-        }
-        else if (this.size === AvatarSize.MEDIUM) {
-            return "4";
-        }
-        else if (this.size === AvatarSize.LARGE) {
-            return "2";
-        }
-    }
-    render() {
-        return (h(Host, { key: '8ce8c6ffe56b55036f9f47146041fcb91051ad36', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
-                color: `var(--${this.textColor})`,
-                backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: 'b989378860518c05074dcf3cf445df062679f3c1' }, this.text.substring(0, 2)), this.image && (h("img", { key: '56a3a248fe3f88b2ed285f6a7c133b542ca21940', src: this.image, onError: () => (this.image = "") }))));
-    }
-    static get style() { return ZAvatarStyle0; }
-}, [1, "z-avatar", {
-        "size": [1],
-        "text": [1],
-        "textColor": [1, "text-color"],
-        "backgroundColor": [1, "background-color"],
-        "image": [1025]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-avatar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-avatar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZAvatar$1);
-            }
-            break;
-    } });
-}
-
-const ZAvatar = ZAvatar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZAvatar, defineCustomElement };
-
-//# sourceMappingURL=z-avatar.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as a,transformTag as i}from"@stencil/core/internal/client";import{A as o}from"./index2.js";const r=t(class extends e{constructor(t){var e,s;super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.size=o.MEDIUM,this.textColor="color-white",this.backgroundColor="gray700",0===(null===(e=this.text)||void 0===e?void 0:e.length)&&0===(null===(s=this.image)||void 0===s?void 0:s.length)&&console.warn("z-avatar must contain at least one prop between text and image")}getTextSize(){return this.size===o.SMALL?"5":this.size===o.MEDIUM?"4":this.size===o.LARGE?"2":void 0}render(){return s(a,{key:"0193c1b81b0b8770c8bd1f807d128a110e6bdce9",class:{[this.size]:!0,[`body-${this.getTextSize()}-sb`]:!0},style:{color:`var(--${this.textColor})`,backgroundColor:`var(--${this.backgroundColor})`}},this.text&&!this.image&&s("span",{key:"c14637da56b4861d00a40d3b976293b3d9580dab"},this.text.substring(0,2)),this.image&&s("img",{key:"bfda459b40de8ece37f6fb3457d9b90d2986b7f0",src:this.image,onError:()=>this.image=""}))}static get style(){return":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}"}},[1,"z-avatar",{size:[1],text:[1],textColor:[1,"text-color"],backgroundColor:[1,"background-color"],image:[1025]}]),c=r,n=function(){"undefined"!=typeof customElements&&["z-avatar"].forEach((t=>{"z-avatar"===t&&(customElements.get(i(t))||customElements.define(i(t),r))}))};export{c as ZAvatar,n as defineCustomElement}