@zanichelli/albe-web-components 5.5.4 → 5.5.6-cs1

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

@@ -1,6 +1,6 @@
-import { Component, Prop, h, Host, Watch, Element, State, Event, } 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`;
     }
@@ -251,129 +240,140 @@ export class ZTooltipDeprecated {
     if (this.content) {
       return (h(Host, { class: "legacy", position: this.type }, this.content));
     }
-    return (h(Host, { position: this.position },
-      h("slot", null)));
+    return (h(Host, { position: this.position }, h("slot", null)));
   }
   static get is() { return "z-tooltip-deprecated"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "content": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": undefined
-          }],
-        "text": "Content text."
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": "Content text."
+        },
+        "attribute": "content",
+        "reflect": false
       },
-      "attribute": "content",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "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",
-        "references": {
-          "PopoverPositions": {
-            "location": "import",
-            "path": "../../beans/index"
+      "type": {
+        "type": "string",
+        "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",
+          "references": {
+            "PopoverPositions": {
+              "location": "import",
+              "path": "../../beans/index"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip position."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "PopoverPositions.AUTO"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tooltip position."
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The open state of the tooltip."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "PopoverPositions.auto"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The open state of the tooltip."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "bindTo": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | HTMLElement",
-        "resolved": "HTMLElement | string",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
+      "bindTo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | HTMLElement",
+          "resolved": "HTMLElement | string",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The selector or the element bound with the tooltip."
-      },
-      "attribute": "bind-to",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "position": {}
-  }; }
-  static get events() { return [{
-      "method": "positionChange",
-      "name": "positionChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Position change event."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The selector or the element bound with the tooltip."
+        },
+        "attribute": "bind-to",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "position": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "positionChange",
+        "name": "positionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Position change event."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "type",
-      "methodName": "validateType"
-    }, {
-      "propName": "position",
-      "methodName": "onPositionChange"
-    }, {
-      "propName": "open",
-      "methodName": "onOpen"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "type",
+        "methodName": "validateType"
+      }, {
+        "propName": "position",
+        "methodName": "onPositionChange"
+      }, {
+        "propName": "open",
+        "methodName": "onOpen"
+      }];
+  }
 }

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

@@ -6,34 +6,34 @@
 
   position: relative;
   display: none;
+  min-width: calc(var(--space-unit) * 8);
+  min-height: calc(var(--space-unit) * 4);
   align-items: center;
   justify-content: center;
   padding: var(--space-unit);
-  min-width: calc(var(--space-unit) * 8);
-  min-height: calc(var(--space-unit) * 4);
+  background: var(--z-tooltip-theme--surface);
+  border-radius: var(--border-radius-small);
   color: var(--z-tooltip-theme--text);
-  fill: currentColor;
+  fill: currentcolor;
+  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
   font-family: var(--font-family-sans);
   text-align: center;
-  border-radius: var(--border-radius-small);
-  background: var(--z-tooltip-theme--surface);
-  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
   will-change: filter;
 }
 
 :host(.legacy) {
   display: inline-flex;
-  padding: calc(var(--space-unit) * 2);
   min-width: auto;
-  min-height: auto;
   max-width: 200px;
-  font-style: italic;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  font-size: 12px;
+  min-height: auto;
+  padding: calc(var(--space-unit) * 2);
   border: var(--border-size-small) solid var(--gray200);
   border-radius: var(--border-radius);
-  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08));
+  filter: drop-shadow(0 0 2px rgb(0 0 0 / 8%));
+  font-size: 12px;
+  font-style: italic;
+  letter-spacing: 0.32px;
+  line-height: 16px;
 }
 
 :host(.legacy)::before {
@@ -45,84 +45,84 @@
   --arrow-center-x-offset: calc(50% - calc(var(--arrow-size) / 2));
   --arrow-center-y-offset: calc(100% - calc(var(--arrow-size) / 2));
 
-  content: '';
   position: absolute;
   width: var(--arrow-size);
   height: var(--arrow-size);
   background: inherit;
+  content: "";
   transform: rotate(45deg);
 }
 
-:host([open][style*='top:']),
-:host([open][style*='inset:']) {
+:host([open][style*="top:"]),
+:host([open][style*="inset:"]) {
   display: inline-flex;
 }
 
-:host([position^='top']) {
+:host([position^="top"]) {
   margin-bottom: var(--space-unit);
 }
 
-:host([position='right']) {
+:host([position="right"]) {
   margin-left: var(--space-unit);
 }
 
-:host([position='top_right']),
-:host([position='bottom_right']) {
+:host([position="top_right"]),
+:host([position="bottom_right"]) {
   margin-left: var(--edge-offset);
 }
 
-:host([position^='bottom']) {
+:host([position^="bottom"]) {
   margin-top: var(--space-unit);
 }
 
-:host([position='left']) {
+:host([position="left"]) {
   margin-right: var(--space-unit);
 }
 
-:host([position='top_left']),
-:host([position='bottom_left']) {
+:host([position="top_left"]),
+:host([position="bottom_left"]) {
   margin-right: var(--edge-offset);
 }
 
 /* Arrow style */
 
-:host([position^='top'])::before {
+:host([position^="top"])::before {
   top: var(--arrow-center-y-offset);
 }
 
-:host([position^='bottom'])::before {
+:host([position^="bottom"])::before {
   bottom: var(--arrow-center-y-offset);
 }
 
-:host([position='top'])::before,
-:host([position='bottom'])::before {
+:host([position="top"])::before,
+:host([position="bottom"])::before {
   left: var(--arrow-center-x-offset);
 }
 
-:host([position='right'])::before,
-:host([position='left'])::before {
+:host([position="right"])::before,
+:host([position="left"])::before {
   top: var(--arrow-center-x-offset);
 }
 
-:host([position='right'])::before {
+:host([position="right"])::before {
   right: var(--arrow-center-y-offset);
 }
 
-:host([position='top_right'])::before,
-:host([position='bottom_right'])::before {
+:host([position="top_right"])::before,
+:host([position="bottom_right"])::before {
   right: var(--arrow-edge-offset);
 }
 
-:host([position='left'])::before {
+:host([position="left"])::before {
   left: var(--arrow-center-y-offset);
 }
 
-:host([position='top_left'])::before,
-:host([position='bottom_left'])::before {
+:host([position="top_left"])::before,
+:host([position="bottom_left"])::before {
   left: var(--arrow-edge-offset);
 }
 
 ::slotted(*) {
-  flex: 1 auto;
   overflow: auto;
+  flex: 1 auto;
 }

package/dist/collection/index.js

@@ -1,6 +1,7 @@
 import { colorFromId } from "./utils/utils";
+const UTILS = {
+  colorFromId,
+};
+export { UTILS as Utils };
 export * from "./components";
 export * from "./beans";
-export const Utils = {
-  colorFromId
-};