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

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

@@ -1,4 +1,4 @@
-import { Component, Event, Prop, h, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { PopoverPositions } from "../../beans";
 export class ZContextualMenu {
   constructor() {
@@ -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) {
@@ -29,104 +29,98 @@ export class ZContextualMenu {
   }
   render() {
     var _a, _b;
-    return [
-      h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() },
-        h("z-icon", { name: "contextual-menu", fill: this.color })),
-      h("z-popover", { ref: (el) => (this.popover = el), position: this.popoverPosition },
-        h("div", { class: "popover-content-container" },
-          h("z-list", null,
-            h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) },
-              h("div", { class: element.disabled
-                  ? "disabled-element-container"
-                  : "element-container" },
-                this.showIcon() && (h("div", { class: "element-icon" },
-                  h("z-icon", { name: element.icon, width: 16, height: 16 }))),
-                h("div", { class: "element-text" },
-                  h("span", null, element.text))))))))))
-    ];
+    return (h(Host, null, h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, h("z-icon", { name: "contextual-menu", fill: this.color })), h("z-popover", { ref: (el) => (this.popover = el), position: this.popoverPosition }, h("div", { class: "popover-content-container" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
   }
   static get is() { return "z-contextual-menu"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "elements": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Elements of ZContextualMenu"
-      },
-      "attribute": "elements",
-      "reflect": false
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "elements": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Elements of ZContextualMenu"
+        },
+        "attribute": "elements",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Sets text color of ZContextualMenu's content"
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets text color of ZContextualMenu's content"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"color-primary01\""
       },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "\"color-primary01\""
-    },
-    "popoverPosition": {
-      "type": "string",
-      "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",
-        "references": {
-          "PopoverPositions": {
-            "location": "import",
-            "path": "../../beans"
+      "popoverPosition": {
+        "type": "string",
+        "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",
+          "references": {
+            "PopoverPositions": {
+              "location": "import",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Sets the position of the popover"
-      },
-      "attribute": "popover-position",
-      "reflect": true,
-      "defaultValue": "PopoverPositions.bottom_right"
-    }
-  }; }
-  static get events() { return [{
-      "method": "clickContextualMenu",
-      "name": "clickContextualMenu",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "remove filter click event, returns filterid"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the position of the popover"
+        },
+        "attribute": "popover-position",
+        "reflect": true,
+        "defaultValue": "PopoverPositions.BOTTOM_RIGHT"
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickContextualMenu",
+        "name": "clickContextualMenu",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "remove filter click event, returns filterid"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

package/dist/collection/components/z-contextual-menu/styles.css

@@ -1,8 +1,8 @@
 :host {
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
@@ -10,10 +10,10 @@
 button {
   width: 100%;
   height: 100%;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
-  padding: 0;
 }
 
 z-popover {
@@ -24,9 +24,9 @@ z-popover {
   position: relative;
   min-width: 112px;
   max-width: 280px;
-  white-space: nowrap;
   background-color: var(--color-surface02);
   box-shadow: var(--shadow-2);
+  white-space: nowrap;
 }
 
 .element-container:hover {
@@ -36,19 +36,19 @@ z-popover {
 
 .element-text {
   overflow: hidden;
-  text-overflow: ellipsis;
   font-size: 14px;
+  text-overflow: ellipsis;
 }
 
 .element-container,
 .disabled-element-container {
   display: flex;
-  align-items: center;
-  gap: var(--space-unit);
-  fill: var(--color-disabled03);
-  padding: calc(var(--space-unit) / 2) var(--space-unit);
   min-height: calc(var(--space-unit) * 4);
   box-sizing: border-box;
+  align-items: center;
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  fill: var(--color-disabled03);
+  gap: var(--space-unit);
 }
 
 .element-container {

package/dist/collection/components/z-cover-hero/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { CoverHeroVariant, CoverHeroContentPosition } from "../../beans";
 /**
  * Cover hero component.
@@ -27,77 +27,76 @@ export class ZCoverHero {
    * Template for the content.
    */
   renderContent() {
-    return (h("div", { class: "content-container" },
-      h("slot", { name: "content" })));
+    return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
   }
   render() {
-    return (h(Host, null,
-      this.variant === CoverHeroVariant.STACKED &&
-        this.contentPosition === CoverHeroContentPosition.TOP &&
-        this.renderContent(),
-      h("div", { class: "content-hero" },
-        h("div", { class: "cover" },
-          h("slot", { name: "cover" })),
-        h("slot", { name: "info-reveal" }),
-        this.variant === CoverHeroVariant.OVERLAY && this.renderContent()),
-      (this.variant === CoverHeroVariant.STACKED && this.contentPosition ===
-        CoverHeroContentPosition.BOTTOM) && this.renderContent()));
+    return (h(Host, null, this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.TOP &&
+      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.BOTTOM &&
+      this.renderContent()));
   }
   static get is() { return "z-cover-hero"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CoverHeroVariant",
-        "resolved": "CoverHeroVariant.OVERLAY | CoverHeroVariant.STACKED",
-        "references": {
-          "CoverHeroVariant": {
-            "location": "import",
-            "path": "../../beans"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CoverHeroVariant",
+          "resolved": "CoverHeroVariant.OVERLAY | CoverHeroVariant.STACKED",
+          "references": {
+            "CoverHeroVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Cover hero variant.\nCan be one of \"OVERLAY\", \"STACKED\"."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cover hero variant.\nCan be one of \"OVERLAY\", \"STACKED\"."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "CoverHeroVariant.OVERLAY"
       },
-      "attribute": "variant",
-      "reflect": true,
-      "defaultValue": "CoverHeroVariant.OVERLAY"
-    },
-    "contentPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CoverHeroContentPosition",
-        "resolved": "CoverHeroContentPosition.BOTTOM | CoverHeroContentPosition.TOP",
-        "references": {
-          "CoverHeroContentPosition": {
-            "location": "import",
-            "path": "../../beans"
+      "contentPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CoverHeroContentPosition",
+          "resolved": "CoverHeroContentPosition.BOTTOM | CoverHeroContentPosition.TOP",
+          "references": {
+            "CoverHeroContentPosition": {
+              "location": "import",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Cover hero content position (only for STACKED variant)."
-      },
-      "attribute": "content-position",
-      "reflect": true,
-      "defaultValue": "CoverHeroContentPosition.TOP"
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cover hero content position (only for STACKED variant)."
+        },
+        "attribute": "content-position",
+        "reflect": true,
+        "defaultValue": "CoverHeroContentPosition.TOP"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/z-cover-hero/styles.css

@@ -13,10 +13,10 @@
 
 :host .content-hero {
   position: relative;
-  align-items: baseline;
   width: 100%;
   height: var(--cover-hero-height);
   min-height: calc(var(--space-unit) * 30);
+  align-items: baseline;
   background-color: var(--gray600);
 }
 
@@ -45,20 +45,20 @@
 
 ::slotted(z-info-reveal) {
   position: absolute;
-  bottom: var(--grid-margin);
-  right: var(--grid-margin);
   z-index: 1;
+  right: var(--grid-margin);
+  bottom: var(--grid-margin);
 }
 
 /* Variant overlay */
 :host([variant="overlay"]) .content-hero .cover::after {
-  content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--cover-hero-overlay);
+  content: "";
 }
 
 :host([variant="overlay"]) .content-hero .content-container {

package/dist/collection/components/z-divider/index.js

@@ -1,89 +1,95 @@
-import { Component, Prop, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { DividerSize, DividerOrientation } from "../../beans";
 export class ZDivider {
   constructor() {
     /** [optional] Divider size */
-    this.size = DividerSize.small;
+    this.size = DividerSize.SMALL;
     /** [optional] Divider color */
     this.color = "gray200";
     /** [optional] Divider orintation */
-    this.orientation = DividerOrientation.horizontal;
+    this.orientation = DividerOrientation.HORIZONTAL;
   }
   render() {
     return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
   }
   static get is() { return "z-divider"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DividerSize",
-        "resolved": "DividerSize.large | DividerSize.medium | DividerSize.small",
-        "references": {
-          "DividerSize": {
-            "location": "import",
-            "path": "../../beans"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DividerSize",
+          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
+          "references": {
+            "DividerSize": {
+              "location": "import",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Divider size"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "DividerSize.small"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Divider size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "DividerSize.SMALL"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Divider color"
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Divider color"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"gray200\""
       },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "\"gray200\""
-    },
-    "orientation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DividerOrientation",
-        "resolved": "DividerOrientation.horizontal | DividerOrientation.vertical",
-        "references": {
-          "DividerOrientation": {
-            "location": "import",
-            "path": "../../beans"
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DividerOrientation",
+          "resolved": "DividerOrientation.HORIZONTAL | DividerOrientation.VERTICAL",
+          "references": {
+            "DividerOrientation": {
+              "location": "import",
+              "path": "../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Divider orintation"
-      },
-      "attribute": "orientation",
-      "reflect": false,
-      "defaultValue": "DividerOrientation.horizontal"
-    }
-  }; }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Divider orintation"
+        },
+        "attribute": "orientation",
+        "reflect": false,
+        "defaultValue": "DividerOrientation.HORIZONTAL"
+      }
+    };
+  }
 }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,14 +1,18 @@
-import { Component, h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
   render() {
-    return (h(Host, null));
+    return h(Host, null);
   }
   static get is() { return "z-ghost-loading"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
 }