@zanichelli/albe-web-components 2.31.2 → 2.33.1

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

@@ -1,114 +0,0 @@
-import { Component, h, Event, Prop } from "@stencil/core";
-import { InputStatusEnum } from "../../../beans";
-export class ZOtp {
-  constructor() {
-    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));
-  }
-  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 })));
-  }
-  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": ""
-      },
-      "attribute": "input-num",
-      "reflect": false,
-      "defaultValue": "6"
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "InputStatusBean",
-        "resolved": "\"error\" | \"selecting\" | \"success\" | \"warning\"",
-        "references": {
-          "InputStatusBean": {
-            "location": "import",
-            "path": "../../../beans"
-          }
-        }
-      },
-      "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": {}
-      }
-    }]; }
-}

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 {
-  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;
-  box-sizing: border-box;
-  padding: 0;
-  color: var(--color-surface05);
-}
-
-input.error {
-  border: 1px solid;
-  border-radius: 4px;
-  border-color: var(--color-error01);
-  background-color: var(--color-error-inverse);
-}
-
-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,165 +0,0 @@
-import { Component, Prop, h, State, Element, Watch } from "@stencil/core";
-import { DeviceEnum } from "../../../beans";
-import { getDevice, handleKeyboardSubmit, convertJson } from "../../../utils/utils";
-/**
- * @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":
-        return (this.links = (_a = convertJson(this.data)) !== null && _a !== void 0 ? _a : []);
-      default:
-        return (this.links = this.data);
-    }
-  }
-  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 DeviceEnum.mobile:
-        return 24;
-      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 }))))));
-  }
-  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: "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" }))));
-  }
-  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,128 +0,0 @@
-:host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  display: block;
-  width: inherit;
-}
-
-:host > div {
-  display: flex;
-  flex-direction: column;
-  width: inherit;
-}
-
-main {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-
-main z-icon.scroll {
-  position: absolute;
-  top: 50%;
-  width: auto;
-  cursor: pointer;
-  transition: 0.6s ease;
-  margin: 0 var(--space-unit);
-  fill: var(--color-primary01);
-  z-index: 10;
-}
-
-main .scroll.disabled {
-  opacity: 50%;
-  pointer-events: none;
-}
-
-main .scroll.right {
-  right: 0;
-}
-
-#slides {
-  display: flex;
-  flex-wrap: wrap;
-  transition: all 300ms;
-  line-height: 0px;
-  overflow-y: hidden;
-}
-
-footer {
-  height: 56px;
-  width: 100%;
-  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);
-}
-
-footer > div {
-  align-items: center;
-  width: 100%;
-}
-
-footer .footerCenter {
-  grid-area: center;
-}
-footer .footerLeft {
-  grid-area: left;
-}
-
-footer .footerRight {
-  grid-area: right;
-}
-
-footer .bulletContainer {
-  display: flex;
-  margin: 0 auto;
-  justify-content: center;
-  align-items: center;
-  min-height: 60px;
-}
-
-footer .bulletContainer .bullet {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--bg-neutral-150);
-  margin: var(--space-unit) 2px;
-  pointer-events: none;
-}
-
-footer .bulletContainer .bullet.selected {
-  background-color: var(--bg-neutral-400);
-}
-
-/* Tablet breakpoint */
-
-@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);
-  }
-
-  footer .bulletContainer .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 .bulletContainer .bullet {
-    width: 16px;
-    height: 16px;
-    margin: var(--space-unit) calc(var(--space-unit) * 0.5);
-    pointer-events: auto;
-    cursor: pointer;
-  }
-}