@zanichelli/albe-web-components 16.4.1 → 17.0.0-RC2

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

@@ -0,0 +1,490 @@
+import { h } from "@stencil/core";
+import { BookCardTagStatus, BookCardVariant, ControlSize } from "../../../beans";
+/**
+ * @slot cta - to the right of authors and title (e.g. bookmark icon)
+ * @slot ebook - main action slot on the card (as default, it shows laZ ebook link)
+ * @slot apps - list of card-related apps
+ */
+export class ZBookCard {
+    constructor() {
+        this.variant = BookCardVariant.PORTRAIT;
+        this.cover = undefined;
+        this.authors = undefined;
+        this.operaTitle = undefined;
+        this.volumeTitle = undefined;
+        this.isbn = undefined;
+        this.isbnLabel = "";
+        this.edi = undefined;
+        this.annotated = undefined;
+        this.teacherVersion = undefined;
+        this.adoption = false;
+        this.catalogUrl = undefined;
+        this.ebookUrl = undefined;
+        this.fallbackCover = undefined;
+        this.operaTitleHtmlTag = undefined;
+        this.ediTag = undefined;
+        this.annotatedTag = undefined;
+        this.teacherVersionTag = undefined;
+    }
+    watchEdi() {
+        this.ediTag = typeof this.edi === "string" ? JSON.parse(this.edi) : this.edi;
+    }
+    watchAnnotated() {
+        this.annotatedTag = typeof this.annotated === "string" ? JSON.parse(this.annotated) : this.annotated;
+    }
+    watchTeacherVersion() {
+        this.teacherVersionTag =
+            typeof this.teacherVersion === "string" ? JSON.parse(this.teacherVersion) : this.teacherVersion;
+    }
+    componentWillLoad() {
+        this.watchEdi();
+        this.watchAnnotated();
+        this.watchTeacherVersion();
+    }
+    emitTagClick(e) {
+        this.tagClick.emit(e);
+    }
+    emitCatalogClick() {
+        this.catalogClick.emit();
+    }
+    emitEbookClick() {
+        this.ebookClick.emit();
+    }
+    emitImmersiveReaderClick() {
+        this.immersiveReaderClick.emit();
+    }
+    renderOperaTitle() {
+        const title = this.operaTitleHtmlTag
+            ? `<${this.operaTitleHtmlTag}>${this.operaTitle}</${this.operaTitleHtmlTag}>`
+            : this.operaTitle;
+        return (h("div", { class: "opera-title body-2-sb", innerHTML: title }));
+    }
+    renderIsbnLabel() {
+        return this.isbnLabel ? h("span", { class: "body-4" }, this.isbnLabel) : null;
+    }
+    renderTag(label, tag, id) {
+        return (h("z-tag", { class: { [tag.status]: true, interactive: tag.interactive }, role: tag.interactive ? "button" : undefined, tabIndex: tag.interactive ? 0 : undefined, onClick: () => tag.interactive &&
+                this.emitTagClick({
+                    tag: id,
+                    state: tag.status,
+                }), onKeyUp: (e) => tag.interactive &&
+                e.key === "Enter" &&
+                this.emitTagClick({
+                    tag: id,
+                    state: tag.status,
+                }) }, label));
+    }
+    renderTags() {
+        const tags = [];
+        if (this.edi && Object.values(BookCardTagStatus).includes(this.ediTag.status)) {
+            tags.push(this.renderTag("edi", this.ediTag, "edi"));
+        }
+        if (this.annotated && Object.values(BookCardTagStatus).includes(this.annotatedTag.status)) {
+            tags.push(this.renderTag("annotata", this.annotatedTag, "annotated"));
+        }
+        if (this.teacherVersion && Object.values(BookCardTagStatus).includes(this.teacherVersionTag.status)) {
+            tags.push(this.renderTag("versione insegnante", this.teacherVersionTag, "teacherVersion"));
+        }
+        if (tags.length > 0) {
+            return tags;
+        }
+        return null;
+    }
+    renderCover() {
+        return (h("div", { class: "cover" }, h("img", { src: this.cover, onError: () => {
+                if (this.fallbackCover) {
+                    this.cover = this.fallbackCover;
+                }
+            }, "aria-hidden": "true" })));
+    }
+    renderLaZEbookLogo() {
+        return (h("img", { class: "ebook-logo", "aria-hidden": "true" }));
+    }
+    render() {
+        return (h("article", { key: 'f9e80e7c959a302036ee7a687089108c76b44ea4', class: {
+                [this.variant]: true,
+            } }, h("div", { key: 'a3e48e6f8687772d71eb8774e767f41b62245a5f', class: "main-content" }, this.renderCover(), h("div", { key: '2aaf920aa4d7237371f9d10b127c870f643b90a6', class: "card-info" }, h("div", { key: '69ab680f313d3ac39a2bbdd3071c8427f6381b3c', class: "book-data" }, h("div", { key: 'aaf89af61d53c4ca3b9b662f4973100228e21eff', class: "authors-title-cta-section" }, h("div", { key: '6a6c70eb17535bbd3d8623ed9b89955be714425f', class: "authors body-4", "aria-description": "autori" }, this.authors), this.renderOperaTitle(), h("slot", { key: 'e43213c96602c906e270d35845575a293289ea09', name: "cta" })), h("div", { key: '34b7366abfbe7682dd523a2c2081c3b970e25b18', class: "isbn-tags-link-section" }, h("div", { key: '25910f6f2b53305046585c21dd88bc043e0db505', class: "isbn-tags-section" }, h("div", { key: '1ca1de8dd4561034f1f56c2b53f9ac4915974c6c', class: "volume-title body-4" }, this.volumeTitle), h("div", { key: '9730d37e5f0334af5b8d8a21aaffda03c2848ecf', class: "isbn body-4-sb", "aria-description": `isbn ${this.isbnLabel}` }, this.isbn, " ", this.renderIsbnLabel()), h("div", { key: '789a3911892cac4ebea17efbfb566263384275a0', class: "tags" }, this.renderTags())), h("div", { key: '2a6eaec14027058aa9ffa90c1ac0c9fd224cc1e3', class: "link-section" }, h("div", { key: 'aa0b497cb015e4a0130ba04b312311825254debd', class: "catalog-link" }, this.catalogUrl && (h("a", { key: '4e5eae654d9209163101f3667940975cc0da3c96', href: this.catalogUrl, class: "z-link z-link-icon body-4-sb immersive-reader", onClick: () => this.emitCatalogClick() }, "Scheda catalogo", h("z-icon", { key: '6f9c74881b95017e87b6cef80f921d02d712d547', name: "arrow-quad-north-east", height: 16, width: 16, fill: "color-primary01-icon" })))), this.adoption && h("div", { key: 'be44fae939a232d9b1a1f047f38d0542774d65d0', class: "adoption-tag body-5-sb" }, "adottato")))), h("div", { key: '378dab793396b01552f3aaceae533192133d1031', class: "ebook-container" }, h("slot", { key: 'e2643e42cb38a7ff9426fd48d022c9b28a060c5a', name: "ebook" }, this.ebookUrl && (h("div", { key: 'a86738db4e4ec7994199ee70eac87f970cf6c9f3', class: "ebook" }, h("div", { key: '9de20615bda00b18f99182df30307d86f105fc12' }, h("div", { key: '29cdada16c2e0dbcc82691400a63446f4f44d496', class: "app-name" }, this.renderLaZEbookLogo(), h("div", { key: '24b7721360f27797458facac2366016901ecca25', class: "body-4-sb" }, h("span", { key: '18993222669a5f96caf6fafd69c3659117f528d6', class: "laz" }, "laZ"), " Ebook")), this.variant === BookCardVariant.LANDSCAPE && (h("div", { key: '5adb1c1bd1894c31a16bc8c325c61279f537b005', class: "body-5" }, "Anche nella versione libro liquido con", " ", h("span", { key: '70448ac5075708c40213a1d067557f049ceb6628', class: "body-5-sb immersive-reader", onClick: () => this.emitImmersiveReaderClick() }, "strumento di lettura immersiva")))), h("z-button", { key: '4ec8646b2a3d50e9c338c37558a272e41aa12634', size: ControlSize.X_SMALL, href: this.ebookUrl, onClick: () => this.emitEbookClick(), role: "link", "aria-description": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, "leggi ebook"))))))), h("slot", { key: '438e4a58e74bbf501a09225e67f4c52ec71ba72b', name: "apps" })));
+    }
+    static get is() { return "z-book-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css", "../../css-components/z-link/styles.css", "../../../tokens/typography.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css", "../../css-components/z-link/styles.css", "../../../tokens/typography.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BookCardVariant",
+                    "resolved": "BookCardVariant.LANDSCAPE | BookCardVariant.PORTRAIT",
+                    "references": {
+                        "BookCardVariant": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::BookCardVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card variant: landscape, portrait"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "BookCardVariant.PORTRAIT"
+            },
+            "cover": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cover URL"
+                },
+                "attribute": "cover",
+                "reflect": false
+            },
+            "authors": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Authors"
+                },
+                "attribute": "authors",
+                "reflect": false
+            },
+            "operaTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Opera title"
+                },
+                "attribute": "opera-title",
+                "reflect": false
+            },
+            "volumeTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Volume title"
+                },
+                "attribute": "volume-title",
+                "reflect": false
+            },
+            "isbn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Main ISBN"
+                },
+                "attribute": "isbn",
+                "reflect": false
+            },
+            "isbnLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] ISBN label"
+                },
+                "attribute": "isbn-label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "edi": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BookCardTag | string",
+                    "resolved": "string | { status: BookCardTagStatus; interactive: boolean; }",
+                    "references": {
+                        "BookCardTag": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::BookCardTag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] EDI tag"
+                },
+                "attribute": "edi",
+                "reflect": false
+            },
+            "annotated": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BookCardTag | string",
+                    "resolved": "string | { status: BookCardTagStatus; interactive: boolean; }",
+                    "references": {
+                        "BookCardTag": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::BookCardTag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Annotated tag"
+                },
+                "attribute": "annotated",
+                "reflect": false
+            },
+            "teacherVersion": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BookCardTag | string",
+                    "resolved": "string | { status: BookCardTagStatus; interactive: boolean; }",
+                    "references": {
+                        "BookCardTag": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::BookCardTag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Teacher version tag"
+                },
+                "attribute": "teacher-version",
+                "reflect": false
+            },
+            "adoption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Show adoption badge"
+                },
+                "attribute": "adoption",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "catalogUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Show catalog link to correspondent resource"
+                },
+                "attribute": "catalog-url",
+                "reflect": false
+            },
+            "ebookUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Show link to the ebook resource"
+                },
+                "attribute": "ebook-url",
+                "reflect": false
+            },
+            "fallbackCover": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Fallback cover URL"
+                },
+                "attribute": "fallback-cover",
+                "reflect": false
+            },
+            "operaTitleHtmlTag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Set a specific h level as html tag for opera title"
+                },
+                "attribute": "opera-title-html-tag",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ediTag": {},
+            "annotatedTag": {},
+            "teacherVersionTag": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tagClick",
+                "name": "tagClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on tag"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "catalogClick",
+                "name": "catalogClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on catalog link"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ebookClick",
+                "name": "ebookClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on ebook link"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "immersiveReaderClick",
+                "name": "immersiveReaderClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on immersive reader"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "edi",
+                "methodName": "watchEdi"
+            }, {
+                "propName": "annotated",
+                "methodName": "watchAnnotated"
+            }, {
+                "propName": "teacherVersion",
+                "methodName": "watchTeacherVersion"
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {BookCardTag, BookCardTagEvent, BookCardTagStatus, BookCardVariant, ControlSize} from \"../../../beans\";\n\n/**\n * @slot cta - to the right of authors and title (e.g. bookmark icon)\n * @slot ebook - main action slot on the card (as default, it shows laZ ebook link)\n * @slot apps - list of card-related apps\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /** Card variant: landscape, portrait */\n  @Prop()\n  variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n  /** Cover URL */\n  @Prop()\n  cover: string;\n\n  /** [optional] Authors */\n  @Prop()\n  authors?: string;\n\n  /** [optional] Opera title */\n  @Prop()\n  operaTitle?: string;\n\n  /** [optional] Volume title */\n  @Prop()\n  volumeTitle?: string;\n\n  /** [optional] Main ISBN */\n  @Prop()\n  isbn?: string;\n\n  /** [optional] ISBN label */\n  @Prop()\n  isbnLabel = \"\";\n\n  /** [optional] EDI tag */\n  @Prop()\n  edi?: BookCardTag | string;\n\n  /** [optional] Annotated tag */\n  @Prop()\n  annotated?: BookCardTag | string;\n\n  /** [optional] Teacher version tag */\n  @Prop()\n  teacherVersion?: BookCardTag | string;\n\n  /** [optional] Show adoption badge */\n  @Prop()\n  adoption?: boolean = false;\n\n  /** [optional] Show catalog link to correspondent resource */\n  @Prop()\n  catalogUrl?: string;\n\n  /** [optional] Show link to the ebook resource */\n  @Prop()\n  ebookUrl?: string;\n\n  /** [optional] Fallback cover URL */\n  @Prop()\n  fallbackCover?: string;\n\n  /** [optional] Set a specific h level as html tag for opera title */\n  @Prop()\n  operaTitleHtmlTag?: string;\n\n  @State()\n  ediTag;\n\n  @State()\n  annotatedTag;\n\n  @State()\n  teacherVersionTag;\n\n  /** click on tag */\n  @Event()\n  tagClick: EventEmitter;\n\n  /** click on catalog link */\n  @Event()\n  catalogClick: EventEmitter;\n\n  /** click on ebook link */\n  @Event()\n  ebookClick: EventEmitter;\n\n  /** click on immersive reader */\n  @Event()\n  immersiveReaderClick: EventEmitter;\n\n  @Watch(\"edi\")\n  watchEdi(): void {\n    this.ediTag = typeof this.edi === \"string\" ? JSON.parse(this.edi) : this.edi;\n  }\n\n  @Watch(\"annotated\")\n  watchAnnotated(): void {\n    this.annotatedTag = typeof this.annotated === \"string\" ? JSON.parse(this.annotated) : this.annotated;\n  }\n\n  @Watch(\"teacherVersion\")\n  watchTeacherVersion(): void {\n    this.teacherVersionTag =\n      typeof this.teacherVersion === \"string\" ? JSON.parse(this.teacherVersion) : this.teacherVersion;\n  }\n\n  componentWillLoad(): void {\n    this.watchEdi();\n    this.watchAnnotated();\n    this.watchTeacherVersion();\n  }\n\n  private emitTagClick(e: BookCardTagEvent): void {\n    this.tagClick.emit(e);\n  }\n\n  private emitCatalogClick(): void {\n    this.catalogClick.emit();\n  }\n\n  private emitEbookClick(): void {\n    this.ebookClick.emit();\n  }\n\n  private emitImmersiveReaderClick(): void {\n    this.immersiveReaderClick.emit();\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.operaTitleHtmlTag\n      ? `<${this.operaTitleHtmlTag}>${this.operaTitle}</${this.operaTitleHtmlTag}>`\n      : this.operaTitle;\n\n    return (\n      <div\n        class=\"opera-title body-2-sb\"\n        innerHTML={title}\n      />\n    );\n  }\n\n  private renderIsbnLabel(): HTMLDivElement | null {\n    return this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null;\n  }\n\n  private renderTag(label: string, tag: BookCardTag, id: string): HTMLDivElement {\n    return (\n      <z-tag\n        class={{[tag.status]: true, interactive: tag.interactive}}\n        role={tag.interactive ? \"button\" : undefined}\n        tabIndex={tag.interactive ? 0 : undefined}\n        onClick={() =>\n          tag.interactive &&\n          this.emitTagClick({\n            tag: id,\n            state: tag.status,\n          })\n        }\n        onKeyUp={(e: KeyboardEvent) =>\n          tag.interactive &&\n          e.key === \"Enter\" &&\n          this.emitTagClick({\n            tag: id,\n            state: tag.status,\n          })\n        }\n      >\n        {label}\n      </z-tag>\n    );\n  }\n\n  private renderTags(): HTMLDivElement[] | null {\n    const tags = [];\n\n    if (this.edi && Object.values(BookCardTagStatus).includes(this.ediTag.status)) {\n      tags.push(this.renderTag(\"edi\", this.ediTag, \"edi\"));\n    }\n\n    if (this.annotated && Object.values(BookCardTagStatus).includes(this.annotatedTag.status)) {\n      tags.push(this.renderTag(\"annotata\", this.annotatedTag, \"annotated\"));\n    }\n\n    if (this.teacherVersion && Object.values(BookCardTagStatus).includes(this.teacherVersionTag.status)) {\n      tags.push(this.renderTag(\"versione insegnante\", this.teacherVersionTag, \"teacherVersion\"));\n    }\n\n    if (tags.length > 0) {\n      return tags;\n    }\n\n    return null;\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        <img\n          src={this.cover}\n          onError={() => {\n            if (this.fallbackCover) {\n              this.cover = this.fallbackCover;\n            }\n          }}\n          aria-hidden=\"true\"\n        />\n      </div>\n    );\n  }\n\n  private renderLaZEbookLogo(): HTMLImageElement {\n    return (\n      <img\n        class=\"ebook-logo\"\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <article\n        class={{\n          [this.variant]: true,\n        }}\n      >\n        <div class=\"main-content\">\n          {this.renderCover()}\n          <div class=\"card-info\">\n            <div class=\"book-data\">\n              <div class=\"authors-title-cta-section\">\n                <div\n                  class=\"authors body-4\"\n                  aria-description=\"autori\"\n                >\n                  {this.authors}\n                </div>\n                {this.renderOperaTitle()}\n                <slot name=\"cta\"></slot>\n              </div>\n              <div class=\"isbn-tags-link-section\">\n                <div class=\"isbn-tags-section\">\n                  <div class=\"volume-title body-4\">{this.volumeTitle}</div>\n                  <div\n                    class=\"isbn body-4-sb\"\n                    aria-description={`isbn ${this.isbnLabel}`}\n                  >\n                    {this.isbn} {this.renderIsbnLabel()}\n                  </div>\n                  <div class=\"tags\">{this.renderTags()}</div>\n                </div>\n                <div class=\"link-section\">\n                  <div class=\"catalog-link\">\n                    {this.catalogUrl && (\n                      <a\n                        href={this.catalogUrl}\n                        class=\"z-link z-link-icon body-4-sb immersive-reader\"\n                        onClick={() => this.emitCatalogClick()}\n                      >\n                        Scheda catalogo\n                        <z-icon\n                          name=\"arrow-quad-north-east\"\n                          height={16}\n                          width={16}\n                          fill=\"color-primary01-icon\"\n                        ></z-icon>\n                      </a>\n                    )}\n                  </div>\n                  {this.adoption && <div class=\"adoption-tag body-5-sb\">adottato</div>}\n                </div>\n              </div>\n            </div>\n            <div class=\"ebook-container\">\n              <slot name=\"ebook\">\n                {this.ebookUrl && (\n                  <div class=\"ebook\">\n                    <div>\n                      <div class=\"app-name\">\n                        {this.renderLaZEbookLogo()}\n                        <div class=\"body-4-sb\">\n                          <span class=\"laz\">laZ</span> Ebook\n                        </div>\n                      </div>\n                      {this.variant === BookCardVariant.LANDSCAPE && (\n                        <div class=\"body-5\">\n                          Anche nella versione libro liquido con{\" \"}\n                          <span\n                            class=\"body-5-sb immersive-reader\"\n                            onClick={() => this.emitImmersiveReaderClick()}\n                          >\n                            strumento di lettura immersiva\n                          </span>\n                        </div>\n                      )}\n                    </div>\n                    <z-button\n                      size={ControlSize.X_SMALL}\n                      href={this.ebookUrl}\n                      onClick={() => this.emitEbookClick()}\n                      role=\"link\"\n                      aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n                    >\n                      leggi ebook\n                    </z-button>\n                  </div>\n                )}\n              </slot>\n            </div>\n          </div>\n        </div>\n        <slot name=\"apps\"></slot>\n      </article>\n    );\n  }\n}\n"]}

