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

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

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

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

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

@@ -0,0 +1,201 @@
+:host {
+  display: block;
+  max-width: fit-content;
+}
+
+:host > article {
+  background-color: var(--color-surface01);
+  color: var(--color-default-text);
+  font-family: var(--font-family-sans);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host > article.landscape {
+    width: 635px;
+    min-height: 332px;
+    max-height: 428px;
+    box-sizing: border-box;
+    border: solid var(--border-size-medium) var(--color-surface03);
+    border-radius: var(--border-radius);
+
+    .main-content {
+      display: flex;
+      height: 296px;
+      padding: calc(var(--space-unit) * 2);
+      gap: calc(var(--space-unit) * 2);
+
+      .cover {
+        display: flex;
+        overflow: hidden;
+        width: 221px;
+        border-radius: var(--border-radius);
+
+        img {
+          max-width: 100%;
+          max-height: 100%;
+          align-self: end;
+        }
+      }
+
+      .card-info {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: calc(var(--space-unit) * 2);
+
+        .book-data {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .authors-title-cta-section {
+            display: flex;
+            gap: calc(var(--space-unit) * 2);
+
+            .authors-title {
+              flex: 1;
+
+              .authors {
+                display: -webkit-box;
+                overflow: hidden;
+                height: 20px;
+                margin-bottom: calc(var(--space-unit) / 2);
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                line-clamp: 1;
+                text-overflow: ellipsis;
+              }
+
+              .opera-title {
+                display: -webkit-box;
+                overflow: hidden;
+                height: 54px;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                text-overflow: ellipsis;
+
+                * {
+                  all: unset;
+                }
+              }
+            }
+          }
+
+          .isbn-tags-link-section {
+            .isbn-tags-section {
+              margin-bottom: var(--space-unit);
+
+              .volume-title {
+                display: -webkit-box;
+                overflow: hidden;
+                height: 20px;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                line-clamp: 1;
+                text-overflow: ellipsis;
+              }
+
+              .isbn {
+                display: -webkit-box;
+                overflow: hidden;
+                height: 20px;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                line-clamp: 1;
+                text-overflow: ellipsis;
+              }
+
+              .tags {
+                display: flex;
+                overflow: hidden;
+                height: 22px;
+                flex-flow: wrap;
+                padding: calc(var(--space-unit) / 2) 0;
+                gap: var(--space-unit);
+
+                z-tag.active {
+                  --z-tag-bg: var(--color-primary03);
+                  --z-tag-text-color: var(--color-default-text);
+                }
+
+                z-tag.disabled {
+                  --z-tag-bg: var(--color-surface03);
+                  --z-tag-text-color: var(--color-default-text);
+                }
+
+                z-tag.interactive {
+                  cursor: pointer;
+                }
+
+                z-tag:focus {
+                  box-shadow: var(--shadow-focus-primary);
+                  outline: none;
+                }
+              }
+            }
+
+            .link-section {
+              display: flex;
+              height: 24px;
+              align-items: center;
+              justify-content: space-between;
+              gap: var(--space-unit);
+
+              .adoption-tag {
+                padding: calc(var(--space-unit) / 2) var(--space-unit);
+                background-color: var(--green100);
+                border-radius: 100px;
+                text-transform: uppercase;
+              }
+            }
+          }
+        }
+
+        .ebook-container {
+          height: 76px;
+
+          .ebook {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--space-unit);
+            background-color: var(--color-primary02);
+            border-radius: var(--border-radius);
+            gap: var(--space-unit);
+
+            .app-name {
+              display: flex;
+              align-items: center;
+              padding: calc(var(--space-unit) / 2) 0;
+              font-family: var(--font-family-serif);
+              gap: calc(var(--space-unit) / 2);
+
+              .laz {
+                color: var(--red500);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    ::slotted([slot="apps"]) {
+      border-top: solid var(--border-size-small) var(--color-surface03);
+    }
+  }
+}
+
+/* Desktop breakpoint */
+
+/*
+@media (min-width: 1152px) {
+} */
+
+/* Wide breakpoint */
+
+/* @media (min-width: 1366px) {
+} */

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

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+import { ControlSize, InfoRevealPosition } from "../../../beans";
+export class ZBookCardApp {
+    constructor() {
+        this.logo = undefined;
+        this.name = undefined;
+        this.link = undefined;
+        this.laz = true;
+        this.info = undefined;
+    }
+    renderLaz() {
+        if (this.laz) {
+            return h("span", { class: "laz" }, "laZ ");
+        }
+        return null;
+    }
+    render() {
+        return (h("div", { key: 'c56a9dc7316470c5349bc750e55066ecdb3d8e95' }, h("div", { key: '1353c730c89948b11db3462ff89a6d07b93dea5a', class: "app" }, h("img", { key: 'ffa7d48f3b1c35bdda38962d7bed51bdd4b4d8a7', src: this.logo, alt: "" }), h("div", { key: '054a4d42c9df4d4676bbd6b729e063e22f8efcff', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '148ee39d71fefd62fbf975d324ca53ffa7110686', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '02f377d5185fb3db27eafe1903fe1ced04d232c7' }, this.info))), h("a", { key: '9ee7921682cf916f891fbfafc3b8c18a041572ef', class: "z-link z-link-icon", href: this.link, "aria-label": this.name }, h("z-icon", { key: 'ee2725b4d69c202de4d9ffe907b0da19e0e68b36', name: "chevron-right", width: 16, height: 16, fill: "color-primary01-icon" }))));
+    }
+    static get is() { return "z-book-card-app"; }
+    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 {
+            "logo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "App logo url"
+                },
+                "attribute": "logo",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "App name"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "link": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "link to the app website"
+                },
+                "attribute": "link",
+                "reflect": false
+            },
+            "laz": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show or hide laZ prefix before app name"
+                },
+                "attribute": "laz",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Info text to show as inforeveal"
+                },
+                "attribute": "info",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card-app/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAO/D,MAAM,OAAO,YAAY;;;;;mBAyBhB,IAAI;;;IAQH,SAAS;QACf,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,YAAM,KAAK,EAAC,KAAK,WAAY,CAAC;QACvC,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAC,KAAK;gBACd,4DACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,GAAG,EAAC,EAAE,GACN;gBACF,4DAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,SAAS,EAAE;oBAChB,IAAI,CAAC,IAAI,CACN,CACF;YACL,IAAI,CAAC,IAAI,IAAI,CACZ,sEACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,kBAAkB,CAAC,SAAS,EACtC,KAAK,EAAC,aAAa;gBAEnB,8DAAM,IAAI,CAAC,IAAI,CAAO,CACR,CACjB;YACD,0DACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,IAAI,CAAC,IAAI;gBAErB,+DACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,sBAAsB,GACnB,CACR,CACA,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Prop, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../../beans\";\n\n@Component({\n  tag: \"z-book-card-app\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZBookCardApp {\n  @Element() hostElement: HTMLZBookCardAppElement;\n\n  /**\n   * App logo url\n   */\n  @Prop()\n  logo: string;\n\n  /**\n   * App name\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * link to the app website\n   */\n  @Prop()\n  link: string;\n\n  /**\n   * Show or hide laZ prefix before app name\n   */\n  @Prop()\n  laz? = true;\n\n  /**\n   * Info text to show as inforeveal\n   */\n  @Prop()\n  info?: string;\n\n  private renderLaz(): HTMLSpanElement | null {\n    if (this.laz) {\n      return <span class=\"laz\">laZ </span>;\n    }\n\n    return null;\n  }\n\n  render(): HTMLZBookCardAppElement {\n    return (\n      <div>\n        <div class=\"app\">\n          <img\n            src={this.logo}\n            alt=\"\"\n          />\n          <div class=\"name body-4-sb\">\n            {this.renderLaz()}\n            {this.name}\n          </div>\n        </div>\n        {this.info && (\n          <z-info-reveal\n            icon=\"info\"\n            size={ControlSize.X_SMALL}\n            position={InfoRevealPosition.TOP_RIGHT}\n            class=\"info body-5\"\n          >\n            <div>{this.info}</div>\n          </z-info-reveal>\n        )}\n        <a\n          class=\"z-link z-link-icon\"\n          href={this.link}\n          aria-label={this.name}\n        >\n          <z-icon\n            name=\"chevron-right\"\n            width={16}\n            height={16}\n            fill=\"color-primary01-icon\"\n          ></z-icon>\n        </a>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,29 @@
+import { html } from "lit";
+import "../../z-button/index";
+import "../../z-icon/index";
+import "../../z-tag/index";
+import "../z-book-card-app/index";
+import "./index";
+const StoryMeta = {
+    title: "ZBookCard/ZBookCardApp",
+    component: "z-book-card-app",
+    argTypes: {},
+    args: {
+        logo: "https://placehold.co/24",
+        name: "Esercizi",
+        laz: true,
+        info: "Cosa fa l'applicazione?",
+        link: "link-applicazione",
+    },
+};
+export default StoryMeta;
+export const CardApp = {
+    render: (args) => html `<z-book-card-app
+      logo=${args.logo}
+      name=${args.name}
+      laz=${args.laz}
+      info=${args.info}
+      link=${args.link}
+    ></z-book-card-app>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card-app/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,0BAA0B,CAAC;AAClC,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,IAAI;QACT,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,mBAAmB;KAC1B;CACsC,CAAC;AAE1C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;YACV,IAAI,CAAC,GAAG;aACP,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;wBACE;CACP,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZBookCardApp} from \".\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardAppStoriesArgs = ZBookCardApp;\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCardApp\",\n  component: \"z-book-card-app\",\n  argTypes: {},\n  args: {\n    logo: \"https://placehold.co/24\",\n    name: \"Esercizi\",\n    laz: true,\n    info: \"Cosa fa l'applicazione?\",\n    link: \"link-applicazione\",\n  },\n} satisfies Meta<ZBookCardAppStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardAppStoriesArgs>;\n\nexport const CardApp = {\n  render: (args) =>\n    html`<z-book-card-app\n      logo=${args.logo}\n      name=${args.name}\n      laz=${args.laz}\n      info=${args.info}\n      link=${args.link}\n    ></z-book-card-app>`,\n} satisfies Story;\n"]}

package/dist/collection/components/book-card/z-book-card-app/styles.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  width: inherit;
+  min-width: 300px;
+  height: inherit;
+  min-height: 32px;
+  background-color: var(--color-surface01);
+}
+
+:host > div {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-unit) calc(var(--space-unit) * 1.5);
+  gap: calc(var(--space-unit) * 2);
+
+  .app {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--space-unit);
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+
+    .name {
+      display: -webkit-box;
+      overflow: hidden;
+      height: 20px;
+      -webkit-box-orient: vertical;
+      font-family: var(--font-family-serif);
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      text-overflow: ellipsis;
+
+      .laz {
+        color: var(--red500);
+      }
+    }
+  }
+
+  z-info-reveal {
+    --z-info-reveal-panel-width: 250px;
+
+    font-family: var(--font-family-sans);
+
+    --color-surface05: var(--color-surface01);
+    --color-text-inverse: var(--color-default-text);
+    --color-inverse-icon: var(--color-primary01);
+  }
+}