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

package/dist/collection/components/z-info-reveal/index.js

@@ -1,147 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { InfoRevealPosition } from "../../beans";
-/**
- * Info reveal component.
- *
- * @slot - info to display in the info box. If more than one element has been slotted,
- * by clicking on the panel it switches to the next info element.
- * @cssprop --z-info-reveal-theme--surface - background color of the info reveal panel.
- * @cssprop --z-info-reveal-theme--text - foreground color of the info reveal panel.
- * @cssprop --z-info-reveal-shadow - shadow of the info reveal panel.
- * @cssprop --z-info-reveal-max-width - max width of the info reveal panel.
- */
-export class ZInfoReveal {
-  constructor() {
-    /** Name of the icon for the open button */
-    this.icon = "informationsource";
-    /** Info reveal's position */
-    this.position = InfoRevealPosition.BOTTOM_RIGHT;
-    /** Whether the info panel is open. */
-    this.open = false;
-    /** Current index for the info queue. */
-    this.currentIndex = null;
-  }
-  watchItems() {
-    Array.from(this.el.children).forEach((child, index) => {
-      if (this.currentIndex === index) {
-        child.setAttribute("data-current", "");
-      }
-      else {
-        child.removeAttribute("data-current");
-      }
-    });
-  }
-  /**
-   * Open the info box.
-   */
-  openInfoBox() {
-    this.currentIndex = 0;
-    this.open = true;
-  }
-  /**
-   * Close the info box.
-   */
-  closeInfoBox() {
-    this.open = false;
-  }
-  /**
-   * Navigate slotted info.
-   * It closes the info box after the last info has been navigated.
-   */
-  next() {
-    this.currentIndex = this.currentIndex + 1;
-    if (this.currentIndex === this.el.children.length) {
-      this.closeInfoBox();
-    }
-  }
-  render() {
-    return (h(Host, { open: this.open }, h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
-  }
-  static get is() { return "z-info-reveal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Name of the icon for the open button"
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"informationsource\""
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "InfoRevealPosition",
-          "resolved": "InfoRevealPosition.BOTTOM_LEFT | InfoRevealPosition.BOTTOM_RIGHT | InfoRevealPosition.TOP_LEFT | InfoRevealPosition.TOP_RIGHT",
-          "references": {
-            "InfoRevealPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Info reveal's position"
-        },
-        "attribute": "position",
-        "reflect": true,
-        "defaultValue": "InfoRevealPosition.BOTTOM_RIGHT"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Text that appears on closed panel next to the open button."
-        },
-        "attribute": "label",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "currentIndex": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "currentIndex",
-        "methodName": "watchItems"
-      }];
-  }
-}

package/dist/collection/components/z-info-reveal/styles.css

@@ -1,103 +0,0 @@
-:host {
-  --z-info-reveal-theme--surface: var(--color-black);
-  --z-info-reveal-theme--text: var(--color-white);
-  --z-info-reveal-shadow: var(--shadow-2);
-  --z-info-reveal-max-width: 375px; /* defaults to average width of mobile devices */
-
-  position: relative;
-  display: flex;
-  width: fit-content;
-  background-color: var(--z-info-reveal-theme--surface);
-  color: var(--z-info-reveal-theme--text);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  letter-spacing: 0;
-  line-height: 1.5;
-}
-
-button {
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  border-radius: 0;
-  color: inherit;
-  cursor: pointer;
-  fill: currentcolor;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-}
-
-z-icon {
-  --z-icon-width: calc(var(--space-unit) * 3);
-  --z-icon-height: calc(var(--space-unit) * 3);
-
-  display: flex;
-}
-
-.z-info-reveal-trigger {
-  display: flex;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  padding: calc(var(--space-unit) / 2);
-  box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
-}
-
-:host([position="top_left"]) .z-info-reveal-trigger,
-:host([position="bottom_left"]) .z-info-reveal-trigger {
-  flex-direction: row-reverse;
-}
-
-:host([open]) .z-info-reveal-trigger {
-  box-shadow: none;
-}
-
-.info-box {
-  position: absolute;
-  display: flex;
-  max-width: var(--z-info-reveal-max-width);
-  padding: calc(var(--space-unit) / 2);
-  background-color: var(--z-info-reveal-theme--surface);
-  box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
-  cursor: pointer;
-}
-
-:host([position="bottom_left"]) .info-box,
-:host([position="bottom_right"]) .info-box {
-  bottom: 0;
-}
-
-:host([position="top_right"]) .info-box,
-:host([position="bottom_right"]) .info-box {
-  right: 0;
-}
-
-:host([position="top_left"]) .info-box,
-:host([position="bottom_left"]) .info-box {
-  left: 0;
-  flex-direction: row-reverse;
-}
-
-::slotted(*) {
-  display: none;
-  width: max-content;
-}
-
-::slotted([data-current]) {
-  display: block;
-}
-
-:host([position="top_left"]) .z-info-reveal-close,
-:host([position="top_right"]) .z-info-reveal-close {
-  align-self: flex-start;
-}
-
-:host([position="bottom_left"]) .z-info-reveal-close,
-:host([position="bottom_right"]) .z-info-reveal-close {
-  align-self: flex-end;
-}

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

