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

package/dist/esm/z-card.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-Cam6wBSi.js';
+import { e as CardVariant } from './index-B2-dCTD2.js';
+
+const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
+
+const ZCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = undefined;
+        this.coverIcon = undefined;
+        this.showShadow = false;
+        this.clickable = false;
+        this.hasCoverImage = undefined;
+    }
+    componentWillLoad() {
+        this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
+    }
+    /**
+     * Template for a card without image cover.
+     * A colored background replaces the image and some data is moved over it.
+     */
+    renderColorCoverCard() {
+        return [
+            h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
+            h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
+        ];
+    }
+    /**
+     * Template for the content.
+     */
+    renderContent() {
+        return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
+    }
+    render() {
+        if (this.variant === CardVariant.TEXT) {
+            return h(Host, null, this.renderContent());
+        }
+        if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
+            return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
+                h("slot", { name: "cover" }),
+                this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
+            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContent()));
+        }
+        return h(Host, null, this.renderColorCoverCard());
+    }
+    get host() { return getElement(this); }
+};
+ZCard.style = stylesCss;
+
+export { ZCard as z_card };
+//# sourceMappingURL=z-card.entry.js.map
+
+//# sourceMappingURL=z-card.entry.js.map

package/dist/esm/z-card.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-card.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-card/styles.css?tag=z-card&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-card/index.js"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n  /* Override this var to change the cover's aspect ratio */\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n  margin: 0;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n}\n\n.actions {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n  margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import { Host, h } from \"@stencil/core\";\nimport { CardVariant } from \"../../beans\";\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\nexport class ZCard {\n    constructor() {\n        this.variant = undefined;\n        this.coverIcon = undefined;\n        this.showShadow = false;\n        this.clickable = false;\n        this.hasCoverImage = undefined;\n    }\n    componentWillLoad() {\n        this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n    }\n    /**\n     * Template for a card without image cover.\n     * A colored background replaces the image and some data is moved over it.\n     */\n    renderColorCoverCard() {\n        return [\n            h(\"div\", { class: \"cover-container\" }, h(\"div\", { class: \"color-cover\" }, h(\"div\", { class: \"cover-content\" }, h(\"slot\", { name: \"metadata\" }), h(\"slot\", { name: \"title\" })))),\n            h(\"div\", { class: \"content\" }, h(\"slot\", { name: \"text\" }), h(\"div\", { class: \"actions\" }, h(\"slot\", { name: \"action\" }))),\n        ];\n    }\n    /**\n     * Template for the content.\n     */\n    renderContent() {\n        return (h(\"div\", { class: \"content\" }, h(\"slot\", { name: \"metadata\" }), h(\"slot\", { name: \"title\" }), h(\"slot\", { name: \"text\" }), h(\"div\", { class: \"actions\" }, h(\"slot\", { name: \"action\" }))));\n    }\n    render() {\n        if (this.variant === CardVariant.TEXT) {\n            return h(Host, null, this.renderContent());\n        }\n        if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n            return (h(Host, null, h(\"div\", { class: \"cover-container\" }, this.hasCoverImage && [\n                h(\"slot\", { name: \"cover\" }),\n                this.variant !== CardVariant.OVERLAY && this.coverIcon && h(\"z-icon\", { name: this.coverIcon }),\n            ], !this.hasCoverImage && h(\"div\", { class: \"color-cover\" })), this.renderContent()));\n        }\n        return h(Host, null, this.renderColorCoverCard());\n    }\n    static get is() { return \"z-card\"; }\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            \"variant\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"CardVariant\",\n                    \"resolved\": \"CardVariant.BORDER | CardVariant.OVERLAY | CardVariant.SHADOW | CardVariant.TEXT\",\n                    \"references\": {\n                        \"CardVariant\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::CardVariant\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Card variant.\\nCan be one of \\\"text\\\", \\\"border\\\", \\\"shadow\\\", \\\"overlay\\\".\\nLeave it undefined for the default card.\"\n                },\n                \"attribute\": \"variant\",\n                \"reflect\": true\n            },\n            \"coverIcon\": {\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\": \"Name of the icon to place over the image cover\"\n                },\n                \"attribute\": \"cover-icon\",\n                \"reflect\": false\n            },\n            \"showShadow\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Enable shadow. Default: false.\"\n                },\n                \"attribute\": \"show-shadow\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"clickable\": {\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\": \"Enable \\\"clickable\\\" styles like hover background and cursor, focus shadow on the whole card, etc.\"\n                },\n                \"attribute\": \"clickable\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"hasCoverImage\": {}\n        };\n    }\n    static get elementRef() { return \"host\"; }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,ypIAAypI;;MCiB9pI,KAAK,GAAA,MAAA;AACd,IAAA,WAAA,CAAA,OAAA,EAAA;;AACI,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,aAAa,GAAG,SAAS;AACjC;IACD,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI;;AAE3E;;;AAGG;IACH,oBAAoB,GAAA;QAChB,OAAO;YACH,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;AAC/K,YAAA,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;SAC7H;;AAEL;;AAEG;IACH,aAAa,GAAA;AACT,QAAA,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;;IAErM,MAAM,GAAA;QACF,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACnC,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;;AAE9C,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC5D,QAAQ,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,IAAI,CAAC,aAAa,IAAI;gBAC/E,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gBAC5B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;aAClG,EAAE,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;;QAExF,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;;;;;;;;","x_google_ignoreList":[0,1]}

package/dist/esm/z-carousel.entry.js

@@ -0,0 +1,180 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Cam6wBSi.js';
+import { f as CarouselArrowsPosition, g as CarouselProgressMode, B as ButtonVariant } from './index-B2-dCTD2.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction=\"next\"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position=\"bottom\"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}";
+
+const ZCarousel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indexChange = createEvent(this, "indexChange", 7);
+        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
+        this.scrollingTo = null;
+        this.isLoading = undefined;
+        this.label = undefined;
+        this.single = false;
+        this.arrowsPosition = undefined;
+        this.progressMode = undefined;
+        this.fixedArrows = true;
+        this.ghostLoadingHeight = 100;
+        this.infinite = false;
+        this.current = 0;
+        this.items = undefined;
+        this.highlightedIndicator = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
+    }
+    onIndexChange() {
+        this.indexChange.emit({ currentItem: this.current });
+    }
+    onSingleModeChange() {
+        if (this.single && !this.intersectionObserver) {
+            this.setIntersectionObserver();
+        }
+    }
+    onInfiniteModeChange() {
+        this.checkNavigationValidity();
+    }
+    /**
+     * Set an intersection observer to:
+     * - highlight the indicator of the intersecting item during scroll
+     * - set the current item to the last intersecting item
+     */
+    setIntersectionObserver() {
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            const entry = entries.find(({ isIntersecting }) => isIntersecting);
+            if (!entry) {
+                return;
+            }
+            const entryIndex = this.items.findIndex((item) => item === entry.target);
+            this.highlightedIndicator = entryIndex;
+            /* skip setting the current item if intersection has been triggered by a programmatic scroll
+            (@see `goTo` function) and the final index has not been reached */
+            if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
+                return;
+            }
+            this.scrollingTo = null;
+            this.current = entryIndex;
+        }, {
+            root: this.itemsContainer,
+            threshold: 0.5,
+        });
+        this.items.forEach((element) => this.intersectionObserver.observe(element));
+    }
+    /** Update items' list and check conditions to allow navigation */
+    onSlotChange() {
+        this.items = Array.from(this.host.children);
+        this.checkNavigationValidity();
+        this.setIntersectionObserver();
+        this.goTo(this.current);
+    }
+    onPrev() {
+        if (this.single) {
+            this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));
+            return;
+        }
+        this.itemsContainer.scrollBy({
+            left: this.infinite && this.itemsContainer.scrollLeft == 0
+                ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+                : -this.itemsContainer.clientWidth / 2,
+            behavior: "smooth",
+        });
+    }
+    onNext() {
+        if (this.single) {
+            const next = this.infinite && this.current + 1 > this.items.length - 1
+                ? 0
+                : Math.min(this.current + 1, this.items.length - 1);
+            return this.goTo(next);
+        }
+        this.itemsContainer.scrollBy({
+            left: this.infinite &&
+                this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+                ? -this.itemsContainer.scrollWidth
+                : this.itemsContainer.clientWidth / 2,
+            behavior: "smooth",
+        });
+    }
+    /**
+     * Check if navigation buttons can be enabled and set the related local states.
+     */
+    checkNavigationValidity() {
+        if (this.single) {
+            this.canNavigatePrev = this.current > 0;
+            this.canNavigateNext = this.current < this.items.length - 1;
+            return;
+        }
+        this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;
+        this.canNavigateNext =
+            this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
+    }
+    /**
+     * Check if footer has to be rendered.
+     */
+    canShowFooter() {
+        if (!this.canNavigatePrev && !this.canNavigateNext) {
+            return false;
+        }
+        return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
+            this.progressMode === CarouselProgressMode.DOTS ||
+            this.progressMode === CarouselProgressMode.NUMBERS);
+    }
+    /**
+     * Set current item to passed index.
+     * @param index Index to set
+     */
+    goTo(index) {
+        if (this.current === index) {
+            return;
+        }
+        this.scrollingTo = index;
+        const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);
+        // the scroll will trigger the IntersectionObserver and set the current item
+        this.itemsContainer.scroll({
+            left,
+            behavior: "smooth",
+        });
+    }
+    /** Check if navigation of at least one direction is enabled */
+    get canNavigate() {
+        return this.canNavigatePrev || this.canNavigateNext;
+    }
+    setupItems() {
+        this.items = Array.from(this.host.children);
+        this.items.forEach((item) => {
+            item.setAttribute("aria-roledescription", "slide");
+        });
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);
+        this.setupItems();
+        if (this.single) {
+            this.setIntersectionObserver();
+        }
+        this.checkNavigationValidity();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        if (this.isLoading) {
+            return (h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-3-sb z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null))));
+        }
+        return (h(Host, null, h("div", { class: "z-carousel-container", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "z-carousel-title heading-3-sb" }, this.label), h("div", { class: "z-carousel-wrapper" }, h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.SECONDARY, "data-direction": "prev", icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" }), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite", ref: (el) => (this.itemsContainer = el) }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })), h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.SECONDARY, "data-direction": "next", icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.TERTIARY, icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_, index) => (h("button", { type: "button", class: { current: this.highlightedIndicator === index }, "aria-label": this.highlightedIndicator === index ? "Elemento corrente" : `Spostati all'elemento ${index + 1}`, onClick: () => this.goTo(index) }))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-1" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.TERTIARY, icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "current": ["onIndexChange"],
+        "single": ["onSingleModeChange"],
+        "infinite": ["onInfiniteModeChange"]
+    }; }
+};
+ZCarousel.style = stylesCss;
+
+export { ZCarousel as z_carousel };
+//# sourceMappingURL=z-carousel.entry.js.map
+
+//# sourceMappingURL=z-carousel.entry.js.map

package/dist/esm/z-carousel.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-carousel.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-carousel/styles.css?tag=z-carousel&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-carousel/index.js"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-carousel-gutter: 0;\n  --z-carousel-items-shadow: ;\n}\n\n:host([single]) {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n:host([single]) .z-carousel-container {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.z-carousel-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.z-carousel-title {\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-wrapper {\n  position: relative;\n}\n\n.z-carousel-items-container {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  margin: 0;\n  box-shadow: var(--z-carousel-items-shadow, none);\n  column-gap: var(--z-carousel-gutter);\n  list-style: none;\n  -ms-overflow-style: none; /* IE and Edge */\n  overflow-x: scroll;\n  padding-inline-start: 0;\n  scroll-behavior: smooth;\n  scroll-snap-type: x mandatory;\n\n  /* Hide scrollbar for IE, Edge and Firefox */\n  scrollbar-width: none; /* Firefox */\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.z-carousel-items-container::-webkit-scrollbar {\n  display: none;\n}\n\n.z-carousel-items-container ::slotted(*) {\n  scroll-snap-align: center;\n}\n\n.z-carousel-navigation-arrow[hidden] {\n  display: none;\n}\n\n.z-carousel-navigation-arrow[data-direction] {\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  transform: translateY(50%);\n}\n\n.z-carousel-navigation-arrow[data-direction=\"next\"] {\n  right: 0;\n}\n\n:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow {\n  display: none;\n}\n\n.z-carousel-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host([arrows-position=\"bottom\"]) .z-carousel-footer {\n  margin-top: calc(var(--space-unit) * 0.75);\n}\n\n.z-carousel-footer .numbers-progress,\n.z-carousel-footer .dots-progress {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.z-carousel-footer .dots-progress {\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-footer .dots-progress button {\n  display: flex;\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  align-items: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface03);\n  border-radius: calc(var(--space-unit) * 3);\n}\n\n.z-carousel-footer .dots-progress button.current {\n  background-color: var(--color-primary01);\n}\n\n.z-carousel-footer .dots-progress button:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-carousel-footer .dots-progress button:not(.current) {\n  cursor: pointer;\n}\n\n.z-carousel-footer .numbers-progress {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress {\n  margin-top: var(--space-unit);\n}\n\n.z-carousel-footer .numbers-progress .current {\n  font-weight: var(--font-sb);\n}\n\n@media (min-width: 768px) {\n  :host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]) {\n    display: flex;\n  }\n}\n","import { Host, h } from \"@stencil/core\";\nimport { ButtonVariant, CarouselArrowsPosition, CarouselProgressMode } from \"../../beans\";\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\nexport class ZCarousel {\n    constructor() {\n        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n        this.scrollingTo = null;\n        this.isLoading = undefined;\n        this.label = undefined;\n        this.single = false;\n        this.arrowsPosition = undefined;\n        this.progressMode = undefined;\n        this.fixedArrows = true;\n        this.ghostLoadingHeight = 100;\n        this.infinite = false;\n        this.current = 0;\n        this.items = undefined;\n        this.highlightedIndicator = undefined;\n        this.canNavigatePrev = undefined;\n        this.canNavigateNext = undefined;\n    }\n    onIndexChange() {\n        this.indexChange.emit({ currentItem: this.current });\n    }\n    onSingleModeChange() {\n        if (this.single && !this.intersectionObserver) {\n            this.setIntersectionObserver();\n        }\n    }\n    onInfiniteModeChange() {\n        this.checkNavigationValidity();\n    }\n    /**\n     * Set an intersection observer to:\n     * - highlight the indicator of the intersecting item during scroll\n     * - set the current item to the last intersecting item\n     */\n    setIntersectionObserver() {\n        this.intersectionObserver = new IntersectionObserver((entries) => {\n            const entry = entries.find(({ isIntersecting }) => isIntersecting);\n            if (!entry) {\n                return;\n            }\n            const entryIndex = this.items.findIndex((item) => item === entry.target);\n            this.highlightedIndicator = entryIndex;\n            /* skip setting the current item if intersection has been triggered by a programmatic scroll\n            (@see `goTo` function) and the final index has not been reached */\n            if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n                return;\n            }\n            this.scrollingTo = null;\n            this.current = entryIndex;\n        }, {\n            root: this.itemsContainer,\n            threshold: 0.5,\n        });\n        this.items.forEach((element) => this.intersectionObserver.observe(element));\n    }\n    /** Update items' list and check conditions to allow navigation */\n    onSlotChange() {\n        this.items = Array.from(this.host.children);\n        this.checkNavigationValidity();\n        this.setIntersectionObserver();\n        this.goTo(this.current);\n    }\n    onPrev() {\n        if (this.single) {\n            this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n            return;\n        }\n        this.itemsContainer.scrollBy({\n            left: this.infinite && this.itemsContainer.scrollLeft == 0\n                ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n                : -this.itemsContainer.clientWidth / 2,\n            behavior: \"smooth\",\n        });\n    }\n    onNext() {\n        if (this.single) {\n            const next = this.infinite && this.current + 1 > this.items.length - 1\n                ? 0\n                : Math.min(this.current + 1, this.items.length - 1);\n            return this.goTo(next);\n        }\n        this.itemsContainer.scrollBy({\n            left: this.infinite &&\n                this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n                ? -this.itemsContainer.scrollWidth\n                : this.itemsContainer.clientWidth / 2,\n            behavior: \"smooth\",\n        });\n    }\n    /**\n     * Check if navigation buttons can be enabled and set the related local states.\n     */\n    checkNavigationValidity() {\n        if (this.single) {\n            this.canNavigatePrev = this.current > 0;\n            this.canNavigateNext = this.current < this.items.length - 1;\n            return;\n        }\n        this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n        this.canNavigateNext =\n            this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n    }\n    /**\n     * Check if footer has to be rendered.\n     */\n    canShowFooter() {\n        if (!this.canNavigatePrev && !this.canNavigateNext) {\n            return false;\n        }\n        return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n            this.progressMode === CarouselProgressMode.DOTS ||\n            this.progressMode === CarouselProgressMode.NUMBERS);\n    }\n    /**\n     * Set current item to passed index.\n     * @param index Index to set\n     */\n    goTo(index) {\n        if (this.current === index) {\n            return;\n        }\n        this.scrollingTo = index;\n        const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n        // the scroll will trigger the IntersectionObserver and set the current item\n        this.itemsContainer.scroll({\n            left,\n            behavior: \"smooth\",\n        });\n    }\n    /** Check if navigation of at least one direction is enabled */\n    get canNavigate() {\n        return this.canNavigatePrev || this.canNavigateNext;\n    }\n    setupItems() {\n        this.items = Array.from(this.host.children);\n        this.items.forEach((item) => {\n            item.setAttribute(\"aria-roledescription\", \"slide\");\n        });\n    }\n    componentDidLoad() {\n        var _a, _b;\n        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), { passive: true });\n        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);\n        this.setupItems();\n        if (this.single) {\n            this.setIntersectionObserver();\n        }\n        this.checkNavigationValidity();\n    }\n    disconnectedCallback() {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n    }\n    render() {\n        if (this.isLoading) {\n            return (h(\"div\", { class: \"z-carousel-container\" }, this.label && h(\"div\", { class: \"heading-3-sb z-carousel-title\" }, this.label), h(\"div\", { style: { height: `${this.ghostLoadingHeight}px` } }, h(\"z-ghost-loading\", null))));\n        }\n        return (h(Host, null, h(\"div\", { class: \"z-carousel-container\", \"aria-roledescription\": \"carousel\", \"aria-label\": this.label || \"Carousel\" }, this.label && h(\"div\", { class: \"z-carousel-title heading-3-sb\" }, this.label), h(\"div\", { class: \"z-carousel-wrapper\" }, h(\"z-button\", { class: \"z-carousel-navigation-arrow\", variant: ButtonVariant.SECONDARY, \"data-direction\": \"prev\", icon: \"arrow-left\", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\" }), h(\"ul\", { class: \"z-carousel-items-container\", \"aria-atomic\": \"false\", \"aria-live\": \"polite\", ref: (el) => (this.itemsContainer = el) }, h(\"slot\", { onSlotchange: this.onSlotChange.bind(this) })), h(\"z-button\", { class: \"z-carousel-navigation-arrow\", variant: ButtonVariant.SECONDARY, \"data-direction\": \"next\", icon: \"arrow-right\", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\" }))), this.canShowFooter() && (h(\"div\", { class: \"z-carousel-footer\" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h(\"z-button\", { class: \"z-carousel-navigation-arrow\", variant: ButtonVariant.TERTIARY, icon: \"arrow-left\", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, ariaLabel: this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h(\"div\", { class: \"dots-progress\" }, this.items.map((_, index) => (h(\"button\", { type: \"button\", class: { current: this.highlightedIndicator === index }, \"aria-label\": this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`, onClick: () => this.goTo(index) }))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h(\"div\", { class: \"numbers-progress interactive-1\" }, h(\"span\", { class: \"current\" }, this.current + 1), h(\"span\", null, \"di\"), h(\"span\", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h(\"z-button\", { class: \"z-carousel-navigation-arrow\", variant: ButtonVariant.TERTIARY, icon: \"arrow-right\", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, ariaLabel: this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\" }))))));\n    }\n    static get is() { return \"z-carousel\"; }\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            \"isLoading\": {\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\": \"The z-carousel is on loading state\"\n                },\n                \"attribute\": \"is-loading\",\n                \"reflect\": false\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\": \"The z-carousel title\"\n                },\n                \"attribute\": \"label\",\n                \"reflect\": false\n            },\n            \"single\": {\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\": \"Shows only one content at a time\"\n                },\n                \"attribute\": \"single\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"arrowsPosition\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"CarouselArrowsPosition\",\n                    \"resolved\": \"CarouselArrowsPosition.BOTTOM | CarouselArrowsPosition.OVER\",\n                    \"references\": {\n                        \"CarouselArrowsPosition\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::CarouselArrowsPosition\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Arrow buttons position\"\n                },\n                \"attribute\": \"arrows-position\",\n                \"reflect\": true\n            },\n            \"progressMode\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"CarouselProgressMode\",\n                    \"resolved\": \"CarouselProgressMode.DOTS | CarouselProgressMode.NUMBERS\",\n                    \"references\": {\n                        \"CarouselProgressMode\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::CarouselProgressMode\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Progress indicator type. Only available for `single` mode\"\n                },\n                \"attribute\": \"progress-mode\",\n                \"reflect\": false\n            },\n            \"fixedArrows\": {\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 navigation arrow buttons over the items are always visible or only on mouse hover.\\nIf set to `false`, the arrows will not be visible on mobile.\\nOnly meaningful with `arrowsPosition` set to `OVER`.\"\n                },\n                \"attribute\": \"fixed-arrows\",\n                \"reflect\": true,\n                \"defaultValue\": \"true\"\n            },\n            \"ghostLoadingHeight\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The height of the ghost loader (only visible when `isLoading` is set to `true`)\"\n                },\n                \"attribute\": \"ghost-loading-height\",\n                \"reflect\": false,\n                \"defaultValue\": \"100\"\n            },\n            \"infinite\": {\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\": \"When enabled, navigating next the last item will go back to the first item and vice versa.\"\n                },\n                \"attribute\": \"infinite\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"current\": {},\n            \"items\": {},\n            \"highlightedIndicator\": {},\n            \"canNavigatePrev\": {},\n            \"canNavigateNext\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"indexChange\",\n                \"name\": \"indexChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted on index change and only in `single` mode.\"\n                },\n                \"complexType\": {\n                    \"original\": \"{currentItem: number}\",\n                    \"resolved\": \"{ currentItem: number; }\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"host\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"current\",\n                \"methodName\": \"onIndexChange\"\n            }, {\n                \"propName\": \"single\",\n                \"methodName\": \"onSingleModeChange\"\n            }, {\n                \"propName\": \"infinite\",\n                \"methodName\": \"onInfiniteModeChange\"\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/esm/z-chip.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cam6wBSi.js';
+import { k as ZChipType } from './index-B2-dCTD2.js';
+
+const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
+
+const ZChip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.interactiveIconClick = createEvent(this, "interactiveIconClick", 7);
+        this.icon = undefined;
+        this.type = ZChipType.DEFAULT;
+        this.interactiveIcon = undefined;
+        this.disabled = false;
+        this.ariaLabel = "";
+    }
+    render() {
+        return (h("div", { key: '0c1d69ed8078ff340f797d27d2b74798471c001b', class: {
+                "z-chip-container": true,
+                "z-chip-interactive": !!this.interactiveIcon,
+                [this.type]: true,
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'baa00891b0130541f3a820a08678d2f1eef894b7', name: this.icon }), h("slot", { key: 'd49c8dc5643a7f42f62ab086f9ae97da18aa2561' }), this.interactiveIcon && (h("button", { key: '970f2ccfd3cf3718627e8aec7bfe06d957694030', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '68c899a4e14a204eaac9fc7d2be37dfd5af1b087', class: "interactive-icon", name: this.interactiveIcon })))));
+    }
+    get el() { return getElement(this); }
+};
+ZChip.style = stylesCss;
+
+export { ZChip as z_chip };
+//# sourceMappingURL=z-chip.entry.js.map
+
+//# sourceMappingURL=z-chip.entry.js.map

package/dist/esm/z-chip.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-chip.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-chip/index.js"],"sourcesContent":[":host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-default-text);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n  font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n  padding: 0;\n  border: none;\n  margin-left: var(--space-unit);\n  background-color: transparent;\n  cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n  color: var(--color-primary01);\n  fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n  line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n  line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n  line-height: 36px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    font-size: 12px;\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n    line-height: 32px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n    line-height: 28px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n    line-height: 24px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n}\n","import { h } from \"@stencil/core\";\nimport { ZChipType } from \"../../beans\";\nexport class ZChip {\n    constructor() {\n        this.icon = undefined;\n        this.type = ZChipType.DEFAULT;\n        this.interactiveIcon = undefined;\n        this.disabled = false;\n        this.ariaLabel = \"\";\n    }\n    render() {\n        return (h(\"div\", { key: '0c1d69ed8078ff340f797d27d2b74798471c001b', class: {\n                \"z-chip-container\": true,\n                \"z-chip-interactive\": !!this.interactiveIcon,\n                [this.type]: true,\n            }, \"aria-disabled\": this.disabled }, this.icon && h(\"z-icon\", { key: 'baa00891b0130541f3a820a08678d2f1eef894b7', name: this.icon }), h(\"slot\", { key: 'd49c8dc5643a7f42f62ab086f9ae97da18aa2561' }), this.interactiveIcon && (h(\"button\", { key: '970f2ccfd3cf3718627e8aec7bfe06d957694030', type: \"button\", onClick: () => this.interactiveIconClick.emit(), \"aria-label\": this.ariaLabel, disabled: this.disabled }, h(\"z-icon\", { key: '68c899a4e14a204eaac9fc7d2be37dfd5af1b087', class: \"interactive-icon\", name: this.interactiveIcon })))));\n    }\n    static get is() { return \"z-chip\"; }\n    static get encapsulation() { return \"scoped\"; }\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\": \"Non interactive icon\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false\n            },\n            \"type\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ZChipType\",\n                    \"resolved\": \"ZChipType.DEFAULT | ZChipType.MEDIUM | ZChipType.SMALL\",\n                    \"references\": {\n                        \"ZChipType\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::ZChipType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"z-chip size type, can be default, medium or small\"\n                },\n                \"attribute\": \"type\",\n                \"reflect\": true,\n                \"defaultValue\": \"ZChipType.DEFAULT\"\n            },\n            \"interactiveIcon\": {\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\": \"z-chip interactive icon\"\n                },\n                \"attribute\": \"interactive-icon\",\n                \"reflect\": true\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"set z-chip as disabled\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": true,\n                \"defaultValue\": \"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\": \"z-chip aria-label string\"\n                },\n                \"attribute\": \"aria-label\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"interactiveIconClick\",\n                \"name\": \"interactiveIconClick\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"click on interactive icon\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,+jFAA+jF;;MCEpkF,KAAK,GAAA,MAAA;AACd,IAAA,WAAA,CAAA,OAAA,EAAA;;;AACI,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACrB,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO;AAC7B,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;AACtB;IACD,MAAM,GAAA;QACF,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;AACnE,gBAAA,kBAAkB,EAAE,IAAI;AACxB,gBAAA,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;AAC5C,gBAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;aACpB,EAAE,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,EAAE,IAAI,CAAC,eAAe,KAAK,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,CAAC;;;;;;;;","x_google_ignoreList":[0,1]}