@zanichelli/albe-web-components 20.0.2-RC → 21.0.0-RC1

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

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

package/dist/components/z-book-cover.js

@@ -1,2 +1,2 @@
-import{Z as o,d as s}from"./index14.js";const t=o;const n=s;export{t as ZBookCover,n as defineCustomElement};
+import{Z as o,d as s}from"./p-B5U9pSXR.js";const p=o;const t=s;export{p as ZBookCover,t as defineCustomElement};
 //# sourceMappingURL=z-book-cover.js.map

package/dist/components/z-breadcrumb.js

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

package/dist/components/z-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZBreadcrumb","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","pathStyle","BreadcrumbPathStyle","UNDERLINED","homepageVariant","BreadcrumbHomepageVariant","ICON","maxNodesToShow","preventFollowUrl","overflowMenuItemRows","truncateChar","hasOverflow","popoverEllipsisOpen","collapsedElements","currentIndex","truncatePosition","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","requestAnimationFrame","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","length","splice","i","text","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","h","class","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","onMouseOver","onMouseLeave","render","Host","style","semibold","SEMIBOLD","underlined"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-text-link-blue);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-text-link-blue);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-text-link-blue);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-background);\n  --z-popover-padding: 0;\n  --background-color-list-element: var(--color-background);\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n    line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb implements ComponentInterface {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE) {\n      requestAnimationFrame(() => {\n        if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n          if (!this.hasOverflow) {\n            this.hasOverflow = true;\n          }\n        }\n      });\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n              aria-hidden=\"true\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZBreadcrumb","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","pathStyle","BreadcrumbPathStyle","UNDERLINED","homepageVariant","BreadcrumbHomepageVariant","ICON","maxNodesToShow","preventFollowUrl","overflowMenuItemRows","truncateChar","hasOverflow","popoverEllipsisOpen","collapsedElements","currentIndex","truncatePosition","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","requestAnimationFrame","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","length","splice","i","text","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","h","class","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","onMouseOver","onMouseLeave","render","Host","style","semibold","SEMIBOLD","underlined"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-text-link-blue);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-text-link-blue);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-text-link-blue);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-background);\n  --z-popover-padding: 0;\n  --background-color-list-element: var(--color-background);\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n    line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb implements ComponentInterface {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE) {\n      requestAnimationFrame(() => {\n        if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n          if (!this.hasOverflow) {\n            this.hasOverflow = true;\n          }\n        }\n      });\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n              aria-hidden=\"true\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/z-button-sort.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZButtonSort","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sortlabelasc","sortlabeldesc","isselected","sortasc","allowTooltip","emitButtonSortClick","buttonSortClick","emit","buttonid","sortAsc","componentDidLoad","elementHasEllipsis","window","innerWidth","Breakpoints","TABLET","setButtonTitle","label","desclabel","ellipsis","offsetWidth","scrollWidth","render","h","key","title","id","class","selected","onClick","ref","el","counter","name","width","height"],"sources":["src/components/z-button-sort/styles.css?tag=z-button-sort&encapsulation=shadow","src/components/z-button-sort/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  max-width: 100%;\n  height: 36px;\n  align-items: center;\n  padding: 0 var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary-icon);\n}\n\nbutton:focus {\n  border-color: var(--color-primary01);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-active-primary-icon);\n}\n\nbutton.selected {\n  border-color: var(--color-hover-primary);\n  background-color: var(--color-hover-primary);\n  color: var(--color-text-inverse);\n  fill: var(--color-inverse-icon);\n}\n\nbutton > span.ellipsis {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nbutton > span.counter {\n  margin-right: calc(var(--space-unit) * 2);\n  margin-left: calc(var(--space-unit) / 2);\n}\n\nbutton > span.sort {\n  margin-right: calc(var(--space-unit) / 2);\n  white-space: nowrap;\n}\n\nbutton > span {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  button {\n    max-width: 325px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  button {\n    max-width: 490px;\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort implements ComponentInterface {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"],"mappings":"mMAAA,MAAMA,EAAY,IAAM,w6C,MCQXC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,mHAwBEC,KAAAC,aAAwB,MAIxBD,KAAAE,cAAyB,MAIzBF,KAAAG,WAAuB,MAIvBH,KAAAI,QAAoB,KAGpBJ,KAAAK,aAAe,KA0DhB,CAlDS,mBAAAC,GACN,IAAKN,KAAKG,WAAY,CACpBH,KAAKG,WAAa,I,KACb,CACLH,KAAKI,SAAWJ,KAAKI,O,CAEvBJ,KAAKO,gBAAgBC,KAAK,CACxBC,SAAUT,KAAKS,SACfC,QAASV,KAAKI,S,CAIlB,gBAAAO,GACE,GAAIX,KAAKY,sBAAwBC,OAAOC,WAAaC,EAAYC,OAAQ,CACvEhB,KAAKK,aAAe,I,EAIhB,cAAAY,GACN,OAAOjB,KAAKK,aAAe,GAAGL,KAAKI,QAAUJ,KAAKkB,MAAQlB,KAAKmB,YAAc,E,CAGvE,kBAAAP,GACN,OAAOZ,KAAKoB,SAASC,YAAcrB,KAAKoB,SAASE,W,CAGnD,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,MAAO1B,KAAKiB,iBACZU,GAAI3B,KAAKS,SACTmB,MAAO,CAACC,SAAU7B,KAAKG,YACvB2B,QAAS,IAAM9B,KAAKM,uBAEpBkB,EAAA,QAAAC,IAAA,2CACEM,IAAMC,GAAQhC,KAAKoB,SAAWY,EAC9BJ,MAAM,aAEJ5B,KAAKI,SAAWJ,KAAKmB,UAAYnB,KAAKmB,UAAYnB,KAAKkB,OAE3DM,EAAA,QAAAC,IAAA,2CAAMG,MAAM,WAAW5B,KAAKiC,SAAW,KAAKjC,KAAKiC,YACjDT,EAAA,QAAAC,IAAA,2CAAMG,MAAM,QAAQ5B,KAAKI,QAAUJ,KAAKC,aAAeD,KAAKE,eAC5DsB,EAAA,UAAAC,IAAA,2CACES,KAAK,gBACLC,MAAO,GACPC,OAAQ,K","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZButtonSort","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sortlabelasc","sortlabeldesc","isselected","sortasc","allowTooltip","emitButtonSortClick","buttonSortClick","emit","buttonid","sortAsc","componentDidLoad","elementHasEllipsis","window","innerWidth","Breakpoints","TABLET","setButtonTitle","label","desclabel","ellipsis","offsetWidth","scrollWidth","render","h","key","title","id","class","selected","onClick","ref","el","counter","name","width","height"],"sources":["src/components/z-button-sort/styles.css?tag=z-button-sort&encapsulation=shadow","src/components/z-button-sort/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  max-width: 100%;\n  height: 36px;\n  align-items: center;\n  padding: 0 var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary-icon);\n}\n\nbutton:focus {\n  border-color: var(--color-primary01);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-active-primary-icon);\n}\n\nbutton.selected {\n  border-color: var(--color-hover-primary);\n  background-color: var(--color-hover-primary);\n  color: var(--color-text-inverse);\n  fill: var(--color-inverse-icon);\n}\n\nbutton > span.ellipsis {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nbutton > span.counter {\n  margin-right: calc(var(--space-unit) * 2);\n  margin-left: calc(var(--space-unit) / 2);\n}\n\nbutton > span.sort {\n  margin-right: calc(var(--space-unit) / 2);\n  white-space: nowrap;\n}\n\nbutton > span {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  button {\n    max-width: 325px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  button {\n    max-width: 490px;\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort implements ComponentInterface {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAY,IAAM,w6C,MCQXC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,mHAwBEC,KAAAC,aAAwB,MAIxBD,KAAAE,cAAyB,MAIzBF,KAAAG,WAAuB,MAIvBH,KAAAI,QAAoB,KAGpBJ,KAAAK,aAAe,KA0DhB,CAlDS,mBAAAC,GACN,IAAKN,KAAKG,WAAY,CACpBH,KAAKG,WAAa,I,KACb,CACLH,KAAKI,SAAWJ,KAAKI,O,CAEvBJ,KAAKO,gBAAgBC,KAAK,CACxBC,SAAUT,KAAKS,SACfC,QAASV,KAAKI,S,CAIlB,gBAAAO,GACE,GAAIX,KAAKY,sBAAwBC,OAAOC,WAAaC,EAAYC,OAAQ,CACvEhB,KAAKK,aAAe,I,EAIhB,cAAAY,GACN,OAAOjB,KAAKK,aAAe,GAAGL,KAAKI,QAAUJ,KAAKkB,MAAQlB,KAAKmB,YAAc,E,CAGvE,kBAAAP,GACN,OAAOZ,KAAKoB,SAASC,YAAcrB,KAAKoB,SAASE,W,CAGnD,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,MAAO1B,KAAKiB,iBACZU,GAAI3B,KAAKS,SACTmB,MAAO,CAACC,SAAU7B,KAAKG,YACvB2B,QAAS,IAAM9B,KAAKM,uBAEpBkB,EAAA,QAAAC,IAAA,2CACEM,IAAMC,GAAQhC,KAAKoB,SAAWY,EAC9BJ,MAAM,aAEJ5B,KAAKI,SAAWJ,KAAKmB,UAAYnB,KAAKmB,UAAYnB,KAAKkB,OAE3DM,EAAA,QAAAC,IAAA,2CAAMG,MAAM,WAAW5B,KAAKiC,SAAW,KAAKjC,KAAKiC,YACjDT,EAAA,QAAAC,IAAA,2CAAMG,MAAM,QAAQ5B,KAAKI,QAAUJ,KAAKC,aAAeD,KAAKE,eAC5DsB,EAAA,UAAAC,IAAA,2CACES,KAAK,gBACLC,MAAO,GACPC,OAAQ,K","ignoreList":[]}

package/dist/components/z-button.js

@@ -1,2 +1,2 @@
-import{Z as o,d as s}from"./index4.js";const t=o;const n=s;export{t as ZButton,n as defineCustomElement};
+import{Z as o,d as s}from"./p-BAguKZnb.js";const t=o;const n=s;export{t as ZButton,n as defineCustomElement};
 //# sourceMappingURL=z-button.js.map

package/dist/components/z-card.js

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

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

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