@zanichelli/albe-web-components 5.0.1 → 5.3.0

package/dist/collection/components/inputs/z-input/index.js

@@ -108,12 +108,33 @@ export class ZInput {
       onInput: (e) => this.emitInputChange(e.target.value),
     };
   }
+  getNumberAttributes(type) {
+    if (type != InputTypeEnum.number)
+      return;
+    return {
+      min: this.min,
+      max: this.max,
+      step: this.step,
+    };
+  }
+  getPatternAttribute(type) {
+    if (type != InputTypeEnum.password &&
+      type != InputTypeEnum.text &&
+      type != InputTypeEnum.tel &&
+      type != InputTypeEnum.search &&
+      type != InputTypeEnum.url &&
+      type != InputTypeEnum.email)
+      return;
+    return {
+      pattern: this.pattern,
+    };
+  }
   renderInputText(type = InputTypeEnum.text) {
-    const attr = this.getTextAttributes();
+    const attr = Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type));
     if (this.icon || type === InputTypeEnum.password) {
       attr.class = Object.assign(Object.assign({}, attr.class), { hasIcon: true });
     }
-    if (this.hasclearicon) {
+    if (this.hasclearicon && type != InputTypeEnum.number) {
       attr.class = Object.assign(Object.assign({}, attr.class), { hasClearIcon: true });
     }
     return (h("div", { class: "textWrapper" },
@@ -145,7 +166,11 @@ export class ZInput {
       h("z-icon", { name: this.icon })));
   }
   renderResetIcon() {
-    if (!this.hasclearicon || !this.value || this.disabled || this.readonly)
+    if (!this.hasclearicon ||
+      !this.value ||
+      this.disabled ||
+      this.readonly ||
+      this.type == InputTypeEnum.number)
       return;
     return (h("button", { type: "button", class: "iconButton resetIcon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") },
       h("z-icon", { name: "multiply" })));
@@ -244,7 +269,7 @@ export class ZInput {
       "mutable": false,
       "complexType": {
         "original": "InputTypeBean",
-        "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"text\" | \"textarea\"",
+        "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"url\"",
         "references": {
           "InputTypeBean": {
             "location": "import",
@@ -549,6 +574,74 @@ export class ZInput {
       },
       "attribute": "icon",
       "reflect": false
+    },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "min number value (optional): available for number"
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "max number value (optional): available for number"
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "step number value (optional): available for number"
+      },
+      "attribute": "step",
+      "reflect": false
+    },
+    "pattern": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "pattern value (optional): available for tel, text, search, url, email, password"
+      },
+      "attribute": "pattern",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/notification/z-tooltip/index.js

@@ -11,7 +11,7 @@ import { PopoverPositions } from "../../../beans";
 export class ZTooltip {
   constructor() {
     /** Tooltip position. */
-    this.position = PopoverPositions.AUTO;
+    this.position = PopoverPositions.auto;
     /** Enable tooltip dark mode. */
     this.dark = false;
     /**
@@ -40,7 +40,7 @@ export class ZTooltip {
       "mutable": true,
       "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",
+        "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",
         "references": {
           "PopoverPositions": {
             "location": "import",
@@ -56,7 +56,7 @@ export class ZTooltip {
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "PopoverPositions.AUTO"
+      "defaultValue": "PopoverPositions.auto"
     },
     "dark": {
       "type": "boolean",

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

@@ -9,7 +9,7 @@ export class ZContextualMenu {
     /**
      * [optional] Sets the position of the popover
      */
-    this.popoverPosition = PopoverPositions.BOTTOM_RIGHT;
+    this.popoverPosition = PopoverPositions.bottom_right;
   }
   componentWillRender() {
     if (this.elements) {
@@ -94,7 +94,7 @@ export class ZContextualMenu {
       "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",
+        "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",
         "references": {
           "PopoverPositions": {
             "location": "import",
@@ -110,7 +110,7 @@ export class ZContextualMenu {
       },
       "attribute": "popover-position",
       "reflect": true,
-      "defaultValue": "PopoverPositions.BOTTOM_RIGHT"
+      "defaultValue": "PopoverPositions.bottom_right"
     }
   }; }
   static get events() { return [{

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-pagination/index.js

@@ -155,7 +155,8 @@ export class ZPagination {
         this.renderPage(this.totalPages),
       ];
     }
-    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {
+    if (this.currentPage > this.split * 2 + 2 &&
+      this.currentPage < this.totalPages - this.split * 2 - 1) {
       // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.
       return [
         this.renderPage(1),
@@ -192,7 +193,9 @@ export class ZPagination {
             ev.preventDefault();
             this.selectPage(this.goToPageValue);
           } },
-          h("z-input", { class: "go-to-page-input", type: "number", message: false, onInput: (ev) => { this.goToPageValue = ev.target.value; }, placeholder: this.currentPage.toString(), hasclearicon: false }),
+          h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+              this.goToPageValue = ev.target.value;
+            }, placeholder: this.currentPage.toString(), hasclearicon: false }),
           h("span", null, `/${this.totalPages}`))),
         this.renderForwardButton()),
     ];
@@ -219,9 +222,7 @@ export class ZPagination {
           "-",
           this.skip)),
         this.navArrows && this.renderBackButton(),
-        h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ?
-          this.renderSplitPages() :
-          this.renderPages()),
+        h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()),
         this.navArrows && this.renderForwardButton(),
         this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) },
           "+",
@@ -232,7 +233,9 @@ export class ZPagination {
       this.goToPage && (h("div", { class: "go-to-page" },
         h("span", { class: "label body-5-sb" }, "Vai a pagina:"),
         h("div", { class: "inputs" },
-          h("z-input", { class: "go-to-page-input", type: "number", message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => { this.goToPageValue = ev.target.value; }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }),
+          h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
+              this.goToPageValue = ev.target.value;
+            }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }),
           h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai")))),
     ];
   }

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" })))))));
   }

package/dist/collection/deprecated/z-input-deprecated/index.js

@@ -301,7 +301,7 @@ export class ZInputDeprecated {
       "mutable": false,
       "complexType": {
         "original": "InputTypeBean",
-        "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"text\" | \"textarea\"",
+        "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"url\"",
         "references": {
           "InputTypeBean": {
             "location": "import",