@zanichelli/albe-web-components 13.4.0 → 13.5.0

package/dist/cjs/z-myz-card_4.cjs.entry.js

@@ -39,7 +39,7 @@ const ZMyzCardComponent = class {
         return elemClasses;
     }
     render() {
-        return (index.h("div", { key: '37a248c80cbcc045d2c053bda3acb7506a6d3028', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: 'e62b60f5edc7bc949261b0e1f5a9734db07f3ed9' })));
+        return (index.h("div", { key: 'a72f39c9ad9161449a5f58965e2d93d83a107490', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: '66669fd94e4018f6c6dd05ff9d9bda41c0f007bf' })));
     }
 };
 ZMyzCardComponent.style = ZMyzCardStyle0;
@@ -52,7 +52,7 @@ const ZMyzCardBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '7d193913aaee1ce18633cb39f322bde63dd0f636' }, index.h("slot", { key: '59b557d02f579f35c15ac0ac03a084a3f43a00c0', name: "alert" }), index.h("slot", { key: 'bcd8832a6c010f6dbc6a6d5579efe7801ff6a60c', name: "cover" })));
+        return (index.h("div", { key: '12386f13964444007e6bef9219e791d01f131d9a' }, index.h("slot", { key: '10378c336d6a6c70dea11375397fd734dc570f53', name: "alert" }), index.h("slot", { key: '7dfff15df0a1a32f63ac329a4be3b11d7d4554f6', name: "cover" })));
     }
 };
 ZMyzCardBody.style = ZMyzCardBodyStyle0;
