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

package/dist/collection/snowflakes/myz/z-alert/styles.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
+  box-sizing: border-box;
+  color: var(--color-surface05);
   font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
   font-size: 14px;
+  font-weight: var(--font-rg);
   line-height: calc(var(--space-unit) * 2);
-  color: var(--color-surface05);
-  box-sizing: border-box;
 }
 
 :host > div {
@@ -13,16 +13,16 @@
 }
 
 :host > .success {
-  fill: var(--color-success01);
   background: var(--color-success-inverse);
+  fill: var(--color-success01);
 }
 
 :host > .warning {
-  fill: var(--color-warning01);
   background: var(--color-warning-inverse);
+  fill: var(--color-warning01);
 }
 
 :host > .error {
-  fill: var(--color-error01);
   background: var(--color-error-inverse);
+  fill: var(--color-error01);
 }

package/dist/collection/snowflakes/myz/z-otp/index.js

@@ -1,114 +1,120 @@
-import { Component, h, Event, Prop } from "@stencil/core";
+import { h } from "@stencil/core";
 import { InputStatusEnum } from "../../../beans";
 export class ZOtp {
   constructor() {
+    /** Input number */
     this.inputNum = 6;
   }
   emitInputChange(value) {
     this.otpChange.emit({ value });
   }
   componentWillLoad() {
-    this.otp = Array.apply(null, Array(this.inputNum));
-    this.otpRef = Array.apply(null, Array(this.inputNum));
+    this.otp = [...Array(this.inputNum)];
+    this.otpRef = [...Array(this.inputNum)];
   }
   render() {
-    return (h("div", { class: "otp-container" },
-      h("div", { class: "digits-container" }, this.otp.map((_elem, i) => {
-        return (h("input", { class: this.status == InputStatusEnum.error ? "error" : null, onKeyDown: (e) => {
-            if (e.keyCode > 47)
-              this.otpRef[i].value = "";
-          }, onKeyUp: (e) => {
-            if (e.keyCode > 47) {
-              i < this.inputNum - 1 && this.otpRef[i + 1].focus();
-            }
-          }, onInput: (e) => {
-            this.otp[i] = e.target.value;
-            this.emitInputChange(this.otp.join(""));
-          }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: input => (this.otpRef[i] = input) }));
-      })),
-      h("z-input-message", { message: this.message, status: this.status })));
+    return (h("div", { class: "otp-container" }, h("div", { class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatusEnum.ERROR ? "error" : null, onKeyDown: (e) => {
+        if (e.keyCode > 47) {
+          this.otpRef[i].value = "";
+        }
+      }, onKeyUp: (e) => {
+        if (e.keyCode > 47) {
+          i < this.inputNum - 1 && this.otpRef[i + 1].focus();
+        }
+      }, onInput: (e) => {
+        this.otp[i] = e.target.value;
+        this.emitInputChange(this.otp.join(""));
+      }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { message: this.message, status: this.status })));
   }
   static get is() { return "z-otp"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "inputNum": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "inputNum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Input number"
+        },
+        "attribute": "input-num",
+        "reflect": false,
+        "defaultValue": "6"
       },
-      "attribute": "input-num",
-      "reflect": false,
-      "defaultValue": "6"
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "InputStatusBean",
-        "resolved": "\"error\" | \"success\" | \"warning\"",
-        "references": {
-          "InputStatusBean": {
-            "location": "import",
-            "path": "../../../beans"
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "InputStatusEnum",
+          "resolved": "InputStatusEnum.ERROR | InputStatusEnum.SUCCESS | InputStatusEnum.WARNING",
+          "references": {
+            "InputStatusEnum": {
+              "location": "import",
+              "path": "../../../beans"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Input status"
+        },
+        "attribute": "status",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "status",
-      "reflect": false
-    },
-    "message": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "message",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "otpChange",
-      "name": "otpChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Input message"
+        },
+        "attribute": "message",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "otpChange",
+        "name": "otpChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Otp change event"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

package/dist/collection/snowflakes/myz/z-otp/styles.css

@@ -9,23 +9,23 @@
 }
 
 input {
-  height: 72px;
   width: calc(var(--space-unit) * 5);
-  font-size: 32px;
-  font-weight: 300;
-  font-family: var(--font-family-sans);
-  text-align: center;
-  caret-color: transparent;
+  height: 72px;
   box-sizing: border-box;
   padding: 0;
+  caret-color: transparent;
   color: var(--color-surface05);
+  font-family: var(--font-family-sans);
+  font-size: 32px;
+  font-weight: 300;
+  text-align: center;
 }
 
 input.error {
   border: 1px solid;
-  border-radius: 4px;
   border-color: var(--color-error01);
   background-color: var(--color-error-inverse);
+  border-radius: 4px;
 }
 
 input:not(:last-of-type) {

package/dist/collection/snowflakes/myz/z-slideshow/index.js

@@ -1,6 +1,14 @@
-import { Component, Prop, h, State, Element, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import { DeviceEnum } from "../../../beans";
 import { getDevice, handleKeyboardSubmit, convertJson } from "../../../utils/utils";
+/**
+ * Check if data is an array of strings.
+ * @param {unknown} data Data to check
+ * @returns {boolean}
+ */
+function isStringArray(data) {
+  return Array.isArray(data) && data.every((datum) => typeof datum === "string");
+}
 /**
  * @slot footer-right - right content slot in footer
  * @slot footer-left - left content slot in footer
@@ -27,16 +35,24 @@ export class ZSlideshow {
   parseLinks() {
     var _a;
     switch (typeof this.data) {
-      case "string":
-        return (this.links = (_a = convertJson(this.data)) !== null && _a !== void 0 ? _a : []);
+      case "string": {
+        const parsed = (_a = convertJson(this.data)) !== null && _a !== void 0 ? _a : [];
+        if (!isStringArray(parsed)) {
+          throw new Error("Passed data is invalid");
+        }
+        this.links = parsed;
+        break;
+      }
       default:
-        return (this.links = this.data);
+        this.links = this.data;
+        break;
     }
   }
   setStyle() {
     const refSlides = this.el.shadowRoot.querySelector("#slides");
-    if (!refSlides)
+    if (!refSlides) {
       return;
+    }
     const allImages = this.el.shadowRoot.querySelectorAll(".slide");
     const width = this.el.offsetWidth;
     const fullwidth = width * this.links.length;
@@ -55,17 +71,16 @@ export class ZSlideshow {
   }
   getBulletDimension() {
     switch (this.device) {
-      case DeviceEnum.mobile:
+      case DeviceEnum.MOBILE:
         return 24;
-      case DeviceEnum.tablet:
+      case DeviceEnum.TABLET:
         return 32;
       default:
         return 40;
     }
   }
   renderSlides(items) {
-    return (h("div", { id: "slides" }, items.map((item, i) => (h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` },
-      h("img", { src: item }))))));
+    return (h("div", { id: "slides" }, items.map((item, i) => (h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, h("img", { src: item }))))));
   }
   renderScroll(direction) {
     let disabled = false, nextSlide = this.currentSlide;
@@ -85,81 +100,81 @@ export class ZSlideshow {
         }), tabindex: 0, role: "button" }));
   }
   renderSlideshowMain() {
-    return (h("main", null,
-      this.renderScroll("left"),
-      this.renderSlides(this.links),
-      this.renderScroll("right")));
+    return (h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
   }
   renderBullet(i) {
     return (h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
   }
   renderSlideshowFooter() {
-    return (h("footer", null,
-      h("div", { class: "footerLeft" },
-        h("slot", { name: "footer-left" })),
-      h("div", { class: "footerCenter" },
-        h("div", { class: "bulletContainer" }, Object.keys(this.links).map(i => this.renderBullet(parseInt(i))))),
-      h("div", { class: "footerRight" },
-        h("slot", { name: "footer-right" }))));
+    return (h("footer", null, h("div", { class: "footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "footer-center" }, h("div", { class: "bullet-container" }, Object.keys(this.links).map((i) => this.renderBullet(parseInt(i))))), h("div", { class: "footer-right" }, h("slot", { name: "footer-right" }))));
   }
   render() {
-    if (!this.links || !this.links.length)
+    if (!this.links || !this.links.length) {
       return h("div", null);
-    return (h("div", { id: this.slideshowid },
-      this.renderSlideshowMain(),
-      this.renderSlideshowFooter()));
+    }
+    return (h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
   }
   static get is() { return "z-slideshow"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "slideshowid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "slideshow id"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "slideshowid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "slideshow id"
+        },
+        "attribute": "slideshowid",
+        "reflect": false
       },
-      "attribute": "slideshowid",
-      "reflect": false
-    },
-    "data": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string[] | string",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "array or JSON stringified images urls"
-      },
-      "attribute": "data",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "device": {},
-    "currentSlide": {}
-  }; }
+      "data": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string[] | string",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "array or JSON stringified images urls"
+        },
+        "attribute": "data",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "device": {},
+      "currentSlide": {}
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "data",
-      "methodName": "watchData"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "watchData"
+      }];
+  }
 }

package/dist/collection/snowflakes/myz/z-slideshow/styles.css

@@ -1,14 +1,14 @@
 :host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
   display: block;
   width: inherit;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
 }
 
 :host > div {
   display: flex;
-  flex-direction: column;
   width: inherit;
+  flex-direction: column;
 }
 
 main {
@@ -19,17 +19,17 @@ main {
 
 main z-icon.scroll {
   position: absolute;
+  z-index: 10;
   top: 50%;
   width: auto;
-  cursor: pointer;
-  transition: 0.6s ease;
   margin: 0 var(--space-unit);
+  cursor: pointer;
   fill: var(--color-primary01);
-  z-index: 10;
+  transition: 0.6s ease;
 }
 
 main .scroll.disabled {
-  opacity: 50%;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -40,56 +40,56 @@ main .scroll.right {
 #slides {
   display: flex;
   flex-wrap: wrap;
-  transition: all 300ms;
   line-height: 0px;
   overflow-y: hidden;
+  transition: all 300ms;
 }
 
 footer {
-  height: 56px;
+  display: grid;
   width: 100%;
+  height: 56px;
   align-items: center;
-  display: grid;
-  grid-template-columns: 2;
-  grid-template-rows: 2;
-  grid-template-areas: "center center" "left right";
   border-top: var(--border-base) solid var(--color-surface02);
+  grid-template: 2 / 2;
+  grid-template-areas: "center center" "left right";
 }
 
 footer > div {
-  align-items: center;
   width: 100%;
+  align-items: center;
 }
 
-footer .footerCenter {
+footer .footer-center {
   grid-area: center;
 }
-footer .footerLeft {
+
+footer .footer-left {
   grid-area: left;
 }
 
-footer .footerRight {
+footer .footer-right {
   grid-area: right;
 }
 
-footer .bulletContainer {
+footer .bullet-container {
   display: flex;
-  margin: 0 auto;
-  justify-content: center;
-  align-items: center;
   min-height: 60px;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
 }
 
-footer .bulletContainer .bullet {
+footer .bullet-container .bullet {
   width: 8px;
   height: 8px;
-  border-radius: 50%;
-  background-color: var(--bg-neutral-150);
   margin: var(--space-unit) 2px;
+  background-color: var(--bg-neutral-150);
+  border-radius: 50%;
   pointer-events: none;
 }
 
-footer .bulletContainer .bullet.selected {
+footer .bullet-container .bullet.selected {
   background-color: var(--bg-neutral-400);
 }
 
@@ -97,14 +97,13 @@ footer .bulletContainer .bullet.selected {
 
 @media only screen and (min-width: 768px) {
   footer {
-    grid-template-columns: 1fr 2fr 1fr;
-    grid-template-rows: 1;
-    grid-template-areas: "left center right";
     height: 76px;
     border-top: var(--border-base) solid var(--color-surface02);
+    grid-template: 1 / 1fr 2fr 1fr;
+    grid-template-areas: "left center right";
   }
 
-  footer .bulletContainer .bullet {
+  footer .bullet-container .bullet {
     width: 10px;
     height: 10px;
     margin: var(--space-unit) 3px;
@@ -118,11 +117,11 @@ footer .bulletContainer .bullet.selected {
     margin: 0 10px;
   }
 
-  footer .bulletContainer .bullet {
+  footer .bullet-container .bullet {
     width: 16px;
     height: 16px;
     margin: var(--space-unit) calc(var(--space-unit) * 0.5);
-    pointer-events: auto;
     cursor: pointer;
+    pointer-events: auto;
   }
 }

package/dist/collection/utils/storybook-utils.js

@@ -4,10 +4,10 @@
  */
 function getRootCssProperties() {
   return [...document.styleSheets]
-    .map(sheet => [...sheet.cssRules])
+    .map((sheet) => [...sheet.cssRules])
     .flat()
     .filter((rule) => rule.selectorText === ":root")
-    .map(rule => Object.values(rule.style || {}))
+    .map((rule) => Object.values(rule.style || {}))
     .flat()
     .filter(Boolean);
 }
@@ -29,10 +29,11 @@ function getRootCssProperties() {
  * @returns {string[]}
  */
 export function getColorTokens() {
-  const availableColorGroups = ['red', 'green', 'blue', 'yellow', 'gray', 'avatar', 'color'];
+  const availableColorGroups = ["red", "green", "blue", "yellow", "gray", "avatar", "color"];
 
-  const colorTokens = getRootCssProperties()
-    ?.filter(token => availableColorGroups.some((group) => token.startsWith(`--${group}`)));
+  const colorTokens = getRootCssProperties()?.filter((token) =>
+    availableColorGroups.some((group) => token.startsWith(`--${group}`))
+  );
 
   // remove duplicates
   return [...new Set(colorTokens)];