@zanichelli/albe-web-components 6.6.10-test → 6.8.0

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

@@ -0,0 +1,120 @@
+import { h } from "@stencil/core";
+import { InputStatus } from "../../../beans";
+export class ZOtp {
+  constructor() {
+    /** Input number */
+    this.inputNum = 6;
+  }
+  emitInputChange(value) {
+    this.otpChange.emit({ value });
+  }
+  componentWillLoad() {
+    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((_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"; }
+  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"
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "InputStatus",
+          "resolved": "InputStatus.ERROR | InputStatus.SUCCESS | InputStatus.WARNING",
+          "references": {
+            "InputStatus": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Input status"
+        },
+        "attribute": "status",
+        "reflect": false
+      },
+      "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

@@ -0,0 +1,47 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+.digits-container {
+  display: flex;
+  justify-content: flex-start;
+}
+
+input {
+  width: calc(var(--space-unit) * 5);
+  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-color: var(--color-error01);
+  background-color: var(--color-error-inverse);
+  border-radius: 4px;
+}
+
+input:not(:last-of-type) {
+  margin-right: var(--space-unit);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  input:not(:last-of-type) {
+    margin-right: calc(var(--space-unit) * 2);
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1025px) {
+  input {
+    width: calc(var(--space-unit) * 6);
+  }
+}

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

@@ -0,0 +1,180 @@
+import { h } from "@stencil/core";
+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
+ */
+export class ZSlideshow {
+  constructor() {
+    this.currentSlide = 0;
+  }
+  watchData() {
+    this.parseLinks();
+  }
+  componentWillLoad() {
+    this.parseLinks();
+    this.setDevice();
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+  componentDidRender() {
+    this.setStyle();
+  }
+  handleResize() {
+    this.setDevice();
+    this.setStyle();
+  }
+  parseLinks() {
+    var _a;
+    switch (typeof this.data) {
+      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:
+        this.links = this.data;
+        break;
+    }
+  }
+  setStyle() {
+    const refSlides = this.el.shadowRoot.querySelector("#slides");
+    if (!refSlides) {
+      return;
+    }
+    const allImages = this.el.shadowRoot.querySelectorAll(".slide");
+    const width = this.el.offsetWidth;
+    const fullwidth = width * this.links.length;
+    refSlides.style.width = `${fullwidth}px`;
+    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;
+    allImages.forEach((item) => {
+      const img = item.querySelector("img");
+      img.style.width = `${width}px`;
+    });
+  }
+  setDevice() {
+    this.device = getDevice();
+  }
+  setCurrentSlide(index) {
+    this.currentSlide = index;
+  }
+  getBulletDimension() {
+    switch (this.device) {
+      case Device.MOBILE:
+        return 24;
+      case Device.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 }))))));
+  }
+  renderScroll(direction) {
+    let disabled = false, nextSlide = this.currentSlide;
+    if (direction === "left") {
+      disabled = this.currentSlide === 0;
+      nextSlide--;
+    }
+    else if (direction === "right") {
+      disabled = this.currentSlide === this.links.length - 1;
+      nextSlide++;
+    }
+    return (h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
+        !disabled && this.setCurrentSlide(nextSlide);
+      }, onKeyUp: (e) => !disabled &&
+        handleKeyboardSubmit(e, () => {
+          this.setCurrentSlide(nextSlide);
+        }), tabindex: 0, role: "button" }));
+  }
+  renderSlideshowMain() {
+    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: "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) {
+      return h("div", null);
+    }
+    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"
+        },
+        "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": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "watchData"
+      }];
+  }
+}

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

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

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

@@ -0,0 +1,51 @@
+/**
+ * Get all root CSS properties.
+ * @returns {string[]}
+ */
+function getRootCssProperties() {
+  return [...document.styleSheets]
+    .map((sheet) => [...sheet.cssRules])
+    .flat()
+    .filter((rule) => rule.selectorText === ":root")
+    .map((rule) => Object.values(rule.style || {}))
+    .flat()
+    .filter(Boolean);
+}
+
+/**
+ * Get Design System color tokens.
+ * Can be used in components stories controls:
+ * @example ```
+ * argTypes={{
+ *  "--z-component--background-color": {
+ *    options: getColorTokens(),
+ *    control: { type: "select" }
+ *  }
+ * }}```
+ *
+ * and then in the component tag
+ *
+ * ```<z-component .style="--z-component--background-color: var(${args["--z-component--background-color"]})" />```
+ * @returns {string[]}
+ */
+export function getColorTokens() {
+  const availableColorGroups = ["red", "green", "blue", "yellow", "gray", "avatar", "color"];
+
+  const colorTokens = getRootCssProperties()?.filter((token) =>
+    availableColorGroups.some((group) => token.startsWith(`--${group}`))
+  );
+
+  // remove duplicates
+  return [...new Set(colorTokens)];
+}
+
+/**
+ * Get Design System themes tokens.
+ * @returns {string[]}
+ */
+export function getThemesColorTokens() {
+  const colorTokens = getRootCssProperties()?.filter((token) => token.startsWith(`--color`));
+
+  // remove duplicates
+  return [...new Set(colorTokens)];
+}