package/dist/collection/components/book-card/z-book-card/index.stories.js

@@ -0,0 +1,149 @@
+import { html } from "lit";
+import { BookCardTagStatus, BookCardVariant } from "../../../beans";
+import "../../z-button/index";
+import "../../z-icon/index";
+import "../../z-tag/index";
+import "../z-book-card-app/index";
+import "./index";
+const StoryMeta = {
+    title: "ZBookCard/ZBookCard",
+    component: "z-book-card",
+    argTypes: {
+        variant: {
+            control: {
+                type: "inline-radio",
+            },
+            options: Object.values(BookCardVariant),
+        },
+        edi: {
+            control: {
+                type: "object",
+            },
+        },
+        annotated: {
+            control: {
+                type: "object",
+            },
+        },
+        teacherVersion: {
+            control: {
+                type: "object",
+            },
+        },
+        theme: {
+            control: {
+                type: "inline-radio",
+            },
+            options: ["theme-default", "theme-dark", "theme-black-yellow"],
+        },
+    },
+    args: {
+        variant: BookCardVariant.LANDSCAPE,
+        cover: "https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg",
+        operaTitle: "Matematica.azzurro",
+        volumeTitle: "Volume 3 con Tutor",
+        authors: "Massimo Bergamini, Anna Trifone, Graziella Barozzi",
+        isbn: "9788808930552",
+        isbnLabel: "(ed. cartacea)",
+        adoption: true,
+        edi: { status: BookCardTagStatus.ACTIVE, interactive: true },
+        annotated: { status: BookCardTagStatus.DISABLED, interactive: true },
+        teacherVersion: { status: BookCardTagStatus.ACTIVE, interactive: false },
+        catalogUrl: "https://www.zanichelli.it/ricerca/prodotti/matematica-multimediale-blu3ed?qid=9788808710932",
+        ebookUrl: "https://www.zanichelli.it/ricerca",
+        fallbackCover: "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
+        operaTitleHtmlTag: null,
+        theme: "theme-default",
+    },
+};
+export default StoryMeta;
+export const Card = {
+    render: (args) => html `<z-book-card
+      variant=${args.variant}
+      cover=${args.cover}
+      authors=${args.authors}
+      opera-title=${args.operaTitle}
+      volume-title=${args.volumeTitle}
+      isbn=${args.isbn}
+      isbn-label=${args.isbnLabel}
+      edi=${JSON.stringify(args.edi)}
+      annotated=${JSON.stringify(args.annotated)}
+      teacher-version=${JSON.stringify(args.teacherVersion)}
+      adoption=${args.adoption}
+      catalog-url=${args.catalogUrl}
+      ebook-url=${args.ebookUrl}
+      fallback-cover=${args.fallbackCover}
+      opera-title-html-tag=${args.operaTitleHtmlTag}
+      class=${args.theme}
+    ></z-book-card>`,
+};
+export const WithSlottedContent = {
+    render: (args) => html `<z-book-card
+      variant=${args.variant}
+      cover=${args.cover}
+      authors=${args.authors}
+      opera-title=${args.operaTitle}
+      volume-title=${args.volumeTitle}
+      isbn=${args.isbn}
+      isbn-label=${args.isbnLabel}
+      edi=${JSON.stringify(args.edi)}
+      annotated=${JSON.stringify(args.annotated)}
+      teacher-version=${JSON.stringify(args.teacherVersion)}
+      adoption=${args.adoption}
+      catalog-url=${args.catalogUrl}
+      ebook-url=${args.ebookUrl}
+      fallback-cover=${args.fallbackCover}
+      opera-title-html-tag=${args.operaTitleHtmlTag}
+      class=${args.theme}
+    >
+      <div slot="cta">
+        <z-icon
+          style="padding: 4px; cursor: pointer;"
+          name="star-full"
+          width="20"
+          height="20"
+        ></z-icon>
+      </div>
+      <div slot="ebook">
+        <z-button
+          variant="secondary"
+          size="x-small"
+          >custom ebook button</z-button
+        >
+      </div>
+      <div
+        slot="apps"
+        style="display: flex; flex-wrap: wrap"
+      >
+        <z-book-card-app
+          icon="https://placehold.co/24"
+          name="Tutor di matematica"
+          info="test test"
+          link="http://localhost"
+          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
+        ></z-book-card-app
+        ><z-book-card-app
+          icon="https://placehold.co/24"
+          name="Esercizi"
+          info="test test"
+          link="http://localhost"
+          style="width:315px; height:47px; border-bottom: 1px solid #d6d6d6"
+        ></z-book-card-app
+        ><z-book-card-app
+          icon="https://placehold.co/24"
+          name="Mappe"
+          info="test test"
+          link="http://localhost"
+          style="width:315px; height:47px; border-right: 1px solid #d6d6d6"
+        ></z-book-card-app
+        ><z-book-card-app
+          icon="https://placehold.co/24"
+          name="Scrittura"
+          info="test test"
+          link="http://localhost"
+          style="width:315px; height:47px;"
+        ></z-book-card-app>
+      </div>
+    </z-book-card>`,
+};
+//# sourceMappingURL=index.stories.js.map