npm - @zanichelli/albe-web-components - Versions diffs - 19.2.12-rc3 → 19.2.12 - Mend

@zanichelli/albe-web-components 19.2.12-rc3 → 19.2.12

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 (1449) hide show

package/dist/collection/components/table/z-tbody/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: '62b5b227fbdaac2918101db68c60cb68ae9e1ed8', role: "rowgroup" }, h("slot", { key: 'ecfc5c26435fb7f03b5e9ea89111499b3b75f3ca' })));
+        return (h(Host, { key: '9ffbee51d10b3318d8044e8f4f45beff637ce8a3', role: "rowgroup" }, h("slot", { key: '5143bbe7239e2804d24e634dba17e60060d1c6d0' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }
@@ -20,3 +20,4 @@ export class ZTbody {
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/z-tbody/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tbody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAErE;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n tag: \"z-tbody\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTbody implements ComponentInterface {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tfoot/index.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '0ecae481f9b2e870d3f4d8898755d15e561154b7', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '7d028233f9e6ff2bfdbcc5b00841db5eb5020643' })));
+        return (h(Host, { key: 'e200294dd24c6a58722245df0b90b8b562fd7293', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '0db022a1de8dcbe5457598ab55aacd7b07b9dcb4' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }
@@ -50,3 +50,4 @@ export class ZTfoot {
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/z-tfoot/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE3E;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;KAYhB;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC;YAEZ,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n tag: \"z-tfoot\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTfoot implements ComponentInterface {\n /**\n * If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host\n role=\"rowgroup\"\n tabIndex={-1}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-thead/index.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class ZThead {
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: 'a41caa6571e3a2e4c0b46df9c28507d347011c52', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'fbe9305e97ac906ce0296b871d65d33c75749bd1' })));
+        return (h(Host, { key: 'c32f2b2d2921e034d18d3b7121f59ee7b3b7b398', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'f74ef0383c4111415134df8ae1492fda11da8568' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }
@@ -75,3 +75,4 @@ export class ZThead {
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/z-thead/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEpF;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QAQE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;KAYrB;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n tag: \"z-thead\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n @Element() host: HTMLZTheadElement;\n\n /**\n * If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * The element is focusable\n */\n @Prop({reflect: true})\n isFocusable = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host\n role=\"rowgroup\"\n tabIndex={this.isFocusable ? 0 : -1}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tr/index.js CHANGED Viewed

@@ -68,7 +68,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: 'e045e79af9cf2e3c29b4eb180c840b4657c893a3', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '8715e76d1ed1d64693c069a22f3c50040933ee4d', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '3d10e01e6183299d8a03dbcc6586950f74148743', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'c43441d3fc106b2c0cf43c6def18bf0fc0062e7e', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '8ec3aaa2c05de39c19a9e8ff291c98f9b35478e3', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'a86066e86c9415b5eb03a0cd97d58e58ada095d2', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '92be779ec3e863cc85336fcedb02f718fa3a19fa', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '720c8209c21104e78129cbd76c12a6cdf8806ca2', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '3bb4f4d2e5ae60da5c105d1c8a99d6ff0fa59302', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'd27d18c1a4515ac055ce7db13ec3efdfc7d0314d', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '9fd14fcab4ea512b42c63928c3e2dabb83fd1da3', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c5fcb7a2f92eb8401c4d27d28e5b68a5001616b7', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }
@@ -147,3 +147,4 @@ export class ZTr {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/z-tr/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr implements ComponentInterface {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={this.expandable ? 0 : undefined}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tr/styles.css CHANGED Viewed

@@ -56,8 +56,8 @@
   background-color: var(--color-background);
 }
-:host(:hover) ::slotted(z-td),
-:host(:hover) ::slotted(z-th) {
+:host(:hover):has([tabIndex]) ::slotted(z-td),
+:host(:hover):has([tabIndex]) ::slotted(z-th) {
   border-top: var(--border-size-small) solid var(--color-surface04);
   border-bottom: var(--border-size-small) solid var(--color-surface04);
   background-color: var(--color-surface02);

package/dist/collection/components/z-accordion/index.js CHANGED Viewed

@@ -5,16 +5,8 @@ import { AccordionVariant, ControlSize } from "../../beans";
  *
  * @slot - Slot for the main content.
  * @slot tag - Slot for tags.
- * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
- * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
- * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
- * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
- * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
- * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
- * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
- * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
- * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
- * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
+ * @part summary - The summary element that is always visible and acts as the accordion's toggle.
+ * @part content - The content element that is shown or hidden when the accordion is toggled.
  */
 export class ZAccordion {
     constructor() {
@@ -71,7 +63,7 @@ export class ZAccordion {
         this.checkSlottedTags();
     }
     render() {
-        return (h("details", { key: '172a7daef5025f190bec2ac50755edd73930b002', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'afef8986b1c567de4d979f4352b060841e2d9915', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '4d96182e2f30cc0d8a4920854775a5daa2f551c5', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '339defc76d0ce353bff86e3c53067ceda6fa0350', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '9e25512f093b7770894aff7590d2a829ed48943b', class: "z-accordion-tags" }, h("slot", { key: 'f24b026310c4d00632a131502960dfdade72cf85', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: 'd930ae94ebc17c279626bcb4a94e5bcfbe490c3a', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '8d33c1ead662fa11c01acaae2a3ee2ee72278bbb', class: "z-accordion-content", part: "content" }, h("slot", { key: 'fba6c3dd4ae6905f7e5d179a7b6af2de7bb4f8ca' })))));
+        return (h("details", { key: '677f29eb9a981a8444c6de2966101caa04063bdc', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '498a94e2aec123598bcf6b4cd7d755b72726d9e9', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '09eec9beaa82d2a2f81de5c0ea2d5ebee856b190', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'dbf0026bd5a832300e17ec30da2cfaf7946d1c5e', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '21b3f6c772537d97100d593d5415f7d73bdaeab6', class: "z-accordion-tags" }, h("slot", { key: '676b85cf03540aad8a2797073e0376d23816635a', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: '45341fe9e93b6ceafb938b4345d065d684c40246', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: 'dea671e91b2ddd6e2666304452cc2b60b7b8fda4', class: "z-accordion-content", part: "content" }, h("slot", { key: '382274fc573c359786db1a5cc986b1cc400e2960' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -292,3 +284,4 @@ export class ZAccordion {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-accordion/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @part summary - The summary element that is always visible and acts as the accordion's toggle.\n * @part content - The content element that is shown or hidden when the accordion is toggled.\n */\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion implements ComponentInterface {\n @Element() host: HTMLZAccordionElement;\n\n /**\n * Text label.\n */\n @Prop()\n label: string;\n\n /**\n * Name of the z-icon to display before the label's text.\n */\n @Prop()\n icon: string;\n\n /**\n * Size of the component.\n */\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /**\n * Disabled state of the accordion.\n */\n @Prop({reflect: true})\n isDisabled = false;\n\n /**\n * The open state of the accordion.\n */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * Enable highlight band on the `summary`'s left edge.\n */\n @Prop({reflect: true})\n highlight = false;\n\n /**\n * Accordion variant.\n */\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /**\n * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n */\n @Prop({reflect: true})\n shadow = true;\n\n @State()\n private hasSlottedTags = false;\n\n /**\n * Event fired when the accordion is toggled.\n */\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /** Check if there is any content in the \"tag\" slot. */\n private checkSlottedTags(): void {\n this.hasSlottedTags = !!this.host.querySelector('[slot=\"tag\"]');\n }\n\n /**\n * Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n componentWillLoad(): void {\n this.checkSlottedTags();\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n {this.hasSlottedTags && (\n <span class=\"z-accordion-tags\">\n <slot\n name=\"tag\"\n onSlotchange={() => this.checkSlottedTags()}\n />\n </span>\n )}\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"]}

package/dist/collection/components/z-accordion/styles.css CHANGED Viewed

@@ -5,6 +5,18 @@
 }
 :host {
+  /**
+   * @prop --z-accordion-highlight-color: Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
+   * @prop --z-accordion-bg: Background color of the summary. Default: `--color-surface02`.
+   * @prop --z-accordion-label-color: Label color. Default: `--color-default-text`.
+   * @prop --z-accordion-disabled-label-color: Label color when disabled. Default: `--color-text03`.
+   * @prop --z-accordion-content-bg: Background color of the accordion. Default: `--color-surface02`.
+   * @prop --z-accordion-content-fg: Content text color. Default: `--color-default-text`.
+   * @prop --z-accordion-hover-color: Hover color of the summary. Default: `--color-surface03`.
+   * @prop --z-accordion-left-padding: Left padding of the summary. Default: `--space-unit` * 2.
+   * @prop --z-accordion-right-padding: Right padding of the summary. Default: `--space-unit`.
+   * @prop --z-accordion-label-font-weight: Font weight of the summary label. Default: `--font-sb`.
+   */
   --z-accordion-highlight-color: transparent;
   --z-accordion-bg: var(--color-surface01);
   --z-accordion-label-color: var(--color-default-text);

package/dist/collection/components/z-anchor-navigation/index.js CHANGED Viewed

@@ -35,7 +35,7 @@ export class ZAnchorNavigation {
         this.collapsedLabel = "salta a";
         /**
          * Explicitly collapse anchor navigation.
-         * If false will collapse automatically only on mobile.
+         * If false, it will collapse automatically only on mobile.
          */
         this.isCollapsed = false;
         /**
@@ -71,7 +71,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '39d74e83a12d8fa3284190da2becd9fbe2f88211', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: 'b7a98b737dfd5d2499c9626a4e4ee626d92896da', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'b28787b604e8e2ef9ae6a6f6d2e9b6e162ce37f3', ref: (el) => (this.nav = el) }, h("slot", { key: 'aaaa4ab016f1916fd6b4ee6723882862884538b0' }))));
+        return (h(Host, { key: 'c7b47d775e9e264fa5b7b6f4496fcf1dccd5f28c', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: '3651fe999b1f8ed710a43e01034e57759001e614', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'beb6bb3d1f77451e63213dbc638b209ab6d34c17', ref: (el) => (this.nav = el) }, h("slot", { key: '1b35a2604b89a924ebb029affec3bb33d8193f81' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {
@@ -158,7 +158,7 @@ export class ZAnchorNavigation {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Explicitly collapse anchor navigation.\nIf false will collapse automatically only on mobile."
+                    "text": "Explicitly collapse anchor navigation.\nIf false, it will collapse automatically only on mobile."
                 },
                 "getter": false,
                 "setter": false,
@@ -175,3 +175,4 @@ export class ZAnchorNavigation {
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-anchor-navigation/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;IAL9B;QAME;;;WAGG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAEvB;;;;;WAKG;QAEH,gBAAW,GAAG,IAAI,CAAC;QAEnB;;WAEG;QAEH,mBAAc,GAAG,SAAS,CAAC;QAE3B;;;WAGG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;KA6DnB;IAtDC;;OAEG;IACK,UAAU;QAChB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CACpE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAClE,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,KAAK,cAAc,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,aAAa;YAEnB,iEACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAEvC,IAAI,CAAC,cAAc,CACX;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation implements ComponentInterface {\n /**\n * If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n */\n @Prop({reflect: true})\n hideUnselected = false;\n\n /**\n * Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n */\n @Prop()\n autoCurrent = true;\n\n /**\n * Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed\n */\n @Prop()\n collapsedLabel = \"salta a\";\n\n /**\n * Explicitly collapse anchor navigation.\n * If false, it will collapse automatically only on mobile.\n */\n @Prop({reflect: true})\n isCollapsed = false;\n\n /**\n * Whether the mobile list is collapsed.\n */\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /** Reference to the nav element. */\n private nav: HTMLElement;\n\n /**\n * Set `aria-current` attribute to the anchors.\n */\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /**\n * Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host\n collapsed={this.collapsed}\n class=\"z-scrollbar\"\n >\n <z-button\n class=\"toggle\"\n size={ControlSize.SMALL}\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n {this.collapsedLabel}\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-app-header/index.js CHANGED Viewed

@@ -9,12 +9,6 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
  * @slot product-logo - To insert the product logo, it should be used with an img tag.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export class ZAppHeader {
     onStuck() {
@@ -198,7 +192,7 @@ export class ZAppHeader {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
         }
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (h("z-searchbar", { class: { "has-label": !!this.searchLabel }, value: this.searchString, placeholder: this.searchPlaceholder, label: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
     }
     renderProductLogos() {
         return (h(Fragment, null, this.enableZLogo && (h("span", { class: "z-logo" }, h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (h("span", { class: "product-logo" }, h("slot", { name: "product-logo" })))));
@@ -280,7 +274,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'dba00e6ba8614f38c6382a42420430ee44d61757', "menu-length": this.menuLength }, h("div", { key: '14462adce8a9cb03fe571a4eea4c1356d77d49d5', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '18f406f950a9f2946d5c1c74e5c3a52c9f139069', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '1e74736f45625644289425d0e5cc6c825c6ac2b9', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '747325238cde4fb40d8448c58e4b6483ca049f28', name: "top-subtitle" }))), h("div", { key: '8d5159eabc8cddbb3fdc2227be62b5b1f318b1d4', class: "heading-title" }, h("slot", { key: '64c48e48e13c50d367fb52ed509d25cacbbc85da', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '990a282a81bd96d2524d3fbfff1dabce807824d9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '0048e85cccd48f1a9e587dc40bfc54ebf6c603bc', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '41423d5aa2004b61c6d9ef0342013598e4e59d55', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '4e12bbc0d9a8b54ecec94b1b12ad456ebcdb5bec', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a48e907303247432d294871a6810e996cc6f48f4', "menu-length": this.menuLength }, h("div", { key: '094aee9d0964cdcec17acde3ec7eaa1767b8ae31', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '0635f1f529b2f3e25db7bfc55579c3c3bd8995cb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'a2104e8dd013fca97b2af2e57e95e108b423ecbd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: 'a6a7899aba37a27e24982567bc1b7242f4b9bf1b', name: "top-subtitle" }))), h("div", { key: 'e47339a0a8d9aaee0bd87c0cdf1434e553051030', class: "heading-title" }, h("slot", { key: '1212a43bb3d52591a53aea6fb587723750204578', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '9166a624ad670c914d630b3b5bb46877d46883c8', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'a39bc8d9020b6243e4b6ce885f0cfc52d8bd8d95', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'b58bbc10d6385c6b9404a47c512e912c22650d85', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'c50f81c40e06360ca293172752095155f2f574d4', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -356,6 +350,25 @@ export class ZAppHeader {
                 "attribute": "enable-search",
                 "defaultValue": "false"
             },
+            "searchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label for the search bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-label"
+            },
             "searchPlaceholder": {
                 "type": "string",
                 "mutable": false,
@@ -537,3 +550,4 @@ export class ZAppHeader {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-app-header/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n */\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /**\n * Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n */\n @Prop({reflect: true})\n stuck = false;\n\n /**\n * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n */\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /**\n * Enable the search bar.\n */\n @Prop({reflect: true})\n enableSearch = false;\n\n /**\n * Visible label for the search bar.\n */\n @Prop()\n searchLabel?: string;\n\n /**\n * Placeholder text for the search bar.\n */\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /**\n * Label of the search button.\n */\n @Prop()\n searchButtonLabel?: string;\n\n /**\n * Search string for the search bar.\n */\n @Prop({mutable: true})\n searchString = \"\";\n\n /**\n * Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n */\n @Prop()\n searchPageUrl: string;\n\n /**\n * Enable laZ logo.\n */\n @Prop({reflect: true})\n enableZLogo = true;\n\n /**\n * The opening state of the drawer.\n */\n @Prop({mutable: true})\n drawerOpen = false;\n\n /**\n * Emitted when the `stuck` state of the header changes\n */\n @Event()\n sticking: EventEmitter;\n\n /**\n * The stuck state of the bar.\n */\n @State()\n private _stuck = false;\n\n /**\n * Current count of menu items.\n */\n @State()\n private menuLength: number;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeDrawerButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (!this.container) {\n return;\n }\n\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window | Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body || parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n }\n this.setMenuFloatingMode();\n }\n\n /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n private onOffcanvasKeydown(ev: KeyboardEvent): void {\n if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n return;\n }\n\n const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n if (closestMenu) {\n ev.preventDefault();\n ev.stopPropagation();\n // restore tabindex to the zmenu containing the focused element\n closestMenu.htmlTabindex = 0;\n this.closeDrawerButton.focus();\n } else if (ev.target === this.closeDrawerButton) {\n ev.preventDefault();\n ev.stopPropagation();\n if (ev.shiftKey) {\n // give focus to the last open menu if any or the last menu otherwhise\n (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n } else {\n // give focus to the first open menu if any or the first menu otherwhise\n (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n }\n }\n }\n\n /** Close each menu except the one receiving focus/click, if any */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent | PointerEvent): void {\n const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n if (targetMenu) {\n this.menuElements.forEach((menu) => {\n if (menu === targetMenu) {\n return;\n }\n\n menu.htmlTabindex = -1;\n if (!this.drawerOpen) {\n menu.open = false;\n }\n });\n } else if (!this.drawerOpen) {\n this.menuElements.forEach((menu) => {\n menu.open = false;\n });\n }\n }\n\n @Listen(\"keydown\", {passive: true})\n handleKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n class={{\"has-label\": !!this.searchLabel}}\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n label={this.searchLabel}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile || this.isTablet}\n searchButtonLabel={this.isMobile || this.isTablet ? undefined : this.searchButtonLabel}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderProductLogos(): HTMLElement | null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas || this._stuck || this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n onKeyDown={this.onOffcanvasKeydown}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeDrawerButton = el)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n {((!this.enableSearch && this.isMobile) || !this.isMobile) && (\n <div class={{\"top-subtitle\": true, \"has-product-logo\": hasTopSubtitle && this.hasSlot(\"product-logo\")}}>\n <slot name=\"top-subtitle\" />\n </div>\n )}\n <div class=\"heading-title\">\n <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n {!this._stuck && this.renderProductLogos()}\n <slot name=\"title\" />\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title || undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title || undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-app-header/styles.css CHANGED Viewed

@@ -1,20 +1,17 @@
 :host {
+  /**
+   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.
+   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.
+   */
   --app-header-content-max-width: ;
-  /* Variable to set stuck header and drawer's top offset.
-  Useful when something is absolutely positioned above the header. */
   --app-header-top-offset: ;
-  /* Variable to customize header background color. */
   --app-header-bg: ;
-  /* Variable to customize text and icon color. */
   --app-header-text-color: ;
-  /* Variable to customize stuck header background color. */
   --app-header-stucked-bg: ;
-  /* Variable to customize stuck header's text and icon color. */
   --app-header-stucked-text-color: ;
   position: relative;
@@ -28,7 +25,6 @@
 }
 .heading-panel {
-  /* Title's line height. */
   --title-line-height: 1.333;
   --title-font-size: var(--font-size-6);
@@ -206,6 +202,10 @@ z-searchbar {
   align-items: center;
 }
+z-searchbar.has-label {
+  align-items: flex-end;
+}
 .heading-stuck {
   position: fixed;
   z-index: 20;

package/dist/collection/components/z-aria-alert/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '13857c631b48af312fa399d224dd299d24ad7026', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b5f4501e8230e2d669eb24d431a39e58232eab20' })));
+        return (h(Host, { key: '93bfcc69e5d7d76af5deec0c12cee5db73788a5c', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '7dcfd72ecc06605e78ae738f837cec969997ef7d' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {
@@ -41,3 +41,4 @@ export class ZAriaAlert {
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-aria-alert/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-aria-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAM3C,MAAM,OAAO,UAAU;IAJvB;QAKE,qBAAqB;QAErB,SAAI,GAAmB,cAAc,CAAC,MAAM,CAAC;KAa9C;IAXC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n tag: \"z-aria-alert\",\n shadow: false,\n})\nexport class ZAriaAlert implements ComponentInterface {\n /** Aria live mode */\n @Prop()\n mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n render(): HTMLZAriaAlertElement {\n return (\n <Host\n aria-live={this.mode}\n aria-atomic=\"true\"\n aria-relevant=\"additions\"\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-avatar/index.js CHANGED Viewed

@@ -25,10 +25,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '0193c1b81b0b8770c8bd1f807d128a110e6bdce9', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '3543824c05f276cddcc91263350962015dc2beb8', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: 'c14637da56b4861d00a40d3b976293b3d9580dab' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'bfda459b40de8ece37f6fb3457d9b90d2986b7f0', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '4a143ab81b55fae15ab40e3847c6c911c861f13b' }, this.text.substring(0, 2)), this.image && (h("img", { key: '2e37f8abd25c574371fe1a0f7d08af028fc1b342', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -152,3 +152,4 @@ export class ZAvatar {
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-avatar/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AAOvC,MAAM,OAAO,OAAO;IAqBlB;;QApBA,6BAA6B;QAE7B,SAAI,GAAgB,UAAU,CAAC,MAAM,CAAC;QAMtC,mCAAmC;QAEnC,cAAS,GAAY,aAAa,CAAC;QAEnC,yCAAyC;QAEzC,oBAAe,GAAY,SAAS,CAAC;QAOnC,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE,CAAC;YACxD,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;QACjF,CAAC;KACF;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YACnC,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;YAC3C,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAC1C,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,IAAI,EAAC,EACnE,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;gBACjC,eAAe,EAAE,SAAS,IAAI,CAAC,eAAe,GAAG;aAClD;YAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;YACpE,IAAI,CAAC,KAAK,IAAI,CACb,4DACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAChC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n tag: \"z-avatar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAvatar implements ComponentInterface {\n /** [optional] Avatar size */\n @Prop()\n size?: AvatarSize = AvatarSize.MEDIUM;\n\n /** [optional] Avatar text */\n @Prop()\n text?: string;\n\n /** [optional] Avatar text color */\n @Prop()\n textColor?: string = \"color-white\";\n\n /** [optional] Avatar background color */\n @Prop()\n backgroundColor?: string = \"gray700\";\n\n /** [optional] Avatar image */\n @Prop({mutable: true})\n image?: string;\n\n constructor() {\n if (this.text?.length === 0 && this.image?.length === 0) {\n console.warn(\"z-avatar must contain at least one prop between text and image\");\n }\n }\n\n private getTextSize(): string {\n if (this.size === AvatarSize.SMALL) {\n return \"5\";\n } else if (this.size === AvatarSize.MEDIUM) {\n return \"4\";\n } else if (this.size === AvatarSize.LARGE) {\n return \"2\";\n }\n }\n\n render(): HTMLZAvatarElement {\n return (\n <Host\n class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n style={{\n color: `var(--${this.textColor})`,\n backgroundColor: `var(--${this.backgroundColor})`,\n }}\n >\n {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n {this.image && (\n <img\n src={this.image}\n onError={() => (this.image = \"\")}\n />\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-book-cover/index.js CHANGED Viewed

@@ -7,10 +7,6 @@ import defaultFallbackCover from "../../assets/images/png/placeholder-cover.png"
  * Alignment of the image inside the container can be customized via CSS properties.
  *
  * @slot coverOverlay - Content to be displayed over the cover image (e.g. a label). The overlay is positioned at the bottom of the cover. Has some default styling (such as the colored background) that can be customized via CSS.
- * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
- * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
- * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
- * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
  */
 export class ZBookCover {
     constructor() {
@@ -21,7 +17,7 @@ export class ZBookCover {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2d26511d2f6c57adf2b20c0a98b86b5c18ca3b55' }, this.multiple && (h(Fragment, { key: '79279147bd5526ec381ee54681e70f2601f7d606' }, h("div", { key: 'a58d293a70ae353b24deda1917ba06b46cd6cb69', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '34496473686299a655126cd1222d1ae88eadada8', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: 'd3ffeff92bfcb9a4cfc8a1d250e03bcbb8de8aa1', class: "cover-container" }, h("img", { key: '9e05370d50d32cdcf7c0ffed6f0c9db11219b393', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: 'dc7b2f10a9762234f43cd0857bbd6471f1d061e8', name: "coverOverlay" }))));
+        return (h(Host, { key: '407e954f3f8cb933aff3b404b7f3e1643798cf67' }, this.multiple && (h(Fragment, { key: 'c0c1e4caa27986a9c6e28733f4f8fe62e4dbea77' }, h("div", { key: 'dcaeeb60be98ce88fad97775307a5a339c0b47f9', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: 'b56848110f5c895b9d3301daba51d6d01659a63c', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '019936f586e758c4f5c0f6694d5c2291c222869b', class: "cover-container" }, h("img", { key: 'f0e6af812e6b1575396c16470090969cf19571aa', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '6556420f0cba2f2cac412b1386124c0b8e72db52', name: "coverOverlay" }))));
     }
     static get is() { return "z-book-cover"; }
     static get encapsulation() { return "shadow"; }
@@ -118,3 +114,4 @@ export class ZBookCover {
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-book-cover/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-book-cover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACrF,OAAO,oBAAoB,MAAM,+CAA+C,CAAC;AAEjF;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;IALvB;QAcE,qEAAqE;QAErE,aAAQ,GAAG,KAAK,CAAC;QAEjB,oGAAoG;QAEpG,aAAQ,GAAG,KAAK,CAAC;KAuBlB;IArBC,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,CAChB,EAAC,QAAQ;gBACP,4DAAK,KAAK,EAAC,mCAAmC,GAAO;gBACrD,4DAAK,KAAK,EAAC,mCAAmC,GAAO,CAC5C,CACZ;YACD,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DACE,GAAG,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,oBAAoB,iBAC3B,MAAM,EAClB,GAAG,EAAC,EAAE,EACN,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,oBAAoB,CAAC,GACxE;gBACF,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Fragment, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../assets/images/png/placeholder-cover.png\";\n\n/**\n * This component displays a book cover image,\n * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.\n * The aspect ratio of the cover image is preserved.\n * Alignment of the image inside the container can be customized via CSS properties.\n *\n * @slot coverOverlay - Content to be displayed over the cover image (e.g. a label). The overlay is positioned at the bottom of the cover. Has some default styling (such as the colored background) that can be customized via CSS.\n */\n@Component({\n tag: \"z-book-cover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBookCover implements ComponentInterface {\n /** URL of the cover image. */\n @Prop()\n cover: string;\n\n /** URL of the fallback cover image. */\n @Prop()\n fallbackCover: string;\n\n /** Whether to show a stack of covers to represent multiple books. */\n @Prop({reflect: true})\n multiple = false;\n\n /** Whether to apply a border around the cover image (always applied when `multiple` is enabled). */\n @Prop({reflect: true})\n bordered = false;\n\n render(): HTMLZBookCoverElement {\n return (\n <Host>\n {this.multiple && (\n <Fragment>\n <div class=\"shifted-stack-cover stack-cover-2\"></div>\n <div class=\"shifted-stack-cover stack-cover-1\"></div>\n </Fragment>\n )}\n <div class=\"cover-container\">\n <img\n src={this.cover ?? defaultFallbackCover}\n aria-hidden=\"true\"\n alt=\"\"\n onError={() => (this.cover = this.fallbackCover || defaultFallbackCover)}\n />\n <slot name=\"coverOverlay\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-book-cover/styles.css CHANGED Viewed

@@ -5,6 +5,12 @@
 }
 :host {
+  /**
+   * @prop --z-book-cover-height: height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
+   * @prop --z-book-cover-border-radius: border radius of the book cover (default: `var(--border-radius)`)
+   * @prop --z-book-cover-stack-shift-x: the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
+   * @prop --z-book-cover-stack-shift-y: the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
+   */
   --z-book-cover-height: 378px;
   --z-book-cover-border-radius: var(--border-radius);
   --z-book-cover-stack-shift-x: 8px;

package/dist/collection/components/z-breadcrumb/index.js CHANGED Viewed

@@ -205,10 +205,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: '78ee363186910bdb6563e459cac4958a4a5a1862', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'ea14aa3cc66e2b925b859c48f234ac4c19504191', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '84c8968de32dd42b1c186c3e21ef455ed3419b1b', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'a33b0ec178cf876482c3c598be9b08f3af192e74', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '5b15b47dbcadf31f3a933156a29e4c08f39df662' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'b73a28050ec43c5441b675b497236ae0210b6657' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -412,3 +412,4 @@ export class ZBreadcrumb {
             }];
     }
 }
+//# sourceMappingURL=index.js.map