npm - @zanichelli/albe-web-components - Versions diffs - 17.0.2 → 17.0.3 - Mend

@zanichelli/albe-web-components 17.0.2 → 17.0.3

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

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

	@@ -1 +1 @@
1	- {"file":"z-book-card.js","mappings":"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","names":["stylesCss","ZBookCard"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n display: block;\n max-width: fit-content;\n border-radius: var(--border-radius);\n}\n\n:host > article {\n width: 304px;\n min-height: 686px;\n box-sizing: border-box;\n padding: var(--space-unit) 0;\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 > article .main-content {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n:host > article .main-content .cover {\n display: flex;\n overflow: hidden;\n height: 378px;\n margin: 0 var(--space-unit);\n border-radius: var(--border-radius);\n}\n\n:host > article .main-content .cover img {\n max-width: 100%;\n max-height: 100%;\n align-self: end;\n}\n\n:host > article .main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: calc(var(--space-unit) * 2);\n}\n\n:host > article .main-content .card-info .book-data {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0 var(--space-unit);\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section {\n display: grid;\n column-gap: var(--space-unit);\n grid-template-areas:\n \"authors authors\"\n \"title cta\";\n grid-template-columns: auto 24px;\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section .authors {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n margin-bottom: calc(var(--space-unit) / 2);\n -webkit-box-orient: vertical;\n grid-area: authors;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title {\n display: -webkit-box;\n overflow: hidden;\n height: 54px;\n -webkit-box-orient: vertical;\n grid-area: title;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-overflow: ellipsis;\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title * {\n all: unset;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section {\n margin-bottom: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .volume-title {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .isbn {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {\n display: flex;\n overflow: hidden;\n height: 22px;\n flex-flow: wrap;\n align-items: center;\n padding: var(--space-unit);\n margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1) 0;\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.active {\n --z-tag-bg: var(--color-primary03);\n --z-tag-text-color: var(--color-default-text);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.disabled {\n --z-tag-bg: var(--color-surface03);\n --z-tag-text-color: var(--color-default-text);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.interactive {\n cursor: pointer;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section {\n display: flex;\n height: 24px;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section .adoption-tag {\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n background-color: var(--green100);\n border-radius: 100px;\n text-transform: uppercase;\n}\n\n:host > article .main-content .card-info .ebook-container {\n height: 64px;\n}\n\n:host > article .main-content .card-info .ebook-container .ebook {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: calc(var(--space-unit) * 2) var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .ebook-container .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host > article .main-content .card-info .ebook-container .ebook .app-name .ebook-logo {\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%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 > article .main-content .card-info .ebook-container .ebook .app-name .laz {\n color: var(--red500);\n}\n\n::slotted([slot=\"cta\"]) {\n grid-area: cta;\n}\n\n:host > article.landscape {\n width: 635px;\n min-height: 332px;\n max-height: 428px;\n padding: 0;\n}\n\n:host > article.landscape .main-content {\n height: 296px;\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > article.landscape .main-content .cover {\n display: flex;\n overflow: hidden;\n width: 221px;\n height: auto;\n margin: 0;\n}\n\n:host > article.landscape .main-content .card-info .book-data {\n margin: 0;\n gap: unset;\n}\n\n:host > article.landscape .main-content .card-info .book-data .authors-title-cta-section {\n column-gap: calc(var(--space-unit) * 2);\n grid-template-areas:\n \"authors cta\"\n \"title title\";\n}\n\n:host > article.landscape .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {\n margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1);\n}\n\n:host > article.landscape .main-content .card-info .ebook-container {\n height: 76px;\n}\n\n:host > article.landscape .main-content .card-info .ebook-container .ebook {\n padding: var(--space-unit);\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,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus,\nbutton.z-link:focus {\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,\nbutton.z-link:focus,\na.z-link.z-link-active:focus,\nbutton.z-link.z-link-active:focus,\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,\nbutton.z-link.z-link-blue:focus {\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,\nbutton.z-link.z-link-red:focus {\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,\nbutton.z-link.z-link-inverse:focus {\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",":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) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 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\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\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\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\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","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {BookCardTag, BookCardTagEvent, BookCardTagStatus, BookCardVariant, ControlSize} from \"../../../beans\";\n\n/\n @slot cta - to the right of authors and title (e.g. bookmark icon)\n * @slot ebook - main action slot on the card (as default, it shows laZ ebook link)\n * @slot apps - list of card-related apps\n /\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZBookCard {\n @Element() hostElement: HTMLZBookCardElement;\n\n /* Card variant: landscape, portrait /\n @Prop()\n variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n /* Cover URL /\n @Prop()\n cover: string;\n\n /* [optional] Authors /\n @Prop()\n authors?: string;\n\n /* [optional] Opera title /\n @Prop()\n operaTitle?: string;\n\n /* [optional] Volume title /\n @Prop()\n volumeTitle?: string;\n\n /* [optional] Main ISBN /\n @Prop()\n isbn?: string;\n\n /* [optional] ISBN label /\n @Prop()\n isbnLabel = \"\";\n\n /* [optional] EDI tag /\n @Prop()\n edi?: BookCardTag \| string;\n\n /* [optional] Annotated tag /\n @Prop()\n annotated?: BookCardTag \| string;\n\n /* [optional] Teacher version tag /\n @Prop()\n teacherVersion?: BookCardTag \| string;\n\n /* [optional] Show adoption badge /\n @Prop()\n adoption?: boolean = false;\n\n /* [optional] Show catalog link to correspondent resource /\n @Prop()\n catalogUrl?: string;\n\n /* [optional] Show link to the ebook resource /\n @Prop()\n ebookUrl?: string;\n\n /* [optional] Fallback cover URL /\n @Prop()\n fallbackCover?: string;\n\n /* [optional] Set a specific h level as html tag for opera title /\n @Prop()\n operaTitleHtmlTag?: string;\n\n @State()\n ediTag;\n\n @State()\n annotatedTag;\n\n @State()\n teacherVersionTag;\n\n /* click on tag /\n @Event()\n tagClick: EventEmitter;\n\n /* click on catalog link /\n @Event()\n catalogClick: EventEmitter;\n\n /* click on ebook link /\n @Event()\n ebookClick: EventEmitter;\n\n /* click on immersive reader */\n @Event()\n immersiveReaderClick: EventEmitter;\n\n @Watch(\"edi\")\n watchEdi(): void {\n this.ediTag = typeof this.edi === \"string\" ? JSON.parse(this.edi) : this.edi;\n }\n\n @Watch(\"annotated\")\n watchAnnotated(): void {\n this.annotatedTag = typeof this.annotated === \"string\" ? JSON.parse(this.annotated) : this.annotated;\n }\n\n @Watch(\"teacherVersion\")\n watchTeacherVersion(): void {\n this.teacherVersionTag =\n typeof this.teacherVersion === \"string\" ? JSON.parse(this.teacherVersion) : this.teacherVersion;\n }\n\n componentWillLoad(): void {\n this.watchEdi();\n this.watchAnnotated();\n this.watchTeacherVersion();\n }\n\n private emitTagClick(e: BookCardTagEvent): void {\n this.tagClick.emit(e);\n }\n\n private emitCatalogClick(): void {\n this.catalogClick.emit();\n }\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitImmersiveReaderClick(): void {\n this.immersiveReaderClick.emit();\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.operaTitleHtmlTag\n ? `<${this.operaTitleHtmlTag}>${this.operaTitle}</${this.operaTitleHtmlTag}>`\n : this.operaTitle;\n\n return (\n <div\n class=\"opera-title body-2-sb\"\n innerHTML={title}\n />\n );\n }\n\n private renderIsbnLabel(): HTMLDivElement \| null {\n return this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null;\n }\n\n private renderTag(label: string, tag: BookCardTag, id: string): HTMLDivElement {\n return (\n <z-tag\n class={{[tag.status]: true, interactive: tag.interactive}}\n role={tag.interactive ? \"button\" : undefined}\n tabIndex={tag.interactive ? 0 : undefined}\n onClick={() =>\n tag.interactive &&\n this.emitTagClick({\n tag: id,\n state: tag.status,\n })\n }\n onKeyUp={(e: KeyboardEvent) =>\n tag.interactive &&\n e.key === \"Enter\" &&\n this.emitTagClick({\n tag: id,\n state: tag.status,\n })\n }\n >\n {label}\n </z-tag>\n );\n }\n\n private renderTags(): HTMLDivElement[] \| null {\n const tags = [];\n\n if (this.edi && Object.values(BookCardTagStatus).includes(this.ediTag.status)) {\n tags.push(this.renderTag(\"edi\", this.ediTag, \"edi\"));\n }\n\n if (this.annotated && Object.values(BookCardTagStatus).includes(this.annotatedTag.status)) {\n tags.push(this.renderTag(\"annotata\", this.annotatedTag, \"annotated\"));\n }\n\n if (this.teacherVersion && Object.values(BookCardTagStatus).includes(this.teacherVersionTag.status)) {\n tags.push(this.renderTag(\"versione insegnante\", this.teacherVersionTag, \"teacherVersion\"));\n }\n\n if (tags.length > 0) {\n return tags;\n }\n\n return null;\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n <img\n src={this.cover}\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n }\n }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n\n render(): HTMLZBookCardElement {\n return (\n <article\n class={{\n [this.variant]: true,\n }}\n >\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"book-data\">\n <div class=\"authors-title-cta-section\">\n <div\n class=\"authors body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.renderOperaTitle()}\n <slot name=\"cta\"></slot>\n </div>\n <div class=\"isbn-tags-link-section\">\n <div class=\"isbn-tags-section\">\n <div class=\"volume-title body-4\">{this.volumeTitle}</div>\n <div\n class=\"isbn body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.renderIsbnLabel()}\n </div>\n <div class=\"tags\">{this.renderTags()}</div>\n </div>\n <div class=\"link-section\">\n <div class=\"catalog-link\">\n {this.catalogUrl && (\n <a\n href={this.catalogUrl}\n target=\"_blank\"\n class=\"z-link z-link-icon body-4-sb\"\n onClick={() => this.emitCatalogClick()}\n >\n Scheda catalogo\n <z-icon\n name=\"arrow-quad-north-east\"\n height={16}\n width={16}\n fill=\"color-primary01-icon\"\n ></z-icon>\n </a>\n )}\n </div>\n {this.adoption && <div class=\"adoption-tag body-5-sb\">adottato</div>}\n </div>\n </div>\n </div>\n <div class=\"ebook-container\">\n <slot name=\"ebook\">\n {this.ebookUrl && (\n <div class=\"ebook\">\n <div>\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">\n <span class=\"laz\">laZ</span> Ebook\n </div>\n </div>\n {this.variant === BookCardVariant.LANDSCAPE && (\n <div class=\"body-5\">\n Anche nella versione libro liquido con{\" \"}\n <button\n class=\"body-5-sb immersive-reader z-link\"\n onClick={() => this.emitImmersiveReaderClick()}\n tabIndex={0}\n >\n strumento di lettura immersiva\n </button>\n </div>\n )}\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target=\"_blank\"\n onClick={() => this.emitEbookClick()}\n role=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n )}\n </slot>\n </div>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </article>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-book-card.js","mappings":"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","names":["stylesCss","ZBookCard"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n display: block;\n max-width: fit-content;\n border-radius: var(--border-radius);\n}\n\n:host > article {\n width: 304px;\n min-height: 686px;\n box-sizing: border-box;\n padding: var(--space-unit) 0;\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 > article .main-content {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n:host > article .main-content .cover {\n display: flex;\n overflow: hidden;\n height: 378px;\n margin: 0 var(--space-unit);\n border-radius: var(--border-radius);\n}\n\n:host > article .main-content .cover img {\n max-width: 100%;\n max-height: 100%;\n align-self: end;\n}\n\n:host > article .main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: calc(var(--space-unit) * 2);\n}\n\n:host > article .main-content .card-info .book-data {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0 var(--space-unit);\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section {\n display: grid;\n column-gap: var(--space-unit);\n grid-template-areas:\n \"authors authors\"\n \"title cta\";\n grid-template-columns: auto 24px;\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section .authors {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n margin-bottom: calc(var(--space-unit) / 2);\n -webkit-box-orient: vertical;\n grid-area: authors;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title {\n display: -webkit-box;\n overflow: hidden;\n height: 54px;\n -webkit-box-orient: vertical;\n grid-area: title;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-overflow: ellipsis;\n}\n\n:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title * {\n all: unset;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section {\n margin-bottom: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .volume-title {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .isbn {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {\n display: flex;\n overflow: hidden;\n height: 22px;\n flex-flow: wrap;\n align-items: center;\n padding: var(--space-unit);\n margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1) 0;\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.active {\n --z-tag-bg: var(--color-primary03);\n --z-tag-text-color: var(--color-default-text);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.disabled {\n --z-tag-bg: var(--color-surface03);\n --z-tag-text-color: var(--color-default-text);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.interactive {\n cursor: pointer;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section {\n display: flex;\n height: 24px;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section .adoption-tag {\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n background-color: var(--green100);\n border-radius: 100px;\n text-transform: uppercase;\n}\n\n:host > article .main-content .card-info .ebook-container {\n height: 64px;\n}\n\n:host > article .main-content .card-info .ebook-container .ebook {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: calc(var(--space-unit) * 2) var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n:host > article .main-content .card-info .ebook-container .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host > article .main-content .card-info .ebook-container .ebook .app-name .ebook-logo {\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%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 > article .main-content .card-info .ebook-container .ebook .app-name .laz {\n color: var(--red500);\n}\n\n::slotted([slot=\"cta\"]) {\n grid-area: cta;\n}\n\n:host > article.landscape {\n width: 635px;\n min-height: 332px;\n max-height: 428px;\n padding: 0;\n}\n\n:host > article.landscape .main-content {\n height: 296px;\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > article.landscape .main-content .cover {\n display: flex;\n overflow: hidden;\n width: 221px;\n height: auto;\n margin: 0;\n}\n\n:host > article.landscape .main-content .card-info .book-data {\n margin: 0;\n gap: unset;\n}\n\n:host > article.landscape .main-content .card-info .book-data .authors-title-cta-section {\n column-gap: calc(var(--space-unit) * 2);\n grid-template-areas:\n \"authors cta\"\n \"title title\";\n}\n\n:host > article.landscape .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {\n margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1);\n}\n\n:host > article.landscape .main-content .card-info .ebook-container {\n height: 76px;\n}\n\n:host > article.landscape .main-content .card-info .ebook-container .ebook {\n padding: var(--space-unit);\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,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus,\nbutton.z-link:focus {\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,\nbutton.z-link:focus,\na.z-link.z-link-active:focus,\nbutton.z-link.z-link-active:focus,\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,\nbutton.z-link.z-link-blue:focus {\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,\nbutton.z-link.z-link-red:focus {\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,\nbutton.z-link.z-link-inverse:focus {\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",":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) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 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\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\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\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\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","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {BookCardTag, BookCardTagEvent, BookCardTagStatus, BookCardVariant, ControlSize} from \"../../../beans\";\n\n/\n @slot cta - to the right of authors and title (e.g. bookmark icon)\n * @slot ebook - main action slot on the card (as default, it shows laZ ebook link)\n * @slot apps - list of card-related apps\n /\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZBookCard {\n @Element() hostElement: HTMLZBookCardElement;\n\n /* Card variant: landscape, portrait /\n @Prop()\n variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n /* Cover URL /\n @Prop()\n cover: string;\n\n /* [optional] Authors /\n @Prop()\n authors?: string;\n\n /* [optional] Opera title /\n @Prop()\n operaTitle?: string;\n\n /* [optional] Volume title /\n @Prop()\n volumeTitle?: string;\n\n /* [optional] Main ISBN /\n @Prop()\n isbn?: string;\n\n /* [optional] ISBN label /\n @Prop()\n isbnLabel = \"\";\n\n /* [optional] EDI tag /\n @Prop()\n edi?: BookCardTag \| string;\n\n /* [optional] Annotated tag /\n @Prop()\n annotated?: BookCardTag \| string;\n\n /* [optional] Teacher version tag /\n @Prop()\n teacherVersion?: BookCardTag \| string;\n\n /* [optional] Show adoption badge /\n @Prop()\n adoption?: boolean = false;\n\n /* [optional] Show catalog link to correspondent resource /\n @Prop()\n catalogUrl?: string;\n\n /* [optional] Show link to the ebook resource /\n @Prop()\n ebookUrl?: string;\n\n /* [optional] Fallback cover URL /\n @Prop()\n fallbackCover?: string;\n\n /* [optional] Set a specific h level as html tag for opera title /\n @Prop()\n operaTitleHtmlTag?: string;\n\n @State()\n ediTag;\n\n @State()\n annotatedTag;\n\n @State()\n teacherVersionTag;\n\n /* click on tag /\n @Event()\n tagClick: EventEmitter;\n\n /* click on catalog link /\n @Event()\n catalogClick: EventEmitter;\n\n /* click on ebook link /\n @Event()\n ebookClick: EventEmitter;\n\n /* click on immersive reader */\n @Event()\n immersiveReaderClick: EventEmitter;\n\n @Watch(\"edi\")\n watchEdi(): void {\n this.ediTag = typeof this.edi === \"string\" ? JSON.parse(this.edi) : this.edi;\n }\n\n @Watch(\"annotated\")\n watchAnnotated(): void {\n this.annotatedTag = typeof this.annotated === \"string\" ? JSON.parse(this.annotated) : this.annotated;\n }\n\n @Watch(\"teacherVersion\")\n watchTeacherVersion(): void {\n this.teacherVersionTag =\n typeof this.teacherVersion === \"string\" ? JSON.parse(this.teacherVersion) : this.teacherVersion;\n }\n\n componentWillLoad(): void {\n this.watchEdi();\n this.watchAnnotated();\n this.watchTeacherVersion();\n }\n\n private emitTagClick(e: BookCardTagEvent): void {\n this.tagClick.emit(e);\n }\n\n private emitCatalogClick(): void {\n this.catalogClick.emit();\n }\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitImmersiveReaderClick(): void {\n this.immersiveReaderClick.emit();\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.operaTitleHtmlTag\n ? `<${this.operaTitleHtmlTag}>${this.operaTitle}</${this.operaTitleHtmlTag}>`\n : this.operaTitle;\n\n return (\n <div\n class=\"opera-title body-2-sb\"\n innerHTML={title}\n />\n );\n }\n\n private renderIsbnLabel(): HTMLDivElement \| null {\n return this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null;\n }\n\n private renderTag(label: string, tag: BookCardTag, id: string): HTMLDivElement {\n return (\n <z-tag\n class={{[tag.status]: true, interactive: tag.interactive}}\n role={tag.interactive ? \"button\" : undefined}\n tabIndex={tag.interactive ? 0 : undefined}\n onClick={() =>\n tag.interactive &&\n this.emitTagClick({\n tag: id,\n state: tag.status,\n })\n }\n onKeyUp={(e: KeyboardEvent) =>\n tag.interactive &&\n e.key === \"Enter\" &&\n this.emitTagClick({\n tag: id,\n state: tag.status,\n })\n }\n >\n {label}\n </z-tag>\n );\n }\n\n private renderTags(): HTMLDivElement[] \| null {\n const tags = [];\n\n if (this.edi && Object.values(BookCardTagStatus).includes(this.ediTag.status)) {\n tags.push(this.renderTag(\"edi\", this.ediTag, \"edi\"));\n }\n\n if (this.annotated && Object.values(BookCardTagStatus).includes(this.annotatedTag.status)) {\n tags.push(this.renderTag(\"annotata\", this.annotatedTag, \"annotated\"));\n }\n\n if (this.teacherVersion && Object.values(BookCardTagStatus).includes(this.teacherVersionTag.status)) {\n tags.push(this.renderTag(\"versione insegnante\", this.teacherVersionTag, \"teacherVersion\"));\n }\n\n if (tags.length > 0) {\n return tags;\n }\n\n return null;\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n <img\n src={this.cover}\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n }\n }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n\n render(): HTMLZBookCardElement {\n return (\n <article\n class={{\n [this.variant]: true,\n }}\n >\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"book-data\">\n <div class=\"authors-title-cta-section\">\n <div\n class=\"authors body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.renderOperaTitle()}\n <slot name=\"cta\"></slot>\n </div>\n <div class=\"isbn-tags-link-section\">\n <div class=\"isbn-tags-section\">\n <div class=\"volume-title body-4\">{this.volumeTitle}</div>\n <div\n class=\"isbn body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.renderIsbnLabel()}\n </div>\n <div class=\"tags\">{this.renderTags()}</div>\n </div>\n <div class=\"link-section\">\n <div class=\"catalog-link\">\n {this.catalogUrl && (\n <a\n href={this.catalogUrl}\n target=\"_blank\"\n class=\"z-link z-link-blue z-link-icon body-4-sb\"\n onClick={() => this.emitCatalogClick()}\n >\n Scheda catalogo\n <z-icon\n name=\"arrow-quad-north-east\"\n height={16}\n width={16}\n fill=\"color-primary01-icon\"\n ></z-icon>\n </a>\n )}\n </div>\n {this.adoption && <div class=\"adoption-tag body-5-sb\">adottato</div>}\n </div>\n </div>\n </div>\n <div class=\"ebook-container\">\n <slot name=\"ebook\">\n {this.ebookUrl && (\n <div class=\"ebook\">\n <div>\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">\n <span class=\"laz\">laZ</span> Ebook\n </div>\n </div>\n {this.variant === BookCardVariant.LANDSCAPE && (\n <div class=\"body-5\">\n Anche nella versione libro liquido con{\" \"}\n <button\n class=\"body-5-sb immersive-reader z-link\"\n onClick={() => this.emitImmersiveReaderClick()}\n tabIndex={0}\n >\n strumento di lettura immersiva\n </button>\n </div>\n )}\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target=\"_blank\"\n onClick={() => this.emitEbookClick()}\n role=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n )}\n </slot>\n </div>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </article>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-app-header_12.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { g as KeyboardCode, O as OffCanvasVariant, u as TransitionDirection, B a
 import { B as Breakpoints } from './breakpoints-d148bfde.js';
 import { a as containsElement, r as randomId, b as boolean, g as getDevice, h as handleEnterKeydSubmit } from './utils-ed82ce58.js';
-const stylesCss$b = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:currentcolor;content:\"\";transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
+const stylesCss$b = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:currentcolor;content:\"\";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
 const ZAppHeaderStyle0 = stylesCss$b;
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";