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

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

@@ -1,129 +0,0 @@
-z-carousel {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-
-  --z-carousel-gutter: 0;
-}
-
-z-carousel[single],
-z-carousel[single="true"] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-z-carousel[single="true"] .z-carousel-container,
-z-carousel[single] .z-carousel-container {
-  width: fit-content;
-  max-width: 100%;
-}
-
-z-carousel .loading-items-container {
-  display: none;
-}
-
-z-carousel .z-carousel-container {
-  display: flex;
-  flex-direction: column;
-}
-
-z-carousel .z-carousel-wrapper {
-  position: relative;
-}
-
-z-carousel .z-carousel-title {
-  margin-bottom: var(--space-unit);
-  color: var(--gray800);
-}
-
-z-carousel .z-carousel-items-container {
-  display: flex;
-  max-width: 100%;
-  flex-direction: row;
-  margin: 0;
-  list-style: none;
-  -ms-overflow-style: none; /* IE and Edge */
-  overflow-x: scroll;
-  padding-inline-start: 0;
-  scroll-snap-type: x mandatory;
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  scrollbar-width: none; /* Firefox */
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-z-carousel .z-carousel-items-container::-webkit-scrollbar {
-  display: none;
-}
-
-z-carousel .z-carousel-items-container > *:not(:last-child) {
-  margin-right: var(--z-carousel-gutter);
-}
-
-z-carousel[single="true"] .z-carousel-items-container > *:not(:last-child),
-z-carousel[single] .z-carousel-items-container > *:not(:last-child) {
-  margin-right: 0;
-}
-
-z-carousel .z-carousel-items-container > li {
-  scroll-snap-align: center;
-}
-
-z-button[data-direction] {
-  --z-icon-width: 32px;
-  --z-icon-height: 32px;
-
-  position: absolute;
-  bottom: 50%;
-  transform: translateY(50%);
-}
-
-z-button[data-direction="next"] {
-  right: 0;
-}
-
-z-carousel .z-carousel-footer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-top: var(--space-unit);
-}
-
-z-carousel .z-carousel-footer .numbers-progress,
-z-carousel .z-carousel-footer .dots-progress {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-z-carousel .z-carousel-footer .dots-progress button {
-  display: flex;
-  align-items: center;
-  padding: 0;
-  border: none;
-  margin: 0;
-  background-color: transparent;
-}
-
-z-carousel .z-carousel-footer .dots-progress button:not(.current) {
-  cursor: pointer;
-}
-
-z-carousel .z-carousel-footer .numbers-progress {
-  margin: 0 calc(var(--space-unit) / 2);
-  column-gap: calc(var(--space-unit) / 2);
-}
-
-z-carousel .z-carousel-footer .numbers-progress .current {
-  font-weight: var(--font-sb);
-}
-
-z-carousel .z-carousel-footer .dots-progress button.current z-icon {
-  fill: var(--gray800);
-}
-
-z-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon {
-  fill: var(--gray200);
-}

package/dist/collection/components/z-contextual-menu/index.js

@@ -1,126 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { PopoverPosition } from "../../beans";
-export class ZContextualMenu {
-  constructor() {
-    /**
-     * [optional] Sets text color of ZContextualMenu's content
-     */
-    this.color = "color-primary01";
-    /**
-     * [optional] Sets the position of the popover
-     */
-    this.popoverPosition = PopoverPosition.BOTTOM_RIGHT;
-  }
-  componentWillRender() {
-    if (this.elements) {
-      this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
-    }
-  }
-  componentDidLoad() {
-    this.popover.bindTo = this.triggerButton;
-  }
-  showIcon() {
-    return !this.jsonElements.some((element) => !element.icon);
-  }
-  togglePopover() {
-    if (!this.popover.open) {
-      this.popover.open = true;
-    }
-  }
-  render() {
-    var _a, _b;
-    return (h(Host, null, h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, h("z-icon", { name: "contextual-menu", fill: this.color })), h("z-popover", { ref: (el) => (this.popover = el), position: this.popoverPosition }, h("div", { class: "popover-content-container" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
-  }
-  static get is() { return "z-contextual-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "elements": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Elements of ZContextualMenu"
-        },
-        "attribute": "elements",
-        "reflect": false
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets text color of ZContextualMenu's content"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"color-primary01\""
-      },
-      "popoverPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverPosition",
-          "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
-          "references": {
-            "PopoverPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets the position of the popover"
-        },
-        "attribute": "popover-position",
-        "reflect": true,
-        "defaultValue": "PopoverPosition.BOTTOM_RIGHT"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "clickContextualMenu",
-        "name": "clickContextualMenu",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "remove filter click event, returns filterid"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-}

package/dist/collection/components/z-contextual-menu/styles.css

@@ -1,60 +0,0 @@
-:host {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-button {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-z-popover {
-  overflow: hidden;
-}
-
-.popover-content-container {
-  position: relative;
-  min-width: 112px;
-  max-width: 280px;
-  background-color: var(--color-surface02);
-  box-shadow: var(--shadow-2);
-  white-space: nowrap;
-}
-
-.element-container:hover {
-  color: var(--color-hover-primary);
-  fill: var(--color-hover-primary);
-}
-
-.element-text {
-  overflow: hidden;
-  font-size: 14px;
-  text-overflow: ellipsis;
-}
-
-.element-container,
-.disabled-element-container {
-  display: flex;
-  min-height: calc(var(--space-unit) * 4);
-  box-sizing: border-box;
-  align-items: center;
-  padding: calc(var(--space-unit) / 2) var(--space-unit);
-  fill: var(--color-disabled03);
-  gap: var(--space-unit);
-}
-
-.element-container {
-  fill: var(--color-primary01);
-}
-
-.element-icon {
-  display: flex;
-}

package/dist/collection/components/z-cover-hero/index.js

@@ -1,102 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { CoverHeroVariant, CoverHeroContentPosition } from "../../beans";
-/**
- * Cover hero component.
- * Component to display a hero image with content.
- *
- * @slot cover - slot for the cover image.
- * @slot content - slot for the content.
- * @slot info-reveal - slot for the info reveal.
- * @cssprop --cover-hero-height - height of the cover hero.
- * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS background property).
- * @cssprop --cover-hero-text-color - color of the text.
- */
-export class ZCoverHero {
-  constructor() {
-    /**
-     * Cover hero variant.
-     * Can be one of "OVERLAY", "STACKED".
-     */
-    this.variant = CoverHeroVariant.OVERLAY;
-    /**
-     * Cover hero content position (only for STACKED variant).
-     */
-    this.contentPosition = CoverHeroContentPosition.TOP;
-  }
-  /**
-   * Template for the content.
-   */
-  renderContent() {
-    return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
-  }
-  render() {
-    return (h(Host, null, this.variant === CoverHeroVariant.STACKED &&
-      this.contentPosition === CoverHeroContentPosition.TOP &&
-      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
-      this.contentPosition === CoverHeroContentPosition.BOTTOM &&
-      this.renderContent()));
-  }
-  static get is() { return "z-cover-hero"; }
-  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": "CoverHeroVariant",
-          "resolved": "CoverHeroVariant.OVERLAY | CoverHeroVariant.STACKED",
-          "references": {
-            "CoverHeroVariant": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Cover hero variant.\nCan be one of \"OVERLAY\", \"STACKED\"."
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "CoverHeroVariant.OVERLAY"
-      },
-      "contentPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CoverHeroContentPosition",
-          "resolved": "CoverHeroContentPosition.BOTTOM | CoverHeroContentPosition.TOP",
-          "references": {
-            "CoverHeroContentPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Cover hero content position (only for STACKED variant)."
-        },
-        "attribute": "content-position",
-        "reflect": true,
-        "defaultValue": "CoverHeroContentPosition.TOP"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}

package/dist/collection/components/z-cover-hero/styles.css

@@ -1,77 +0,0 @@
-:host {
-  --cover-hero-height: auto;
-  --cover-hero-overlay: none;
-  --cover-hero-text-color: var(--color-text-inverse);
-
-  display: block;
-}
-
-:host,
-* {
-  box-sizing: border-box;
-}
-
-:host .content-hero {
-  position: relative;
-  width: 100%;
-  height: var(--cover-hero-height);
-  min-height: calc(var(--space-unit) * 30);
-  align-items: baseline;
-  background-color: var(--gray600);
-}
-
-:host .content-container {
-  color: var(--cover-hero-text-color);
-  fill: var(--cover-hero-text-color);
-}
-
-/* Container of the slotted cover */
-:host .content-hero .cover {
-  position: absolute;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-}
-
-::slotted([slot="cover"]) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top center;
-}
-
-::slotted(z-info-reveal) {
-  position: absolute;
-  z-index: 1;
-  right: var(--grid-margin);
-  bottom: var(--grid-margin);
-}
-
-/* Variant overlay */
-:host([variant="overlay"]) .content-hero .cover::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--cover-hero-overlay);
-  content: "";
-}
-
-:host([variant="overlay"]) .content-hero .content-container {
-  position: relative;
-  height: 100%;
-  padding: var(--grid-margin);
-}
-
-/* Variant stacked */
-:host([variant="stacked"]) {
-  --cover-hero-text-color: var(--color-text01);
-}
-
-:host([variant="stacked"]) .content-container ::slotted(*) {
-  padding: var(--grid-margin) 0;
-}

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

@@ -1,95 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { DividerSize, DividerOrientation } from "../../beans";
-export class ZDivider {
-  constructor() {
-    /** [optional] Divider size */
-    this.size = DividerSize.SMALL;
-    /** [optional] Divider color */
-    this.color = "gray200";
-    /** [optional] Divider orintation */
-    this.orientation = DividerOrientation.HORIZONTAL;
-  }
-  render() {
-    return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
-  }
-  static get is() { return "z-divider"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DividerSize",
-          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
-          "references": {
-            "DividerSize": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Divider size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "DividerSize.SMALL"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Divider color"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"gray200\""
-      },
-      "orientation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DividerOrientation",
-          "resolved": "DividerOrientation.HORIZONTAL | DividerOrientation.VERTICAL",
-          "references": {
-            "DividerOrientation": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Divider orintation"
-        },
-        "attribute": "orientation",
-        "reflect": false,
-        "defaultValue": "DividerOrientation.HORIZONTAL"
-      }
-    };
-  }
-}

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

@@ -1,37 +0,0 @@
-:host {
-  display: block;
-  padding: 0;
-  margin: 0;
-}
-
-:host.divider-horizontal {
-  width: 100%;
-}
-
-:host.divider-vertical {
-  height: 100%;
-}
-
-:host.divider-small.divider-horizontal {
-  height: var(--border-size-small);
-}
-
-:host.divider-medium.divider-horizontal {
-  height: var(--border-size-medium);
-}
-
-:host.divider-large.divider-horizontal {
-  height: var(--border-size-large);
-}
-
-:host.divider-small.divider-vertical {
-  width: var(--border-size-small);
-}
-
-:host.divider-medium.divider-vertical {
-  width: var(--border-size-medium);
-}
-
-:host.divider-large.divider-vertical {
-  width: var(--border-size-large);
-}

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,18 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class ZGhostLoading {
-  render() {
-    return h(Host, null);
-  }
-  static get is() { return "z-ghost-loading"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-}

package/dist/collection/components/z-ghost-loading/styles.css

@@ -1,34 +0,0 @@
-:host {
-  display: inline-block;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  background: var(--bg-neutral-100);
-  border-radius: 4px;
-  transform: translate3d(0, 0, 0);
-}
-
-:host::after {
-  display: block;
-  width: 100%;
-  height: 100%;
-  animation: progress 1.6s ease-in-out infinite;
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-neutral-100) 0%,
-    var(--bg-neutral-150) 95%,
-    var(--bg-neutral-100) 100%
-  );
-  box-shadow: #e8ebee20 0 0 1px;
-  content: " ";
-}
-
-@keyframes progress {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  100% {
-    transform: translateX(100%);
-  }
-}