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

package/dist/collection/components/z-card/index.js

@@ -1,177 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { CardVariant } from "../../beans";
-export class ZCard {
-  constructor() {
-    /** Enable click interactions on the card. Default: false */
-    this.clickable = false;
-    /** Enable shadow. Default: false. */
-    this.showshadow = false;
-  }
-  onClick(ev) {
-    // Do nothing for clicks on actions.
-    if (ev.target.getAttribute("slot") === "action") {
-      return;
-    }
-    if (!this.clickable) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      return;
-    }
-    this.cardClicked.emit();
-  }
-  componentWillLoad() {
-    this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
-  }
-  /**
-   * Template for a card without image cover.
-   * A colored background replaces the image and some data is moved over it.
-   */
-  renderColorCoverCard() {
-    return [
-      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
-      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
-    ];
-  }
-  /**
-   * Template for the content div.
-   */
-  renderContentDiv() {
-    return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
-  }
-  render() {
-    if (this.variant === CardVariant.TEXT) {
-      return h(Host, null, this.renderContentDiv());
-    }
-    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
-      return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
-        h("slot", { name: "cover" }),
-        this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
-      ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
-    }
-    return h(Host, null, this.renderColorCoverCard());
-  }
-  static get is() { return "z-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CardVariant",
-          "resolved": "CardVariant.BORDER | CardVariant.OVERLAY | CardVariant.SHADOW | CardVariant.TEXT",
-          "references": {
-            "CardVariant": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
-        },
-        "attribute": "variant",
-        "reflect": true
-      },
-      "coverIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the icon to place over the image cover"
-        },
-        "attribute": "cover-icon",
-        "reflect": false
-      },
-      "clickable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable click interactions on the card. Default: false"
-        },
-        "attribute": "clickable",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showshadow": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable shadow. Default: false."
-        },
-        "attribute": "showshadow",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasCoverImage": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "cardClicked",
-        "name": "cardClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Card click event.\nFired only if `clickable` is true."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/z-card/styles.css

