@zanichelli/albe-web-components 18.7.7 → 18.8.1-RC1

package/dist/collection/snowflakes/myz/list/z-myz-list/index.js

@@ -17,7 +17,7 @@ export class ZMyzList {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: 'a2b38a5764d03a797e5429fbf0e0353e3c7ea1c9' }, this.list &&
+        return (h("ul", { key: '8180625a6fea4c9e381f4d05d31bd27ab75b0f8c' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get is() { return "z-myz-list"; }

package/dist/collection/snowflakes/myz/list/z-myz-list-item/index.js

@@ -20,7 +20,7 @@ export class ZMyzListItem {
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (h("li", { key: '0cacc8d9b01d381cf22652c503149eda990e38a6', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: 'fce34a230dc284110a0c1b5e21a5a9e8bb7ef890', class: this.underlined && "border" }, this.icon && h("z-icon", { key: '9ee8993b2826a05639b76cf452ee92f60c325659', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '534cda7f4d2cb0e008392a6be343a973afc5644c' }))));
+        return (h("li", { key: '44f58aa95cb3c8fb30a81a17f94685e803d633c9', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: '9e8b7424522858aca31af76ee63c1d88e9b9d957', class: this.underlined && "border" }, this.icon && h("z-icon", { key: '3dd34e188f5e2d4f98465155d5bbbd91f5a11d7c', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '60796c84b325243bdd7faf1ce49a725addc247fa' }))));
     }
     static get is() { return "z-myz-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-alert/index.js

@@ -7,7 +7,7 @@ export class ZAlert {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '914e9a0c0f097e47797271695105ea18a0359487', class: this.type }, h("slot", { key: '5267c9b021ac889805d3ee83a3fdcdc244b98ca2' })));
+        return (h("div", { key: 'e59506b0b4e4fd4ad391775b0a4596986df6c7d0', class: this.type }, h("slot", { key: 'a465df5af8e5b5fbaa9b8bb834b4de04972ce770' })));
     }
     static get is() { return "z-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-otp/index.js

@@ -14,7 +14,7 @@ export class ZOtp {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: 'fda767d67b4f56013242705290e13b622359c5de', class: "otp-container" }, h("div", { key: '970b70db5db8b635a4d6b9bd7eaa4dee3c4002da', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '3280158fc2eb52cab06257cfea6237b04e277514', class: "otp-container" }, h("div", { key: 'b237b9c77421eeae14d5bac7e079b4f6b667ceed', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -25,7 +25,7 @@ export class ZOtp {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '27cfcc5a59ce18104b04210a8383caf6d0de2f2b', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: 'd74fcd0805c2bbfa9cf993cf88fbaabf632412a8', message: this.message, status: this.status })));
     }
     static get is() { return "z-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.d.ts

@@ -19,6 +19,8 @@ export { ZBookCardApp as ZBookCardApp } from '../types/components/book-card/z-bo
 export { defineCustomElement as defineCustomElementZBookCardApp } from './z-book-card-app';
 export { ZBookCardDeprecated as ZBookCardDeprecated } from '../types/components/deprecated/z-book-card-deprecated/index';
 export { defineCustomElement as defineCustomElementZBookCardDeprecated } from './z-book-card-deprecated';
+export { ZBookCover as ZBookCover } from '../types/components/z-book-cover/index';
+export { defineCustomElement as defineCustomElementZBookCover } from './z-book-cover';
 export { ZBreadcrumb as ZBreadcrumb } from '../types/components/z-breadcrumb/index';
 export { defineCustomElement as defineCustomElementZBreadcrumb } from './z-breadcrumb';
 export { ZButton as ZButton } from '../types/components/z-button/index';
@@ -117,7 +119,7 @@ export { ZPopover as ZPopover } from '../types/components/z-popover/index';
 export { defineCustomElement as defineCustomElementZPopover } from './z-popover';
 export { ZRangePicker as ZRangePicker } from '../types/components/date-picker/z-range-picker/index';
 export { defineCustomElement as defineCustomElementZRangePicker } from './z-range-picker';
-export { ZResultCard as ZResultCard } from '../types/components/result-card/z-result-card/index';
+export { ZResultCard as ZResultCard } from '../types/components/z-result-card/index';
 export { defineCustomElement as defineCustomElementZResultCard } from './z-result-card';
 export { ZSearchbar as ZSearchbar } from '../types/components/z-searchbar/index';
 export { defineCustomElement as defineCustomElementZSearchbar } from './z-searchbar';

package/dist/components/index.js

@@ -11,6 +11,7 @@ export { ZAvatar, defineCustomElement as defineCustomElementZAvatar } from './z-
 export { ZBookCard, defineCustomElement as defineCustomElementZBookCard } from './z-book-card.js';
 export { ZBookCardApp, defineCustomElement as defineCustomElementZBookCardApp } from './z-book-card-app.js';
 export { ZBookCardDeprecated, defineCustomElement as defineCustomElementZBookCardDeprecated } from './z-book-card-deprecated.js';
+export { ZBookCover, defineCustomElement as defineCustomElementZBookCover } from './z-book-cover.js';
 export { ZBreadcrumb, defineCustomElement as defineCustomElementZBreadcrumb } from './z-breadcrumb.js';
 export { ZButton, defineCustomElement as defineCustomElementZButton } from './z-button.js';
 export { ZButtonSort, defineCustomElement as defineCustomElementZButtonSort } from './z-button-sort.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEM,KAAK,GAAG;IACZ,WAAW;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {UTILS as Utils};\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEM,KAAK,GAAG;IACZ,WAAW;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {UTILS as Utils};\n"],"version":3}

package/dist/components/index10.js

@@ -1,92 +1,51 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { H as InfoRevealPosition, e as ControlSize } from './index2.js';
-import { d as defineCustomElement$1 } from './index9.js';
+import { I as ICONS } from './iconset.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 ZInfoRevealStyle0 = stylesCss;
+const stylesCss = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 1.125rem)}:host svg:not([height]){height:var(--z-icon-height, 1.125rem)}";
+const ZIconStyle0 = stylesCss;
 
