@zanichelli/albe-web-components 9.0.0 → 9.1.0-RC1

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

@@ -0,0 +1,330 @@
+import { h } from "@stencil/core";
+import { BookCardVariant } from "../../beans";
+import { mobileBreakpoint } from "../../constants/breakpoints";
+import { handleEnterKeydSubmit, randomId } from "../../utils/utils";
+/**
+ * @slot resources - books resources (extended variant only)
+ * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)
+ * @slot tags - card tags (extended and search variant only)
+ * @slot footer-cta - footer cta button (search and compact variant only)
+ * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
+ * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
+ * @cssprop --z-book-card-compact-width - compact card custom width
+ * @cssprop --z-book-card-compact-height - compact card custom height
+ */
+export class ZBookCard {
+  constructor() {
+    this.isMobile = false;
+    this.hasResources = false;
+    this.showResources = false;
+    this.moveFocusToResources = false;
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+  }
+  componentWillLoad() {
+    this.id = `id-${randomId()}`;
+    this.handleResize();
+  }
+  componentWillRender() {
+    this.handleResources();
+  }
+  componentDidRender() {
+    if (this.moveFocusToResources) {
+      this.resourcesWrapper.focus();
+      this.moveFocusToResources = false;
+    }
+  }
+  handleResources() {
+    var _a;
+    if (this.variant !== BookCardVariant.EXPANDED || !this.isMobile) {
+      return;
+    }
+    this.hasResources = ((_a = this.hostElement.querySelectorAll("[slot=resources]")) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  toggleResources() {
+    this.showResources = !this.showResources;
+    if (this.showResources) {
+      this.moveFocusToResources = true;
+    }
+  }
+  renderCard() {
+    switch (this.variant) {
+      case BookCardVariant.EXPANDED:
+        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();
+      case BookCardVariant.COMPACT:
+        return this.renderCompactCard();
+      case BookCardVariant.SEARCH:
+        return this.renderSearchCard();
+    }
+  }
+  renderExpandedCard() {
+    return (h("div", { class: "wrapper" }, this.renderCover(), h("div", { class: "content" }, h("div", { class: "top" }, h("div", { class: "info" }, h("div", { class: "left" }, this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("div", { class: "right" }, this.renderHeaderCtaSlot())), this.renderTagsSlot()), h("div", { class: "bottom" }, this.renderResourcesSlot()))));
+  }
+  renderMobileExpandedCard() {
+    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, this.renderOperaTitle(), this.renderHeaderCtaSlot()), this.renderCover(), h("div", { class: "content" }, this.renderTagsSlot(), this.renderAuthors(), this.renderVolumeTitle(), this.renderIsbn()), this.hasResources && (h("div", { class: `footer ${this.showResources ? "open" : "close"}` }, this.renderResourcesSlot(), this.renderShowResources()))));
+  }
+  renderSearchCard() {
+    return (h("div", { class: "wrapper-container" }, h("div", { class: "wrapper" }, h("div", { class: "header" }, this.renderOperaTitle(), this.renderHeaderCtaSlot()), this.renderCover(), h("div", { class: "content" }, this.renderTagsSlot(), this.renderAuthors(), this.renderVolumeTitle(), this.renderIsbn())), this.renderFooterCtaSlot()));
+  }
+  renderCompactCard() {
+    return (h("div", { class: "wrapper" }, this.renderCover(), h("div", { class: "content" }, this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), this.renderFooterCtaSlot()));
+  }
+  renderCover() {
+    return (h("div", { class: "cover" }, this.ribbon && this.variant !== BookCardVariant.COMPACT && (h("div", { class: "ribbon" }, h("span", null, this.ribbon))), h("img", { src: this.cover, onError: () => {
+        if (this.fallbackCover) {
+          this.cover = this.fallbackCover;
+        }
+      }, "aria-hidden": "true" })));
+  }
+  renderOperaTitle() {
+    const title = this.operaTitleTag
+      ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`
+      : this.operaTitle;
+    return (h("div", { class: "title", innerHTML: title }));
+  }
+  renderVolumeTitle() {
+    return this.volumeTitle ? h("div", { class: "subtitle" }, this.volumeTitle) : null;
+  }
+  renderAuthors() {
+    return this.authors ? (h("div", { class: "authors", "aria-description": "Autori" }, this.authors)) : null;
+  }
+  renderIsbn() {
+    if (!this.isbn) {
+      return null;
+    }
+    return (h("div", { class: "isbn" }, h("span", { class: "code", "aria-description": "ISBN edizione cartacea" }, this.isbn), h("span", { class: "label" }, " (ed. cartacea)")));
+  }
+  renderShowResources() {
+    return (h("z-link", { icon: this.showResources ? "chevron-up" : "chevron-down", iconposition: "right", role: "button", class: "show-resources", "aria-label": `Risorse del libro ${this.operaTitle}`, "aria-expanded": this.showResources.toString(), "aria-haspopup": "menu", "aria-controls": `resources-${this.id}`, onClick: () => this.toggleResources(), onKeyUp: (e) => handleEnterKeydSubmit(e, this.toggleResources.bind(this)) }, this.showResources ? "Chiudi" : "Vedi tutto"));
+  }
+  renderTagsSlot() {
+    return (h("div", { class: "tags" }, h("slot", { name: "tags" })));
+  }
+  renderHeaderCtaSlot() {
+    return h("slot", { name: "header-cta" });
+  }
+  renderResourcesSlot() {
+    return (h("div", { id: `resources-${this.id}`, class: "resources", tabIndex: this.showResources ? 0 : -1, ref: (el) => (this.resourcesWrapper = el) }, h("slot", { name: "resources" })));
+  }
+  renderFooterCtaSlot() {
+    return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
+  }
+  render() {
+    return h("article", { class: `${this.variant} ${this.borderless ? "borderless" : ""}` }, this.renderCard());
+  }
+  static get is() { return "z-book-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BookCardVariant",
+          "resolved": "BookCardVariant.COMPACT | BookCardVariant.EXPANDED | BookCardVariant.SEARCH",
+          "references": {
+            "BookCardVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card variant: expanded, compact, search"
+        },
+        "attribute": "variant",
+        "reflect": false
+      },
+      "cover": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cover URL"
+        },
+        "attribute": "cover",
+        "reflect": false
+      },
+      "operaTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card main 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] Card subtitle"
+        },
+        "attribute": "volume-title",
+        "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
+      },
+      "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
+      },
+      "ribbon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Ribbon label - expanded and search variant only"
+        },
+        "attribute": "ribbon",
+        "reflect": false
+      },
+      "borderless": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Borderless card - compact variant only"
+        },
+        "attribute": "borderless",
+        "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
+      },
+      "operaTitleTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] [accessibility] Card title HTML tag"
+        },
+        "attribute": "opera-title-tag",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {},
+      "hasResources": {},
+      "showResources": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "orientationchange",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}