npm - @zanichelli/zanichelli-it-frontend-kit - Versions diffs - 0.0.1-rc.0 - Mend

@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

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

package/dist/components/z-book-card.js ADDED Viewed

@@ -0,0 +1,123 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { b as BookCardVariant, C as ControlSize } from './p-Bla2iV_L.js';
+import { d as defineCustomElement$3 } from './p-C79F56iB.js';
+import { d as defineCustomElement$2 } from './p-DexdQ2O9.js';
+const stylesCss = ":host{--z-book-card-portrait-cover-height:378px;--z-book-card-title-lines:2;--z-book-card-title-word-break:initial;--z-book-card-subtitle-lines:1;--z-book-card-subtitle-word-break:break-all;--z-book-card-authors-lines:1;--z-book-card-authors-word-break:break-all;display:flex;width:304px;box-sizing:border-box;flex-direction:column;border:solid var(--border-size-medium) var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-default-text);font-family:var(--font-family-sans)}:host .main-content{display:flex;height:100%;box-sizing:border-box;flex-direction:column;padding:var(--space-unit);gap:var(--space-unit)}:host .main-content .cover{position:relative;display:flex;overflow:hidden;height:var(--z-book-card-portrait-cover-height);background:var(--color-white);border-radius:var(--border-radius)}:host .main-content .cover img{max-width:100%;max-height:100%;align-self:end}::slotted([slot=\"coverOverlay\"]){position:absolute;bottom:0;overflow:hidden;width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--avatar-C19);color:var(--color-white)}:host .main-content .cover ::slotted([slot=\"coverOverlay\"]){min-height:80px;max-height:336px}:host .main-content .card-info{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:var(--space-unit)}:host .main-content .card-info .top{display:flex;flex-direction:column;gap:calc(var(--space-unit) * 2)}:host .main-content .card-info .top ::slotted([slot=\"tags\"]){display:flex;flex-wrap:wrap;gap:var(--space-unit)}:host .main-content .card-info .top ::slotted([slot=\"data\"]){display:flex;justify-content:space-between}:host .main-content .card-info .top .ellipsis{display:-webkit-box;overflow:hidden;height:1.4rem;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;line-height:1.4rem;text-overflow:ellipsis;word-break:break-all}:host .main-content .card-info .top .ellipsis.opera-title{height:calc(1.5 * var(--z-book-card-title-lines)) rem;-webkit-line-clamp:var(--z-book-card-title-lines);line-clamp:var(--z-book-card-title-lines);line-height:1.5rem;word-break:var(--z-book-card-title-word-break)}:host .main-content .card-info .top .ellipsis.volume-title{height:calc(1.4 * var(--z-book-card-subtitle-lines)) rem;-webkit-line-clamp:var(--z-book-card-subtitle-lines);line-clamp:var(--z-book-card-subtitle-lines);line-height:1.4rem;word-break:var(--z-book-card-subtitle-word-break)}:host .main-content .card-info .top .ellipsis.authors{height:calc(1.4 * var(--z-book-card-authors-lines)) rem;-webkit-line-clamp:var(--z-book-card-authors-lines);line-clamp:var(--z-book-card-authors-lines);line-height:1.4rem;word-break:var(--z-book-card-authors-word-break)}:host .main-content .card-info .top .opera-title *{all:unset}:host .main-content .cta-wrapper{display:flex;justify-content:space-between;gap:calc(var(--space-unit) / 2)}:host .main-content .card-info .top .link-chip-wrapper{display:flex;justify-content:space-between}:host .main-content .card-info .bottom .ebook{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--space-unit);background-color:var(--color-primary02);border-radius:var(--border-radius);gap:var(--space-unit)}:host .main-content .card-info .bottom .ebook .app-name{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) 0;font-family:var(--font-family-serif);gap:calc(var(--space-unit) / 2)}:host .main-content .card-info .bottom .ebook .app-name .ebook-logo{width:1.5rem;height:1.5rem;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\")}:host([variant=\"landscape\"]){width:635px;min-height:max(332px, 20.75rem);padding:0}:host([variant=\"landscape\"]) .main-content{min-height:max(332px, 20.75rem);box-sizing:border-box;flex-direction:row;padding:calc(var(--space-unit) * 2);gap:calc(var(--space-unit) * 2)}:host([variant=\"landscape\"]) .main-content .cover{display:flex;overflow:hidden;width:221px;height:300px;margin:0}:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]){min-height:80px;max-height:256px}:host([variant=\"landscape\"]) .main-content .card-info{gap:calc(var(--space-unit) / 2)}:host([variant=\"landscape\"]) .main-content .card-info .top{gap:calc(var(--space-unit) / 2)}@media (max-width: 767px){:host([variant=\"portrait\"]){width:100%;max-width:400px}}";
+const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
+const ZBookCard$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ebookClick = createEvent(this, "ebookClick", 7);
+        this.variant = BookCardVariant.PORTRAIT;
+        this.cover = undefined;
+        this.operaTitle = undefined;
+        this.volumeTitle = undefined;
+        this.authors = undefined;
+        this.isbn = undefined;
+        this.isbnLabel = "";
+        this.year = undefined;
+        this.ebookUrl = undefined;
+        this.fallbackCover = undefined;
+        this.titleHtmlTag = undefined;
+    }
+    emitEbookClick() {
+        this.ebookClick.emit();
+    }
+    renderCover() {
+        return (h("div", { class: "cover" }, h("img", { src: this.cover, onError: () => {
+                if (this.fallbackCover) {
+                    this.cover = this.fallbackCover;
+                }
+            }, "aria-hidden": "true" }), h("slot", { name: "coverOverlay" })));
+    }
+    renderYear() {
+        if (!this.year) {
+            return null;
+        }
+        return (h("div", { class: "year ellipsis body-4", "aria-description": "anno" }, this.year));
+    }
+    renderAuthors() {
+        if (!this.authors) {
+            return null;
+        }
+        return (h("div", { class: "cta-wrapper" }, h("div", { class: "authors ellipsis body-4", "aria-description": "autori" }, this.authors), this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null));
+    }
+    renderOperaTitle() {
+        const title = this.titleHtmlTag
+            ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`
+            : this.operaTitle;
+        return (h("div", { class: "cta-wrapper" }, h("div", { class: "opera-title ellipsis body-2-sb", innerHTML: title }), this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null));
+    }
+    renderVolumeTitle() {
+        if (!this.volumeTitle) {
+            return null;
+        }
+        return h("div", { class: "volume-title ellipsis body-4" }, this.volumeTitle);
+    }
+    renderIsbn() {
+        if (!this.isbn) {
+            return null;
+        }
+        return (h("div", { class: "isbn ellipsis body-4-sb", "aria-description": `isbn ${this.isbnLabel}` }, this.isbn, " ", this.isbnLabel ? h("span", { class: "body-4" }, this.isbnLabel) : null));
+    }
+    renderEbook() {
+        return (h("div", { class: "ebook" }, h("div", null, h("div", { class: "app-name" }, h("img", { class: "ebook-logo", "aria-hidden": "true" }), h("div", { class: "body-4-sb" }, "laZ Ebook"))), h("z-button", { size: ControlSize.X_SMALL, href: this.ebookUrl, target: "_blank", onClick: () => this.emitEbookClick(), htmlrole: "link", "aria-description": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, "leggi ebook")));
+    }
+    renderCtaSlot() {
+        return h("slot", { name: "cta" });
+    }
+    render() {
+        return (h(Host, { key: '239ba8bd3f52288ec3f748311dce284d71106ba0' }, h("div", { key: 'd25b33181914ddd8ff5f699cf02112237e2bf6e3', class: "main-content" }, this.renderCover(), h("div", { key: 'fa79e463b770b63f1f8a0bbde3f05105dc229344', class: "card-info" }, h("div", { key: '7e595f41169cca9455dc53b99ddc15342eb1b963', class: "top" }, h("div", { key: 'f9fe00fb63360154f451de3486385cf88202d107' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: '2585df52a10a90cc2c10466a02fe4601ce015749', name: "tags" }), h("slot", { key: 'b383f55e1c64ce5c7578aa16eb68893f73c7c778', name: "data" })), h("slot", { key: '5cbbbc32f7142a6f2a8637ec220c3add460f3313', name: "ebook" }, !!this.ebookUrl && h("div", { key: '4aeb1dd60f20e6b50cd1459a933bd3e5a36112e4', class: "bottom" }, this.renderEbook())))), h("slot", { key: '78149851420a6e915b4fbebd95df89e45c56bc57', name: "apps" })));
+    }
+    get hostElement() { return this; }
+    static get style() { return stylesCss + typographyCss; }
+}, [1, "z-book-card", {
+        "variant": [513],
+        "cover": [1],
+        "operaTitle": [1, "opera-title"],
+        "volumeTitle": [1, "volume-title"],
+        "authors": [1],
+        "isbn": [1],
+        "isbnLabel": [1, "isbn-label"],
+        "year": [1],
+        "ebookUrl": [1, "ebook-url"],
+        "fallbackCover": [1, "fallback-cover"],
+        "titleHtmlTag": [1, "title-html-tag"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-book-card", "z-button", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-book-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZBookCard$1);
+            }
+            break;
+        case "z-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const ZBookCard = ZBookCard$1;
+const defineCustomElement = defineCustomElement$1;
+export { ZBookCard, defineCustomElement };
+//# sourceMappingURL=z-book-card.js.map
+//# sourceMappingURL=z-book-card.js.map

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

@@ -0,0 +1 @@

+ {"file":"z-book-card.js","mappings":"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","names":["ZBookCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/tokens/typography.css?tag=z-book-card&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/book-card/z-book-card/index.js"],"sourcesContent":[":host {\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 .main-content {\n display: flex;\n height: 100%;\n box-sizing: border-box;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n:host .main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n height: var(--z-book-card-portrait-cover-height);\n background: var(--color-white);\n border-radius: var(--border-radius);\n}\n\n:host .main-content .cover img {\n max-width: 100%;\n max-height: 100%;\n align-self: end;\n}\n\n::slotted([slot=\"coverOverlay\"]) {\n position: absolute;\n bottom: 0;\n overflow: hidden;\n width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n background-color: var(--avatar-C19);\n color: var(--color-white);\n}\n\n:host .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n min-height: 80px;\n max-height: 336px;\n}\n\n:host .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:host .main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n:host .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:host .main-content .card-info .top .ellipsis.opera-title {\n height: calc(1.5 * var(--z-book-card-title-lines)) rem;\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:host .main-content .card-info .top .ellipsis.volume-title {\n height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;\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:host .main-content .card-info .top .ellipsis.authors {\n height: calc(1.4 * var(--z-book-card-authors-lines)) rem;\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:host .main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n:host .main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n:host .main-content .card-info .bottom .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {\n width: 1.5rem;\n height: 1.5rem;\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n width: 635px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n box-sizing: border-box;\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 {\n display: flex;\n overflow: hidden;\n width: 221px;\n height: 300px;\n margin: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n min-height: 80px;\n max-height: 256px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info {\n gap: calc(var(--space-unit) / 2);\n}\n\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) / 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 .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","import { Host, h } from \"@stencil/core\";\nimport { BookCardVariant, ControlSize } from \"../../../beans\";\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 - purple layer on top of book cover\n * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px\n * @cssprop --z-book-card-title-lines - set title avilable lines - default 2\n * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial\n * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1\n * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all\n * @cssprop --z-book-card-authors-lines - set authors available lines - default 1\n * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all\n */\nexport class ZBookCard {\n constructor() {\n this.variant = BookCardVariant.PORTRAIT;\n this.cover = undefined;\n this.operaTitle = undefined;\n this.volumeTitle = undefined;\n this.authors = undefined;\n this.isbn = undefined;\n this.isbnLabel = \"\";\n this.year = undefined;\n this.ebookUrl = undefined;\n this.fallbackCover = undefined;\n this.titleHtmlTag = undefined;\n }\n emitEbookClick() {\n this.ebookClick.emit();\n }\n renderCover() {\n return (h(\"div\", { class: \"cover\" }, h(\"img\", { src: this.cover, onError: () => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n }\n }, \"aria-hidden\": \"true\" }), h(\"slot\", { name: \"coverOverlay\" })));\n }\n renderYear() {\n if (!this.year) {\n return null;\n }\n return (h(\"div\", { class: \"year ellipsis body-4\", \"aria-description\": \"anno\" }, this.year));\n }\n renderAuthors() {\n if (!this.authors) {\n return null;\n }\n return (h(\"div\", { class: \"cta-wrapper\" }, h(\"div\", { class: \"authors ellipsis body-4\", \"aria-description\": \"autori\" }, this.authors), this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null));\n }\n renderOperaTitle() {\n const title = this.titleHtmlTag\n ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n : this.operaTitle;\n return (h(\"div\", { class: \"cta-wrapper\" }, h(\"div\", { class: \"opera-title ellipsis body-2-sb\", innerHTML: title }), this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null));\n }\n renderVolumeTitle() {\n if (!this.volumeTitle) {\n return null;\n }\n return h(\"div\", { class: \"volume-title ellipsis body-4\" }, this.volumeTitle);\n }\n renderIsbn() {\n if (!this.isbn) {\n return null;\n }\n return (h(\"div\", { class: \"isbn ellipsis body-4-sb\", \"aria-description\": `isbn ${this.isbnLabel}` }, this.isbn, \" \", this.isbnLabel ? h(\"span\", { class: \"body-4\" }, this.isbnLabel) : null));\n }\n renderEbook() {\n return (h(\"div\", { class: \"ebook\" }, h(\"div\", null, h(\"div\", { class: \"app-name\" }, h(\"img\", { class: \"ebook-logo\", \"aria-hidden\": \"true\" }), h(\"div\", { class: \"body-4-sb\" }, \"laZ Ebook\"))), h(\"z-button\", { size: ControlSize.X_SMALL, href: this.ebookUrl, target: \"_blank\", onClick: () => this.emitEbookClick(), htmlrole: \"link\", \"aria-description\": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, \"leggi ebook\")));\n }\n renderCtaSlot() {\n return h(\"slot\", { name: \"cta\" });\n }\n render() {\n return (h(Host, { key: '239ba8bd3f52288ec3f748311dce284d71106ba0' }, h(\"div\", { key: 'd25b33181914ddd8ff5f699cf02112237e2bf6e3', class: \"main-content\" }, this.renderCover(), h(\"div\", { key: 'fa79e463b770b63f1f8a0bbde3f05105dc229344', class: \"card-info\" }, h(\"div\", { key: '7e595f41169cca9455dc53b99ddc15342eb1b963', class: \"top\" }, h(\"div\", { key: 'f9fe00fb63360154f451de3486385cf88202d107' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h(\"slot\", { key: '2585df52a10a90cc2c10466a02fe4601ce015749', name: \"tags\" }), h(\"slot\", { key: 'b383f55e1c64ce5c7578aa16eb68893f73c7c778', name: \"data\" })), h(\"slot\", { key: '5cbbbc32f7142a6f2a8637ec220c3add460f3313', name: \"ebook\" }, !!this.ebookUrl && h(\"div\", { key: '4aeb1dd60f20e6b50cd1459a933bd3e5a36112e4', class: \"bottom\" }, this.renderEbook())))), h(\"slot\", { key: '78149851420a6e915b4fbebd95df89e45c56bc57', name: \"apps\" })));\n }\n static get is() { return \"z-book-card\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"styles.css\", \"../../../tokens/typography.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"styles.css\", \"../../../tokens/typography.css\"]\n };\n }\n static get properties() {\n return {\n \"variant\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"BookCardVariant\",\n \"resolved\": \"BookCardVariant.LANDSCAPE | BookCardVariant.PORTRAIT\",\n \"references\": {\n \"BookCardVariant\": {\n \"location\": \"import\",\n \"path\": \"../../../beans\",\n \"id\": \"src/beans/index.tsx::BookCardVariant\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Card variant: landscape, portrait\"\n },\n \"attribute\": \"variant\",\n \"reflect\": true,\n \"defaultValue\": \"BookCardVariant.PORTRAIT\"\n },\n \"cover\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Cover URL\"\n },\n \"attribute\": \"cover\",\n \"reflect\": false\n },\n \"operaTitle\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Opera title (card title)\"\n },\n \"attribute\": \"opera-title\",\n \"reflect\": false\n },\n \"volumeTitle\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] Volume title (card subvolume)\"\n },\n \"attribute\": \"volume-title\",\n \"reflect\": false\n },\n \"authors\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] Authors\"\n },\n \"attribute\": \"authors\",\n \"reflect\": false\n },\n \"isbn\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] Main ISBN\"\n },\n \"attribute\": \"isbn\",\n \"reflect\": false\n },\n \"isbnLabel\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] ISBN label\"\n },\n \"attribute\": \"isbn-label\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"\\\"\"\n },\n \"year\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] year\"\n },\n \"attribute\": \"year\",\n \"reflect\": false\n },\n \"ebookUrl\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] Show link to the ebook resource\"\n },\n \"attribute\": \"ebook-url\",\n \"reflect\": false\n },\n \"fallbackCover\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] Fallback cover URL\"\n },\n \"attribute\": \"fallback-cover\",\n \"reflect\": false\n },\n \"titleHtmlTag\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"[optional] Set a specific h level as html tag for opera title\"\n },\n \"attribute\": \"title-html-tag\",\n \"reflect\": false\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"ebookClick\",\n \"name\": \"ebookClick\",\n \"bubbles\": true,\n \"cancelable\": true,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"click on ebook link\"\n },\n \"complexType\": {\n \"original\": \"any\",\n \"resolved\": \"any\",\n \"references\": {}\n }\n }];\n }\n static get elementRef() { return \"hostElement\"; }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

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

@@ -0,0 +1,291 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { d as BreadcrumbPathStyle, e as BreadcrumbHomepageVariant, D as Device, K as KeyboardCode, P as PopoverPosition, L as ListSize } from './p-Bla2iV_L.js';
+import { g as getDevice, h as handleKeyboardSubmit } from './p-D6oPathC.js';
+import { d as defineCustomElement$7 } from './p-vUB-94eM.js';
+import { d as defineCustomElement$6 } from './p-DexdQ2O9.js';
+import { d as defineCustomElement$5 } from './p--Z4AiqIE.js';
+import { d as defineCustomElement$4 } from './p-vqNYJq21.js';
+import { d as defineCustomElement$3 } from './p-DX_drPpd.js';
+import { d as defineCustomElement$2 } from './p-wdrm-LLt.js';
+const stylesCss = ":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 ZBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class ZBreadcrumb extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.clickOnNode = createEvent(this, "clickOnNode", 7);
+        this.collapsedElements = [];
+        this.currentIndex = 0;
+        this.truncatePosition = null;
+        this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
+        this.homepageVariant = BreadcrumbHomepageVariant.ICON;
+        this.maxNodesToShow = 5;
+        this.preventFollowUrl = false;
+        this.overflowMenuItemRows = 0;
+        this.truncateChar = 30;
+        this.viewPortWidth = undefined;
+        this.hasOverflow = false;
+        this.popoverEllipsisOpen = false;
+    }
+    handleResize() {
+        this.viewPortWidth = getDevice();
+        if (this.viewPortWidth !== Device.MOBILE &&
+            this.wrapElement &&
+            this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+            this.hasOverflow = true;
+        }
+    }
+    // eslint-disable-next-line lines-between-class-members
+    handlePropChange() {
+        this.initializeBreadcrumb();
+    }
+    handleResizeUp(newValue, oldValue) {
+        if (newValue === Device.MOBILE ||
+            (oldValue === Device.MOBILE && newValue === Device.TABLET) ||
+            (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||
+            (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||
+            (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||
+            (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||
+            (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)) {
+            this.initializeBreadcrumb();
+        }
+    }
+    componentWillLoad() {
+        this.viewPortWidth = getDevice();
+        this.initializeBreadcrumb();
+    }
+    componentWillRender() {
+        if (this.viewPortWidth !== Device.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 !== Device.MOBILE) {
+            requestAnimationFrame(() => {
+                if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+                    if (!this.hasOverflow) {
+                        this.hasOverflow = true;
+                    }
+                }
+            });
+        }
+    }
+    initializeBreadcrumb() {
+        if (this.viewPortWidth === Device.MOBILE) {
+            this.pathsList = this.getPathsItemsList().filter((item) => !!item.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 i = 0; i < this.pathsList.length; i++) {
+            if (this.pathsList[i].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 (i !== this.pathsList.length - 1) {
+                const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
+                this.currentEllipsisText = this.pathsList[i].text;
+                this.pathsList[i].text = truncatedString;
+                this.pathsList[i].hasTooltip = true;
+                this.truncatePosition = i;
+                return;
+            }
+        }
+    }
+    truncateWithEllipsis(str, maxLength) {
+        if (str.length <= maxLength) {
+            return str;
+        }
+        return str.substring(0, maxLength - 1) + "&mldr;";
+    }
+    getPathsItemsList() {
+        return Array.from(this.hostElement.children).map((item) => {
+            return {
+                text: item.textContent,
+                path: item.href,
+                hasTooltip: false,
+            };
+        });
+    }
+    renderHomepageNode() {
+        return (h("li", null, h("a", { class: {
+                "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
+            }, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === BreadcrumbHomepageVariant.ICON
+                ? `<z-icon name="home" />`
+                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+    }
+    togglePopover() {
+        if (!this.collapsedElementsRef.open) {
+            this.collapsedElementsRef.open = true;
+        }
+    }
+    handlePreventFollowUrl(e, item) {
+        if (this.preventFollowUrl) {
+            e.preventDefault();
+            this.clickOnNode.emit(item.path);
+        }
+    }
+    handleOverflowMenuAccessibility(e) {
+        const anchorElementsLenght = this.anchorElements.length;
+        if (e.key === KeyboardCode.TAB) {
+            e.preventDefault();
+            return;
+        }
+        e.stopPropagation();
+        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+        if (arrows.includes(e.key)) {
+            e.preventDefault();
+            if (e.key === KeyboardCode.ARROW_DOWN) {
+                this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;
+            }
+            if (e.key === KeyboardCode.ARROW_UP) {
+                this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;
+            }
+            this.anchorElements[this.currentIndex].focus();
+        }
+        if (e.key === KeyboardCode.ESC) {
+            this.triggerButton.focus();
+        }
+    }
+    renderOverflowMenu() {
+        return (h("li", null, h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), bindTo: this.triggerButton, position: PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, h("div", { class: "popover-content" }, h("z-list", null, h("z-list-group", { size: ListSize.SMALL }, this.collapsedElements.map((item, index, array) => {
+            return (h("div", null, h("z-list-element", { clickable: true }, h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e), innerHTML: item.text })), index < array.length - 1 && h("z-divider", { color: "color-surface03" })));
+        }))))), h("button", { class: "dots", ref: (el) => (this.triggerButton = el), "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", onClick: () => {
+                this.togglePopover();
+            }, onKeyDown: (e) => {
+                handleKeyboardSubmit(e, this.togglePopover.bind(this));
+                setTimeout(() => {
+                    this.anchorElements[0].focus();
+                }, 100);
+            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+    }
+    renderMobileItems() {
+        // show only the second to last element
+        const secondToLastPath = this.pathsList[this.pathsList.length - 1];
+        if (!secondToLastPath) {
+            return;
+        }
+        return (h("li", null, h("a", { "aria-current": secondToLastPath.path ? undefined : "page", href: secondToLastPath.path, onClick: (e) => this.handlePreventFollowUrl(e, secondToLastPath) }, h("z-icon", { name: "chevron-left" }), h("span", { class: {
+                "missing-path": !secondToLastPath.path,
+                "text-ellipsis": true,
+            } }, secondToLastPath.text))));
+    }
+    renderItems() {
+        let trigger;
+        return [
+            this.renderHomepageNode(),
+            this.collapsedElements.length > 0 && this.renderOverflowMenu(),
+            ...this.pathsList.map((item, index) => (h("li", null, item.hasTooltip && (h("z-popover", { class: "full-path-tooltip", bindTo: trigger, open: this.popoverEllipsisOpen, position: PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, h("span", { class: "tooltip-content" }, this.currentEllipsisText))), h("a", { class: { "missing-path": !item.path }, ref: (val) => (trigger = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
+                    if (item.hasTooltip) {
+                        this.popoverEllipsisOpen = true;
+                    }
+                }, onMouseLeave: () => {
+                    if (item.hasTooltip) {
+                        this.popoverEllipsisOpen = false;
+                    }
+                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right" }))))),
+        ];
+    }
+    render() {
+        return (h(Host, { key: 'a92078ad9a4aa1ac4689c66c765afa5f113d16d7', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '99259d02797aff8396f3a87af0ff40d1c97e40fd', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+                semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+                underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+            } }, h("ol", { key: 'c232f64c88e3bff47af1250385589ecda393b4f3' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "maxNodesToShow": ["handlePropChange"],
+        "viewPortWidth": ["handleResizeUp"]
+    }; }
+    static get style() { return stylesCss; }
+}, [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"],
+        "viewPortWidth": ["handleResizeUp"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-breadcrumb", "z-divider", "z-icon", "z-list", "z-list-element", "z-list-group", "z-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZBreadcrumb$1);
+            }
+            break;
+        case "z-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "z-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "z-list-element":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "z-list-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const ZBreadcrumb = ZBreadcrumb$1;
+const defineCustomElement = defineCustomElement$1;
+export { ZBreadcrumb, defineCustomElement };
+//# sourceMappingURL=z-breadcrumb.js.map
+//# sourceMappingURL=z-breadcrumb.js.map