@@ -1,206 +0,0 @@
-/* The width of the card must be set by its container,
-respecting the grid indications of the design. */
-
-:host {
-  /* Override this var to change the cover's aspect ratio */
-  --aspect-ratio: 1.62;
-  --z-card--border-color: var(--gray200);
-  --z-card--color-cover-background: var(--color-surface01);
-  --z-card--text-background: var(--color-surface01);
-  --z-card--text-border-radius: none;
-  --z-card--text-border: none;
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-*,
-::slotted(*) {
-  box-sizing: border-box;
-}
-
-:host(:not([variant="overlay"])) .cover-container {
-  position: relative;
-  width: 100%;
-}
-
-/* Old good trick with percentage padding to keep the aspect ratio.
-Unfortunately the `aspect-ratio` property is still experimental */
-.cover-container {
-  padding-bottom: calc(100% / var(--aspect-ratio));
-}
-
-::slotted([slot="cover"]),
-.color-cover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-
-.cover-container > z-icon {
-  --z-icon-width: calc(var(--space-unit) * 11);
-  --z-icon-height: var(--z-icon-width);
-
-  position: absolute;
-  top: calc(50% - calc(var(--z-icon-height) / 2));
-  left: calc(50% - calc(var(--z-icon-width) / 2));
-  fill: var(--color-primary01);
-}
-
-.color-cover {
-  background-color: var(--z-card--color-cover-background);
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  padding-top: var(--space-unit);
-}
-
-.color-cover .cover-content {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding: var(--space-unit);
-}
-
-/* Truncates overflowing text */
-::slotted([slot="metadata"]),
-::slotted([slot="title"]),
-::slotted([slot="text"]) {
-  display: box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-}
-
-::slotted([slot="title"]:not(:last-child)),
-::slotted([slot="text"]:not(:last-child)) {
-  margin-bottom: var(--space-unit);
-}
-
-::slotted([slot="text"]),
-::slotted([slot="actions"]) {
-  margin: 0;
-}
-
-::slotted([slot="metadata"]:not(:last-child)) {
-  margin: 0 0 calc(var(--space-unit) * 0.25);
-  -webkit-line-clamp: 1;
-  text-transform: uppercase;
-}
-
-::slotted([slot="title"]) {
-  margin: 0;
-  font-weight: var(--font-sb);
-  -webkit-line-clamp: 2;
-}
-
-::slotted([slot="text"]) {
-  -webkit-line-clamp: 3;
-}
-
-.actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-::slotted([slot="action"]:not(:last-child)) {
-  margin-right: calc(var(--space-unit) * 1.5);
-}
-
-/* VARIANTS */
-:host([clickable]) {
-  cursor: pointer;
-}
-
-:host([clickable]:focus:focus-visible) {
-  outline: none;
-}
-
-:host(:not([variant])[clickable]:focus:focus-visible) {
-  padding: calc(var(--space-unit) * 0.5);
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([variant="text"]) {
-  border: var(--z-card--text-border);
-  background-color: var(--z-card--text-background);
-  border-radius: var(--z-card--text-border-radius);
-}
-
-:host([showshadow]) > .content,
-:host([variant="border"]) > .content,
-:host([variant="shadow"]) > .content {
-  height: 100%;
-  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);
-}
-
-:host([variant="text"]) > .content {
-  padding: calc(var(--space-unit) * 2) var(--space-unit);
-}
-
-:host([variant="border"]) .actions,
-:host([variant="shadow"]) .actions {
-  margin-top: auto;
-}
-
-/* Border */
-:host([variant="border"]) {
-  border: var(--border-size-small) solid var(--z-card--border-color);
-}
-
-:host([variant="border"][clickable]:hover) > .content {
-  background: var(--color-background);
-}
-
-:host([variant="border"][clickable]:focus:focus-visible) {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([variant="border"][clickable]:active) {
-  border-color: transparent;
-}
-
-/* Shadow */
-:host([variant="shadow"]),
-:host([showshadow]) {
-  box-shadow: var(--shadow-2);
-}
-
-:host([variant="shadow"][clickable]:hover),
-:host([clickable][showshadow]:hover) {
-  box-shadow: var(--shadow-4);
-}
-
-:host([variant="shadow"][clickable]:focus:focus-visible),
-:host([clickable][showshadow]:focus:focus-visible) {
-  box-shadow: var(--shadow-4);
-}
-
-:host([variant="shadow"][clickable]:active),
-:host([clickable][showshadow]:active) {
-  box-shadow: none;
-}
-
-/* Overlay */
-:host([variant="overlay"]) .content {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  justify-content: flex-end;
-  padding: var(--space-unit);
-  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));
-  color: var(--color-text-inverse);
-  fill: var(--color-text-inverse);
-}

package/dist/collection/components/z-carousel/index.js

@@ -1,300 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ButtonSize } from "../../beans";
-/**
- * ZCarousel component.
- * @cssprop --z-carousel-gutter - The gutter between items.
- * @slot - carousel items. use `<li>` elements inside this slot as it is wrapped inside an `<ul>`
- */
-export class ZCarousel {
-  constructor() {
-    /** Shows only one content at a time */
-    this.single = false;
-    /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
-    this.ghostLoadingHeight = 100;
-    /** Current item index for single mode. */
-    this.current = 0;
-    /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
-    this.scrollingTo = null;
-  }
-  onIndexChange() {
-    this.indexChange.emit({ currentItem: this.current });
-  }
-  onSingleModeChange() {
-    if (this.single && !this.intersectionObserver) {
-      this.setIntersectionObserver();
-    }
-  }
-  /**
-   * Set an intersection observer to:
-   * - highlight the indicator of the intersecting item during scroll
-   * - set the current item to the last intersecting item
-   */
-  setIntersectionObserver() {
-    this.intersectionObserver = new window.IntersectionObserver((entries) => {
-      const entry = entries.find((entry) => entry.isIntersecting);
-      if (!entry) {
-        return;
-      }
-      const entryIndex = this.items.findIndex((item) => item === entry.target);
-      this.highlightedIndicator = entryIndex;
-      /* skip setting the current item if intersection has been triggered by a programmatic scroll
-      (@see `goTo` function) and the final index has not been reached */
-      if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
-        return;
-      }
-      this.scrollingTo = null;
-      this.current = entryIndex;
-    }, {
-      root: this.itemsContainer,
-      threshold: 0.5,
-    });
-    this.items.forEach((element) => this.intersectionObserver.observe(element));
-  }
-  onPrev() {
-    if (this.single) {
-      this.goTo(Math.max(0, this.current - 1));
-      return;
-    }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
-    }
-    scroller.scrollBy({
-      left: -scroller.clientWidth / 2,
-      behavior: "smooth",
-    });
-  }
-  onNext() {
-    if (this.single) {
-      this.goTo(Math.min(this.current + 1, this.items.length - 1));
-      return;
-    }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
-    }
-    scroller.scrollBy({
-      left: scroller.clientWidth / 2,
-      behavior: "smooth",
-    });
-  }
-  /**
-   * Check if navigation buttons can be enabled or not and set local states.
-   */
-  checkNavigationValidity() {
-    if (this.single) {
-      this.canNavigatePrev = this.current > 1;
-      this.canNavigateNext = this.current < this.items.length - 1;
-    }
-    this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;
-    this.canNavigateNext =
-      this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
-  }
-  /**
-   * Check if footer can be rendered.
-   */
-  canShowFooter() {
-    return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
-      this.progressMode === CarouselProgressMode.DOTS ||
-      this.progressMode === CarouselProgressMode.NUMBERS);
-  }
-  /**
-   * Set current item to passed index.
-   * @param {number} index Index to set
-   */
-  goTo(index) {
-    if (this.current === index) {
-      return;
-    }
-    this.scrollingTo = index;
-    // the scroll will trigger the IntersectionObserver and set the current item
-    this.itemsContainer.scroll({
-      left: this.items[index].offsetLeft,
-      behavior: "smooth",
-    });
-  }
-  componentDidLoad() {
-    this.itemsContainer = this.hostElement.querySelector(".z-carousel-items-container");
-    if (!this.itemsContainer) {
-      return;
-    }
-    this.items = Array.from(this.itemsContainer.querySelectorAll("li"));
-    if (this.single) {
-      this.setIntersectionObserver();
-    }
-    this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
-    this.checkNavigationValidity();
-  }
-  render() {
-    if (this.isLoading) {
-      return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
-    }
-    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
-  }
-  static get is() { return "z-carousel"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "isLoading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The z-carousel is on loading state"
-        },
-        "attribute": "is-loading",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The z-carousel title, if given."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "single": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shows only one content at a time"
-        },
-        "attribute": "single",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "arrowsPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CarouselArrowsPosition",
-          "resolved": "CarouselArrowsPosition.BOTTOM | CarouselArrowsPosition.OVER",
-          "references": {
-            "CarouselArrowsPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Arrow buttons position"
-        },
-        "attribute": "arrows-position",
-        "reflect": false
-      },
-      "progressMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CarouselProgressMode",
-          "resolved": "CarouselProgressMode.DOTS | CarouselProgressMode.NUMBERS",
-          "references": {
-            "CarouselProgressMode": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Progress indicator. Only available for `single` mode"
-        },
-        "attribute": "progress-mode",
-        "reflect": false
-      },
-      "ghostLoadingHeight": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
-        },
-        "attribute": "ghost-loading-height",
-        "reflect": false,
-        "defaultValue": "100"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "current": {},
-      "items": {},
-      "highlightedIndicator": {},
-      "canNavigatePrev": {},
-      "canNavigateNext": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "indexChange",
-        "name": "indexChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on index change and only in `single` mode."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "current",
-        "methodName": "onIndexChange"
-      }, {
-        "propName": "single",
-        "methodName": "onSingleModeChange"
-      }];
-  }
-}