npm - @zanichelli/albe-web-components - Versions diffs - 18.7.6-RC1 → 18.7.6 - Mend

@zanichelli/albe-web-components 18.7.6-RC1 → 18.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/components/z-result-card.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { i as img } from './placeholder-cover.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ":host{display:flex;overflow:hidden;min-width:0;height:9.875rem;padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);background-color:var(--color-white);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans)}.z-cover-container{position:relative;display:flex;width:119px;height:158px;align-items:center;justify-items:center}.z-cover-stack{width:100%;height:100%}.z-cover-shadow,.z-cover-img{width:117px;height:156px}.z-cover-container.has-multiple .z-cover-shadow,.z-cover-container.has-multiple .z-cover-img{width:105px;height:140px}.z-cover-shadow{position:absolute;z-index:1;background-color:var(--color-white)}.z-shadow-1{z-index:0;top:var(--space-unit);right:6px;border:var(--border-size-small) solid black}.z-shadow-2{z-index:0;top:calc(var(--space-unit) * 2);right:12px;border:var(--border-size-small) solid black}.z-cover-img{position:absolute;z-index:0;top:0;right:0;display:flex;align-items:start;justify-content:center;border:var(--border-size-small) solid black;background-color:var(--color-white);object-fit:cover;object-position:left}.z-cover-img>img{max-width:100%;max-height:100%}.z-cover-container.has-multiple .z-cover-img{left:12px}.info-container{display:flex;overflow:hidden;min-width:0;flex:1;flex-direction:column;padding-left:calc(var(--space-unit) * 2)}.authors-label{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);text-overflow:ellipsis;white-space:nowrap}.card-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:2;line-clamp:2;line-height:1.5;word-break:break-word}.card-title>*{all:unset}.card-subtitle{overflow:hidden;color:var(--color-default-text);text-overflow:ellipsis;white-space:nowrap}.card-subtitle.info-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;white-space:normal;word-break:break-word}.tags-container{display:flex;max-width:100%;flex-wrap:wrap;margin-top:calc(var(--space-unit) * 2);gap:var(--space-unit)}.volumes-label{display:flex;flex-grow:1;align-items:end;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){display:flex;height:3.75rem;gap:calc(var(--space-unit) * 1.5)}:host(.info-card) .info-container{padding-left:0}.info-icon-container{padding:var(--space-unit);margin-bottom:calc(var(--space-unit) * 3);background-color:var(--gray50);border-radius:var(--border-size-large)}.card-title.info-title{display:-webkit-box;overflow:hidden;min-width:0;max-width:100%;max-height:2.4em;margin-top:0;margin-bottom:4px;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:1;line-clamp:1;line-height:1.2;word-break:break-word}.info-icon{width:18px;height:18px;color:var(--color-default-text)}:host(:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 768px){.card-title{display:block;overflow:hidden;line-height:normal;text-overflow:ellipsis;white-space:nowrap}}";
+const stylesCss = ":host{display:flex;overflow:hidden;min-width:0;height:9.875rem;padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);background-color:var(--color-white);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans)}.z-cover-container{position:relative;display:flex;width:119px;height:158px;align-items:center;justify-items:center}.z-cover-stack{width:100%;height:100%}.z-cover-shadow,.z-cover-img{width:117px;height:156px}.z-cover-container.has-multiple .z-cover-shadow,.z-cover-container.has-multiple .z-cover-img{width:105px;height:140px}.z-cover-shadow{position:absolute;z-index:1;background-color:var(--color-white)}.z-shadow-1{z-index:0;top:var(--space-unit);right:6px;border:var(--border-size-small) solid black}.z-shadow-2{z-index:0;top:calc(var(--space-unit) * 2);right:12px;border:var(--border-size-small) solid black}.z-cover-img{position:absolute;z-index:0;top:0;right:0;display:flex;align-items:start;justify-content:center;border:var(--border-size-small) solid black;background-color:var(--color-white);object-fit:cover;object-position:left}.z-cover-img>img{max-width:100%;max-height:100%}.z-cover-container.has-multiple .z-cover-img{left:12px}.info-container{display:flex;overflow:hidden;min-width:0;flex:1;flex-direction:column;padding-left:calc(var(--space-unit) * 2)}.authors-label{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);text-overflow:ellipsis;white-space:nowrap}.card-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:2;line-clamp:2;line-height:1.5;word-break:break-word}.card-title>*{all:unset}.card-subtitle{overflow:hidden;color:var(--color-default-text);text-overflow:ellipsis;white-space:nowrap}.card-subtitle.info-card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;white-space:normal;word-break:break-word}.tags-container{display:flex;max-width:100%;flex-wrap:wrap;margin-top:calc(var(--space-unit) * 2);gap:var(--space-unit)}.volumes-label{display:flex;flex-grow:1;align-items:end;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){display:flex;height:3.75rem;gap:calc(var(--space-unit) * 1.5)}:host(.info-card) .info-container{padding-left:0}.info-icon-container{padding:var(--space-unit);margin-bottom:calc(var(--space-unit) * 3);background-color:var(--gray50);border-radius:var(--border-size-large)}.card-title.info-card-title{display:-webkit-box;overflow:hidden;min-width:0;max-width:100%;max-height:2.4em;margin-top:0;margin-bottom:4px;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:1;line-clamp:1;line-height:1.2;word-break:break-word}.info-icon{width:18px;height:18px;color:var(--color-default-text)}:host(:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 768px){.card-title{display:block;overflow:hidden;line-height:normal;text-overflow:ellipsis;white-space:nowrap}}";
 const ZResultCardStyle0 = stylesCss;
 const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends HTMLElement {
@@ -15,8 +15,14 @@ const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends
             this.setTooltipTitle(this.titleRef);
             this.setTooltipTitle(this.subtitleRef);
         };