package/{www/build/utils-b96780be.js → dist/collection/utils/utils.js}

@@ -1,14 +1,13 @@
-import { e as KeyboardCode, o as Device } from './index-968a240f.js';
-import { t as tabletBreakpoint, m as mobileBreakpoint } from './breakpoints-c386984e.js';
-
-function format(first, middle, last) {
+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 boolean value for passed value if a boolean corresponding value is found
  * Return passed value otherwise
  */
-function boolean(value) {
+export function boolean(value) {
   switch (value) {
     case true:
     case "true":
@@ -28,20 +27,20 @@ function boolean(value) {
       return value;
   }
 }
-function retrieveAsset(assetName) {
+export function retrieveAsset(assetName) {
   return assetName && "assets/images/png/" + assetName;
 }
-function randomId() {
+export function randomId() {
   return Math.random().toString(36).replace("0.", "");
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleKeyboardSubmit(ev, callback, ...args) {
+export function handleKeyboardSubmit(ev, callback, ...args) {
   if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
     ev.preventDefault();
     callback(...args);
   }
 }
-function getClickedElement(elem = null) {
+export function getClickedElement(elem = null) {
   if (!elem) {
     elem = document.activeElement;
   }
@@ -51,7 +50,7 @@ function getClickedElement(elem = null) {
   }
   return elem;
 }
-function getElementTree(elem, tree = []) {
+export function getElementTree(elem, tree = []) {
   tree.push(elem);
   if (elem.parentElement) {
     elem = elem.parentElement;
@@ -63,7 +62,7 @@ function getElementTree(elem, tree = []) {
   }
   return tree;
 }
-function getSiblings(elem) {
+export function getSiblings(elem) {
   const siblings = [];
   if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {
     return siblings;
@@ -75,7 +74,7 @@ function getSiblings(elem) {
   });
   return siblings;
 }
-function getDevice() {
+export function getDevice() {
   switch (true) {
     case window.innerWidth <= mobileBreakpoint:
       return Device.MOBILE;
@@ -85,7 +84,7 @@ function getDevice() {
       return Device.DESKTOP;
   }
 }
-function convertJson(data) {
+export function convertJson(data) {
   try {
     return JSON.parse(data);
   }
@@ -93,7 +92,7 @@ function convertJson(data) {
     return false;
   }
 }
-function colorFromId(id) {
+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}`);
@@ -105,5 +104,3 @@ function colorFromId(id) {
   }
   return `${prefix}${color.toString().padStart(2, "0")}`;
 }
-
-export { getElementTree as a, boolean as b, colorFromId as c, getClickedElement as d, convertJson as e, getDevice as g, handleKeyboardSubmit as h, randomId as r };

package/dist/esm/_commonjsHelpers-9943807e.js

@@ -0,0 +1,17 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { commonjsGlobal as a, createCommonjsModule as c };

package/dist/{web-components-library/hammer-782a2043.js → esm/hammer-c3266b17.js}

@@ -1,4 +1,4 @@
-import { c as createCommonjsModule } from './_commonjsHelpers-8fe71198.js';
+import { c as createCommonjsModule } from './_commonjsHelpers-9943807e.js';
 
 var hammer = createCommonjsModule(function (module) {
 /*! Hammer.JS - v2.0.7 - 2016-04-22
@@ -7,7 +7,6 @@ var hammer = createCommonjsModule(function (module) {
  * Copyright (c) 2016 Jorik Tangelder;
  * Licensed under the MIT license */
 (function(window, document, exportName, undefined$1) {
-  'use strict';
 
 var VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
 var TEST_ELEMENT = document.createElement('div');
@@ -2637,7 +2636,7 @@ if (typeof undefined$1 === 'function' && undefined$1.amd) {
     undefined$1(function() {
         return Hammer;
     });
-} else if ('object' != 'undefined' && module.exports) {
+} else if (module.exports) {
     module.exports = Hammer;
 } else {
     window[exportName] = Hammer;