@zanichelli/albe-web-components 2.33.1 → 2.33.3

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

@@ -0,0 +1,190 @@
+import { Component, Prop, h, State, Listen } from "@stencil/core";
+import { LicenseTypeEnum } 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;
+    this.isOpen = false;
+    this.allowTooltipAuthors = false;
+  }
+  handleToggle() {
+    this.isOpen = !this.isOpen;
+  }
+  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 === LicenseTypeEnum.real,
+      trial: this.cardtype === LicenseTypeEnum.trial,
+    };
+  }
+  footerTransitionHandler(e) {
+    if (["visibility", "height"].includes(e.propertyName)) {
+      this.elementsEllipsis();
+    }
+  }
+  render() {
+    return (h("div", { class: this.faded && "faded" },
+      h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) },
+        h("span", { class: "toggle" },
+          h("slot", { name: "toggle" })),
+        this.titolo && h("p", null, this.titolo),
+        h("div", { class: "content" },
+          h("div", null,
+            h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) },
+              h("span", { title: this.getTitleAuthors() },
+                h("span", { class: "bold" }, this.autori))),
+            h("p", { class: "year_isbn" },
+              h("span", { class: "isbn" },
+                h("span", null,
+                  h("span", { class: "bold" }, this.isbn),
+                  " (ed. cartacea)")))),
+          h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` },
+            h("slot", { name: "list" }))))));
+  }
+  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": "LicenseTypeEnum",
+        "resolved": "LicenseTypeEnum.real | LicenseTypeEnum.trial | LicenseTypeEnum.virtual",
+        "references": {
+          "LicenseTypeEnum": {
+            "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"
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {},
+    "allowTooltipAuthors": {}
+  }; }
+  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,137 @@
+footer {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  color: var(--color-surface05);
+  background-color: var(--color-surface01);
+  margin: 0px;
+  padding: 0px;
+  position: relative;
+  z-index: 5;
+  height: calc(var(--space-unit) * 6);
+  width: auto;
+  top: 0px;
+  transition: height 500ms ease-in-out, top 500ms ease-in-out;
+  border-radius: 0px 0px var(--border-radius) var(--border-radius);
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+}
+
+footer.real,
+footer.trial {
+  border-top: var(--border-size-medium) solid var(--accent);
+}
+
+footer .bold {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+}
+
+footer > p {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: 16px;
+  line-height: 22px;
+  height: 40px;
+  margin: 0px;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2)
+    var(--space-unit) calc(var(--space-unit) * 2);
+  overflow: hidden;
+  background-color: var(--color-surface01);
+  transition: all 200ms linear;
+}
+
+footer.isopen > p {
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  transition: all 200ms linear;
+  /* TODO: non esiste l'equivalente nei token nuovi: implementare */
+  background-color: var(--bg-neutral-200);
+}
+
+footer.isopen.real > p,
+footer.isopen.trial > p {
+  background-color: var(--accent);
+}
+
+footer .visible {
+  display: block;
+}
+
+footer .hidden {
+  display: none;
+}
+
+footer > div.content {
+  height: 60px;
+  overflow: hidden;
+}
+
+footer > div.content > div:not(.slot-handler) {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+footer > div.content > div > p {
+  font-size: 14px;
+  height: 20px;
+  line-height: 20px;
+  margin: 0px;
+  padding: 0px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+footer > div.content > div > p.year_isbn {
+  padding-top: var(--space-unit);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+footer > div.content > div > p.year_isbn > span.isbn {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+footer.isopen > div.content > div:not(.slot-handler) {
+  height: 68px;
+}
+
+footer.isopen > div.content > div > p.authors {
+  height: 40px;
+  white-space: initial;
+  text-overflow: initial;
+}
+
+footer.isopen > div.content > div > p.year_isbn {
+  flex-direction: column;
+  height: 50px;
+  padding-left: 0px;
+}
+
+footer.isopen > div.content > div > p.year_isbn > span.isbn {
+  display: inline-grid;
+  padding-left: 0px;
+}
+
+footer.isopen {
+  height: 295px;
+  top: -212px;
+  transition: height 500ms ease-in-out, top 500ms ease-in-out;
+}
+
+footer.isopen > div.content {
+  height: 280px;
+  transition: height 500ms ease-in-out, top 500ms ease-in-out;
+}
+
+.toggle {
+  position: absolute;
+  top: -24px;
+  left: 16px;
+  z-index: 10;
+}
+
+.faded {
+  opacity: 0.3;
+  pointer-events: none;
+}

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

@@ -0,0 +1,23 @@
+import { Component, 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,32 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > div > footer {
+  box-sizing: border-box;
+  border-radius: 0px 0px var(--radius-base) var(--radius-base);
+  border-top: var(--border-base) solid var(--color-surface03);
+  padding: var(--space-unit) calc(var(--space-unit) * 2) 0;
+  height: 128px;
+  color: var(--color-surface05);
+  font-size: 16px;
+  line-height: 24px;
+}
+
+:host > div > footer > div.top,
+:host > div > footer > div.bottom {
+  height: 60px;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

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

@@ -0,0 +1,101 @@
+import { Component, Prop, State, h } from "@stencil/core";
+import { LicenseTypeEnum } from "../../../../beans/index";
+/**
+ * @slot icon - card header icon slot
+ */
+export class ZMyzCardHeader {
+  constructor() {
+    this.allowTooltip = false;
+  }
+  getTitle() {
+    return this.allowTooltip ? this.titolo : "";
+  }
+  componentDidLoad() {
+    if (this.elementHasEllipsis())
+      this.allowTooltip = true;
+  }
+  elementHasEllipsis() {
+    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+  }
+  retrieveClass() {
+    return {
+      real: this.cardtype === LicenseTypeEnum.real,
+      trial: this.cardtype === LicenseTypeEnum.trial,
+      faded: this.faded
+    };
+  }
+  render() {
+    return (h("header", { class: this.retrieveClass() },
+      h("h2", { ref: el => (this.ellipsis = el), title: this.getTitle() }, this.titolo),
+      h("slot", { name: "icon" })));
+  }
+  static get is() { return "z-myz-card-header"; }
+  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
+    },
+    "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": "LicenseTypeEnum",
+        "resolved": "LicenseTypeEnum.real | LicenseTypeEnum.trial | LicenseTypeEnum.virtual",
+        "references": {
+          "LicenseTypeEnum": {
+            "location": "import",
+            "path": "../../../../beans/index"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "card graphic variant (optional)"
+      },
+      "attribute": "cardtype",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "allowTooltip": {}
+  }; }
+}

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

@@ -0,0 +1,46 @@
+header {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: auto;
+  height: calc(var(--space-unit) * 6);
+  position: relative;
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+  border-radius: var(--border-radius) var(--border-radius)
+    var(--border-no-radius) var(--border-no-radius);
+  background-color: var(--color-surface01);
+}
+
+header.real,
+header.trial {
+  background-color: var(--accent-lighter);
+  border-bottom: var(--border-size-medium) solid var(--accent);
+}
+
+h2 {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  color: var(--color-surface05);
+  height: calc(var(--space-unit) * 2);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.22px;
+  line-height: calc(var(--space-unit) * 2);
+  margin: 0px;
+  padding: calc(var(--space-unit) * 2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.faded {
+  border-bottom: var(--border-size-medium) solid var(--color-surface02);
+}
+
+.faded.real,
+.faded.trial {
+  border-top: var(--border-size-medium) solid var(--accent);
+  border-right: var(--border-size-medium) solid var(--accent);
+  border-left: var(--border-size-medium) solid var(--accent);
+}

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

@@ -0,0 +1,74 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZMyzCardIcon {
+  constructor() {
+    /** disabled status flag */
+    this.isdisabled = false;
+  }
+  render() {
+    return (h("button", { disabled: this.isdisabled, "aria-label": this.ariaLabel },
+      h("span", null,
+        h("z-icon", { name: this.icon, width: 16, height: 16 }))));
+  }
+  static get is() { return "z-myz-card-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "icon name"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "isdisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "disabled status flag"
+      },
+      "attribute": "isdisabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "description of the icon"
+      },
+      "attribute": "aria-label",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,70 @@
+button {
+  width: 42px;
+  height: calc(var(--space-unit) * 5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary01);
+  fill: var(--color-primary01);
+  cursor: pointer;
+  outline: none;
+
+  background: none;
+  border: none;
+  border-left: var(--border-size-medium) solid var(--color-surface03);
+  border-radius: 0px var(--border-radius) 0px 0px;
+  margin: 0;
+  padding: 0px;
+  width: calc(var(--space-unit) * 6);
+  height: calc(var(--space-unit) * 6);
+}
+
+button:active,
+button:focus {
+  color: var(--blue700);
+  fill: var(--blue700);
+}
+
+button > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--border-radius);
+  border: 0px;
+}
+
+button:hover > span {
+  background: var(--color-primary03);
+}
+
+button:focus > span {
+  background: var(--color-surface01);
+  border-radius: var(--border-radius);
+  box-shadow: 0px 0px 2px 2px var(--accent-dark);
+}
+
+button:active > span {
+  background: var(--color-surface01);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-2);
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+button:disabled > span {
+  background: none;
+  box-shadow: var(--shadow-0);
+  pointer-events: none;
+}
+
+button:disabled > span > z-icon {
+  fill: var(--color-surface03);
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}