@zanichelli/albe-web-components 12.1.1 → 12.1.3-rc

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

@@ -1,120 +0,0 @@
-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

@@ -1,47 +0,0 @@
-: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

@@ -1,180 +0,0 @@
-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

@@ -1,127 +0,0 @@
-: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

@@ -1,76 +0,0 @@
-/**
- * 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

@@ -1,115 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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