@@ -1,162 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { OffCanvasVariant, TransitionDirection } from "../../beans";
-/**
- * @slot canvasContent - Slot for the main content.
- */
-export class ZOffcanvas {
-  constructor() {
-    /**
-     * Offcanvas variant.
-     * Can be one `overlay` or `pushcontent`.
-     * Default variant: pushcontent
-     */
-    this.variant = OffCanvasVariant.PUSHCONTENT;
-    /** Whether the offcanvas is open. Default: false */
-    this.open = false;
-    /** open content transitioning in a specified direction left | right. Default: left */
-    this.transitiondirection = TransitionDirection.LEFT;
-    /**
-     * Whether to skip the initial animation.
-     * Useful when the initial value of the `open` prop is set to `true`.
-     */
-    this.skipLoadAnimation = false;
-  }
-  onOpenChanged() {
-    if (!this.open && this.skipLoadAnimation) {
-      this.skipLoadAnimation = false;
-    }
-    if (this.open) {
-      this.handlePageOverflow();
-    }
-    this.canvasOpenStatusChanged.emit(this.open);
-  }
-  handlePageOverflow() {
-    const overflow = this.variant === OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
-    document.body.style[overflow] = this.open ? "hidden" : "";
-  }
-  render() {
-    return (h(Host, { class: { "skip-animation": this.skipLoadAnimation } }, h("div", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { role: "presentation", class: "canvas-content" }, h("slot", { name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
-  }
-  static get is() { return "z-offcanvas"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "OffCanvasVariant",
-          "resolved": "OffCanvasVariant.OVERLAY | OffCanvasVariant.PUSHCONTENT",
-          "references": {
-            "OffCanvasVariant": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Offcanvas variant.\nCan be one `overlay` or `pushcontent`.\nDefault variant: pushcontent"
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "OffCanvasVariant.PUSHCONTENT"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the offcanvas is open. Default: false"
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "transitiondirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "TransitionDirection",
-          "resolved": "TransitionDirection.LEFT | TransitionDirection.RIGHT",
-          "references": {
-            "TransitionDirection": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "open content transitioning in a specified direction left | right. Default: left"
-        },
-        "attribute": "transitiondirection",
-        "reflect": true,
-        "defaultValue": "TransitionDirection.LEFT"
-      },
-      "skipLoadAnimation": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether to skip the initial animation.\nUseful when the initial value of the `open` prop is set to `true`."
-        },
-        "attribute": "skip-load-animation",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "canvasOpenStatusChanged",
-        "name": "canvasOpenStatusChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "emitted when `open` prop changes"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "onOpenChanged"
-      }];
-  }
-}

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

@@ -1,182 +0,0 @@
-:host {
-  --z-offcanvas--container-width: 375px;
-  --z-offcanvas--top-space: 0;
-
-  min-width: 100%;
-  height: 100%;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  visibility: hidden;
-}
-
-.canvas-container {
-  display: flex;
-  overflow: -moz-scrollbars-none;
-  overflow: hidden;
-  min-width: 100%;
-  height: 100%;
-  flex-direction: column;
-  background: var(--color-surface01);
-}
-
-:host([variant="pushcontent"]) {
-  display: none;
-}
-
-:host([open]) {
-  display: flex;
-  visibility: visible;
-}
-
-:host([variant="overlay"]) {
-  position: fixed;
-  z-index: 1000;
-  top: var(--z-offcanvas--top-space);
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  height: calc(100% - var(--z-offcanvas--top-space));
-}
-
-:host([variant="overlay"][transitiondirection="left"]) {
-  justify-content: end;
-}
-
-:host([variant="overlay"]) > .canvas-container {
-  z-index: 1010;
-}
-
-:host([variant="overlay"]) .canvas-background {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--gray900);
-  opacity: 0.7;
-}
-
-.canvas-container > .canvas-content {
-  overflow: auto;
-  flex: 1 auto;
-  padding: 0 calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
-  overflow-x: hidden;
-}
-
-:host([variant="overlay"]) > .canvas-container > .canvas-content {
-  padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;
-}
-
-/* Webkit Scrollbar */
-.canvas-container .canvas-content::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
-  border-radius: var(--border-radius);
-}
-
-.canvas-container .canvas-content::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.canvas-container .canvas-content::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
-}
-
-.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-/* Firefox */
-.canvas-container .canvas-content {
-  scrollbar-color: var(--color-primary01) transparent;
-}
-
-/* Mobile */
-@media only screen and (max-width: 768px) {
-  :host([open][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
-    animation: enter-right 0.4s ease-out;
-  }
-
-  :host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
-    animation: enter-left 0.4s ease-out;
-  }
-}
-
-/* Tablet / Desktop */
-@media only screen and (min-width: 768px) {
-  :host {
-    min-width: auto;
-  }
-
-  .canvas-container {
-    width: auto;
-    min-width: max(var(--z-offcanvas--container-width), 375px);
-    max-width: max(var(--z-offcanvas--container-width), 375px);
-    height: auto;
-    min-height: calc(var(--space-unit) * 40);
-  }
-
-  :host(:not([variant="overlay"])[open]:not(.skip-animation)) {
-    width: auto;
-    animation: grow 0.4s ease-out;
-  }
-}
-
-/* ANIMATION */
-
-@keyframes grow {
-  from {
-    width: 0;
-  }
-
-  to {
-    width: max(var(--z-offcanvas--container-width), 375px);
-  }
-}
-
-@keyframes enter-left {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes enter-right {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-:host([open][variant="overlay"][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
-  animation: enter-right 0.4s ease-out;
-}
-
-:host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
-  animation: enter-left 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  transform: translateX(-100%);
-  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="left"]) > .canvas-container {
-  transform: translateX(100%);
-  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"]) .canvas-background {
-  transition: visibility 0.4s ease-out;
-  visibility: hidden;
-}