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

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

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

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

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

@@ -0,0 +1,182 @@
+: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;
+}