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

package/dist/cjs/z-book-card.cjs.entry.js

@@ -1,115 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-10e0d8b7.js');
-const breakpoints = require('./breakpoints-ebe1a437.js');
-const utils = require('./utils-dd90aed2.js');
-
-const stylesCss = ":host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);display:block;width:100%;max-width:360px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article{box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}:host div.cover{position:relative;display:flex}:host div.cover img{width:auto;max-width:100%;height:auto;max-height:100%;align-self:flex-end}:host div.cover div.ribbon{position:absolute;top:calc(var(--space-unit) * 2);display:flex;max-width:100%;height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);margin-left:calc(var(--space-unit) * -2);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;color:var(--color-text04);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host div.cover div.ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host div.cover div.ribbon::before{position:absolute;bottom:-12px;left:0;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:14px solid transparent;content:\"\"}:host div.title{color:var(--color-text01);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host div.title *{all:unset}:host div.subtitle{color:var(--color-text01);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host div.authors{color:var(--color-text01);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host div.isbn{overflow:hidden;color:var(--color-text01);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host div.isbn>.code{font-weight:var(--font-sb)}:host div.tags{display:flex;overflow:hidden;max-height:32px;flex-flow:row wrap;align-content:stretch;align-items:stretch;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host ::slotted([slot=\"tags\"]){margin-bottom:var(--space-unit)}:host ::slotted([slot=\"header-cta\"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-icon01)}:host>article.expanded div.content,:host>article.search div.content{margin:var(--space-unit) 0}:host>article.expanded div.cover,:host>article.search div.cover{border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius);line-height:0}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:top;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded z-link.show-resources{--font-size-link:var(--font-size-2);--font-weight-link:var(--font-sb);display:flex;width:100%;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding-top:var(--space-unit)}:host>article.search{width:262px;height:536px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:flex;height:100%;flex-direction:column;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2);margin:auto;margin-bottom:0}:host>article.search div.header{display:flex;height:24px;flex-flow:row nowrap;align-content:stretch;align-items:center;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover{height:314px}:host>article.search div.title{font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}@media (min-width: 768px){:host{width:100%;max-width:initial}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0}:host>article.expanded div.wrapper{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.expanded div.cover{width:262px;height:356px;border:0;background:var(--color-surface01);border-radius:0}:host>article.expanded div.cover img{width:auto;min-width:265px}:host>article.expanded div.cover div.ribbon::before{border-left:12px solid transparent}:host>article.expanded div.content{display:flex;overflow:hidden;width:100%;height:356px;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin:0;background:var(--color-surface01)}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host{width:100%;max-width:initial}:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}";
-
-const ZBookCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.isMobile = false;
-    this.hasResources = false;
-    this.showResources = false;
-    this.moveFocusToResources = false;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
-  }
-  componentWillLoad() {
-    this.id = `id-${utils.randomId()}`;
-    this.handleResize();
-  }
-  componentWillRender() {
-    this.handleResources();
-  }
-  componentDidRender() {
-    if (this.moveFocusToResources) {
-      this.resourcesWrapper.focus();
-      this.moveFocusToResources = false;
-    }
-  }
-  handleResources() {
-    var _a;
-    if (this.variant !== index$1.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 index$1.BookCardVariant.EXPANDED:
-        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();
-      case index$1.BookCardVariant.COMPACT:
-        return index.h("div", null);
-      case index$1.BookCardVariant.SEARCH:
-        return this.renderSearchCard();
-    }
-  }
-  renderExpandedCard() {
-    return (index.h("div", { class: "wrapper" }, this.renderCover(), index.h("div", { class: "content" }, index.h("div", { class: "top" }, index.h("div", { class: "info" }, index.h("div", { class: "left" }, this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), index.h("div", { class: "right" }, this.renderHeaderCtaSlot())), this.renderTagsSlot()), index.h("div", { class: "bottom" }, this.renderResourcesSlot()))));
-  }
-  renderMobileExpandedCard() {
-    return (index.h("div", { class: "wrapper" }, index.h("div", { class: "header" }, this.renderOperaTitle(), this.renderHeaderCtaSlot()), this.renderCover(), index.h("div", { class: "content" }, this.renderTagsSlot(), this.renderAuthors(), this.renderVolumeTitle(), this.renderIsbn()), this.hasResources && (index.h("div", { class: `footer ${this.showResources ? "open" : "close"}` }, this.renderResourcesSlot(), this.renderShowResources()))));
-  }
-  renderSearchCard() {
-    return (index.h("div", { class: "wrapper-container" }, index.h("div", { class: "wrapper" }, index.h("div", { class: "header" }, this.renderOperaTitle(), this.renderHeaderCtaSlot()), this.renderCover(), index.h("div", { class: "content" }, this.renderTagsSlot(), this.renderAuthors(), this.renderVolumeTitle(), this.renderIsbn())), this.renderFooterCtaSlot()));
-  }
-  renderCover() {
-    return (index.h("div", { class: "cover" }, this.ribbon && this.variant !== index$1.BookCardVariant.COMPACT && (index.h("div", { class: "ribbon" }, index.h("span", null, this.ribbon))), index.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 (index.h("div", { class: "title", innerHTML: title }));
-  }
-  renderVolumeTitle() {
-    return this.volumeTitle ? index.h("div", { class: "subtitle" }, this.volumeTitle) : null;
-  }
-  renderAuthors() {
-    return this.authors ? (index.h("div", { class: "authors", "aria-description": "Autori" }, this.authors)) : null;
-  }
-  renderIsbn() {
-    if (!this.isbn) {
-      return null;
-    }
-    return (index.h("div", { class: "isbn" }, index.h("span", { class: "code", "aria-description": "ISBN edizione cartacea" }, this.isbn), index.h("span", { class: "label" }, " (ed. cartacea)")));
-  }
-  renderShowResources() {
-    return (index.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) => utils.handleEnterKeydSubmit(e, this.toggleResources.bind(this)) }, this.showResources ? "Chiudi" : "Vedi tutto"));
-  }
-  renderTagsSlot() {
-    return (index.h("div", { class: "tags" }, index.h("slot", { name: "tags" })));
-  }
-  renderHeaderCtaSlot() {
-    return index.h("slot", { name: "header-cta" });
-  }
-  renderResourcesSlot() {
-    return (index.h("div", { id: `resources-${this.id}`, class: "resources", tabIndex: this.showResources ? 0 : -1, ref: (el) => (this.resourcesWrapper = el) }, index.h("slot", { name: "resources" })));
-  }
-  renderFooterCtaSlot() {
-    return (index.h("div", { class: "action-container" }, index.h("slot", { name: "footer-cta" })));
-  }
-  render() {
-    return index.h("article", { class: `${this.variant}` }, this.renderCard());
-  }
-  get hostElement() { return index.getElement(this); }
-};
-ZBookCard.style = stylesCss;
-
-exports.z_book_card = ZBookCard;

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

@@ -1,308 +0,0 @@
-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)
- * @slot tags - card tags
- * @slot footer-cta - footer cta button (search variant only)
- * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
- * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
- */
-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 h("div", null);
-      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()));
-  }
-  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.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"
-        },
-        "attribute": "ribbon",
-        "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
-      }];
-  }
-}