@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -1,30 +1,30 @@
 import { h } from "@stencil/core";
-import { InputStatusEnum } from "../../../beans";
+import { InputStatus } 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 == InputStatus.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"; }
@@ -52,7 +52,7 @@ export class ZOtp {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Input number"
         },
         "attribute": "input-num",
         "reflect": false,
@@ -62,10 +62,10 @@ export class ZOtp {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputStatusBean",
-          "resolved": "\"error\" | \"success\" | \"warning\"",
+          "original": "InputStatus",
+          "resolved": "InputStatus.ERROR | InputStatus.SUCCESS | InputStatus.WARNING",
           "references": {
-            "InputStatusBean": {
+            "InputStatus": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -75,7 +75,7 @@ export class ZOtp {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Input status"
         },
         "attribute": "status",
         "reflect": false
@@ -92,7 +92,7 @@ export class ZOtp {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Input message"
         },
         "attribute": "message",
         "reflect": false
@@ -108,7 +108,7 @@ export class ZOtp {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Otp change event"
         },
         "complexType": {
           "original": "any",

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 { h } from "@stencil/core";
-import { DeviceEnum } from "../../../beans";
+import { Device } 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,9 +71,9 @@ export class ZSlideshow {
   }
   getBulletDimension() {
     switch (this.device) {
-      case DeviceEnum.mobile:
+      case Device.MOBILE:
         return 24;
-      case DeviceEnum.tablet:
+      case Device.TABLET:
         return 32;
       default:
         return 40;
@@ -90,11 +106,12 @@ export class ZSlideshow {
     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()));
   }
   static get is() { return "z-slideshow"; }

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)];

package/dist/collection/utils/utils.js

@@ -1,7 +1,7 @@
-import { KeyboardCodeEnum, DeviceEnum } from "../beans/index";
+import { KeyboardCode, Device } from "../beans/index";
 import { mobileBreakpoint, tabletBreakpoint } from "../constants/breakpoints";
 export function format(first, middle, last) {
-  return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
+  return (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "");
 }
 /**
  * Return boolean value for passed value if a boolean corresponding value is found
@@ -33,16 +33,17 @@ export function retrieveAsset(assetName) {
 export function randomId() {
   return Math.random().toString(36).replace("0.", "");
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function handleKeyboardSubmit(ev, callback, ...args) {
-  if (ev.code === KeyboardCodeEnum.ENTER ||
-    ev.code === KeyboardCodeEnum.SPACE) {
+  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
     ev.preventDefault();
     callback(...args);
   }
 }
 export function getClickedElement(elem = null) {
-  if (!elem)
+  if (!elem) {
     elem = document.activeElement;
+  }
   if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
     elem = elem.shadowRoot.activeElement;
     return getClickedElement(elem);
@@ -54,17 +55,15 @@ export function getElementTree(elem, tree = []) {
   if (elem.parentElement) {
     elem = elem.parentElement;
     return getElementTree(elem, tree);
-    // @ts-ignore
   }
   else if (elem.parentNode && elem.parentNode.host) {
-    // @ts-ignore
     elem = elem.parentNode.host;
     return getElementTree(elem, tree);
   }
   return tree;
 }
 export function getSiblings(elem) {
-  let siblings = [];
+  const siblings = [];
   if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {
     return siblings;
   }
@@ -78,29 +77,30 @@ export function getSiblings(elem) {
 export function getDevice() {
   switch (true) {
     case window.innerWidth <= mobileBreakpoint:
-      return DeviceEnum.mobile;
+      return Device.MOBILE;
     case window.innerWidth <= tabletBreakpoint:
-      return DeviceEnum.tablet;
+      return Device.TABLET;
     default:
-      return DeviceEnum.desktop;
+      return Device.DESKTOP;
   }
 }
 export function convertJson(data) {
   try {
     return JSON.parse(data);
   }
-  catch (e) {
+  catch (_a) {
     return false;
   }
 }
-const prefix = "avatar-C"; // prefix for color vars name
-const colorsCount = 19; // available colors
 export function colorFromId(id) {
+  const prefix = "avatar-C"; // prefix for color vars name
+  const colorsCount = 19; // available colors
   const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
   let color = Math.ceil(colorsCount * (seed % 1));
   // if result of mc is 0
   // es.: 3895229
-  if (color === 0)
+  if (color === 0) {
     color = 1;
+  }
   return `${prefix}${color.toString().padStart(2, "0")}`;
 }