@zanichelli/albe-web-components 4.2.0 → 5.1.0

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

@@ -0,0 +1,143 @@
+import { Component, h, Prop, State, Watch, Element, 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';
+    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": "InfoRevealPositionBean",
+        "resolved": "\"bottom_left\" | \"bottom_right\" | \"top_left\" | \"top_right\"",
+        "references": {
+          "InfoRevealPositionBean": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "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,97 @@
+: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);
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+button {
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  fill: currentColor;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: 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;
+  align-items: center;
+  width: fit-content;
+  height: 100%;
+  column-gap: calc(var(--space-unit) / 2);
+  padding: calc(var(--space-unit) / 2);
+  box-shadow: var(--z-info-reveal-shadow);
+}
+
+: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);
+  column-gap: calc(var(--space-unit) / 2);
+  padding: calc(var(--space-unit) / 2);
+  background-color: var(--z-info-reveal-theme--surface);
+  box-shadow: var(--z-info-reveal-shadow);
+  cursor: pointer;
+}
+
+: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-popover/index.js

@@ -1,6 +1,5 @@
 import { Component, Prop, h, Watch, Listen, Element, State, Event, } from "@stencil/core";
 import { PopoverPositions, KeyboardKeys } from "../../beans";
-import { getElementTree } from "../../utils/utils";
 const documentElement = document.documentElement;
 function getParentElement(element) {
   if (element.parentNode.host) {
@@ -99,7 +98,7 @@ function computeOffset(element, targetParentOffset) {
 export class ZPopover {
   constructor() {
     /** Popover position. */
-    this.position = PopoverPositions.AUTO;
+    this.position = PopoverPositions.auto;
     /**
      * The open state of the popover.
      */
@@ -126,8 +125,7 @@ export class ZPopover {
     if (!this.closable) {
       return;
     }
-    const tree = getElementTree(e.target);
-    const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
+    const parent = e.path.find((elem) => elem === this.host);
     if (!parent) {
       this.open = false;
       this.positionChange.emit({ position: this.currentPosition });
@@ -135,8 +133,8 @@ export class ZPopover {
   }
   validatePosition(newValue) {
     if (newValue &&
-      Object.values(PopoverPositions).every((position) => newValue !== position)) {
-      this.position = PopoverPositions.AUTO;
+      !Object.values(PopoverPositions).includes(newValue)) {
+      this.position = PopoverPositions.auto;
     }
     this.currentPosition = this.position;
     this.positionChange.emit({ position: this.currentPosition });
@@ -210,28 +208,28 @@ export class ZPopover {
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.currentPosition;
     const positions = [];
-    if (this.position === PopoverPositions.AUTO) {
+    if (this.position === PopoverPositions.auto) {
       /**
        * The `AUTO` position tries to place the popover in the 'safest' area,
        * where there's more space available.
        */
       if (availableLeft / availableWidth > 0.6) {
-        positions.push(PopoverPositions.LEFT);
+        positions.push(PopoverPositions.left);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push(PopoverPositions.RIGHT);
+        positions.push(PopoverPositions.right);
       }
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift(PopoverPositions.TOP);
+        positions.unshift(PopoverPositions.top);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push(PopoverPositions.TOP);
+        positions.push(PopoverPositions.top);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift(PopoverPositions.BOTTOM);
+        positions.unshift(PopoverPositions.bottom);
       }
       else {
-        positions.push(PopoverPositions.BOTTOM);
+        positions.push(PopoverPositions.bottom);
       }
       position = positions.join("_");
     }
@@ -243,18 +241,18 @@ export class ZPopover {
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
     const offsetModifier = this.center ? 0.5 : 0;
     const sizeModifier = this.center ? 0.5 : 0;
-    if (position === PopoverPositions.TOP ||
-      position === PopoverPositions.TOP_RIGHT) {
+    if (position === PopoverPositions.top ||
+      position === PopoverPositions.top_right) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableTop}px`;
-      if (position === PopoverPositions.TOP_RIGHT) {
+      if (position === PopoverPositions.top_right) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === PopoverPositions.TOP_LEFT) {
+    else if (position === PopoverPositions.top_left) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = `${offsetBottom + boundingRect.height}px`;
@@ -262,18 +260,18 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableTop}px`;
     }
-    else if (position === PopoverPositions.BOTTOM ||
-      position === PopoverPositions.BOTTOM_RIGHT) {
+    else if (position === PopoverPositions.bottom ||
+      position === PopoverPositions.bottom_right) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = "auto";
       style.bottom = "auto";
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableBottom}px`;
-      if (position === PopoverPositions.BOTTOM_RIGHT) {
+      if (position === PopoverPositions.bottom_right) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === PopoverPositions.BOTTOM_LEFT) {
+    else if (position === PopoverPositions.bottom_left) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = "auto";
@@ -281,8 +279,8 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom}px`;
     }
-    else if (position === PopoverPositions.RIGHT ||
-      position === PopoverPositions.RIGHT_BOTTOM) {
+    else if (position === PopoverPositions.right ||
+      position === PopoverPositions.right_bottom) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = "auto";
       style.bottom = "auto";
@@ -290,7 +288,7 @@ export class ZPopover {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.RIGHT_TOP) {
+    else if (position === PopoverPositions.right_top) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -298,8 +296,8 @@ export class ZPopover {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.LEFT ||
-      position === PopoverPositions.LEFT_BOTTOM) {
+    else if (position === PopoverPositions.left ||
+      position === PopoverPositions.left_bottom) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = "auto";
@@ -307,7 +305,7 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.LEFT_TOP) {
+    else if (position === PopoverPositions.left_top) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -336,12 +334,12 @@ export class ZPopover {
   static get properties() { return {
     "position": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
-        "original": "PopoverPositions",
-        "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
+        "original": "PopoverPositionBean",
+        "resolved": "\"auto\" | \"bottom\" | \"bottom_left\" | \"bottom_right\" | \"left\" | \"left_bottom\" | \"left_top\" | \"right\" | \"right_bottom\" | \"right_top\" | \"top\" | \"top_left\" | \"top_right\"",
         "references": {
-          "PopoverPositions": {
+          "PopoverPositionBean": {
             "location": "import",
             "path": "../../beans"
           }
@@ -355,7 +353,7 @@ export class ZPopover {
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "PopoverPositions.AUTO"
+      "defaultValue": "PopoverPositions.auto"
     },
     "open": {
       "type": "boolean",

package/dist/collection/components/z-table/z-table-header/index.js

@@ -71,7 +71,7 @@ export class ZTableHeader {
             : "arrow-down", class: "arrow" }))),
       this.showButton && (h("div", { class: 'popover-container' },
         h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenuClick() }),
-        h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPositions.BOTTOM, center: true, bindTo: this.triggerButton },
+        h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPositions.bottom, center: true, bindTo: this.triggerButton },
           h("div", null,
             h("slot", { name: "contextual-menu" })))))));
   }