npm - @zanichelli/albe-web-components - Versions diffs - 20.0.2 → 20.0.4 - Mend

@zanichelli/albe-web-components 20.0.2 → 20.0.4

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","typographyCss","ZBookCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","BookCardVariant","PORTRAIT","isbnLabel","linkTarget","hasMultipleCovers","emitEbookClick","ebookClick","emit","emitCoverClick","coverClick","emitTitleClick","titleClick","renderCover","CoverTag","ebookUrl","coverAttrs","href","onClick","target","h","Object","assign","class","cover","fallbackCover","multiple","name","slot","renderYear","year","renderAuthors","authors","LANDSCAPE","renderCtaSlot","renderOperaTitle","title","titleHtmlTag","operaTitle","innerHTML","renderVolumeTitle","volumeTitle","renderIsbn","isbn","renderEbook","size","ControlSize","X_SMALL","htmlRole","render","Host","key"],"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 .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .ebook .app-name {\n display: flex;\n align-items: center;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .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(): null \| HTMLDivElement {\n if (!this.ebookUrl) {\n return null;\n }\n\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.renderEbook()}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"mappings":"2QAAA,MAAMA,EAAY,IAAM,+vKCAxB,MAAMC,EAAgB,IAAM,k8XCA5B,MAAMD,EAAY,IAAM,0gH,MCgBXE,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,uLAUEC,KAAAC,QAA2BC,EAAgBC,SAwB3CH,KAAAI,UAAY,GAYZJ,KAAAK,WAAa,SAYbL,KAAAM,kBAAoB,KA0MrB,CAxLS,cAAAC,GACNP,KAAKQ,WAAWC,M,CAGV,cAAAC,GACNV,KAAKW,WAAWF,M,CAGV,cAAAG,GACNZ,KAAKa,WAAWJ,M,CAGV,WAAAK,GACN,MAAMC,EAAWf,KAAKgB,SAAW,IAAM,MACvC,MAAMC,EAAajB,KAAKgB,SACpB,CACEE,KAAMlB,KAAKgB,SACXG,QAAS,IAAMnB,KAAKU,iBACpBU,OAAQpB,KAAKK,YAEf,GAEJ,OACEgB,EAACN,EAAQO,OAAAC,OAAA,CACPC,MAAM,SACFP,GAEJI,EAAA,gBACEI,MAAOzB,KAAKyB,MACZC,cAAe1B,KAAK0B,cACpBC,SAAU3B,KAAKM,mBAAqBN,KAAKC,UAAYC,EAAgBC,UAErEkB,EAAA,QACEO,KAAK,eACLC,KAAK,kB,CAOP,UAAAC,GACN,IAAK9B,KAAK+B,KAAM,CACd,OAAO,I,CAGT,OACEV,EAAA,OACEG,MAAM,uBAAsB,mBACX,QAEhBxB,KAAK+B,K,CAKJ,aAAAC,GACN,IAAKhC,KAAKiC,QAAS,CACjB,OAAO,I,CAGT,OACEZ,EAAA,OAAKG,MAAM,eACTH,EAAA,OACEG,MAAM,0BAAyB,mBACd,UAEhBxB,KAAKiC,SAEPjC,KAAKC,UAAYC,EAAgBgC,UAAYlC,KAAKmC,gBAAkB,K,CAKnE,gBAAAC,GACN,MAAMC,EAAQrC,KAAKsC,aACf,IAAItC,KAAKsC,gBAAgBtC,KAAKuC,eAAevC,KAAKsC,gBAClDtC,KAAKuC,WAET,MAAMA,EACJlB,EAAA,OACEG,MAAM,iCACNgB,UAAWH,IAIf,OACEhB,EAAA,OAAKG,MAAM,eACRxB,KAAKgB,SACJK,EAAA,KACEG,MAAM,SACNN,KAAMlB,KAAKgB,SACXG,QAAS,IAAMnB,KAAKY,iBACpBQ,OAAQpB,KAAKK,YAEZkC,GACC,EAILvC,KAAKC,UAAYC,EAAgBC,SAAWH,KAAKmC,gBAAkB,K,CAKlE,iBAAAM,GACN,IAAKzC,KAAK0C,YAAa,CACrB,OAAO,I,CAGT,OAAOrB,EAAA,OAAKG,MAAM,gCAAgCxB,KAAK0C,Y,CAGjD,UAAAC,GACN,IAAK3C,KAAK4C,KAAM,CACd,OAAO,I,CAGT,OACEvB,EAAA,OACEG,MAAM,0BAAyB,mBACb,QAAQxB,KAAKI,aAE9BJ,KAAK4C,KAAI,IAAG5C,KAAKI,UAAYiB,EAAA,QAAMG,MAAM,UAAUxB,KAAKI,WAAoB,K,CAK3E,WAAAyC,GACN,IAAK7C,KAAKgB,SAAU,CAClB,OAAO,I,CAGT,OACEK,EAAA,OAAKG,MAAM,SACTH,EAAA,OAAKG,MAAM,YACTH,EAAA,OACEG,MAAM,aAAY,cACN,SAEdH,EAAA,OAAKG,MAAM,aAAW,cAExBH,EAAA,YACEyB,KAAMC,EAAYC,QAClB9B,KAAMlB,KAAKgB,SACXI,OAAQpB,KAAKK,WACbc,QAAS,IAAMnB,KAAKO,iBACpB0C,SAAS,OAAM,mBACG,iBAAiBjD,KAAKuC,2BAAyB,e,CAQjE,aAAAJ,GACN,OAAOd,EAAA,QAAMO,KAAK,O,CAGpB,MAAAsB,GACE,OACE7B,EAAC8B,EAAI,CAAAC,IAAA,4CACH/B,EAAA,OAAA+B,IAAA,2CAAK5B,MAAM,gBACRxB,KAAKc,cACNO,EAAA,OAAA+B,IAAA,2CAAK5B,MAAM,aACTH,EAAA,OAAA+B,IAAA,2CAAK5B,MAAM,OACTH,EAAA,OAAA+B,IAAA,4CACGpD,KAAK8B,aACL9B,KAAKgC,gBACLhC,KAAKoC,mBACLpC,KAAKyC,oBACLzC,KAAK2C,cAERtB,EAAA,QAAA+B,IAAA,2CAAMxB,KAAK,SACXP,EAAA,QAAA+B,IAAA,2CAAMxB,KAAK,UAEbP,EAAA,QAAA+B,IAAA,2CAAMxB,KAAK,SAAS5B,KAAK6C,iBAG7BxB,EAAA,QAAA+B,IAAA,2CAAMxB,KAAK,S","ignoreList":[]}
1	+ {"version":3,"names":["stylesCss","typographyCss","ZBookCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","BookCardVariant","PORTRAIT","isbnLabel","linkTarget","hasMultipleCovers","emitEbookClick","ebookClick","emit","emitCoverClick","coverClick","emitTitleClick","titleClick","renderCover","CoverTag","ebookUrl","coverAttrs","href","onClick","target","h","Object","assign","class","cover","fallbackCover","multiple","name","slot","renderYear","year","renderAuthors","authors","renderOperaTitle","title","titleHtmlTag","operaTitle","innerHTML","renderVolumeTitle","volumeTitle","renderIsbn","isbn","renderEbook","size","ControlSize","X_SMALL","htmlRole","render","Host","key"],"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 .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .ebook .app-name {\n display: flex;\n align-items: center;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .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/* The CTA slot comes after all book metadata in the DOM so screen readers announce\n author, title, volume and ISBN before the action, while the grid keeps the CTA in\n its visual position: top-right for landscape, beside the title for portrait. /\n.main-content .card-info .top > div {\n display: grid;\n column-gap: calc(var(--space-unit) / 2);\n grid-template-columns: 1fr auto;\n}\n\n.main-content .card-info .top > div > {\n grid-column: 1;\n}\n\n.main-content .card-info .top > div > .cta-slot {\n align-self: start;\n grid-column: 2;\n grid-row: 1;\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/* In portrait the CTA sits beside the title, whose grid row shifts down when the\n optional year and authors rows are rendered before it. /\n:host([variant=\"portrait\"]) .main-content .card-info .top > div > .year ~ .cta-slot,\n:host([variant=\"portrait\"]) .main-content .card-info .top > div > .authors ~ .cta-slot {\n grid-row: 2;\n}\n\n:host([variant=\"portrait\"]) .main-content .card-info .top > div > .year ~ .authors ~ .cta-slot {\n grid-row: 3;\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\n class=\"authors ellipsis body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\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 if (this.ebookUrl) {\n return (\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 }\n\n return operaTitle;\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(): null \| HTMLDivElement {\n if (!this.ebookUrl) {\n return null;\n }\n\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 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 class=\"cta-slot\">\n <slot name=\"cta\"></slot>\n </div>\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{this.renderEbook()}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"mappings":"2QAAA,MAAMA,EAAY,IAAM,kqLCAxB,MAAMC,EAAgB,IAAM,k8XCA5B,MAAMD,EAAY,IAAM,0gH,MCgBXE,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,uLAUEC,KAAAC,QAA2BC,EAAgBC,SAwB3CH,KAAAI,UAAY,GAYZJ,KAAAK,WAAa,SAYbL,KAAAM,kBAAoB,KAmMrB,CAjLS,cAAAC,GACNP,KAAKQ,WAAWC,M,CAGV,cAAAC,GACNV,KAAKW,WAAWF,M,CAGV,cAAAG,GACNZ,KAAKa,WAAWJ,M,CAGV,WAAAK,GACN,MAAMC,EAAWf,KAAKgB,SAAW,IAAM,MACvC,MAAMC,EAAajB,KAAKgB,SACpB,CACEE,KAAMlB,KAAKgB,SACXG,QAAS,IAAMnB,KAAKU,iBACpBU,OAAQpB,KAAKK,YAEf,GAEJ,OACEgB,EAACN,EAAQO,OAAAC,OAAA,CACPC,MAAM,SACFP,GAEJI,EAAA,gBACEI,MAAOzB,KAAKyB,MACZC,cAAe1B,KAAK0B,cACpBC,SAAU3B,KAAKM,mBAAqBN,KAAKC,UAAYC,EAAgBC,UAErEkB,EAAA,QACEO,KAAK,eACLC,KAAK,kB,CAOP,UAAAC,GACN,IAAK9B,KAAK+B,KAAM,CACd,OAAO,I,CAGT,OACEV,EAAA,OACEG,MAAM,uBAAsB,mBACX,QAEhBxB,KAAK+B,K,CAKJ,aAAAC,GACN,IAAKhC,KAAKiC,QAAS,CACjB,OAAO,I,CAGT,OACEZ,EAAA,OACEG,MAAM,0BAAyB,mBACd,UAEhBxB,KAAKiC,Q,CAKJ,gBAAAC,GACN,MAAMC,EAAQnC,KAAKoC,aACf,IAAIpC,KAAKoC,gBAAgBpC,KAAKqC,eAAerC,KAAKoC,gBAClDpC,KAAKqC,WAET,MAAMA,EACJhB,EAAA,OACEG,MAAM,iCACNc,UAAWH,IAIf,GAAInC,KAAKgB,SAAU,CACjB,OACEK,EAAA,KACEG,MAAM,SACNN,KAAMlB,KAAKgB,SACXG,QAAS,IAAMnB,KAAKY,iBACpBQ,OAAQpB,KAAKK,YAEZgC,E,CAKP,OAAOA,C,CAGD,iBAAAE,GACN,IAAKvC,KAAKwC,YAAa,CACrB,OAAO,I,CAGT,OAAOnB,EAAA,OAAKG,MAAM,gCAAgCxB,KAAKwC,Y,CAGjD,UAAAC,GACN,IAAKzC,KAAK0C,KAAM,CACd,OAAO,I,CAGT,OACErB,EAAA,OACEG,MAAM,0BAAyB,mBACb,QAAQxB,KAAKI,aAE9BJ,KAAK0C,KAAI,IAAG1C,KAAKI,UAAYiB,EAAA,QAAMG,MAAM,UAAUxB,KAAKI,WAAoB,K,CAK3E,WAAAuC,GACN,IAAK3C,KAAKgB,SAAU,CAClB,OAAO,I,CAGT,OACEK,EAAA,OAAKG,MAAM,SACTH,EAAA,OAAKG,MAAM,YACTH,EAAA,OACEG,MAAM,aAAY,cACN,SAEdH,EAAA,OAAKG,MAAM,aAAW,cAExBH,EAAA,YACEuB,KAAMC,EAAYC,QAClB5B,KAAMlB,KAAKgB,SACXI,OAAQpB,KAAKK,WACbc,QAAS,IAAMnB,KAAKO,iBACpBwC,SAAS,OAAM,mBACG,iBAAiB/C,KAAKqC,2BAAyB,e,CAQzE,MAAAW,GACE,OACE3B,EAAC4B,EAAI,CAAAC,IAAA,4CACH7B,EAAA,OAAA6B,IAAA,2CAAK1B,MAAM,gBACRxB,KAAKc,cACNO,EAAA,OAAA6B,IAAA,2CAAK1B,MAAM,aACTH,EAAA,OAAA6B,IAAA,2CAAK1B,MAAM,OACTH,EAAA,OAAA6B,IAAA,4CACGlD,KAAK8B,aACL9B,KAAKgC,gBACLhC,KAAKkC,mBACLlC,KAAKuC,oBACLvC,KAAKyC,aACNpB,EAAA,OAAA6B,IAAA,2CAAK1B,MAAM,YACTH,EAAA,QAAA6B,IAAA,2CAAMtB,KAAK,UAGfP,EAAA,QAAA6B,IAAA,2CAAMtB,KAAK,SACXP,EAAA,QAAA6B,IAAA,2CAAMtB,KAAK,UAEbP,EAAA,QAAA6B,IAAA,2CAAMtB,KAAK,SAAS5B,KAAK2C,iBAG7BtB,EAAA,QAAA6B,IAAA,2CAAMtB,KAAK,S","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,Host as o,transformTag as r}from"@stencil/core/internal/client";import{W as n,X as a,p as l,g as h,P as c,i as p}from"./index2.js";import{g as d,h as u}from"./utils.js";import{d as f}from"./index5.js";import{d as m}from"./index3.js";import{d as v}from"./index8.js";import{d as b}from"./index9.js";import{d as g}from"./index10.js";import{d as z}from"./index16.js";const x=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}`;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.clickOnNode=i(this,"clickOnNode",7);this.pathStyle=n.UNDERLINED;this.homepageVariant=a.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.hasOverflow=false;this.popoverEllipsisOpen=false;this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null}handleResize(){this.viewPortWidth=d();if(this.viewPortWidth!==l.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(e,t){if(e===l.MOBILE||t===l.MOBILE&&e===l.TABLET||t===l.MOBILE&&e===l.DESKTOP||t===l.MOBILE&&e===l.DESKTOP_WIDE||t===l.TABLET&&e===l.DESKTOP||t===l.TABLET&&e===l.DESKTOP_WIDE||t===l.DESKTOP&&e===l.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=d();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==l.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==l.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===l.MOBILE){this.pathsList=this.getPathsItemsList().filter((e=>!!e.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let e=0;e<this.pathsList.length;e++){if(this.pathsList[e].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(e!==this.pathsList.length-1){const t=this.truncateWithEllipsis(this.pathsList[e].text,this.truncateChar);this.currentEllipsisText=this.pathsList[e].text;this.pathsList[e].text=t;this.pathsList[e].hasTooltip=true;this.truncatePosition=e;return}}}truncateWithEllipsis(e,t){if(e.length<=t){return e}return e.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((e=>({text:e.textContent,path:e.href,hasTooltip:false})))}renderHomepageNode(){return s("li",null,s("a",{class:{"homepage-text":this.homepageVariant===a.TEXT},href:this.homepageNode.path,onClick:e=>this.handlePreventFollowUrl(e,this.homepageNode),innerHTML:this.homepageVariant===a.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(e,t){if(this.preventFollowUrl){e.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(e){const t=this.anchorElements.length;if(e.key===h.TAB){e.preventDefault();return}e.stopPropagation();const i=[h.ARROW_DOWN,h.ARROW_UP];if(i.includes(e.key)){e.preventDefault();if(e.key===h.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(e.key===h.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(e.key===h.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return s("li",null,s("z-popover",{class:"hidden-paths-popover",ref:e=>this.collapsedElementsRef=e,bindTo:this.triggerButton,position:c.BOTTOM_RIGHT,closable:true,showArrow:true},s("div",{class:"popover-content"},s("z-list",null,s("z-list-group",{size:p.SMALL},this.collapsedElements.map(((e,t,i)=>s("div",null,s("z-list-element",{clickable:true},s("a",{class:"text-ellipsis",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e),onKeyDown:e=>this.handleOverflowMenuAccessibility(e),innerHTML:e.text})),t<i.length-1&&s("z-divider",{color:"color-surface03"})))))))),s("button",{class:"dots",ref:e=>this.triggerButton=e,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:e=>{u(e,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}renderMobileItems(){const e=this.pathsList[this.pathsList.length-1];if(!e){return}return s("li",null,s("a",{"aria-current":e.path?undefined:"page",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e)},s("z-icon",{name:"chevron-left"}),s("span",{class:{"missing-path":!e.path,"text-ellipsis":true}},e.text)))}renderItems(){let e;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,i)=>s("li",null,t.hasTooltip&&s("z-popover",{class:"full-path-tooltip",bindTo:e,open:this.popoverEllipsisOpen,position:c.BOTTOM_RIGHT,closable:false,showArrow:true},s("span",{class:"tooltip-content"},this.currentEllipsisText)),s("a",{class:{"missing-path":!t.path},ref:t=>e=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:e=>this.handlePreventFollowUrl(e,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),i!==this.pathsList.length-1&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))))]}render(){return s(o,{key:"fb5161f12a17f636f078a65f8824cacf019710c3",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},s("nav",{key:"6c010fb71ec9eb24b88e0dbe43e70697d0bdeb13",ref:e=>this.wrapElement=e,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},s("ol",{key:"e31bc9b95a11f9a58f060d2df96be17dc9d3b4d1"},this.viewPortWidth===l.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return this}static get watchers(){return{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}}static get style(){return x()}},[1,"z-breadcrumb",{pathStyle:[513,"path-style"],homepageVariant:[1,"homepage-variant"],maxNodesToShow:[2,"max-nodes-to-show"],preventFollowUrl:[4,"prevent-follow-url"],overflowMenuItemRows:[2,"overflow-menu-item-rows"],truncateChar:[2,"truncate-char"],viewPortWidth:[32],hasOverflow:[32],popoverEllipsisOpen:[32]},[[9,"resize","handleResize"]],{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["z-breadcrumb","z-divider","z-icon","z-list","z-list-element","z-list-group","z-popover"];e.forEach((e=>{switch(e){case"z-breadcrumb":if(!customElements.get(r(e))){customElements.define(r(e),w)}break;case"z-divider":if(!customElements.get(r(e))){f()}break;case"z-icon":if(!customElements.get(r(e))){m()}break;case"z-list":if(!customElements.get(r(e))){v()}break;case"z-list-element":if(!customElements.get(r(e))){b()}break;case"z-list-group":if(!customElements.get(r(e))){g()}break;case"z-popover":if(!customElements.get(r(e))){z()}break}}))}const y=w;const E=k;export{y as ZBreadcrumb,E as defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,Host as o,transformTag as r}from"@stencil/core/internal/client";import{W as n,X as a,p as l,g as h,P as c,i as p}from"./index2.js";import{g as d,h as u}from"./utils.js";import{d as f}from"./index5.js";import{d as m}from"./index3.js";import{d as v}from"./index8.js";import{d as b}from"./index9.js";import{d as g}from"./index10.js";import{d as z}from"./index16.js";const x=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}`;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.clickOnNode=i(this,"clickOnNode",7);this.pathStyle=n.UNDERLINED;this.homepageVariant=a.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.hasOverflow=false;this.popoverEllipsisOpen=false;this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null}handleResize(){this.viewPortWidth=d();if(this.viewPortWidth!==l.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(e,t){if(e===l.MOBILE||t===l.MOBILE&&e===l.TABLET||t===l.MOBILE&&e===l.DESKTOP||t===l.MOBILE&&e===l.DESKTOP_WIDE||t===l.TABLET&&e===l.DESKTOP||t===l.TABLET&&e===l.DESKTOP_WIDE||t===l.DESKTOP&&e===l.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=d();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==l.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==l.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===l.MOBILE){this.pathsList=this.getPathsItemsList().filter((e=>!!e.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let e=0;e<this.pathsList.length;e++){if(this.pathsList[e].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(e!==this.pathsList.length-1){const t=this.truncateWithEllipsis(this.pathsList[e].text,this.truncateChar);this.currentEllipsisText=this.pathsList[e].text;this.pathsList[e].text=t;this.pathsList[e].hasTooltip=true;this.truncatePosition=e;return}}}truncateWithEllipsis(e,t){if(e.length<=t){return e}return e.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((e=>({text:e.textContent,path:e.href,hasTooltip:false})))}renderHomepageNode(){return s("li",null,s("a",{class:{"homepage-text":this.homepageVariant===a.TEXT},href:this.homepageNode.path,onClick:e=>this.handlePreventFollowUrl(e,this.homepageNode),innerHTML:this.homepageVariant===a.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(e,t){if(this.preventFollowUrl){e.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(e){const t=this.anchorElements.length;if(e.key===h.TAB){e.preventDefault();return}e.stopPropagation();const i=[h.ARROW_DOWN,h.ARROW_UP];if(i.includes(e.key)){e.preventDefault();if(e.key===h.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(e.key===h.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(e.key===h.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return s("li",null,s("z-popover",{class:"hidden-paths-popover",ref:e=>this.collapsedElementsRef=e,bindTo:this.triggerButton,position:c.BOTTOM_RIGHT,closable:true,showArrow:true},s("div",{class:"popover-content"},s("z-list",null,s("z-list-group",{size:p.SMALL},this.collapsedElements.map(((e,t,i)=>s("div",null,s("z-list-element",{clickable:true},s("a",{class:"text-ellipsis",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e),onKeyDown:e=>this.handleOverflowMenuAccessibility(e),innerHTML:e.text})),t<i.length-1&&s("z-divider",{color:"color-surface03"})))))))),s("button",{class:"dots",ref:e=>this.triggerButton=e,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:e=>{u(e,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}renderMobileItems(){const e=this.pathsList[this.pathsList.length-1];if(!e){return}return s("li",null,s("a",{"aria-current":e.path?undefined:"page",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e)},s("z-icon",{name:"chevron-left"}),s("span",{class:{"missing-path":!e.path,"text-ellipsis":true}},e.text)))}renderItems(){let e;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,i)=>s("li",null,t.hasTooltip&&s("z-popover",{class:"full-path-tooltip",bindTo:e,open:this.popoverEllipsisOpen,position:c.BOTTOM_RIGHT,closable:false,showArrow:true},s("span",{class:"tooltip-content"},this.currentEllipsisText)),s("a",{class:{"missing-path":!t.path},ref:t=>e=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:e=>this.handlePreventFollowUrl(e,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),i!==this.pathsList.length-1&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))))]}render(){return s(o,{key:"21c4307fce9f47f07e2f981f6aa6a6c55c93bd52",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},s("nav",{key:"8e9e10a75e0659967e06479e62bdbb16585d41b9",ref:e=>this.wrapElement=e,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},s("ol",{key:"c34f110b205428e846187ece3fb1bece26b9a808"},this.viewPortWidth===l.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return this}static get watchers(){return{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}}static get style(){return x()}},[1,"z-breadcrumb",{pathStyle:[513,"path-style"],homepageVariant:[1,"homepage-variant"],maxNodesToShow:[2,"max-nodes-to-show"],preventFollowUrl:[4,"prevent-follow-url"],overflowMenuItemRows:[2,"overflow-menu-item-rows"],truncateChar:[2,"truncate-char"],viewPortWidth:[32],hasOverflow:[32],popoverEllipsisOpen:[32]},[[9,"resize","handleResize"]],{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["z-breadcrumb","z-divider","z-icon","z-list","z-list-element","z-list-group","z-popover"];e.forEach((e=>{switch(e){case"z-breadcrumb":if(!customElements.get(r(e))){customElements.define(r(e),w)}break;case"z-divider":if(!customElements.get(r(e))){f()}break;case"z-icon":if(!customElements.get(r(e))){m()}break;case"z-list":if(!customElements.get(r(e))){v()}break;case"z-list-element":if(!customElements.get(r(e))){b()}break;case"z-list-group":if(!customElements.get(r(e))){g()}break;case"z-popover":if(!customElements.get(r(e))){z()}break}}))}const y=w;const E=k;export{y as ZBreadcrumb,E as defineCustomElement};
 //# sourceMappingURL=z-breadcrumb.js.map

package/dist/components/z-button-sort.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{proxyCustomElement as r,HTMLElement as t,createEvent as o,h as i,transformTag as e}from"@stencil/core/internal/client";import{B as s}from"./breakpoints.js";import{d as a}from"./index3.js";const c=()=>`button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-active-primary-icon)}button.selected{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse);fill:var(--color-inverse-icon)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}`;const n=r(class r extends t{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.buttonSortClick=o(this,"buttonSortClick",7);this.sortlabelasc="A-Z";this.sortlabeldesc="Z-A";this.isselected=false;this.sortasc=true;this.allowTooltip=false}emitButtonSortClick(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})}componentDidLoad(){if(this.elementHasEllipsis()&&window.innerWidth>s.TABLET){this.allowTooltip=true}}setButtonTitle(){return this.allowTooltip?`${this.sortasc?this.label:this.desclabel}`:""}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return i("button",{key:"3696ec01ac436b8a2e3e269e0e21a73420becf83",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:()=>this.emitButtonSortClick()},i("span",{key:"2e1d24a132bd74539fc27723cd4835670b453a06",ref:r=>this.ellipsis=r,class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),i("span",{key:"f65e8317f60c4797c860988fb28c143346930290",class:"counter"},this.counter&&` (${this.counter})`),i("span",{key:"4ed9c2cd7751114b5660285ba9c98e9b03fc8cb7",class:"sort"},this.sortasc?this.sortlabelasc:this.sortlabeldesc),i("z-icon",{key:"5484e68803adf1b9ca9ad60e4ab4749a0992b69f",name:"caret-up-down",width:16,height:16}))}static get style(){return c()}},[1,"z-button-sort",{buttonid:[1],label:[1],desclabel:[1],counter:[2],sortlabelasc:[1],sortlabeldesc:[1],isselected:[1028],sortasc:[1028],allowTooltip:[32]}]);function l(){if(typeof customElements==="undefined"){return}const r=["z-button-sort","z-icon"];r.forEach((r=>{switch(r){case"z-button-sort":if(!customElements.get(e(r))){customElements.define(e(r),n)}break;case"z-icon":if(!customElements.get(e(r))){a()}break}}))}const h=n;const d=l;export{h as ZButtonSort,d as defineCustomElement};
+import{proxyCustomElement as r,HTMLElement as t,createEvent as o,h as i,transformTag as e}from"@stencil/core/internal/client";import{B as s}from"./breakpoints.js";import{d as a}from"./index3.js";const c=()=>`button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-active-primary-icon)}button.selected{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse);fill:var(--color-inverse-icon)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}`;const n=r(class r extends t{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.buttonSortClick=o(this,"buttonSortClick",7);this.sortlabelasc="A-Z";this.sortlabeldesc="Z-A";this.isselected=false;this.sortasc=true;this.allowTooltip=false}emitButtonSortClick(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})}componentDidLoad(){if(this.elementHasEllipsis()&&window.innerWidth>s.TABLET){this.allowTooltip=true}}setButtonTitle(){return this.allowTooltip?`${this.sortasc?this.label:this.desclabel}`:""}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return i("button",{key:"acc7e3fa2e284b9b5b5d8f20f5d2f149c80b7e05",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:()=>this.emitButtonSortClick()},i("span",{key:"a50ff5723e5817d724206e0495e1b3f45b5f4c3f",ref:r=>this.ellipsis=r,class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),i("span",{key:"3962fb15112cb94ea958b607cb915f61f4adaa02",class:"counter"},this.counter&&` (${this.counter})`),i("span",{key:"23d06d6e51ce292b26e6e4bd7ee07aeb097f843f",class:"sort"},this.sortasc?this.sortlabelasc:this.sortlabeldesc),i("z-icon",{key:"35d3bd5bd3f84cf6e008b8c01a3d0dc995dc6f44",name:"caret-up-down",width:16,height:16}))}static get style(){return c()}},[1,"z-button-sort",{buttonid:[1],label:[1],desclabel:[1],counter:[2],sortlabelasc:[1],sortlabeldesc:[1],isselected:[1028],sortasc:[1028],allowTooltip:[32]}]);function l(){if(typeof customElements==="undefined"){return}const r=["z-button-sort","z-icon"];r.forEach((r=>{switch(r){case"z-button-sort":if(!customElements.get(e(r))){customElements.define(e(r),n)}break;case"z-icon":if(!customElements.get(e(r))){a()}break}}))}const d=n;const h=l;export{d as ZButtonSort,h as defineCustomElement};
 //# sourceMappingURL=z-button-sort.js.map

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

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as o,h as a,Host as e,transformTag as r}from"@stencil/core/internal/client";import{C as s}from"./index2.js";import{d as i}from"./index3.js";const c=()=>`:host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center}:host(:not([variant="overlay"])) .actions{margin-top:auto}::slotted([slot="action"]){position:relative;z-index:2}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant="text"]) [slot="text"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}`;const n=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.showShadow=false;this.clickable=false}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[a("div",{class:"cover-container"},a("div",{class:"color-cover"},a("div",{class:"cover-content"},a("slot",{name:"metadata"}),a("slot",{name:"title"})))),a("div",{class:"content"},a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))]}renderContent(){return a("div",{class:"content"},a("slot",{name:"metadata"}),a("slot",{name:"title"}),a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))}render(){if(this.variant===s.TEXT){return a(e,null,this.renderContent())}if(this.variant===s.OVERLAY||this.hasCoverImage){return a(e,null,a("div",{class:"cover-container"},this.hasCoverImage&&[a("slot",{name:"cover"}),this.variant!==s.OVERLAY&&this.coverIcon&&a("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&a("div",{class:"color-cover"})),this.renderContent())}return a(e,null,this.renderColorCoverCard())}get host(){return this}static get style(){return c()}},[257,"z-card",{variant:[513],coverIcon:[1,"cover-icon"],showShadow:[516,"show-shadow"],clickable:[516],hasCoverImage:[32]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-card","z-icon"];t.forEach((t=>{switch(t){case"z-card":if(!customElements.get(r(t))){customElements.define(r(t),n)}break;case"z-icon":if(!customElements.get(r(t))){i()}break}}))}const d=n;const v=l;export{d as ZCard,v as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as o,h as a,Host as e,transformTag as r}from"@stencil/core/internal/client";import{C as s}from"./index2.js";import{d as i}from"./index3.js";const c=()=>`:host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center}:host(:not([variant="overlay"])) .actions{margin-top:auto}::slotted([slot="action"]){position:relative;z-index:2}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant="text"]) [slot="text"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to bottom, transparent, rgb(39 39 39 / 57%) 85%, var(--gray800) 100%);color:var(--color-text-inverse);fill:var(--color-text-inverse)}`;const n=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.showShadow=false;this.clickable=false}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[a("div",{class:"cover-container"},a("div",{class:"color-cover"},a("div",{class:"cover-content"},a("slot",{name:"metadata"}),a("slot",{name:"title"})))),a("div",{class:"content"},a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))]}renderContent(){return a("div",{class:"content"},a("slot",{name:"metadata"}),a("slot",{name:"title"}),a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))}render(){if(this.variant===s.TEXT){return a(e,null,this.renderContent())}if(this.variant===s.OVERLAY||this.hasCoverImage){return a(e,null,a("div",{class:"cover-container"},this.hasCoverImage&&[a("slot",{name:"cover"}),this.variant!==s.OVERLAY&&this.coverIcon&&a("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&a("div",{class:"color-cover"})),this.renderContent())}return a(e,null,this.renderColorCoverCard())}get host(){return this}static get style(){return c()}},[257,"z-card",{variant:[513],coverIcon:[1,"cover-icon"],showShadow:[516,"show-shadow"],clickable:[516],hasCoverImage:[32]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-card","z-icon"];t.forEach((t=>{switch(t){case"z-card":if(!customElements.get(r(t))){customElements.define(r(t),n)}break;case"z-icon":if(!customElements.get(r(t))){i()}break}}))}const d=n;const v=l;export{d as ZCard,v as defineCustomElement};
 //# sourceMappingURL=z-card.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","ZCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","showShadow","clickable","componentWillLoad","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContent","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`\n * @prop --z-card--border-color: Default: `var(--gray200)`\n * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`\n * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`\n * @prop --z-card--text-border-radius: Default: `none`\n * @prop --z-card--text-border: Configure CSS `border`. Default: `none`\n * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`\n /\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n,\n::slotted() {\n box-sizing: border-box;\n}\n\n:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/ Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental /\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text /\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border /\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/ Shadow /\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/ Overlay /\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/\n ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n \n @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard implements ComponentInterface {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant?: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /\n Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"mappings":"uLAAA,MAAMA,EAAY,IAAM,8tI,MCkBXC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,kEAoBEC,KAAAC,WAAa,MAObD,KAAAE,UAAY,KAwEb,CAjEC,iBAAAC,GACEH,KAAKI,cAAgBJ,KAAKK,KAAKC,cAAc,oBAAsB,I,CAO7D,oBAAAC,GACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,CASX,aAAAC,GACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,CAMnB,MAAAE,GACE,GAAIZ,KAAKa,UAAYC,EAAYC,KAAM,CACrC,OAAOP,EAACQ,EAAI,KAAEhB,KAAKW,gB,CAGrB,GAAIX,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKI,cAAe,CAC9D,OACEI,EAACQ,EAAI,KACHR,EAAA,OAAKC,MAAM,mBACRT,KAAKI,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXV,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKkB,WAAaV,EAAA,UAAQE,KAAMV,KAAKkB,cAE7ElB,KAAKI,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCT,KAAKW,gB,CAKZ,OAAOH,EAACQ,EAAI,KAAEhB,KAAKO,uB","ignoreList":[]}
1	+ {"version":3,"names":["stylesCss","ZCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","showShadow","clickable","componentWillLoad","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContent","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`\n * @prop --z-card--border-color: Default: `var(--gray200)`\n * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`\n * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`\n * @prop --z-card--text-border-radius: Default: `none`\n * @prop --z-card--text-border: Configure CSS `border`. Default: `none`\n * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`\n /\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n,\n::slotted() {\n box-sizing: border-box;\n}\n\n:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/ Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental /\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text /\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border /\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/ Shadow /\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/ Overlay /\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to bottom, transparent, rgb(39 39 39 / 57%) 85%, var(--gray800) 100%);\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/\n ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n \n @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard implements ComponentInterface {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant?: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /\n Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"mappings":"uLAAA,MAAMA,EAAY,IAAM,wvI,MCkBXC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,kEAoBEC,KAAAC,WAAa,MAObD,KAAAE,UAAY,KAwEb,CAjEC,iBAAAC,GACEH,KAAKI,cAAgBJ,KAAKK,KAAKC,cAAc,oBAAsB,I,CAO7D,oBAAAC,GACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,CASX,aAAAC,GACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,CAMnB,MAAAE,GACE,GAAIZ,KAAKa,UAAYC,EAAYC,KAAM,CACrC,OAAOP,EAACQ,EAAI,KAAEhB,KAAKW,gB,CAGrB,GAAIX,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKI,cAAe,CAC9D,OACEI,EAACQ,EAAI,KACHR,EAAA,OAAKC,MAAM,mBACRT,KAAKI,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXV,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKkB,WAAaV,EAAA,UAAQE,KAAMV,KAAKkB,cAE7ElB,KAAKI,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCT,KAAKW,gB,CAKZ,OAAOH,EAACQ,EAAI,KAAEhB,KAAKO,uB","ignoreList":[]}

package/dist/components/z-color-picker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as a,transformTag as s}from"@stencil/core/internal/client";import{a2 as i}from"./index2.js";import{a as l}from"./utils.js";const c=()=>`:host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}`;const n={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}};const d=5;const h=9;const u=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.colorSelected=o(this,"colorSelected",7);this.lng="it";this.disableTransparent=false;this.colorKeysByRow=[];this._colorButtons=[]}get colorButtons(){if(!this._colorButtons.length){this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))}return this._colorButtons}sortColorKeysByRow(){const t=Object.keys(i);const e=[];for(let o=0;o<d;o++){for(let r=0;r<h;r++){const a=r*d+o;if(a<t.length){e.push(t[a])}}}return e}moveFocusTo(t){this.colorButtons.forEach(((e,o)=>e.tabIndex=o===t?0:-1));this.colorButtons[t].focus()}validateTransparentSelection(){if(this.disableTransparent&&this.selectedColor==="#FFFFFF00"){this.selectedColor="#333333"}}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>t.ariaSelected==="true"))||this.colorButtons.find((t=>!t.disabled));if(!t){return}t.tabIndex=0;setTimeout((()=>{t.focus()}),50);this.host.tabIndex=-1}getNextIndexByKey(t,e,o){const r=Math.floor(t/h);const a=t%h;let s=t;switch(e){case"ArrowRight":{const t=a+1;const e=t>=h?(r+1)%d:r;s=e*h+t%h;if(s>=o){s=0}break}case"ArrowLeft":{const t=a-1;const e=t<0?(r-1+d)%d:r;s=e*h+(t+h)%h;if(s>=o){s=o-1}break}case"ArrowDown":{let t=r+1;let e=a;if(t>=d){t=0;e=(a+1)%h}s=t*h+e;if(s>=o){s=0}break}case"ArrowUp":{let t=r-1;let e=a;if(t<0){t=d-1;e=(a-1+h)%h}s=t*h+e;if(s>=o){s=o-1}break}}return s}handleKeyDown(t){var e,o;const r=t.composedPath()[0];if(!r.dataset.color){return}const a=this.colorButtons.indexOf(r);const s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key)){return}let i=a;let l=0;do{i=this.getNextIndexByKey(i,t.key,s);l++}while(l<s&&((e=this.colorButtons[i])===null||e===void 0?void 0:e.disabled));if(i!==a&&i>=0&&i<s&&!((o=this.colorButtons[i])===null||o===void 0?void 0:o.disabled)){this.moveFocusTo(i);t.preventDefault();t.stopPropagation()}}handleBlur(t){const e=t.relatedTarget;if(!l(this.host,e)){this.host.tabIndex=0;this.colorButtons.forEach((t=>t.tabIndex=-1))}}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return r(a,{key:"f667faadf21b5b31093f9287fe1bd481e02a2474",role:"listbox","aria-label":this.htmlAriaLabel||n[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var e;return r("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":((e=this.selectedColor)===null||e===void 0?void 0:e.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&t==="#FFFFFF00"},r("div",{class:"color-swatch",role:"img","aria-roledescription":n[this.lng]["Color swatch"],"aria-label":i[t][this.lng],title:i[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return this}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}static get style(){return c()}},[1,"z-color-picker",{selectedColor:[1025,"selected-color"],lng:[1],htmlAriaLabel:[1,"html-aria-label"],disableTransparent:[4,"disable-transparent"],setFocus:[64]},[[0,"focus","setFocus"],[0,"keydown","handleKeyDown"],[0,"blur","handleBlur"]],{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["z-color-picker"];t.forEach((t=>{switch(t){case"z-color-picker":if(!customElements.get(s(t))){customElements.define(s(t),u)}break}}))}const p=u;const f=b;export{p as ZColorPicker,f as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as a,transformTag as s}from"@stencil/core/internal/client";import{a2 as i}from"./index2.js";import{a as l}from"./utils.js";const c=()=>`:host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}`;const n={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}};const d=5;const h=9;const u=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.colorSelected=o(this,"colorSelected",7);this.lng="it";this.disableTransparent=false;this.colorKeysByRow=[];this._colorButtons=[]}get colorButtons(){if(!this._colorButtons.length){this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))}return this._colorButtons}sortColorKeysByRow(){const t=Object.keys(i);const e=[];for(let o=0;o<d;o++){for(let r=0;r<h;r++){const a=r*d+o;if(a<t.length){e.push(t[a])}}}return e}moveFocusTo(t){this.colorButtons.forEach(((e,o)=>e.tabIndex=o===t?0:-1));this.colorButtons[t].focus()}validateTransparentSelection(){if(this.disableTransparent&&this.selectedColor==="#FFFFFF00"){this.selectedColor="#333333"}}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>t.ariaSelected==="true"))||this.colorButtons.find((t=>!t.disabled));if(!t){return}t.tabIndex=0;setTimeout((()=>{t.focus()}),50);this.host.tabIndex=-1}getNextIndexByKey(t,e,o){const r=Math.floor(t/h);const a=t%h;let s=t;switch(e){case"ArrowRight":{const t=a+1;const e=t>=h?(r+1)%d:r;s=e*h+t%h;if(s>=o){s=0}break}case"ArrowLeft":{const t=a-1;const e=t<0?(r-1+d)%d:r;s=e*h+(t+h)%h;if(s>=o){s=o-1}break}case"ArrowDown":{let t=r+1;let e=a;if(t>=d){t=0;e=(a+1)%h}s=t*h+e;if(s>=o){s=0}break}case"ArrowUp":{let t=r-1;let e=a;if(t<0){t=d-1;e=(a-1+h)%h}s=t*h+e;if(s>=o){s=o-1}break}}return s}handleKeyDown(t){var e,o;const r=t.composedPath()[0];if(!r.dataset.color){return}const a=this.colorButtons.indexOf(r);const s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key)){return}let i=a;let l=0;do{i=this.getNextIndexByKey(i,t.key,s);l++}while(l<s&&((e=this.colorButtons[i])===null||e===void 0?void 0:e.disabled));if(i!==a&&i>=0&&i<s&&!((o=this.colorButtons[i])===null||o===void 0?void 0:o.disabled)){this.moveFocusTo(i);t.preventDefault();t.stopPropagation()}}handleBlur(t){const e=t.relatedTarget;if(!l(this.host,e)){this.host.tabIndex=0;this.colorButtons.forEach((t=>t.tabIndex=-1))}}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return r(a,{key:"aa2fb04330c5c76e4a0d10e4bb519d388af2d2d9",role:"listbox","aria-label":this.htmlAriaLabel||n[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var e;return r("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":((e=this.selectedColor)===null||e===void 0?void 0:e.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&t==="#FFFFFF00"},r("div",{class:"color-swatch",role:"img","aria-roledescription":n[this.lng]["Color swatch"],"aria-label":i[t][this.lng],title:i[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return this}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}static get style(){return c()}},[1,"z-color-picker",{selectedColor:[1025,"selected-color"],lng:[1],htmlAriaLabel:[1,"html-aria-label"],disableTransparent:[4,"disable-transparent"],setFocus:[64]},[[0,"focus","setFocus"],[0,"keydown","handleKeyDown"],[0,"blur","handleBlur"]],{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["z-color-picker"];t.forEach((t=>{switch(t){case"z-color-picker":if(!customElements.get(s(t))){customElements.define(s(t),u)}break}}))}const p=u;const F=b;export{p as ZColorPicker,F as defineCustomElement};
 //# sourceMappingURL=z-color-picker.js.map

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

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,transformTag as o}from"@stencil/core/internal/client";import{e as a,I as r,i as n,g as l,l as c}from"./index2.js";import{r as h,e as d,b as p}from"./utils.js";import{d as m}from"./index5.js";import{d as u}from"./index3.js";import{d as b}from"./index6.js";import{d as v}from"./index7.js";import{d as f}from"./index9.js";import{d as g}from"./index10.js";const x=()=>`.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 z=()=>`: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 k=e(class e extends t{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((e=>e.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.comboboxChange=i(this,"comboboxChange",7);this.inputid=`combo-${h()}`;this.disabled=false;this.hassearch=false;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.size=a.BIG;this.renderItemsList=[];this.focusedItemId="";this.itemsList=[];this.inputType=r.TEXT;this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((e=>e.checked)).length}getControlToListSize(){switch(this.size){case a.X_SMALL:return n.SMALL;case a.SMALL:return n.MEDIUM;default:return n.LARGE}}getOptionId(e){return`${this.inputid}-option-${e.id?d(`${e.id}`):d(`${e.name}`)}`}getCheckAllOptionId(){return`${this.inputid}-check-all`}allOptionsSelected(){return this.selectedCounter===this.itemsList.length}hasReachedMaxSelections(){return!!(this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems)}handleHeaderKeyDown(e){if(e.code===l.ENTER&&!this.focusedItemId){this.toggleComboBox()}if(!this.isopen||this.hassearch){return}switch(e.code){case l.SPACE:case l.ENTER:if(this.focusedItemId){e.preventDefault();this.checkOption(this.focusedItemId)}break;case l.ESC:if(this.focusedItemId){this.focusedItemId=""}break;case l.ARROW_DOWN:case l.ARROW_UP:this.handleArrowsNavigation(e);break}}handleInputKeyDown(e){switch(e.code){case l.ENTER:case l.SPACE:if(this.focusedItemId){e.preventDefault();this.checkOption(this.focusedItemId);break}break;case l.ARROW_DOWN:case l.ARROW_UP:this.handleArrowsNavigation(e);break;case l.ESC:if(this.focusedItemId){this.focusedItemId="";break}this.closeFilterItems();break;case l.TAB:this.focusedItemId="";break}}checkOption(e){if(e===this.getCheckAllOptionId()){this.itemsList=this.itemsList.map((e=>Object.assign(Object.assign({},e),{checked:!this.allOptionsSelected()})));this.focusedItemId=this.getCheckAllOptionId()}else{this.itemsList=this.itemsList.map((t=>{if(e===this.getOptionId(t)){t.checked=!t.checked}return t}))}this.updateRenderItemsList();this.emitComboboxChange()}handleArrowsNavigation(e){if(![l.ARROW_DOWN,l.ARROW_UP].includes(e.code)||!this.isopen){return}e.preventDefault();e.stopPropagation();const t=this.focusedItemId?this.element.shadowRoot.querySelector(`#${this.focusedItemId}`):null;const i=Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));if(!i.length){return}const s=t?i.indexOf(t):null;const o=0;const a=i.length-1;let r=null;if(e.code===l.ARROW_DOWN){r=s===null?i[o]:i[s+1]||i[a]}else if(e.code===l.ARROW_UP){r=s===null?i[a]:i[s-1]||i[o]}this.focusedItemId=r.id;r.scrollIntoView({block:"nearest",container:"nearest"})}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const e=[];this.itemsList.forEach((t=>{e.push(Object.assign({},t))}));this.renderItemsList=e}filterItems(e){if(!e){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((t=>{const i=t.name.toUpperCase().indexOf(e.toUpperCase());const s=i+e.length;const o=t.name.substring(0,i)+"<strong>"+t.name.substring(i,s)+"</strong>"+t.name.substring(s,t.name.length);t.name=o;return i>=0}))}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getHeaderAriaLabel(){if(!this.label||this.selectedCounter<=0){return undefined}const e=this.selectedCounter===1?"elemento selezionato":"elementi selezionati";return`${this.label}: ${this.selectedCounter} ${e}`}getComboboxA11yAttributes(e){const t="combobox";const i=this.isopen?"true":"false";const s=this.isopen?this.focusedItemId:"";const o=`${this.inputid}_list`;if(e){return{role:t,"aria-label":this.htmlAriaLabel,"html-aria-expanded":i,"html-aria-activedescendant":s,"html-aria-controls":o}}return{role:t,"aria-expanded":i,"aria-activedescendant":s,"aria-controls":o}}renderHeader(){const e=!this.hassearch?this.getComboboxA11yAttributes(false):{};return s("div",Object.assign({class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:e=>this.handleHeaderKeyDown(e),role:"button",tabindex:0,"aria-controls":"open-combo-data","aria-expanded":this.isopen?"true":"false","aria-label":this.getHeaderAriaLabel()},e),s("span",{class:"body-3"},this.label,s("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),s("z-icon",{name:"caret-down",class:this.size}))}renderContent(){return s("div",{id:"open-combo-data",class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),s("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":"true",id:`${this.inputid}_list`,"aria-owns":`${this.hascheckall?`${this.getCheckAllOptionId()} `:``}${this.itemsList.map((e=>this.getOptionId(e))).join(" ")}`},this.renderItems()))}renderItems(){return s("div",{class:this.searchValue&&"search",tabIndex:-1,role:"presentation"},this.renderList(this.renderItemsList))}renderItem(e,t,i){const o=this.getOptionId(e);const a=!e.checked&&this.hasReachedMaxSelections();return s("z-list-element",{htmlTabindex:-1,dividerType:t!==i-1?c.ELEMENT:c.NONE,size:this.getControlToListSize(),role:"presentation",disabled:!!a},s("span",{class:"option-wrap",role:"presentation",onClick:()=>{this.focusedItemId="";this.checkOption(o)}},s("z-icon",{name:e.checked?"checkbox-checked":"checkbox",class:this.focusedItemId===o?"focused":""}),s("span",{id:o,role:a?"presentation":"option","aria-selected":e.checked?"true":"false","aria-label":a?undefined:p(e.name)},s("span",{"aria-hidden":"true",innerHTML:e.name}))))}renderList(e){if(!e){return}if(!e.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(e)}return s("ul",{role:"presentation"},this.renderCheckAll(),e.map(((t,i)=>this.renderItem(t,i,e.length))))}renderGroups(e){const t=e.reduce(((t,i,s)=>{var o;const a=i.category||"Altra categoria";const r=this.renderItem(i,s,e.length);t[a]=(o=t[a])!==null&&o!==void 0?o:[];t[a].push(r);return t}),{});const i=Object.entries(t).map((([e,t],i)=>s("z-list-group",{size:this.getControlToListSize(),"divider-type":c.ELEMENT,"aria-labelledby":`${this.inputid}_list_group_${i}`},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.inputid}_list_group_${i}`,"aria-hidden":"true"},e),t.map((e=>e)))));return s("ul",{role:"presentation"},this.renderCheckAll(),i)}renderNoSearchResults(){return s("div",{class:"no-results"},s("span",null,this.noresultslabel))}renderSearchInput(){return s("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"html-aria-autocomplete":"list"},this.getComboboxA11yAttributes(true),{onKeyDown:e=>this.handleInputKeyDown(e),onInputChange:e=>{this.searchValue=e.detail.value;this.focusedItemId=""}}))}renderCheckAll(){if(!this.hascheckall||this.searchValue){return}const e=this.getCheckAllOptionId();const t=this.allOptionsSelected();const i=this.selectedCounter>0&&!t;const o=!t&&(this.hasReachedMaxSelections()||this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length);return s("z-list-element",{class:"check-all-wrapper",role:"presentation",htmlTabindex:-1,dividerType:c.ELEMENT,dividerColor:"gray800",size:this.getControlToListSize(),disabled:!!o},s("span",{class:"option-wrap",role:"presentation",onClick:()=>this.checkOption(e)},s("z-icon",{name:i?"indeterminated-checkbox":t?"checkbox-checked":"checkbox",class:this.focusedItemId===e?"focused":""}),s("span",{id:e,role:o?"presentation":"option","aria-selected":t?"true":"false"},t?this.uncheckalltext:this.checkalltext)))}render(){return s("div",{key:"683f9ed203e8c3843d0e20daf0acade8a0ff1a49","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 this}static get watchers(){return{items:[{watchItems:0}],searchValue:[{watchSearchValue:0}]}}static get style(){return x()+z()}},[1,"z-combobox",{inputid:[1],items:[1],label:[1],disabled:[516],hassearch:[4],searchlabel:[1],searchplaceholder:[1],searchtitle:[1],noresultslabel:[1],isopen:[1028],isfixed:[4],hascheckall:[4],checkalltext:[1],uncheckalltext:[1],maxcheckableitems:[2],hasgroupitems:[4],size:[1],htmlAriaLabel:[1,"html-aria-label"],searchValue:[32],selectedCounter:[32],renderItemsList:[32],focusedItemId:[32]},undefined,{items:[{watchItems:0}],searchValue:[{watchSearchValue:0}]}]);function w(){if(typeof customElements==="undefined"){return}const e=["z-combobox","z-divider","z-icon","z-input","z-input-message","z-list-element","z-list-group"];e.forEach((e=>{switch(e){case"z-combobox":if(!customElements.get(o(e))){customElements.define(o(e),k)}break;case"z-divider":if(!customElements.get(o(e))){m()}break;case"z-icon":if(!customElements.get(o(e))){u()}break;case"z-input":if(!customElements.get(o(e))){b()}break;case"z-input-message":if(!customElements.get(o(e))){v()}break;case"z-list-element":if(!customElements.get(o(e))){f()}break;case"z-list-group":if(!customElements.get(o(e))){g()}break}}))}const y=k;const $=w;export{y as ZCombobox,$ as defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,transformTag as o}from"@stencil/core/internal/client";import{e as a,I as r,i as n,g as l,l as c}from"./index2.js";import{r as h,e as d,b as p}from"./utils.js";import{d as m}from"./index5.js";import{d as u}from"./index3.js";import{d as b}from"./index6.js";import{d as v}from"./index7.js";import{d as f}from"./index9.js";import{d as x}from"./index10.js";const g=()=>`.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 z=()=>`: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)}: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>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 k=e(class e extends t{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((e=>e.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.comboboxChange=i(this,"comboboxChange",7);this.inputid=`combo-${h()}`;this.disabled=false;this.hassearch=false;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.size=a.BIG;this.renderItemsList=[];this.focusedItemId="";this.itemsList=[];this.inputType=r.TEXT;this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((e=>e.checked)).length}getControlToListSize(){switch(this.size){case a.X_SMALL:return n.SMALL;case a.SMALL:return n.MEDIUM;default:return n.LARGE}}getOptionId(e){return`${this.inputid}-option-${e.id?d(`${e.id}`):d(`${e.name}`)}`}getCheckAllOptionId(){return`${this.inputid}-check-all`}allOptionsSelected(){return this.selectedCounter===this.itemsList.length}hasReachedMaxSelections(){return!!(this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems)}handleHeaderKeyDown(e){if(e.code===l.ENTER&&!this.focusedItemId){this.toggleComboBox()}if(!this.isopen||this.hassearch){return}switch(e.code){case l.SPACE:case l.ENTER:if(this.focusedItemId){e.preventDefault();this.checkOption(this.focusedItemId)}break;case l.ESC:if(this.focusedItemId){this.focusedItemId=""}break;case l.ARROW_DOWN:case l.ARROW_UP:this.handleArrowsNavigation(e);break}}handleInputKeyDown(e){switch(e.code){case l.ENTER:case l.SPACE:if(this.focusedItemId){e.preventDefault();this.checkOption(this.focusedItemId);break}break;case l.ARROW_DOWN:case l.ARROW_UP:this.handleArrowsNavigation(e);break;case l.ESC:if(this.focusedItemId){this.focusedItemId="";break}this.closeFilterItems();break;case l.TAB:this.focusedItemId="";break}}checkOption(e){if(e===this.getCheckAllOptionId()){this.itemsList=this.itemsList.map((e=>Object.assign(Object.assign({},e),{checked:!this.allOptionsSelected()})));this.focusedItemId=this.getCheckAllOptionId()}else{this.itemsList=this.itemsList.map((t=>{if(e===this.getOptionId(t)){t.checked=!t.checked}return t}))}this.updateRenderItemsList();this.emitComboboxChange()}handleArrowsNavigation(e){if(![l.ARROW_DOWN,l.ARROW_UP].includes(e.code)||!this.isopen){return}e.preventDefault();e.stopPropagation();const t=this.focusedItemId?this.element.shadowRoot.querySelector(`#${this.focusedItemId}`):null;const i=Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));if(!i.length){return}const s=t?i.indexOf(t):null;const o=0;const a=i.length-1;let r=null;if(e.code===l.ARROW_DOWN){r=s===null?i[o]:i[s+1]||i[a]}else if(e.code===l.ARROW_UP){r=s===null?i[a]:i[s-1]||i[o]}this.focusedItemId=r.id;r.scrollIntoView({block:"nearest",container:"nearest"})}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const e=[];this.itemsList.forEach((t=>{e.push(Object.assign({},t))}));this.renderItemsList=e}filterItems(e){if(!e){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((t=>{const i=t.name.toUpperCase().indexOf(e.toUpperCase());const s=i+e.length;const o=t.name.substring(0,i)+"<strong>"+t.name.substring(i,s)+"</strong>"+t.name.substring(s,t.name.length);t.name=o;return i>=0}))}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getHeaderAriaLabel(){if(!this.label||this.selectedCounter<=0){return undefined}const e=this.selectedCounter===1?"elemento selezionato":"elementi selezionati";return`${this.label}: ${this.selectedCounter} ${e}`}getComboboxA11yAttributes(e){const t="combobox";const i=this.isopen?"true":"false";const s=this.isopen?this.focusedItemId:"";const o=`${this.inputid}_list`;if(e){return{role:t,"aria-label":this.htmlAriaLabel,"html-aria-expanded":i,"html-aria-activedescendant":s,"html-aria-controls":o}}return{role:t,"aria-expanded":i,"aria-activedescendant":s,"aria-controls":o}}renderHeader(){const e=!this.hassearch?this.getComboboxA11yAttributes(false):{};return s("div",Object.assign({class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:e=>this.handleHeaderKeyDown(e),role:"button",tabindex:0,"aria-controls":"open-combo-data","aria-expanded":this.isopen?"true":"false","aria-label":this.getHeaderAriaLabel()},e),s("span",{class:"body-3"},this.label,s("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),s("z-icon",{name:this.isopen?"caret-up":"caret-down",class:this.size}))}renderContent(){return s("div",{id:"open-combo-data",class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),s("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":"true",id:`${this.inputid}_list`,"aria-owns":`${this.hascheckall?`${this.getCheckAllOptionId()} `:``}${this.itemsList.map((e=>this.getOptionId(e))).join(" ")}`},this.renderItems()))}renderItems(){return s("div",{class:this.searchValue&&"search",tabIndex:-1,role:"presentation"},this.renderList(this.renderItemsList))}renderItem(e,t,i){const o=this.getOptionId(e);const a=!e.checked&&this.hasReachedMaxSelections();return s("z-list-element",{htmlTabindex:-1,dividerType:t!==i-1?c.ELEMENT:c.NONE,size:this.getControlToListSize(),role:"presentation",disabled:!!a},s("span",{class:"option-wrap",role:"presentation",onClick:()=>{this.focusedItemId="";this.checkOption(o)}},s("z-icon",{name:e.checked?"checkbox-checked":"checkbox",class:this.focusedItemId===o?"focused":""}),s("span",{id:o,role:a?"presentation":"option","aria-selected":e.checked?"true":"false","aria-label":a?undefined:p(e.name)},s("span",{"aria-hidden":"true",innerHTML:e.name}))))}renderList(e){if(!e){return}if(!e.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(e)}return s("ul",{role:"presentation"},this.renderCheckAll(),e.map(((t,i)=>this.renderItem(t,i,e.length))))}renderGroups(e){const t=e.reduce(((t,i,s)=>{var o;const a=i.category||"Altra categoria";const r=this.renderItem(i,s,e.length);t[a]=(o=t[a])!==null&&o!==void 0?o:[];t[a].push(r);return t}),{});const i=Object.entries(t).map((([e,t],i)=>s("z-list-group",{size:this.getControlToListSize(),"divider-type":c.ELEMENT,"aria-labelledby":`${this.inputid}_list_group_${i}`},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.inputid}_list_group_${i}`,"aria-hidden":"true"},e),t.map((e=>e)))));return s("ul",{role:"presentation"},this.renderCheckAll(),i)}renderNoSearchResults(){return s("div",{class:"no-results"},s("span",null,this.noresultslabel))}renderSearchInput(){return s("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"html-aria-autocomplete":"list"},this.getComboboxA11yAttributes(true),{onKeyDown:e=>this.handleInputKeyDown(e),onInputChange:e=>{this.searchValue=e.detail.value;this.focusedItemId=""}}))}renderCheckAll(){if(!this.hascheckall||this.searchValue){return}const e=this.getCheckAllOptionId();const t=this.allOptionsSelected();const i=this.selectedCounter>0&&!t;const o=!t&&(this.hasReachedMaxSelections()||this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length);return s("z-list-element",{class:"check-all-wrapper",role:"presentation",htmlTabindex:-1,dividerType:c.ELEMENT,dividerColor:"gray800",size:this.getControlToListSize(),disabled:!!o},s("span",{class:"option-wrap",role:"presentation",onClick:()=>this.checkOption(e)},s("z-icon",{name:i?"indeterminated-checkbox":t?"checkbox-checked":"checkbox",class:this.focusedItemId===e?"focused":""}),s("span",{id:e,role:o?"presentation":"option","aria-selected":t?"true":"false"},t?this.uncheckalltext:this.checkalltext)))}render(){return s("div",{key:"9f1468b03c1cbe2c12aec68ab8c096b56651ebe2","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 this}static get watchers(){return{items:[{watchItems:0}],searchValue:[{watchSearchValue:0}]}}static get style(){return g()+z()}},[1,"z-combobox",{inputid:[1],items:[1],label:[1],disabled:[516],hassearch:[4],searchlabel:[1],searchplaceholder:[1],searchtitle:[1],noresultslabel:[1],isopen:[1028],isfixed:[4],hascheckall:[4],checkalltext:[1],uncheckalltext:[1],maxcheckableitems:[2],hasgroupitems:[4],size:[1],htmlAriaLabel:[1,"html-aria-label"],searchValue:[32],selectedCounter:[32],renderItemsList:[32],focusedItemId:[32]},undefined,{items:[{watchItems:0}],searchValue:[{watchSearchValue:0}]}]);function w(){if(typeof customElements==="undefined"){return}const e=["z-combobox","z-divider","z-icon","z-input","z-input-message","z-list-element","z-list-group"];e.forEach((e=>{switch(e){case"z-combobox":if(!customElements.get(o(e))){customElements.define(o(e),k)}break;case"z-divider":if(!customElements.get(o(e))){m()}break;case"z-icon":if(!customElements.get(o(e))){u()}break;case"z-input":if(!customElements.get(o(e))){b()}break;case"z-input-message":if(!customElements.get(o(e))){v()}break;case"z-list-element":if(!customElements.get(o(e))){f()}break;case"z-list-group":if(!customElements.get(o(e))){x()}break}}))}const y=k;const $=w;export{y as ZCombobox,$ as defineCustomElement};
 //# sourceMappingURL=z-combobox.js.map