@zanichelli/albe-web-components 5.6.0 → 6.0.0-rc1

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

@@ -1,6 +1,5 @@
-import { h, Host, } from "@stencil/core";
-import classNames from "classnames";
-import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardKeys, } from "../../beans";
+import { h, Host } from "@stencil/core";
+import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardCode } from "../../beans";
 import { getElementTree } from "../../utils/utils";
 export class ZPopoverDeprecated {
   /**
@@ -8,13 +7,13 @@ export class ZPopoverDeprecated {
    */
   constructor() {
     /** [optional] Popover position */
-    this.position = PopoverPosition["after-up"];
+    this.position = PopoverPosition.AFTER_UP;
     /** [optional] Background color token for popover */
     this.backgroundColor = "color-white";
     /** [optional] Border radius token for popover */
-    this.borderRadius = PopoverBorderRadius.small;
+    this.borderRadius = PopoverBorderRadius.SMALL;
     /** [optional] Box shadow token for popover */
-    this.boxShadow = PopoverShadow["shadow-1"];
+    this.boxShadow = PopoverShadow.SHADOW_1;
     /** [optional] Show or hide arrow */
     this.showArrow = false;
     /** [optional] Sets padding for Popover container */
@@ -58,8 +57,7 @@ export class ZPopoverDeprecated {
     }
     // If right is outside viewport
     if (r > width) {
-      if (this.position.startsWith("above") ||
-        this.position.startsWith("below")) {
+      if (this.position.startsWith("above") || this.position.startsWith("below")) {
         secondSide = "left";
       }
       else {
@@ -68,8 +66,7 @@ export class ZPopoverDeprecated {
     }
     // If left is outside viewport
     if (l < 0) {
-      if (this.position.startsWith("above") ||
-        this.position.startsWith("below")) {
+      if (this.position.startsWith("above") || this.position.startsWith("below")) {
         secondSide = "right";
       }
       else {
@@ -84,7 +81,7 @@ export class ZPopoverDeprecated {
     this.isVisible = false;
   }
   closePopoverWithKeyboard(e) {
-    if (e.key === KeyboardKeys.ESC) {
+    if (e.key === KeyboardCode.ESC) {
       this.closePopover();
     }
   }
@@ -94,7 +91,7 @@ export class ZPopoverDeprecated {
     event.stopPropagation();
   }
   handleKeyDown(event) {
-    if (event.code === KeyboardKeys.ENTER) {
+    if (event.code === KeyboardCode.ENTER) {
       this.isVisible ? this.closePopover() : this.openPopover();
     }
   }
@@ -107,10 +104,17 @@ export class ZPopoverDeprecated {
   }
   render() {
     return (h(Host, { onKeyDown: this.handleKeyDown }, h("div", { tabindex: "0", onClick: (event) => this.handleClick(event), onKeyDown: (event) => {
-        if (event.key === KeyboardKeys.ENTER) {
+        if (event.key === KeyboardCode.ENTER) {
           this.handleClick(event);
         }
-      } }, h("slot", { name: "trigger" })), h("div", { ref: (e) => (this.popoverElem = e), class: classNames("popover-content-container", this.popoverPosition, `border-radius-${this.borderRadius}`, this.boxShadow, { "show-arrow": this.showArrow }, { visible: this.isVisible }), style: {
+      } }, h("slot", { name: "trigger" })), h("div", { ref: (e) => (this.popoverElem = e), class: {
+        "popover-content-container": true,
+        [this.popoverPosition]: true,
+        [`border-radius-${this.borderRadius}`]: true,
+        [this.boxShadow]: true,
+        "show-arrow": this.showArrow,
+        "visible": this.isVisible,
+      }, style: {
         backgroundColor: `var(--${this.backgroundColor})`,
         padding: this.padding,
       } }, h("slot", { name: "popover" }))));
@@ -134,7 +138,7 @@ export class ZPopoverDeprecated {
         "mutable": false,
         "complexType": {
           "original": "PopoverPosition",
-          "resolved": "(typeof PopoverPosition)[\"above-center\"] | (typeof PopoverPosition)[\"above-left\"] | (typeof PopoverPosition)[\"above-right\"] | (typeof PopoverPosition)[\"after-center\"] | (typeof PopoverPosition)[\"after-down\"] | (typeof PopoverPosition)[\"after-up\"] | (typeof PopoverPosition)[\"before-center\"] | (typeof PopoverPosition)[\"before-down\"] | (typeof PopoverPosition)[\"before-up\"] | (typeof PopoverPosition)[\"below-center\"] | (typeof PopoverPosition)[\"below-left\"] | (typeof PopoverPosition)[\"below-right\"]",
+          "resolved": "PopoverPosition.ABOVE_CENTER | PopoverPosition.ABOVE_LEFT | PopoverPosition.ABOVE_RIGHT | PopoverPosition.AFTER_CENTER | PopoverPosition.AFTER_DOWN | PopoverPosition.AFTER_UP | PopoverPosition.BEFORE_CENTER | PopoverPosition.BEFORE_DOWN | PopoverPosition.BEFORE_UP | PopoverPosition.BELOW_CENTER | PopoverPosition.BELOW_LEFT | PopoverPosition.BELOW_RIGHT",
           "references": {
             "PopoverPosition": {
               "location": "import",
@@ -150,7 +154,7 @@ export class ZPopoverDeprecated {
         },
         "attribute": "position",
         "reflect": false,
-        "defaultValue": "PopoverPosition[\"after-up\"]"
+        "defaultValue": "PopoverPosition.AFTER_UP"
       },
       "backgroundColor": {
         "type": "string",
@@ -175,7 +179,7 @@ export class ZPopoverDeprecated {
         "mutable": false,
         "complexType": {
           "original": "PopoverBorderRadius",
-          "resolved": "PopoverBorderRadius.medium | PopoverBorderRadius.none | PopoverBorderRadius.small",
+          "resolved": "PopoverBorderRadius.MEDIUM | PopoverBorderRadius.NONE | PopoverBorderRadius.SMALL",
           "references": {
             "PopoverBorderRadius": {
               "location": "import",
@@ -191,14 +195,14 @@ export class ZPopoverDeprecated {
         },
         "attribute": "border-radius",
         "reflect": false,
-        "defaultValue": "PopoverBorderRadius.small"
+        "defaultValue": "PopoverBorderRadius.SMALL"
       },
       "boxShadow": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "PopoverShadow",
-          "resolved": "(typeof PopoverShadow)[\"shadow-1\"] | (typeof PopoverShadow)[\"shadow-12\"] | (typeof PopoverShadow)[\"shadow-16\"] | (typeof PopoverShadow)[\"shadow-2\"] | (typeof PopoverShadow)[\"shadow-24\"] | (typeof PopoverShadow)[\"shadow-3\"] | (typeof PopoverShadow)[\"shadow-4\"] | (typeof PopoverShadow)[\"shadow-6\"] | (typeof PopoverShadow)[\"shadow-8\"]",
+          "resolved": "PopoverShadow.SHADOW_1 | PopoverShadow.SHADOW_12 | PopoverShadow.SHADOW_16 | PopoverShadow.SHADOW_2 | PopoverShadow.SHADOW_24 | PopoverShadow.SHADOW_3 | PopoverShadow.SHADOW_4 | PopoverShadow.SHADOW_6 | PopoverShadow.SHADOW_8",
           "references": {
             "PopoverShadow": {
               "location": "import",
@@ -214,7 +218,7 @@ export class ZPopoverDeprecated {
         },
         "attribute": "box-shadow",
         "reflect": false,
-        "defaultValue": "PopoverShadow[\"shadow-1\"]"
+        "defaultValue": "PopoverShadow.SHADOW_1"
       },
       "showArrow": {
         "type": "boolean",

package/dist/collection/deprecated/z-popover-deprecated/styles.css

@@ -1,21 +1,20 @@
 :host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-
   position: relative;
   display: inline-block;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
 
-  --shadow-arrow-color: rgba(66, 69, 72, 0.2);
-  --shadow-arrow-below-color: rgba(66, 69, 72, 0.1);
+  --shadow-arrow-color: rgb(66 69 72 / 20%);
+  --shadow-arrow-below-color: rgb(66 69 72 / 10%);
 }
 
 .popover-content-container {
-  box-sizing: border-box;
-  visibility: hidden;
   position: absolute;
+  z-index: 999;
   min-width: 64px;
   min-height: 32px;
-  z-index: 999;
+  box-sizing: border-box;
+  visibility: hidden;
 }
 
 .popover-content-container.visible {
@@ -97,19 +96,19 @@ Popover-positions
 }
 
 .popover-content-container.below-right {
-  left: 0;
   top: calc(100% + var(--space-unit));
+  left: 0;
 }
 
 .popover-content-container.below-center {
-  left: 50%;
   top: calc(100% + var(--space-unit));
+  left: 50%;
   transform: translateX(-50%);
 }
 
 .popover-content-container.below-left {
-  right: 0;
   top: calc(100% + var(--space-unit));
+  right: 0;
 }
 
 .popover-content-container.before-down {
@@ -124,18 +123,18 @@ Popover-positions
 }
 
 .popover-content-container.before-up {
-  bottom: 0;
   right: calc(100% + var(--space-unit));
+  bottom: 0;
 }
 
 .popover-content-container.above-right {
-  left: 0;
   bottom: calc(100% + var(--space-unit));
+  left: 0;
 }
 
 .popover-content-container.above-center {
-  left: 50%;
   bottom: calc(100% + var(--space-unit));
+  left: 50%;
   transform: translateX(-50%);
 }
 
@@ -147,90 +146,90 @@ Popover-positions
 /*
 Arrows
 */
-.popover-content-container:before {
-  display: none;
+.popover-content-container::before {
   position: absolute;
-  content: "";
+  z-index: -1;
+  display: none;
   width: 8px;
   height: 8px;
-  z-index: -1;
   background-color: inherit;
+  content: "";
   transform: rotate(45deg);
 }
 
-.popover-content-container.after-down:before {
+.popover-content-container.after-down::before {
   top: 12px;
   left: -4px;
   box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.after-center:before {
+.popover-content-container.after-center::before {
   top: calc(50% - 4px);
   left: -4px;
   box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.after-up:before {
+.popover-content-container.after-up::before {
   bottom: 12px;
   left: -4px;
   box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.below-right:before {
-  left: 12px;
+.popover-content-container.below-right::before {
   top: -4px;
+  left: 12px;
   box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-.popover-content-container.below-center:before {
-  left: calc(50% - 4px);
+.popover-content-container.below-center::before {
   top: -4px;
+  left: calc(50% - 4px);
   box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-.popover-content-container.below-left:before {
-  right: 12px;
+.popover-content-container.below-left::before {
   top: -4px;
+  right: 12px;
   box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-.popover-content-container.before-down:before {
+.popover-content-container.before-down::before {
   top: 12px;
   right: -4px;
   box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.before-center:before {
+.popover-content-container.before-center::before {
   top: calc(50% - 4px);
   right: -4px;
   box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.before-up:before {
-  bottom: 12px;
+.popover-content-container.before-up::before {
   right: -4px;
+  bottom: 12px;
   box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.above-right:before {
-  left: 12px;
+.popover-content-container.above-right::before {
   bottom: -4px;
+  left: 12px;
   box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.above-center:before {
-  left: calc(50% - 4px);
+.popover-content-container.above-center::before {
   bottom: -4px;
+  left: calc(50% - 4px);
   box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.above-left:before {
+.popover-content-container.above-left::before {
   right: 12px;
   bottom: -4px;
   box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
 /** Show/Hide arrow */
-.popover-content-container.show-arrow:before {
+.popover-content-container.show-arrow::before {
   display: block;
 }

package/dist/collection/deprecated/z-status-tag/index.js

@@ -1,18 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { StatusTagStatus } from "../../beans";
-import classNames from "classnames";
 export class ZStatusTag {
   constructor() {
     /** [optional] Status tag color */
-    this.status = StatusTagStatus.default;
+    this.status = StatusTagStatus.DEFAULT;
     if (!this.icon && !this.text) {
       console.warn("z-status-tag must contain at least one prop between icon and text");
     }
   }
   render() {
-    return (h(Host, { class: classNames(this.variant, "body-5-sb", {
-        expandable: this.expandable && this.icon && this.text,
-      }) }, this.icon && h("z-icon", { name: this.icon }), this.text && h("span", null, this.text)));
+    return (h(Host, { class: {
+        "body-5-sb": true,
+        [this.variant || ""]: true,
+        "expandable": this.expandable && !!this.icon && !!this.text,
+      } }, this.icon && h("z-icon", { name: this.icon }), this.text && h("span", null, this.text)));
   }
   static get is() { return "z-status-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -84,7 +85,7 @@ export class ZStatusTag {
         "mutable": false,
         "complexType": {
           "original": "StatusTagStatus",
-          "resolved": "StatusTagStatus.default | StatusTagStatus.error | StatusTagStatus.neutral | StatusTagStatus.success | StatusTagStatus.warning",
+          "resolved": "StatusTagStatus.DEFAULT | StatusTagStatus.ERROR | StatusTagStatus.NEUTRAL | StatusTagStatus.SUCCESS | StatusTagStatus.WARNING",
           "references": {
             "StatusTagStatus": {
               "location": "import",
@@ -100,14 +101,14 @@ export class ZStatusTag {
         },
         "attribute": "status",
         "reflect": true,
-        "defaultValue": "StatusTagStatus.default"
+        "defaultValue": "StatusTagStatus.DEFAULT"
       },
       "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "ThemeVariant",
-          "resolved": "ThemeVariant.dark | ThemeVariant.light",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
           "references": {
             "ThemeVariant": {
               "location": "import",

package/dist/collection/deprecated/z-status-tag/styles.css

@@ -2,16 +2,14 @@
   --z-icon-width: 14px;
   --z-icon-height: 14px;
 
-  font-family: var(--font-family-sans);
-
+  display: inline-flex;
   height: 22px;
-  border-radius: var(--border-radius);
+  align-items: center;
   padding-right: 4px;
   padding-left: 4px;
+  border-radius: var(--border-radius);
+  font-family: var(--font-family-sans);
   text-transform: uppercase;
-
-  display: inline-flex;
-  align-items: center;
 }
 
 :host(.expandable) > z-icon {
@@ -26,10 +24,10 @@
 }
 
 :host(.expandable) > span {
+  overflow: hidden;
   max-width: 0;
   transition: max-width 0.3s ease-out 0.2s;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 :host(.expandable:hover) > span {
@@ -37,7 +35,7 @@
   transition: max-width 0.3s ease-out 0s;
 }
 
-/*Warning status-tag styles*/
+/* Warning status-tag styles */
 :host([status="warning"]) {
   background-color: var(--status-warning-yellow-lighter);
   color: var(--status-warning-yellow-dark);
@@ -56,7 +54,7 @@
   fill: var(--status-warning-yellow-lighter);
 }
 
-/*Error status-tag styles*/
+/* Error status-tag styles */
 :host([status="error"]) {
   background-color: var(--status-error-red-lighter);
   color: var(--status-error-red-dark);
@@ -75,7 +73,7 @@
   fill: var(--status-error-red-lighter);
 }
 
-/*Success status-tag styles*/
+/* Success status-tag styles */
 :host([status="success"]) {
   background-color: var(--status-success-green-lighter);
   color: var(--status-success-green-dark);
@@ -94,7 +92,7 @@
   fill: var(--status-success-green-lighter);
 }
 
-/*Default status-tag styles*/
+/* Default status-tag styles */
 :host([status="default"]) {
   background-color: var(--myz-blue-lighter);
   color: var(--myz-blue-dark);
@@ -113,7 +111,7 @@
   fill: var(--myz-blue-lighter);
 }
 
-/*Neutral status-tag styles*/
+/* Neutral status-tag styles */
 :host([status="neutral"]) {
   background-color: var(--bg-grey-050);
   color: var(--text-grey-800);

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

@@ -1,6 +1,6 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { PopoverPositions } from "../../beans/index";
-const documentElement = document.documentElement;
+const DOCUMENT_ELEMENT = document.documentElement;
 /**
  * Find the closest scrollable parent of a node.
  *
@@ -8,20 +8,18 @@ const documentElement = document.documentElement;
  */
 function findScrollableParent(element) {
   let parent = element.parentNode;
-  while (parent && parent !== documentElement) {
+  while (parent && parent !== DOCUMENT_ELEMENT) {
     const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
-    if (overflow === 'hidden' ||
-      overflowY === 'hidden' ||
-      overflowX === 'hidden') {
+    if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
       return parent;
     }
-    if ((parent.scrollHeight > parent.clientHeight && overflow !== 'visible' && overflowY !== 'visible') ||
-      (parent.scrollWidth > parent.clientWidth && overflow !== 'visible' && overflowX !== 'visible')) {
+    if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
+      (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
       return parent;
     }
     parent = parent.parentNode;
   }
-  return documentElement;
+  return DOCUMENT_ELEMENT;
 }
 /**
  * Calculate computed offset.
@@ -80,18 +78,15 @@ function computeOffset(element, targetParentOffset) {
 export class ZTooltipDeprecated {
   constructor() {
     /** Tooltip position. */
-    this.type = PopoverPositions.auto;
+    this.type = PopoverPositions.AUTO;
     /**
      * The open state of the tooltip.
      */
     this.open = false;
   }
   validateType(newValue) {
-    if (newValue &&
-      Object
-        .values(PopoverPositions)
-        .every((position) => newValue !== position)) {
-      this.type = PopoverPositions.auto;
+    if (newValue && Object.values(PopoverPositions).every((position) => newValue !== position)) {
+      this.type = PopoverPositions.AUTO;
     }
   }
   onPositionChange() {
@@ -145,7 +140,9 @@ export class ZTooltipDeprecated {
     const scrollContainer = findScrollableParent(element);
     const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
     const offsetContainer = this.host.offsetParent;
-    const relativeBoundingRect = offsetContainer ? computeOffset(offsetContainer, scrollContainer) : { top: 0, right: 0, bottom: 0, left: 0 };
+    const relativeBoundingRect = offsetContainer
+      ? computeOffset(offsetContainer, scrollContainer)
+      : { top: 0, right: 0, bottom: 0, left: 0 };
     const boundingRect = computeOffset(element, scrollContainer);
     const top = boundingRect.top - scrollContainer.scrollTop;
     const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
@@ -160,29 +157,29 @@ export class ZTooltipDeprecated {
     const availableHeight = availableTop + availableBottom + boundingRect.height;
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.type;
-    if (position === PopoverPositions.auto) {
+    if (position === PopoverPositions.AUTO) {
       /**
        * The `AUTO` position tries to place the tooltip in the "safest" area,
        * where there's more space available.
        */
       const positions = [];
       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);
       }
       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);
       }
       position = positions.join("_");
     }
@@ -194,46 +191,38 @@ export class ZTooltipDeprecated {
     const offsetRight = boundingRect.right - relativeBoundingRect.right;
     const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
-    if (position === PopoverPositions.top ||
-      position === PopoverPositions.top_right ||
-      position === PopoverPositions.top_left) {
+    if (position === PopoverPositions.TOP ||
+      position === PopoverPositions.TOP_RIGHT ||
+      position === PopoverPositions.TOP_LEFT) {
       style.top = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
     }
-    if (position === PopoverPositions.bottom ||
-      position === PopoverPositions.bottom_right ||
-      position === PopoverPositions.bottom_left) {
+    if (position === PopoverPositions.BOTTOM ||
+      position === PopoverPositions.BOTTOM_RIGHT ||
+      position === PopoverPositions.BOTTOM_LEFT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.bottom = "auto";
     }
-    if (position === PopoverPositions.top ||
-      position === PopoverPositions.bottom) {
-      style.left = `${offsetLeft +
-        (boundingRect.width / 2) -
-        (this.host.clientWidth / 2)}px`;
+    if (position === PopoverPositions.TOP || position === PopoverPositions.BOTTOM) {
+      style.left = `${offsetLeft + boundingRect.width / 2 - this.host.clientWidth / 2}px`;
     }
-    if (position === PopoverPositions.top_right ||
-      position === PopoverPositions.bottom_right) {
+    if (position === PopoverPositions.TOP_RIGHT || position === PopoverPositions.BOTTOM_RIGHT) {
       style.right = "auto";
       style.left = `${offsetLeft + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.top_left ||
-      position === PopoverPositions.bottom_left) {
+    if (position === PopoverPositions.TOP_LEFT || position === PopoverPositions.BOTTOM_LEFT) {
       style.left = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.right ||
-      position === PopoverPositions.left) {
-      style.top = `${offsetTop +
-        (boundingRect.height / 2) -
-        (this.host.clientHeight / 2)}px`;
+    if (position === PopoverPositions.RIGHT || position === PopoverPositions.LEFT) {
+      style.top = `${offsetTop + boundingRect.height / 2 - this.host.clientHeight / 2}px`;
       style.bottom = "auto";
     }
-    if (position === PopoverPositions.right) {
+    if (position === PopoverPositions.RIGHT) {
       style.right = "auto";
       style.left = `${offsetLeft + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.left) {
+    if (position === PopoverPositions.LEFT) {
       style.left = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
     }
@@ -292,7 +281,7 @@ export class ZTooltipDeprecated {
         "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",
@@ -308,7 +297,7 @@ export class ZTooltipDeprecated {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "PopoverPositions.auto"
+        "defaultValue": "PopoverPositions.AUTO"
       },
       "open": {
         "type": "boolean",