@zanichelli/albe-web-components 12.1.4-rc → 12.2.0-rc

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-size-medium) 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(--gray200);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+footer .bullet-container .bullet.selected {
+  background-color: var(--gray400);
+}
+
+/* Tablet breakpoint */
+
+@media only screen and (min-width: 768px) {
+  footer {
+    height: 76px;
+    border-top: var(--border-size-medium) 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,76 @@
+/**
+ * Get all root CSS properties.
+ */
+function getRootCssProperties() {
+  return Array.from(document.styleSheets)
+    .map((sheet) => Array.from(sheet.cssRules))
+    .flat()
+    .filter((rule) => rule instanceof CSSStyleRule && rule.selectorText === ":root")
+    .map((rule) => Object.values(rule.style || {}))
+    .flat()
+    .filter(Boolean);
+}
+/**
+ * Get Design System color tokens.
+ * Can be used in components stories controls as follows:
+ * @example ```
+ * argTypes={{
+ *  "--z-component--background-color": {
+ *    control: {type: "select"},
+ *    options: getColorTokens(),
+ *  }
+ * }}```
+ *
+ * and then in the component tag
+ *
+ * ```<z-component .style="--z-component--background-color: var(${args["--z-component--background-color"]})" />```
+ */
+export function getColorTokens() {
+  var _a;
+  const availableColorGroups = ["red", "green", "blue", "yellow", "gray", "avatar", "color"];
+  const colorTokens = (_a = getRootCssProperties()) === null || _a === void 0 ? void 0 : _a.filter((token) => availableColorGroups.some((group) => token.startsWith(`--${group}`)));
+  return [...new Set(colorTokens)].sort();
+}
+/**
+ * Get Design System color tokens as CSS variable rule (something like `var(--color-token)`).
+ * @example ```
+ * argTypes={{
+ *  "--z-component--background-color": {
+ *    control: {type: "select"},
+ *    options: getColorTokens(),
+ *  }
+ * }}```
+ *
+ * and then in the component tag
+ *
+ * ```<z-component .style="--z-component--background-color: ${args["--z-component--background-color"]}" />```
+ */
+export function getColorVars() {
+  return getColorTokens().map((token) => `var(${token})`);
+}
+/**
+ * Get Design System color tokens as readable labels for control configuration.
+ * It assumes you set the options using the `getColorVars()` function, so expected options are something like `var(--color-token)`.
+ * @example ```
+ * argTypes={{
+ *  "--z-component--background-color": {
+ *    options: getColorTokens(),
+ *    control: {
+ *      type: "select",
+ *      labels: getColorVarsLabels(),
+ *    },
+ *  }
+ * }}```
+ */
+export function getColorVarsLabels() {
+  return getColorVars().reduce((acc, token) => (Object.assign(Object.assign({}, acc), { [token]: token.slice(6, -1) })), { null: "default" });
+}
+/**
+ * Get Design System themes tokens.
+ */
+export function getThemesColorTokens() {
+  var _a;
+  const colorTokens = (_a = getRootCssProperties()) === null || _a === void 0 ? void 0 : _a.filter((token) => token.startsWith(`--color`));
+  // remove duplicates
+  return [...new Set(colorTokens)];
+}

package/dist/collection/utils/utils.js

@@ -0,0 +1,115 @@
+import { KeyboardCode, Device } from "../beans/index";
+import { desktopBreakpoint, 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
+ */
+export function boolean(value) {
+  switch (value) {
+    case true:
+    case "true":
+    case 1:
+    case "1":
+    case "on":
+    case "yes":
+      return true;
+    case false:
+    case "false":
+    case 0:
+    case "0":
+    case "off":
+    case "no":
+      return false;
+    default:
+      return value;
+  }
+}
+export function retrieveAsset(assetName) {
+  return assetName && "assets/images/png/" + 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 === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function handleEnterKeydSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+export function getClickedElement(elem = null) {
+  if (!elem) {
+    elem = document.activeElement;
+  }
+  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
+    elem = elem.shadowRoot.activeElement;
+    return getClickedElement(elem);
+  }
+  return elem;
+}
+export function getElementTree(elem, tree = []) {
+  tree.push(elem);
+  if (elem.parentElement) {
+    elem = elem.parentElement;
+    return getElementTree(elem, tree);
+  }
+  else if (elem.parentNode && elem.parentNode.host) {
+    elem = elem.parentNode.host;
+    return getElementTree(elem, tree);
+  }
+  return tree;
+}
+export function getSiblings(elem) {
+  const siblings = [];
+  if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {
+    return siblings;
+  }
+  elem.parentNode.childNodes.forEach((child) => {
+    if (child.nodeType === 1 && child !== elem) {
+      siblings.push(child);
+    }
+  });
+  return siblings;
+}
+export function getDevice() {
+  switch (true) {
+    case window.innerWidth <= mobileBreakpoint:
+      return Device.MOBILE;
+    case window.innerWidth <= tabletBreakpoint:
+      return Device.TABLET;
+    case window.innerWidth <= desktopBreakpoint:
+      return Device.DESKTOP;
+    default:
+      return Device.DESKTOP_WIDE;
+  }
+}
+export function convertJson(data) {
+  try {
+    return JSON.parse(data);
+  }
+  catch (_a) {
+    return false;
+  }
+}
+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) {
+    color = 1;
+  }
+  return `${prefix}${color.toString().padStart(2, "0")}`;
+}

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/esm/breakpoints-9b81eb1b.js

@@ -0,0 +1,5 @@
+const mobileBreakpoint = 767;
+const tabletBreakpoint = 1052;
+const desktopBreakpoint = 1365;
+
+export { desktopBreakpoint as d, mobileBreakpoint as m, tabletBreakpoint as t };