@zanichelli/albe-web-components 5.5.5 → 5.5.6-cs1

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, State, Listen } from "@stencil/core";
+import { h } from "@stencil/core";
 import { LicenseTypeEnum } from "../../../../beans/index";
 /**
  * @slot toggle - toggle button slot
@@ -20,8 +20,9 @@ export class ZMyzCardFooter {
     return this.allowTooltipAuthors ? this.autori : "";
   }
   componentWillLoad() {
-    if (this.opened)
+    if (this.opened) {
       this.isOpen = true;
+    }
   }
   elementsEllipsis() {
     this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;
@@ -31,11 +32,11 @@ export class ZMyzCardFooter {
   }
   retrieveClass() {
     return {
-      isopen: this.isOpen,
-      real: this.cardtype === LicenseTypeEnum.real,
-      trial: this.cardtype === LicenseTypeEnum.trial,
-      temp: this.cardtype === LicenseTypeEnum.temp,
-      customContent: this.customContent,
+      "isopen": this.isOpen,
+      "real": this.cardtype === LicenseTypeEnum.REAL,
+      "trial": this.cardtype === LicenseTypeEnum.TRIAL,
+      "temp": this.cardtype === LicenseTypeEnum.TEMP,
+      "custom-content": this.customContent,
     };
   }
   footerTransitionHandler(e) {
@@ -44,170 +45,163 @@ export class ZMyzCardFooter {
     }
   }
   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: { customContent: this.customContent } }, this.titolo)),
-        h("div", { class: { content: true, customContent: this.customContent } },
-          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" })))),
-      this.customContent && h("slot", { name: "content" })));
+    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", { 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" })))), 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": {}
+  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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "volume isbn"
+      "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
       },
-      "attribute": "isbn",
-      "reflect": false
-    },
-    "faded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "isbn": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "volume isbn"
+        },
+        "attribute": "isbn",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "faded status"
+      "faded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "faded status"
+        },
+        "attribute": "faded",
+        "reflect": false
       },
-      "attribute": "faded",
-      "reflect": false
-    },
-    "cardtype": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "LicenseTypeEnum",
-        "resolved": "LicenseTypeEnum.real | LicenseTypeEnum.temp | LicenseTypeEnum.trial | LicenseTypeEnum.virtual",
-        "references": {
-          "LicenseTypeEnum": {
-            "location": "import",
-            "path": "../../../../beans/index"
+      "cardtype": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LicenseTypeEnum",
+          "resolved": "LicenseTypeEnum.REAL | LicenseTypeEnum.TEMP | 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
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "card graphic variant (optional)"
+      "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"
       },
-      "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 listeners() { return [{
-      "name": "toggleClick",
-      "method": "handleToggle",
-      "target": undefined,
-      "capture": false,
-      "passive": 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 listeners() {
+    return [{
+        "name": "toggleClick",
+        "method": "handleToggle",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -1,18 +1,18 @@
 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);
+  top: 0;
   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);
+  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,
@@ -27,25 +27,24 @@ footer .bold {
 }
 
 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-weight: var(--font-rg);
   font-size: 16px;
+  font-weight: var(--font-rg);
   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 {
+  /* TODO: non esiste l'equivalente nei token nuovi: implementare */
+  background-color: var(--bg-neutral-200);
   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,
@@ -63,8 +62,8 @@ footer .hidden {
 }
 
 footer > div.content {
-  height: 60px;
   overflow: hidden;
+  height: 60px;
 }
 
 footer > div.content > div:not(.slot-handler) {
@@ -72,26 +71,26 @@ footer > div.content > div:not(.slot-handler) {
 }
 
 footer > div.content > div > p {
-  font-size: 14px;
+  overflow: hidden;
   height: 20px;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
   line-height: 20px;
-  margin: 0px;
-  padding: 0px;
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-footer > div.content > div > p.year_isbn {
-  padding-top: var(--space-unit);
+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 {
-  text-overflow: ellipsis;
+footer > div.content > div > p.year-isbn > span.isbn {
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 footer.isopen > div.content > div:not(.slot-handler) {
@@ -100,27 +99,28 @@ footer.isopen > div.content > div:not(.slot-handler) {
 
 footer.isopen > div.content > div > p.authors {
   height: 40px;
-  white-space: initial;
   text-overflow: initial;
+  white-space: initial;
 }
 
-footer.isopen > div.content > div > p.year_isbn {
-  flex-direction: column;
+footer.isopen > div.content > div > p.year-isbn {
   height: 50px;
-  padding-left: 0px;
+  flex-direction: column;
+  padding-left: 0;
 }
 
-footer.isopen > div.content > div > p.year_isbn > span.isbn {
+footer.isopen > div.content > div > p.year-isbn > span.isbn {
   display: inline-grid;
-  padding-left: 0px;
+  padding-left: 0;
 }
 
 footer.isopen {
-  height: 295px;
   top: -212px;
+  height: 295px;
   transition: height 500ms ease-in-out, top 500ms ease-in-out;
 }
-footer.isopen.customContent {
+
+footer.isopen.custom-content {
   top: -292px;
 }
 
@@ -128,15 +128,16 @@ footer.isopen > div.content {
   height: 280px;
   transition: height 500ms ease-in-out, top 500ms ease-in-out;
 }
-footer.isopen.customContent > div.content {
+
+footer.isopen.custom-content > div.content {
   height: 230px;
 }
 
 .toggle {
   position: absolute;
+  z-index: 10;
   top: -24px;
   left: 16px;
-  z-index: 10;
 }
 
 .faded {
@@ -144,13 +145,13 @@ footer.isopen.customContent > div.content {
   pointer-events: none;
 }
 
-footer > p.customContent,
-footer .content.customContent {
+footer > p.custom-content,
+footer .content.custom-content {
   display: none;
 }
 
-footer.isopen > p.customContent,
-footer.isopen .content.customContent {
+footer.isopen > p.custom-content,
+footer.isopen .content.custom-content {
   display: block;
 }
 
@@ -160,21 +161,22 @@ div.wrapper {
 }
 
 div.wrapper ::slotted([slot="content"]) {
+  position: absolute;
+  z-index: 10;
+  top: calc(var(--space-unit) * 2);
   display: block;
-  height: 112px;
   width: 100%;
-  padding: 0 calc(var(--space-unit) * 2);
+  height: 112px;
   box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 2);
   border-top: var(--border-size-medium) solid transparent;
-  position: absolute;
-  top: calc(var(--space-unit) * 2);
-  z-index: 10;
   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(--accent);
-  top: 0;
-  bottom: 0;
 }

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

@@ -1,23 +1,22 @@
-import { Component, h } from "@stencil/core";
+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" })))));
+    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"]
-  }; }
+  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

@@ -4,11 +4,11 @@
 }
 
 :host > div > footer {
+  height: 128px;
   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;
+  border-top: var(--border-base) solid var(--color-surface03);
+  border-radius: 0 0 var(--radius-base) var(--radius-base);
   color: var(--color-surface05);
   font-size: 16px;
   line-height: 24px;
@@ -18,15 +18,3 @@
 :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) {
-}