-        this.renderOperaCard = () => {
+        this.renderTitle = () => {
             const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;
+            return (h("div", { class: { "card-title": true, "info-card-title": this.isInfoCard }, ref: (el) => (this.titleRef = el), innerHTML: title }));
+        };
+        this.renderSubtitle = () => {
+            return (h("span", { class: { "card-subtitle": true, "info-card-subtitle": this.isInfoCard }, ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle));
+        };
+        this.renderOperaCard = () => {
             return (h(Host, { tabIndex: 0 }, h("div", { class: `z-cover-container ${this.hasMultipleCovers ? "has-multiple" : ""}` }, h("div", { class: "z-cover-stack" }, this.hasMultipleCovers && (h("div", null, h("div", { class: "z-cover-shadow z-shadow-2" }), h("div", { class: "z-cover-shadow z-shadow-1" }))), h("div", { class: "z-cover-img" }, h("img", { src: this.cover || this.fallbackCover || img, alt: "", onError: () => {
                     if (this.fallbackCover) {
                         this.cover = this.fallbackCover;
@@ -24,11 +30,10 @@ const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends
                     else {
                         this.cover = img;
                     }
-                } })))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), h("div", { class: "card-title", ref: (el) => (this.titleRef = el), innerHTML: title }), h("span", { class: "card-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
+                } })))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), this.renderTitle(), this.renderSubtitle(), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
         };
         this.renderInfoCard = () => {
-            const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;
-            return (h(Host, { tabIndex: 0, class: "info-card" }, h("div", { class: "info-icon-column" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link", width: 18, height: 18 }))), h("div", { class: "info-container" }, h("span", { class: "card-title info-title", ref: (el) => (this.titleRef = el), innerHTML: title }), h("span", { class: "card-subtitle info-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle))));
+            return (h(Host, { tabIndex: 0, class: "info-card" }, h("div", { class: "info-icon-column" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link", width: 18, height: 18 }))), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));
         };
         this.cardTitle = undefined;
         this.cardSubtitle = undefined;

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

	@@ -1 +1 @@
1	- {"file":"z-result-card.js","mappings":"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","names":["ZResultCard","defaultFallbackCover"],"sources":["src/components/result-card/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/result-card/z-result-card/index.tsx"],"sourcesContent":[":host {\n display: flex;\n overflow: hidden;\n min-width: 0;\n height: 9.875rem;\n padding: var(--space-unit);\n border: var(--border-size-medium) solid var(--color-surface02);\n background-color: var(--color-white);\n border-radius: var(--border-size-large);\n cursor: pointer;\n font-family: var(--font-family-sans);\n}\n\n.z-cover-container {\n position: relative;\n display: flex;\n width: 119px;\n height: 158px;\n align-items: center;\n justify-items: center;\n}\n\n.z-cover-stack {\n width: 100%;\n height: 100%;\n}\n\n/* Base sizes for single cover /\n.z-cover-shadow,\n.z-cover-img {\n width: 117px;\n height: 156px;\n}\n\n/ Scaled sizes for multiple covers /\n.z-cover-container.has-multiple .z-cover-shadow,\n.z-cover-container.has-multiple .z-cover-img {\n width: 105px;\n height: 140px;\n}\n\n.z-cover-shadow {\n position: absolute;\n z-index: 1;\n background-color: var(--color-white);\n}\n\n.z-shadow-1 {\n z-index: 0;\n top: var(--space-unit);\n right: 6px;\n border: var(--border-size-small) solid black;\n}\n\n.z-shadow-2 {\n z-index: 0;\n top: calc(var(--space-unit) 2);\n right: 12px;\n border: var(--border-size-small) solid black;\n}\n\n.z-cover-img {\n position: absolute;\n z-index: 0;\n top: 0;\n right: 0;\n display: flex;\n align-items: start;\n justify-content: center;\n border: var(--border-size-small) solid black;\n background-color: var(--color-white);\n object-fit: cover;\n object-position: left;\n}\n\n.z-cover-img > img {\n max-width: 100%;\n max-height: 100%;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n left: 12px;\n}\n\n.info-container {\n display: flex;\n overflow: hidden;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n padding-left: calc(var(--space-unit) * 2);\n}\n\n.authors-label {\n overflow: hidden;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.card-title {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--font-size-3);\n font-weight: var(--font-bd);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n line-height: 1.5;\n word-break: break-word;\n}\n\n.card-title > * {\n all: unset;\n}\n\n.card-subtitle {\n overflow: hidden;\n color: var(--color-default-text);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.card-subtitle.info-subtitle {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n line-height: 1.2;\n white-space: normal;\n word-break: break-word;\n}\n\n.tags-container {\n display: flex;\n max-width: 100%;\n flex-wrap: wrap;\n margin-top: calc(var(--space-unit) * 2);\n gap: var(--space-unit);\n}\n\n.volumes-label {\n display: flex;\n flex-grow: 1;\n align-items: end;\n color: var(--color-default-text);\n font-size: var(--font-size-1);\n}\n\n/* info-card /\n:host(.info-card) {\n display: flex;\n height: 3.75rem;\n gap: calc(var(--space-unit) 1.5);\n}\n\n:host(.info-card) .info-container {\n padding-left: 0;\n}\n\n.info-icon-container {\n padding: var(--space-unit);\n margin-bottom: calc(var(--space-unit) * 3);\n background-color: var(--gray50);\n border-radius: var(--border-size-large);\n}\n\n.card-title.info-title {\n display: -webkit-box;\n overflow: hidden;\n min-width: 0;\n max-width: 100%;\n max-height: 2.4em;\n margin-top: 0;\n margin-bottom: 4px;\n -webkit-box-orient: vertical;\n font-size: var(--font-size-3);\n font-weight: var(--font-bd);\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.2;\n word-break: break-word;\n}\n\n.info-icon {\n width: 18px;\n height: 18px;\n color: var(--color-default-text);\n}\n\n/* Focus /\n:host(:focus:focus-visible) {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n@media (max-width: 768px) {\n .card-title {\n display: block;\n overflow: hidden;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../../assets/images/png/placeholder-cover.png\";\n\n@Component({\n tag: \"z-result-card\",\n styleUrls: [\"styles.css\"],\n shadow: true,\n})\nexport class ZResultCard {\n @Element() hostElement: HTMLZResultCardElement;\n\n /\n The title of the card.\n /\n @Prop()\n cardTitle: string;\n\n /\n The subtitle of the card.\n /\n @Prop()\n cardSubtitle: string;\n\n /\n The authors of the opera.\n /\n @Prop()\n authors?: string;\n\n /\n The URL of the cover image.\n * This is used to display the cover image of the opera.\n /\n @Prop()\n cover?: string;\n\n /* [optional] Fallback cover URL /\n @Prop()\n fallbackCover?: string;\n\n /\n Indicates whether the card has multiple covers.\n * This is used to apply specific styles when there are multiple covers.\n /\n @Prop()\n hasMultipleCovers = false;\n\n /\n Indicates whether the card is an info page.\n * This can be used to apply specific styles or behaviors for info pages.\n /\n @Prop()\n isInfoCard = false;\n\n /\n [optional]\n * Use for insert heading when needed.\n /\n @Prop()\n titleHtmlTag?: string;\n\n private authorsRef: HTMLElement;\n\n private titleRef: HTMLElement;\n\n private subtitleRef: HTMLElement;\n\n private setTooltipTitle(el: HTMLElement): void {\n if (!el) {\n return;\n }\n\n // Check if element uses line-clamp\n const style = window.getComputedStyle(el);\n const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n let isTruncated;\n if (hasLineClamp) {\n // For elements with line-clamp, check if content height exceeds line-clamp height\n const lineHeight = parseInt(style.lineHeight);\n const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n const maxHeight = lineHeight maxLines;\n\n isTruncated = el.scrollHeight > maxHeight;\n } else {\n // Original check for elements without line-clamp\n isTruncated = el.scrollWidth > el.clientWidth \|\| el.scrollHeight > el.clientHeight;\n }\n\n if (isTruncated) {\n el.setAttribute(\"title\", el.textContent.trim());\n } else {\n el.removeAttribute(\"title\");\n }\n }\n\n componentDidRender(): void {\n this.setTooltipTitle(this.authorsRef);\n this.setTooltipTitle(this.titleRef);\n this.setTooltipTitle(this.subtitleRef);\n }\n\n private resizeHandler = (): void => {\n this.setTooltipTitle(this.authorsRef);\n this.setTooltipTitle(this.titleRef);\n this.setTooltipTitle(this.subtitleRef);\n };\n\n componentDidLoad(): void {\n window.addEventListener(\"resize\", this.resizeHandler);\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"resize\", this.resizeHandler);\n }\n\n private renderOperaCard = (): HTMLZResultCardElement => {\n const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;\n\n return (\n <Host tabIndex={0}>\n <div class={`z-cover-container ${this.hasMultipleCovers ? \"has-multiple\" : \"\"}`}>\n <div class=\"z-cover-stack\">\n {this.hasMultipleCovers && (\n <div>\n <div class=\"z-cover-shadow z-shadow-2\" />\n <div class=\"z-cover-shadow z-shadow-1\" />\n </div>\n )}\n <div class=\"z-cover-img\">\n <img\n src={this.cover \|\| this.fallbackCover \|\| defaultFallbackCover}\n alt=\"\"\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n } else {\n this.cover = defaultFallbackCover;\n }\n }}\n />\n </div>\n </div>\n </div>\n <div class=\"info-container\">\n {this.authors && (\n <span\n class=\"authors-label\"\n ref={(el) => (this.authorsRef = el as HTMLElement)}\n >\n {this.authors}\n </span>\n )}\n <div\n class=\"card-title\"\n ref={(el) => (this.titleRef = el as HTMLElement)}\n innerHTML={title}\n ></div>\n <span\n class=\"card-subtitle\"\n ref={(el) => (this.subtitleRef = el as HTMLElement)}\n >\n {this.cardSubtitle}\n </span>\n <div class=\"tags-container\">\n <slot name=\"tags\"></slot>\n </div>\n <div class=\"volumes-label\">\n <slot name=\"volumes\"></slot>\n </div>\n </div>\n </Host>\n );\n };\n\n private renderInfoCard = (): HTMLZResultCardElement => {\n const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;\n\n return (\n <Host\n tabIndex={0}\n class=\"info-card\"\n >\n <div class=\"info-icon-column\">\n <div class=\"info-icon-container\">\n <z-icon\n class=\"info-icon\"\n name=\"link\"\n width={18}\n height={18}\n />\n </div>\n </div>\n <div class=\"info-container\">\n <span\n class=\"card-title info-title\"\n ref={(el) => (this.titleRef = el as HTMLElement)}\n innerHTML={title}\n ></span>\n <span\n class=\"card-subtitle info-subtitle\"\n ref={(el) => (this.subtitleRef = el as HTMLElement)}\n >\n {this.cardSubtitle}\n </span>\n </div>\n </Host>\n );\n };\n\n render(): HTMLZResultCardElement {\n return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n }\n}\n"],"version":3}
1	+ {"file":"z-result-card.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,ikGAAikG,CAAC;AACplG,0BAAe,SAAS;;MCWXA,aAAW;;;;;QA8Fd,kBAAa,GAAG;YACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACxC,CAAC;QAUM,gBAAW,GAAG;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC;YAEpH,QACE,WACE,KAAK,EAAE,EAAC,YAAY,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAC,EAC/D,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAChD,SAAS,EAAE,KAAK,GAChB,EACF;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,QACE,YACE,KAAK,EAAE,EAAC,eAAe,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,UAAU,EAAC,EACrE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,IAElD,IAAI,CAAC,YAAY,CACb,EACP;SACH,CAAC;QAEM,oBAAe,GAAG;YACxB,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,IACf,WAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,iBAAiB,GAAG,cAAc,GAAG,EAAE,EAAE,IAC7E,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,iBAAiB,KACrB,eACE,WAAK,KAAK,EAAC,2BAA2B,GAAG,EACzC,WAAK,KAAK,EAAC,2BAA2B,GAAG,CACrC,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WACE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,IAAIC,GAAoB,EAC7D,GAAG,EAAC,EAAE,EACN,OAAO,EAAE;oBACP,IAAI,IAAI,CAAC,aAAa,EAAE;wBACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;qBACjC;yBAAM;wBACL,IAAI,CAAC,KAAK,GAAGA,GAAoB,CAAC;qBACnC;iBACF,GACD,CACE,CACF,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,OAAO,KACX,YACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAEjD,IAAI,CAAC,OAAO,CACR,CACR,EACA,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,EACtB,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,QACE,EAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,WAAW,IAEjB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,cACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACE,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,CAClB,CACD,EACP;SACH,CAAC;;;;;;iCApKkB,KAAK;0BAOZ,KAAK;;;IAeV,eAAe,CAAC,EAAe;QACrC,IAAI,CAAC,EAAE,EAAE;YACP,OAAO;SACR;;QAGD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;QAC1C,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,KAAK,MAAM,CAAC;QAE7E,IAAI,WAAW,CAAC;QAChB,IAAI,YAAY,EAAE;;YAEhB,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAC9C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACxE,MAAM,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;YAExC,WAAW,GAAG,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC;SAC3C;aAAM;;YAEL,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;SACpF;QAED,IAAI,WAAW,EAAE;YACf,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;SACjD;aAAM;YACL,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC7B;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxC;IAQD,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACvD;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1D;IAiGD,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;KACzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZResultCard","defaultFallbackCover"],"sources":["src/components/result-card/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/result-card/z-result-card/index.tsx"],"sourcesContent":[":host {\n display: flex;\n overflow: hidden;\n min-width: 0;\n height: 9.875rem;\n padding: var(--space-unit);\n border: var(--border-size-medium) solid var(--color-surface02);\n background-color: var(--color-white);\n border-radius: var(--border-size-large);\n cursor: pointer;\n font-family: var(--font-family-sans);\n}\n\n.z-cover-container {\n position: relative;\n display: flex;\n width: 119px;\n height: 158px;\n align-items: center;\n justify-items: center;\n}\n\n.z-cover-stack {\n width: 100%;\n height: 100%;\n}\n\n/* Base sizes for single cover /\n.z-cover-shadow,\n.z-cover-img {\n width: 117px;\n height: 156px;\n}\n\n/ Scaled sizes for multiple covers /\n.z-cover-container.has-multiple .z-cover-shadow,\n.z-cover-container.has-multiple .z-cover-img {\n width: 105px;\n height: 140px;\n}\n\n.z-cover-shadow {\n position: absolute;\n z-index: 1;\n background-color: var(--color-white);\n}\n\n.z-shadow-1 {\n z-index: 0;\n top: var(--space-unit);\n right: 6px;\n border: var(--border-size-small) solid black;\n}\n\n.z-shadow-2 {\n z-index: 0;\n top: calc(var(--space-unit) 2);\n right: 12px;\n border: var(--border-size-small) solid black;\n}\n\n.z-cover-img {\n position: absolute;\n z-index: 0;\n top: 0;\n right: 0;\n display: flex;\n align-items: start;\n justify-content: center;\n border: var(--border-size-small) solid black;\n background-color: var(--color-white);\n object-fit: cover;\n object-position: left;\n}\n\n.z-cover-img > img {\n max-width: 100%;\n max-height: 100%;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n left: 12px;\n}\n\n.info-container {\n display: flex;\n overflow: hidden;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n padding-left: calc(var(--space-unit) * 2);\n}\n\n.authors-label {\n overflow: hidden;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.card-title {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--font-size-3);\n font-weight: var(--font-bd);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n line-height: 1.5;\n word-break: break-word;\n}\n\n.card-title > * {\n all: unset;\n}\n\n.card-subtitle {\n overflow: hidden;\n color: var(--color-default-text);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.card-subtitle.info-card-subtitle {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n line-height: 1.2;\n white-space: normal;\n word-break: break-word;\n}\n\n.tags-container {\n display: flex;\n max-width: 100%;\n flex-wrap: wrap;\n margin-top: calc(var(--space-unit) * 2);\n gap: var(--space-unit);\n}\n\n.volumes-label {\n display: flex;\n flex-grow: 1;\n align-items: end;\n color: var(--color-default-text);\n font-size: var(--font-size-1);\n}\n\n/* info-card /\n:host(.info-card) {\n display: flex;\n height: 3.75rem;\n gap: calc(var(--space-unit) 1.5);\n}\n\n:host(.info-card) .info-container {\n padding-left: 0;\n}\n\n.info-icon-container {\n padding: var(--space-unit);\n margin-bottom: calc(var(--space-unit) * 3);\n background-color: var(--gray50);\n border-radius: var(--border-size-large);\n}\n\n.card-title.info-card-title {\n display: -webkit-box;\n overflow: hidden;\n min-width: 0;\n max-width: 100%;\n max-height: 2.4em;\n margin-top: 0;\n margin-bottom: 4px;\n -webkit-box-orient: vertical;\n font-size: var(--font-size-3);\n font-weight: var(--font-bd);\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.2;\n word-break: break-word;\n}\n\n.info-icon {\n width: 18px;\n height: 18px;\n color: var(--color-default-text);\n}\n\n/* Focus /\n:host(:focus:focus-visible) {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n@media (max-width: 768px) {\n .card-title {\n display: block;\n overflow: hidden;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../../assets/images/png/placeholder-cover.png\";\n\n/\n @slot tags - slot containing the descriptors for the opera variant\n * @slot volumes - slot containing the volume count to be displayed in the opera variant\n /\n@Component({\n tag: \"z-result-card\",\n styleUrls: [\"styles.css\"],\n shadow: true,\n})\nexport class ZResultCard {\n @Element() hostElement: HTMLZResultCardElement;\n\n /\n The title of the card.\n /\n @Prop()\n cardTitle: string;\n\n /\n The subtitle of the card.\n /\n @Prop()\n cardSubtitle: string;\n\n /\n The authors of the opera.\n /\n @Prop()\n authors?: string;\n\n /\n The URL of the cover image.\n * This is used to display the cover image of the opera.\n /\n @Prop()\n cover?: string;\n\n /* [optional] Fallback cover URL /\n @Prop()\n fallbackCover?: string;\n\n /\n Indicates whether the card has multiple covers.\n * This is used to apply specific styles when there are multiple covers.\n /\n @Prop()\n hasMultipleCovers = false;\n\n /\n Indicates whether the card is an info page.\n * This can be used to apply specific styles or behaviors for info pages.\n /\n @Prop()\n isInfoCard = false;\n\n /\n [optional]\n * Use for insert heading when needed.\n /\n @Prop()\n titleHtmlTag?: string;\n\n private authorsRef: HTMLElement;\n\n private titleRef: HTMLElement;\n\n private subtitleRef: HTMLElement;\n\n private setTooltipTitle(el: HTMLElement): void {\n if (!el) {\n return;\n }\n\n // Check if element uses line-clamp\n const style = window.getComputedStyle(el);\n const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n let isTruncated;\n if (hasLineClamp) {\n // For elements with line-clamp, check if content height exceeds line-clamp height\n const lineHeight = parseInt(style.lineHeight);\n const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n const maxHeight = lineHeight maxLines;\n\n isTruncated = el.scrollHeight > maxHeight;\n } else {\n // Original check for elements without line-clamp\n isTruncated = el.scrollWidth > el.clientWidth \|\| el.scrollHeight > el.clientHeight;\n }\n\n if (isTruncated) {\n el.setAttribute(\"title\", el.textContent.trim());\n } else {\n el.removeAttribute(\"title\");\n }\n }\n\n componentDidRender(): void {\n this.setTooltipTitle(this.authorsRef);\n this.setTooltipTitle(this.titleRef);\n this.setTooltipTitle(this.subtitleRef);\n }\n\n private resizeHandler = (): void => {\n this.setTooltipTitle(this.authorsRef);\n this.setTooltipTitle(this.titleRef);\n this.setTooltipTitle(this.subtitleRef);\n };\n\n componentDidLoad(): void {\n window.addEventListener(\"resize\", this.resizeHandler);\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"resize\", this.resizeHandler);\n }\n\n private renderTitle = (): HTMLDivElement => {\n const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;\n\n return (\n <div\n class={{\"card-title\": true, \"info-card-title\": this.isInfoCard}}\n ref={(el) => (this.titleRef = el as HTMLElement)}\n innerHTML={title}\n />\n );\n };\n\n private renderSubtitle = (): HTMLSpanElement => {\n return (\n <span\n class={{\"card-subtitle\": true, \"info-card-subtitle\": this.isInfoCard}}\n ref={(el) => (this.subtitleRef = el as HTMLElement)}\n >\n {this.cardSubtitle}\n </span>\n );\n };\n\n private renderOperaCard = (): HTMLZResultCardElement => {\n return (\n <Host tabIndex={0}>\n <div class={`z-cover-container ${this.hasMultipleCovers ? \"has-multiple\" : \"\"}`}>\n <div class=\"z-cover-stack\">\n {this.hasMultipleCovers && (\n <div>\n <div class=\"z-cover-shadow z-shadow-2\" />\n <div class=\"z-cover-shadow z-shadow-1\" />\n </div>\n )}\n <div class=\"z-cover-img\">\n <img\n src={this.cover \|\| this.fallbackCover \|\| defaultFallbackCover}\n alt=\"\"\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n } else {\n this.cover = defaultFallbackCover;\n }\n }}\n />\n </div>\n </div>\n </div>\n <div class=\"info-container\">\n {this.authors && (\n <span\n class=\"authors-label\"\n ref={(el) => (this.authorsRef = el as HTMLElement)}\n >\n {this.authors}\n </span>\n )}\n {this.renderTitle()}\n {this.renderSubtitle()}\n <div class=\"tags-container\">\n <slot name=\"tags\"></slot>\n </div>\n <div class=\"volumes-label\">\n <slot name=\"volumes\"></slot>\n </div>\n </div>\n </Host>\n );\n };\n\n private renderInfoCard = (): HTMLZResultCardElement => {\n return (\n <Host\n tabIndex={0}\n class=\"info-card\"\n >\n <div class=\"info-icon-column\">\n <div class=\"info-icon-container\">\n <z-icon\n class=\"info-icon\"\n name=\"link\"\n width={18}\n height={18}\n />\n </div>\n </div>\n <div class=\"info-container\">\n {this.renderTitle()}\n {this.renderSubtitle()}\n </div>\n </Host>\n );\n };\n\n render(): HTMLZResultCardElement {\n return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n }\n}\n"],"version":3}

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

@@ -1613,7 +1613,7 @@ const ZList = class {
 };
 ZList.style = ZListStyle0;
-const stylesCss$4 = ":host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"medium\"])>.tree-element-container{padding-top:var(--space-unit);padding-bottom:0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{position:relative;z-index:1;box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}";
+const stylesCss$4 = ":host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"medium\"])>.tree-element-container{padding-top:var(--space-unit);padding-bottom:0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{position:relative;z-index:1;box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}:host([disabled])>.container{color:var(--color-form-disabled03);cursor:default}";
 const ZListElementStyle0 = stylesCss$4;
 const ZListElement = class {
@@ -1666,6 +1666,9 @@ const ZListElement = class {
      * @returns void
      */
     handleClick() {
+        if (this.disabled) {
+            return;
+        }
         this.clickItem.emit(this.listElementId);
         if (!this.expandable) {
             return;
@@ -1734,7 +1737,7 @@ const ZListElement = class {
         }
     }
     render() {
-        return (h(Host, { key: 'e85405b1ec7beb005da77e536f26ddbc336b8e85', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '00aa30024263577a239edd5ab76fe655f42ffa5c', class: this.hasTreeItems ? "tree-element-container" : "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '03e62ff1c159abab3d96086e54fb975a37cc06fc', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '64675717abe6bb63de0b3ec39c638fc445639ce3', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '12acb475e6134ca269fa048ec922b41f853e4f44', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '01120e1b207b2d2271e9c71d5bc04a97842b92ed', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '97e8f8a0cffd91ce225f95eb64fc032d69b530cf', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'b6daab61d570d5b9aaf9ab8b735e7704e5075f7c', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return getElement(this); }
 };