@zanichelli/albe-web-components 18.2.1 → 18.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/web-components-library.cjs.js +1 -1
  4. package/dist/cjs/z-anchor-navigation.cjs.entry.js +2 -1
  5. package/dist/cjs/z-anchor-navigation.cjs.entry.js.map +1 -1
  6. package/dist/cjs/z-book-card-app.cjs.entry.js +1 -1
  7. package/dist/cjs/z-book-card-app.cjs.entry.js.map +1 -1
  8. package/dist/cjs/z-book-card.cjs.entry.js +1 -1
  9. package/dist/cjs/z-book-card.cjs.entry.js.map +1 -1
  10. package/dist/collection/components/z-anchor-navigation/index.js +20 -1
  11. package/dist/collection/components/z-anchor-navigation/index.js.map +1 -1
  12. package/dist/collection/components/z-anchor-navigation/index.stories.js +6 -1
  13. package/dist/collection/components/z-anchor-navigation/index.stories.js.map +1 -1
  14. package/dist/collection/tokens/typography.css +88 -0
  15. package/dist/components/z-anchor-navigation.js +3 -1
  16. package/dist/components/z-anchor-navigation.js.map +1 -1
  17. package/dist/components/z-book-card-app.js +1 -1
  18. package/dist/components/z-book-card-app.js.map +1 -1
  19. package/dist/components/z-book-card.js +1 -1
  20. package/dist/components/z-book-card.js.map +1 -1
  21. package/dist/esm/loader.js +1 -1
  22. package/dist/esm/web-components-library.js +1 -1
  23. package/dist/esm/z-anchor-navigation.entry.js +2 -1
  24. package/dist/esm/z-anchor-navigation.entry.js.map +1 -1
  25. package/dist/esm/z-book-card-app.entry.js +1 -1
  26. package/dist/esm/z-book-card-app.entry.js.map +1 -1
  27. package/dist/esm/z-book-card.entry.js +1 -1
  28. package/dist/esm/z-book-card.entry.js.map +1 -1
  29. package/dist/types/components/z-anchor-navigation/index.d.ts +4 -0
  30. package/dist/types/components/z-anchor-navigation/index.stories.d.ts +1 -0
  31. package/dist/types/components.d.ts +8 -0
  32. package/dist/web-components-library/{p-82d52ee6.entry.js → p-1ef90472.entry.js} +2 -2
  33. package/dist/web-components-library/p-1ef90472.entry.js.map +1 -0
  34. package/dist/web-components-library/{p-6a6d30ae.entry.js → p-a3860bef.entry.js} +2 -2
  35. package/dist/web-components-library/p-a3860bef.entry.js.map +1 -0
  36. package/dist/web-components-library/{p-64f5da5f.entry.js → p-b0856b23.entry.js} +2 -2
  37. package/dist/web-components-library/p-b0856b23.entry.js.map +1 -0
  38. package/dist/web-components-library/web-components-library.css +88 -0
  39. package/dist/web-components-library/web-components-library.esm.js +1 -1
  40. package/dist/web-components-library/web-components-library.esm.js.map +1 -1
  41. package/package.json +1 -1
  42. package/www/build/{p-11df33c9.js → p-15ea6e9d.js} +1 -1
  43. package/www/build/{p-82d52ee6.entry.js → p-1ef90472.entry.js} +2 -2
  44. package/www/build/p-1ef90472.entry.js.map +1 -0
  45. package/www/build/{p-4f4ec223.css → p-56d35027.css} +88 -0
  46. package/www/build/{p-6a6d30ae.entry.js → p-a3860bef.entry.js} +2 -2
  47. package/www/build/p-a3860bef.entry.js.map +1 -0
  48. package/www/build/{p-64f5da5f.entry.js → p-b0856b23.entry.js} +2 -2
  49. package/www/build/p-b0856b23.entry.js.map +1 -0
  50. package/www/build/web-components-library.css +88 -0
  51. package/www/build/web-components-library.esm.js +1 -1
  52. package/www/build/web-components-library.esm.js.map +1 -1
  53. package/www/index.html +1 -1
  54. package/dist/web-components-library/p-64f5da5f.entry.js.map +0 -1
  55. package/dist/web-components-library/p-6a6d30ae.entry.js.map +0 -1
  56. package/dist/web-components-library/p-82d52ee6.entry.js.map +0 -1
  57. package/www/build/p-64f5da5f.entry.js.map +0 -1
  58. package/www/build/p-6a6d30ae.entry.js.map +0 -1
  59. package/www/build/p-82d52ee6.entry.js.map +0 -1
