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

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

@@ -1,5 +1,5 @@
-import { Component, Prop, h, Element, State, Listen, Event } from '@stencil/core';
-import { CardVariants } from '../../beans';
+import { h, Host } from "@stencil/core";
+import { CardVariants } from "../../beans";
 export class ZCard {
   constructor() {
     /** Enable click interactions on the card. Default: false */
@@ -9,7 +9,7 @@ export class ZCard {
   }
   onClick(ev) {
     // Do nothing for clicks on actions.
-    if (ev.target.getAttribute('slot') === 'action') {
+    if (ev.target.getAttribute("slot") === "action") {
       return;
     }
     if (!this.clickable) {
@@ -20,7 +20,7 @@ export class ZCard {
     this.cardClicked.emit();
   }
   componentWillLoad() {
-    this.hasCoverImage = !!this.host.querySelector('[slot="cover"]');
+    this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
   }
   /**
    * Template for a card without image cover.
@@ -28,155 +28,150 @@ export class ZCard {
    */
   renderColorCoverCard() {
     return [
-      h("div", { class: "cover-container" },
-        h("div", { class: "color-cover" },
-          h("div", { class: "cover-content" },
-            h("slot", { name: "metadata" }),
-            h("slot", { name: "title" })))),
-      h("div", { class: "content" },
-        h("slot", { name: "text" }),
-        h("div", { class: "actions" },
-          h("slot", { name: "action" })))
+      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
+      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
     ];
   }
   /**
-  * Template for the content div.
-  */
+   * Template for the content div.
+   */
   renderContentDiv() {
-    return (h("div", { class: "content" },
-      h("slot", { name: "metadata" }),
-      h("slot", { name: "title" }),
-      h("slot", { name: "text" }),
-      h("div", { class: "actions" },
-        h("slot", { name: "action" }))));
+    return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
   }
   render() {
-    if (this.variant === CardVariants.text) {
-      return this.renderContentDiv();
+    if (this.variant === CardVariants.TEXT) {
+      return h(Host, null, this.renderContentDiv());
     }
-    if (this.variant === CardVariants.overlay || this.hasCoverImage) {
-      return [
-        h("div", { class: "cover-container" },
-          this.hasCoverImage && [
-            h("slot", { name: "cover" }),
-            (this.variant !== CardVariants.overlay) && this.coverIcon && h("z-icon", { name: this.coverIcon })
-          ],
-          !this.hasCoverImage && h("div", { class: "color-cover" })),
-        this.renderContentDiv()
-      ];
+    if (this.variant === CardVariants.OVERLAY || this.hasCoverImage) {
+      return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
+        h("slot", { name: "cover" }),
+        this.variant !== CardVariants.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
+      ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
     }
-    return this.renderColorCoverCard();
+    return h(Host, null, this.renderColorCoverCard());
   }
   static get is() { return "z-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": "CardVariants",
-        "resolved": "CardVariants.border | CardVariants.overlay | CardVariants.shadow | CardVariants.text",
-        "references": {
-          "CardVariants": {
-            "location": "import",
-            "path": "../../beans"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CardVariants",
+          "resolved": "CardVariants.BORDER | CardVariants.OVERLAY | CardVariants.SHADOW | CardVariants.TEXT",
+          "references": {
+            "CardVariants": {
+              "location": "import",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
-      },
-      "attribute": "variant",
-      "reflect": true
-    },
-    "coverIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the icon to place over the image cover"
-      },
-      "attribute": "cover-icon",
-      "reflect": false
-    },
-    "clickable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
+        },
+        "attribute": "variant",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable click interactions on the card. Default: false"
+      "coverIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon to place over the image cover"
+        },
+        "attribute": "cover-icon",
+        "reflect": false
       },
-      "attribute": "clickable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "showshadow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "clickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable click interactions on the card. Default: false"
+        },
+        "attribute": "clickable",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable shadow. Default: false."
-      },
-      "attribute": "showshadow",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasCoverImage": {}
-  }; }
-  static get events() { return [{
-      "method": "cardClicked",
-      "name": "cardClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Card click event.\nFired only if `clickable` is true."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "showshadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable shadow. Default: false."
+        },
+        "attribute": "showshadow",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "hasCoverImage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "cardClicked",
+        "name": "cardClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Card click event.\nFired only if `clickable` is true."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/z-card/styles.css

@@ -22,7 +22,7 @@ respecting the grid indications of the design. */
   box-sizing: border-box;
 }
 
-:host(:not([variant='overlay'])) .cover-container {
+:host(:not([variant="overlay"])) .cover-container {
   position: relative;
   width: 100%;
 }
@@ -33,7 +33,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
   padding-bottom: calc(100% / var(--aspect-ratio));
 }
 
-::slotted([slot='cover']),
+::slotted([slot="cover"]),
 .color-cover {
   position: absolute;
   top: 0;
@@ -66,44 +66,44 @@ Unfortunately the `aspect-ratio` property is still experimental */
 
 .color-cover .cover-content {
   display: flex;
+  height: 100%;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
   padding: var(--space-unit);
 }
 
 /* Truncates overflowing text */
-::slotted([slot='metadata']),
-::slotted([slot='title']),
-::slotted([slot='text']) {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
+::slotted([slot="metadata"]),
+::slotted([slot="title"]),
+::slotted([slot="text"]) {
+  display: box;
   overflow: hidden;
+  -webkit-box-orient: vertical;
 }
 
-::slotted([slot='title']:not(:last-child)),
-::slotted([slot='text']:not(:last-child)) {
+::slotted([slot="title"]:not(:last-child)),
+::slotted([slot="text"]:not(:last-child)) {
   margin-bottom: var(--space-unit);
 }
 
-::slotted([slot='text']),
-::slotted([slot='actions']) {
+::slotted([slot="text"]),
+::slotted([slot="actions"]) {
   margin: 0;
 }
 
-::slotted([slot='metadata']:not(:last-child)) {
+::slotted([slot="metadata"]:not(:last-child)) {
   margin: 0 0 calc(var(--space-unit) * 0.25);
   -webkit-line-clamp: 1;
   text-transform: uppercase;
 }
 
-::slotted([slot='title']) {
+::slotted([slot="title"]) {
   margin: 0;
   font-weight: var(--font-sb);
   -webkit-line-clamp: 2;
 }
 
-::slotted([slot='text']) {
+::slotted([slot="text"]) {
   -webkit-line-clamp: 3;
 }
 
@@ -113,7 +113,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
   align-items: center;
 }
 
-::slotted([slot='action']:not(:last-child)) {
+::slotted([slot="action"]:not(:last-child)) {
   margin-right: calc(var(--space-unit) * 1.5);
 }
 
@@ -131,72 +131,68 @@ Unfortunately the `aspect-ratio` property is still experimental */
   box-shadow: var(--shadow-focus-primary);
 }
 
-:host([variant='text']) {
-  background-color: var(--z-card--text-background);
+:host([variant="text"]) {
   border: var(--z-card--text-border);
+  background-color: var(--z-card--text-background);
   border-radius: var(--z-card--text-border-radius);
 }
 
 :host([showshadow]) > .content,
-:host([variant='border']) > .content,
-:host([variant='shadow']) > .content {
+:host([variant="border"]) > .content,
+:host([variant="shadow"]) > .content {
   height: 100%;
   padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);
 }
 
-:host([variant='text']) > .content {
-  padding: calc(var(--space-unit) * 2) var(--space-unit)
+:host([variant="text"]) > .content {
+  padding: calc(var(--space-unit) * 2) var(--space-unit);
 }
 
-:host([variant='border']) .actions,
-:host([variant='shadow']) .actions {
+:host([variant="border"]) .actions,
+:host([variant="shadow"]) .actions {
   margin-top: auto;
 }
 
 /* Border */
-:host([variant='border']) {
+:host([variant="border"]) {
   border: var(--border-size-small) solid var(--z-card--border-color);
 }
 
-:host([variant='border'][clickable]:hover) > .content {
+:host([variant="border"][clickable]:hover) > .content {
   background: var(--color-background);
 }
 
-:host([variant='border'][clickable]:focus:focus-visible) {
+:host([variant="border"][clickable]:focus:focus-visible) {
   box-shadow: var(--shadow-focus-primary);
 }
 
-:host([variant='border'][clickable]:active) {
+:host([variant="border"][clickable]:active) {
   border-color: transparent;
 }
 
 /* Shadow */
-:host([variant='shadow']),
-:host([showshadow])
-{
+:host([variant="shadow"]),
+:host([showshadow]) {
   box-shadow: var(--shadow-2);
 }
 
-:host([variant='shadow'][clickable]:hover),
-:host([clickable][showshadow]:hover)
-{
+:host([variant="shadow"][clickable]:hover),
+:host([clickable][showshadow]:hover) {
   box-shadow: var(--shadow-4);
 }
 
-:host([variant='shadow'][clickable]:focus:focus-visible),
-:host([clickable][showshadow]:focus:focus-visible)
-{
+:host([variant="shadow"][clickable]:focus:focus-visible),
+:host([clickable][showshadow]:focus:focus-visible) {
   box-shadow: var(--shadow-4);
 }
 
-:host([variant='shadow'][clickable]:active),
-:host([clickable][showshadow]:active)
-{
+:host([variant="shadow"][clickable]:active),
+:host([clickable][showshadow]:active) {
   box-shadow: none;
 }
 
 /* Overlay */
-:host([variant='overlay']) .content {
+:host([variant="overlay"]) .content {
   position: absolute;
   top: 0;
   right: 0;
@@ -204,7 +200,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
   left: 0;
   justify-content: flex-end;
   padding: var(--space-unit);
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));
   color: var(--color-text-inverse);
   fill: var(--color-text-inverse);
 }

package/dist/collection/components/z-carousel/index.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from "@stencil/core";
+import { h } from "@stencil/core";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.
@@ -11,56 +11,58 @@ export class ZCarousel {
   }
   render() {
     if (this.isLoading) {
-      return (h("div", { style: { height: `${this.ghostLoadingHeight}px` } },
-        h("z-ghost-loading", null),
-        h("div", { style: { display: "none" } },
-          h("slot", null))));
+      return (h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { style: { display: "none" } }, h("slot", null))));
     }
-    return (h("ul", { class: "z-carousel-items-container" },
-      h("slot", null)));
+    return (h("ul", { class: "z-carousel-items-container" }, h("slot", null)));
   }
   static get is() { return "z-carousel"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "isLoading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "sets whether the z-carousel is on loading state"
-      },
-      "attribute": "is-loading",
-      "reflect": false
-    },
-    "ghostLoadingHeight": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "sets the height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "sets whether the z-carousel is on loading state"
+        },
+        "attribute": "is-loading",
+        "reflect": false
       },
-      "attribute": "ghost-loading-height",
-      "reflect": false,
-      "defaultValue": "100"
-    }
-  }; }
+      "ghostLoadingHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "sets the height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
+        },
+        "attribute": "ghost-loading-height",
+        "reflect": false,
+        "defaultValue": "100"
+      }
+    };
+  }
 }

package/dist/collection/components/z-carousel/styles.css

@@ -7,13 +7,13 @@
 
 .z-carousel-items-container {
   display: flex;
-  overflow-x: scroll;
-  padding-inline-start: 0;
   margin: 0;
   list-style: none;
 
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
+  overflow-x: scroll;
+  padding-inline-start: 0;
   scrollbar-width: none; /* Firefox */
 }
 
@@ -24,4 +24,4 @@
 
 .z-carousel-items-container > *:not(:last-child) {
   margin-right: var(--z-carousel-gutter);
-}
+}