@zanichelli/albe-web-components 12.1.3-rc → 12.2.0-rc

package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/index.js

@@ -0,0 +1,177 @@
+import { h } from "@stencil/core";
+import { ButtonSize, ButtonVariant } from "../../../../beans";
+/**
+ * @slot  - generic card slot
+ * @slot info - flipped card info
+ */
+export class ZMyzCardDictionary {
+  constructor() {
+    /** card is disabled */
+    this.disabled = false;
+    /** card is flipped */
+    this.flipped = false;
+    /** flip button label */
+    this.flipbuttonlabel = "INFO";
+    /** hide info button */
+    this.hideinfobtn = false;
+  }
+  handleFlipCard(e) {
+    this.flipCard(e.detail);
+  }
+  flipCard(showBack = true) {
+    this.flipped = showBack;
+    this.cardFlipped.emit(showBack);
+  }
+  render() {
+    return (h("div", null, h("z-myz-card", null, h("z-myz-card-header", { titolo: this.name }), h("div", { class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { class: "front" }, h("z-myz-card-body", null, h("z-myz-card-cover", { slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { class: "back" }, h("slot", { name: "info" }))), h("slot", null))));
+  }
+  static get is() { return "z-myz-card-dictionary"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card title"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "cover": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card cover"
+        },
+        "attribute": "cover",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card is disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "flipped": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card is flipped"
+        },
+        "attribute": "flipped",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "flipbuttonlabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "flip button label"
+        },
+        "attribute": "flipbuttonlabel",
+        "reflect": false,
+        "defaultValue": "\"INFO\""
+      },
+      "hideinfobtn": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "hide info button"
+        },
+        "attribute": "hideinfobtn",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "cardFlipped",
+        "name": "cardFlipped",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "when card is flipped"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "flipCard",
+        "method": "handleFlipCard",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/styles.css

@@ -0,0 +1,72 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host z-myz-card {
+  --card-overflow: visible;
+}
+
+:host > div {
+  position: relative;
+  width: 100%;
+  height: 522px;
+  transition: -webkit-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
+}
+
+:host > div .content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 522px;
+  transform-style: preserve-3d;
+  transition: -webkit-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
+}
+
+:host > div .content.flipped {
+  margin-top: -2px;
+  transform: rotateY(180deg);
+}
+
+:host > div .front,
+:host > div .back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+:host > div .front {
+  z-index: 2;
+  top: 0;
+  left: 0;
+  transform: rotateY(0deg);
+}
+
+:host > div .front z-button {
+  position: absolute;
+  z-index: 3;
+  top: calc(var(--space-unit) * 0.5);
+  left: calc(-1 * var(--space-unit));
+}
+
+:host > div .back {
+  z-index: 1;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  padding: 0 var(--space-unit);
+  margin-left: calc(-1 * var(--space-unit));
+  transform: rotateY(180deg);
+}
+
+.hide-info {
+  display: none;
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js

@@ -0,0 +1,219 @@
+import { h } from "@stencil/core";
+import { LicenseType } from "../../../../beans/index";
+/**
+ * @slot toggle - toggle button slot
+ * @slot list - card resources list slot
+ */
+export class ZMyzCardFooter {
+  constructor() {
+    /** footer opened by default (optional) */
+    this.opened = false;
+    /** display footer custom slotted content */
+    this.customContent = false;
+    this.isOpen = false;
+    this.allowTooltipAuthors = false;
+  }
+  handleToggle() {
+    this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      const firstElem = this.getFirstListItem();
+      if (firstElem) {
+        requestAnimationFrame(() => {
+          firstElem.focus();
+        });
+      }
+    }
+  }
+  getTitleAuthors() {
+    return this.allowTooltipAuthors ? this.autori : "";
+  }
+  componentWillLoad() {
+    if (this.opened) {
+      this.isOpen = true;
+    }
+  }
+  elementsEllipsis() {
+    this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;
+  }
+  elementAuthorsHasEllipsis() {
+    return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;
+  }
+  retrieveClass() {
+    return {
+      "isopen": this.isOpen,
+      "real": this.cardtype === LicenseType.REAL,
+      "trial": this.cardtype === LicenseType.TRIAL,
+      "temp": this.cardtype === LicenseType.TEMP,
+      "custom-content": this.customContent,
+    };
+  }
+  footerTransitionHandler(e) {
+    if (["visibility", "height"].includes(e.propertyName)) {
+      this.elementsEllipsis();
+    }
+  }
+  getFirstListItem() {
+    return this.host.querySelector("[slot=list] > li a");
+  }
+  render() {
+    return (h("div", { class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { class: { "content": true, "custom-content": this.customContent } }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { class: "year-isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" })))), this.customContent && h("slot", { name: "content" })));
+  }
+  static get is() { return "z-myz-card-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titolo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "volume title"
+        },
+        "attribute": "titolo",
+        "reflect": false
+      },
+      "autori": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "authors name text"
+        },
+        "attribute": "autori",
+        "reflect": false
+      },
+      "isbn": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "volume isbn"
+        },
+        "attribute": "isbn",
+        "reflect": false
+      },
+      "faded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "faded status"
+        },
+        "attribute": "faded",
+        "reflect": false
+      },
+      "cardtype": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LicenseType",
+          "resolved": "LicenseType.REAL | LicenseType.TEMP | LicenseType.TRIAL | LicenseType.VIRTUAL",
+          "references": {
+            "LicenseType": {
+              "location": "import",
+              "path": "../../../../beans/index"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "card graphic variant (optional)"
+        },
+        "attribute": "cardtype",
+        "reflect": false
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "footer opened by default (optional)"
+        },
+        "attribute": "opened",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "customContent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "display footer custom slotted content"
+        },
+        "attribute": "custom-content",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {},
+      "allowTooltipAuthors": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "toggleClick",
+        "method": "handleToggle",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/styles.css

