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

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,245 @@
+:host {
+  display: block;
+  max-width: fit-content;
+}
+
+:host > article {
+  width: 304px;
+  min-height: 686px;
+  box-sizing: border-box;
+  padding: var(--space-unit) 0;
+  border: solid var(--border-size-medium) var(--color-surface03);
+  background-color: var(--color-surface01);
+  border-radius: var(--border-radius);
+  color: var(--color-default-text);
+  font-family: var(--font-family-sans);
+}
+
+:host > article .main-content {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--space-unit) * 2);
+}
+
+:host > article .main-content .cover {
+  display: flex;
+  overflow: hidden;
+  height: 378px;
+  margin: 0 var(--space-unit);
+  border-radius: var(--border-radius);
+}
+
+:host > article .main-content .cover img {
+  max-width: 100%;
+  max-height: 100%;
+  align-self: end;
+}
+
+:host > article .main-content .card-info {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 var(--space-unit);
+  gap: calc(var(--space-unit) * 2);
+}
+
+:host > article .main-content .card-info .book-data {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section {
+  display: grid;
+  column-gap: calc(var(--space-unit) * 2);
+  grid-template-areas:
+    "authors authors"
+    "title cta";
+  grid-template-columns: auto 24px;
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section .authors {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: calc(var(--space-unit) / 2);
+  -webkit-box-orient: vertical;
+  grid-area: authors;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 54px;
+  -webkit-box-orient: vertical;
+  grid-area: title;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title * {
+  all: unset;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section {
+  margin-bottom: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .volume-title {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .isbn {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
+  display: flex;
+  overflow: hidden;
+  height: 22px;
+  flex-flow: wrap;
+  padding: calc(var(--space-unit) / 2) 0 var(--space-unit);
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.active {
+  --z-tag-bg: var(--color-primary03);
+  --z-tag-text-color: var(--color-default-text);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.disabled {
+  --z-tag-bg: var(--color-surface03);
+  --z-tag-text-color: var(--color-default-text);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.interactive {
+  cursor: pointer;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section .adoption-tag {
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  background-color: var(--green100);
+  border-radius: 100px;
+  text-transform: uppercase;
+}
+
+:host > article .main-content .card-info .ebook-container {
+  height: 64px;
+}
+
+:host > article .main-content .card-info .ebook-container .ebook {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 2) var(--space-unit);
+  background-color: var(--color-primary02);
+  border-radius: var(--border-radius);
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .ebook-container .ebook .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);
+}
+
+:host > article .main-content .card-info .ebook-container .ebook .app-name .ebook-logo {
+  content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+
+:host > article .main-content .card-info .ebook-container .ebook .app-name .laz {
+  color: var(--red500);
+}
+
+:host > article .main-content .card-info .ebook-container .ebook .immersive-reader {
+  cursor: pointer;
+}
+
+::slotted([slot="cta"]) {
+  grid-area: cta;
+}
+
+::slotted([slot="apps"]) {
+  border-top: solid var(--border-size-small) var(--color-surface03);
+}
+
+:host > article.landscape {
+  width: 635px;
+  min-height: 332px;
+  max-height: 428px;
+  padding: 0;
+}
+
+:host > article.landscape .main-content {
+  height: 296px;
+  flex-direction: row;
+  padding: calc(var(--space-unit) * 2);
+}
+
+:host > article.landscape .main-content .cover {
+  display: flex;
+  overflow: hidden;
+  width: 221px;
+  height: auto;
+  margin: 0;
+}
+
+:host > article.landscape .main-content .card-info {
+  margin: 0;
+}
+
+:host > article.landscape .main-content .card-info .book-data {
+  gap: unset;
+}
+
+:host > article.landscape .main-content .card-info .book-data .authors-title-cta-section {
+  grid-template-areas:
+    "authors cta"
+    "title title";
+}
+
+:host > article.landscape .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
+  padding: calc(var(--space-unit) / 2) 0;
+}
+
+:host > article.landscape .main-content .card-info .ebook-container {
+  height: 76px;
+}
+
+:host > article.landscape .main-content .card-info .ebook-container .ebook {
+  padding: var(--space-unit);
+}

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

@@ -0,0 +1,145 @@
+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;
+    }
+    emitAppClick() {
+        this.appClick.emit();
+    }
+    renderLaz() {
+        if (this.laz) {
+            return h("span", { class: "laz" }, "laZ ");
+        }
+        return null;
+    }
+    render() {
+        return (h("div", { key: 'c9879394d9cde5cd439696358e5e9085538c9976' }, h("a", { key: '0cd25a95c95605890842c82e17496fd72204f7a7', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick() }, this.logo && (h("img", { key: '1dfec9f7120a2c3cec8a85fa6be9aa4effbf3615', src: this.logo, alt: "" })), h("div", { key: '5ec63eb9417eaf61362211d00d772f3eac1a2d08', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: 'dbd288ec2a2029320766c619d44748b8b903e721', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '06d04f968e1c7ca65ea0672618e6510fc3504b8f' }, this.info))), h("a", { key: '12eac3132b60412eb18589000a383c029a8294b7', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick() }, h("z-icon", { key: '740aea7f8f978d4c7657ae94b63c0670b106f63b', 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": true,
+                "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 events() {
+        return [{
+                "method": "appClick",
+                "name": "appClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on app link"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    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,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAO/D,MAAM,OAAO,YAAY;;;;;mBAyBhB,IAAI;;;IAYH,YAAY;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAEO,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,0DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,SAAS,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAEjC,IAAI,CAAC,IAAI,IAAI,CACZ,4DACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,GAAG,EAAC,EAAE,GACN,CACH;gBACD,4DAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,SAAS,EAAE;oBAChB,IAAI,CAAC,IAAI,CACN,CACJ;YACH,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,SAAS,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAElC,+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, Event, EventEmitter, 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  /** click on app link */\n  @Event()\n  appClick: EventEmitter;\n\n  private emitAppClick(): void {\n    this.appClick.emit();\n  }\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        <a\n          class=\"app z-link\"\n          href={this.link}\n          aria-label={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n          onClick={() => this.emitAppClick()}\n        >\n          {this.logo && (\n            <img\n              src={this.logo}\n              alt=\"\"\n            />\n          )}\n          <div class=\"name body-4-sb\">\n            {this.renderLaz()}\n            {this.name}\n          </div>\n        </a>\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={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n          onClick={() => this.emitAppClick()}\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,65 @@
+: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);
+}
+
+:host > div .app {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-unit);
+}
+
+:host > div .app.z-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+:host > div .app.z-link:focus {
+  text-decoration: none;
+}
+
+:host > div .app img {
+  width: 24px;
+  height: 24px;
+}
+
+:host > div .app .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;
+}
+
+:host > div .app .name .laz {
+  color: var(--red500);
+}
+
+:host > div 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);
+}