-const ZInfoReveal = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends HTMLElement {
+const ZIcon = /*@__PURE__*/ proxyCustomElement(class ZIcon extends HTMLElement {
     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;
+        this.name = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.iconid = undefined;
+        this.fill = undefined;
     }
-    /**
-     * 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();
+    selectPathOrPolygon(iconValue) {
+        if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
+            return h("path", { d: ICONS[this.name] });
         }
+        return h("polygon", { points: ICONS[this.name] });
     }
     render() {
-        return (h(Host, { key: '56c05c5fae8da4a2260905997379c4606a25527f', open: this.open }, h("button", { key: 'f2b0f69b9e7f39e8b488e7af05c5833181a4b905', 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: 'f26d18b089849931ca497f45d027b34933517f22', name: this.icon }), this.label && h("span", { key: '3f56e1db47e5da352b9ee94d81eadb0927a93a14', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'addb88ebac5145798b0fb3ac324bd2c174997f72', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'e296f4322cd7d4bf26e46290e8038aeca01c073e' }), h("button", { key: '529579c67957586b99ff35e83e14fd55186c4a04', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'dd5971ecab9a3b88933b03d9b7a46731de2dbeeb', name: "multiply" })))));
+        return (h(Host, { key: '427cac0797fc718938ee45da5999b8a2bf70e570', "aria-hidden": "true" }, h("svg", { key: '23275947c49b69095acbec1df2ecec0f04da3525', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
     }
-    get host() { return this; }
-    static get watchers() { return {
-        "position": ["adjustPanelPosition"],
-        "open": ["adjustPanelPosition"]
-    }; }
-    static get style() { return ZInfoRevealStyle0; }
-}, [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"]
+    static get style() { return ZIconStyle0; }
+}, [1, "z-icon", {
+        "name": [1],
+        "height": [8],
+        "width": [8],
+        "iconid": [1],
+        "fill": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-info-reveal", "z-icon"];
+    const components = ["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();
+                customElements.define(tagName, ZIcon);
             }
             break;
     } });
 }
 
-export { ZInfoReveal as Z, defineCustomElement as d };
+export { ZIcon as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index10.js.map

package/dist/components/index10.js.map

@@ -1 +1 @@
-{"file":"index10.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,yiFAAyiF,CAAC;AAC5jF,0BAAe,SAAS;;MCgBX,WAAW;;;;;oBAGd,mBAAmB;wBAQK,kBAAkB,CAAC,YAAY;;yBAQnD,4BAA4B;oBAInB,WAAW,CAAC,GAAG;oBAI7B,KAAK;;;;;IAYZ,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;;QAEvD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;KACnD;;;;IAKO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;;;;IAKO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,mBACrC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC7B,qBAAqB,IAElC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,EACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAElB,8DAAa,EACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B,IAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"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 {Component, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\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 */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\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(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index10.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,yPAAyP,CAAC;AAC5Q,oBAAe,SAAS;;MCOX,KAAK;;;;;;;;;;;IAqBR,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE;YAC9B,OAAO,YAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CAAC;SAC3C;QAED,OAAO,eAAS,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAY,CAAC;KACtD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,oEAAa,MAAM,IACtB,4DACE,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,IAE3C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-icon/styles.css?tag=z-icon&encapsulation=shadow","src/components/z-icon/index.tsx"],"sourcesContent":[":host {\n  margin-right: var(--z-icon-right-margin, 0);\n  margin-left: var(--z-icon-left-margin, 0);\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host svg:not([width]) {\n  width: var(--z-icon-width, 1.125rem);\n}\n\n:host svg:not([height]) {\n  height: var(--z-icon-height, 1.125rem);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ICONS} from \"../../constants/iconset\";\n\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon {\n  /** icon name */\n  @Prop()\n  name: string;\n\n  /** icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** icon id (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** icon fill (optional) */\n  @Prop()\n  fill?: string;\n\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={ICONS[this.name]}></path>;\n    }\n\n    return <polygon points={ICONS[this.name]}></polygon>;\n  }\n\n  render(): SVGElement {\n    return (\n      <Host aria-hidden=\"true\">\n        <svg\n          viewBox=\"0 0 1000 1000\"\n          width={this.width}\n          height={this.height}\n          id={this.iconid}\n          fill={this.fill ? `var(--${this.fill})` : \"\"}\n        >\n          {this.selectPathOrPolygon(ICONS[this.name])}\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}