@@ -0,0 +1,181 @@
+footer {
+  position: relative;
+  z-index: 5;
+  top: 0;
+  width: auto;
+  height: calc(var(--space-unit) * 6);
+  padding: 0;
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+  margin: 0;
+  background-color: var(--color-surface01);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  color: var(--color-surface05);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  transition: height 500ms ease-in-out, top 500ms ease-in-out;
+}
+
+footer.real,
+footer.trial,
+footer.temp {
+  border-top: var(--border-size-medium) solid var(--blue100);
+}
+
+footer .bold {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+}
+
+footer > p {
+  overflow: hidden;
+  height: 40px;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);
+  margin: 0;
+  background-color: var(--color-surface01);
+  font-family: var(--font-family-sans);
+  font-size: 16px;
+  font-weight: var(--font-rg);
+  line-height: 22px;
+  transition: all 200ms linear;
+}
+
+footer.isopen > p {
+  background-color: var(--gray200);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  transition: all 200ms linear;
+}
+
+footer.isopen.real > p,
+footer.isopen.trial > p,
+footer.isopen.temp > p {
+  background-color: var(--blue100);
+}
+
+footer .visible {
+  display: block;
+}
+
+footer .hidden {
+  display: none;
+}
+
+footer > div.content {
+  overflow: hidden;
+  height: 60px;
+}
+
+footer > div.content > div:not(.slot-handler) {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+footer > div.content > div > p {
+  overflow: hidden;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+footer > div.content > div > p.year-isbn {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-top: var(--space-unit);
+}
+
+footer > div.content > div > p.year-isbn > span.isbn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+footer.isopen > div.content > div:not(.slot-handler) {
+  height: 68px;
+}
+
+footer.isopen > div.content > div > p.authors {
+  height: 40px;
+  text-overflow: initial;
+  white-space: initial;
+}
+
+footer.isopen > div.content > div > p.year-isbn {
+  height: 50px;
+  flex-direction: column;
+  padding-left: 0;
+}
+
+footer.isopen > div.content > div > p.year-isbn > span.isbn {
+  display: inline-grid;
+  padding-left: 0;
+}
+
+footer.isopen {
+  top: -212px;
+  height: 295px;
+  transition: height 500ms ease-in-out, top 500ms ease-in-out;
+}
+
+footer.isopen.custom-content {
+  top: -292px;
+}
+
+footer.isopen > div.content {
+  height: 280px;
+  transition: height 500ms ease-in-out, top 500ms ease-in-out;
+}
+
+footer.isopen.custom-content > div.content {
+  height: 230px;
+}
+
+.toggle {
+  position: absolute;
+  z-index: 10;
+  top: -24px;
+  left: 16px;
+}
+
+.faded {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+footer > p.custom-content,
+footer .content.custom-content {
+  display: none;
+}
+
+footer.isopen > p.custom-content,
+footer.isopen .content.custom-content {
+  display: block;
+}
+
+div.wrapper {
+  position: relative;
+  height: 100%;
+}
+
+div.wrapper ::slotted([slot="content"]) {
+  position: absolute;
+  z-index: 10;
+  top: calc(var(--space-unit) * 2);
+  display: block;
+  width: 100%;
+  height: 112px;
+  box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 2);
+  border-top: var(--border-size-medium) solid transparent;
+  background: var(--color-white);
+}
+
+div.wrapper.isopen ::slotted([slot="content"]) {
+  top: 0;
+  bottom: 0;
+  height: 128px;
+  padding: calc(var(--space-unit) * 2);
+  border-color: var(--blue100);
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/index.js

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+/**
+ * @slot top - footer top content
+ * @slot bottom - footer bottom content
+ */
+export class ZMyzCardFooterSections {
+  render() {
+    return (h("div", null, h("footer", null, h("div", { class: "top" }, h("slot", { name: "top" })), h("div", { class: "bottom" }, h("slot", { name: "bottom" })))));
+  }
+  static get is() { return "z-myz-card-footer-sections"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/styles.css

@@ -0,0 +1,20 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > div > footer {
+  height: 128px;
+  box-sizing: border-box;
+  padding: var(--space-unit) calc(var(--space-unit) * 2) 0;
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  color: var(--color-surface05);
+  font-size: 16px;
+  line-height: 24px;
+}
+
+:host > div > footer > div.top,
+:host > div > footer > div.bottom {
+  height: 60px;
+}