@zanichelli/albe-web-components 19.1.1 → 19.1.2-RC2
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.
- package/dist/cjs/z-book-card-app.cjs.entry.js +1 -1
- package/dist/cjs/z-book-card-app.cjs.entry.js.map +1 -1
- package/dist/cjs/z-book-card.cjs.entry.js +1 -1
- package/dist/cjs/z-book-card.cjs.entry.js.map +1 -1
- package/dist/cjs/z-select.cjs.entry.js +75 -41
- package/dist/cjs/z-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-select/index.js +75 -41
- package/dist/collection/components/z-select/index.js.map +1 -1
- package/dist/collection/tokens/typography.css +2 -2
- package/dist/components/z-book-card-app.js +1 -1
- package/dist/components/z-book-card-app.js.map +1 -1
- package/dist/components/z-book-card.js +1 -1
- package/dist/components/z-book-card.js.map +1 -1
- package/dist/components/z-select.js +75 -41
- package/dist/components/z-select.js.map +1 -1
- package/dist/esm/z-book-card-app.entry.js +1 -1
- package/dist/esm/z-book-card-app.entry.js.map +1 -1
- package/dist/esm/z-book-card.entry.js +1 -1
- package/dist/esm/z-book-card.entry.js.map +1 -1
- package/dist/esm/z-select.entry.js +75 -41
- package/dist/esm/z-select.entry.js.map +1 -1
- package/dist/web-components-library/p-1fd1cf02.entry.js +2 -0
- package/dist/web-components-library/p-1fd1cf02.entry.js.map +1 -0
- package/dist/web-components-library/p-2612e3a2.entry.js +2 -0
- package/dist/web-components-library/p-2612e3a2.entry.js.map +1 -0
- package/{www/build/p-9bb3b009.entry.js → dist/web-components-library/p-c4a411b5.entry.js} +2 -2
- package/dist/web-components-library/p-c4a411b5.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.css +2 -2
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +3 -2
- package/www/build/p-1fd1cf02.entry.js +2 -0
- package/www/build/p-1fd1cf02.entry.js.map +1 -0
- package/www/build/p-2612e3a2.entry.js +2 -0
- package/www/build/p-2612e3a2.entry.js.map +1 -0
- package/www/build/{p-9e5b7f0d.js → p-ae04e5fb.js} +1 -1
- package/www/build/{p-bb61a89a.css → p-b5b5dae5.css} +2 -2
- package/{dist/web-components-library/p-9bb3b009.entry.js → www/build/p-c4a411b5.entry.js} +2 -2
- package/www/build/p-c4a411b5.entry.js.map +1 -0
- package/www/build/web-components-library.css +2 -2
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-8d06bc1b.entry.js +0 -2
- package/dist/web-components-library/p-8d06bc1b.entry.js.map +0 -1
- package/dist/web-components-library/p-9bb3b009.entry.js.map +0 -1
- package/dist/web-components-library/p-a0bfe6f8.entry.js +0 -2
- package/dist/web-components-library/p-a0bfe6f8.entry.js.map +0 -1
- package/www/build/p-8d06bc1b.entry.js +0 -2
- package/www/build/p-8d06bc1b.entry.js.map +0 -1
- package/www/build/p-9bb3b009.entry.js.map +0 -1
- package/www/build/p-a0bfe6f8.entry.js +0 -2
- package/www/build/p-a0bfe6f8.entry.js.map +0 -1
|
@@ -11,7 +11,7 @@ const ZBookCardAppStyle0 = stylesCss$1;
|
|
|
11
11
|
const stylesCss = "button.z-link{padding:0;border:0;margin:0;background-color:transparent}a.z-link,button.z-link{display:inline-flex;cursor:pointer;font-family:var(--font-family-sans);line-height:inherit;text-decoration:none}a.z-link.z-link-icon,button.z-link.z-link-icon{--z-icon-width:1.125em;--z-icon-height:1.125em;align-items:center;column-gap:0.5em}a.z-link.z-link-sb,button.z-link.z-link-sb{font-weight:var(--font-sb)}a.z-link.z-link-underline,button.z-link.z-link-underline{text-decoration:underline}a.z-link:hover,button.z-link:hover,a.z-link:focus-visible,button.z-link:focus-visible,a.z-link:active,button.z-link:active{text-decoration:underline}a.z-link:focus-visible,button.z-link:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}a.z-link.z-link-disabled,button.z-link.z-link-disabled{box-shadow:none;color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);outline:none;pointer-events:none;text-decoration:none}a.z-link,button.z-link,a.z-link.z-link-active,button.z-link.z-link-active,a.z-link:hover,button.z-link:hover,a.z-link.z-link-active:hover,button.z-link.z-link-active:hover,a.z-link:focus-visible,button.z-link:focus-visible,a.z-link.z-link-active:focus-visible,button.z-link.z-link-active:focus-visible,a.z-link:active,button.z-link:active,a.z-link.z-link-active:active,button.z-link.z-link-active:active,a.z-link:visited,button.z-link:visited,a.z-link.z-link-active:visited,button.z-link.z-link-active:visited{color:var(--color-text-link-default);fill:var(--color-text-link-default)}a.z-link.z-link-blue,button.z-link.z-link-blue,a.z-link.z-link-blue.z-link-active,button.z-link.z-link-blue.z-link-active{color:var(--color-text-link-blue);fill:var(--color-text-link-blue)}a.z-link.z-link-red,button.z-link.z-link-red,a.z-link.z-link-red.z-link-active,button.z-link.z-link-red.z-link-active{color:var(--color-text-link-red);fill:var(--color-text-link-red)}a.z-link.z-link-inverse,button.z-link.z-link-inverse,a.z-link.z-link-inverse.z-link-active,button.z-link.z-link-inverse.z-link-active{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:hover,button.z-link.z-link-blue:hover{color:var(--color-text-link-blue-hover);fill:var(--color-text-link-blue-hover)}a.z-link.z-link-red:hover,button.z-link.z-link-red:hover{color:var(--color-text-link-red-hover);fill:var(--color-text-link-red-hover)}a.z-link.z-link-inverse:hover,button.z-link.z-link-inverse:hover{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:active,button.z-link.z-link-blue:active,a.z-link.z-link-blue:focus-visible,button.z-link.z-link-blue:focus-visible{color:var(--color-text-link-blue-active);fill:var(--color-text-link-blue-active)}a.z-link.z-link-red:active,button.z-link.z-link-red:active,a.z-link.z-link-red:focus-visible,button.z-link.z-link-red:focus-visible{color:var(--color-text-link-red-active);fill:var(--color-text-link-red-active)}a.z-link.z-link-inverse:active,button.z-link.z-link-inverse:active,a.z-link.z-link-inverse:focus-visible,button.z-link.z-link-inverse:focus-visible{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:visited,button.z-link.z-link-blue:visited{color:var(--color-text-link-blue-visited);fill:var(--color-text-link-blue-visited)}a.z-link.z-link-red:visited,button.z-link.z-link-red:visited{color:var(--color-text-link-red-visited);fill:var(--color-text-link-red-visited)}a.z-link.z-link-inverse:visited,button.z-link.z-link-inverse:visited{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}";
|
|
12
12
|
const ZBookCardAppStyle1 = stylesCss;
|
|
13
13
|
|
|
14
|
-
const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
|
|
14
|
+
const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
|
|
15
15
|
const ZBookCardAppStyle2 = typographyCss;
|
|
16
16
|
|
|
17
17
|
const ZBookCardApp = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-book-card-app.entry.cjs.js","mappings":";;;;;;;AAAA,MAAMA,WAAS,GAAG,ksCAAksC,CAAC;AACrtC,2BAAeA,WAAS;;ACDxB,MAAM,SAAS,GAAG,ygHAAygH,CAAC;AAC5hH,2BAAe,SAAS;;ACDxB,MAAM,aAAa,GAAG,u8XAAu8X,CAAC;AAC99X,2BAAe,aAAa;;MCYf,YAAY;;;;;;;mBAyBhB,IAAI;;;IAYH,YAAY;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAOC,kBAAM,KAAK,EAAC,KAAK,WAAY,CAAC;SACtC;QAED,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACEA,oEACEA,gEACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,SAAS,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,MAAM,EAAC,QAAQ,IAEd,IAAI,CAAC,IAAI,KACRA,kEACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,GAAG,EAAC,EAAE,GACN,CACH,EACDA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,IAAI,CACN,CACJ,EACH,IAAI,CAAC,IAAI,KACRA,4EACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAEC,mBAAW,CAAC,OAAO,EACzB,QAAQ,EAAEC,0BAAkB,CAAC,SAAS,EACtC,KAAK,EAAC,aAAa,IAEnBF,oEAAM,IAAI,CAAC,IAAI,CAAO,CACR,CACjB,EACDA,gEACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,SAAS,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,MAAM,EAAC,QAAQ,IAEfA,qEACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,sBAAsB,GACnB,CACR,CACA,EACN;KACH;;;;;;;","names":["stylesCss","h","ControlSize","InfoRevealPosition"],"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-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {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"],"version":3}
|
|
1
|
+
{"file":"z-book-card-app.entry.cjs.js","mappings":";;;;;;;AAAA,MAAMA,WAAS,GAAG,ksCAAksC,CAAC;AACrtC,2BAAeA,WAAS;;ACDxB,MAAM,SAAS,GAAG,ygHAAygH,CAAC;AAC5hH,2BAAe,SAAS;;ACDxB,MAAM,aAAa,GAAG,q8XAAq8X,CAAC;AAC59X,2BAAe,aAAa;;MCYf,YAAY;;;;;;;mBAyBhB,IAAI;;;IAYH,YAAY;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAOC,kBAAM,KAAK,EAAC,KAAK,WAAY,CAAC;SACtC;QAED,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACEA,oEACEA,gEACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,SAAS,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,MAAM,EAAC,QAAQ,IAEd,IAAI,CAAC,IAAI,KACRA,kEACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,GAAG,EAAC,EAAE,GACN,CACH,EACDA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,IAAI,CACN,CACJ,EACH,IAAI,CAAC,IAAI,KACRA,4EACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAEC,mBAAW,CAAC,OAAO,EACzB,QAAQ,EAAEC,0BAAkB,CAAC,SAAS,EACtC,KAAK,EAAC,aAAa,IAEnBF,oEAAM,IAAI,CAAC,IAAI,CAAO,CACR,CACjB,EACDA,gEACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,SAAS,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,MAAM,EAAC,QAAQ,IAEfA,qEACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,sBAAsB,GACnB,CACR,CACA,EACN;KACH;;;;;;;","names":["stylesCss","h","ControlSize","InfoRevealPosition"],"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-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","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"],"version":3}
|
|
@@ -8,7 +8,7 @@ const index$1 = require('./index-97a4c18d.js');
|
|
|
8
8
|
const stylesCss$1 = ":host{--z-book-card-portrait-cover-height:378px;--z-book-card-title-lines:2;--z-book-card-title-word-break:initial;--z-book-card-subtitle-lines:1;--z-book-card-subtitle-word-break:break-all;--z-book-card-authors-lines:1;--z-book-card-authors-word-break:break-all;display:flex;width:304px;box-sizing:border-box;flex-direction:column;border:solid var(--border-size-medium) var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-default-text);font-family:var(--font-family-sans)}:host,*{box-sizing:border-box}.main-content{display:flex;height:100%;flex-direction:column;padding:var(--space-unit);gap:var(--space-unit)}.main-content .cover{position:relative;display:flex;overflow:hidden;align-items:flex-end;border-radius:var(--border-radius)}.main-content .cover z-book-cover{--z-book-cover-height:var(--z-book-card-portrait-cover-height)}.main-content a.cover:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.main-content .card-info{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:var(--space-unit)}.main-content .card-info .top{display:flex;flex-direction:column;gap:calc(var(--space-unit) * 2)}.main-content .card-info .top ::slotted([slot=\"tags\"]){display:flex;flex-wrap:wrap;gap:var(--space-unit)}.main-content .card-info .top ::slotted([slot=\"data\"]){display:flex;justify-content:space-between}.main-content .card-info .top .ellipsis{display:-webkit-box;overflow:hidden;height:1.4rem;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;line-height:1.4rem;text-overflow:ellipsis;word-break:break-all}.main-content .card-info .top .ellipsis.opera-title{height:auto;max-height:calc(1.5rem * var(--z-book-card-title-lines));-webkit-line-clamp:var(--z-book-card-title-lines);line-clamp:var(--z-book-card-title-lines);line-height:1.5rem;word-break:var(--z-book-card-title-word-break)}.main-content .card-info .top .ellipsis.volume-title{height:auto;max-height:calc(1.4rem * var(--z-book-card-subtitle-lines));-webkit-line-clamp:var(--z-book-card-subtitle-lines);line-clamp:var(--z-book-card-subtitle-lines);line-height:1.4rem;word-break:var(--z-book-card-subtitle-word-break)}.main-content .card-info .top .ellipsis.authors{height:auto;max-height:calc(1.4rem * var(--z-book-card-authors-lines));-webkit-line-clamp:var(--z-book-card-authors-lines);line-clamp:var(--z-book-card-authors-lines);line-height:1.4rem;word-break:var(--z-book-card-authors-word-break)}.main-content .card-info .top .opera-title *{all:unset}.main-content .cta-wrapper{display:flex;justify-content:space-between;gap:calc(var(--space-unit) / 2)}.main-content .card-info .top .link-chip-wrapper{display:flex;justify-content:space-between}.main-content .card-info .bottom .ebook{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--space-unit);background-color:var(--color-primary02);border-radius:var(--border-radius);gap:var(--space-unit)}.main-content .card-info .bottom .ebook .app-name{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) 0;font-family:var(--font-family-serif);gap:calc(var(--space-unit) / 2)}.main-content .card-info .bottom .ebook .app-name .ebook-logo{width:1.5rem;height:1.5rem;content:url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}:host([variant=\"landscape\"]){width:637px;min-height:max(332px, 20.75rem);padding:0}:host([variant=\"landscape\"]) .main-content{min-height:max(332px, 20.75rem);flex-direction:row;padding:calc(var(--space-unit) * 2);gap:calc(var(--space-unit) * 2)}:host([variant=\"landscape\"]) .main-content .cover z-book-cover{--z-book-cover-height:300px}:host([variant=\"landscape\"]) .main-content .card-info,:host([variant=\"landscape\"]) .main-content .card-info .top{gap:calc(var(--space-unit) / 2)}@media (max-width: 767px){:host([variant=\"portrait\"]){width:100%;max-width:400px}}";
|
|
9
9
|
const ZBookCardStyle0 = stylesCss$1;
|
|
10
10
|
|
|
11
|
-
const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
|
|
11
|
+
const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
|
|
12
12
|
const ZBookCardStyle1 = typographyCss;
|
|
13
13
|
|
|
14
14
|
const stylesCss = "button.z-link{padding:0;border:0;margin:0;background-color:transparent}a.z-link,button.z-link{display:inline-flex;cursor:pointer;font-family:var(--font-family-sans);line-height:inherit;text-decoration:none}a.z-link.z-link-icon,button.z-link.z-link-icon{--z-icon-width:1.125em;--z-icon-height:1.125em;align-items:center;column-gap:0.5em}a.z-link.z-link-sb,button.z-link.z-link-sb{font-weight:var(--font-sb)}a.z-link.z-link-underline,button.z-link.z-link-underline{text-decoration:underline}a.z-link:hover,button.z-link:hover,a.z-link:focus-visible,button.z-link:focus-visible,a.z-link:active,button.z-link:active{text-decoration:underline}a.z-link:focus-visible,button.z-link:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}a.z-link.z-link-disabled,button.z-link.z-link-disabled{box-shadow:none;color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);outline:none;pointer-events:none;text-decoration:none}a.z-link,button.z-link,a.z-link.z-link-active,button.z-link.z-link-active,a.z-link:hover,button.z-link:hover,a.z-link.z-link-active:hover,button.z-link.z-link-active:hover,a.z-link:focus-visible,button.z-link:focus-visible,a.z-link.z-link-active:focus-visible,button.z-link.z-link-active:focus-visible,a.z-link:active,button.z-link:active,a.z-link.z-link-active:active,button.z-link.z-link-active:active,a.z-link:visited,button.z-link:visited,a.z-link.z-link-active:visited,button.z-link.z-link-active:visited{color:var(--color-text-link-default);fill:var(--color-text-link-default)}a.z-link.z-link-blue,button.z-link.z-link-blue,a.z-link.z-link-blue.z-link-active,button.z-link.z-link-blue.z-link-active{color:var(--color-text-link-blue);fill:var(--color-text-link-blue)}a.z-link.z-link-red,button.z-link.z-link-red,a.z-link.z-link-red.z-link-active,button.z-link.z-link-red.z-link-active{color:var(--color-text-link-red);fill:var(--color-text-link-red)}a.z-link.z-link-inverse,button.z-link.z-link-inverse,a.z-link.z-link-inverse.z-link-active,button.z-link.z-link-inverse.z-link-active{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:hover,button.z-link.z-link-blue:hover{color:var(--color-text-link-blue-hover);fill:var(--color-text-link-blue-hover)}a.z-link.z-link-red:hover,button.z-link.z-link-red:hover{color:var(--color-text-link-red-hover);fill:var(--color-text-link-red-hover)}a.z-link.z-link-inverse:hover,button.z-link.z-link-inverse:hover{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:active,button.z-link.z-link-blue:active,a.z-link.z-link-blue:focus-visible,button.z-link.z-link-blue:focus-visible{color:var(--color-text-link-blue-active);fill:var(--color-text-link-blue-active)}a.z-link.z-link-red:active,button.z-link.z-link-red:active,a.z-link.z-link-red:focus-visible,button.z-link.z-link-red:focus-visible{color:var(--color-text-link-red-active);fill:var(--color-text-link-red-active)}a.z-link.z-link-inverse:active,button.z-link.z-link-inverse:active,a.z-link.z-link-inverse:focus-visible,button.z-link.z-link-inverse:focus-visible{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:visited,button.z-link.z-link-blue:visited{color:var(--color-text-link-blue-visited);fill:var(--color-text-link-blue-visited)}a.z-link.z-link-red:visited,button.z-link.z-link-red:visited{color:var(--color-text-link-red-visited);fill:var(--color-text-link-red-visited)}a.z-link.z-link-inverse:visited,button.z-link.z-link-inverse:visited{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-book-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAMA,WAAS,GAAG,45KAA45K,CAAC;AAC/6K,wBAAeA,WAAS;;ACDxB,MAAM,aAAa,GAAG,u8XAAu8X,CAAC;AAC99X,wBAAe,aAAa;;ACD5B,MAAM,SAAS,GAAG,ygHAAygH,CAAC;AAC5hH,wBAAe,SAAS;;MCsBX,SAAS;;;;;;uBAKOC,uBAAe,CAAC,QAAQ;;;;;;yBAwBvC,EAAE;;;0BAYD,QAAQ;;iCAQD,KAAK;;;IAkBjB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAEO,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAEO,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAEO,WAAW;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;QAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ;cAC5B;gBACE,IAAI,EAAE,IAAI,CAAC,QAAQ;gBACnB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE;gBACpC,MAAM,EAAE,IAAI,CAAC,UAAU;aACxB;cACD,EAAE,CAAC;QAEP,QACEC,QAAC,QAAQ,kBACP,KAAK,EAAC,OAAO,IACT,UAAU,GAEdA,0BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,OAAO,KAAKD,uBAAe,CAAC,QAAQ,IAE7EC,kBACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,cAAc,GACb,CACK,CACN,EACX;KACH;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,IAAI,CAAC;SACb;QAED,QACEA,iBACE,KAAK,EAAC,sBAAsB,sBACX,MAAM,IAEtB,IAAI,CAAC,IAAI,CACN,EACN;KACH;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,IAAI,CAAC;SACb;QAED,QACEA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBACE,KAAK,EAAC,yBAAyB,sBACd,QAAQ,IAExB,IAAI,CAAC,OAAO,CACT,EACL,IAAI,CAAC,OAAO,KAAKD,uBAAe,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CACrE,EACN;KACH;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY;cAC3B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,YAAY,GAAG;cACjE,IAAI,CAAC,UAAU,CAAC;QAEpB,MAAM,UAAU,IACdC,iBACE,KAAK,EAAC,gCAAgC,EACtC,SAAS,EAAE,KAAK,GAChB,CACH,CAAC;QAEF,QACEA,iBAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,QAAQ,IACZA,eACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,MAAM,EAAE,IAAI,CAAC,UAAU,IAEtB,UAAU,CACT,KAEJ,UAAU,CACX,EACA,IAAI,CAAC,OAAO,KAAKD,uBAAe,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CACpE,EACN;KACH;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QAED,OAAOC,iBAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,WAAW,CAAO,CAAC;KAC3E;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,IAAI,CAAC;SACb;QAED,QACEA,iBACE,KAAK,EAAC,yBAAyB,sBACb,QAAQ,IAAI,CAAC,SAAS,EAAE,IAEzC,IAAI,CAAC,IAAI,OAAG,IAAI,CAAC,SAAS,GAAGA,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,SAAS,CAAQ,GAAG,IAAI,CAC7E,EACN;KACH;IAEO,WAAW;QACjB,QACEA,iBAAK,KAAK,EAAC,OAAO,IAChBA,iBAAK,KAAK,EAAC,UAAU,IACnBA,iBACE,KAAK,EAAC,YAAY,iBACN,MAAM,GAClB,EACFA,iBAAK,KAAK,EAAC,WAAW,gBAAgB,CAClC,EACNA,sBACE,IAAI,EAAEC,mBAAW,CAAC,OAAO,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,QAAQ,EAAC,MAAM,sBACG,iBAAiB,IAAI,CAAC,UAAU,eAAe,kBAGxD,CACP,EACN;KACH;IAEO,aAAa;QACnB,OAAOD,kBAAM,IAAI,EAAC,KAAK,GAAQ,CAAC;KACjC;IAED,MAAM;QACJ,QACEA,QAACE,UAAI,uDACHF,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,WAAW,EAAE,EACnBA,kEAAK,KAAK,EAAC,WAAW,IACpBA,kEAAK,KAAK,EAAC,KAAK,IACdA,oEACG,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,UAAU,EAAE,CACd,EACNA,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzBA,mEAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACNA,mEAAM,IAAI,EAAC,OAAO,IAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAIA,kEAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAAQ,CACzF,CACF,EACNA,mEAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,EACP;KACH;;;;;;;","names":["stylesCss","BookCardVariant","h","ControlSize","Host"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n.main-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n.main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: flex-end;\n border-radius: var(--border-radius);\n}\n\n.main-content .cover z-book-cover {\n --z-book-cover-height: var(--z-book-card-portrait-cover-height);\n}\n\n.main-content a.cover:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n.main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n.main-content .card-info .top .ellipsis.opera-title {\n height: auto;\n max-height: calc(1.5rem * var(--z-book-card-title-lines));\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n.main-content .card-info .top .ellipsis.volume-title {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n.main-content .card-info .top .ellipsis.authors {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-authors-lines));\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n.main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n.main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .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.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.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: 637px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover z-book-cover {\n --z-book-cover-height: 300px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info,\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/**\n * @slot cta - Top right cta (e.g. bookmark icon)\n * @slot ebook - As default, it shows laZ ebook link\n * @slot tags - Tags section, default empty\n * @slot data - External link and pill, default empty\n * @slot apps - List of card-related apps, default empty\n * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot\n * @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\", \"../../css-components/z-link/styles.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] Link to the ebook resource. Creates a link also around the cover and title. */\n @Prop()\n ebookUrl?: string;\n\n /** [optional] Value for the `target` attribute of the links created by `ebookUrl` prop. */\n @Prop()\n linkTarget = \"_blank\";\n\n /** [optional] Fallback cover URL. */\n @Prop()\n fallbackCover?: string;\n\n /** Whether to show a stack of covers to represent multiple books (only for `portrait` variant). */\n @Prop()\n hasMultipleCovers = false;\n\n /** [optional] Set a specific heading level as html tag for the title. */\n @Prop()\n titleHtmlTag?: string;\n\n /** click on ebook link */\n @Event()\n ebookClick: EventEmitter;\n\n /** click on cover link */\n @Event()\n coverClick: EventEmitter;\n\n /** click on title link */\n @Event()\n titleClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitCoverClick(): void {\n this.coverClick.emit();\n }\n\n private emitTitleClick(): void {\n this.titleClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n const CoverTag = this.ebookUrl ? \"a\" : \"div\";\n const coverAttrs = this.ebookUrl\n ? {\n href: this.ebookUrl,\n onClick: () => this.emitCoverClick(),\n target: this.linkTarget,\n }\n : {};\n\n return (\n <CoverTag\n class=\"cover\"\n {...coverAttrs}\n >\n <z-book-cover\n cover={this.cover}\n fallbackCover={this.fallbackCover}\n multiple={this.hasMultipleCovers && this.variant === BookCardVariant.PORTRAIT}\n >\n <slot\n name=\"coverOverlay\"\n slot=\"coverOverlay\"\n ></slot>\n </z-book-cover>\n </CoverTag>\n );\n }\n\n private renderYear(): null | HTMLDivElement {\n if (!this.year) {\n return null;\n }\n\n return (\n <div\n class=\"year ellipsis body-4\"\n aria-description=\"anno\"\n >\n {this.year}\n </div>\n );\n }\n\n private renderAuthors(): null | HTMLDivElement {\n if (!this.authors) {\n return null;\n }\n\n return (\n <div class=\"cta-wrapper\">\n <div\n class=\"authors ellipsis body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.titleHtmlTag\n ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n : this.operaTitle;\n\n const operaTitle = (\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n );\n\n return (\n <div class=\"cta-wrapper\">\n {this.ebookUrl ? (\n <a\n class=\"z-link\"\n href={this.ebookUrl}\n onClick={() => this.emitTitleClick()}\n target={this.linkTarget}\n >\n {operaTitle}\n </a>\n ) : (\n operaTitle\n )}\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null | HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null | HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">laZ Ebook</div>\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target={this.linkTarget}\n onClick={() => this.emitEbookClick()}\n htmlrole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"z-book-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAMA,WAAS,GAAG,45KAA45K,CAAC;AAC/6K,wBAAeA,WAAS;;ACDxB,MAAM,aAAa,GAAG,q8XAAq8X,CAAC;AAC59X,wBAAe,aAAa;;ACD5B,MAAM,SAAS,GAAG,ygHAAygH,CAAC;AAC5hH,wBAAe,SAAS;;MCsBX,SAAS;;;;;;uBAKOC,uBAAe,CAAC,QAAQ;;;;;;yBAwBvC,EAAE;;;0BAYD,QAAQ;;iCAQD,KAAK;;;IAkBjB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAEO,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAEO,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAEO,WAAW;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;QAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ;cAC5B;gBACE,IAAI,EAAE,IAAI,CAAC,QAAQ;gBACnB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE;gBACpC,MAAM,EAAE,IAAI,CAAC,UAAU;aACxB;cACD,EAAE,CAAC;QAEP,QACEC,QAAC,QAAQ,kBACP,KAAK,EAAC,OAAO,IACT,UAAU,GAEdA,0BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,OAAO,KAAKD,uBAAe,CAAC,QAAQ,IAE7EC,kBACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,cAAc,GACb,CACK,CACN,EACX;KACH;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,IAAI,CAAC;SACb;QAED,QACEA,iBACE,KAAK,EAAC,sBAAsB,sBACX,MAAM,IAEtB,IAAI,CAAC,IAAI,CACN,EACN;KACH;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,IAAI,CAAC;SACb;QAED,QACEA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBACE,KAAK,EAAC,yBAAyB,sBACd,QAAQ,IAExB,IAAI,CAAC,OAAO,CACT,EACL,IAAI,CAAC,OAAO,KAAKD,uBAAe,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CACrE,EACN;KACH;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY;cAC3B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,YAAY,GAAG;cACjE,IAAI,CAAC,UAAU,CAAC;QAEpB,MAAM,UAAU,IACdC,iBACE,KAAK,EAAC,gCAAgC,EACtC,SAAS,EAAE,KAAK,GAChB,CACH,CAAC;QAEF,QACEA,iBAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,QAAQ,IACZA,eACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,MAAM,EAAE,IAAI,CAAC,UAAU,IAEtB,UAAU,CACT,KAEJ,UAAU,CACX,EACA,IAAI,CAAC,OAAO,KAAKD,uBAAe,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CACpE,EACN;KACH;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QAED,OAAOC,iBAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,WAAW,CAAO,CAAC;KAC3E;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,IAAI,CAAC;SACb;QAED,QACEA,iBACE,KAAK,EAAC,yBAAyB,sBACb,QAAQ,IAAI,CAAC,SAAS,EAAE,IAEzC,IAAI,CAAC,IAAI,OAAG,IAAI,CAAC,SAAS,GAAGA,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,SAAS,CAAQ,GAAG,IAAI,CAC7E,EACN;KACH;IAEO,WAAW;QACjB,QACEA,iBAAK,KAAK,EAAC,OAAO,IAChBA,iBAAK,KAAK,EAAC,UAAU,IACnBA,iBACE,KAAK,EAAC,YAAY,iBACN,MAAM,GAClB,EACFA,iBAAK,KAAK,EAAC,WAAW,gBAAgB,CAClC,EACNA,sBACE,IAAI,EAAEC,mBAAW,CAAC,OAAO,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,QAAQ,EAAC,MAAM,sBACG,iBAAiB,IAAI,CAAC,UAAU,eAAe,kBAGxD,CACP,EACN;KACH;IAEO,aAAa;QACnB,OAAOD,kBAAM,IAAI,EAAC,KAAK,GAAQ,CAAC;KACjC;IAED,MAAM;QACJ,QACEA,QAACE,UAAI,uDACHF,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,WAAW,EAAE,EACnBA,kEAAK,KAAK,EAAC,WAAW,IACpBA,kEAAK,KAAK,EAAC,KAAK,IACdA,oEACG,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,UAAU,EAAE,CACd,EACNA,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzBA,mEAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACNA,mEAAM,IAAI,EAAC,OAAO,IAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAIA,kEAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAAQ,CACzF,CACF,EACNA,mEAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,EACP;KACH;;;;;;;","names":["stylesCss","BookCardVariant","h","ControlSize","Host"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n.main-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n.main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: flex-end;\n border-radius: var(--border-radius);\n}\n\n.main-content .cover z-book-cover {\n --z-book-cover-height: var(--z-book-card-portrait-cover-height);\n}\n\n.main-content a.cover:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n.main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n.main-content .card-info .top .ellipsis.opera-title {\n height: auto;\n max-height: calc(1.5rem * var(--z-book-card-title-lines));\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n.main-content .card-info .top .ellipsis.volume-title {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n.main-content .card-info .top .ellipsis.authors {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-authors-lines));\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n.main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n.main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .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.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.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: 637px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover z-book-cover {\n --z-book-cover-height: 300px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info,\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/**\n * @slot cta - Top right cta (e.g. bookmark icon)\n * @slot ebook - As default, it shows laZ ebook link\n * @slot tags - Tags section, default empty\n * @slot data - External link and pill, default empty\n * @slot apps - List of card-related apps, default empty\n * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot\n * @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\", \"../../css-components/z-link/styles.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] Link to the ebook resource. Creates a link also around the cover and title. */\n @Prop()\n ebookUrl?: string;\n\n /** [optional] Value for the `target` attribute of the links created by `ebookUrl` prop. */\n @Prop()\n linkTarget = \"_blank\";\n\n /** [optional] Fallback cover URL. */\n @Prop()\n fallbackCover?: string;\n\n /** Whether to show a stack of covers to represent multiple books (only for `portrait` variant). */\n @Prop()\n hasMultipleCovers = false;\n\n /** [optional] Set a specific heading level as html tag for the title. */\n @Prop()\n titleHtmlTag?: string;\n\n /** click on ebook link */\n @Event()\n ebookClick: EventEmitter;\n\n /** click on cover link */\n @Event()\n coverClick: EventEmitter;\n\n /** click on title link */\n @Event()\n titleClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitCoverClick(): void {\n this.coverClick.emit();\n }\n\n private emitTitleClick(): void {\n this.titleClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n const CoverTag = this.ebookUrl ? \"a\" : \"div\";\n const coverAttrs = this.ebookUrl\n ? {\n href: this.ebookUrl,\n onClick: () => this.emitCoverClick(),\n target: this.linkTarget,\n }\n : {};\n\n return (\n <CoverTag\n class=\"cover\"\n {...coverAttrs}\n >\n <z-book-cover\n cover={this.cover}\n fallbackCover={this.fallbackCover}\n multiple={this.hasMultipleCovers && this.variant === BookCardVariant.PORTRAIT}\n >\n <slot\n name=\"coverOverlay\"\n slot=\"coverOverlay\"\n ></slot>\n </z-book-cover>\n </CoverTag>\n );\n }\n\n private renderYear(): null | HTMLDivElement {\n if (!this.year) {\n return null;\n }\n\n return (\n <div\n class=\"year ellipsis body-4\"\n aria-description=\"anno\"\n >\n {this.year}\n </div>\n );\n }\n\n private renderAuthors(): null | HTMLDivElement {\n if (!this.authors) {\n return null;\n }\n\n return (\n <div class=\"cta-wrapper\">\n <div\n class=\"authors ellipsis body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.titleHtmlTag\n ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n : this.operaTitle;\n\n const operaTitle = (\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n );\n\n return (\n <div class=\"cta-wrapper\">\n {this.ebookUrl ? (\n <a\n class=\"z-link\"\n href={this.ebookUrl}\n onClick={() => this.emitTitleClick()}\n target={this.linkTarget}\n >\n {operaTitle}\n </a>\n ) : (\n operaTitle\n )}\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null | HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null | HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">laZ Ebook</div>\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target={this.linkTarget}\n onClick={() => this.emitEbookClick()}\n htmlrole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|