npm - @zanichelli/albe-web-components - Versions diffs - 20.0.0-RC1 → 20.0.1 - Mend

@zanichelli/albe-web-components 20.0.0-RC1 → 20.0.1

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

package/dist/cjs/z-book-card.cjs.entry.js CHANGED Viewed

@@ -21,7 +21,11 @@ const ZBookCard = class {
         this.isbnLabel = "";
         /** [optional] Value for the `target` attribute of the links created by `ebookUrl` prop. */
         this.linkTarget = "_blank";
-        /** Whether to show a stack of covers to represent multiple books (only for `portrait` variant). */
+        /**
+         * Whether to show a stack of covers to represent multiple books.
+         * Only takes effect when `variant` is `portrait`: in `landscape` it is silently ignored and no
+         * cover stack is rendered, regardless of its value.
+         */
         this.hasMultipleCovers = false;
     }
     emitEbookClick() {
@@ -82,7 +86,7 @@ const ZBookCard = class {
         return index.h("slot", { name: "cta" });
     }
     render() {
-        return (index.h(index.Host, { key: '51452a17d92d9cf92a12134fff963165748519e3' }, index.h("div", { key: 'f5ac7d525b4b25fda20b1772d5508d8e2e528cfd', class: "main-content" }, this.renderCover(), index.h("div", { key: 'ea9ef02b1f7acc53a442d5aa03e320a92fe4b57d', class: "card-info" }, index.h("div", { key: '194da8efc4f1f3e9e3a1549a86be1474f68873da', class: "top" }, index.h("div", { key: '522ae3f38eba5d95f1e8fc1239ec59fe7df32935' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), index.h("slot", { key: '62869a3e3965c0f7611cc93e16c8c660b369ca17', name: "tags" }), index.h("slot", { key: '15c733e6644af2de263b0184f4c395ce967d773b', name: "data" })), index.h("slot", { key: 'eab8052dc791068b689e5d3cb95c0031fac19a9e', name: "ebook" }, !!this.ebookUrl && index.h("div", { key: '688bf22e1da5a8cd330aaccdb8d4fb7974f368bb', class: "bottom" }, this.renderEbook())))), index.h("slot", { key: '50d18fb8b88035ecb1d896eb199e7907c08872f1', name: "apps" })));
+        return (index.h(index.Host, { key: '8740c7a7f7611c13c0b87ef9354418d4a7a2a9db' }, index.h("div", { key: '8c87599e1edda794143dd81223529001f3c2044a', class: "main-content" }, this.renderCover(), index.h("div", { key: '510c2d7625eeef37b8ad7f540db7fa5782d7fa6d', class: "card-info" }, index.h("div", { key: '50fb759793762547eb0c82247ff9a3fc9029d6e1', class: "top" }, index.h("div", { key: 'd9e0372e46d5d2cc26b5823e2335764336376566' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), index.h("slot", { key: '900a1778db6c06d5bc23a37400416b61a61a27e2', name: "tags" }), index.h("slot", { key: '9e53b87038cd44171613ab6c54a68d88aada3e74', name: "data" })), index.h("slot", { key: '53dd0d14ad5f3ad8b66d48d187d6e0898ed7a490', name: "ebook" }, !!this.ebookUrl && index.h("div", { key: '3edf0a447799584a766e159b019f8b5f48e1170a', class: "bottom" }, this.renderEbook())))), index.h("slot", { key: 'b1a58f989315ba1346f20686fb1077ad0ba1ae44', name: "apps" })));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/z-book-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-book-card.cjs.entry.js","mappings":"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","names":["stylesCss","BookCardVariant","h","ControlSize","Host"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-book-card-portrait-cover-height: Set custom cover height for portrait variant - Default: `378px`\n * @prop --z-book-card-title-lines: Set title avilable lines - Default: `2`\n * @prop --z-book-card-title-word-break: Set title word-break rule - Default: `initial`\n * @prop --z-book-card-subtitle-lines: Set subtitle available lines - Default: `1`\n * @prop --z-book-card-subtitle-word-break: Set subtitle word-break rule - Default: `break-all`\n * @prop --z-book-card-authors-lines: Set authors available lines - Default: `1`\n * @prop --z-book-card-authors-word-break: Set authors word-break rule - Default: `break-all`\n /\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.main-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n.main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: flex-end;\n justify-content: center;\n border-radius: var(--border-radius);\n}\n\n.main-content .cover z-book-cover {\n --z-book-cover-height: var(--z-book-card-portrait-cover-height);\n}\n\n.main-content a.cover:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n.main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n.main-content .card-info .top .ellipsis.opera-title {\n height: auto;\n max-height: calc(1.5rem * var(--z-book-card-title-lines));\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n.main-content .card-info .top .ellipsis.volume-title {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n.main-content .card-info .top .ellipsis.authors {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-authors-lines));\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n.main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n.main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .bottom .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n.main-content .card-info .bottom .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .bottom .ebook .app-name .ebook-logo {\n width: 1.5rem;\n height: 1.5rem;\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n width: 635px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover z-book-cover {\n --z-book-cover-height: 300px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info,\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family /\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n / font-weight /\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n / font-size type scale /\n --font-size-1: 0.75rem; / 12px /\n --font-size-2: 0.875rem; / 14px /\n --font-size-3: 1rem; / assuming 16px /\n --font-size-4: 1.125rem; / 18px /\n --font-size-5: 1.25rem; / 20px /\n --font-size-6: 1.5rem; / 24px /\n --font-size-7: 1.75rem; / 28px /\n --font-size-8: 2rem; / 32px /\n --font-size-9: 2.25rem; / 36px /\n --font-size-10: 2.625rem; / 42px /\n --font-size-11: 3rem; / 48px /\n --font-size-12: 3.375rem; / 54px /\n --font-size-13: 3.75rem; / 60px /\n --font-size-14: 4.25rem; / 68px /\n --font-size-15: 4.75rem; / 76px /\n --font-size-16: 5.25rem; / 84px /\n --font-size-17: 5.75rem; / 92px /\n\n / cssprops to use with `font` shorthand property /\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/ Typography classes /\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/ section title /\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/ heading-1/2 for desktop and wide viewports /\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/ viewport classes /\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/ font-weight variants /\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/\n @slot cta - Top right cta (e.g. bookmark icon)\n * @slot ebook - As default, it shows laZ ebook link\n * @slot tags - Tags section, default empty\n * @slot data - External link and pill, default empty\n * @slot apps - List of card-related apps, default empty\n * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot\n /\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../../tokens/typography.css\", \"../../css-components/z-link/styles.css\"],\n shadow: true,\n})\nexport class ZBookCard implements ComponentInterface {\n @Element() hostElement: HTMLZBookCardElement;\n\n /* Card variant: landscape, portrait /\n @Prop({reflect: true})\n variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n /* Cover URL /\n @Prop()\n cover: string;\n\n /* Opera title (card title) /\n @Prop()\n operaTitle: string;\n\n /* [optional] Volume title (card subvolume) /\n @Prop()\n volumeTitle?: string;\n\n /* [optional] Authors /\n @Prop()\n authors?: string;\n\n /* [optional] Main ISBN /\n @Prop()\n isbn?: string;\n\n /* [optional] ISBN label /\n @Prop()\n isbnLabel = \"\";\n\n /* [optional] year /\n @Prop()\n year?: string;\n\n /* [optional] Link to the ebook resource. Creates a link also around the cover and title. /\n @Prop()\n ebookUrl?: string;\n\n /* [optional] Value for the `target` attribute of the links created by `ebookUrl` prop. /\n @Prop()\n linkTarget = \"_blank\";\n\n /* [optional] Fallback cover URL. /\n @Prop()\n fallbackCover?: string;\n\n /* Whether to show a stack of covers to represent multiple books (only for `portrait` variant). /\n @Prop()\n hasMultipleCovers = false;\n\n /* [optional] Set a specific heading level as html tag for the title. /\n @Prop()\n titleHtmlTag?: string;\n\n /* click on ebook link /\n @Event()\n ebookClick: EventEmitter;\n\n /* click on cover link /\n @Event()\n coverClick: EventEmitter;\n\n /* click on title link */\n @Event()\n titleClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitCoverClick(): void {\n this.coverClick.emit();\n }\n\n private emitTitleClick(): void {\n this.titleClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n const CoverTag = this.ebookUrl ? \"a\" : \"div\";\n const coverAttrs = this.ebookUrl\n ? {\n href: this.ebookUrl,\n onClick: () => this.emitCoverClick(),\n target: this.linkTarget,\n }\n : {};\n\n return (\n <CoverTag\n class=\"cover\"\n {...coverAttrs}\n >\n <z-book-cover\n cover={this.cover}\n fallbackCover={this.fallbackCover}\n multiple={this.hasMultipleCovers && this.variant === BookCardVariant.PORTRAIT}\n >\n <slot\n name=\"coverOverlay\"\n slot=\"coverOverlay\"\n ></slot>\n </z-book-cover>\n </CoverTag>\n );\n }\n\n private renderYear(): null \| HTMLDivElement {\n if (!this.year) {\n return null;\n }\n\n return (\n <div\n class=\"year ellipsis body-4\"\n aria-description=\"anno\"\n >\n {this.year}\n </div>\n );\n }\n\n private renderAuthors(): null \| HTMLDivElement {\n if (!this.authors) {\n return null;\n }\n\n return (\n <div class=\"cta-wrapper\">\n <div\n class=\"authors ellipsis body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.titleHtmlTag\n ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n : this.operaTitle;\n\n const operaTitle = (\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n );\n\n return (\n <div class=\"cta-wrapper\">\n {this.ebookUrl ? (\n <a\n class=\"z-link\"\n href={this.ebookUrl}\n onClick={() => this.emitTitleClick()}\n target={this.linkTarget}\n >\n {operaTitle}\n </a>\n ) : (\n operaTitle\n )}\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null \| HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null \| HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">laZ Ebook</div>\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target={this.linkTarget}\n onClick={() => this.emitEbookClick()}\n htmlRole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-book-card.cjs.entry.js","mappings":"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","names":["stylesCss","BookCardVariant","h","ControlSize","Host"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-book-card-portrait-cover-height: Set custom cover height for portrait variant - Default: `378px`\n * @prop --z-book-card-title-lines: Set title avilable lines - Default: `2`\n * @prop --z-book-card-title-word-break: Set title word-break rule - Default: `initial`\n * @prop --z-book-card-subtitle-lines: Set subtitle available lines - Default: `1`\n * @prop --z-book-card-subtitle-word-break: Set subtitle word-break rule - Default: `break-all`\n * @prop --z-book-card-authors-lines: Set authors available lines - Default: `1`\n * @prop --z-book-card-authors-word-break: Set authors word-break rule - Default: `break-all`\n /\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.main-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n.main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: flex-end;\n justify-content: center;\n border-radius: var(--border-radius);\n}\n\n.main-content .cover z-book-cover {\n --z-book-cover-height: var(--z-book-card-portrait-cover-height);\n}\n\n.main-content a.cover:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n.main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n.main-content .card-info .top .ellipsis.opera-title {\n height: auto;\n max-height: calc(1.5rem * var(--z-book-card-title-lines));\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n.main-content .card-info .top .ellipsis.volume-title {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n.main-content .card-info .top .ellipsis.authors {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-authors-lines));\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n.main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n.main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .bottom .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n.main-content .card-info .bottom .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .bottom .ebook .app-name .ebook-logo {\n width: 1.5rem;\n height: 1.5rem;\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n width: 635px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover z-book-cover {\n --z-book-cover-height: 300px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info,\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family /\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n / font-weight /\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n / font-size type scale /\n --font-size-1: 0.75rem; / 12px /\n --font-size-2: 0.875rem; / 14px /\n --font-size-3: 1rem; / assuming 16px /\n --font-size-4: 1.125rem; / 18px /\n --font-size-5: 1.25rem; / 20px /\n --font-size-6: 1.5rem; / 24px /\n --font-size-7: 1.75rem; / 28px /\n --font-size-8: 2rem; / 32px /\n --font-size-9: 2.25rem; / 36px /\n --font-size-10: 2.625rem; / 42px /\n --font-size-11: 3rem; / 48px /\n --font-size-12: 3.375rem; / 54px /\n --font-size-13: 3.75rem; / 60px /\n --font-size-14: 4.25rem; / 68px /\n --font-size-15: 4.75rem; / 76px /\n --font-size-16: 5.25rem; / 84px /\n --font-size-17: 5.75rem; / 92px /\n\n / cssprops to use with `font` shorthand property /\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/ Typography classes /\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/ section title /\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/ heading-1/2 for desktop and wide viewports /\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/ viewport classes /\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/ font-weight variants /\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/\n @slot cta - Top right cta (e.g. bookmark icon)\n * @slot ebook - As default, it shows laZ ebook link\n * @slot tags - Tags section, default empty\n * @slot data - External link and pill, default empty\n * @slot apps - List of card-related apps, default empty\n * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot\n /\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../../tokens/typography.css\", \"../../css-components/z-link/styles.css\"],\n shadow: true,\n})\nexport class ZBookCard implements ComponentInterface {\n @Element() hostElement: HTMLZBookCardElement;\n\n /* Card variant: landscape, portrait /\n @Prop({reflect: true})\n variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n /* Cover URL /\n @Prop()\n cover: string;\n\n /* Opera title (card title) /\n @Prop()\n operaTitle: string;\n\n /* [optional] Volume title (card subvolume) /\n @Prop()\n volumeTitle?: string;\n\n /* [optional] Authors /\n @Prop()\n authors?: string;\n\n /* [optional] Main ISBN /\n @Prop()\n isbn?: string;\n\n /* [optional] ISBN label /\n @Prop()\n isbnLabel = \"\";\n\n /* [optional] year /\n @Prop()\n year?: string;\n\n /* [optional] Link to the ebook resource. Creates a link also around the cover and title. /\n @Prop()\n ebookUrl?: string;\n\n /* [optional] Value for the `target` attribute of the links created by `ebookUrl` prop. /\n @Prop()\n linkTarget = \"_blank\";\n\n /* [optional] Fallback cover URL. /\n @Prop()\n fallbackCover?: string;\n\n /\n Whether to show a stack of covers to represent multiple books.\n * Only takes effect when `variant` is `portrait`: in `landscape` it is silently ignored and no\n * cover stack is rendered, regardless of its value.\n /\n @Prop()\n hasMultipleCovers = false;\n\n /* [optional] Set a specific heading level as html tag for the title. /\n @Prop()\n titleHtmlTag?: string;\n\n /* click on ebook link /\n @Event()\n ebookClick: EventEmitter;\n\n /* click on cover link /\n @Event()\n coverClick: EventEmitter;\n\n /* click on title link */\n @Event()\n titleClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitCoverClick(): void {\n this.coverClick.emit();\n }\n\n private emitTitleClick(): void {\n this.titleClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n const CoverTag = this.ebookUrl ? \"a\" : \"div\";\n const coverAttrs = this.ebookUrl\n ? {\n href: this.ebookUrl,\n onClick: () => this.emitCoverClick(),\n target: this.linkTarget,\n }\n : {};\n\n return (\n <CoverTag\n class=\"cover\"\n {...coverAttrs}\n >\n <z-book-cover\n cover={this.cover}\n fallbackCover={this.fallbackCover}\n multiple={this.hasMultipleCovers && this.variant === BookCardVariant.PORTRAIT}\n >\n <slot\n name=\"coverOverlay\"\n slot=\"coverOverlay\"\n ></slot>\n </z-book-cover>\n </CoverTag>\n );\n }\n\n private renderYear(): null \| HTMLDivElement {\n if (!this.year) {\n return null;\n }\n\n return (\n <div\n class=\"year ellipsis body-4\"\n aria-description=\"anno\"\n >\n {this.year}\n </div>\n );\n }\n\n private renderAuthors(): null \| HTMLDivElement {\n if (!this.authors) {\n return null;\n }\n\n return (\n <div class=\"cta-wrapper\">\n <div\n class=\"authors ellipsis body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.titleHtmlTag\n ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n : this.operaTitle;\n\n const operaTitle = (\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n );\n\n return (\n <div class=\"cta-wrapper\">\n {this.ebookUrl ? (\n <a\n class=\"z-link\"\n href={this.ebookUrl}\n onClick={() => this.emitTitleClick()}\n target={this.linkTarget}\n >\n {operaTitle}\n </a>\n ) : (\n operaTitle\n )}\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null \| HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null \| HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">laZ Ebook</div>\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target={this.linkTarget}\n onClick={() => this.emitEbookClick()}\n htmlRole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-combobox.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ require('./breakpoints-B7vFm-3T.js');
 const stylesCss$1 = () => `.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}`;
-const stylesCss = () => `:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size="medium"] .option-wrap,:host .open-combo-data z-list-element[size="small"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus,:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)     calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}`;
+const stylesCss = () => `:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size="medium"] .option-wrap,:host .open-combo-data z-list-element[size="small"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01-icon)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus,:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)     calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}`;
 const ZCombobox = class {
     watchItems() {
@@ -303,11 +303,13 @@ const ZCombobox = class {
         }
         const optionId = this.getCheckAllOptionId();
         const allChecked = this.allOptionsSelected();
-        const isDisabled = this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);
-        return (index.h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: index$1.ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, index.h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, index.h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), index.h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
+        const isPartiallySelected = this.selectedCounter > 0 && !allChecked;
+        const isDisabled = !allChecked &&
+            (this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length));
+        return (index.h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: index$1.ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, index.h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, index.h("z-icon", { name: isPartiallySelected ? "indeterminated-checkbox" : allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), index.h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (index.h("div", { key: 'd8c312f0c68c902a7c063f5ef8bfc1429e9c0183', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (index.h("div", { key: 'd26c74d1c6956c81850c3b3ff582d3422077a4b0', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-combobox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-combobox.cjs.entry.js","mappings":"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","names":["stylesCss","randomId","ControlSize","InputType","ListSize","encodeString","KeyboardCode","h","index","ListDividerType","getPlainText"],"sources":["src/components/css-components/z-label/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":[".z-label {\n display: block;\n padding-bottom: var(--space-unit);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n text-align: left;\n text-transform: uppercase;\n}\n",":host {\n display: block;\n min-width: 290px;\n color: var(--color-form-default-text);\n fill: var(--color-form-default-icon);\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-form-surface04);\n margin: 0;\n background-color: var(--color-form-background);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-form-surface04);\n outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n z-index: 16;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > span.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-form-active-primary);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-form-disabled03);\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.disabled .header > span.body-3 {\n color: var(--color-form-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div > div.open-combo-data {\n display: none;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n display: block;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--color-form-surface03);\n border-top: 0;\n background-color: var(--color-form-background);\n border-radius: 0;\n box-shadow: var(--shadow-2);\n}\n\n:host .open .open-combo-data z-input .z-label {\n color: var(--color-form-default-text);\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n padding-left: var(--space-unit); /* padding left and negative margin in order to enable focus /\n margin-left: calc(var(--space-unit) -1); /* padding left and negative margin in order to enable focus /\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 calc(var(--space-unit) * 0.5); /* needed for checkbox focus shadow /\n margin: 0;\n}\n\n:host .open-combo-data z-list-element {\n --background-color-list-element: var(--color-form-background);\n --background-hover-color-list-element: var(--color-form-surface03);\n --background-active-color-list-element: var(--color-form-surface03);\n}\n\n:host .open-combo-data z-list-element[disabled] {\n pointer-events: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n gap: var(--space-unit);\n}\n\n:host .open-combo-data z-list-element[size=\"medium\"] .option-wrap,\n:host .open-combo-data z-list-element[size=\"small\"] .option-wrap {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n font-size: var(--font-size-2);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon {\n fill: var(--color-primary01);\n}\n\n:host .open-combo-data z-list-element[disabled] .option-wrap > z-icon {\n fill: var(--color-disabled01);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon.focused {\n border-radius: var(--border-radius-small);\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus,\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus-visible {\n outline: none;\n}\n\n::-webkit-scrollbar {\n width: 6px;\n background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--color-primary01);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n/ Firefox scrollbar /\n@supports not selector(::-webkit-scrollbar-track) {\n :host {\n scrollbar-color: var(--color-primary01) transparent;\n }\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) 2);\n color: var(--color-form-active-primary);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: none;\n margin-top: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host .open .open-combo-data .search .no-results {\n display: flex;\n align-items: center;\n column-gap: var(--space-unit);\n}\n\n:host > .open > .open-combo-data .search .close-search {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a {\n display: inline-block;\n height: 44px;\n color: var(--color-form-active-primary);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n /* padding left and negative margin in order to enable focus /\n padding: calc(var(--space-unit) 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 1.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n margin-left: calc(var(--space-unit) * -1);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {encodeString, getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrls: [\"../css-components/z-label/styles.css\", \"styles.css\"],\n shadow: true,\n})\nexport class ZCombobox implements ComponentInterface {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* the combobox aria-label /\n @Prop()\n htmlAriaLabel?: string;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId = \"\";\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private getOptionId(item: ComboItem): string {\n return `${this.inputid}-option-${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;\n }\n\n private getCheckAllOptionId(): string {\n return `${this.inputid}-check-all`;\n }\n\n private allOptionsSelected(): boolean {\n return this.selectedCounter === this.itemsList.length;\n }\n\n private hasReachedMaxSelections(): boolean {\n return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n }\n\n private handleHeaderKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n this.toggleComboBox();\n }\n\n if (!this.isopen \|\| this.hassearch) {\n return;\n }\n\n switch (e.code as KeyboardCode) {\n case KeyboardCode.SPACE:\n case KeyboardCode.ENTER:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n }\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n }\n }\n\n private handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.code as KeyboardCode) {\n case KeyboardCode.ENTER:\n case KeyboardCode.SPACE:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n break;\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n break;\n }\n this.closeFilterItems();\n break;\n case KeyboardCode.TAB:\n this.focusedItemId = \"\";\n break;\n }\n }\n\n private checkOption(optionId: string): void {\n if (optionId === this.getCheckAllOptionId()) {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: !this.allOptionsSelected(),\n }));\n\n this.focusedItemId = this.getCheckAllOptionId();\n } else {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (optionId === this.getOptionId(i)) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n }\n\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] \|\| options[lastElemIndex];\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] \|\| options[firstElemIndex];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getHeaderAriaLabel(): string \| undefined {\n if (!this.label \|\| this.selectedCounter <= 0) {\n return undefined;\n }\n\n const suffix = this.selectedCounter === 1 ? \"elemento selezionato\" : \"elementi selezionati\";\n\n return `${this.label}: ${this.selectedCounter} ${suffix}`;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"aria-label\": this.htmlAriaLabel,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n aria-label={this.getHeaderAriaLabel()}\n {...comboboxA11yAttributes}\n >\n <span class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={`${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(\" \")}`}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = this.getOptionId(item);\n const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => {\n this.focusedItemId = \"\";\n this.checkOption(optionId);\n }}\n >\n <z-icon\n name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n aria-label={isDisabled ? undefined : getPlainText(item.name)}\n >\n <span\n aria-hidden=\"true\"\n innerHTML={item.name}\n />\n </span>\n </span>\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const category = item.category \|\| \"Altra categoria\";\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n ([key, value], index) => {\n return (\n <z-list-group\n size={this.getControlToListSize()}\n divider-type={ListDividerType.ELEMENT}\n aria-labelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n this.focusedItemId = \"\";\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall \|\| this.searchValue) {\n return;\n }\n\n const optionId = this.getCheckAllOptionId();\n const allChecked = this.allOptionsSelected();\n const isDisabled =\n this.hasReachedMaxSelections() \|\| (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n dividerColor=\"gray800\"\n size={this.getControlToListSize()}\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => this.checkOption(optionId)}\n >\n <z-icon\n name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={allChecked ? \"true\" : \"false\"}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </span>\n </z-list-element>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-combobox.cjs.entry.js","mappings":"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","names":["stylesCss","randomId","ControlSize","InputType","ListSize","encodeString","KeyboardCode","h","index","ListDividerType","getPlainText"],"sources":["src/components/css-components/z-label/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":[".z-label {\n display: block;\n padding-bottom: var(--space-unit);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n text-align: left;\n text-transform: uppercase;\n}\n",":host {\n display: block;\n min-width: 290px;\n color: var(--color-form-default-text);\n fill: var(--color-form-default-icon);\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-form-surface04);\n margin: 0;\n background-color: var(--color-form-background);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-form-surface04);\n outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n z-index: 16;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > span.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-form-active-primary);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-form-disabled03);\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.disabled .header > span.body-3 {\n color: var(--color-form-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div > div.open-combo-data {\n display: none;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n display: block;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--color-form-surface03);\n border-top: 0;\n background-color: var(--color-form-background);\n border-radius: 0;\n box-shadow: var(--shadow-2);\n}\n\n:host .open .open-combo-data z-input .z-label {\n color: var(--color-form-default-text);\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n padding-left: var(--space-unit); /* padding left and negative margin in order to enable focus /\n margin-left: calc(var(--space-unit) -1); /* padding left and negative margin in order to enable focus /\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 calc(var(--space-unit) * 0.5); /* needed for checkbox focus shadow /\n margin: 0;\n}\n\n:host .open-combo-data z-list-element {\n --background-color-list-element: var(--color-form-background);\n --background-hover-color-list-element: var(--color-form-surface03);\n --background-active-color-list-element: var(--color-form-surface03);\n}\n\n:host .open-combo-data z-list-element[disabled] {\n pointer-events: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n gap: var(--space-unit);\n}\n\n:host .open-combo-data z-list-element[size=\"medium\"] .option-wrap,\n:host .open-combo-data z-list-element[size=\"small\"] .option-wrap {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n font-size: var(--font-size-2);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon {\n fill: var(--color-primary01-icon);\n}\n\n:host .open-combo-data z-list-element[disabled] .option-wrap > z-icon {\n fill: var(--color-disabled01);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon.focused {\n border-radius: var(--border-radius-small);\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus,\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus-visible {\n outline: none;\n}\n\n::-webkit-scrollbar {\n width: 6px;\n background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--color-primary01);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n/ Firefox scrollbar /\n@supports not selector(::-webkit-scrollbar-track) {\n :host {\n scrollbar-color: var(--color-primary01) transparent;\n }\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) 2);\n color: var(--color-form-active-primary);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: none;\n margin-top: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host .open .open-combo-data .search .no-results {\n display: flex;\n align-items: center;\n column-gap: var(--space-unit);\n}\n\n:host > .open > .open-combo-data .search .close-search {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a {\n display: inline-block;\n height: 44px;\n color: var(--color-form-active-primary);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n /* padding left and negative margin in order to enable focus /\n padding: calc(var(--space-unit) 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 1.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n margin-left: calc(var(--space-unit) * -1);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {encodeString, getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrls: [\"../css-components/z-label/styles.css\", \"styles.css\"],\n shadow: true,\n})\nexport class ZCombobox implements ComponentInterface {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* the combobox aria-label /\n @Prop()\n htmlAriaLabel?: string;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId = \"\";\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private getOptionId(item: ComboItem): string {\n return `${this.inputid}-option-${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;\n }\n\n private getCheckAllOptionId(): string {\n return `${this.inputid}-check-all`;\n }\n\n private allOptionsSelected(): boolean {\n return this.selectedCounter === this.itemsList.length;\n }\n\n private hasReachedMaxSelections(): boolean {\n return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n }\n\n private handleHeaderKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n this.toggleComboBox();\n }\n\n if (!this.isopen \|\| this.hassearch) {\n return;\n }\n\n switch (e.code as KeyboardCode) {\n case KeyboardCode.SPACE:\n case KeyboardCode.ENTER:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n }\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n }\n }\n\n private handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.code as KeyboardCode) {\n case KeyboardCode.ENTER:\n case KeyboardCode.SPACE:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n break;\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n break;\n }\n this.closeFilterItems();\n break;\n case KeyboardCode.TAB:\n this.focusedItemId = \"\";\n break;\n }\n }\n\n private checkOption(optionId: string): void {\n if (optionId === this.getCheckAllOptionId()) {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: !this.allOptionsSelected(),\n }));\n\n this.focusedItemId = this.getCheckAllOptionId();\n } else {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (optionId === this.getOptionId(i)) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n }\n\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] \|\| options[lastElemIndex];\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] \|\| options[firstElemIndex];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getHeaderAriaLabel(): string \| undefined {\n if (!this.label \|\| this.selectedCounter <= 0) {\n return undefined;\n }\n\n const suffix = this.selectedCounter === 1 ? \"elemento selezionato\" : \"elementi selezionati\";\n\n return `${this.label}: ${this.selectedCounter} ${suffix}`;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"aria-label\": this.htmlAriaLabel,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n aria-label={this.getHeaderAriaLabel()}\n {...comboboxA11yAttributes}\n >\n <span class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={`${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(\" \")}`}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = this.getOptionId(item);\n const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => {\n this.focusedItemId = \"\";\n this.checkOption(optionId);\n }}\n >\n <z-icon\n name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n aria-label={isDisabled ? undefined : getPlainText(item.name)}\n >\n <span\n aria-hidden=\"true\"\n innerHTML={item.name}\n />\n </span>\n </span>\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const category = item.category \|\| \"Altra categoria\";\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n ([key, value], index) => {\n return (\n <z-list-group\n size={this.getControlToListSize()}\n divider-type={ListDividerType.ELEMENT}\n aria-labelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n this.focusedItemId = \"\";\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall \|\| this.searchValue) {\n return;\n }\n\n const optionId = this.getCheckAllOptionId();\n const allChecked = this.allOptionsSelected();\n const isPartiallySelected = this.selectedCounter > 0 && !allChecked;\n const isDisabled =\n !allChecked &&\n (this.hasReachedMaxSelections() \|\| (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length));\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n dividerColor=\"gray800\"\n size={this.getControlToListSize()}\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => this.checkOption(optionId)}\n >\n <z-icon\n name={isPartiallySelected ? \"indeterminated-checkbox\" : allChecked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={allChecked ? \"true\" : \"false\"}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </span>\n </z-list-element>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-dragdrop-area_2.cjs.entry.js CHANGED Viewed

@@ -23,12 +23,12 @@ const ZDragdropArea = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '67cb9dfea1cd24f61d1b1c628752d7a770365c5c', class: { dragover: this.dragging }, onDragOver: (e) => {
+        return (index.h(index.Host, { key: 'ecf49da8d38f797026ccc5a56c6ccb8f99aa48ce', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
                 this.dragging = true;
             }, onDragLeave: () => {
                 this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, index.h("div", { key: '38ecbac3eb08bf669a75869c78f6e95dff67941f', class: "dragover-container" }, index.h("z-button", { key: 'b0b1e63c600d4e01155ddfb593faf3fd89e55abd' }, this.dragAndDropLabel)), index.h("slot", { key: '6876fc9e23ffc13a39651ee26c92d6355d45aff7' })));
+            }, onDrop: this.onDrop.bind(this) }, index.h("div", { key: 'ef15b62b3e7ab7b0f243c4b3c6138ecacda1c06d', class: "dragover-container" }, index.h("z-button", { key: 'ccbc9c3c422bf6603fbe89f48c5fe79c001921e1' }, this.dragAndDropLabel)), index.h("slot", { key: '8478b1c1e7c4f7be161ad95af6a4879a24a05d26' })));
     }
 };
 ZDragdropArea.style = stylesCss$1();

package/dist/cjs/z-file.cjs.entry.js CHANGED Viewed

@@ -37,7 +37,7 @@ const ZFile = class {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (index.h(index.Host, { key: '0315b4e37021849820eae3d32535c733cbe34640' }, this.allowPopover && (index.h("z-popover", { key: 'ea2be09ed78bded2fd4b3160f4694bd7d5331790', open: this.popoverVisible, position: index$1.PopoverPosition.AUTO, bindTo: this.chip }, index.h("span", { key: '2b1dae0e1eb2ed997d6888234cacaa441043926f', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { key: '07ea7bbdb8ee11c7101c2398d40af18498f5f70f', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: index$1.ZChipType.DEFAULT }, index.h("span", { key: 'a0aae4b73af7e34dd480489e0630f0f667b91a55', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (index.h(index.Host, { key: '872ac3402e164915b16c872027f7cec7121bba82' }, this.allowPopover && (index.h("z-popover", { key: '2e8a1c0f1d8a7a3d303a82d56f5164ec6436d714', open: this.popoverVisible, position: index$1.PopoverPosition.AUTO, bindTo: this.chip }, index.h("span", { key: 'b70f58575ec17124133274bae84af4b41754478a', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { key: 'a183a3b2109d2389681645497b2473b81251aef8', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: index$1.ZChipType.DEFAULT }, index.h("span", { key: '293af17d1fd64a80433eea56f576ecbc4a4dc576', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/z-table.cjs.entry.js CHANGED Viewed

@@ -50,7 +50,7 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '57c350effd561866272d6267acd7db3d64973c85', expandable: this.expandable }, index.h("div", { key: '6f7b80127ebb7e0ef5e3723a5f493875df2d17bc', class: "table", role: "table" }, index.h("slot", { key: '422ad73587d948d56d87cce18fd7d795900e9881' }))));
+        return (index.h(index.Host, { key: '5db047ba30ea62b9f4c4b1adc1a2f82ab4dac8d0', expandable: this.expandable }, index.h("div", { key: '1094691d5dbc197a353a8f2a0e18505196102587', class: "table", role: "table" }, index.h("slot", { key: 'e2bd88f858fba1408d14ff6040a3a961ddb69c28' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-table.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-table.cjs.entry.js","mappings":";;;;;;;;;;;;;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,gMAAgM,CAAC;;ACA1N,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCevtD,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAwCnB;IAtCS,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC;;AAK7E;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAC1D,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC,CAAC;QACF,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACjD,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;AAC/B,YAAA,iBAAiB,EAAE,KAAK;AACzB,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,EAAE;;IAG/C,MAAM,GAAA;QACJ,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAA,EAC/BD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EAAA,EAEZA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACD;;;;;;;;","names":["stylesCss","h","Host"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-table--cells-padding: Padding of the cells.\n /\n\n position: relative;\n display: block;\n overflow: auto;\n min-width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n}\n\n:host([expandable]) {\n --z-table--expand-button-size: 40px;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n /\n@Component({\n tag: \"z-table\",\n styleUrls: [\"styles.css\", \"~~../../~~css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTable implements ComponentInterface {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-table.cjs.entry.js","mappings":";;;;;;;;;;;;;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,gMAAgM,CAAC;;ACA1N,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCevtD,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAwCnB;IAtCS,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC;;AAK7E;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAC1D,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC,CAAC;QACF,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACjD,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;AAC/B,YAAA,iBAAiB,EAAE,KAAK;AACzB,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,EAAE;;IAG/C,MAAM,GAAA;QACJ,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAA,EAC/BD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EAAA,EAEZA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACD;;;;;;;;","names":["stylesCss","h","Host"],"sources":["src/components/deprecated/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/deprecated/table/z-table/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-table--cells-padding: Padding of the cells.\n /\n\n position: relative;\n display: block;\n overflow: auto;\n min-width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n}\n\n:host([expandable]) {\n --z-table--expand-button-size: 40px;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n /\n@Component({\n tag: \"z-table\",\n styleUrls: [\"styles.css\", \"../../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTable implements ComponentInterface {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-tbody.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const ZTbody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '494ae067968bb22102d480f32b06f672eb88dcaa', role: "rowgroup" }, index.h("slot", { key: '91b431bc8748313e79673094e668b1fafb2598e5' })));
+        return (index.h(index.Host, { key: '0799f4ed498e2fc7bff1a0a87e5aeec696bce221', role: "rowgroup" }, index.h("slot", { key: '47b9c73d0dabc8724c213775dc3e1fdbece493f0' })));
     }
 };
 ZTbody.style = stylesCss$1() + stylesCss();

package/dist/cjs/z-tbody.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-tbody.cjs.entry.js","mappings":";;;;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,0CAA0C,CAAC;;ACApE,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCWvtD,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;","names":["stylesCss","h","Host"],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","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 styleUrls: [\"styles.css\", \"~~../../~~css-components/z-table/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"],"version":3}
1	+ {"file":"z-tbody.cjs.entry.js","mappings":";;;;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,0CAA0C,CAAC;;ACApE,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCWvtD,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;","names":["stylesCss","h","Host"],"sources":["src/components/deprecated/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tbody&encapsulation=shadow","src/components/deprecated/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","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 styleUrls: [\"styles.css\", \"../../../css-components/z-table/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"],"version":3}

package/dist/cjs/z-td.cjs.entry.js CHANGED Viewed

@@ -47,7 +47,7 @@ const ZTd = class {
         this.updateColspan();
     }
     render() {
-        return (index.h(index.Host, { key: 'da91e90c7f553840c642aabd1a4ebf17623791eb', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: '89541c4a1c5edccc0c3b940591ffe32e72de44ab', class: "cell--content" }, index.h("slot", { key: 'bf3c8b8458d6737f08d731c0e7c15d57a28e54c4' }), this.showMenu && (index.h("div", { key: '8d4dc82cf51219ef93c8bca773bd24d45ea51a2b', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: 'fc08af544b4403f12a2856b679acb5024dfb1a3b', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: '9fe54dd192458e543fff45539b59c1c60e1ac67d', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: '5ca045abb9e47bf27b391024c940dec3f37b3cff', name: "contextual-menu" })))))));
+        return (index.h(index.Host, { key: 'b89fd7b33f9d928a6c60b5493ee2732edda4318c', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: 'ac47204976e01cc5f2371d87faf4e15bbcb9b923', class: "cell--content" }, index.h("slot", { key: '24eddf43aa23971f21dcfcae158111cbab7689e3' }), this.showMenu && (index.h("div", { key: '8545b4567dcd1a3a3fb8a4e0913753af0cdaaf11', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: '2b96d9dda4c2794e1f9c7d5dc936ac1701d11ba6', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: 'ebee2d5c76f8573362e9a912b62e238d9eef6d5a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: 'b3b6392cf7d0044fc4fc3773817efe7ba46bd598', name: "contextual-menu" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {