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

package/dist/components/p-BnlxWpkO.js

@@ -0,0 +1,261 @@
+import { h, p as proxyCustomElement, H, c as createEvent } from './p-Dxu5saXC.js';
+import { d as defineCustomElement$2 } from './p-DexdQ2O9.js';
+import { d as defineCustomElement$1 } from './p-KDKAI9M0.js';
+
+const DEFAULT_GROUP_KEY = 'default';
+const DEFAULT_GROUP = {
+    id: DEFAULT_GROUP_KEY,
+    label: DEFAULT_GROUP_KEY,
+};
+/** Get the items grouped by their group. */
+const getGroupedItems = (items) => {
+    const groups = items.reduce((grouped, item) => {
+        const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));
+        if (!itemGroup) {
+            grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });
+        }
+        else {
+            itemGroup.items.push(item);
+        }
+        return grouped;
+    }, []);
+    // Sort to keep default group at the end
+    return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));
+};
+/**
+ * Floating menu component. It shows a list of items that can be grouped.
+ */
+const Menu = ({ controlledBy, items, current, onItemKeyDown }) => {
+    if (!items?.length) {
+        return null;
+    }
+    const groups = getGroupedItems(items);
+    return (h("div", { class: "menu", "aria-labelledby": controlledBy ?? undefined, role: "menu" }, groups.map(({ group, items }) => (h("div", { class: "group", role: "none" },
+        group.id !== DEFAULT_GROUP_KEY ? (h("div", { class: "group-name", id: group.id }, group.label)) : groups.length > 1 ? (
+        // empty div to keep the same height as the other groups
+        h("div", { class: "group-name" })) : null,
+        h("ul", { class: "menu-list", role: "group", "aria-labelledby": group.id !== DEFAULT_GROUP_KEY ? group.id : undefined }, items.map((item) => (h("li", { role: "none" }, item.href && (h("a", { class: { 'menu-item': true, 'active': current === item.id, 'highlight': item.highlight }, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": current === item.id ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event) }, item.label)))))))))));
+};
+
+/**
+ * Check if an element contains an event target by checking its composedPath.
+ * Useful when an event target may come from a component's shadow DOM.
+ */
+const containsTarget = (ancestor, event) => {
+    return event
+        .composedPath()
+        .filter((el) => el !== document && el !== window.window)
+        .some((el) => ancestor.contains(el));
+};
+/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */
+const moveFocus = (current, next) => {
+    current.tabIndex = -1;
+    next.tabIndex = 0;
+    next.focus();
+};
+
+const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;background-color:#fff;color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans);overflow-x:clip}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}nav{display:flex;width:100%;align-items:center;padding:8px var(--grid-margin) 8px 8px}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.burger-button{margin-left:auto}.mobile-menu{position:absolute;top:100%;left:0;display:flex;width:100%;flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.searchbar{display:flex;border:1px solid #000;border-radius:4px}.searchbar input{width:100%;height:100%;padding:8px;border:none;background-color:#fff;border-bottom-left-radius:3px;border-top-left-radius:3px;font-family:var(--font-family-sans);font-size:1rem}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{padding:4px 8px;border-left:1px solid #000;background:var(--zanit-accent-color);border-bottom-right-radius:3px;border-top-right-radius:3px;line-height:1}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}.items-container{min-height:256px}.mobile-menu>li .menubar-item{padding:8px 0;font-size:1rem;text-align:left}.mobile-menu>li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}";
+
+const menuCss = ".menu{position:absolute;top:100%;left:0;display:grid;width:100%;padding:16px var(--grid-margin);background-color:#fff;box-shadow:var(--shadow-1);column-gap:24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;color:var(--red500);grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{margin-bottom:16px;color:var(--red500);font-size:1rem;font-weight:var(--font-md);line-height:1.5}.menu .menu-list{display:flex;flex-direction:column;gap:4px}.menu .menu-list>li>.menu-item{border-bottom:2px solid transparent;font-size:1rem}.menu .menu-list>li>.menu-item.active,.menu .menu-list>li>.menu-item:hover{border-bottom-color:var(--red500)}.menu .group .menu-list .menu-item.highlight{font-size:1.5rem}@media (width < 768px){.menu{position:relative;display:flex !important;flex-direction:column;padding:0;box-shadow:none;row-gap:32px}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;font-size:0.875rem}.menu .group .menu-list .menu-item{font-size:0.875rem;font-weight:var(--font-md)}.menu .group .menu-list .menu-item.highlight{font-size:1rem}}";
+
+const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMenubar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.search = createEvent(this, "search", 7);
+    }
+    formElement;
+    get host() { return this; }
+    /** ID of the current active item. */
+    current = undefined;
+    /** Menubar items. */
+    items = [];
+    /** Initial search query. */
+    searchQuery = undefined;
+    parentItem = undefined;
+    menuItems = undefined;
+    /** Whether the items to render come from a menubar or a menu. */
+    menuType = undefined;
+    open;
+    /** Search query to apply. */
+    _searchQuery = undefined;
+    onItemsChange() {
+        this.setupData(this.items);
+    }
+    /**
+     * Find the current item and take its parent, `menuItems` or the `navbarItems`.
+     * @returns True if an item matches the `current` prop, false otherwise.
+     */
+    setupData(items, parent) {
+        for (const item of items) {
+            if (item.id === this.current) {
+                const type = item.menuItems?.length ? 'menu' : 'menubar';
+                this.parentItem = parent;
+                this.menuType = type;
+                this.menuItems = item.menuItems || item.navbarItems;
+                return true;
+            }
+            if (item.menuItems?.some(({ id }) => id === this.current)) {
+                this.parentItem = parent;
+                this.menuType = 'menu';
+                this.menuItems = item.menuItems;
+                return true;
+            }
+            if (item.navbarItems?.length) {
+                return this.setupData(item.navbarItems, item);
+            }
+        }
+        this.parentItem = parent;
+        return false;
+    }
+    get menuItemsElement() {
+        return Array.from(this.host.shadowRoot.querySelectorAll('[role="menuitem"]'));
+    }
+    /** Initialize tabindex on menuitems, setting -1 to all but the first one. */
+    initTabindex() {
+        this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));
+    }
+    toggleMenu() {
+        if (this.open) {
+            this.open = false;
+        }
+        else {
+            this.open = true;
+            setTimeout(() => {
+                this.initTabindex();
+                this.menuItemsElement[0].focus();
+            }, 200);
+        }
+    }
+    /** Handles keyboard navigation on mobile menu. */
+    handleItemKeydown(event) {
+        switch (event.key) {
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                const items = this.menuItemsElement;
+                const currentIndex = items.indexOf(event.target);
+                const prevItem = items[(currentIndex - 1 + items.length) % items.length];
+                moveFocus(items[currentIndex], prevItem);
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopPropagation();
+                const items = this.menuItemsElement;
+                const currentIndex = items.indexOf(event.target);
+                const nextItem = items[(currentIndex + 1) % items.length];
+                moveFocus(items[currentIndex], nextItem);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(event.target, this.menuItemsElement[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(event.target, this.menuItemsElement.pop());
+                break;
+            }
+        }
+    }
+    handleInputChange(event) {
+        this._searchQuery = event.target.value;
+    }
+    onSearchSubmit(event) {
+        event.preventDefault();
+        if (!this._searchQuery) {
+            return;
+        }
+        this.search.emit({ query: this._searchQuery });
+        this.formElement.submit();
+    }
+    /** Emitted on search form submission. */
+    search;
+    connectedCallback() {
+        this.setupData(this.items);
+    }
+    /** Close the menu when clicking outside. */
+    handleOutsideClick(event) {
+        if (containsTarget(this.host, event)) {
+            return;
+        }
+        this.open = false;
+    }
+    /** Close the menu when pressing Escape or Tab. */
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.open = false;
+                break;
+            case 'Tab':
+                if (containsTarget(this.host, event)) {
+                    break;
+                }
+                this.open = false;
+                break;
+        }
+    }
+    /** Close the menu when it loses focus. */
+    handleFocusout(event) {
+        const relatedTarget = event.relatedTarget;
+        if (this.host.contains(relatedTarget)) {
+            return;
+        }
+        this.open = false;
+    }
+    render() {
+        return (h("nav", { key: '3ee00a62748cdbe4b1ca1becb696008e271ab909', "aria-label": "Zanichelli.it" }, h("z-logo", { key: '2b8c1d70bfa60e60a3e8fe2d15962f8642caa76d', link: "/", height: "32", width: "126" }), h("button", { key: '872c2adc276bfd47554857095ccdca6320c49e43', class: "burger-button", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "mobile-menu", "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: () => this.toggleMenu() }, h("z-icon", { key: 'd846abf56ae037bfa92940c6a485350c457395ba', name: this.open ? 'multiply' : 'burger-menu', width: "24", height: "24" })), this.open && (h("ul", { key: '07b09b0797cd9708d27b309e4cdffcd004e1ab0a', class: "mobile-menu", role: "menubar" }, h("li", { key: '52e0d1d2f56c15d0b4f4e453e34236be2aca5a6d', role: "none" }, h("form", { key: '6515903b4bc1544e681c29f094161d53309a7d18', class: "searchbar", role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), ref: (el) => (this.formElement = el) }, h("input", { key: 'e0b81cacf186fca79cd51543488c9d24669e80b4', id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event) }), h("button", { key: '89fca5e96b570f2b1580acac9bd41f5090edb1f0', class: "searchbar-button", "aria-controls": "searchbar-input", "aria-label": "Cerca", type: "submit" }, h("z-icon", { key: '5acd1111c13dcb11b127d649e32aac631e0371d4', name: "search", width: "20", height: "20" })))), this.parentItem && (h("li", { key: 'aa7058f15be4e0c35971700ccac0771adcdcf6d7', role: "none" }, h("a", { key: '4dc6c2cb4695fda00580eead0505bcae31be8a63', class: "parent", href: this.parentItem.href, id: this.parentItem.id, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: '42b4bc953938556481e0f4374ef307a545163e7f', name: "arrow-left", width: "8", height: "8" }), h("span", { key: '937a9f5bc0790e2f657ac457c65bcc1ce6a2121e' }, this.items.some(({ id }) => this.current === id) ? 'Home' : this.parentItem.label)))), this.menuType === 'menu' ? (h(Menu, { items: this.menuItems, current: this.current, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length && (h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (h("li", { role: "none" }, h("a", { class: {
+                'menu-item': this.menuType === 'menu',
+                'menubar-item': this.menuType === 'menubar',
+            }, href: item.href, id: item.id, role: "menuitem", "aria-current": this.current === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("span", { "data-text": item.label }, item.label))))))))))));
+    }
+    static get watchers() { return {
+        "items": ["onItemsChange"]
+    }; }
+    static get style() { return mobileMenubarCss + menuCss; }
+}, [1, "zanit-mobile-menubar", {
+        "current": [1],
+        "items": [16],
+        "searchQuery": [1, "search-query"],
+        "parentItem": [32],
+        "menuItems": [32],
+        "menuType": [32],
+        "open": [32],
+        "_searchQuery": [32]
+    }, [[5, "pointerdown", "handleOutsideClick"], [1, "keydown", "handleKeydown"], [1, "focusout", "handleFocusout"]], {
+        "items": ["onItemsChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zanit-mobile-menubar", "z-icon", "z-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zanit-mobile-menubar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZanitMobileMenubar);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "z-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { Menu as M, ZanitMobileMenubar as Z, containsTarget as c, defineCustomElement as d, moveFocus as m };
+//# sourceMappingURL=p-BnlxWpkO.js.map
+
+//# sourceMappingURL=p-BnlxWpkO.js.map

package/dist/components/p-BnlxWpkO.js.map

@@ -0,0 +1 @@
+{"file":"p-BnlxWpkO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menubar/menu/menu.tsx","src/utils/utils.ts","src/components/menubar/mobile-menubar/mobile-menubar.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/mobile-menubar/mobile-menubar.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { MenuItem } from '../menubar';\n\n/**\n * Menu of items that can be grouped.\n * @member {string} controlledBy - The HTML id of the element that controls the menu.\n * @member {MenuItem[]} items - The items to show in the menu.\n * @member {string} current - The id of the current active item.\n * @member {function} onItemKeyDown - The function to call when a key is pressed from a menuitem.\n */\nexport interface MenuProps {\n  controlledBy?: string;\n  items?: MenuItem[];\n  current?: string;\n  onItemKeyDown?: (event: KeyboardEvent) => void;\n}\n\nconst DEFAULT_GROUP_KEY = 'default';\nconst DEFAULT_GROUP = {\n  id: DEFAULT_GROUP_KEY,\n  label: DEFAULT_GROUP_KEY,\n};\n\n/** Get the items grouped by their group. */\nconst getGroupedItems = (items: MenuItem[]) => {\n  const groups = items.reduce<{ group: MenuProps['items'][number]['group']; items: MenuItem[] }[]>((grouped, item) => {\n    const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));\n    if (!itemGroup) {\n      grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });\n    } else {\n      itemGroup.items.push(item);\n    }\n\n    return grouped;\n  }, []);\n\n  // Sort to keep default group at the end\n  return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));\n};\n\n/**\n * Floating menu component. It shows a list of items that can be grouped.\n */\nexport const Menu: FunctionalComponent<MenuProps> = ({ controlledBy, items, current, onItemKeyDown }) => {\n  if (!items?.length) {\n    return null;\n  }\n\n  const groups = getGroupedItems(items);\n\n  return (\n    <div\n      class=\"menu\"\n      aria-labelledby={controlledBy ?? undefined}\n      role=\"menu\"\n    >\n      {groups.map(({ group, items }) => (\n        <div\n          class=\"group\"\n          role=\"none\"\n        >\n          {group.id !== DEFAULT_GROUP_KEY ? (\n            <div\n              class=\"group-name\"\n              id={group.id}\n            >\n              {group.label}\n            </div>\n          ) : groups.length > 1 ? (\n            // empty div to keep the same height as the other groups\n            <div class=\"group-name\" />\n          ) : null}\n          <ul\n            class=\"menu-list\"\n            role=\"group\"\n            aria-labelledby={group.id !== DEFAULT_GROUP_KEY ? group.id : undefined}\n          >\n            {items.map((item) => (\n              <li role=\"none\">\n                {item.href && (\n                  <a\n                    class={{ 'menu-item': true, 'active': current === item.id, 'highlight': item.highlight }}\n                    href={item.href}\n                    role=\"menuitem\"\n                    tabIndex={-1}\n                    aria-current={current === item.id ? 'page' : 'false'}\n                    onKeyDown={(event) => onItemKeyDown(event)}\n                  >\n                    {item.label}\n                  </a>\n                )}\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </div>\n  );\n};\n","/**\n * Check if an element contains an event target by checking its composedPath.\n * Useful when an event target may come from a component's shadow DOM.\n */\nexport const containsTarget = (ancestor: HTMLElement, event: Event) => {\n  return event\n    .composedPath()\n    .filter((el) => el !== document && el !== window.window)\n    .some((el) => ancestor.contains(el as HTMLElement));\n};\n\n/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */\nexport const moveFocus = (current: HTMLElement, next: HTMLElement) => {\n  current.tabIndex = -1;\n  next.tabIndex = 0;\n  next.focus();\n};\n",":host {\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  background-color: #fff;\n  color: var(--gray900);\n  fill: var(--gray900);\n  font-family: var(--font-family-sans);\n  overflow-x: clip;\n}\n\n:host,\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nul {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\na {\n  color: var(--gray900);\n  cursor: pointer;\n  text-decoration: none;\n}\n\nbutton {\n  all: unset;\n  cursor: pointer;\n}\n\nnav {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 8px var(--grid-margin) 8px 8px;\n}\n\nnav::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  box-shadow: var(--shadow-1);\n  content: '';\n  pointer-events: none;\n}\n\n.burger-button {\n  margin-left: auto;\n}\n\n.mobile-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: 16px var(--grid-margin) 32px;\n  background-color: #fff;\n  box-shadow: var(--shadow-2);\n  gap: 8px;\n}\n\n.mobile-menu li {\n  width: 100%;\n}\n\n.searchbar {\n  display: flex;\n  border: 1px solid #000;\n  border-radius: 4px;\n}\n\n.searchbar input {\n  width: 100%;\n  height: 100%;\n  padding: 8px;\n  border: none;\n  background-color: #fff;\n\n  /* To have a seamless appearance of the border radius of an internal child element nested within a parent element with rounded borders, we need to subtract the parent's border thickness from the child's border radius. Inner Radius = Outer Radius - Border Thickness */\n  border-bottom-left-radius: 3px;\n  border-top-left-radius: 3px;\n  font-family: var(--font-family-sans);\n  font-size: 1rem;\n}\n\n.searchbar input::placeholder {\n  color: var(--gray500);\n}\n\n.searchbar .searchbar-button {\n  padding: 4px 8px;\n  border-left: 1px solid #000;\n  background: var(--zanit-accent-color);\n  border-bottom-right-radius: 3px;\n  border-top-right-radius: 3px;\n  line-height: 1;\n}\n\n.searchbar input:focus:focus-visible,\n.searchbar .searchbar-button:focus:focus-visible {\n  z-index: 1;\n}\n\n.items-container {\n  min-height: 256px;\n}\n\n.mobile-menu > li .menubar-item {\n  padding: 8px 0;\n  font-size: 1rem;\n  text-align: left;\n}\n\n.mobile-menu > li:not(:last-child) .menubar-item {\n  border-bottom: 1px solid #000;\n}\n\n[role='menuitem'].parent {\n  display: flex;\n  width: fit-content;\n  align-items: center;\n  padding: 0;\n  border: none;\n  font-size: 0.875rem;\n  gap: 8px;\n}\n",".menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  display: grid;\n  width: 100%;\n  padding: 16px var(--grid-margin);\n  background-color: #fff;\n  box-shadow: var(--shadow-1);\n  column-gap: 24px;\n  grid-auto-columns: minmax(0, max-content);\n  grid-auto-flow: column;\n  grid-template-rows: minmax(0, max-content) max-content;\n}\n\n.menu .group {\n  display: grid;\n  color: var(--red500);\n  grid-row: 1 / -1;\n  grid-template-columns: 1fr;\n  grid-template-rows: subgrid;\n}\n\n@supports not (grid-template-rows: subgrid) {\n  .menu .group {\n    grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n  }\n}\n\n.menu .group .group-name {\n  margin-bottom: 16px;\n  color: var(--red500);\n  font-size: 1rem;\n  font-weight: var(--font-md);\n  line-height: 1.5;\n}\n\n.menu .menu-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.menu .menu-list > li > .menu-item {\n  border-bottom: 2px solid transparent;\n  font-size: 1rem;\n}\n\n.menu .menu-list > li > .menu-item.active,\n.menu .menu-list > li > .menu-item:hover {\n  border-bottom-color: var(--red500);\n}\n\n.menu .group .menu-list .menu-item.highlight {\n  font-size: 1.5rem;\n}\n\n@media (width < 768px) {\n  .menu {\n    position: relative;\n    display: flex !important;\n    flex-direction: column;\n    padding: 0;\n    box-shadow: none;\n    row-gap: 32px;\n  }\n\n  .menu .group {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .menu .group .group-name {\n    border-bottom: 1px solid currentcolor;\n    margin-bottom: 4px;\n    font-size: 0.875rem;\n  }\n\n  .menu .group .menu-list .menu-item {\n    font-size: 0.875rem;\n    font-weight: var(--font-md);\n  }\n\n  .menu .group .menu-list .menu-item.highlight {\n    font-size: 1rem;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\nimport { MenubarItem, MenuItem } from '../menubar';\nimport { Menu } from '../menu/menu';\n\n/** Mobile menubar component. */\n@Component({\n  tag: 'zanit-mobile-menubar',\n  styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n  shadow: true,\n})\nexport class ZanitMobileMenubar {\n  private formElement: HTMLFormElement;\n\n  @Element() host: HTMLZanitMobileMenubarElement;\n\n  /** ID of the current active item. */\n  @Prop() current: string | undefined = undefined;\n\n  /** Menubar items. */\n  @Prop() items: MenubarItem[] = [];\n\n  /** Initial search query. */\n  @Prop() searchQuery: string | undefined = undefined;\n\n  @State() parentItem: MenubarItem | undefined = undefined;\n  @State() menuItems: MenubarItem[] | MenuItem[] | undefined = undefined;\n  /** Whether the items to render come from a menubar or a menu. */\n  @State() menuType: 'menubar' | 'menu' | undefined = undefined;\n  @State() open: boolean;\n\n  /** Search query to apply. */\n  @State() _searchQuery: string | undefined = undefined;\n\n  @Watch('items')\n  onItemsChange() {\n    this.setupData(this.items);\n  }\n\n  /**\n   * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n   * @returns True if an item matches the `current` prop, false otherwise.\n   */\n  private setupData(items: MenubarItem[], parent?: MenubarItem): boolean {\n    for (const item of items) {\n      if (item.id === this.current) {\n        const type = item.menuItems?.length ? 'menu' : 'menubar';\n        this.parentItem = parent;\n        this.menuType = type;\n        this.menuItems = item.menuItems || item.navbarItems;\n        return true;\n      }\n\n      if (item.menuItems?.some(({ id }) => id === this.current)) {\n        this.parentItem = parent;\n        this.menuType = 'menu';\n        this.menuItems = item.menuItems;\n        return true;\n      }\n\n      if (item.navbarItems?.length) {\n        return this.setupData(item.navbarItems, item);\n      }\n    }\n\n    this.parentItem = parent;\n\n    return false;\n  }\n\n  private get menuItemsElement() {\n    return Array.from(this.host.shadowRoot.querySelectorAll('[role=\"menuitem\"]')) as HTMLElement[];\n  }\n\n  /** Initialize tabindex on menuitems, setting -1 to all but the first one. */\n  private initTabindex() {\n    this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n  }\n\n  private toggleMenu() {\n    if (this.open) {\n      this.open = false;\n    } else {\n      this.open = true;\n      setTimeout(() => {\n        this.initTabindex();\n        this.menuItemsElement[0].focus();\n      }, 200);\n    }\n  }\n\n  /** Handles keyboard navigation on mobile menu. */\n  private handleItemKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowUp': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const prevItem = items[(currentIndex - 1 + items.length) % items.length];\n        moveFocus(items[currentIndex], prevItem);\n        break;\n      }\n      case 'ArrowDown': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const nextItem = items[(currentIndex + 1) % items.length];\n        moveFocus(items[currentIndex], nextItem);\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement[0]);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement.pop());\n        break;\n      }\n    }\n  }\n\n  private handleInputChange(event: Event) {\n    this._searchQuery = (event.target as HTMLInputElement).value;\n  }\n\n  private onSearchSubmit(event: Event) {\n    event.preventDefault();\n    if (!this._searchQuery) {\n      return;\n    }\n\n    this.search.emit({ query: this._searchQuery });\n    this.formElement.submit();\n  }\n\n  /** Emitted on search form submission. */\n  @Event() search: EventEmitter<{ query: string }>;\n\n  connectedCallback() {\n    this.setupData(this.items);\n  }\n\n  /** Close the menu when clicking outside. */\n  @Listen('pointerdown', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Close the menu when pressing Escape or Tab. */\n  @Listen('keydown', { passive: true })\n  handleKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Escape':\n        this.open = false;\n        break;\n      case 'Tab':\n        if (containsTarget(this.host, event)) {\n          break;\n        }\n\n        this.open = false;\n        break;\n    }\n  }\n\n  /** Close the menu when it loses focus. */\n  @Listen('focusout', { passive: true })\n  handleFocusout(event: FocusEvent) {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (this.host.contains(relatedTarget)) {\n      return;\n    }\n    this.open = false;\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Zanichelli.it\">\n        <z-logo\n          link=\"/\"\n          height=\"32\"\n          width=\"126\"\n        ></z-logo>\n        <button\n          class=\"burger-button\"\n          type=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"mobile-menu\"\n          aria-label={this.open ? 'Chiudi menù' : 'Apri menù'}\n          onClick={() => this.toggleMenu()}\n        >\n          <z-icon\n            name={this.open ? 'multiply' : 'burger-menu'}\n            width=\"24\"\n            height=\"24\"\n          ></z-icon>\n        </button>\n        {this.open && (\n          <ul\n            class=\"mobile-menu\"\n            role=\"menubar\"\n          >\n            <li role=\"none\">\n              <form\n                class=\"searchbar\"\n                role=\"search\"\n                aria-label=\"Cerca\"\n                method=\"get\"\n                action=\"/ricerca\"\n                onSubmit={(event) => this.onSearchSubmit(event)}\n                ref={(el) => (this.formElement = el as HTMLFormElement)}\n              >\n                <input\n                  id=\"searchbar-input\"\n                  name=\"q\"\n                  type=\"search\"\n                  placeholder=\"Cerca per parola chiave o ISBN\"\n                  onInput={(event) => this.handleInputChange(event)}\n                ></input>\n                <button\n                  class=\"searchbar-button\"\n                  aria-controls=\"searchbar-input\"\n                  aria-label=\"Cerca\"\n                  type=\"submit\"\n                >\n                  <z-icon\n                    name=\"search\"\n                    width=\"20\"\n                    height=\"20\"\n                  ></z-icon>\n                </button>\n              </form>\n            </li>\n\n            {this.parentItem && (\n              <li role=\"none\">\n                <a\n                  class=\"parent\"\n                  href={this.parentItem.href}\n                  id={this.parentItem.id}\n                  role=\"menuitem\"\n                  tabIndex={-1}\n                  onKeyDown={(event) => this.handleItemKeydown(event)}\n                >\n                  <z-icon\n                    name=\"arrow-left\"\n                    width=\"8\"\n                    height=\"8\"\n                  ></z-icon>\n                  <span>\n                    {/* Show the 'Home' label if the parent of the current list is a root child. */}\n                    {this.items.some(({ id }) => this.current === id) ? 'Home' : this.parentItem.label}\n                  </span>\n                </a>\n              </li>\n            )}\n\n            {this.menuType === 'menu' ? (\n              <Menu\n                items={this.menuItems}\n                current={this.current}\n                onItemKeyDown={(event) => this.handleItemKeydown(event)}\n              />\n            ) : (\n              this.menuItems?.length && (\n                <div\n                  class=\"items-container\"\n                  role=\"none\"\n                >\n                  {this.menuItems.map((item) => (\n                    <li role=\"none\">\n                      <a\n                        class={{\n                          'menu-item': this.menuType === 'menu',\n                          'menubar-item': this.menuType === 'menubar',\n                        }}\n                        href={item.href}\n                        id={item.id}\n                        role=\"menuitem\"\n                        aria-current={this.current === item.id ? 'page' : 'false'}\n                        tabIndex={-1}\n                        onKeyDown={(event) => this.handleItemKeydown(event)}\n                      >\n                        <span data-text={item.label}>{item.label}</span>\n                      </a>\n                    </li>\n                  ))}\n                </div>\n              )\n            )}\n          </ul>\n        )}\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BwaWGQgy.js

@@ -0,0 +1,34 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-Dxu5saXC.js';
+
+const stylesCss = ":host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-surface02);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );content:\"\";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
+
+const ZGhostLoading = /*@__PURE__*/ proxyCustomElement(class ZGhostLoading extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return h(Host, { key: '06569bdb14202a00a873fc4d8336448b20115378' });
+    }
+    static get style() { return stylesCss; }
+}, [1, "z-ghost-loading"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-ghost-loading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-ghost-loading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZGhostLoading);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { ZGhostLoading as Z, defineCustomElement as d };
+//# sourceMappingURL=p-BwaWGQgy.js.map
+
+//# sourceMappingURL=p-BwaWGQgy.js.map

package/dist/components/p-BwaWGQgy.js.map

@@ -0,0 +1 @@
+{"file":"p-BwaWGQgy.js","mappings":";;AAAA,MAAM,SAAS,GAAG,8gBAA8gB;;MCCnhB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;IACtB,MAAM,GAAA;QACF,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-ghost-loading/index.js"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import { h, Host } from \"@stencil/core\";\nexport class ZGhostLoading {\n    render() {\n        return h(Host, { key: '06569bdb14202a00a873fc4d8336448b20115378' });\n    }\n    static get is() { return \"z-ghost-loading\"; }\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}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/components/p-C0jAXHRM.js

@@ -0,0 +1,85 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { r as randomId } from './p-D6oPathC.js';
+import './p-Du5IymMo.js';
+import './p-BLSm2Iqv.js';
+import { d as defineCustomElement$1 } from './p-DexdQ2O9.js';
+
+const stylesCss = ":host{--columns:1;display:grid;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
+
+const ZTr = /*@__PURE__*/ proxyCustomElement(class ZTr extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expand = createEvent(this, "expand", 7);
+        this.expandable = false;
+        this.expanded = false;
+        this.expandableContentId = undefined;
+    }
+    updateColumns() {
+        const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
+        if (this.expandable) {
+            cells.pop();
+        }
+        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+        this.host.style.setProperty("--columns", `${columns}`);
+        if (this.expandable) {
+            const expandableContent = cells.pop();
+            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
+            this.expandableContentId = expandableContent.id;
+        }
+    }
+    /**
+     * Handle click on row.
+     * Skip expansion if the click is on a element with `prevent-expand` css class.
+     */
+    onRowClick(event) {
+        const preventExpand = event.target.closest(".prevent-expand");
+        if (!this.expandable || preventExpand) {
+            return;
+        }
+        this.expanded = !this.expanded;
+        this.expand.emit({ expanded: this.expanded });
+    }
+    componentWillLoad() {
+        this.updateColumns();
+    }
+    render() {
+        return (h(Host, { key: 'c7aef75dce7ad486aa08145e3df1a9a4fbc0a086', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '474efb8147efb3045b2d671081674330209674ae', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'd4f77c52514979ee1e52483d1031d222f8b60dfd', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'a488e44b2b9119f2b96aeb42c2880f16650685a6', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '03ec3ec33b29e7ec504282289fa0daf8990deef5', onSlotchange: this.updateColumns.bind(this) })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "expandable": ["updateColumns"]
+    }; }
+    static get style() { return stylesCss; }
+}, [1, "z-tr", {
+        "expandable": [516],
+        "expanded": [32],
+        "expandableContentId": [32]
+    }, [[0, "colspanchange", "updateColumns"]], {
+        "expandable": ["updateColumns"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-tr", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-tr":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZTr);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { ZTr as Z, defineCustomElement as d };
+//# sourceMappingURL=p-C0jAXHRM.js.map
+
+//# sourceMappingURL=p-C0jAXHRM.js.map

package/dist/components/p-C0jAXHRM.js.map

@@ -0,0 +1 @@
+{"file":"p-C0jAXHRM.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,ojDAAojD;;MCUzjD,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAAC,CAAA,CAAA;AACZ,IAAA,WAAA,GAAA;;;;;AACI,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,IAAI,CAAC,mBAAmB,GAAG,SAAS;AACvC;IACD,aAAa,GAAA;AACT,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAClE,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,KAAK,CAAC,GAAG,EAAE;;AAEf,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACjF,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,CAAA,EAAG,OAAO,CAAA,CAAE,CAAC;AACtD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE;YACrC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,CAA2B,wBAAA,EAAA,QAAQ,EAAE,CAAA,CAAE;AACtF,YAAA,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE;;;AAGvD;;;AAGG;AACH,IAAA,UAAU,CAAC,KAAK,EAAA;QACZ,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC;AAC7D,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACnC;;AAEJ,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;IAEjD,iBAAiB,GAAA;QACb,IAAI,CAAC,aAAa,EAAE;;IAExB,MAAM,GAAA;AACF,QAAA,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,+BAA+B,EAAE,EAAE,IAAI,CAAC,UAAU,KAAK,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,EAAE,eAAe,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/z-tr/index.js"],"sourcesContent":[":host {\n  /* number of columns of the row. will be set in component's ts code */\n  --columns: 1;\n\n  display: grid;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n  border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n  --show-expandable-button: visible;\n\n  cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n  grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n  border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n  border-left: 0;\n  grid-column: 1 / span calc(var(--columns) + 1);\n  grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n  display: none;\n}\n\n:host([expanded]) {\n  margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n  box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n  background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: auto;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n","import { Host, h } from \"@stencil/core\";\nimport { randomId } from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\nexport class ZTr {\n    constructor() {\n        this.expandable = false;\n        this.expanded = false;\n        this.expandableContentId = undefined;\n    }\n    updateColumns() {\n        const cells = Array.from(this.host.querySelectorAll(\"z-td, z-th\"));\n        if (this.expandable) {\n            cells.pop();\n        }\n        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n        this.host.style.setProperty(\"--columns\", `${columns}`);\n        if (this.expandable) {\n            const expandableContent = cells.pop();\n            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n            this.expandableContentId = expandableContent.id;\n        }\n    }\n    /**\n     * Handle click on row.\n     * Skip expansion if the click is on a element with `prevent-expand` css class.\n     */\n    onRowClick(event) {\n        const preventExpand = event.target.closest(\".prevent-expand\");\n        if (!this.expandable || preventExpand) {\n            return;\n        }\n        this.expanded = !this.expanded;\n        this.expand.emit({ expanded: this.expanded });\n    }\n    componentWillLoad() {\n        this.updateColumns();\n    }\n    render() {\n        return (h(Host, { key: 'c7aef75dce7ad486aa08145e3df1a9a4fbc0a086', role: \"row\", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h(\"div\", { key: '474efb8147efb3045b2d671081674330209674ae', class: \"z-tr--expand-button-container\" }, this.expandable && (h(\"button\", { key: 'd4f77c52514979ee1e52483d1031d222f8b60dfd', \"aria-expanded\": this.expanded ? \"true\" : \"false\", \"aria-label\": this.expanded ? \"Comprimi riga\" : \"Espandi riga\", \"aria-controls\": this.expandableContentId, type: \"button\" }, h(\"z-icon\", { key: 'a488e44b2b9119f2b96aeb42c2880f16650685a6', name: this.expanded ? \"minus-circled\" : \"plus-circled\" })))), h(\"slot\", { key: '03ec3ec33b29e7ec504282289fa0daf8990deef5', onSlotchange: this.updateColumns.bind(this) })));\n    }\n    static get is() { return \"z-tr\"; }\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            \"expandable\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Whether the row is expandable.\\nUse a `z-td` as the last cell of the row for the additional content.\\nIt will show a button to expand/collapse the row.\\nThe last cell will be hidden until the button or row is clicked.\\n\\nIf some element inside the expandable row contains the `prevent-expand` css class,\\nthe row will not expand by clicking that element.\"\n                },\n                \"attribute\": \"expandable\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"expanded\": {},\n            \"expandableContentId\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"expand\",\n                \"name\": \"expand\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Row has been expanded\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"host\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"expandable\",\n                \"methodName\": \"updateColumns\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"colspanchange\",\n                \"method\": \"updateColumns\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/components/p-C37VC5pL.js

@@ -0,0 +1,93 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-Dxu5saXC.js';
+import { I as InfoRevealPosition, C as ControlSize } from './p-Bla2iV_L.js';
+import { d as defineCustomElement$1 } from './p-DexdQ2O9.js';
+
+const stylesCss = ":host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size=\"big\"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size=\"small\"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size=\"x-small\"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size=\"small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-small, 18px)}:host([size=\"x-small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-x-small, 16px)}.z-info-reveal-panel{position:absolute;z-index:19;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"top_right\"]) .z-info-reveal-panel{top:0}:host([position=\"bottom_left\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{bottom:0}:host([position=\"top_right\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{right:0}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"bottom_left\"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{top:auto !important;bottom:auto !important;width:calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;margin-top:calc(var(--trigger-size) * -1)}}";
+
+const ZInfoReveal = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icon = "informationsource";
+        this.position = InfoRevealPosition.BOTTOM_RIGHT;
+        this.label = undefined;
+        this.ariaLabel = "Apri pannello informazioni";
+        this.size = ControlSize.BIG;
+        this.open = false;
+    }
+    /**
+     * Adjust the position of the info panel to prevent exiting the viewport.
+     */
+    adjustPanelPosition() {
+        if (!this.open || !this.panel) {
+            return;
+        }
+        const rect = this.host.getBoundingClientRect();
+        const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--grid-margin"), 10);
+        const pageWidth = document.documentElement.offsetWidth;
+        // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.
+        const availableSpace = Math.round((this.position.includes("left") ? pageWidth - rect.left : rect.right) - gridMargin);
+        this.panel.style.maxWidth = `${availableSpace}px`;
+    }
+    /**
+     * Toggle the open state of the info panel.
+     */
+    togglePanel() {
+        this.open = !this.open;
+    }
+    /**
+     * Close the info panel.
+     */
+    closePanel() {
+        this.open = false;
+    }
+    handleEscapeKey(event) {
+        if (event.key === "Escape" && this.open) {
+            this.closePanel();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a19485beada104ab116a2eb280d976aa608260aa', open: this.open }, h("button", { key: '504213f62284cc74ed74b651a3a54dcd9715a1f1', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '4fd422856292ae26d66a04188abfb74c5e809141', name: this.icon }), this.label && h("span", { key: '4753636fcf7c98c077a93ac783b22b1057492bb5', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'bdff08efa35c74951b48d909e83d7ccf32079460', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '441569ddd80537294c1d66a1555423c460f7f8c9' }), h("button", { key: '690e9a97f7e77a6de567030062d159184106b725', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '1e110ca5a85731ec582d4696f72e4b010593d9eb', name: "multiply" })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "position": ["adjustPanelPosition"],
+        "open": ["adjustPanelPosition"]
+    }; }
+    static get style() { return stylesCss; }
+}, [1, "z-info-reveal", {
+        "icon": [1],
+        "position": [513],
+        "label": [1],
+        "ariaLabel": [1, "aria-label"],
+        "size": [513],
+        "open": [32]
+    }, [[9, "resize", "adjustPanelPosition"], [10, "keydown", "handleEscapeKey"]], {
+        "position": ["adjustPanelPosition"],
+        "open": ["adjustPanelPosition"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-info-reveal", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-info-reveal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZInfoReveal);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { ZInfoReveal as Z, defineCustomElement as d };
+//# sourceMappingURL=p-C37VC5pL.js.map
+
+//# sourceMappingURL=p-C37VC5pL.js.map

package/dist/components/p-C37VC5pL.js.map

@@ -0,0 +1 @@
+{"file":"p-C37VC5pL.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,yiFAAyiF;;MCW9iF,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AACpB,IAAA,WAAA,GAAA;;;;AACI,QAAA,IAAI,CAAC,IAAI,GAAG,mBAAmB;AAC/B,QAAA,IAAI,CAAC,QAAQ,GAAG,kBAAkB,CAAC,YAAY;AAC/C,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,4BAA4B;AAC7C,QAAA,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,GAAG;AAC3B,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACpB;AACD;;AAEG;IACH,mBAAmB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC3B;;QAEJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;AAC9C,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC;AAC7G,QAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW;;AAEtD,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC;QACrH,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAA,EAAG,cAAc,CAAA,EAAA,CAAI;;AAErD;;AAEG;IACH,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;;AAE1B;;AAEG;IACH,UAAU,GAAA;AACN,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAErB,IAAA,eAAe,CAAC,KAAK,EAAA;QACjB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACrC,IAAI,CAAC,UAAU,EAAE;;;IAGzB,MAAM,GAAA;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,EAAE,eAAe,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,EAAE,qBAAqB,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,8BAA8B,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-info-reveal/index.js"],"sourcesContent":[":host {\n  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-small, 18px);\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-x-small, 16px);\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  z-index: 19;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    top: auto !important;\n    bottom: auto !important;\n    width: calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import { Host, h } from \"@stencil/core\";\nimport { ControlSize, InfoRevealPosition } from \"../../beans\";\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n * @cssprop --trigger-icon-size - Size of the trigger icon for big size.\n * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.\n * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.\n */\nexport class ZInfoReveal {\n    constructor() {\n        this.icon = \"informationsource\";\n        this.position = InfoRevealPosition.BOTTOM_RIGHT;\n        this.label = undefined;\n        this.ariaLabel = \"Apri pannello informazioni\";\n        this.size = ControlSize.BIG;\n        this.open = false;\n    }\n    /**\n     * Adjust the position of the info panel to prevent exiting the viewport.\n     */\n    adjustPanelPosition() {\n        if (!this.open || !this.panel) {\n            return;\n        }\n        const rect = this.host.getBoundingClientRect();\n        const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n        const pageWidth = document.documentElement.offsetWidth;\n        // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n        const availableSpace = Math.round((this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin);\n        this.panel.style.maxWidth = `${availableSpace}px`;\n    }\n    /**\n     * Toggle the open state of the info panel.\n     */\n    togglePanel() {\n        this.open = !this.open;\n    }\n    /**\n     * Close the info panel.\n     */\n    closePanel() {\n        this.open = false;\n    }\n    handleEscapeKey(event) {\n        if (event.key === \"Escape\" && this.open) {\n            this.closePanel();\n        }\n    }\n    render() {\n        return (h(Host, { key: 'a19485beada104ab116a2eb280d976aa608260aa', open: this.open }, h(\"button\", { key: '504213f62284cc74ed74b651a3a54dcd9715a1f1', class: \"z-info-reveal-trigger\", type: \"button\", onClick: this.togglePanel.bind(this), \"aria-label\": !this.label ? this.ariaLabel : undefined, \"aria-expanded\": this.open ? \"true\" : \"false\", \"aria-controls\": \"z-info-reveal-panel\" }, this.icon && h(\"z-icon\", { key: '4fd422856292ae26d66a04188abfb74c5e809141', name: this.icon }), this.label && h(\"span\", { key: '4753636fcf7c98c077a93ac783b22b1057492bb5', class: \"z-info-reveal-label\" }, this.label)), h(\"div\", { key: 'bdff08efa35c74951b48d909e83d7ccf32079460', class: \"z-info-reveal-panel\", id: \"z-info-reveal-panel\", ref: (el) => (this.panel = el), hidden: !this.open }, h(\"slot\", { key: '441569ddd80537294c1d66a1555423c460f7f8c9' }), h(\"button\", { key: '690e9a97f7e77a6de567030062d159184106b725', class: \"z-info-reveal-close\", type: \"button\", onClick: this.closePanel.bind(this), \"aria-label\": \"Chiudi pannello informazioni\" }, h(\"z-icon\", { key: '1e110ca5a85731ec582d4696f72e4b010593d9eb', name: \"multiply\" })))));\n    }\n    static get is() { return \"z-info-reveal\"; }\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            \"icon\": {\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 for the trigger button\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"informationsource\\\"\"\n            },\n            \"position\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"InfoRevealPosition\",\n                    \"resolved\": \"InfoRevealPosition.BOTTOM_LEFT | InfoRevealPosition.BOTTOM_RIGHT | InfoRevealPosition.TOP_LEFT | InfoRevealPosition.TOP_RIGHT\",\n                    \"references\": {\n                        \"InfoRevealPosition\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::InfoRevealPosition\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The position of the z-info-reveal in the page. This helps to correctly place the info panel.\\nThe panel will grow in the opposite direction of the position.\\nFor example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\"\n                },\n                \"attribute\": \"position\",\n                \"reflect\": true,\n                \"defaultValue\": \"InfoRevealPosition.BOTTOM_RIGHT\"\n            },\n            \"label\": {\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\": \"Label of the trigger button.\"\n                },\n                \"attribute\": \"label\",\n                \"reflect\": false\n            },\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\": \"Aria label of the trigger button. It will be only used when `label` prop is empty.\"\n                },\n                \"attribute\": \"aria-label\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"Apri pannello informazioni\\\"\"\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ControlSize\",\n                    \"resolved\": \"ControlSize.BIG | ControlSize.SMALL | ControlSize.X_SMALL\",\n                    \"references\": {\n                        \"ControlSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::ControlSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Size of the trigger button\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": true,\n                \"defaultValue\": \"ControlSize.BIG\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"open\": {}\n        };\n    }\n    static get elementRef() { return \"host\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"position\",\n                \"methodName\": \"adjustPanelPosition\"\n            }, {\n                \"propName\": \"open\",\n                \"methodName\": \"adjustPanelPosition\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"resize\",\n                \"method\": \"adjustPanelPosition\",\n                \"target\": \"window\",\n                \"capture\": false,\n                \"passive\": true\n            }, {\n                \"name\": \"keydown\",\n                \"method\": \"handleEscapeKey\",\n                \"target\": \"window\",\n                \"capture\": true,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}