package/www/index.html CHANGED
@@ -1,3 +1,3 @@
1
- <!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-4f4ec223.css"> <link rel="modulepreload" href="/build/p-11df33c9.js"><link rel="modulepreload" href="/build/p-5145a606.js"><link rel="modulepreload" href="/build/p-75c4a726.js"><link rel="modulepreload" href="/build/p-dfcf9936.js"><link rel="modulepreload" href="/build/p-f3145212.js"><script type="module" src="/build/p-11df33c9.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> <style>body {
1
+ <!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-56d35027.css"> <link rel="modulepreload" href="/build/p-15ea6e9d.js"><link rel="modulepreload" href="/build/p-5145a606.js"><link rel="modulepreload" href="/build/p-75c4a726.js"><link rel="modulepreload" href="/build/p-dfcf9936.js"><link rel="modulepreload" href="/build/p-f3145212.js"><script type="module" src="/build/p-15ea6e9d.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> <style>body {
2
2
  margin: 0;
3
3
  }</style> </body></html>
package/dist/web-components-library/p-64f5da5f.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZBookCardAppStyle0","ZBookCardAppStyle1","typographyCss","ZBookCardAppStyle2","ZBookCardApp","emitAppClick","this","appClick","emit","renderLaz","laz","h","class","render","key","href","link","name","onClick","target","logo","src","alt","info","icon","size","ControlSize","X_SMALL","position","InfoRevealPosition","TOP_RIGHT","fill"],"sources":["src/components/book-card/z-book-card-app/styles.css?tag=z-book-card-app&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card-app&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card-app&encapsulation=shadow","src/components/book-card/z-book-card-app/index.tsx"],"sourcesContent":[":host {\n display: block;\n width: inherit;\n min-width: 300px;\n height: inherit;\n min-height: 32px;\n background-color: var(--color-surface01);\n}\n\n:host > div {\n display: flex;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: space-between;\n padding: var(--z-book-card-app-padding-y, calc(var(--space-unit) * 1.5))\n var(--z-book-card-app-padding-x, var(--space-unit));\n gap: calc(var(--space-unit) * 2);\n}\n\n:host > div .app {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-unit);\n}\n\n:host > div .app.z-link {\n color: inherit;\n text-decoration: none;\n}\n\n:host > div .app.z-link:focus {\n text-decoration: none;\n}\n\n:host > div .app img {\n width: 1.5rem;\n height: 1.5rem;\n min-height: 32px;\n}\n\n:host > div .app .name {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n font-family: var(--font-family-serif);\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n:host > div .app .name .laz {\n color: var(--red500);\n}\n\n:host > div z-info-reveal {\n --z-info-reveal-panel-width: 250px;\n --trigger-icon-size-x-small: 1rem;\n\n font-family: var(--font-family-sans);\n\n --color-surface05: var(--color-surface01);\n --color-text-inverse: var(--color-default-text);\n --color-inverse-icon: var(--color-primary01);\n}\n\n:host z-icon {\n --z-icon-width: 1rem;\n --z-icon-height: 1rem;\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus,\nbutton.z-link:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link.z-link-active:focus,\nbutton.z-link.z-link-active:focus,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus,\nbutton.z-link.z-link-blue:focus {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus,\nbutton.z-link.z-link-red:focus {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus,\nbutton.z-link.z-link-inverse:focus {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../../beans\";\n\n/**\n * ZBookCardApp component\n * @cssprop --z-book-card-app-padding-x - set left and right padding\n * @cssprop --z-book-card-app-padding-y - set top and bottom padding\n */\n@Component({\n tag: \"z-book-card-app\",\n styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZBookCardApp {\n @Element() hostElement: HTMLZBookCardAppElement;\n\n /**\n * App logo url\n */\n @Prop()\n logo?: string;\n\n /**\n * App name\n */\n @Prop()\n name: string;\n\n /**\n * link to the app website\n */\n @Prop()\n link: string;\n\n /**\n * Show or hide laZ prefix before app name\n */\n @Prop()\n laz? = true;\n\n /**\n * Info text to show as inforeveal\n */\n @Prop()\n info?: string;\n\n /** click on app link */\n @Event()\n appClick: EventEmitter;\n\n private emitAppClick(): void {\n this.appClick.emit();\n }\n\n private renderLaz(): HTMLSpanElement | null {\n if (this.laz) {\n return <span class=\"laz\">laZ </span>;\n }\n\n return null;\n }\n\n render(): HTMLZBookCardAppElement {\n return (\n <div>\n <a\n class=\"app z-link\"\n href={this.link}\n aria-label={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n onClick={() => this.emitAppClick()}\n target=\"_blank\"\n >\n {this.logo && (\n <img\n src={this.logo}\n alt=\"\"\n />\n )}\n <div class=\"name body-4-sb\">\n {this.renderLaz()}\n {this.name}\n </div>\n </a>\n {this.info && (\n <z-info-reveal\n icon=\"info\"\n size={ControlSize.X_SMALL}\n position={InfoRevealPosition.TOP_RIGHT}\n class=\"info body-5\"\n >\n <div>{this.info}</div>\n </z-info-reveal>\n )}\n <a\n class=\"z-link z-link-icon\"\n href={this.link}\n aria-label={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n onClick={() => this.emitAppClick()}\n target=\"_blank\"\n >\n <z-icon\n name=\"chevron-right\"\n fill=\"color-primary01-icon\"\n ></z-icon>\n </a>\n </div>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,msCAClB,MAAAC,EAAeD,ECDf,MAAMA,EAAY,05GAClB,MAAAE,EAAeF,ECDf,MAAMG,EAAgB,w8UACtB,MAAAC,EAAeD,E,MCYFE,EAAY,M,iIAyBhB,K,oBAYC,YAAAC,GACNC,KAAKC,SAASC,M,CAGR,SAAAC,GACN,GAAIH,KAAKI,IAAK,CACZ,OAAOC,EAAA,QAAMC,MAAM,OAAK,O,CAG1B,OAAO,I,CAGT,MAAAC,GACE,OACEF,EAAA,OAAAG,IAAA,4CACEH,EAAA,KAAAG,IAAA,2CACEF,MAAM,aACNG,KAAMT,KAAKU,KAAI,aACH,SAASV,KAAKI,IAAM,MAAQ,MAAMJ,KAAKW,OACnDC,QAAS,IAAMZ,KAAKD,eACpBc,OAAO,UAENb,KAAKc,MACJT,EAAA,OAAAG,IAAA,2CACEO,IAAKf,KAAKc,KACVE,IAAI,KAGRX,EAAA,OAAAG,IAAA,2CAAKF,MAAM,kBACRN,KAAKG,YACLH,KAAKW,OAGTX,KAAKiB,MACJZ,EAAA,iBAAAG,IAAA,2CACEU,KAAK,OACLC,KAAMC,EAAYC,QAClBC,SAAUC,EAAmBC,UAC7BlB,MAAM,eAEND,EAAA,OAAAG,IAAA,4CAAMR,KAAKiB,OAGfZ,EAAA,KAAAG,IAAA,2CACEF,MAAM,qBACNG,KAAMT,KAAKU,KAAI,aACH,SAASV,KAAKI,IAAM,MAAQ,MAAMJ,KAAKW,OACnDC,QAAS,IAAMZ,KAAKD,eACpBc,OAAO,UAEPR,EAAA,UAAAG,IAAA,2CACEG,KAAK,gBACLc,KAAK,0B","ignoreList":[]}
package/dist/web-components-library/p-6a6d30ae.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZBookCardStyle0","typographyCss","ZBookCardStyle1","ZBookCard","BookCardVariant","PORTRAIT","emitEbookClick","this","ebookClick","emit","renderCover","h","class","src","cover","onError","fallbackCover","name","renderYear","year","renderAuthors","authors","variant","LANDSCAPE","renderCtaSlot","renderOperaTitle","title","titleHtmlTag","operaTitle","innerHTML","renderVolumeTitle","volumeTitle","renderIsbn","isbn","isbnLabel","renderEbook","size","ControlSize","X_SMALL","href","ebookUrl","target","onClick","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/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host .main-content {\n display: flex;\n height: 100%;\n box-sizing: border-box;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n:host .main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n height: var(--z-book-card-portrait-cover-height);\n background: var(--color-white);\n border-radius: var(--border-radius);\n}\n\n:host .main-content .cover img {\n max-width: 100%;\n max-height: 100%;\n align-self: end;\n}\n\n::slotted([slot=\"coverOverlay\"]) {\n position: absolute;\n bottom: 0;\n overflow: hidden;\n width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n background-color: var(--avatar-C19);\n color: var(--color-white);\n}\n\n:host .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n min-height: 80px;\n max-height: 336px;\n}\n\n:host .main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n:host .main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n:host .main-content .card-info .top .ellipsis.opera-title {\n height: calc(1.5 * var(--z-book-card-title-lines)) rem;\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.volume-title {\n height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.authors {\n height: calc(1.4 * var(--z-book-card-authors-lines)) rem;\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n:host .main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n:host .main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n:host .main-content .card-info .bottom .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {\n width: 1.5rem;\n height: 1.5rem;\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n width: 635px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n box-sizing: border-box;\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover {\n display: flex;\n overflow: hidden;\n width: 221px;\n height: 300px;\n margin: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n min-height: 80px;\n max-height: 256px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info {\n gap: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {Component, Element, Event, EventEmitter, 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 - purple layer on top of book cover\n * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px\n * @cssprop --z-book-card-title-lines - set title avilable lines - default 2\n * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial\n * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1\n * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all\n * @cssprop --z-book-card-authors-lines - set authors available lines - default 1\n * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all\n */\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZBookCard {\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] Show link to the ebook resource */\n @Prop()\n ebookUrl?: string;\n\n /** [optional] Fallback cover URL */\n @Prop()\n fallbackCover?: string;\n\n /** [optional] Set a specific h level as html tag for opera title */\n @Prop()\n titleHtmlTag?: string;\n\n /** click on ebook link */\n @Event()\n ebookClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n <img\n src={this.cover}\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n }\n }}\n aria-hidden=\"true\"\n />\n <slot name=\"coverOverlay\"></slot>\n </div>\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 return (\n <div class=\"cta-wrapper\">\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null | HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null | HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div>\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 </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target=\"_blank\"\n onClick={() => this.emitEbookClick()}\n htmlrole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,m2LAClB,MAAAC,EAAeD,ECDf,MAAME,EAAgB,w8UACtB,MAAAC,EAAeD,E,MCsBFE,EAAS,M,6EAKOC,EAAgBC,S,oIAwB/B,G,qGAsBJ,cAAAC,GACNC,KAAKC,WAAWC,M,CAGV,WAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,SACTD,EAAA,OACEE,IAAKN,KAAKO,MACVC,QAAS,KACP,GAAIR,KAAKS,cAAe,CACtBT,KAAKO,MAAQP,KAAKS,a,GAErB,cACW,SAEdL,EAAA,QAAMM,KAAK,iB,CAKT,UAAAC,GACN,IAAKX,KAAKY,KAAM,CACd,OAAO,I,CAGT,OACER,EAAA,OACEC,MAAM,uBAAsB,mBACX,QAEhBL,KAAKY,K,CAKJ,aAAAC,GACN,IAAKb,KAAKc,QAAS,CACjB,OAAO,I,CAGT,OACEV,EAAA,OAAKC,MAAM,eACTD,EAAA,OACEC,MAAM,0BAAyB,mBACd,UAEhBL,KAAKc,SAEPd,KAAKe,UAAYlB,EAAgBmB,UAAYhB,KAAKiB,gBAAkB,K,CAKnE,gBAAAC,GACN,MAAMC,EAAQnB,KAAKoB,aACf,IAAIpB,KAAKoB,gBAAgBpB,KAAKqB,eAAerB,KAAKoB,gBAClDpB,KAAKqB,WAET,OACEjB,EAAA,OAAKC,MAAM,eACTD,EAAA,OACEC,MAAM,iCACNiB,UAAWH,IAEZnB,KAAKe,UAAYlB,EAAgBC,SAAWE,KAAKiB,gBAAkB,K,CAKlE,iBAAAM,GACN,IAAKvB,KAAKwB,YAAa,CACrB,OAAO,I,CAGT,OAAOpB,EAAA,OAAKC,MAAM,gCAAgCL,KAAKwB,Y,CAGjD,UAAAC,GACN,IAAKzB,KAAK0B,KAAM,CACd,OAAO,I,CAGT,OACEtB,EAAA,OACEC,MAAM,0BAAyB,mBACb,QAAQL,KAAK2B,aAE9B3B,KAAK0B,KAAI,IAAG1B,KAAK2B,UAAYvB,EAAA,QAAMC,MAAM,UAAUL,KAAK2B,WAAoB,K,CAK3E,WAAAC,GACN,OACExB,EAAA,OAAKC,MAAM,SACTD,EAAA,WACEA,EAAA,OAAKC,MAAM,YACTD,EAAA,OACEC,MAAM,aAAY,cACN,SAEdD,EAAA,OAAKC,MAAM,aAAW,eAG1BD,EAAA,YACEyB,KAAMC,EAAYC,QAClBC,KAAMhC,KAAKiC,SACXC,OAAO,SACPC,QAAS,IAAMnC,KAAKD,iBACpBqC,SAAS,OAAM,mBACG,iBAAiBpC,KAAKqB,2BAAyB,e,CAQjE,aAAAJ,GACN,OAAOb,EAAA,QAAMM,KAAK,O,CAGpB,MAAA2B,GACE,OACEjC,EAACkC,EAAI,CAAAC,IAAA,4CACHnC,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,gBACRL,KAAKG,cACNC,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,aACTD,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,OACTD,EAAA,OAAAmC,IAAA,4CACGvC,KAAKW,aACLX,KAAKa,gBACLb,KAAKkB,mBACLlB,KAAKuB,oBACLvB,KAAKyB,cAERrB,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,SACXN,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,UAEbN,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,WAAWV,KAAKiC,UAAY7B,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,UAAUL,KAAK4B,kBAGrExB,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,S","ignoreList":[]}
package/dist/web-components-library/p-82d52ee6.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setCurrent","currentElement","Array","from","this","nav","querySelectorAll","find","anchor","href","host","ownerDocument","location","children","forEach","item","HTMLAnchorElement","querySelector","isCurrent","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","autoCurrent","window","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n color: inherit;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-default-icon);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n transition:\n background-color 0.3s ease-in-out,\n border-color 0.3s ease-in-out,\n color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n border-left-color: var(--color-primary01);\n color: var(--color-primary01);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > *:focus:focus-visible,\nz-anchor-navigation nav > * > *:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n /* hide anchor actions by default... */\n z-anchor-navigation nav > * > :is(z-button, button) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: hover) {\n /* ...show them only hovering/focusing the anchor */\n z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n fill: var(--color-default-icon);\n opacity: 1;\n pointer-events: unset;\n }\n\n z-anchor-navigation nav > *:hover {\n border-left-color: var(--color-hover-primary);\n background-color: var(--color-background);\n color: var(--color-hover-primary);\n }\n }\n\n z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {\n color: transparent;\n fill: transparent;\n }\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /**\n * If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n */\n @Prop({reflect: true})\n hideUnselected = false;\n\n /**\n * Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n */\n @Prop()\n autoCurrent = true;\n\n /**\n * Whether the mobile list is collapsed.\n */\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /** Reference to the nav element. */\n private nav: HTMLElement;\n\n /**\n * Set `aria-current` attribute to the anchors.\n */\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /**\n * Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,2wEAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,iBASH,K,eAMF,K,CAUJ,UAAAC,GACN,MAAMC,EAAiBC,MAAMC,KAAKC,KAAKC,IAAIC,iBAAiB,MAAMC,MAC/DC,GAAWA,EAAOC,OAASL,KAAKM,KAAKC,cAAcC,SAASH,OAE/DP,MAAMC,KAAKC,KAAKC,IAAIQ,UAAUC,SAASC,IACrC,MAAMP,EAASO,aAAgBC,kBAAoBD,EAAOA,EAAKE,cAAc,KAC7E,MAAMC,EAAYV,IAAWP,EAC7BO,EAAOW,aAAa,eAAgBD,EAAUE,YAC9CL,EAAKM,gBAAgB,eAAgBH,EAAU,G,CAO3C,eAAAI,GACNlB,KAAKmB,WAAanB,KAAKmB,S,CAGzB,gBAAAC,GACE,GAAIpB,KAAKqB,YAAa,CACpBC,OAAOC,iBAAiB,aAAcvB,KAAKJ,WAAW4B,KAAKxB,OAC3DA,KAAKJ,Y,EAIT,oBAAA6B,GACEH,OAAOI,oBAAoB,aAAc1B,KAAKJ,W,CAGhD,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACX,UAAWnB,KAAKmB,WACpBS,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,QAASC,EAAcC,UACvBC,KAAMnC,KAAKmB,UAAY,aAAe,eACtCiB,QAASpC,KAAKkB,gBAAgBM,KAAKxB,OAAK,WAI1C4B,EAAA,OAAAE,IAAA,2CAAKO,IAAMC,GAAQtC,KAAKC,IAAMqC,GAC5BV,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
package/www/build/p-64f5da5f.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZBookCardAppStyle0","ZBookCardAppStyle1","typographyCss","ZBookCardAppStyle2","ZBookCardApp","emitAppClick","this","appClick","emit","renderLaz","laz","h","class","render","key","href","link","name","onClick","target","logo","src","alt","info","icon","size","ControlSize","X_SMALL","position","InfoRevealPosition","TOP_RIGHT","fill"],"sources":["src/components/book-card/z-book-card-app/styles.css?tag=z-book-card-app&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card-app&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card-app&encapsulation=shadow","src/components/book-card/z-book-card-app/index.tsx"],"sourcesContent":[":host {\n display: block;\n width: inherit;\n min-width: 300px;\n height: inherit;\n min-height: 32px;\n background-color: var(--color-surface01);\n}\n\n:host > div {\n display: flex;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: space-between;\n padding: var(--z-book-card-app-padding-y, calc(var(--space-unit) * 1.5))\n var(--z-book-card-app-padding-x, var(--space-unit));\n gap: calc(var(--space-unit) * 2);\n}\n\n:host > div .app {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-unit);\n}\n\n:host > div .app.z-link {\n color: inherit;\n text-decoration: none;\n}\n\n:host > div .app.z-link:focus {\n text-decoration: none;\n}\n\n:host > div .app img {\n width: 1.5rem;\n height: 1.5rem;\n min-height: 32px;\n}\n\n:host > div .app .name {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n font-family: var(--font-family-serif);\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n:host > div .app .name .laz {\n color: var(--red500);\n}\n\n:host > div z-info-reveal {\n --z-info-reveal-panel-width: 250px;\n --trigger-icon-size-x-small: 1rem;\n\n font-family: var(--font-family-sans);\n\n --color-surface05: var(--color-surface01);\n --color-text-inverse: var(--color-default-text);\n --color-inverse-icon: var(--color-primary01);\n}\n\n:host z-icon {\n --z-icon-width: 1rem;\n --z-icon-height: 1rem;\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus,\nbutton.z-link:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link.z-link-active:focus,\nbutton.z-link.z-link-active:focus,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus,\nbutton.z-link.z-link-blue:focus {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus,\nbutton.z-link.z-link-red:focus {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus,\nbutton.z-link.z-link-inverse:focus {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../../beans\";\n\n/**\n * ZBookCardApp component\n * @cssprop --z-book-card-app-padding-x - set left and right padding\n * @cssprop --z-book-card-app-padding-y - set top and bottom padding\n */\n@Component({\n tag: \"z-book-card-app\",\n styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZBookCardApp {\n @Element() hostElement: HTMLZBookCardAppElement;\n\n /**\n * App logo url\n */\n @Prop()\n logo?: string;\n\n /**\n * App name\n */\n @Prop()\n name: string;\n\n /**\n * link to the app website\n */\n @Prop()\n link: string;\n\n /**\n * Show or hide laZ prefix before app name\n */\n @Prop()\n laz? = true;\n\n /**\n * Info text to show as inforeveal\n */\n @Prop()\n info?: string;\n\n /** click on app link */\n @Event()\n appClick: EventEmitter;\n\n private emitAppClick(): void {\n this.appClick.emit();\n }\n\n private renderLaz(): HTMLSpanElement | null {\n if (this.laz) {\n return <span class=\"laz\">laZ </span>;\n }\n\n return null;\n }\n\n render(): HTMLZBookCardAppElement {\n return (\n <div>\n <a\n class=\"app z-link\"\n href={this.link}\n aria-label={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n onClick={() => this.emitAppClick()}\n target=\"_blank\"\n >\n {this.logo && (\n <img\n src={this.logo}\n alt=\"\"\n />\n )}\n <div class=\"name body-4-sb\">\n {this.renderLaz()}\n {this.name}\n </div>\n </a>\n {this.info && (\n <z-info-reveal\n icon=\"info\"\n size={ControlSize.X_SMALL}\n position={InfoRevealPosition.TOP_RIGHT}\n class=\"info body-5\"\n >\n <div>{this.info}</div>\n </z-info-reveal>\n )}\n <a\n class=\"z-link z-link-icon\"\n href={this.link}\n aria-label={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n onClick={() => this.emitAppClick()}\n target=\"_blank\"\n >\n <z-icon\n name=\"chevron-right\"\n fill=\"color-primary01-icon\"\n ></z-icon>\n </a>\n </div>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,msCAClB,MAAAC,EAAeD,ECDf,MAAMA,EAAY,05GAClB,MAAAE,EAAeF,ECDf,MAAMG,EAAgB,w8UACtB,MAAAC,EAAeD,E,MCYFE,EAAY,M,iIAyBhB,K,oBAYC,YAAAC,GACNC,KAAKC,SAASC,M,CAGR,SAAAC,GACN,GAAIH,KAAKI,IAAK,CACZ,OAAOC,EAAA,QAAMC,MAAM,OAAK,O,CAG1B,OAAO,I,CAGT,MAAAC,GACE,OACEF,EAAA,OAAAG,IAAA,4CACEH,EAAA,KAAAG,IAAA,2CACEF,MAAM,aACNG,KAAMT,KAAKU,KAAI,aACH,SAASV,KAAKI,IAAM,MAAQ,MAAMJ,KAAKW,OACnDC,QAAS,IAAMZ,KAAKD,eACpBc,OAAO,UAENb,KAAKc,MACJT,EAAA,OAAAG,IAAA,2CACEO,IAAKf,KAAKc,KACVE,IAAI,KAGRX,EAAA,OAAAG,IAAA,2CAAKF,MAAM,kBACRN,KAAKG,YACLH,KAAKW,OAGTX,KAAKiB,MACJZ,EAAA,iBAAAG,IAAA,2CACEU,KAAK,OACLC,KAAMC,EAAYC,QAClBC,SAAUC,EAAmBC,UAC7BlB,MAAM,eAEND,EAAA,OAAAG,IAAA,4CAAMR,KAAKiB,OAGfZ,EAAA,KAAAG,IAAA,2CACEF,MAAM,qBACNG,KAAMT,KAAKU,KAAI,aACH,SAASV,KAAKI,IAAM,MAAQ,MAAMJ,KAAKW,OACnDC,QAAS,IAAMZ,KAAKD,eACpBc,OAAO,UAEPR,EAAA,UAAAG,IAAA,2CACEG,KAAK,gBACLc,KAAK,0B","ignoreList":[]}
package/www/build/p-6a6d30ae.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZBookCardStyle0","typographyCss","ZBookCardStyle1","ZBookCard","BookCardVariant","PORTRAIT","emitEbookClick","this","ebookClick","emit","renderCover","h","class","src","cover","onError","fallbackCover","name","renderYear","year","renderAuthors","authors","variant","LANDSCAPE","renderCtaSlot","renderOperaTitle","title","titleHtmlTag","operaTitle","innerHTML","renderVolumeTitle","volumeTitle","renderIsbn","isbn","isbnLabel","renderEbook","size","ControlSize","X_SMALL","href","ebookUrl","target","onClick","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/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host .main-content {\n display: flex;\n height: 100%;\n box-sizing: border-box;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n:host .main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n height: var(--z-book-card-portrait-cover-height);\n background: var(--color-white);\n border-radius: var(--border-radius);\n}\n\n:host .main-content .cover img {\n max-width: 100%;\n max-height: 100%;\n align-self: end;\n}\n\n::slotted([slot=\"coverOverlay\"]) {\n position: absolute;\n bottom: 0;\n overflow: hidden;\n width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n background-color: var(--avatar-C19);\n color: var(--color-white);\n}\n\n:host .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n min-height: 80px;\n max-height: 336px;\n}\n\n:host .main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n:host .main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n:host .main-content .card-info .top .ellipsis.opera-title {\n height: calc(1.5 * var(--z-book-card-title-lines)) rem;\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.volume-title {\n height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.authors {\n height: calc(1.4 * var(--z-book-card-authors-lines)) rem;\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n:host .main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n:host .main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n:host .main-content .card-info .bottom .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {\n width: 1.5rem;\n height: 1.5rem;\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n width: 635px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n box-sizing: border-box;\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover {\n display: flex;\n overflow: hidden;\n width: 221px;\n height: 300px;\n margin: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n min-height: 80px;\n max-height: 256px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info {\n gap: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {Component, Element, Event, EventEmitter, 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 - purple layer on top of book cover\n * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px\n * @cssprop --z-book-card-title-lines - set title avilable lines - default 2\n * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial\n * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1\n * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all\n * @cssprop --z-book-card-authors-lines - set authors available lines - default 1\n * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all\n */\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZBookCard {\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] Show link to the ebook resource */\n @Prop()\n ebookUrl?: string;\n\n /** [optional] Fallback cover URL */\n @Prop()\n fallbackCover?: string;\n\n /** [optional] Set a specific h level as html tag for opera title */\n @Prop()\n titleHtmlTag?: string;\n\n /** click on ebook link */\n @Event()\n ebookClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n <img\n src={this.cover}\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n }\n }}\n aria-hidden=\"true\"\n />\n <slot name=\"coverOverlay\"></slot>\n </div>\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 return (\n <div class=\"cta-wrapper\">\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null | HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null | HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div>\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 </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target=\"_blank\"\n onClick={() => this.emitEbookClick()}\n htmlrole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,m2LAClB,MAAAC,EAAeD,ECDf,MAAME,EAAgB,w8UACtB,MAAAC,EAAeD,E,MCsBFE,EAAS,M,6EAKOC,EAAgBC,S,oIAwB/B,G,qGAsBJ,cAAAC,GACNC,KAAKC,WAAWC,M,CAGV,WAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,SACTD,EAAA,OACEE,IAAKN,KAAKO,MACVC,QAAS,KACP,GAAIR,KAAKS,cAAe,CACtBT,KAAKO,MAAQP,KAAKS,a,GAErB,cACW,SAEdL,EAAA,QAAMM,KAAK,iB,CAKT,UAAAC,GACN,IAAKX,KAAKY,KAAM,CACd,OAAO,I,CAGT,OACER,EAAA,OACEC,MAAM,uBAAsB,mBACX,QAEhBL,KAAKY,K,CAKJ,aAAAC,GACN,IAAKb,KAAKc,QAAS,CACjB,OAAO,I,CAGT,OACEV,EAAA,OAAKC,MAAM,eACTD,EAAA,OACEC,MAAM,0BAAyB,mBACd,UAEhBL,KAAKc,SAEPd,KAAKe,UAAYlB,EAAgBmB,UAAYhB,KAAKiB,gBAAkB,K,CAKnE,gBAAAC,GACN,MAAMC,EAAQnB,KAAKoB,aACf,IAAIpB,KAAKoB,gBAAgBpB,KAAKqB,eAAerB,KAAKoB,gBAClDpB,KAAKqB,WAET,OACEjB,EAAA,OAAKC,MAAM,eACTD,EAAA,OACEC,MAAM,iCACNiB,UAAWH,IAEZnB,KAAKe,UAAYlB,EAAgBC,SAAWE,KAAKiB,gBAAkB,K,CAKlE,iBAAAM,GACN,IAAKvB,KAAKwB,YAAa,CACrB,OAAO,I,CAGT,OAAOpB,EAAA,OAAKC,MAAM,gCAAgCL,KAAKwB,Y,CAGjD,UAAAC,GACN,IAAKzB,KAAK0B,KAAM,CACd,OAAO,I,CAGT,OACEtB,EAAA,OACEC,MAAM,0BAAyB,mBACb,QAAQL,KAAK2B,aAE9B3B,KAAK0B,KAAI,IAAG1B,KAAK2B,UAAYvB,EAAA,QAAMC,MAAM,UAAUL,KAAK2B,WAAoB,K,CAK3E,WAAAC,GACN,OACExB,EAAA,OAAKC,MAAM,SACTD,EAAA,WACEA,EAAA,OAAKC,MAAM,YACTD,EAAA,OACEC,MAAM,aAAY,cACN,SAEdD,EAAA,OAAKC,MAAM,aAAW,eAG1BD,EAAA,YACEyB,KAAMC,EAAYC,QAClBC,KAAMhC,KAAKiC,SACXC,OAAO,SACPC,QAAS,IAAMnC,KAAKD,iBACpBqC,SAAS,OAAM,mBACG,iBAAiBpC,KAAKqB,2BAAyB,e,CAQjE,aAAAJ,GACN,OAAOb,EAAA,QAAMM,KAAK,O,CAGpB,MAAA2B,GACE,OACEjC,EAACkC,EAAI,CAAAC,IAAA,4CACHnC,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,gBACRL,KAAKG,cACNC,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,aACTD,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,OACTD,EAAA,OAAAmC,IAAA,4CACGvC,KAAKW,aACLX,KAAKa,gBACLb,KAAKkB,mBACLlB,KAAKuB,oBACLvB,KAAKyB,cAERrB,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,SACXN,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,UAEbN,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,WAAWV,KAAKiC,UAAY7B,EAAA,OAAAmC,IAAA,2CAAKlC,MAAM,UAAUL,KAAK4B,kBAGrExB,EAAA,QAAAmC,IAAA,2CAAM7B,KAAK,S","ignoreList":[]}
package/www/build/p-82d52ee6.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setCurrent","currentElement","Array","from","this","nav","querySelectorAll","find","anchor","href","host","ownerDocument","location","children","forEach","item","HTMLAnchorElement","querySelector","isCurrent","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","autoCurrent","window","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n color: inherit;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-default-icon);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n transition:\n background-color 0.3s ease-in-out,\n border-color 0.3s ease-in-out,\n color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n border-left-color: var(--color-primary01);\n color: var(--color-primary01);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > *:focus:focus-visible,\nz-anchor-navigation nav > * > *:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n /* hide anchor actions by default... */\n z-anchor-navigation nav > * > :is(z-button, button) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: hover) {\n /* ...show them only hovering/focusing the anchor */\n z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n fill: var(--color-default-icon);\n opacity: 1;\n pointer-events: unset;\n }\n\n z-anchor-navigation nav > *:hover {\n border-left-color: var(--color-hover-primary);\n background-color: var(--color-background);\n color: var(--color-hover-primary);\n }\n }\n\n z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {\n color: transparent;\n fill: transparent;\n }\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /**\n * If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n */\n @Prop({reflect: true})\n hideUnselected = false;\n\n /**\n * Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n */\n @Prop()\n autoCurrent = true;\n\n /**\n * Whether the mobile list is collapsed.\n */\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /** Reference to the nav element. */\n private nav: HTMLElement;\n\n /**\n * Set `aria-current` attribute to the anchors.\n */\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /**\n * Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,2wEAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,iBASH,K,eAMF,K,CAUJ,UAAAC,GACN,MAAMC,EAAiBC,MAAMC,KAAKC,KAAKC,IAAIC,iBAAiB,MAAMC,MAC/DC,GAAWA,EAAOC,OAASL,KAAKM,KAAKC,cAAcC,SAASH,OAE/DP,MAAMC,KAAKC,KAAKC,IAAIQ,UAAUC,SAASC,IACrC,MAAMP,EAASO,aAAgBC,kBAAoBD,EAAOA,EAAKE,cAAc,KAC7E,MAAMC,EAAYV,IAAWP,EAC7BO,EAAOW,aAAa,eAAgBD,EAAUE,YAC9CL,EAAKM,gBAAgB,eAAgBH,EAAU,G,CAO3C,eAAAI,GACNlB,KAAKmB,WAAanB,KAAKmB,S,CAGzB,gBAAAC,GACE,GAAIpB,KAAKqB,YAAa,CACpBC,OAAOC,iBAAiB,aAAcvB,KAAKJ,WAAW4B,KAAKxB,OAC3DA,KAAKJ,Y,EAIT,oBAAA6B,GACEH,OAAOI,oBAAoB,aAAc1B,KAAKJ,W,CAGhD,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACX,UAAWnB,KAAKmB,WACpBS,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,QAASC,EAAcC,UACvBC,KAAMnC,KAAKmB,UAAY,aAAe,eACtCiB,QAASpC,KAAKkB,gBAAgBM,KAAKxB,OAAK,WAI1C4B,EAAA,OAAAE,IAAA,2CAAKO,IAAMC,GAAQtC,KAAKC,IAAMqC,GAC5BV,EAAA,QAAAE,IAAA,8C","ignoreList":[]}