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

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

@@ -1,6 +1,5 @@
-import { Component, Prop, h, Host, State, Listen, Event, } from "@stencil/core";
-import classNames from "classnames";
-import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardKeys, } from "../../beans";
+import { h, Host } from "@stencil/core";
+import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardKeys } 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 {
@@ -106,189 +103,204 @@ 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) {
-            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: {
-          backgroundColor: `var(--${this.backgroundColor})`,
-          padding: this.padding,
-        } },
-        h("slot", { name: "popover" }))));
+    return (h(Host, { onKeyDown: this.handleKeyDown }, h("div", { tabindex: "0", onClick: (event) => this.handleClick(event), onKeyDown: (event) => {
+        if (event.key === KeyboardKeys.ENTER) {
+          this.handleClick(event);
+        }
+      } }, 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" }))));
   }
   static get is() { return "z-popover-deprecated"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "position": {
-      "type": "string",
-      "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\"]",
-        "references": {
-          "PopoverPosition": {
-            "location": "import",
-            "path": "../../beans"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PopoverPosition",
+          "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",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Popover position"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Popover position"
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "PopoverPosition.AFTER_UP"
       },
-      "attribute": "position",
-      "reflect": false,
-      "defaultValue": "PopoverPosition[\"after-up\"]"
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "backgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Background color token for popover"
+        },
+        "attribute": "background-color",
+        "reflect": false,
+        "defaultValue": "\"color-white\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Background color token for popover"
-      },
-      "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"color-white\""
-    },
-    "borderRadius": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "PopoverBorderRadius",
-        "resolved": "PopoverBorderRadius.medium | PopoverBorderRadius.none | PopoverBorderRadius.small",
-        "references": {
-          "PopoverBorderRadius": {
-            "location": "import",
-            "path": "../../beans"
+      "borderRadius": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PopoverBorderRadius",
+          "resolved": "PopoverBorderRadius.MEDIUM | PopoverBorderRadius.NONE | PopoverBorderRadius.SMALL",
+          "references": {
+            "PopoverBorderRadius": {
+              "location": "import",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Border radius token for popover"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Border radius token for popover"
+        },
+        "attribute": "border-radius",
+        "reflect": false,
+        "defaultValue": "PopoverBorderRadius.SMALL"
       },
-      "attribute": "border-radius",
-      "reflect": false,
-      "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\"]",
-        "references": {
-          "PopoverShadow": {
-            "location": "import",
-            "path": "../../beans"
+      "boxShadow": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PopoverShadow",
+          "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",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Box shadow token for popover"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Box shadow token for popover"
+        },
+        "attribute": "box-shadow",
+        "reflect": false,
+        "defaultValue": "PopoverShadow.SHADOW_1"
       },
-      "attribute": "box-shadow",
-      "reflect": false,
-      "defaultValue": "PopoverShadow[\"shadow-1\"]"
-    },
-    "showArrow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "showArrow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Show or hide arrow"
+        },
+        "attribute": "show-arrow",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Show or hide arrow"
-      },
-      "attribute": "show-arrow",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "padding": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Sets padding for Popover container"
-      },
-      "attribute": "padding",
-      "reflect": false,
-      "defaultValue": "\"8px\""
-    }
-  }; }
-  static get states() { return {
-    "isVisible": {},
-    "popoverPosition": {}
-  }; }
-  static get events() { return [{
-      "method": "triggerClick",
-      "name": "triggerClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted on popover click, returns isVisible state"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets padding for Popover container"
+        },
+        "attribute": "padding",
+        "reflect": false,
+        "defaultValue": "\"8px\""
       }
-    }]; }
-  static get listeners() { return [{
-      "name": "closePopover",
-      "method": "closePopover",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keyup",
-      "method": "closePopoverWithKeyboard",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleOutsideClick",
-      "target": "body",
-      "capture": true,
-      "passive": false
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "isVisible": {},
+      "popoverPosition": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "triggerClick",
+        "name": "triggerClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on popover click, returns isVisible state"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "closePopover",
+        "method": "closePopover",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keyup",
+        "method": "closePopoverWithKeyboard",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleOutsideClick",
+        "target": "body",
+        "capture": true,
+        "passive": false
+      }];
+  }
 }

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