@zanichelli/albe-web-components 18.3.4 → 18.4.0-RC2

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

@@ -0,0 +1,179 @@
+import { Host, h } from "@stencil/core";
+export class ZResultCard {
+    constructor() {
+        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" }))), h("div", { class: "info-container" }, this.author && h("div", { class: "author-label" }, this.author), h("div", { class: "card-title" }, this.cardTitle), h("div", { class: "card-subtitle" }, 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("div", { class: "card-title info-title" }, this.cardTitle), h("div", { class: "card-subtitle info-subtitle" }, this.cardSubtitle))));
+        };
+        this.author = undefined;
+        this.cardTitle = undefined;
+        this.cardSubtitle = undefined;
+        this.operaTags = undefined;
+        this.volumesLabel = undefined;
+        this.cover = undefined;
+        this.hasMultipleCovers = false;
+        this.isInfoCard = false;
+    }
+    render() {
+        if (this.isInfoCard) {
+            return this.renderInfoCard();
+        }
+        return this.renderOperaCard();
+    }
+    static get is() { return "z-result-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css", "../../css-components/z-cover/styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css", "../../css-components/z-cover/styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "author": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The author of the opera."
+                },
+                "attribute": "author",
+                "reflect": false
+            },
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the opera."
+                },
+                "attribute": "card-title",
+                "reflect": false
+            },
+            "cardSubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subtitle of the opera."
+                },
+                "attribute": "card-subtitle",
+                "reflect": false
+            },
+            "operaTags": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tags associated with the opera.\nThis is a string array that can be used to display tags in the component."
+                }
+            },
+            "volumesLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the volumes.\nThis is used to display the number of volumes or a related message."
+                },
+                "attribute": "volumes-label",
+                "reflect": false
+            },
+            "cover": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL of the cover image.\nThis is used to display the cover image of the opera."
+                },
+                "attribute": "cover",
+                "reflect": false
+            },
+            "hasMultipleCovers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the card has multiple covers.\nThis is used to apply specific styles when there are multiple covers."
+                },
+                "attribute": "has-multiple-covers",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isInfoCard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the card is an info page.\nThis can be used to apply specific styles or behaviors for info pages."
+                },
+                "attribute": "is-info-card",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;AAOhE,MAAM,OAAO,WAAW;;QAwDd,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,GACnB,CACE,CACF;gBACN,WAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,MAAM,CAAO;oBAC7D,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAO;oBAC9C,WAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAO;oBACpD,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,WAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,SAAS,CAAO;oBACzD,WAAK,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,YAAY,CAAO,CAC9D,CACD,CACR,CAAC;QACJ,CAAC,CAAC;;;;;;;iCAhEkB,KAAK;0BAOZ,KAAK;;IA2DlB,MAAM;QACJ,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;QAC/B,CAAC;QAED,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;IAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\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 author of the opera.\n   */\n  @Prop()\n  author?: string;\n\n  /**\n   * The title of the opera.\n   */\n  @Prop()\n  cardTitle: string;\n\n  /**\n   * The subtitle of the opera.\n   */\n  @Prop()\n  cardSubtitle: string;\n\n  /**\n   * Tags associated with the opera.\n   * This is a string array that can be used to display tags in the component.\n   */\n  @Prop()\n  operaTags?: string[];\n\n  /**\n   * The label for the volumes.\n   * This is used to display the number of volumes or a related message.\n   */\n  @Prop()\n  volumesLabel?: 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  /**\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 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            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          {this.author && <div class=\"author-label\">{this.author}</div>}\n          <div class=\"card-title\">{this.cardTitle}</div>\n          <div class=\"card-subtitle\">{this.cardSubtitle}</div>\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          <div class=\"card-title info-title\">{this.cardTitle}</div>\n          <div class=\"card-subtitle info-subtitle\">{this.cardSubtitle}</div>\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    if (this.isInfoCard) {\n      return this.renderInfoCard();\n    }\n\n    return this.renderOperaCard();\n  }\n}\n"]}

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

@@ -0,0 +1,164 @@
+:host {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  min-width: 0;
+  max-width: 500px;
+  height: 175px;
+  max-height: 175px;
+  padding: var(--space-unit);
+  border: 2px 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);
+}
+
+.author-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;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 2.4em;
+  margin-top: var(--space-unit);
+  margin-bottom: 4px;
+  -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.2;
+  word-break: break-word;
+}
+
+.card-subtitle {
+  overflow: hidden;
+  color: var(--color-default-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tags-container {
+  display: flex;
+  margin-top: var(--space-unit);
+  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;
+  width: 100%;
+  max-width: 500px;
+  height: 75px;
+}
+
+.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) * 4.5);
+  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;
+}
+
+.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;
+}
+
+.info-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--color-default-text);
+}
+
+@media (max-width: 768px) {
+  .card-title {
+    display: block;
+    overflow: hidden;
+    max-height: unset;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    line-height: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .card-title.info-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    white-space: normal;
+  }
+}

package/dist/components/index.d.ts

@@ -117,6 +117,8 @@ export { ZPopover as ZPopover } from '../types/components/z-popover/index';
 export { defineCustomElement as defineCustomElementZPopover } from './z-popover';
 export { ZRangePicker as ZRangePicker } from '../types/components/date-picker/z-range-picker/index';
 export { defineCustomElement as defineCustomElementZRangePicker } from './z-range-picker';
+export { ZResultCard as ZResultCard } from '../types/components/result-card/z-result-card/index';
+export { defineCustomElement as defineCustomElementZResultCard } from './z-result-card';
 export { ZSearchbar as ZSearchbar } from '../types/components/z-searchbar/index';
 export { defineCustomElement as defineCustomElementZSearchbar } from './z-searchbar';
 export { ZSectionTitle as ZSectionTitle } from '../types/components/deprecated/z-section-title/index';

package/dist/components/index.js

@@ -60,6 +60,7 @@ export { ZPagination, defineCustomElement as defineCustomElementZPagination } fr
 export { ZPanelElem, defineCustomElement as defineCustomElementZPanelElem } from './z-panel-elem.js';
 export { ZPopover, defineCustomElement as defineCustomElementZPopover } from './z-popover.js';
 export { ZRangePicker, defineCustomElement as defineCustomElementZRangePicker } from './z-range-picker.js';
+export { ZResultCard, defineCustomElement as defineCustomElementZResultCard } from './z-result-card.js';
 export { ZSearchbar, defineCustomElement as defineCustomElementZSearchbar } from './z-searchbar.js';
 export { ZSectionTitle, defineCustomElement as defineCustomElementZSectionTitle } from './z-section-title.js';
 export { ZSelect, defineCustomElement as defineCustomElementZSelect } from './z-select.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEM,KAAK,GAAG;IACZ,WAAW;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {UTILS as Utils};\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEM,KAAK,GAAG;IACZ,WAAW;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {UTILS as Utils};\n"],"version":3}

package/dist/components/z-result-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZResultCard extends Components.ZResultCard, HTMLElement {}
+export const ZResultCard: {
+    prototype: ZResultCard;
+    new (): ZResultCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,72 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss$1 = ":host{display:flex;overflow:hidden;width:100%;min-width:0;max-width:500px;height:175px;max-height:175px;padding:var(--space-unit);border:2px 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)}.author-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;min-width:0;max-width:100%;max-height:2.4em;margin-top:var(--space-unit);margin-bottom:4px;-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.2;word-break:break-word}.card-subtitle{overflow:hidden;color:var(--color-default-text);text-overflow:ellipsis;white-space:nowrap}.tags-container{display:flex;margin-top:var(--space-unit);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;width:100%;max-width:500px;height:75px}.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) * 4.5);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}.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}.info-icon{width:18px;height:18px;color:var(--color-default-text)}@media (max-width: 768px){.card-title{display:block;overflow:hidden;max-height:unset;-webkit-line-clamp:unset;line-clamp:unset;line-height:normal;text-overflow:ellipsis;white-space:nowrap}.card-title.info-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;white-space:normal}}";
+const ZResultCardStyle0 = stylesCss$1;
+
+const stylesCss = ".z-cover-container{position:relative;display:flex;width:115px;height:175px;align-items:center}.z-cover-stack{width:100%;height:100%}.z-cover-shadow,.z-cover-img{width:115px;min-width:115px;max-width:115px;height:175px;min-height:175px;max-height:175px}.z-cover-container.has-multiple .z-cover-shadow,.z-cover-container.has-multiple .z-cover-img{width:95px;min-width:95px;max-width:95px;height:160px;min-height:160px;max-height:160px}.z-cover-shadow{position:absolute;z-index:1;background:#e0e0e0;border-radius:var(--border-size-large);box-shadow:0 2px 8px rgb(0 0 0 / 10%)}.z-shadow-1{z-index:1;top:var(--space-unit);right:var(--space-unit);border:1px solid var(--gray200)}.z-shadow-2{z-index:0;top:calc(var(--space-unit) * 2);right:calc(var(--space-unit) * 2);border:1px solid var(--gray200)}.z-cover-img{position:absolute;z-index:2;top:0;right:0;border-radius:6px;box-shadow:0 2px 8px rgb(0 0 0 / 12%);object-fit:cover;object-position:left}.z-cover-container.has-multiple .z-cover-img{right:0}";
+const ZResultCardStyle1 = stylesCss;
+
+const ZResultCard$1 = /*@__PURE__*/ proxyCustomElement(class ZResultCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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" }))), h("div", { class: "info-container" }, this.author && h("div", { class: "author-label" }, this.author), h("div", { class: "card-title" }, this.cardTitle), h("div", { class: "card-subtitle" }, 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("div", { class: "card-title info-title" }, this.cardTitle), h("div", { class: "card-subtitle info-subtitle" }, this.cardSubtitle))));
+        };
+        this.author = undefined;
+        this.cardTitle = undefined;
+        this.cardSubtitle = undefined;
+        this.operaTags = undefined;
+        this.volumesLabel = undefined;
+        this.cover = undefined;
+        this.hasMultipleCovers = false;
+        this.isInfoCard = false;
+    }
+    render() {
+        if (this.isInfoCard) {
+            return this.renderInfoCard();
+        }
+        return this.renderOperaCard();
+    }
+    get hostElement() { return this; }
+    static get style() { return ZResultCardStyle0 + ZResultCardStyle1; }
+}, [1, "z-result-card", {
+        "author": [1],
+        "cardTitle": [1, "card-title"],
+        "cardSubtitle": [1, "card-subtitle"],
+        "operaTags": [16],
+        "volumesLabel": [1, "volumes-label"],
+        "cover": [1],
+        "hasMultipleCovers": [4, "has-multiple-covers"],
+        "isInfoCard": [4, "is-info-card"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-result-card", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-result-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZResultCard$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZResultCard = ZResultCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZResultCard, defineCustomElement };
+
+//# sourceMappingURL=z-result-card.js.map

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

@@ -0,0 +1 @@
+{"file":"z-result-card.js","mappings":";;;AAAA,MAAMA,WAAS,GAAG,8hFAA8hF,CAAC;AACjjF,0BAAeA,WAAS;;ACDxB,MAAM,SAAS,GAAG,q+BAAq+B,CAAC;AACx/B,0BAAe,SAAS;;MCMXC,aAAW;;;;;QAwDd,oBAAe,GAAG;YACxB,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,IACf,WAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,iBAAiB,GAAG,cAAc,GAAG,EAAE,EAAE,IAC7E,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,iBAAiB,KACrB,eACE,WAAK,KAAK,EAAC,2BAA2B,GAAG,EACzC,WAAK,KAAK,EAAC,2BAA2B,GAAG,CACrC,CACP,EACD,WACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,GAAG,EAAC,YAAY,EAChB,KAAK,EAAC,aAAa,GACnB,CACE,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,MAAM,CAAO,EAC7D,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAO,EAC9C,WAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAO,EACpD,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,QACE,EAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,WAAW,IAEjB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,cACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACE,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,SAAS,CAAO,EACzD,WAAK,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,YAAY,CAAO,CAC9D,CACD,EACP;SACH,CAAC;;;;;;;iCAhEkB,KAAK;0BAOZ,KAAK;;IA2DlB,MAAM;QACJ,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;SAC9B;QAED,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;KAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["stylesCss","ZResultCard"],"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  width: 100%;\n  min-width: 0;\n  max-width: 500px;\n  height: 175px;\n  max-height: 175px;\n  padding: var(--space-unit);\n  border: 2px 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.author-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  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: var(--space-unit);\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: 2;\n  line-clamp: 2;\n  line-height: 1.2;\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.tags-container {\n  display: flex;\n  margin-top: var(--space-unit);\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  width: 100%;\n  max-width: 500px;\n  height: 75px;\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) * 4.5);\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.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.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    max-height: unset;\n    -webkit-line-clamp: unset;\n    line-clamp: unset;\n    line-height: normal;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .card-title.info-title {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n    line-clamp: 1;\n    white-space: normal;\n  }\n}\n",".z-cover-container {\n  position: relative;\n  display: flex;\n  width: 115px;\n  height: 175px;\n  align-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: 115px;\n  min-width: 115px;\n  max-width: 115px;\n  height: 175px;\n  min-height: 175px;\n  max-height: 175px;\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: 95px;\n  min-width: 95px;\n  max-width: 95px;\n  height: 160px;\n  min-height: 160px;\n  max-height: 160px;\n}\n\n.z-cover-shadow {\n  position: absolute;\n  z-index: 1;\n  background: #e0e0e0;\n  border-radius: var(--border-size-large);\n  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n}\n\n.z-shadow-1 {\n  z-index: 1;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  border: 1px solid var(--gray200);\n}\n\n.z-shadow-2 {\n  z-index: 0;\n  top: calc(var(--space-unit) * 2);\n  right: calc(var(--space-unit) * 2);\n  border: 1px solid var(--gray200);\n}\n\n.z-cover-img {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  right: 0;\n  border-radius: 6px;\n  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);\n  object-fit: cover;\n  object-position: left;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n  right: 0;\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\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 author of the opera.\n   */\n  @Prop()\n  author?: string;\n\n  /**\n   * The title of the opera.\n   */\n  @Prop()\n  cardTitle: string;\n\n  /**\n   * The subtitle of the opera.\n   */\n  @Prop()\n  cardSubtitle: string;\n\n  /**\n   * Tags associated with the opera.\n   * This is a string array that can be used to display tags in the component.\n   */\n  @Prop()\n  operaTags?: string[];\n\n  /**\n   * The label for the volumes.\n   * This is used to display the number of volumes or a related message.\n   */\n  @Prop()\n  volumesLabel?: 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  /**\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 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            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          {this.author && <div class=\"author-label\">{this.author}</div>}\n          <div class=\"card-title\">{this.cardTitle}</div>\n          <div class=\"card-subtitle\">{this.cardSubtitle}</div>\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          <div class=\"card-title info-title\">{this.cardTitle}</div>\n          <div class=\"card-subtitle info-subtitle\">{this.cardSubtitle}</div>\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    if (this.isInfoCard) {\n      return this.renderInfoCard();\n    }\n\n    return this.renderOperaCard();\n  }\n}\n"],"version":3}

package/dist/esm/index-c8ceadeb.js

@@ -204,6 +204,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './z-range-picker.entry.js').then(processMod, consoleError);
+                case 'z-result-card':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './z-result-card.entry.js').then(processMod, consoleError);
                 case 'z-section-title':
                     return import(
                       /* webpackMode: "lazy" */