npm - @zanichelli/albe-web-components - Versions diffs - 18.7.2 → 18.7.4 - Mend

@zanichelli/albe-web-components 18.7.2 → 18.7.4

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

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

@@ -8,14 +8,15 @@ export class ZResultCard {
             this.setTooltipTitle(this.subtitleRef);
         };
         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("img", { src: this.cover, alt: "Book Cover", class: "z-cover-img", onError: () => {
+            const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;
+            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 || defaultFallbackCover, alt: "", onError: () => {
                     if (this.fallbackCover) {
                         this.cover = this.fallbackCover;
                     }
                     else {
                         this.cover = defaultFallbackCover;
                     }
-                } }))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), h("span", { class: "card-title", ref: (el) => (this.titleRef = el) }, this.cardTitle), 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)), 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" })))));
         };
         this.renderInfoCard = () => {
             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) }, this.cardTitle), h("span", { class: "card-subtitle info-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle))));
@@ -27,6 +28,7 @@ export class ZResultCard {
         this.fallbackCover = undefined;
         this.hasMultipleCovers = false;
         this.isInfoCard = false;
+        this.titleHtmlTag = undefined;
     }
     setTooltipTitle(el) {
         if (!el) {
@@ -72,12 +74,12 @@ export class ZResultCard {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css", "../../css-components/z-cover/styles.css"]
+            "$": ["styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css", "../../css-components/z-cover/styles.css"]
+            "$": ["styles.css"]
         };
     }
     static get properties() {
@@ -202,6 +204,23 @@ export class ZResultCard {
                 "attribute": "is-info-card",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "titleHtmlTag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional]\nUse for insert heading when needed."
+                },
+                "attribute": "title-html-tag",
+                "reflect": false
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/result-card/z-result-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,oBAAoB,MAAM,kDAAkD,CAAC;AAOpF,MAAM,OAAO,WAAW;;~~QAuFd~~,kBAAa,GAAG,GAAS,EAAE;YACjC,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;QACzC,CAAC,CAAC;QAUM,oBAAe,GAAG,GAA2B,EAAE;YACrD,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC;gBACf,WAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC7E,WAAK,KAAK,EAAC,eAAe;wBACvB,IAAI,CAAC,iBAAiB,IAAI,CACzB;4BACE,WAAK,KAAK,EAAC,2BAA2B,GAAG;4BACzC,WAAK,KAAK,EAAC,2BAA2B,GAAG,CACrC,CACP;wBACD,WACE,GAAG,EAAE,IAAI,CAAC,KAAK,~~EACf~~,~~GAAG~~,~~EAAC~~,~~YAAY~~,~~EAChB~~,~~KAAK~~,EAAC,~~aAAa~~,~~EACnB~~,OAAO,EAAE,GAAG,EAAE;~~gCACZ~~,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;~~oCACvB~~,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;~~gCAClC~~,CAAC;~~qCAAM~~,CAAC;~~oCACN~~,IAAI,CAAC,KAAK,GAAG,oBAAoB,CAAC;~~gCACpC~~,CAAC;~~4BACH~~,CAAC,GACD,CACE,CACF;gBACN,WAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,OAAO,IAAI,CACf,YACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAEjD,IAAI,CAAC,OAAO,CACR,CACR;oBACD,~~YACE~~,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,~~IAE/C~~,~~IAAI~~,~~CAAC~~,~~SAAS~~,~~CACV~~;oBACP,YACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,IAElD,IAAI,CAAC,YAAY,CACb;oBACP,WAAK,KAAK,EAAC,gBAAgB;wBACzB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;oBACN,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;QACJ,CAAC,CAAC;QAEM,mBAAc,GAAG,GAA2B,EAAE;YACpD,OAAO,CACL,EAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,WAAW;gBAEjB,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,WAAK,KAAK,EAAC,qBAAqB;wBAC9B,cACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACE,CACF;gBACN,WAAK,KAAK,EAAC,gBAAgB;oBACzB,YACE,KAAK,EAAC,uBAAuB,EAC7B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,IAE/C,IAAI,CAAC,SAAS,CACV;oBACP,YACE,KAAK,EAAC,6BAA6B,EACnC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,IAElD,IAAI,CAAC,YAAY,CACb,CACH,CACD,CACR,CAAC;QACJ,CAAC,CAAC;;;;;;~~iCAzJkB~~,KAAK;0BAOZ,KAAK~~;;IAQV~~,eAAe,CAAC,EAAe;QACrC,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAO;QACT,CAAC;QAED,mCAAmC;QACnC,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,CAAC;YACjB,kFAAkF;YAClF,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;QAC5C,CAAC;aAAM,CAAC;YACN,iDAAiD;YACjD,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;QACrF,CAAC;QAED,IAAI,WAAW,EAAE,CAAC;YAChB,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;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;IACzC,CAAC;IAQD,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACxD,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3D,CAAC;~~IA6FD~~,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1E,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["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\"~~, \"../../css-components/z-cover/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 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 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 <img\n src={this.cover}\n alt=\"~~Book Cover~~\"\n ~~class=\"z-cover-img\"\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 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 <~~span~~\n class=\"card-title\"\n ref={(el) => (this.titleRef = el as HTMLElement)}\n ~~>\n~~ {~~this.cardTitle~~}\n ~~</span~~>\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 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 >\n {this.cardTitle}\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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/result-card/z-result-card/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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 >\n {this.cardTitle}\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"]}

package/dist/collection/components/result-card/z-result-card/styles.css CHANGED Viewed

@@ -17,6 +17,77 @@
   outline: none;
 }
+.z-cover-container {
+  position: relative;
+  display: flex;
+  width: 119px;
+  height: 158px;
+  align-items: center;
+  justify-items: center;
+}
+.z-cover-stack {
+  width: 100%;
+  height: 100%;
+}
+/* Base sizes for single cover */
+.z-cover-shadow,
+.z-cover-img {
+  width: 117px;
+  height: 156px;
+}
+/* Scaled sizes for multiple covers */
+.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;
+}
 :host(.info-card:focus:focus-visible) {
   z-index: 1;
   box-shadow: var(--shadow-focus-primary);
@@ -53,6 +124,10 @@
   word-break: break-word;
 }
+.card-title > * {
+  all: unset;
+}
 .card-subtitle {
   overflow: hidden;
   color: var(--color-default-text);

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

@@ -22,6 +22,7 @@ const args = {
     fallbackCover: "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
     hasMultipleCovers: false,
     isInfoCard: false,
+    titleHtmlTag: "h2",
 };
 export const SingleCover = {
     args: Object.assign({}, args),
@@ -34,6 +35,25 @@ export const SingleCover = {
       fallback-cover=${args.fallbackCover}
       .hasMultipleCovers=${args.hasMultipleCovers}
       .isInfoCard=${args.isInfoCard}
+      .titleHtmlTag=${args.titleHtmlTag}
+    >
+      <span slot="tags">Example tag</span>
+      <span slot="volumes">2 volumes</span>
+    </z-result-card>
+  `,
+};
+export const SingleCoverLateralSpaces = {
+    args: Object.assign({}, args),
+    render: (args) => html `
+    <z-result-card
+      .cardTitle=${args.cardTitle}
+      .cardSubtitle=${args.cardSubtitle}
+      .authors=${args.authors}
+      cover="https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg"
+      fallback-cover=${args.fallbackCover}
+      .hasMultipleCovers=${args.hasMultipleCovers}
+      .isInfoCard=${args.isInfoCard}
+      .titleHtmlTag=${args.titleHtmlTag}
     >
       <span slot="tags">Example tag</span>
       <span slot="volumes">2 volumes</span>
@@ -51,6 +71,26 @@ export const MultipleCovers = {
       fallback-cover=${args.fallbackCover}
       .hasMultipleCovers=${args.hasMultipleCovers}
       .isInfoCard=${args.isInfoCard}
+      .titleHtmlTag=${args.titleHtmlTag}
+    >
+      <span slot="tags">Example tag</span>
+      <span slot="tags">Example tag</span>
+      <span slot="volumes">2 volumes</span>
+    </z-result-card>
+  `,
+};
+export const MultipleCoversLateralSpaces = {
+    args: Object.assign(Object.assign({}, args), { hasMultipleCovers: true }),
+    render: (args) => html `
+    <z-result-card
+      .cardTitle=${args.cardTitle}
+      .cardSubtitle=${args.cardSubtitle}
+      .authors=${args.authors}
+      cover=https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg
+      fallback-cover=${args.fallbackCover}
+      .hasMultipleCovers=${args.hasMultipleCovers}
+      .isInfoCard=${args.isInfoCard}
+      .titleHtmlTag=${args.titleHtmlTag}
     >
       <span slot="tags">Example tag</span>
       <span slot="tags">Example tag</span>
@@ -69,6 +109,7 @@ export const LongTitleAndSubtitle = {
       fallback-cover=${args.fallbackCover}
       .hasMultipleCovers=${args.hasMultipleCovers}
       .isInfoCard=${args.isInfoCard}
+      .titleHtmlTag=${args.titleHtmlTag}
     >
       <span slot="tags">Example tag</span>
       <span slot="volumes">2 volumes</span>
@@ -85,6 +126,7 @@ export const OnlyTitleAndSubtitle = {
       fallback-cover=${args.fallbackCover}
       .hasMultipleCovers=${args.hasMultipleCovers}
       .isInfoCard=${args.isInfoCard}
+      .titleHtmlTag=${args.titleHtmlTag}
     />
   `,
 };
@@ -99,6 +141,7 @@ export const InfoCard = {
       fallback-cover=${args.fallbackCover}
       .hasMultipleCovers=${args.hasMultipleCovers}
       .isInfoCard=${args.isInfoCard}
+      .titleHtmlTag=${args.titleHtmlTag}
     />
   `,
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"z-result-card.stories.js","sourceRoot":"","sources":["../../../../../src/components/result-card/z-result-card/z-result-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAS;IACtB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,SAAS,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAC5B,YAAY,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAC/B,OAAO,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAC1B,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QACxB,aAAa,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAChC,iBAAiB,EAAE,EAAC,OAAO,EAAE,SAAS,EAAC;QACvC,UAAU,EAAE,EAAC,OAAO,EAAE,SAAS,EAAC;KACjC;CACF,CAAC;AAEF,eAAe,SAAS,CAAC;AAIzB,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,OAAO;IAClB,YAAY,EAAE,UAAU;IACxB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,mEAAmE;IAC1E,aAAa,EAAE,mFAAmF;IAClG,iBAAiB,EAAE,KAAK;IACxB,UAAU,EAAE,KAAK;~~CAClB~~,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,oBACC,IAAI,CACR;IAED,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;;;;;~~GAKhC~~;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,kCACC,IAAI,KACP,iBAAiB,EAAE,IAAI,GACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;;;;;;~~GAMhC~~;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,kCACC,IAAI,KACP,SAAS,EACP,iKAAiK,EACnK,YAAY,EACV,uVAAuV,EACzV,iBAAiB,EAAE,IAAI,GACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;;;;;~~GAKhC~~;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,kCACC,IAAI,KACP,MAAM,EAAE,SAAS,GAClB;IAED,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;eACxB,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;;~~GAEhC~~;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,kCACC,IAAI,KACP,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EACV,2OAA2O,EAC7O,UAAU,EAAE,IAAI,GACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;;~~GAEhC~~;CACF,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"./index\";\n\nconst StoryMeta: Meta = {\n title: \"ZResultCard\",\n component: \"z-result-card\",\n argTypes: {\n cardTitle: {control: \"text\"},\n cardSubtitle: {control: \"text\"},\n authors: {control: \"text\"},\n cover: {control: \"text\"},\n fallbackCover: {control: \"text\"},\n hasMultipleCovers: {control: \"boolean\"},\n isInfoCard: {control: \"boolean\"},\n },\n};\n\nexport default StoryMeta;\n\ntype Story = StoryObj;\n\nconst args = {\n cardTitle: \"Title\",\n cardSubtitle: \"Subtitle\",\n authors: \"John Doe\",\n cover: \"https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG\",\n fallbackCover: \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n hasMultipleCovers: false,\n isInfoCard: false,\n};\n\nexport const SingleCover: Story = {\n args: {\n ...args,\n },\n\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const MultipleCovers: Story = {\n args: {\n ...args,\n hasMultipleCovers: true,\n },\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const LongTitleAndSubtitle: Story = {\n args: {\n ...args,\n cardTitle:\n \"This is a very long title that should wrap to the next line if it exceeds the width of the card, it goes on two rows for desktop devices and one row for mobile\",\n cardSubtitle:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis. Nunc volutpat viverra felis, eu iaculis ipsum tempus mattis. Phasellus euismod quam eget nisl pellentesque.\",\n hasMultipleCovers: true,\n },\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const OnlyTitleAndSubtitle: Story = {\n args: {\n ...args,\n author: undefined,\n },\n\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n />\n `,\n};\n\nexport const InfoCard: Story = {\n args: {\n ...args,\n cardTitle: \"Info Card Title\",\n cardSubtitle:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis.\",\n isInfoCard: true,\n },\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n />\n `,\n};\n"]}
1	+ {"version":3,"file":"z-result-card.stories.js","sourceRoot":"","sources":["../../../../../src/components/result-card/z-result-card/z-result-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAS;IACtB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,SAAS,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAC5B,YAAY,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAC/B,OAAO,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAC1B,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QACxB,aAAa,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;QAChC,iBAAiB,EAAE,EAAC,OAAO,EAAE,SAAS,EAAC;QACvC,UAAU,EAAE,EAAC,OAAO,EAAE,SAAS,EAAC;KACjC;CACF,CAAC;AAEF,eAAe,SAAS,CAAC;AAIzB,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,OAAO;IAClB,YAAY,EAAE,UAAU;IACxB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,mEAAmE;IAC1E,aAAa,EAAE,mFAAmF;IAClG,iBAAiB,EAAE,KAAK;IACxB,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,oBACC,IAAI,CACR;IAED,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;;;;;GAKpC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAU;IAC7C,IAAI,oBACC,IAAI,CACR;IAED,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;;uBAEN,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;;;;;GAKpC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,kCACC,IAAI,KACP,iBAAiB,EAAE,IAAI,GACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;;;;;;GAMpC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAU;IAChD,IAAI,kCACC,IAAI,KACP,iBAAiB,EAAE,IAAI,GACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;;uBAEN,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;;;;;;GAMpC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,kCACC,IAAI,KACP,SAAS,EACP,iKAAiK,EACnK,YAAY,EACV,uVAAuV,EACzV,iBAAiB,EAAE,IAAI,GACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;;;;;GAKpC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,kCACC,IAAI,KACP,MAAM,EAAE,SAAS,GAClB;IAED,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;eACxB,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;;GAEpC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,kCACC,IAAI,KACP,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EACV,2OAA2O,EAC7O,UAAU,EAAE,IAAI,GACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,OAAO;eACd,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,aAAa;2BACd,IAAI,CAAC,iBAAiB;oBAC7B,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;;GAEpC;CACF,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"./index\";\n\nconst StoryMeta: Meta = {\n title: \"ZResultCard\",\n component: \"z-result-card\",\n argTypes: {\n cardTitle: {control: \"text\"},\n cardSubtitle: {control: \"text\"},\n authors: {control: \"text\"},\n cover: {control: \"text\"},\n fallbackCover: {control: \"text\"},\n hasMultipleCovers: {control: \"boolean\"},\n isInfoCard: {control: \"boolean\"},\n },\n};\n\nexport default StoryMeta;\n\ntype Story = StoryObj;\n\nconst args = {\n cardTitle: \"Title\",\n cardSubtitle: \"Subtitle\",\n authors: \"John Doe\",\n cover: \"https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG\",\n fallbackCover: \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n hasMultipleCovers: false,\n isInfoCard: false,\n titleHtmlTag: \"h2\",\n};\n\nexport const SingleCover: Story = {\n args: {\n ...args,\n },\n\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n .titleHtmlTag=${args.titleHtmlTag}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const SingleCoverLateralSpaces: Story = {\n args: {\n ...args,\n },\n\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n cover=\"https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg\"\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n .titleHtmlTag=${args.titleHtmlTag}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const MultipleCovers: Story = {\n args: {\n ...args,\n hasMultipleCovers: true,\n },\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n .titleHtmlTag=${args.titleHtmlTag}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const MultipleCoversLateralSpaces: Story = {\n args: {\n ...args,\n hasMultipleCovers: true,\n },\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n cover=https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n .titleHtmlTag=${args.titleHtmlTag}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const LongTitleAndSubtitle: Story = {\n args: {\n ...args,\n cardTitle:\n \"This is a very long title that should wrap to the next line if it exceeds the width of the card, it goes on two rows for desktop devices and one row for mobile\",\n cardSubtitle:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis. Nunc volutpat viverra felis, eu iaculis ipsum tempus mattis. Phasellus euismod quam eget nisl pellentesque.\",\n hasMultipleCovers: true,\n },\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n .titleHtmlTag=${args.titleHtmlTag}\n >\n <span slot=\"tags\">Example tag</span>\n <span slot=\"volumes\">2 volumes</span>\n </z-result-card>\n `,\n};\n\nexport const OnlyTitleAndSubtitle: Story = {\n args: {\n ...args,\n author: undefined,\n },\n\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n .titleHtmlTag=${args.titleHtmlTag}\n />\n `,\n};\n\nexport const InfoCard: Story = {\n args: {\n ...args,\n cardTitle: \"Info Card Title\",\n cardSubtitle:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis.\",\n isInfoCard: true,\n },\n render: (args) => html`\n <z-result-card\n .cardTitle=${args.cardTitle}\n .cardSubtitle=${args.cardSubtitle}\n .authors=${args.authors}\n .cover=${args.cover}\n fallback-cover=${args.fallbackCover}\n .hasMultipleCovers=${args.hasMultipleCovers}\n .isInfoCard=${args.isInfoCard}\n .titleHtmlTag=${args.titleHtmlTag}\n />\n `,\n};\n"]}

package/dist/collection/components/z-card/styles.css CHANGED Viewed

@@ -133,6 +133,9 @@ Unfortunately the `aspect-ratio` property is still experimental */
 .actions {
   display: flex;
   align-items: center;
+}
+:host(:not([variant="overlay"])) .actions {
   margin-top: auto;
 }

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { C as CardVariant } from './index2.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot=\"title\"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center;margin-top:auto}::slotted([slot=\"action\"]){position:relative;z-index:2}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant=\"text\"]) [slot=\"text\"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
+const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot=\"title\"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center}:host(:not([variant=\"overlay\"])) .actions{margin-top:auto}::slotted([slot=\"action\"]){position:relative;z-index:2}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant=\"text\"]) [slot=\"text\"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 const ZCardStyle0 = stylesCss;
 const ZCard$1 = /*@__PURE__*/ proxyCustomElement(class ZCard extends HTMLElement {

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

	@@ -1 +1 @@
1	- {"file":"z-card.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,uvIAAuvI,CAAC;AAC1wI,oBAAe,SAAS;;MCwBXA,OAAK;;;;;;;0BAeH,KAAK;yBAON,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,aAAa;QACnB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;SAC5C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZCard"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n,\n::slotted() {\n box-sizing: border-box;\n}\n\n:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/ Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental /\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text /\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border /\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/ Shadow /\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/ Overlay /\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/\n ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n \n @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /\n Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"version":3}
1	+ {"file":"z-card.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,myIAAmyI,CAAC;AACtzI,oBAAe,SAAS;;MCwBXA,OAAK;;;;;;;0BAeH,KAAK;yBAON,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,aAAa;QACnB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;SAC5C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZCard"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n,\n::slotted() {\n box-sizing: border-box;\n}\n\n:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/ Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental /\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text /\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border /\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/ Shadow /\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/ Overlay /\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/\n ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n \n @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /\n Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"version":3}

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

@@ -2,11 +2,8 @@ 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$1 = ":host{display:flex;overflow:hidden;min-width:0;height:calc(174px - var(--space-unit) * 2);max-height:calc(174px - var(--space-unit) * 2);padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans)}:host(:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}:host(.info-card:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.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-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;height:auto;flex-direction:column;margin-top:auto;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){display:flex;height:calc(76px - var(--space-unit) * 2);max-height:calc(76px - var(--space-unit) * 2)}.info-icon-column{display:flex;width:50px;height:100%;align-items:center;justify-content:center}.info-icon-container{display:flex;width:34px;height:34px;align-items:center;justify-content:center;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)}@media (max-width: 768px){.card-title{display:block;overflow:hidden;line-height:normal;text-overflow:ellipsis;white-space:nowrap}}";
-const ZResultCardStyle0 = stylesCss$1;
-const stylesCss = ".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;min-width:117px;max-width:117px;height:156px;min-height:156px;max-height:156px}.z-cover-container.has-multiple .z-cover-shadow,.z-cover-container.has-multiple .z-cover-img{width:105px;min-width:105px;max-width:105px;height:140px;min-height:140px;max-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;border:var(--border-size-small) solid black;object-fit:cover;object-position:left}.z-cover-container.has-multiple .z-cover-img{left:12px}";
-const ZResultCardStyle1 = stylesCss;
+const stylesCss = ":host{display:flex;overflow:hidden;min-width:0;height:calc(174px - var(--space-unit) * 2);max-height:calc(174px - var(--space-unit) * 2);padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans)}:host(:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.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}:host(.info-card:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.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;height:auto;flex-direction:column;margin-top:auto;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){display:flex;height:calc(76px - var(--space-unit) * 2);max-height:calc(76px - var(--space-unit) * 2)}.info-icon-column{display:flex;width:50px;height:100%;align-items:center;justify-content:center}.info-icon-container{display:flex;width:34px;height:34px;align-items:center;justify-content:center;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)}@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 {
     constructor() {
@@ -19,14 +16,15 @@ const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends
             this.setTooltipTitle(this.subtitleRef);
         };
         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("img", { src: this.cover, alt: "Book Cover", class: "z-cover-img", onError: () => {
+            const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;
+            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;
                     }
                     else {
                         this.cover = img;
                     }
-                } }))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), h("span", { class: "card-title", ref: (el) => (this.titleRef = el) }, this.cardTitle), 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)), 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" })))));
         };
         this.renderInfoCard = () => {
             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) }, this.cardTitle), h("span", { class: "card-subtitle info-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle))));
@@ -38,6 +36,7 @@ const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends
         this.fallbackCover = undefined;
         this.hasMultipleCovers = false;
         this.isInfoCard = false;
+        this.titleHtmlTag = undefined;
     }
     setTooltipTitle(el) {
         if (!el) {
@@ -80,7 +79,7 @@ const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends
         return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();
     }
     get hostElement() { return this; }
-    static get style() { return ZResultCardStyle0 + ZResultCardStyle1; }
+    static get style() { return ZResultCardStyle0; }
 }, [1, "z-result-card", {
         "cardTitle": [1, "card-title"],
         "cardSubtitle": [1, "card-subtitle"],
@@ -88,7 +87,8 @@ const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends
         "cover": [1],
         "fallbackCover": [1, "fallback-cover"],
         "hasMultipleCovers": [4, "has-multiple-covers"],
-        "isInfoCard": [4, "is-info-card"]
+        "isInfoCard": [4, "is-info-card"],
+        "titleHtmlTag": [1, "title-html-tag"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "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":["stylesCss","ZResultCard","defaultFallbackCover"],"sources":["src/components/result-card/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/css-components/z-cover/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: calc(174px - var(--space-unit) * 2);\n max-height: calc(174px - var(--space-unit) * 2);\n padding: var(--space-unit);\n border: var(--border-size-medium) solid var(--color-surface02);\n border-radius: var(--border-size-large);\n cursor: pointer;\n font-family: var(--font-family-sans);\n}\n\n:host(:focus:focus-visible) {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(.info-card:focus:focus-visible) {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\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-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 height: auto;\n flex-direction: column;\n margin-top: auto;\n color: var(--color-default-text);\n font-size: var(--font-size-1);\n}\n\n:host(.info-card) {\n display: flex;\n height: calc(76px - var(--space-unit) * 2);\n max-height: calc(76px - var(--space-unit) * 2);\n}\n\n.info-icon-column {\n display: flex;\n width: 50px;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.info-icon-container {\n display: flex;\n width: 34px;\n height: 34px;\n align-items: center;\n justify-content: center;\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@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",".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 min-width: 117px;\n max-width: 117px;\n height: 156px;\n min-height: 156px;\n max-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 min-width: 105px;\n max-width: 105px;\n height: 140px;\n min-height: 140px;\n max-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 border: var(--border-size-small) solid black;\n object-fit: cover;\n object-position: left;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n left: 12px;\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\", \"../../css-components/z-cover/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 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 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 <img\n src={this.cover}\n alt=\"Book Cover\"\n class=\"z-cover-img\"\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 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 <span\n class=\"card-title\"\n ref={(el) => (this.titleRef = el as HTMLElement)}\n >\n {this.cardTitle}\n </span>\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 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 >\n {this.cardTitle}\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":"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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: calc(174px - var(--space-unit) * 2);\n max-height: calc(174px - var(--space-unit) * 2);\n padding: var(--space-unit);\n border: var(--border-size-medium) solid var(--color-surface02);\n border-radius: var(--border-size-large);\n cursor: pointer;\n font-family: var(--font-family-sans);\n}\n\n:host(:focus:focus-visible) {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\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:host(.info-card:focus:focus-visible) {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\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 height: auto;\n flex-direction: column;\n margin-top: auto;\n color: var(--color-default-text);\n font-size: var(--font-size-1);\n}\n\n:host(.info-card) {\n display: flex;\n height: calc(76px - var(--space-unit) * 2);\n max-height: calc(76px - var(--space-unit) * 2);\n}\n\n.info-icon-column {\n display: flex;\n width: 50px;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.info-icon-container {\n display: flex;\n width: 34px;\n height: 34px;\n align-items: center;\n justify-content: center;\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@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 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 >\n {this.cardTitle}\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}