@@ -72,7 +72,7 @@ const ZMyzCardCover = class {
         this.img = this.defaultimg;
     }
     render() {
-        return (index.h("img", { key: '5d3f258dae6077687ccd98690f6caad390bc05aa', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (index.h("img", { key: '1123789029226a12e2953a6b58d5030eadec11ab', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
 };
 ZMyzCardCover.style = ZMyzCardCoverStyle0;
@@ -108,7 +108,7 @@ const ZMyzCardHeader = class {
         };
     }
     render() {
-        return (index.h("header", { key: '904634bcd078321c3142c3b92eb8ad14244c6c4b', class: this.retrieveClass() }, index.h("slot", { key: 'c6e19f0f2b536def7a32c3dd9343439f8d532e98', name: "aria-heading" }), index.h("span", { key: '36da9db6eb1620f5ef38db575ec81196997ccb48', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: '7f3f94bb0161e385189963b861eb61ef224c1548', name: "icon" })));
+        return (index.h("header", { key: 'b78bcd035a80f910780071965ac3226cfe13d307', class: this.retrieveClass() }, index.h("slot", { key: '012280b6c5689ce3266f63460002bc8aba202493', name: "aria-heading" }), index.h("span", { key: 'ee783cc471606e97a88809eddf6d0436e07d15e7', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: '0a628219decd82055dc7e7b6c0b6fc30570e268e', name: "icon" })));
     }
 };
 ZMyzCardHeader.style = ZMyzCardHeaderStyle0;

package/dist/cjs/z-myz-list.cjs.entry.js

@@ -26,7 +26,7 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (index.h("ul", { key: '7ae896a090c0215b27d6e4b9cd44a269c03c009c' }, this.list &&
+        return (index.h("ul", { key: '943b3633a4b233466186116698cb65f49ecde7ce' }, this.list &&
             this.list.map((bean, i) => (index.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 watchers() { return {

package/dist/cjs/z-otp.cjs.entry.js

@@ -24,7 +24,7 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (index.h("div", { key: '3ade863dca22eba0ad15da52ead3264745aeca8c', class: "otp-container" }, index.h("div", { key: 'd95c622db298145d11b422312f12194b9014163b', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (index.h("div", { key: 'a7f919ee8d83098adb6303d6af70a701684d9752', class: "otp-container" }, index.h("div", { key: '07143c3078db7cd5dd9f5bf48c977d87df9457e9', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -35,7 +35,7 @@ const ZOtp = class {
             }, 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) })))), index.h("z-input-message", { key: 'be1d42180f1079a7a3dc199c2e4a9467e6216a47', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), index.h("z-input-message", { key: '19663f9110cfe610c76ca900938192fb4f7fb96c', message: this.message, status: this.status })));
     }
 };
 ZOtp.style = ZOtpStyle0;

package/dist/cjs/z-pocket-message.cjs.entry.js

@@ -12,7 +12,7 @@ const ZPocketMessage = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '843ee900479a31fb894034f112cc0228b96777db' }, index.h("z-icon", { key: 'fd7328544da14a6f0291267e9b5b0f13eebc6d78', name: "exclamation-circle" }), index.h("div", { key: '1612d02ebeb6a3181d632350af14d847883cdce4', class: "content" }, index.h("slot", { key: 'f7256dfd56028f2dc9e3c42c324c210041ed50ad' })), index.h("div", { key: '9b5db0c5c46967ba4ae2091fac0ab3e4ec3718ff', class: "cta-wrapper" }, index.h("slot", { key: '9a23bdb386bd1c10d311c41226a430e2a61b9d45', name: "cta" }))));
+        return (index.h("div", { key: 'db10fcdf23fbd0da7833e01f8d72a6302f6cadba' }, index.h("z-icon", { key: '7c241ba1a147f71db15162c5ee6d84738536430e', name: "exclamation-circle" }), index.h("div", { key: '7ec8936f539f19047c644be7b9ec1dd985d3d42e', class: "content" }, index.h("slot", { key: 'a6cd9ab932dcac28058640df1a08da9f174e1a2b' })), index.h("div", { key: '376e912ec9d49a7148b620b54ce26d9e8a278f1f', class: "cta-wrapper" }, index.h("slot", { key: '3ccbb7a2cd41d211ab76734fb73e7b23aa100d9b', name: "cta" }))));
     }
 };
 ZPocketMessage.style = ZPocketMessageStyle0;

package/dist/cjs/z-pocket_3.cjs.entry.js

@@ -64,7 +64,7 @@ const ZPocket = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'ad25460e1d77b82434d7237fc8bf70bdaccd1037' }, index.h("div", { key: '66003489b14556acf7ea4345dfd942cb244abfad', "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { key: '69e23ca317f9aa2d68e00213af6d4aba2d01a5f9', id: this.pocketid, class: "content-wrapper" }, index.h("div", { key: '1d02d4b55e0853375c3770bd0f038e38922ce3f4' }, index.h("slot", { key: 'a4a0ebc7522d5f242263ac87b8b61191dd98d2b7' })))));
+        return (index.h("div", { key: 'e900c7a30cc100691a08e99eef3e75ab09228ac6' }, index.h("div", { key: '789f4dd2b162f4693b4d6d4d0636d6614a69e2a3', "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { key: 'f53572738d1fc377efafa3f4c9b2b012eb8dcd87', id: this.pocketid, class: "content-wrapper" }, index.h("div", { key: '8bc1cdbc0c8cd10bb978dd4e04da88da183a2a0c' }, index.h("slot", { key: '6ac22e14a792914aca4dca5a7da5bd3999a6dd17' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -88,7 +88,7 @@ const ZPocketBody = class {
         }
     }
     render() {
-        return (index.h("main", { key: 'f017441cd9ae7d12e0bea9ee61f6ebae5809ade7', class: this.status }, index.h("slot", { key: '02d262a95a8d41b1e303ac9d0efbd4218e8b28c9' })));
+        return (index.h("main", { key: 'c93989e78b34be843571bb21bbd26f324ae86456', class: this.status }, index.h("slot", { key: 'f4755713e7084a59b91d35456502d0456a2aa339' })));
     }
 };
 ZPocketBody.style = ZPocketBodyStyle0;
@@ -118,7 +118,7 @@ const ZPocketHeader = class {
         mc.on("pandown", () => this.emitPocketHeaderPan("down"));
     }
     render() {
-        return (index.h("header", { key: 'f14fbd3ff1d6757a840175eb9f17e71e40d7c507', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", { key: 'f6087dbe044ca3f0d2777194a73e60c4d5306c3c' })));
+        return (index.h("header", { key: '03faf1e1005718b682ebae5e663d880e6b3763a2', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", { key: '329c89a202e0a5f351c080ed513ce90e873caa75' })));
     }
 };
 ZPocketHeader.style = ZPocketHeaderStyle0;

package/dist/cjs/z-popover.cjs.entry.js

@@ -304,7 +304,7 @@ const ZPopover = class {
         this.onOpen();
     }
     render() {
-        return index.h("slot", { key: '5b096156553e94c50200ccd47d6ea97d65f03c54' });
+        return index.h("slot", { key: 'dcaaf8ad7c023e4f7b681aa8e39273d485e69d80' });
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-section-title.cjs.entry.js

@@ -18,7 +18,7 @@ const ZSectionTitle = class {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (index.h(index.Host, { key: 'ffae3cccc6d4923d5904055ab083a1d581818e5b' }, index.h("slot", { key: 'a8bad3881acb225f24dafd28316bc08be97657f1', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.BEFORE && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" })), index.h("slot", { key: '7121066325d4be6c5385d70083da300f15eacf2b', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.AFTER && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (index.h(index.Host, { key: 'd691017e2953d129c291a8d1e8fa5411f0faf457' }, index.h("slot", { key: '99c8dce52dde7a85c2dd7423d08875b9a5ab4dfe', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.BEFORE && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" })), index.h("slot", { key: 'de5810f9b9a3db9c2fb81a59ac3dda261079b81f', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.AFTER && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-skip-to-content.cjs.entry.js

@@ -52,7 +52,7 @@ const ZSkipToContent = class {
         this.visible = false;
     }
     render() {
-        return (index.h(index.Host, { key: '911d2c6e0710ecc5f438fba15ace454e2d43b2d1', class: {
+        return (index.h(index.Host, { key: 'a23874893887060f9581859334bd1a21603a46bb', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/cjs/z-visually-hidden.cjs.entry.js

@@ -12,7 +12,7 @@ const ZVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '65fd2ab29bc68aa93203b219daa615d80bc6bdba' });
+        return index.h("slot", { key: '3621cee7a23fe68812b92d58a239dce03caf4724' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/collection/components/z-info-reveal/index.js

@@ -1,58 +1,53 @@
 import { h, Host } from "@stencil/core";
-import { InfoRevealPosition } from "../../beans";
+import { ControlSize, InfoRevealPosition } from "../../beans";
 /**
  * Info reveal component.
  *
- * @slot - info to display in the info box. If more than one element has been slotted,
- * by clicking on the panel it switches to the next info element.
- * @cssprop --z-info-reveal-theme--surface - background color of the info reveal panel.
- * @cssprop --z-info-reveal-theme--text - foreground color of the info reveal panel.
- * @cssprop --z-info-reveal-shadow - shadow of the info reveal panel.
- * @cssprop --z-info-reveal-max-width - max width of the info reveal panel.
+ * @slot - content of the info panel.
+ * @cssprop --z-info-reveal-panel-width - Width of the info panel.
  */
 export class ZInfoReveal {
     constructor() {
         this.icon = "informationsource";
         this.position = InfoRevealPosition.BOTTOM_RIGHT;
         this.label = undefined;
+        this.ariaLabel = "Apri pannello informazioni";
+        this.size = ControlSize.BIG;
         this.open = false;
-        this.currentIndex = null;
-    }
-    watchItems() {
-        Array.from(this.el.children).forEach((child, index) => {
-            if (this.currentIndex === index) {
-                child.setAttribute("data-current", "");
-            }
-            else {
-                child.removeAttribute("data-current");
-            }
-        });
     }
     /**
-     * Open the info box.
+     * Adjust the position of the info panel to prevent exiting the viewport.
      */
-    openInfoBox() {
-        this.currentIndex = 0;
-        this.open = true;
+    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`;
     }
     /**
-     * Close the info box.
+     * Toggle the open state of the info panel.
      */
-    closeInfoBox() {
-        this.open = false;
+    togglePanel() {
+        this.open = !this.open;
     }
     /**
-     * Navigate slotted info.
-     * It closes the info box after the last info has been navigated.
+     * Close the info panel.
      */
-    next() {
-        this.currentIndex = this.currentIndex + 1;
-        if (this.currentIndex === this.el.children.length) {
-            this.closeInfoBox();
+    closePanel() {
+        this.open = false;
+    }
+    handleEscapeKey(event) {
+        if (event.key === "Escape" && this.open) {
+            this.closePanel();
         }
     }
     render() {
-        return (h(Host, { key: '1cc6cbacd33676a39d804037c786a37fd7aa9864', open: this.open }, h("button", { key: '5ad8966b67c365f654c0ddb50e879a0859a9e785', class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { key: '5314f51f922a64ee58162687bab764835401d6a2', name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
+        return (h(Host, { key: 'db425718606f2b7f411fab9cdac57d91ce88560c', open: this.open }, h("button", { key: 'a70882d456af51c526726220a05864ab54ea86d6', 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", { name: this.icon }), this.label && h("span", { class: "z-info-reveal-label" }, this.label)), h("div", { key: '765172552ea823e07e010a68c201f5fa76fbc93d', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'f95ed8f0c6c94758b389139dde42289ef8b78ffc' }), h("button", { key: 'a80d002f3d07f101af8bcc84ef2a78d85da7036f', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '015386db04b0f4bdb2fefd9da623fb03327fbf86', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }
@@ -80,7 +75,7 @@ export class ZInfoReveal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the icon for the open button"
+                    "text": "Name of the icon for the trigger button"
                 },
                 "attribute": "icon",
                 "reflect": false,
@@ -104,7 +99,7 @@ export class ZInfoReveal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Info reveal's position"
+                    "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."
                 },
                 "attribute": "position",
                 "reflect": true,
@@ -122,24 +117,83 @@ export class ZInfoReveal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Text that appears on closed panel next to the open button."
+                    "text": "Label of the trigger button."
                 },
                 "attribute": "label",
                 "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label of the trigger button. It will be only used when `label` prop is empty."
+                },
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "\"Apri pannello informazioni\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ControlSize",
+                    "resolved": "ControlSize.BIG | ControlSize.SMALL | ControlSize.X_SMALL",
+                    "references": {
+                        "ControlSize": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ControlSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the trigger button"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "ControlSize.BIG"
             }
         };
     }
     static get states() {
         return {
-            "open": {},
-            "currentIndex": {}
+            "open": {}
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "currentIndex",
-                "methodName": "watchItems"
+                "propName": "position",
+                "methodName": "adjustPanelPosition"
+            }, {
+                "propName": "open",
+                "methodName": "adjustPanelPosition"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "adjustPanelPosition",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleEscapeKey",
+                "target": "window",
+                "capture": true,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/z-info-reveal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-reveal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAQ/C;;;;;;;;;GASG;AACH,MAAM,OAAO,WAAW;;oBAKd,mBAAmB;wBAIK,kBAAkB,CAAC,YAAY;;oBAQxD,KAAK;4BAIW,IAAI;;IAG3B,UAAU;QACR,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACpD,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,EAAE,CAAC;gBAChC,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;YACxC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED;;;OAGG;IACK,IAAI;QACV,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAClD,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAEnC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACpE,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAW,CAC3B;YACR,IAAI,CAAC,IAAI,IAAI,CACZ,WACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7B,QAAQ,EAAE,CAAC;gBAEX,eAAa;gBACb,cACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;oBAErC,cAAQ,IAAI,EAAC,OAAO,GAAU,CACvB,CACL,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop, State, Watch, Element, Host} from \"@stencil/core\";\nimport {InfoRevealPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\n\n/**\n * Info reveal component.\n *\n * @slot - info to display in the info box. If more than one element has been slotted,\n * by clicking on the panel it switches to the next info element.\n * @cssprop --z-info-reveal-theme--surface - background color of the info reveal panel.\n * @cssprop --z-info-reveal-theme--text - foreground color of the info reveal panel.\n * @cssprop --z-info-reveal-shadow - shadow of the info reveal panel.\n * @cssprop --z-info-reveal-max-width - max width of the info reveal panel.\n */\nexport class ZInfoReveal {\n  @Element() el: HTMLZInfoRevealElement;\n\n  /** Name of the icon for the open button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /** Info reveal's position */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Text that appears on closed panel next to the open button. */\n  @Prop()\n  label?: string;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  /** Current index for the info queue. */\n  @State()\n  currentIndex: number = null;\n\n  @Watch(\"currentIndex\")\n  watchItems(): void {\n    Array.from(this.el.children).forEach((child, index) => {\n      if (this.currentIndex === index) {\n        child.setAttribute(\"data-current\", \"\");\n      } else {\n        child.removeAttribute(\"data-current\");\n      }\n    });\n  }\n\n  /**\n   * Open the info box.\n   */\n  private openInfoBox(): void {\n    this.currentIndex = 0;\n    this.open = true;\n  }\n\n  /**\n   * Close the info box.\n   */\n  private closeInfoBox(): void {\n    this.open = false;\n  }\n\n  /**\n   * Navigate slotted info.\n   * It closes the info box after the last info has been navigated.\n   */\n  private next(): void {\n    this.currentIndex = this.currentIndex + 1;\n    if (this.currentIndex === this.el.children.length) {\n      this.closeInfoBox();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          onClick={this.openInfoBox.bind(this)}\n        >\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n          <z-icon name={this.icon}></z-icon>\n        </button>\n        {this.open && (\n          <div\n            class=\"info-box\"\n            onClick={this.next.bind(this)}\n            tabIndex={0}\n          >\n            <slot></slot>\n            <button\n              class=\"z-info-reveal-close\"\n              onClick={this.closeInfoBox.bind(this)}\n            >\n              <z-icon name=\"close\"></z-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-reveal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Prop, State, Host, Listen, Watch, Element} 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 */\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"]}

package/dist/collection/components/z-info-reveal/styles.css

@@ -1,103 +1,132 @@
 :host {
-  --z-info-reveal-theme--surface: var(--color-black);
-  --z-info-reveal-theme--text: var(--color-white);
-  --z-info-reveal-shadow: var(--shadow-2);
-  --z-info-reveal-max-width: 375px; /* defaults to average width of mobile devices */
+  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */
+  --trigger-size: 44px;
 
   position: relative;
-  display: flex;
-  width: fit-content;
-  background-color: var(--z-info-reveal-theme--surface);
-  color: var(--z-info-reveal-theme--text);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  letter-spacing: 0;
-  line-height: 1.5;
+}
+
+: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;
-  border-radius: 0;
-  color: inherit;
   cursor: pointer;
-  fill: currentcolor;
   font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
   letter-spacing: inherit;
-  line-height: inherit;
 }
 
-z-icon {
-  --z-icon-width: calc(var(--space-unit) * 3);
-  --z-icon-height: calc(var(--space-unit) * 3);
-
-  display: flex;
+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-text04);
+  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;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  padding: calc(var(--space-unit) / 2);
-  box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
+  fill: var(--color-icon03);
 }
 
-:host([position="top_left"]) .z-info-reveal-trigger,
-:host([position="bottom_left"]) .z-info-reveal-trigger {
-  flex-direction: row-reverse;
+:host([size="small"]) > .z-info-reveal-trigger z-icon {
+  --trigger-icon-size: 18px;
 }
 
-:host([open]) .z-info-reveal-trigger {
-  box-shadow: none;
+:host([size="x-small"]) > .z-info-reveal-trigger z-icon {
+  --trigger-icon-size: 16px;
 }
 
-.info-box {
+.z-info-reveal-panel {
   position: absolute;
   display: flex;
-  max-width: var(--z-info-reveal-max-width);
-  padding: calc(var(--space-unit) / 2);
-  background-color: var(--z-info-reveal-theme--surface);
-  box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
-  cursor: pointer;
+  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-text04);
+  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"]) .info-box,
-:host([position="bottom_right"]) .info-box {
+:host([position="bottom_left"]) .z-info-reveal-panel,
+:host([position="bottom_right"]) .z-info-reveal-panel {
   bottom: 0;
 }
 
-:host([position="top_right"]) .info-box,
-:host([position="bottom_right"]) .info-box {
+:host([position="top_right"]) .z-info-reveal-panel,
+:host([position="bottom_right"]) .z-info-reveal-panel {
   right: 0;
 }
 
-:host([position="top_left"]) .info-box,
-:host([position="bottom_left"]) .info-box {
+:host([position="top_left"]) .z-info-reveal-panel,
+:host([position="bottom_left"]) .z-info-reveal-panel {
   left: 0;
-  flex-direction: row-reverse;
-}
-
-::slotted(*) {
-  display: none;
-  width: max-content;
 }
 
-::slotted([data-current]) {
-  display: block;
+.z-info-reveal-panel .z-info-reveal-close {
+  margin-left: auto;
 }
 
-:host([position="top_left"]) .z-info-reveal-close,
-:host([position="top_right"]) .z-info-reveal-close {
-  align-self: flex-start;
+.z-info-reveal-panel z-icon {
+  fill: var(--color-icon03);
 }
 
-:host([position="bottom_left"]) .z-info-reveal-close,
-:host([position="bottom_right"]) .z-info-reveal-close {
-  align-self: flex-end;
+@media (max-width: 767px) {
+  .z-info-reveal-panel {
+    position: fixed;
+    top: auto !important;
+    bottom: auto !important;
+    left: var(--grid-margin) !important;
+    width: calc(100% - (var(--grid-margin) * 2)) !important;
+    max-width: none !important;
+    margin-top: calc(var(--trigger-size) * -1);
+  }
 }

package/dist/collection/components/z-offcanvas/index.js

@@ -25,7 +25,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'dbe2cd2f56dba42df914c0d6643b62ba3543a2cb', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: 'ed825afb1152d0e56ebfefd804f473d1e7680cb9', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '368c7d337aedeed1d464031dc55c33778dee6354', role: "presentation", class: "canvas-content" }, h("slot", { key: '507daf4b8fd961b0e0c81627e42a4fd605eab4c0', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '554986cba00c7380f17f737267b450dcf0c3f52e', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: 'dc736f68ce6842d9d7e65093e140f5eaebd460f9', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '416b060ab45249f20e0776cb5a65d27c71cd349b', role: "presentation", class: "canvas-content" }, h("slot", { key: 'e7a92fbd0696f8ed5a215610a3a3f78266ccec2f', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-popover/index.js

@@ -301,7 +301,7 @@ export class ZPopover {
         this.onOpen();
     }
     render() {
-        return h("slot", { key: '5b096156553e94c50200ccd47d6ea97d65f03c54' });
+        return h("slot", { key: 'dcaaf8ad7c023e4f7b681aa8e39273d485e69d80' });
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-section-title/index.js

@@ -18,7 +18,7 @@ export class ZSectionTitle {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: 'ffae3cccc6d4923d5904055ab083a1d581818e5b' }, h("slot", { key: 'a8bad3881acb225f24dafd28316bc08be97657f1', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '7121066325d4be6c5385d70083da300f15eacf2b', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: 'd691017e2953d129c291a8d1e8fa5411f0faf457' }, h("slot", { key: '99c8dce52dde7a85c2dd7423d08875b9a5ab4dfe', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'de5810f9b9a3db9c2fb81a59ac3dda261079b81f', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '911d2c6e0710ecc5f438fba15ace454e2d43b2d1', class: {
+        return (h(Host, { key: 'a23874893887060f9581859334bd1a21603a46bb', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {