npm - @zanichelli/albe-web-components - Versions diffs - 14.5.1 → 14.5.2-rc-anchor-navigation - Mend

@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1744) hide show

package/dist/components/z-file.js CHANGED Viewed

@@ -42,7 +42,7 @@ const ZFile$1 = /*@__PURE__*/ proxyCustomElement(class ZFile extends HTMLElement
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'fc115e09bac93434e5c460602d91d75034156d58' }, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'e834fa8689c5164cb51de5353a14d21495d5bfe5', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '037442876903b11acfa1f65acb3a65ccde8c2161', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '03c2efd6f2abf7ba920eb9ac47f268ade6ec1404' }, this.allowPopover && (h("z-popover", { key: 'f916e0f4aed0a9c7d2a8ff59ee0a073baff02ad5', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '1f364c21b8bd45ff52c23a40df45ee1684271122', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '0c69ec654a4fb7f251bdd904ffec476c911e545a', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'b71ea54ee7156bfb324f7d5f2fa71d9b50c167bf', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     get el() { return this; }
     static get style() { return ZFileStyle0; }

package/dist/components/z-file.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-file.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,uYAAuY,CAAC;AAC1Z,oBAAe,SAAS;;MCSXA,OAAK;;;;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,gBAAgB,EAAE;YACrE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;KACtB;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,YAAY,KAChB,~~iBACE~~,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI,IAEjB,~~YAAM~~,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb,EACD,+DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO,IAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZFile"],"sources":["src/components/file-upload/z-file/styles.css?tag=z-file&encapsulation=scoped","src/components/file-upload/z-file/index.tsx"],"sourcesContent":[":host {\n position: relative;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-popover {\n z-index: 10;\n}\n\n:host > z-popover > .tooltip-content {\n white-space: nowrap;\n}\n\n:host > z-chip span {\n display: block;\n overflow: hidden;\n max-width: 250px;\n letter-spacing: 0.32px;\n line-height: 1.33;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","import {Component, h, EventEmitter, ~~Event~~, ~~Element~~, ~~Host~~, State, ~~Listen, Prop~~} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {tabletBreakpoint} from \"../../../constants/breakpoints\";\n\n@Component({\n tag: \"z-file\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFile {\n private icon: HTMLElement;\n\n private ellipsis?: HTMLSpanElement;\n\n private chip?: HTMLZChipElement;\n\n /** File chip id /\n @Prop()\n fileNumber: number;\n\n /* File name /\n @Prop()\n fileName: string;\n\n @State()\n allowPopover = false;\n\n @State()\n popoverVisible = false;\n\n @Element() el: HTMLZFileElement;\n\n /* Emitted when a z-file component is removed from the DOM */\n @Event()\n removeFile: EventEmitter;\n\n private removeFileHandler(): void {\n this.removeFile.emit({fileName: this.fileName});\n this.el.remove();\n }\n\n @Listen(\"mouseover\")\n onMouseOver(): void {\n this.popoverVisible = true;\n }\n\n @Listen(\"mouseleave\")\n onMouseLeave(): void {\n this.popoverVisible = false;\n }\n\n @Listen(\"interactiveIconClick\")\n onInteractiveIconClick(): void {\n this.removeFileHandler();\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {\n this.allowPopover = true;\n }\n\n this.icon?.focus?.();\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n render(): HTMLZFileElement {\n return (\n <Host>\n {this.allowPopover && (\n <z-popover\n open={this.popoverVisible}\n position={PopoverPosition.AUTO}\n bindTo={this.chip}\n >\n <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n </z-popover>\n )}\n <z-chip\n ref={(el) => (this.chip = el as HTMLZChipElement)}\n id={`chip-${this.fileNumber}`}\n interactiveIcon=\"multiply-circled\"\n type={ZChipType.DEFAULT}\n >\n <span\n ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n tabIndex={-1}\n >\n {this.fileName}\n </span>\n </z-chip>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-file.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,uYAAuY,CAAC;AAC1Z,oBAAe,SAAS;;MCSXA,OAAK;;;;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,gBAAgB,EAAE;YACrE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;KACtB;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,YAAY,KAChB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI,IAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb,EACD,+DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO,IAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZFile"],"sources":["src/components/file-upload/z-file/styles.css?tag=z-file&encapsulation=scoped","src/components/file-upload/z-file/index.tsx"],"sourcesContent":[":host {\n position: relative;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-popover {\n z-index: 10;\n}\n\n:host > z-popover > .tooltip-content {\n white-space: nowrap;\n}\n\n:host > z-chip span {\n display: block;\n overflow: hidden;\n max-width: 250px;\n letter-spacing: 0.32px;\n line-height: 1.33;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {tabletBreakpoint} from \"../../../constants/breakpoints\";\n\n@Component({\n tag: \"z-file\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFile {\n private icon: HTMLElement;\n\n private ellipsis?: HTMLSpanElement;\n\n private chip?: HTMLZChipElement;\n\n /** File chip id /\n @Prop()\n fileNumber: number;\n\n /* File name /\n @Prop()\n fileName: string;\n\n @State()\n allowPopover = false;\n\n @State()\n popoverVisible = false;\n\n @Element() el: HTMLZFileElement;\n\n /* Emitted when a z-file component is removed from the DOM */\n @Event()\n removeFile: EventEmitter;\n\n private removeFileHandler(): void {\n this.removeFile.emit({fileName: this.fileName});\n this.el.remove();\n }\n\n @Listen(\"mouseover\")\n onMouseOver(): void {\n this.popoverVisible = true;\n }\n\n @Listen(\"mouseleave\")\n onMouseLeave(): void {\n this.popoverVisible = false;\n }\n\n @Listen(\"interactiveIconClick\")\n onInteractiveIconClick(): void {\n this.removeFileHandler();\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {\n this.allowPopover = true;\n }\n\n this.icon?.focus?.();\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n render(): HTMLZFileElement {\n return (\n <Host>\n {this.allowPopover && (\n <z-popover\n open={this.popoverVisible}\n position={PopoverPosition.AUTO}\n bindTo={this.chip}\n >\n <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n </z-popover>\n )}\n <z-chip\n ref={(el) => (this.chip = el as HTMLZChipElement)}\n id={`chip-${this.fileNumber}`}\n interactiveIcon=\"multiply-circled\"\n type={ZChipType.DEFAULT}\n >\n <span\n ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n tabIndex={-1}\n >\n {this.fileName}\n </span>\n </z-chip>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-info-box.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZInfoBox$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoBox extends HTMLE
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: 'ca557ef255dac8cd5e349193e1a737ebbbc89e67', id: this.boxid }, h("slot", { key: '1be32b81bde96ac8f548a4bd84698ddbbc2485f1', name: "content" }), this.isclosable && (h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '52cbca4a972a1fb53f65bf86428ee23f8933b616', id: this.boxid }, h("slot", { key: '3b83aa34338ceb6c11f74a316bf50dd77bd0c662', name: "content" }), this.isclosable && (h("z-icon", { key: '2b3f8bbb5ce69105bddac3253047199028f4e2c0', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get style() { return ZInfoBoxStyle0; }
 }, [1, "z-info-box", {

package/dist/components/z-info-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-info-box.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,uXAAuX,CAAC;AAC1Y,uBAAe,SAAS;;MCSXA,UAAQ;;;;;;;0BAON,IAAI;;IAMT,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,QACE,4DAAK,EAAE,EAAE,IAAI,CAAC,KAAK,IACjB,6DAAM,IAAI,EAAC,SAAS,GAAG,EACtB,IAAI,CAAC,UAAU,KACd,~~cACE,~~IAAI,EAAC,UAAU,iBACH,cAAc,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GACtC,CACH,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZInfoBox"],"sources":["src/components/~~notification/~~z-info-box/styles.css?tag=z-info-box&encapsulation=shadow","src/components/~~notification/~~z-info-box/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: flex;\n width: inherit;\n padding: calc(var(--space-unit) * 2);\n background: var(--color-primary03);\n border-radius: var(--border-radius);\n}\n\n:host > div > slot {\n color: var(--color-default-text);\n font-size: 14px;\n}\n\n:host > div > z-icon {\n margin-left: calc(var(--space-unit) * 2);\n cursor: pointer;\n fill: var(--color-primary01);\n}\n","import {Component, ~~Prop~~, h, ~~Event~~, ~~EventEmitter~~} from \"@stencil/core\";\n\n/*\n @slot content - set the info box content\n /\n@Component({\n tag: \"z-info-box\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoBox {\n /* info box unique id /\n @Prop()\n boxid: string;\n\n /* render close icon flag /\n @Prop()\n isclosable = true;\n\n /* emitted on close icon click */\n @Event()\n infoBoxClose: EventEmitter;\n\n private emitInfoBoxClose(): void {\n this.infoBoxClose.emit({boxid: this.boxid});\n }\n\n render(): HTMLDivElement {\n return (\n <div id={this.boxid}>\n <slot name=\"content\" />\n {this.isclosable && (\n <z-icon\n name=\"multiply\"\n data-action=\"infoBoxClose\"\n onClick={() => this.emitInfoBoxClose()}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-info-box.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,uXAAuX,CAAC;AAC1Y,uBAAe,SAAS;;MCSXA,UAAQ;;;;;;;0BAON,IAAI;;IAMT,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,QACE,4DAAK,EAAE,EAAE,IAAI,CAAC,KAAK,IACjB,6DAAM,IAAI,EAAC,SAAS,GAAG,EACtB,IAAI,CAAC,UAAU,KACd,+DACE,IAAI,EAAC,UAAU,iBACH,cAAc,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GACtC,CACH,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZInfoBox"],"sources":["src/components/z-info-box/styles.css?tag=z-info-box&encapsulation=shadow","src/components/z-info-box/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: flex;\n width: inherit;\n padding: calc(var(--space-unit) * 2);\n background: var(--color-primary03);\n border-radius: var(--border-radius);\n}\n\n:host > div > slot {\n color: var(--color-default-text);\n font-size: 14px;\n}\n\n:host > div > z-icon {\n margin-left: calc(var(--space-unit) * 2);\n cursor: pointer;\n fill: var(--color-primary01);\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n/*\n @slot content - set the info box content\n /\n@Component({\n tag: \"z-info-box\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoBox {\n /* info box unique id /\n @Prop()\n boxid: string;\n\n /* render close icon flag /\n @Prop()\n isclosable = true;\n\n /* emitted on close icon click */\n @Event()\n infoBoxClose: EventEmitter;\n\n private emitInfoBoxClose(): void {\n this.infoBoxClose.emit({boxid: this.boxid});\n }\n\n render(): HTMLDivElement {\n return (\n <div id={this.boxid}>\n <slot name=\"content\" />\n {this.isclosable && (\n <z-icon\n name=\"multiply\"\n data-action=\"infoBoxClose\"\n onClick={() => this.emitInfoBoxClose()}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/z-info-reveal.js CHANGED Viewed

@@ -49,7 +49,7 @@ const ZInfoReveal$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends
         }
     }
     render() {
-        return (h(Host, { key: '9760fea9358ffa3422f6dad090a03c30cd8b51f2', open: this.open }, h("button", { key: '52c39a04ac63089ecb493927b49dea106a94ee93', 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: '839afc7d65706951dcf0b5a56aaa69c6c56cc720', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '598c69722edab2f836962b3807e50a4a8a296aee' }), h("button", { key: '53c5f103f7bcca4bf1d6ccb8d4454459b1a82afd', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '506717510c3ab82f30efbfe70753af7bc277a29f', name: "multiply" })))));
+        return (h(Host, { key: '45471ff481d7ce13ff05da131b5de64fadaf68d9', open: this.open }, h("button", { key: '8677715bec503a1bd07f6df15932a98417599495', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '48e14ecbee56d2dc6b9b297f8daa171c34c2a98d', name: this.icon }), this.label && h("span", { key: '89e72867433abd07cb334120558ccdc02a5bbb81', class: "z-info-reveal-label" }, this.label)), h("div", { key: '06268f048b3d6244f940900ca114dfcad5417849', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '3698cbc239ab16b04226e7e9f1619014500b30f6' }), h("button", { key: '7e03364aeb76b404d4ed78d640de500b95f68769', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '524131a6b9b100729c10657c778bc6bb1daf6946', name: "multiply" })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-info-reveal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-info-reveal.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,4gFAA4gF,CAAC;AAC/hF,0BAAe,SAAS;;MCaXA,aAAW;;;;;oBAGd,mBAAmB;wBAQK,kBAAkB,CAAC,YAAY;;yBAQnD,4BAA4B;oBAInB,WAAW,CAAC,GAAG;oBAI7B,KAAK;;;;;IAYZ,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;;QAEvD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;KACnD;;;;IAKO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;;;;IAKO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,mBACrC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC7B,qBAAqB,IAElC,IAAI,CAAC,IAAI,IAAI,~~cAAQ,~~IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,KAAK,IAAI,~~YAAM~~,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,EACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAElB,8DAAa,EACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B,IAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZInfoReveal"],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint /\n --trigger-size: 44px;\n\n position: relative;\n}\n\n:host {\n box-sizing: border-box;\n}\n\nbutton {\n --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n font-family: inherit;\n letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-info-reveal-trigger {\n min-width: var(--trigger-size);\n height: var(--trigger-size);\n padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n background-color: var(--color-surface05);\n border-radius: var(--border-radius);\n color: var(--color-text-inverse);\n column-gap: var(--space-unit);\n font-weight: var(--font-sb);\n line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n --trigger-size: 36px;\n\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n --trigger-size: 32px;\n\n padding: var(--space-unit);\n font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n --z-icon-width: var(--trigger-icon-size);\n --z-icon-height: var(--trigger-icon-size);\n\n display: flex;\n fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n --trigger-icon-size: 18px;\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n --trigger-icon-size: 16px;\n}\n\n.z-info-reveal-panel {\n position: absolute;\n display: flex;\n width: var(--z-info-reveal-panel-width);\n height: fit-content;\n align-items: flex-start;\n padding: calc(var(--space-unit) * 1.5);\n background-color: var(--color-surface05);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-4);\n color: var(--color-text-inverse);\n column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n .z-info-reveal-panel {\n position: fixed;\n top: auto !important;\n bottom: auto !important;\n left: var(--grid-margin) !important;\n width: calc(100% - (var(--grid-margin) * 2)) !important;\n max-width: none !important;\n margin-top: calc(var(--trigger-size) * -1);\n }\n}\n","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"],"version":3}
1	+ {"file":"z-info-reveal.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,4gFAA4gF,CAAC;AAC/hF,0BAAe,SAAS;;MCaXA,aAAW;;;;;oBAGd,mBAAmB;wBAQK,kBAAkB,CAAC,YAAY;;yBAQnD,4BAA4B;oBAInB,WAAW,CAAC,GAAG;oBAI7B,KAAK;;;;;IAYZ,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;;QAEvD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;KACnD;;;;IAKO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;;;;IAKO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,mBACrC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC7B,qBAAqB,IAElC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,EACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAElB,8DAAa,EACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B,IAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZInfoReveal"],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint /\n --trigger-size: 44px;\n\n position: relative;\n}\n\n:host {\n box-sizing: border-box;\n}\n\nbutton {\n --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n font-family: inherit;\n letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-info-reveal-trigger {\n min-width: var(--trigger-size);\n height: var(--trigger-size);\n padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n background-color: var(--color-surface05);\n border-radius: var(--border-radius);\n color: var(--color-text-inverse);\n column-gap: var(--space-unit);\n font-weight: var(--font-sb);\n line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n --trigger-size: 36px;\n\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n --trigger-size: 32px;\n\n padding: var(--space-unit);\n font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n --z-icon-width: var(--trigger-icon-size);\n --z-icon-height: var(--trigger-icon-size);\n\n display: flex;\n fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n --trigger-icon-size: 18px;\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n --trigger-icon-size: 16px;\n}\n\n.z-info-reveal-panel {\n position: absolute;\n display: flex;\n width: var(--z-info-reveal-panel-width);\n height: fit-content;\n align-items: flex-start;\n padding: calc(var(--space-unit) * 1.5);\n background-color: var(--color-surface05);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-4);\n color: var(--color-text-inverse);\n column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n .z-info-reveal-panel {\n position: fixed;\n top: auto !important;\n bottom: auto !important;\n left: var(--grid-margin) !important;\n width: calc(100% - (var(--grid-margin) * 2)) !important;\n max-width: none !important;\n margin-top: calc(var(--trigger-size) * -1);\n }\n}\n","import {Component, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/*\n Info reveal component.\n \n @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n /\n@Component({\n tag: \"z-info-reveal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoReveal {\n /* Name of the icon for the trigger button /\n @Prop()\n icon? = \"informationsource\";\n\n /\n The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n * The panel will grow in the opposite direction of the position.\n * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n /\n @Prop({reflect: true})\n position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n /* Label of the trigger button. /\n @Prop()\n label?: string;\n\n /* Aria label of the trigger button. It will be only used when `label` prop is empty. /\n @Prop()\n ariaLabel = \"Apri pannello informazioni\";\n\n /* Size of the trigger button /\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n /* Whether the info panel is open. /\n @State()\n open = false;\n\n @Element() host: HTMLZInfoRevealElement;\n\n private panel: HTMLDivElement;\n\n /\n Adjust the position of the info panel to prevent exiting the viewport.\n /\n @Watch(\"position\")\n @Watch(\"open\")\n @Listen(\"resize\", {target: \"window\", passive: true})\n adjustPanelPosition(): void {\n if (!this.open \|\| !this.panel) {\n return;\n }\n\n const rect = this.host.getBoundingClientRect();\n const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n const pageWidth = document.documentElement.offsetWidth;\n // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n const availableSpace = Math.round(\n (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n );\n this.panel.style.maxWidth = `${availableSpace}px`;\n }\n\n /\n Toggle the open state of the info panel.\n /\n private togglePanel(): void {\n this.open = !this.open;\n }\n\n /\n Close the info panel.\n */\n private closePanel(): void {\n this.open = false;\n }\n\n @Listen(\"keydown\", {target: \"window\", capture: true})\n handleEscapeKey(event: KeyboardEvent): void {\n if (event.key === \"Escape\" && this.open) {\n this.closePanel();\n }\n }\n\n render(): HTMLZInfoRevealElement {\n return (\n <Host open={this.open}>\n <button\n class=\"z-info-reveal-trigger\"\n type=\"button\"\n onClick={this.togglePanel.bind(this)}\n aria-label={!this.label ? this.ariaLabel : undefined}\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-controls=\"z-info-reveal-panel\"\n >\n {this.icon && <z-icon name={this.icon} />}\n {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n </button>\n <div\n class=\"z-info-reveal-panel\"\n id=\"z-info-reveal-panel\"\n ref={(el) => (this.panel = el)}\n hidden={!this.open}\n >\n <slot></slot>\n <button\n class=\"z-info-reveal-close\"\n type=\"button\"\n onClick={this.closePanel.bind(this)}\n aria-label=\"Chiudi pannello informazioni\"\n >\n <z-icon name=\"multiply\" />\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-logo.js CHANGED Viewed

@@ -23,7 +23,7 @@ const ZLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZLogo extends HTMLElement
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: 'd9975127a15315e31fe4303eb4f0d76e40a1d885', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '2faf5f56df6dbfff397a42f15f18b496e407da11', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get style() { return ZLogoStyle0; }
 }, [1, "z-logo", {

package/dist/components/z-logo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-logo.js","mappings":";;AAAA,MAAM,SAAS,GAAG,k1IAAk1I,CAAC;AACr2I,oBAAe,SAAS;;MCMXA,OAAK;;;;;;;;;;;;IAyBhB,MAAM;QACJ,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;SACzD;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;SAC5D;QAED,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAC,IAEjC,IAAI,CAAC,IAAI,IACR,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,OAAO,IAE7C,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACzB,KAEJ,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5B,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZLogo"],"sources":["src/components/~~logo/~~z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/~~logo/~~z-logo/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 255px;\n height: 64px;\n vertical-align: top;\n}\n\nimg {\n display: block;\n width: 100%;\n height: 100%;\n margin: auto;\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n\na {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n:host(.mobile) {\n width: 31px;\n height: 40px;\n}\n\n:host(.mobile) img {\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n","import {Component, ~~Prop~~, ~~Host~~, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-logo\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZLogo {\n /** image width /\n @Prop()\n width?: number;\n\n /* image height /\n @Prop()\n height?: number;\n\n /* alternative image text /\n @Prop()\n imageAlt?: string;\n\n /* link url (optional) /\n @Prop()\n link?: string;\n\n /* link target: true means _blank, false means _self /\n @Prop()\n targetBlank?: boolean;\n\n /* if true, the mobile logo is displayed, otherwise the desktop one */\n @Prop()\n mobileLogo?: boolean;\n\n render(): HTMLZLogoElement {\n const style = {};\n\n if (this.width) {\n style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n }\n\n if (this.height) {\n style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n }\n\n return (\n <Host\n style={style}\n class={{mobile: !!this.mobileLogo}}\n >\n {this.link ? (\n <a\n href={this.link}\n target={this.targetBlank ? \"_blank\" : \"_self\"}\n >\n <img alt={this.imageAlt} />\n </a>\n ) : (\n <img alt={this.imageAlt} />\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-logo.js","mappings":";;AAAA,MAAM,SAAS,GAAG,k1IAAk1I,CAAC;AACr2I,oBAAe,SAAS;;MCMXA,OAAK;;;;;;;;;;;;IAyBhB,MAAM;QACJ,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;SACzD;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;SAC5D;QAED,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAC,IAEjC,IAAI,CAAC,IAAI,IACR,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,OAAO,IAE7C,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACzB,KAEJ,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5B,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZLogo"],"sources":["src/components/z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/z-logo/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 255px;\n height: 64px;\n vertical-align: top;\n}\n\nimg {\n display: block;\n width: 100%;\n height: 100%;\n margin: auto;\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n\na {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n:host(.mobile) {\n width: 31px;\n height: 40px;\n}\n\n:host(.mobile) img {\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-logo\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZLogo {\n /** image width /\n @Prop()\n width?: number;\n\n /* image height /\n @Prop()\n height?: number;\n\n /* alternative image text /\n @Prop()\n imageAlt?: string;\n\n /* link url (optional) /\n @Prop()\n link?: string;\n\n /* link target: true means _blank, false means _self /\n @Prop()\n targetBlank?: boolean;\n\n /* if true, the mobile logo is displayed, otherwise the desktop one */\n @Prop()\n mobileLogo?: boolean;\n\n render(): HTMLZLogoElement {\n const style = {};\n\n if (this.width) {\n style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n }\n\n if (this.height) {\n style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n }\n\n return (\n <Host\n style={style}\n class={{mobile: !!this.mobileLogo}}\n >\n {this.link ? (\n <a\n href={this.link}\n target={this.targetBlank ? \"_blank\" : \"_self\"}\n >\n <img alt={this.imageAlt} />\n </a>\n ) : (\n <img alt={this.imageAlt} />\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-menu-section.js CHANGED Viewed

@@ -48,7 +48,7 @@ const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection exten
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: '9afac5c30a1a957eca75b6c0b0efee330d9ea2ec', role: "menu", open: this.open }, h("button", { key: '9f0c3438436d4b035a37473f0f147d26ca4abc3c', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '918f29cb6a6ea8e47d5460c907686ec80930b2fd', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: '7261f7c68d7e097fe0a70e6f8c0b513958605dbd', role: "menu", open: this.open }, h("button", { key: '74fd64a789a7f9ea93ec118dc2978809e70c5312', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: 'b8e32ae6fc27571d5318eb71ceddea6d87ca3ffa', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '5500c12ff4f374564c03e887a69ceba287a8d577', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: 'ff66588a6fa8fe8968ec9d7e12d6fac3bb1bb45f', class: "items" }, h("slot", { key: 'de19fdba5a89f0a048b6f8e824feacaa80bbe3fc', name: "item", onSlotchange: this.checkContent.bind(this) })))));
     }
     get hostElement() { return this; }
     static get style() { return ZMenuSectionStyle0; }

package/dist/components/z-menu-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-menu-section.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,88DAA88D,CAAC;AACj+D,2BAAe,SAAS;;MCWXA,cAAY;;;;;;;;;;;IAqBf,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACrD;;IAID,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE;YAC9D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;;;;IAKO,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACjF;;;;;IAMO,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;KAC7D;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,EAC7D,IAAI,CAAC,UAAU,IAAI,~~cAAQ,~~IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAAI,CACxE,EACR,IAAI,CAAC,IAAI,KACR,~~WAAK~~,KAAK,EAAC,OAAO,IAChB,~~YACE~~,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMenuSection"],"sources":["src/components/~~navigation/~~z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/~~navigation/~~z-menu-section/index.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(),\n {\n box-sizing: border-box;\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n border-color: var(--color-secondary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(),\n.label:focus:focus-visible ::slotted(),\n.label:hover ::slotted() {\n font-weight: var(--font-bd);\n}\n\n.label {\n display: flex;\n width: 100%;\n align-items: center;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n border: 0;\n border-bottom: var(--border-size-small) solid var(--color-surface05);\n margin: 0;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n text-align: left;\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text])::after {\n overflow: hidden;\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n.label ::slotted() {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.label z-icon {\n margin-left: calc(var(--space-unit) * 4);\n fill: var(--color-default-icon);\n}\n\n.items {\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: calc(var(--space-unit) / 2);\n padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n display: inline-flex;\n padding: calc(var(--space-unit) / 2);\n margin: 0;\n font-size: var(--font-size-2);\n line-height: 1.4;\n outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, h, ~~Prop~~, ~~State~~, ~~Event~~, ~~EventEmitter~~, ~~Element~~, ~~Listen~~, ~~Host~~} from \"@stencil/core\";\n\n/*\n A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n /\n@Component({\n tag: \"z-menu-section\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuSection {\n @Element() hostElement: HTMLZMenuSectionElement;\n\n /* Active state /\n @Prop({reflect: true})\n active?: boolean;\n\n @State()\n open: boolean;\n\n @State()\n hasContent: boolean;\n\n /* The section has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The section has been closed. /\n @Event()\n closed: EventEmitter;\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\n this.open ? this.opened.emit() : this.closed.emit();\n }\n\n /* Close the list when a click is performed outside of this Element. /\n @Listen(\"click\", {target: \"document\"})\n handleClick(ev: MouseEvent): void {\n if (!this.open \|\| this.hostElement.contains(ev.target as Node)) {\n return;\n }\n\n this.open = false;\n this.closed.emit();\n }\n\n /\n Check if some content slot is set.\n /\n private checkContent(): void {\n this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n }\n\n /\n Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n */\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.innerText \|\| null;\n }\n\n componentWillLoad(): void {\n this.checkContent();\n }\n\n render(): HTMLZMenuSectionElement {\n return (\n <Host\n role=\"menu\"\n open={this.open}\n >\n <button\n class=\"label\"\n aria-pressed={this.open ? \"true\" : \"false\"}\n onClick={this.toggle.bind(this)}\n >\n <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n </button>\n {this.open && (\n <div class=\"items\">\n <slot\n name=\"item\"\n onSlotchange={this.checkContent.bind(this)}\n ></slot>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-menu-section.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,88DAA88D,CAAC;AACj+D,2BAAe,SAAS;;MCWXA,cAAY;;;;;;;;;;;IAqBf,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACrD;;IAID,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE;YAC9D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;;;;IAKO,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACjF;;;;;IAMO,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;KAC7D;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,EAC7D,IAAI,CAAC,UAAU,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAAI,CACxE,EACR,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,OAAO,IAChB,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMenuSection"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(),\n {\n box-sizing: border-box;\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n border-color: var(--color-secondary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(),\n.label:focus:focus-visible ::slotted(),\n.label:hover ::slotted() {\n font-weight: var(--font-bd);\n}\n\n.label {\n display: flex;\n width: 100%;\n align-items: center;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n border: 0;\n border-bottom: var(--border-size-small) solid var(--color-surface05);\n margin: 0;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n text-align: left;\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text])::after {\n overflow: hidden;\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n.label ::slotted() {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.label z-icon {\n margin-left: calc(var(--space-unit) * 4);\n fill: var(--color-default-icon);\n}\n\n.items {\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: calc(var(--space-unit) / 2);\n padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n display: inline-flex;\n padding: calc(var(--space-unit) / 2);\n margin: 0;\n font-size: var(--font-size-2);\n line-height: 1.4;\n outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/*\n A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n /\n@Component({\n tag: \"z-menu-section\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuSection {\n @Element() hostElement: HTMLZMenuSectionElement;\n\n /* Active state /\n @Prop({reflect: true})\n active?: boolean;\n\n @State()\n open: boolean;\n\n @State()\n hasContent: boolean;\n\n /* The section has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The section has been closed. /\n @Event()\n closed: EventEmitter;\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\n this.open ? this.opened.emit() : this.closed.emit();\n }\n\n /* Close the list when a click is performed outside of this Element. /\n @Listen(\"click\", {target: \"document\"})\n handleClick(ev: MouseEvent): void {\n if (!this.open \|\| this.hostElement.contains(ev.target as Node)) {\n return;\n }\n\n this.open = false;\n this.closed.emit();\n }\n\n /\n Check if some content slot is set.\n /\n private checkContent(): void {\n this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n }\n\n /\n Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n */\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.innerText \|\| null;\n }\n\n componentWillLoad(): void {\n this.checkContent();\n }\n\n render(): HTMLZMenuSectionElement {\n return (\n <Host\n role=\"menu\"\n open={this.open}\n >\n <button\n class=\"label\"\n aria-pressed={this.open ? \"true\" : \"false\"}\n onClick={this.toggle.bind(this)}\n >\n <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n </button>\n {this.open && (\n <div class=\"items\">\n <slot\n name=\"item\"\n onSlotchange={this.checkContent.bind(this)}\n ></slot>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-menu.js CHANGED Viewed

@@ -100,7 +100,7 @@ const ZMenu$1 = /*@__PURE__*/ proxyCustomElement(class ZMenu extends HTMLElement
         return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
     }
     render() {
-        return (h(Host, { key: '0ecfa6c7439e2472ebb454362e5dd86b4eef9ad3' }, this.renderMenuLabel(), this.hasContent && (h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange }))))));
+        return (h(Host, { key: '675f13eb3d814743037d5e791afd82d8737ba57d' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '50ef2a4dbf031fa211bc818b7704d46acbe63446', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '9ed7520b00334a598c7664e0ccb1c4f8bfe3b858', class: "header" }, h("slot", { key: '6a41d2d5802d54bf192fd7f03586df1c933a7877', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '7aa4c1c061559caac915866d1ae2acfe02dc3a8a', class: "items", role: "menu" }, h("slot", { key: '8494b984ad295b61d2cad61a25571220e74b8dff', name: "item", onSlotchange: this.onItemsChange }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/z-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-menu.js","mappings":"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","names":["ZMenu"],"sources":["src/components/navigation/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/navigation/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(),\n {\n box-sizing: border-box;\n}\n\n:host {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n\n --z-menu-label-color: var(--color-default-text);\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.menu-label {\n padding: 0;\n border: 0;\n margin: 0;\n background: transparent;\n border-radius: 0;\n color: inherit;\n outline: none;\n text-align: left;\n}\n\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n z-index: 1;\n padding-right: calc(var(--space-unit) 0.5);\n padding-left: calc(var(--space-unit) * 0.5);\n margin-right: calc(var(--space-unit) * -0.5);\n margin-left: calc(var(--space-unit) * -0.5);\n box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content ::slotted() {\n letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(:not([slot]):focus:focus-visible) {\n box-shadow: none !important;\n}\n\n/ border /\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n content: \"\";\n pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n height: var(--border-size-small);\n background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n height: var(--border-size-large);\n background-color: var(--color-secondary01);\n}\n\n/ Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text])::after {\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted() {\n display: inline-flex;\n width: 100%;\n margin: 0;\n appearance: none;\n color: var(--z-menu-label-color);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-5);\n font-weight: inherit;\n letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text /\n line-height: 1.2;\n outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(),\n.menu-label .menu-label-content z-icon {\n padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n margin-left: calc(var(--space-unit) * 1.5);\n fill: currentcolor;\n}\n\n.content {\n background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n display: none;\n}\n\n:host([floating]) .content {\n position: absolute;\n top: 100%;\n left: 0;\n width: 375px;\n min-width: 100%;\n max-width: 100vw;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n width: 100%;\n}\n\n.header {\n display: flex;\n align-items: center;\n padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n width: calc(var(--space-unit) * 11.25);\n height: auto;\n object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n margin: auto 0;\n margin-left: calc(var(--space-unit) * 2.5);\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n.items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.25;\n outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n border-color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch, Host} from \"@stencil/core\";\n\n/*\n @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n /\n@Component({\n tag: \"z-menu\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenu {\n @Element() hostElement: HTMLZMenuElement;\n\n /* Flag to set the active status of the menu. /\n @Prop({reflect: true})\n active?: boolean;\n\n /\n Flag to set the display mode of the list.\n * If true, the list will be absolutely positioned under the menu label,\n * stacked beneath it otherwise.\n /\n @Prop({reflect: true})\n floating? = false;\n\n /* The opening state of the menu. /\n @Prop({mutable: true, reflect: true})\n open = false;\n\n /\n Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n * A small border is placed under it as a separator from other elements.\n /\n @Prop({reflect: true})\n verticalContext = false;\n\n @State()\n hasHeader: boolean;\n\n @State()\n hasContent: boolean;\n\n private content: HTMLElement;\n\n /* Animation frame request id. /\n private raf: number;\n\n /* The menu has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The menu has been closed. /\n @Event()\n closed: EventEmitter;\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\n this.open ? this.opened.emit() : this.closed.emit();\n }\n\n /* Close the floating list when a click is performed outside of this Element. /\n @Listen(\"click\", {target: \"document\"})\n handleClick(ev: MouseEvent): void {\n if (!this.floating \|\| !this.open \|\| this.hostElement.contains(ev.target as Element)) {\n return;\n }\n\n this.reflow();\n this.open = false;\n this.closed.emit();\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n if (this.open) {\n this.reflow(true);\n } else {\n cancelAnimationFrame(this.raf);\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.checkContent = this.checkContent.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n }\n\n componentWillLoad(): void {\n this.checkContent();\n }\n\n /\n Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n /\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.textContent;\n }\n\n /\n Correctly set position of the floating menu in order to prevent overflow.\n * @param live Should run the method on every refresh frame.\n /\n private reflow(live = false): void {\n if (this.content) {\n const {style} = this.content;\n const {left} = this.hostElement.getBoundingClientRect();\n const widthPx = getComputedStyle(this.content).width;\n const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n const safeScrollbarSpace = 30;\n style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n }\n if (live) {\n this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n }\n }\n\n /\n Check if some content slot is set.\n /\n private checkContent(): void {\n this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length \|\| this.hasHeader;\n }\n\n /\n Set `menuitem` role to all menu items.\n * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n */\n private onItemsChange(): void {\n this.checkContent();\n const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.dataset.text = item.textContent;\n });\n }\n\n private renderMenuLabel(): HTMLButtonElement \| HTMLDivElement {\n if (this.hasContent) {\n return (\n <button\n class=\"menu-label\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n onClick={this.toggle}\n >\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n </div>\n </button>\n );\n }\n\n return (\n <div class=\"menu-label\">\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZMenuElement {\n return (\n <Host>\n {this.renderMenuLabel()}\n\n {this.hasContent && (\n <div\n class=\"content\"\n ref={(el) => (this.content = el)}\n >\n {this.hasHeader && (\n <header class=\"header\">\n <slot\n name=\"header\"\n onSlotchange={this.checkContent}\n ></slot>\n </header>\n )}\n\n <div\n class=\"items\"\n role=\"menu\"\n >\n <slot\n name=\"item\"\n onSlotchange={this.onItemsChange}\n ></slot>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-menu.js","mappings":"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","names":["ZMenu"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(),\n {\n box-sizing: border-box;\n}\n\n:host {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n\n --z-menu-label-color: var(--color-default-text);\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.menu-label {\n padding: 0;\n border: 0;\n margin: 0;\n background: transparent;\n border-radius: 0;\n color: inherit;\n outline: none;\n text-align: left;\n}\n\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n z-index: 1;\n padding-right: calc(var(--space-unit) 0.5);\n padding-left: calc(var(--space-unit) * 0.5);\n margin-right: calc(var(--space-unit) * -0.5);\n margin-left: calc(var(--space-unit) * -0.5);\n box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content ::slotted() {\n letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(:not([slot]):focus:focus-visible) {\n box-shadow: none !important;\n}\n\n/ border /\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n content: \"\";\n pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n height: var(--border-size-small);\n background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n height: var(--border-size-large);\n background-color: var(--color-secondary01);\n}\n\n/ Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text])::after {\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted() {\n display: inline-flex;\n width: 100%;\n margin: 0;\n appearance: none;\n color: var(--z-menu-label-color);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-5);\n font-weight: inherit;\n letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text /\n line-height: 1.2;\n outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(),\n.menu-label .menu-label-content z-icon {\n padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n margin-left: calc(var(--space-unit) * 1.5);\n fill: currentcolor;\n}\n\n.content {\n background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n display: none;\n}\n\n:host([floating]) .content {\n position: absolute;\n top: 100%;\n left: 0;\n width: 375px;\n min-width: 100%;\n max-width: 100vw;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n width: 100%;\n}\n\n.header {\n display: flex;\n align-items: center;\n padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n width: calc(var(--space-unit) * 11.25);\n height: auto;\n object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n margin: auto 0;\n margin-left: calc(var(--space-unit) * 2.5);\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n.items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.25;\n outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n border-color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\n/*\n @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n /\n@Component({\n tag: \"z-menu\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenu {\n @Element() hostElement: HTMLZMenuElement;\n\n /* Flag to set the active status of the menu. /\n @Prop({reflect: true})\n active?: boolean;\n\n /\n Flag to set the display mode of the list.\n * If true, the list will be absolutely positioned under the menu label,\n * stacked beneath it otherwise.\n /\n @Prop({reflect: true})\n floating? = false;\n\n /* The opening state of the menu. /\n @Prop({mutable: true, reflect: true})\n open = false;\n\n /\n Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n * A small border is placed under it as a separator from other elements.\n /\n @Prop({reflect: true})\n verticalContext = false;\n\n @State()\n hasHeader: boolean;\n\n @State()\n hasContent: boolean;\n\n private content: HTMLElement;\n\n /* Animation frame request id. /\n private raf: number;\n\n /* The menu has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The menu has been closed. /\n @Event()\n closed: EventEmitter;\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\n this.open ? this.opened.emit() : this.closed.emit();\n }\n\n /* Close the floating list when a click is performed outside of this Element. /\n @Listen(\"click\", {target: \"document\"})\n handleClick(ev: MouseEvent): void {\n if (!this.floating \|\| !this.open \|\| this.hostElement.contains(ev.target as Element)) {\n return;\n }\n\n this.reflow();\n this.open = false;\n this.closed.emit();\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n if (this.open) {\n this.reflow(true);\n } else {\n cancelAnimationFrame(this.raf);\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.checkContent = this.checkContent.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n }\n\n componentWillLoad(): void {\n this.checkContent();\n }\n\n /\n Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n /\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.textContent;\n }\n\n /\n Correctly set position of the floating menu in order to prevent overflow.\n * @param live Should run the method on every refresh frame.\n /\n private reflow(live = false): void {\n if (this.content) {\n const {style} = this.content;\n const {left} = this.hostElement.getBoundingClientRect();\n const widthPx = getComputedStyle(this.content).width;\n const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n const safeScrollbarSpace = 30;\n style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n }\n if (live) {\n this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n }\n }\n\n /\n Check if some content slot is set.\n /\n private checkContent(): void {\n this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length \|\| this.hasHeader;\n }\n\n /\n Set `menuitem` role to all menu items.\n * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n */\n private onItemsChange(): void {\n this.checkContent();\n const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.dataset.text = item.textContent;\n });\n }\n\n private renderMenuLabel(): HTMLButtonElement \| HTMLDivElement {\n if (this.hasContent) {\n return (\n <button\n class=\"menu-label\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n onClick={this.toggle}\n >\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n </div>\n </button>\n );\n }\n\n return (\n <div class=\"menu-label\">\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZMenuElement {\n return (\n <Host>\n {this.renderMenuLabel()}\n\n {this.hasContent && (\n <div\n class=\"content\"\n ref={(el) => (this.content = el)}\n >\n {this.hasHeader && (\n <header class=\"header\">\n <slot\n name=\"header\"\n onSlotchange={this.checkContent}\n ></slot>\n </header>\n )}\n\n <div\n class=\"items\"\n role=\"menu\"\n >\n <slot\n name=\"item\"\n onSlotchange={this.onItemsChange}\n ></slot>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-messages-pocket.js CHANGED Viewed

@@ -42,7 +42,7 @@ const ZMessagesPocket$1 = /*@__PURE__*/ proxyCustomElement(class ZMessagesPocket
         return (h("z-pocket-body", { pocketid: this.pocketid }, h("div", { class: "body" }, h("slot", null)), h("div", { class: "gradient" })));
     }
     render() {
-        return (h("z-pocket", { key: '2f8a4cab129678f4a14c8fe5605c20098d29427a', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
+        return (h("z-pocket", { key: '5be608e84b6e356a29b5f1d7b96a36646ee0299a', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
     }
     static get style() { return ZMessagesPocketStyle0; }
 }, [1, "z-messages-pocket", {

package/dist/components/z-messages-pocket.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-messages-pocket.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ytDAAytD,CAAC;AAC5uD,8BAAe,SAAS;;MCUXA,iBAAe;;;;;;;sBAWH,YAAY,CAAC,OAAO;;IAG3C,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;SAC/B;KACF;IAEO,YAAY;QAClB,IAAI,OAAoB,CAAC;QACzB,IAAI,IAAY,CAAC;QACjB,QAAQ,IAAI,CAAC,MAAM;YACjB,KAAK,YAAY,CAAC,OAAO,CAAC;YAC1B,KAAK,YAAY,CAAC,MAAM;gBACtB,OAAO,IACL,6BACW,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC9C,CACR,CAAC;gBACF,IAAI,GAAG,YAAY,CAAC;gBACpB,MAAM;YACR,KAAK,YAAY,CAAC,IAAI;gBACpB,OAAO,GAAG,yBAAmB,CAAC;gBAC9B,IAAI,GAAG,cAAc,CAAC;gBACtB,MAAM;SACT;QAED,QACE,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACrC,OAAO,EACR,cACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACc,EAClB;KACH;IAEO,UAAU;QAChB,QACE,qBAAe,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACpC,WAAK,KAAK,EAAC,MAAM,IACf,eAAQ,CACJ,EACN,WAAK,KAAK,EAAC,UAAU,GAAG,CACV,EAChB;KACH;IAED,MAAM;QACJ,QACE,iEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,MAAM,IAEjB,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,UAAU,EAAE,CACT,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMessagesPocket"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n width: 100%;\n}\n\n:host > z-pocket.closed {\n width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n color: var(--color-primary01);\n fill: var(--color-primary01);\n font-size: 12px;\n font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n display: inline-block;\n padding: 0 calc(var(--space-unit) * 0.5);\n margin-left: var(--space-unit);\n background: var(--color-secondary02);\n border-radius: 50%;\n color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n overflow: hidden;\n padding: var(--space-unit);\n margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n overflow: auto;\n max-height: calc(100vh - 166px);\n scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n width: 0;\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n :host > z-pocket {\n width: 768px;\n margin: 0 calc((100% - 768px) / 2);\n }\n\n :host > z-pocket.closed {\n margin: 0 calc((100% - 158px) / 2);\n }\n\n :host > z-pocket.open > z-pocket-body > div.body {\n max-height: 326px;\n }\n}\n\n/ Desktop breakpoint /\n@media only screen and (min-width: 1152px) {\n :host > z-pocket.open > z-pocket-body > div.body {\n scrollbar-color: var(--color-primary01) var(--color-surface03);\n scrollbar-width: thin;\n }\n\n :host ::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(\n 90deg,\n var(--color-surface01) 2px,\n var(--color-surface03) 4px,\n var(--color-surface01) 8px\n );\n border-radius: var(--border-radius);\n }\n\n :host ::-webkit-scrollbar-thumb {\n width: var(--space-unit);\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n }\n}\n","import {Component, ~~Prop, h,~~ Listen / , State /} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/\n @slot - pocket body content\n /\n@Component({\n tag: \"z-messages-pocket\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMessagesPocket {\n /* pocket id /\n @Prop()\n pocketid: string;\n\n /* number of messages /\n @Prop()\n messages: number;\n\n /* pocket status */\n @Prop({mutable: true})\n status: PocketStatus = PocketStatus.PREVIEW;\n\n @Listen(\"pocketToggle\", {target: \"body\"})\n handlePocketToggle(e: CustomEvent): void {\n if (e.detail.id === this.pocketid) {\n this.status = e.detail.status;\n }\n }\n\n private renderHeader(): HTMLZPocketHeaderElement {\n let message: HTMLElement;\n let icon: string;\n switch (this.status) {\n case PocketStatus.PREVIEW:\n case PocketStatus.CLOSED:\n message = (\n <span>\n Messaggi <span class=\"badge\">{this.messages}</span>\n </span>\n );\n icon = \"chevron-up\";\n break;\n case PocketStatus.OPEN:\n message = <span>Riduci</span>;\n icon = \"chevron-down\";\n break;\n }\n\n return (\n <z-pocket-header pocketid={this.pocketid}>\n {message}\n <z-icon\n name={icon}\n width={14}\n height={14}\n />\n </z-pocket-header>\n );\n }\n\n private renderBody(): HTMLZPocketBodyElement {\n return (\n <z-pocket-body pocketid={this.pocketid}>\n <div class=\"body\">\n <slot />\n </div>\n <div class=\"gradient\" />\n </z-pocket-body>\n );\n }\n\n render(): HTMLZPocketElement {\n return (\n <z-pocket\n pocketid={this.pocketid}\n status={this.status}\n class={this.status}\n >\n {this.renderHeader()}\n {this.renderBody()}\n </z-pocket>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-messages-pocket.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ytDAAytD,CAAC;AAC5uD,8BAAe,SAAS;;MCUXA,iBAAe;;;;;;;sBAWH,YAAY,CAAC,OAAO;;IAG3C,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;SAC/B;KACF;IAEO,YAAY;QAClB,IAAI,OAAoB,CAAC;QACzB,IAAI,IAAY,CAAC;QACjB,QAAQ,IAAI,CAAC,MAAM;YACjB,KAAK,YAAY,CAAC,OAAO,CAAC;YAC1B,KAAK,YAAY,CAAC,MAAM;gBACtB,OAAO,IACL,6BACW,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC9C,CACR,CAAC;gBACF,IAAI,GAAG,YAAY,CAAC;gBACpB,MAAM;YACR,KAAK,YAAY,CAAC,IAAI;gBACpB,OAAO,GAAG,yBAAmB,CAAC;gBAC9B,IAAI,GAAG,cAAc,CAAC;gBACtB,MAAM;SACT;QAED,QACE,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACrC,OAAO,EACR,cACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACc,EAClB;KACH;IAEO,UAAU;QAChB,QACE,qBAAe,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACpC,WAAK,KAAK,EAAC,MAAM,IACf,eAAQ,CACJ,EACN,WAAK,KAAK,EAAC,UAAU,GAAG,CACV,EAChB;KACH;IAED,MAAM;QACJ,QACE,iEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,MAAM,IAEjB,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,UAAU,EAAE,CACT,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMessagesPocket"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n width: 100%;\n}\n\n:host > z-pocket.closed {\n width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n color: var(--color-primary01);\n fill: var(--color-primary01);\n font-size: 12px;\n font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n display: inline-block;\n padding: 0 calc(var(--space-unit) * 0.5);\n margin-left: var(--space-unit);\n background: var(--color-secondary02);\n border-radius: 50%;\n color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n overflow: hidden;\n padding: var(--space-unit);\n margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n overflow: auto;\n max-height: calc(100vh - 166px);\n scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n width: 0;\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n :host > z-pocket {\n width: 768px;\n margin: 0 calc((100% - 768px) / 2);\n }\n\n :host > z-pocket.closed {\n margin: 0 calc((100% - 158px) / 2);\n }\n\n :host > z-pocket.open > z-pocket-body > div.body {\n max-height: 326px;\n }\n}\n\n/ Desktop breakpoint /\n@media only screen and (min-width: 1152px) {\n :host > z-pocket.open > z-pocket-body > div.body {\n scrollbar-color: var(--color-primary01) var(--color-surface03);\n scrollbar-width: thin;\n }\n\n :host ::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(\n 90deg,\n var(--color-surface01) 2px,\n var(--color-surface03) 4px,\n var(--color-surface01) 8px\n );\n border-radius: var(--border-radius);\n }\n\n :host ::-webkit-scrollbar-thumb {\n width: var(--space-unit);\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n }\n}\n","import {Component, Listen / , State /, Prop, h} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/\n @slot - pocket body content\n /\n@Component({\n tag: \"z-messages-pocket\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMessagesPocket {\n /* pocket id /\n @Prop()\n pocketid: string;\n\n /* number of messages /\n @Prop()\n messages: number;\n\n /* pocket status */\n @Prop({mutable: true})\n status: PocketStatus = PocketStatus.PREVIEW;\n\n @Listen(\"pocketToggle\", {target: \"body\"})\n handlePocketToggle(e: CustomEvent): void {\n if (e.detail.id === this.pocketid) {\n this.status = e.detail.status;\n }\n }\n\n private renderHeader(): HTMLZPocketHeaderElement {\n let message: HTMLElement;\n let icon: string;\n switch (this.status) {\n case PocketStatus.PREVIEW:\n case PocketStatus.CLOSED:\n message = (\n <span>\n Messaggi <span class=\"badge\">{this.messages}</span>\n </span>\n );\n icon = \"chevron-up\";\n break;\n case PocketStatus.OPEN:\n message = <span>Riduci</span>;\n icon = \"chevron-down\";\n break;\n }\n\n return (\n <z-pocket-header pocketid={this.pocketid}>\n {message}\n <z-icon\n name={icon}\n width={14}\n height={14}\n />\n </z-pocket-header>\n );\n }\n\n private renderBody(): HTMLZPocketBodyElement {\n return (\n <z-pocket-body pocketid={this.pocketid}>\n <div class=\"body\">\n <slot />\n </div>\n <div class=\"gradient\" />\n </z-pocket-body>\n );\n }\n\n render(): HTMLZPocketElement {\n return (\n <z-pocket\n pocketid={this.pocketid}\n status={this.status}\n class={this.status}\n >\n {this.renderHeader()}\n {this.renderBody()}\n </z-pocket>\n );\n }\n}\n"],"version":3}

package/dist/components/z-myz-card-alert.js CHANGED Viewed

@@ -56,7 +56,7 @@ const ZMyzCardAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardAlert ext
         }
     }
     render() {
-        return (h("div", { key: '48889e49481948b707a3fcd518ad1b3acfcc5bde', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '75322f499813ab46e7b0fa5f4704cd3c5659de32', type: this.getAlertType() }, h("div", { key: 'fdbcefea81b53032d7cf9209b75500d09a2b8563', class: "relative-container" }, h("z-icon", { key: '7cd6edc15a24476241764a69781a880130bd39f0', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: '3a627e1e4940bd011b59122be93c1b60692b16bf', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: 'ee3f657b10628aa1d8b655fbad1f7f2d55d0cfcc', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: 'f90c4944719e9d9842a159727be73e7d877aca9a', type: this.getAlertType() }, h("div", { key: '414b27076e7e807f79987b8d1bf57724ff7aba21', class: "relative-container" }, h("z-icon", { key: '4a17b0046552751eb1b4f78b666038a34950f669', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'dc7059e99b1cb56c47f0ce112f2dcabf0cdafb47', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'fe84b58a497310f2936b14fd06808717a572feb5', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/components/z-myz-card-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-alert.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,u7BAAu7B,CAAC;AAC18B,4BAAe,SAAS;;MCOXA,eAAa;;;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1D,gEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChC,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACV,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,~~YACE~~,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardAlert"],"sources":["src/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-alert/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n position: relative;\n display: grid;\n align-items: center;\n padding: 0;\n grid-column-gap: var(--space-unit);\n grid-template-columns: 18px auto 46px;\n grid-template-rows: 1fr;\n outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n border: var(--border-size-medium) solid var(--color-surface02);\n border-top: none;\n}\n\n:host div.add-alert {\n background: var(--color-success-inverse);\n}\n\n:host div.remove-alert {\n background: var(--color-warning-inverse);\n}\n\n:host div > .content-text {\n color: var(--color-surface05);\n font-size: 14px;\n letter-spacing: 0.16px;\n line-height: 20px;\n}\n\n:host div > .content-action {\n height: 20px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 12px;\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 20px;\n}\n\n:host div > z-icon {\n justify-self: center;\n}\n","import {Component, ~~Prop~~, h, ~~Event~~, ~~EventEmitter~~} from \"@stencil/core\";\nimport {AlertType} from \"../../../../beans\";\n\n@Component({\n tag: \"z-myz-card-alert\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardAlert {\n /** icon name /\n @Prop()\n iconname: string;\n\n /* content text /\n @Prop()\n contenttext: string;\n\n /* action button text /\n @Prop()\n actiontext?: string;\n\n /* alert variant type /\n @Prop()\n type: string;\n\n /* undo action click/keyboard event, returns actionType */\n @Event()\n undoAction: EventEmitter;\n\n private emitUndoAction(): void {\n this.undoAction.emit({actionType: this.type});\n }\n\n private handleSpaceKeyPress(e: KeyboardEvent): void {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitUndoAction();\n }\n }\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.emitUndoAction();\n }\n\n private retrieveClass(): string {\n let className = \"\";\n switch (this.type) {\n case \"add\":\n className = \"add-alert\";\n break;\n case \"remove\":\n className = \"remove-alert\";\n break;\n default:\n className = \"\";\n break;\n }\n\n return className;\n }\n\n private getAlertType(): AlertType {\n switch (this.type) {\n case \"add\":\n return AlertType.SUCCESS;\n case \"remove\":\n return AlertType.WARNING;\n default:\n return null;\n }\n }\n\n render(): HTMLDivElement {\n return (\n <div class={\"alert-external-wrapper \" + this.retrieveClass()}>\n <z-alert type={this.getAlertType()}>\n <div class=\"relative-container\">\n <z-icon\n name={this.iconname}\n width={18}\n height={18}\n class={this.retrieveClass()}\n ></z-icon>\n <span class=\"content-text\">{this.contenttext}</span>\n {this.actiontext && !!this.actiontext.trim().length && (\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"content-action\"\n onClick={(e: MouseEvent) => {\n this.handleActionButtonClick(e);\n }}\n onKeyPress={(e: KeyboardEvent) => {\n this.handleSpaceKeyPress(e);\n }}\n >\n {this.actiontext}\n </span>\n )}\n </div>\n </z-alert>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-myz-card-alert.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,u7BAAu7B,CAAC;AAC18B,4BAAe,SAAS;;MCOXA,eAAa;;;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1D,gEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChC,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACV,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,6DACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardAlert"],"sources":["src/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-alert/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n position: relative;\n display: grid;\n align-items: center;\n padding: 0;\n grid-column-gap: var(--space-unit);\n grid-template-columns: 18px auto 46px;\n grid-template-rows: 1fr;\n outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n border: var(--border-size-medium) solid var(--color-surface02);\n border-top: none;\n}\n\n:host div.add-alert {\n background: var(--color-success-inverse);\n}\n\n:host div.remove-alert {\n background: var(--color-warning-inverse);\n}\n\n:host div > .content-text {\n color: var(--color-surface05);\n font-size: 14px;\n letter-spacing: 0.16px;\n line-height: 20px;\n}\n\n:host div > .content-action {\n height: 20px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 12px;\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 20px;\n}\n\n:host div > z-icon {\n justify-self: center;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../../beans\";\n\n@Component({\n tag: \"z-myz-card-alert\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardAlert {\n /** icon name /\n @Prop()\n iconname: string;\n\n /* content text /\n @Prop()\n contenttext: string;\n\n /* action button text /\n @Prop()\n actiontext?: string;\n\n /* alert variant type /\n @Prop()\n type: string;\n\n /* undo action click/keyboard event, returns actionType */\n @Event()\n undoAction: EventEmitter;\n\n private emitUndoAction(): void {\n this.undoAction.emit({actionType: this.type});\n }\n\n private handleSpaceKeyPress(e: KeyboardEvent): void {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitUndoAction();\n }\n }\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.emitUndoAction();\n }\n\n private retrieveClass(): string {\n let className = \"\";\n switch (this.type) {\n case \"add\":\n className = \"add-alert\";\n break;\n case \"remove\":\n className = \"remove-alert\";\n break;\n default:\n className = \"\";\n break;\n }\n\n return className;\n }\n\n private getAlertType(): AlertType {\n switch (this.type) {\n case \"add\":\n return AlertType.SUCCESS;\n case \"remove\":\n return AlertType.WARNING;\n default:\n return null;\n }\n }\n\n render(): HTMLDivElement {\n return (\n <div class={\"alert-external-wrapper \" + this.retrieveClass()}>\n <z-alert type={this.getAlertType()}>\n <div class=\"relative-container\">\n <z-icon\n name={this.iconname}\n width={18}\n height={18}\n class={this.retrieveClass()}\n ></z-icon>\n <span class=\"content-text\">{this.contenttext}</span>\n {this.actiontext && !!this.actiontext.trim().length && (\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"content-action\"\n onClick={(e: MouseEvent) => {\n this.handleActionButtonClick(e);\n }}\n onKeyPress={(e: KeyboardEvent) => {\n this.handleSpaceKeyPress(e);\n }}\n >\n {this.actiontext}\n </span>\n )}\n </div>\n </z-alert>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/z-myz-card-dictionary.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './index17.js';
 import { d as defineCustomElement$3 } from './index18.js';
 import { d as defineCustomElement$2 } from './index19.js';
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host z-myz-card{--card-overflow:visible}:host>div{position:relative;width:100%;height:522px;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{z-index:1;top:0;left:0;display:flex;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));transform:rotateY(180deg)}.hide-info{display:none}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host z-myz-card{--card-overflow:visible}:host>div{position:relative;width:100%;height:522px;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{z-index:1;top:0;left:0;display:flex;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));transform:rotateY(180deg)}.hide-info{display:none}";
 const ZMyzCardDictionaryStyle0 = stylesCss;
 const ZMyzCardDictionary$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardDictionary extends HTMLElement {
@@ -31,7 +31,7 @@ const ZMyzCardDictionary$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardDict
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (h("div", { key: '07f2907ee9ae953ad0365dd0c8e2618524f89653' }, h("z-myz-card", { key: 'c21605f97d0cd1c9298643c2ad59ed4414a8ad16' }, h("z-myz-card-header", { key: '8798167fee3c810b002525720556c26bee3254de', titolo: this.name }), h("div", { key: '3d932ff6a732c3cbcf77fcd448e90e8265b02225', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '83585f7409cb3daee9d7985d7e9c519b6c41e133', class: "front" }, h("z-myz-card-body", { key: '486d61f67e0affb3e4e7efdf0ab3feb2b26b4b0f' }, h("z-myz-card-cover", { key: '61c665f57fb7e969d8191b77d62c794474b08e62', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '7cf6f97b79d569143724561d59e8c77fba8e054e', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '562430df60bfa01db09cbad1d263586c6224af9c', class: "back" }, h("slot", { key: '537e1be569a72865724cfa85b7734dc0294bc115', name: "info" }))), h("slot", { key: '8b38959c1ddbeacd0bbca92fd14611355a24d74d' }))));
+        return (h("div", { key: 'ed889966f8549cc26bb5a74907698789dc5589db' }, h("z-myz-card", { key: '2f800d33d6ad0b9c0da423ae300d166c5cff1138' }, h("z-myz-card-header", { key: 'ac3b947d1bc44020038864cee354d25e03e35520', titolo: this.name }), h("div", { key: '510d58895ab181f57bf347181e9800e2905051ac', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '5edbb595e686ab20daf7627d8853bac7ded0b400', class: "front" }, h("z-myz-card-body", { key: '4429043e3309372204e1327b63af4bb7070e8821' }, h("z-myz-card-cover", { key: '4131ba8eac6d1b4de4ebb2132b90b23c84a4e208', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '868186b2ce493dcea4927f02678da0014adde59e', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '82831b99ec4d728738523fe6cc4ad63a63d503f1', class: "back" }, h("slot", { key: 'e636f908bec08c14febee93e62a3b053b46e5cfb', name: "info" }))), h("slot", { key: 'c7fc3bc013651830a0777c1c41d7c11ea9d90041' }))));
     }
     static get style() { return ZMyzCardDictionaryStyle0; }
 }, [1, "z-myz-card-dictionary", {

package/dist/components/z-myz-card-dictionary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-dictionary.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,~~8lCAA8lC~~,CAAC;~~AACjnC~~,iCAAe,SAAS;;MCWXA,oBAAkB;;;;;;;;wBAWlB,KAAK;uBAIN,KAAK;+BAIG,MAAM;2BAIV,KAAK;;IAGnB,cAAc,CAAC,CAAc;QAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACzB;IAMO,QAAQ,CAAC,QAAQ,GAAG,IAAI;QAC9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACE,8DACE,qEACE,0EAAmB,MAAM,EAAE,IAAI,CAAC,IAAI,GAAsB,EAC1D,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,IACpD,4DAAK,KAAK,EAAC,OAAO,IAChB,0EACE,yEACE,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACc,EAClB,iEACE,KAAK,EAAE,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAC,EACtC,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAC,mBAAmB,EACxB,IAAI,EAAE,UAAU,CAAC,OAAO,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,IAErB,IAAI,CAAC,eAAe,CACZ,CACP,EACN,4DAAK,KAAK,EAAC,MAAM,IACf,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN,8DAAQ,CACG,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardDictionary"],"sources":["src/snowflakes/myz/card/z-myz-card-dictionary/styles.css?tag=z-myz-card-dictionary&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-dictionary/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host z-myz-card {\n --card-overflow: visible;\n}\n\n:host > div {\n position: relative;\n width: 100%;\n height: 522px;\n transition: -webkit-transform 0.5s ease-out;\n transition: transform 0.5s ease-out;\n transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 522px;\n transform-style: preserve-3d;\n transition: -webkit-transform 0.5s ease-out;\n transition: transform 0.5s ease-out;\n transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content.flipped {\n margin-top: -2px;\n transform: rotateY(180deg);\n}\n\n:host > div .front,\n:host > div .back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n}\n\n:host > div .front {\n z-index: 2;\n top: 0;\n left: 0;\n transform: rotateY(0deg);\n}\n\n:host > div .front z-button {\n position: absolute;\n z-index: 3;\n top: calc(var(--space-unit) * 0.5);\n left: calc(-1 * var(--space-unit));\n}\n\n:host > div .back {\n z-index: 1;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n padding: 0 var(--space-unit);\n margin-left: calc(-1 * var(--space-unit));\n transform: rotateY(180deg);\n}\n\n.hide-info {\n display: none;\n}\n","import {Component, ~~Prop~~, h, Listen, ~~Event~~, ~~EventEmitter~~} from \"@stencil/core\";\nimport {ButtonSize, ButtonVariant} from \"../../../../beans\";\n\n/*\n @slot - generic card slot\n * @slot info - flipped card info\n /\n@Component({\n tag: \"z-myz-card-dictionary\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardDictionary {\n /* card title /\n @Prop()\n name: string;\n\n /* card cover /\n @Prop()\n cover: string;\n\n /* card is disabled /\n @Prop()\n disabled = false;\n\n /* card is flipped /\n @Prop({mutable: true})\n flipped = false;\n\n /* flip button label /\n @Prop()\n flipbuttonlabel = \"INFO\";\n\n /* hide info button /\n @Prop()\n hideinfobtn = false;\n\n @Listen(\"flipCard\")\n handleFlipCard(e: CustomEvent): void {\n this.flipCard(e.detail);\n }\n\n /* when card is flipped */\n @Event()\n cardFlipped: EventEmitter;\n\n private flipCard(showBack = true): void {\n this.flipped = showBack;\n this.cardFlipped.emit(showBack);\n }\n\n render(): HTMLDivElement {\n return (\n <div>\n <z-myz-card>\n <z-myz-card-header titolo={this.name}></z-myz-card-header>\n <div class={`content ${this.flipped ? \"flipped\" : \"\"}`}>\n <div class=\"front\">\n <z-myz-card-body>\n <z-myz-card-cover\n slot=\"cover\"\n titolo={this.name}\n img={this.cover}\n faded={this.disabled}\n />\n </z-myz-card-body>\n <z-button\n class={{\"hide-info\": this.hideinfobtn}}\n variant={ButtonVariant.SECONDARY}\n icon=\"informationsource\"\n size={ButtonSize.X_SMALL}\n onClick={() => this.flipCard(true)}\n disabled={this.flipped}\n >\n {this.flipbuttonlabel}\n </z-button>\n </div>\n <div class=\"back\">\n <slot name=\"info\" />\n </div>\n </div>\n <slot />\n </z-myz-card>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-myz-card-dictionary.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,wmCAAwmC,CAAC;AAC3nC,iCAAe,SAAS;;MCWXA,oBAAkB;;;;;;;;wBAWlB,KAAK;uBAIN,KAAK;+BAIG,MAAM;2BAIV,KAAK;;IAGnB,cAAc,CAAC,CAAc;QAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACzB;IAMO,QAAQ,CAAC,QAAQ,GAAG,IAAI;QAC9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACE,8DACE,qEACE,0EAAmB,MAAM,EAAE,IAAI,CAAC,IAAI,GAAsB,EAC1D,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,IACpD,4DAAK,KAAK,EAAC,OAAO,IAChB,0EACE,yEACE,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACc,EAClB,iEACE,KAAK,EAAE,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAC,EACtC,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAC,mBAAmB,EACxB,IAAI,EAAE,UAAU,CAAC,OAAO,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,IAErB,IAAI,CAAC,eAAe,CACZ,CACP,EACN,4DAAK,KAAK,EAAC,MAAM,IACf,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN,8DAAQ,CACG,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardDictionary"],"sources":["src/snowflakes/myz/card/z-myz-card-dictionary/styles.css?tag=z-myz-card-dictionary&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-dictionary/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host z-myz-card {\n --card-overflow: visible;\n}\n\n:host > div {\n position: relative;\n width: 100%;\n height: 522px;\n transition: -webkit-transform 0.5s ease-out;\n transition: transform 0.5s ease-out;\n transition:\n transform 0.5s ease-out,\n -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 522px;\n transform-style: preserve-3d;\n transition: -webkit-transform 0.5s ease-out;\n transition: transform 0.5s ease-out;\n transition:\n transform 0.5s ease-out,\n -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content.flipped {\n margin-top: -2px;\n transform: rotateY(180deg);\n}\n\n:host > div .front,\n:host > div .back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n}\n\n:host > div .front {\n z-index: 2;\n top: 0;\n left: 0;\n transform: rotateY(0deg);\n}\n\n:host > div .front z-button {\n position: absolute;\n z-index: 3;\n top: calc(var(--space-unit) * 0.5);\n left: calc(-1 * var(--space-unit));\n}\n\n:host > div .back {\n z-index: 1;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n padding: 0 var(--space-unit);\n margin-left: calc(-1 * var(--space-unit));\n transform: rotateY(180deg);\n}\n\n.hide-info {\n display: none;\n}\n","import {Component, Event, EventEmitter, Listen, Prop, h} from \"@stencil/core\";\nimport {ButtonSize, ButtonVariant} from \"../../../../beans\";\n\n/*\n @slot - generic card slot\n * @slot info - flipped card info\n /\n@Component({\n tag: \"z-myz-card-dictionary\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardDictionary {\n /* card title /\n @Prop()\n name: string;\n\n /* card cover /\n @Prop()\n cover: string;\n\n /* card is disabled /\n @Prop()\n disabled = false;\n\n /* card is flipped /\n @Prop({mutable: true})\n flipped = false;\n\n /* flip button label /\n @Prop()\n flipbuttonlabel = \"INFO\";\n\n /* hide info button /\n @Prop()\n hideinfobtn = false;\n\n @Listen(\"flipCard\")\n handleFlipCard(e: CustomEvent): void {\n this.flipCard(e.detail);\n }\n\n /* when card is flipped */\n @Event()\n cardFlipped: EventEmitter;\n\n private flipCard(showBack = true): void {\n this.flipped = showBack;\n this.cardFlipped.emit(showBack);\n }\n\n render(): HTMLDivElement {\n return (\n <div>\n <z-myz-card>\n <z-myz-card-header titolo={this.name}></z-myz-card-header>\n <div class={`content ${this.flipped ? \"flipped\" : \"\"}`}>\n <div class=\"front\">\n <z-myz-card-body>\n <z-myz-card-cover\n slot=\"cover\"\n titolo={this.name}\n img={this.cover}\n faded={this.disabled}\n />\n </z-myz-card-body>\n <z-button\n class={{\"hide-info\": this.hideinfobtn}}\n variant={ButtonVariant.SECONDARY}\n icon=\"informationsource\"\n size={ButtonSize.X_SMALL}\n onClick={() => this.flipCard(true)}\n disabled={this.flipped}\n >\n {this.flipbuttonlabel}\n </z-button>\n </div>\n <div class=\"back\">\n <slot name=\"info\" />\n </div>\n </div>\n <slot />\n </z-myz-card>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/z-myz-card-footer-sections.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ZMyzCardFooterSections$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCard
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'e41dd2e7a9bed167d3901b276858c4dfc94c9a69' }, h("footer", { key: '522e3b1ea9c7ba56184a9140b6edbaefbf20a17d' }, h("div", { key: '5329ba46f5f04f20769781b0ed9400237d726952', class: "top" }, h("slot", { key: 'ea36f7398f980f255e396b3044d00ff77f42cad0', name: "top" })), h("div", { key: '726628df2d0df9c25c7103e7b56afe69a4ed8c2d', class: "bottom" }, h("slot", { key: '645f27ef4a5bfd15a021737512b8de2970f18b84', name: "bottom" })))));
+        return (h("div", { key: 'c293773e2f737912b63345f9524e03a374f0c536' }, h("footer", { key: '1a8148b580eef438c1a68d5a134bf3b224846946' }, h("div", { key: '49863a18b930dcd3edb2a049c9e77c858be1dc76', class: "top" }, h("slot", { key: '00bdadaa655b1018e42ed72fefd4d21b1a0529fb', name: "top" })), h("div", { key: '24e4dfb5e2eaac5ef6c61dd2303e9cd9e8832b68', class: "bottom" }, h("slot", { key: 'b8791e5c065a9ce4b4701444c137295123f99d3d', name: "bottom" })))));
     }
     static get style() { return ZMyzCardFooterSectionsStyle0; }
 }, [1, "z-myz-card-footer-sections"]);

package/dist/components/z-myz-card-footer.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { L as LicenseType } from './index2.js';
-const stylesCss = "footer{position:relative;z-index:5;top:0;width:auto;height:calc(var(--space-unit) * 6);padding:0;border-top:var(--border-size-medium) solid var(--color-surface03);margin:0;background-color:var(--color-surface01);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-family:var(--font-family-sans);font-weight:var(--font-rg);transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.real,footer.trial,footer.temp{border-top:var(--border-size-medium) solid var(--blue100)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{overflow:hidden;height:40px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);margin:0;background-color:var(--color-surface01);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);line-height:22px;transition:all 200ms linear}footer.isopen>p{background-color:var(--gray200);font-size:14px;font-weight:var(--font-sb);transition:all 200ms linear}footer.isopen.real>p,footer.isopen.trial>p,footer.isopen.temp>p{background-color:var(--blue100)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{overflow:hidden;height:60px}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{overflow:hidden;height:20px;padding:0;margin:0;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}footer>div.content>div>p.year-isbn{display:flex;flex-direction:row;justify-content:space-between;padding-top:var(--space-unit)}footer>div.content>div>p.year-isbn>span.isbn{overflow:hidden;text-overflow:ellipsis}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;text-overflow:initial;white-space:initial}footer.isopen>div.content>div>p.year-isbn{height:50px;flex-direction:column;padding-left:0}footer.isopen>div.content>div>p.year-isbn>span.isbn{display:inline-grid;padding-left:0}footer.isopen{top:-212px;height:295px;transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.isopen.custom-content>div.content{height:230px}.toggle{position:absolute;z-index:10;top:-24px;left:16px}.faded{opacity:0.3;pointer-events:none}footer>p.custom-content,footer .content.custom-content{display:none}footer.isopen>p.custom-content,footer.isopen .content.custom-content{display:block}div.wrapper{position:relative;height:100%}div.wrapper ::slotted([slot=\"content\"]){position:absolute;z-index:10;top:calc(var(--space-unit) * 2);display:block;width:100%;height:112px;box-sizing:border-box;padding:0 calc(var(--space-unit) * 2);border-top:var(--border-size-medium) solid transparent;background:var(--color-white)}div.wrapper.isopen ::slotted([slot=\"content\"]){top:0;bottom:0;height:128px;padding:calc(var(--space-unit) * 2);border-color:var(--blue100)}";
+const stylesCss = "footer{position:relative;z-index:5;top:0;width:auto;height:calc(var(--space-unit) * 6);padding:0;border-top:var(--border-size-medium) solid var(--color-surface03);margin:0;background-color:var(--color-surface01);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-family:var(--font-family-sans);font-weight:var(--font-rg);transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.real,footer.trial,footer.temp{border-top:var(--border-size-medium) solid var(--blue100)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{overflow:hidden;height:40px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);margin:0;background-color:var(--color-surface01);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);line-height:22px;transition:all 200ms linear}footer.isopen>p{background-color:var(--gray200);font-size:14px;font-weight:var(--font-sb);transition:all 200ms linear}footer.isopen.real>p,footer.isopen.trial>p,footer.isopen.temp>p{background-color:var(--blue100)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{overflow:hidden;height:60px}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{overflow:hidden;height:20px;padding:0;margin:0;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}footer>div.content>div>p.year-isbn{display:flex;flex-direction:row;justify-content:space-between;padding-top:var(--space-unit)}footer>div.content>div>p.year-isbn>span.isbn{overflow:hidden;text-overflow:ellipsis}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;text-overflow:initial;white-space:initial}footer.isopen>div.content>div>p.year-isbn{height:50px;flex-direction:column;padding-left:0}footer.isopen>div.content>div>p.year-isbn>span.isbn{display:inline-grid;padding-left:0}footer.isopen{top:-212px;height:295px;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.isopen.custom-content>div.content{height:230px}.toggle{position:absolute;z-index:10;top:-24px;left:16px}.faded{opacity:0.3;pointer-events:none}footer>p.custom-content,footer .content.custom-content{display:none}footer.isopen>p.custom-content,footer.isopen .content.custom-content{display:block}div.wrapper{position:relative;height:100%}div.wrapper ::slotted([slot=\"content\"]){position:absolute;z-index:10;top:calc(var(--space-unit) * 2);display:block;width:100%;height:112px;box-sizing:border-box;padding:0 calc(var(--space-unit) * 2);border-top:var(--border-size-medium) solid transparent;background:var(--color-white)}div.wrapper.isopen ::slotted([slot=\"content\"]){top:0;bottom:0;height:128px;padding:calc(var(--space-unit) * 2);border-color:var(--blue100)}";
 const ZMyzCardFooterStyle0 = stylesCss;
 const ZMyzCardFooter$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooter extends HTMLElement {
@@ -62,7 +62,7 @@ const ZMyzCardFooter$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooter e
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (h("div", { key: '2355ce5bf7f86132e0ea79faaa7fb2ce7929e253', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '3ccb3f1f774258d7a25c67848142cc9424925ed0', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: '072816a3c2bc1cdd1ac691a8f8f1452b4c38f47d', class: "toggle" }, h("slot", { key: '2303be81faa22efd971ddd23664c65f6ad978113', name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '705cc32194d0f9a299785561c90fd87bd17f6506', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '631266505175cbc65aa8933350aa3d4aa05aa3d2' }, h("p", { key: '1c41fcd3eca98e064a3840d66674381d483ed992', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '3c85536ddd4b9ec90afb6526d4511a20d450f16d', title: this.getTitleAuthors() }, h("span", { key: '90228e4567255c5dec27cfabb025200e21bab63c', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'c1c94511536c15f8faa87b4f4e25c378fdd360f2', class: "year-isbn" }, h("span", { key: '39796f2025296859dd920d653a2ee94739d62fc9', class: "isbn" }, h("span", { key: 'a4c6930d1e4ada79bf9ef68501cae51003587082' }, h("span", { key: 'aeeadffeac35d8abd57d35fc7e7a80657baf53b2', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: 'b34741423e777b90d389f690508e02096aec0670', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: '58b736facd35b9618ba7e24787278578fc3270bf', name: "list" })))), this.customContent && h("slot", { name: "content" })));
+        return (h("div", { key: 'e5711063557dce84367650a81a3313e4d4755ca7', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '81fe8ba76037d6aabf6a34123ef7e16b9fdcf6bf', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: 'fe8a8eb5e9668ef98052aa77ea006e36e1da4362', class: "toggle" }, h("slot", { key: '1b31d051074a5c49783adced5ab8a08ffce34c2c', name: "toggle" })), this.titolo && h("p", { key: 'fd5184ba3211dcaec0fbbada7e66c2424e8683a1', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: 'eb56f5377d285fa66090865f3750267827a55b30', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '73df88cb7871a4aeb47414cdfb2c248f4cae0454' }, h("p", { key: 'bcee7b1836e87540bb9ea7a0dae9b20717acb84b', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '1a2741b228850ea9b438e2d0d3bbe161f1c58223', title: this.getTitleAuthors() }, h("span", { key: '78e8afea170e944a119670a1f3ff35d9b1e68cca', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: '46339663289bca4d4c0d18f5a8a1e5c7f967a2c7', class: "year-isbn" }, h("span", { key: '885b4e716717a5e7faf0b2cdd0eb0a120c6b02a5', class: "isbn" }, h("span", { key: '8eb8fe819c2208bcd85a4ff75bcea45d126bbcfd' }, h("span", { key: 'adce63e9a8982d61692c899da383374914db342d', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: 'b36ed0288ce7e14a3c8770cd097f712440d10c5b', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'f7eca7603fd10d49a68f7c41505d50ee185e206f', name: "list" })))), this.customContent && h("slot", { key: '4f80af2d5fe5bba71f5d1704f4816aa395effe88', name: "content" })));
     }
     get host() { return this; }
     static get style() { return ZMyzCardFooterStyle0; }

package/dist/components/z-myz-card-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-footer.js","mappings":"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","names":["ZMyzCardFooter"],"sources":["src/snowflakes/myz/card/z-myz-card-footer/styles.css?tag=z-myz-card-footer&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer/index.tsx"],"sourcesContent":["footer {\n position: relative;\n z-index: 5;\n top: 0;\n width: auto;\n height: calc(var(--space-unit) * 6);\n padding: 0;\n border-top: var(--border-size-medium) solid var(--color-surface03);\n margin: 0;\n background-color: var(--color-surface01);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.real,\nfooter.trial,\nfooter.temp {\n border-top: var(--border-size-medium) solid var(--blue100);\n}\n\nfooter .bold {\n font-family: var(--font-family-sans);\n font-weight: var(--font-sb);\n}\n\nfooter > p {\n overflow: hidden;\n height: 40px;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);\n margin: 0;\n background-color: var(--color-surface01);\n font-family: var(--font-family-sans);\n font-size: 16px;\n font-weight: var(--font-rg);\n line-height: 22px;\n transition: all 200ms linear;\n}\n\nfooter.isopen > p {\n background-color: var(--gray200);\n font-size: 14px;\n font-weight: var(--font-sb);\n transition: all 200ms linear;\n}\n\nfooter.isopen.real > p,\nfooter.isopen.trial > p,\nfooter.isopen.temp > p {\n background-color: var(--blue100);\n}\n\nfooter .visible {\n display: block;\n}\n\nfooter .hidden {\n display: none;\n}\n\nfooter > div.content {\n overflow: hidden;\n height: 60px;\n}\n\nfooter > div.content > div:not(.slot-handler) {\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nfooter > div.content > div > p {\n overflow: hidden;\n height: 20px;\n padding: 0;\n margin: 0;\n font-size: 14px;\n line-height: 20px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nfooter > div.content > div > p.year-isbn {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: var(--space-unit);\n}\n\nfooter > div.content > div > p.year-isbn > span.isbn {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\nfooter.isopen > div.content > div:not(.slot-handler) {\n height: 68px;\n}\n\nfooter.isopen > div.content > div > p.authors {\n height: 40px;\n text-overflow: initial;\n white-space: initial;\n}\n\nfooter.isopen > div.content > div > p.year-isbn {\n height: 50px;\n flex-direction: column;\n padding-left: 0;\n}\n\nfooter.isopen > div.content > div > p.year-isbn > span.isbn {\n display: inline-grid;\n padding-left: 0;\n}\n\nfooter.isopen {\n top: -212px;\n height: 295px;\n transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content {\n top: -292px;\n}\n\nfooter.isopen > div.content {\n height: 280px;\n transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content > div.content {\n height: 230px;\n}\n\n.toggle {\n position: absolute;\n z-index: 10;\n top: -24px;\n left: 16px;\n}\n\n.faded {\n opacity: 0.3;\n pointer-events: none;\n}\n\nfooter > p.custom-content,\nfooter .content.custom-content {\n display: none;\n}\n\nfooter.isopen > p.custom-content,\nfooter.isopen .content.custom-content {\n display: block;\n}\n\ndiv.wrapper {\n position: relative;\n height: 100%;\n}\n\ndiv.wrapper ::slotted([slot=\"content\"]) {\n position: absolute;\n z-index: 10;\n top: calc(var(--space-unit) * 2);\n display: block;\n width: 100%;\n height: 112px;\n box-sizing: border-box;\n padding: 0 calc(var(--space-unit) * 2);\n border-top: var(--border-size-medium) solid transparent;\n background: var(--color-white);\n}\n\ndiv.wrapper.isopen ::slotted([slot=\"content\"]) {\n top: 0;\n bottom: 0;\n height: 128px;\n padding: calc(var(--space-unit) * 2);\n border-color: var(--blue100);\n}\n","import {Element, Component, Prop, h, State, Listen} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/*\n @slot toggle - toggle button slot\n * @slot list - card resources list slot\n /\n@Component({\n tag: \"z-myz-card-footer\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardFooter {\n @Element() host: HTMLZMyzCardFooterElement;\n\n /* volume title /\n @Prop()\n titolo: string;\n\n /* authors name text /\n @Prop()\n autori: string;\n\n /* volume isbn /\n @Prop()\n isbn: string;\n\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* card graphic variant (optional) /\n @Prop()\n cardtype?: LicenseType;\n\n /* footer opened by default (optional) /\n @Prop()\n opened?: boolean = false;\n\n /* display footer custom slotted content */\n @Prop()\n customContent = false;\n\n @State()\n isOpen = false;\n\n @State()\n allowTooltipAuthors = false;\n\n private ellipsisAuthors?: HTMLElement;\n\n @Listen(\"toggleClick\")\n handleToggle(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n const firstElem = this.getFirstListItem();\n if (firstElem) {\n requestAnimationFrame(() => {\n firstElem.focus();\n });\n }\n }\n }\n\n private getTitleAuthors(): string {\n return this.allowTooltipAuthors ? this.autori : \"\";\n }\n\n componentWillLoad(): void {\n if (this.opened) {\n this.isOpen = true;\n }\n }\n\n private elementsEllipsis(): void {\n this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;\n }\n\n private elementAuthorsHasEllipsis(): boolean {\n return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;\n }\n\n private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n return {\n \"isopen\": this.isOpen,\n \"real\": this.cardtype === LicenseType.REAL,\n \"trial\": this.cardtype === LicenseType.TRIAL,\n \"temp\": this.cardtype === LicenseType.TEMP,\n \"custom-content\": this.customContent,\n };\n }\n\n private footerTransitionHandler(e: TransitionEvent): void {\n if ([\"visibility\", \"height\"].includes(e.propertyName)) {\n this.elementsEllipsis();\n }\n }\n\n private getFirstListItem(): HTMLElement {\n return this.host.querySelector(\"[slot=list] > li a\");\n }\n\n render(): HTMLDivElement {\n return (\n <div class={{...(this.retrieveClass() as Record<string, boolean>), wrapper: true}}>\n <footer\n class={this.retrieveClass()}\n onTransitionEnd={(e: TransitionEvent) => this.footerTransitionHandler(e)}\n >\n <span class=\"toggle\">\n <slot name=\"toggle\" />\n </span>\n {this.titolo && <p class={{\"custom-content\": this.customContent}}>{this.titolo}</p>}\n <div class={{\"content\": true, \"custom-content\": this.customContent}}>\n <div>\n <p\n class=\"authors\"\n ref={(el) => (this.ellipsisAuthors = el as HTMLElement)}\n >\n <span title={this.getTitleAuthors()}>\n <span\n aria-description=\"Autori\"\n class=\"bold\"\n >\n {this.autori}\n </span>\n </span>\n </p>\n <p class=\"year-isbn\">\n <span class=\"isbn\">\n <span>\n <span\n aria-description=\"ISBN edizione cartacea\"\n class=\"bold\"\n >\n {this.isbn}\n </span>{\" \"}\n (ed. cartacea)\n </span>\n </span>\n </p>\n </div>\n <div class={`slot-handler ${this.isOpen ? \"visible\" : \"hidden\"}`}>\n <slot name=\"list\" />\n </div>\n </div>\n </footer>\n {this.customContent && <slot name=\"content\" />}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-myz-card-footer.js","mappings":"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","names":["ZMyzCardFooter"],"sources":["src/snowflakes/myz/card/z-myz-card-footer/styles.css?tag=z-myz-card-footer&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer/index.tsx"],"sourcesContent":["footer {\n position: relative;\n z-index: 5;\n top: 0;\n width: auto;\n height: calc(var(--space-unit) * 6);\n padding: 0;\n border-top: var(--border-size-medium) solid var(--color-surface03);\n margin: 0;\n background-color: var(--color-surface01);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n transition:\n height 500ms ease-in-out,\n top 500ms ease-in-out;\n}\n\nfooter.real,\nfooter.trial,\nfooter.temp {\n border-top: var(--border-size-medium) solid var(--blue100);\n}\n\nfooter .bold {\n font-family: var(--font-family-sans);\n font-weight: var(--font-sb);\n}\n\nfooter > p {\n overflow: hidden;\n height: 40px;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);\n margin: 0;\n background-color: var(--color-surface01);\n font-family: var(--font-family-sans);\n font-size: 16px;\n font-weight: var(--font-rg);\n line-height: 22px;\n transition: all 200ms linear;\n}\n\nfooter.isopen > p {\n background-color: var(--gray200);\n font-size: 14px;\n font-weight: var(--font-sb);\n transition: all 200ms linear;\n}\n\nfooter.isopen.real > p,\nfooter.isopen.trial > p,\nfooter.isopen.temp > p {\n background-color: var(--blue100);\n}\n\nfooter .visible {\n display: block;\n}\n\nfooter .hidden {\n display: none;\n}\n\nfooter > div.content {\n overflow: hidden;\n height: 60px;\n}\n\nfooter > div.content > div:not(.slot-handler) {\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nfooter > div.content > div > p {\n overflow: hidden;\n height: 20px;\n padding: 0;\n margin: 0;\n font-size: 14px;\n line-height: 20px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nfooter > div.content > div > p.year-isbn {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: var(--space-unit);\n}\n\nfooter > div.content > div > p.year-isbn > span.isbn {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\nfooter.isopen > div.content > div:not(.slot-handler) {\n height: 68px;\n}\n\nfooter.isopen > div.content > div > p.authors {\n height: 40px;\n text-overflow: initial;\n white-space: initial;\n}\n\nfooter.isopen > div.content > div > p.year-isbn {\n height: 50px;\n flex-direction: column;\n padding-left: 0;\n}\n\nfooter.isopen > div.content > div > p.year-isbn > span.isbn {\n display: inline-grid;\n padding-left: 0;\n}\n\nfooter.isopen {\n top: -212px;\n height: 295px;\n transition:\n height 500ms ease-in-out,\n top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content {\n top: -292px;\n}\n\nfooter.isopen > div.content {\n height: 280px;\n transition:\n height 500ms ease-in-out,\n top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content > div.content {\n height: 230px;\n}\n\n.toggle {\n position: absolute;\n z-index: 10;\n top: -24px;\n left: 16px;\n}\n\n.faded {\n opacity: 0.3;\n pointer-events: none;\n}\n\nfooter > p.custom-content,\nfooter .content.custom-content {\n display: none;\n}\n\nfooter.isopen > p.custom-content,\nfooter.isopen .content.custom-content {\n display: block;\n}\n\ndiv.wrapper {\n position: relative;\n height: 100%;\n}\n\ndiv.wrapper ::slotted([slot=\"content\"]) {\n position: absolute;\n z-index: 10;\n top: calc(var(--space-unit) * 2);\n display: block;\n width: 100%;\n height: 112px;\n box-sizing: border-box;\n padding: 0 calc(var(--space-unit) * 2);\n border-top: var(--border-size-medium) solid transparent;\n background: var(--color-white);\n}\n\ndiv.wrapper.isopen ::slotted([slot=\"content\"]) {\n top: 0;\n bottom: 0;\n height: 128px;\n padding: calc(var(--space-unit) * 2);\n border-color: var(--blue100);\n}\n","import {Component, Element, Listen, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/*\n @slot toggle - toggle button slot\n * @slot list - card resources list slot\n /\n@Component({\n tag: \"z-myz-card-footer\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardFooter {\n @Element() host: HTMLZMyzCardFooterElement;\n\n /* volume title /\n @Prop()\n titolo: string;\n\n /* authors name text /\n @Prop()\n autori: string;\n\n /* volume isbn /\n @Prop()\n isbn: string;\n\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* card graphic variant (optional) /\n @Prop()\n cardtype?: LicenseType;\n\n /* footer opened by default (optional) /\n @Prop()\n opened?: boolean = false;\n\n /* display footer custom slotted content */\n @Prop()\n customContent = false;\n\n @State()\n isOpen = false;\n\n @State()\n allowTooltipAuthors = false;\n\n private ellipsisAuthors?: HTMLElement;\n\n @Listen(\"toggleClick\")\n handleToggle(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n const firstElem = this.getFirstListItem();\n if (firstElem) {\n requestAnimationFrame(() => {\n firstElem.focus();\n });\n }\n }\n }\n\n private getTitleAuthors(): string {\n return this.allowTooltipAuthors ? this.autori : \"\";\n }\n\n componentWillLoad(): void {\n if (this.opened) {\n this.isOpen = true;\n }\n }\n\n private elementsEllipsis(): void {\n this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;\n }\n\n private elementAuthorsHasEllipsis(): boolean {\n return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;\n }\n\n private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n return {\n \"isopen\": this.isOpen,\n \"real\": this.cardtype === LicenseType.REAL,\n \"trial\": this.cardtype === LicenseType.TRIAL,\n \"temp\": this.cardtype === LicenseType.TEMP,\n \"custom-content\": this.customContent,\n };\n }\n\n private footerTransitionHandler(e: TransitionEvent): void {\n if ([\"visibility\", \"height\"].includes(e.propertyName)) {\n this.elementsEllipsis();\n }\n }\n\n private getFirstListItem(): HTMLElement {\n return this.host.querySelector(\"[slot=list] > li a\");\n }\n\n render(): HTMLDivElement {\n return (\n <div class={{...(this.retrieveClass() as Record<string, boolean>), wrapper: true}}>\n <footer\n class={this.retrieveClass()}\n onTransitionEnd={(e: TransitionEvent) => this.footerTransitionHandler(e)}\n >\n <span class=\"toggle\">\n <slot name=\"toggle\" />\n </span>\n {this.titolo && <p class={{\"custom-content\": this.customContent}}>{this.titolo}</p>}\n <div class={{\"content\": true, \"custom-content\": this.customContent}}>\n <div>\n <p\n class=\"authors\"\n ref={(el) => (this.ellipsisAuthors = el as HTMLElement)}\n >\n <span title={this.getTitleAuthors()}>\n <span\n aria-description=\"Autori\"\n class=\"bold\"\n >\n {this.autori}\n </span>\n </span>\n </p>\n <p class=\"year-isbn\">\n <span class=\"isbn\">\n <span>\n <span\n aria-description=\"ISBN edizione cartacea\"\n class=\"bold\"\n >\n {this.isbn}\n </span>{\" \"}\n (ed. cartacea)\n </span>\n </span>\n </p>\n </div>\n <div class={`slot-handler ${this.isOpen ? \"visible\" : \"hidden\"}`}>\n <slot name=\"list\" />\n </div>\n </div>\n </footer>\n {this.customContent && <slot name=\"content\" />}\n </div>\n );\n }\n}\n"],"version":3}