@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/collection/components/typography/z-typography/styles.css

@@ -1,61 +1,61 @@
 :host > * {
-  font-family: var(--dashboard-font);
   margin: 0;
+  font-family: var(--dashboard-font);
 }
 
-:host(.regular)>* {
+:host(.regular) > * {
   font-weight: var(--font-rg);
 }
 
-:host(.semibold)>* {
+:host(.semibold) > * {
   font-weight: 600;
 }
 
-:host(.light)>* {
+:host(.light) > * {
   font-weight: 300;
 }
 
-:host(.h1)>* {
+:host(.h1) > * {
   font-size: 32px;
   line-height: 40px;
 }
 
-:host(.h2)>* {
+:host(.h2) > * {
   font-size: 28px;
   line-height: 36px;
 }
 
-:host(.h3)>* {
+:host(.h3) > * {
   font-size: 24px;
   line-height: 32px;
 }
 
-:host(.h4)>* {
+:host(.h4) > * {
   font-size: 20px;
   line-height: 28px;
 }
 
-:host(.b1)>* {
+:host(.b1) > * {
   font-size: 20px;
   line-height: 28px;
 }
 
-:host(.b2)>* {
+:host(.b2) > * {
   font-size: 18px;
   line-height: 28px;
 }
 
-:host(.b3)>* {
+:host(.b3) > * {
   font-size: 16px;
   line-height: 24px;
 }
 
-:host(.b4)>* {
+:host(.b4) > * {
   font-size: 14px;
   line-height: 20px;
 }
 
-:host(.b5)>* {
+:host(.b5) > * {
   font-size: 12px;
   line-height: 16px;
 }

package/dist/collection/components/z-aria-alert/index.js

@@ -2,7 +2,8 @@ import { h, Host } from "@stencil/core";
 import { ZAriaAlertMode } from "../../beans";
 export class ZAriaAlert {
   constructor() {
-    this.mode = ZAriaAlertMode.polite;
+    /** Aria live mode */
+    this.mode = ZAriaAlertMode.POLITE;
   }
   render() {
     return (h(Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", null)));
@@ -14,19 +15,24 @@ export class ZAriaAlert {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "ZAriaAlertMode",
+          "resolved": "ZAriaAlertMode.ASSERTIVE | ZAriaAlertMode.POLITE",
+          "references": {
+            "ZAriaAlertMode": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Aria live mode"
         },
         "attribute": "mode",
         "reflect": false,
-        "defaultValue": "ZAriaAlertMode.polite"
+        "defaultValue": "ZAriaAlertMode.POLITE"
       }
     };
   }

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

@@ -2,24 +2,25 @@ import { h, Host } from "@stencil/core";
 import { AvatarSize } from "../../beans";
 export class ZAvatar {
   constructor() {
+    var _a, _b;
     /** [optional] Avatar size */
-    this.size = AvatarSize.medium;
+    this.size = AvatarSize.MEDIUM;
     /** [optional] Avatar text color */
     this.textColor = "text-white";
     /** [optional] Avatar background color */
     this.backgroundColor = "bg-grey-700";
-    if (!this.text && !this.image) {
+    if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       console.warn("z-avatar must contain at least one prop between text and image");
     }
   }
   getTextSize() {
-    if (this.size === AvatarSize.small) {
+    if (this.size === AvatarSize.SMALL) {
       return "5";
     }
-    else if (this.size === AvatarSize.medium) {
+    else if (this.size === AvatarSize.MEDIUM) {
       return "4";
     }
-    else if (this.size === AvatarSize.large) {
+    else if (this.size === AvatarSize.LARGE) {
       return "2";
     }
   }
@@ -48,7 +49,7 @@ export class ZAvatar {
         "mutable": false,
         "complexType": {
           "original": "AvatarSize",
-          "resolved": "AvatarSize.large | AvatarSize.medium | AvatarSize.small",
+          "resolved": "AvatarSize.LARGE | AvatarSize.MEDIUM | AvatarSize.SMALL",
           "references": {
             "AvatarSize": {
               "location": "import",
@@ -64,7 +65,7 @@ export class ZAvatar {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "AvatarSize.medium"
+        "defaultValue": "AvatarSize.MEDIUM"
       },
       "text": {
         "type": "string",

package/dist/collection/components/z-avatar/styles.css

@@ -1,33 +1,30 @@
 :host {
-  font-family: var(--font-family-sans);
-
-  background-color: var(--bg-grey-700);
-
-  border-radius: 50%;
-
   display: inline-flex;
+  overflow: hidden;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  background-color: var(--bg-grey-700);
+  border-radius: 50%;
+  font-family: var(--font-family-sans);
   text-transform: uppercase;
 }
 
 :host(.small),
 :host(.small) > img {
-  height: calc(var(--space-unit) * 3);
   width: calc(var(--space-unit) * 3);
+  height: calc(var(--space-unit) * 3);
 }
 
 :host(.medium),
 :host(.medium) > img {
-  height: calc(var(--space-unit) * 4);
   width: calc(var(--space-unit) * 4);
+  height: calc(var(--space-unit) * 4);
 }
 
 :host(.large),
 :host(.large) > img {
-  height: calc(var(--space-unit) * 5);
   width: calc(var(--space-unit) * 5);
+  height: calc(var(--space-unit) * 5);
 }
 
 :host > img {

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { CardVariants } from '../../beans';
+import { h, Host } from "@stencil/core";
+import { CardVariant } from "../../beans";
 export class ZCard {
   constructor() {
     /** Enable click interactions on the card. Default: false */
@@ -9,7 +9,7 @@ export class ZCard {
   }
   onClick(ev) {
     // Do nothing for clicks on actions.
-    if (ev.target.getAttribute('slot') === 'action') {
+    if (ev.target.getAttribute("slot") === "action") {
       return;
     }
     if (!this.clickable) {
@@ -20,7 +20,7 @@ export class ZCard {
     this.cardClicked.emit();
   }
   componentWillLoad() {
-    this.hasCoverImage = !!this.host.querySelector('[slot="cover"]');
+    this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
   }
   /**
    * Template for a card without image cover.
@@ -29,29 +29,26 @@ export class ZCard {
   renderColorCoverCard() {
     return [
       h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
-      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" })))
+      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
     ];
   }
   /**
-  * Template for the content div.
-  */
+   * Template for the content div.
+   */
   renderContentDiv() {
     return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
   }
   render() {
-    if (this.variant === CardVariants.text) {
-      return this.renderContentDiv();
+    if (this.variant === CardVariant.TEXT) {
+      return h(Host, null, this.renderContentDiv());
     }
-    if (this.variant === CardVariants.overlay || this.hasCoverImage) {
-      return [
-        h("div", { class: "cover-container" }, this.hasCoverImage && [
-          h("slot", { name: "cover" }),
-          (this.variant !== CardVariants.overlay) && this.coverIcon && h("z-icon", { name: this.coverIcon })
-        ], !this.hasCoverImage && h("div", { class: "color-cover" })),
-        this.renderContentDiv()
-      ];
+    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
+      return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
+        h("slot", { name: "cover" }),
+        this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
+      ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
     }
-    return this.renderColorCoverCard();
+    return h(Host, null, this.renderColorCoverCard());
   }
   static get is() { return "z-card"; }
   static get encapsulation() { return "shadow"; }
@@ -71,10 +68,10 @@ export class ZCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "CardVariants",
-          "resolved": "CardVariants.border | CardVariants.overlay | CardVariants.shadow | CardVariants.text",
+          "original": "CardVariant",
+          "resolved": "CardVariant.BORDER | CardVariant.OVERLAY | CardVariant.SHADOW | CardVariant.TEXT",
           "references": {
-            "CardVariants": {
+            "CardVariant": {
               "location": "import",
               "path": "../../beans"
             }

package/dist/collection/components/z-card/styles.css

@@ -22,7 +22,7 @@ respecting the grid indications of the design. */
   box-sizing: border-box;
 }
 
-:host(:not([variant='overlay'])) .cover-container {
+:host(:not([variant="overlay"])) .cover-container {
   position: relative;
   width: 100%;
 }
@@ -33,7 +33,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
   padding-bottom: calc(100% / var(--aspect-ratio));
 }
 
-::slotted([slot='cover']),
+::slotted([slot="cover"]),
 .color-cover {
   position: absolute;
   top: 0;
@@ -66,44 +66,44 @@ Unfortunately the `aspect-ratio` property is still experimental */
 
 .color-cover .cover-content {
   display: flex;
+  height: 100%;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
   padding: var(--space-unit);
 }
 
 /* Truncates overflowing text */
-::slotted([slot='metadata']),
-::slotted([slot='title']),
-::slotted([slot='text']) {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
+::slotted([slot="metadata"]),
+::slotted([slot="title"]),
+::slotted([slot="text"]) {
+  display: box;
   overflow: hidden;
+  -webkit-box-orient: vertical;
 }
 
-::slotted([slot='title']:not(:last-child)),
-::slotted([slot='text']:not(:last-child)) {
+::slotted([slot="title"]:not(:last-child)),
+::slotted([slot="text"]:not(:last-child)) {
   margin-bottom: var(--space-unit);
 }
 
-::slotted([slot='text']),
-::slotted([slot='actions']) {
+::slotted([slot="text"]),
+::slotted([slot="actions"]) {
   margin: 0;
 }
 
-::slotted([slot='metadata']:not(:last-child)) {
+::slotted([slot="metadata"]:not(:last-child)) {
   margin: 0 0 calc(var(--space-unit) * 0.25);
   -webkit-line-clamp: 1;
   text-transform: uppercase;
 }
 
-::slotted([slot='title']) {
+::slotted([slot="title"]) {
   margin: 0;
   font-weight: var(--font-sb);
   -webkit-line-clamp: 2;
 }
 
-::slotted([slot='text']) {
+::slotted([slot="text"]) {
   -webkit-line-clamp: 3;
 }
 
@@ -113,7 +113,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
   align-items: center;
 }
 
-::slotted([slot='action']:not(:last-child)) {
+::slotted([slot="action"]:not(:last-child)) {
   margin-right: calc(var(--space-unit) * 1.5);
 }
 
@@ -131,72 +131,68 @@ Unfortunately the `aspect-ratio` property is still experimental */
   box-shadow: var(--shadow-focus-primary);
 }
 
-:host([variant='text']) {
-  background-color: var(--z-card--text-background);
+:host([variant="text"]) {
   border: var(--z-card--text-border);
+  background-color: var(--z-card--text-background);
   border-radius: var(--z-card--text-border-radius);
 }
 
 :host([showshadow]) > .content,
-:host([variant='border']) > .content,
-:host([variant='shadow']) > .content {
+:host([variant="border"]) > .content,
+:host([variant="shadow"]) > .content {
   height: 100%;
   padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);
 }
 
-:host([variant='text']) > .content {
-  padding: calc(var(--space-unit) * 2) var(--space-unit)
+:host([variant="text"]) > .content {
+  padding: calc(var(--space-unit) * 2) var(--space-unit);
 }
 
-:host([variant='border']) .actions,
-:host([variant='shadow']) .actions {
+:host([variant="border"]) .actions,
+:host([variant="shadow"]) .actions {
   margin-top: auto;
 }
 
 /* Border */
-:host([variant='border']) {
+:host([variant="border"]) {
   border: var(--border-size-small) solid var(--z-card--border-color);
 }
 
-:host([variant='border'][clickable]:hover) > .content {
+:host([variant="border"][clickable]:hover) > .content {
   background: var(--color-background);
 }
 
-:host([variant='border'][clickable]:focus:focus-visible) {
+:host([variant="border"][clickable]:focus:focus-visible) {
   box-shadow: var(--shadow-focus-primary);
 }
 
-:host([variant='border'][clickable]:active) {
+:host([variant="border"][clickable]:active) {
   border-color: transparent;
 }
 
 /* Shadow */
-:host([variant='shadow']),
-:host([showshadow])
-{
+:host([variant="shadow"]),
+:host([showshadow]) {
   box-shadow: var(--shadow-2);
 }
 
-:host([variant='shadow'][clickable]:hover),
-:host([clickable][showshadow]:hover)
-{
+:host([variant="shadow"][clickable]:hover),
+:host([clickable][showshadow]:hover) {
   box-shadow: var(--shadow-4);
 }
 
-:host([variant='shadow'][clickable]:focus:focus-visible),
-:host([clickable][showshadow]:focus:focus-visible)
-{
+:host([variant="shadow"][clickable]:focus:focus-visible),
+:host([clickable][showshadow]:focus:focus-visible) {
   box-shadow: var(--shadow-4);
 }
 
-:host([variant='shadow'][clickable]:active),
-:host([clickable][showshadow]:active)
-{
+:host([variant="shadow"][clickable]:active),
+:host([clickable][showshadow]:active) {
   box-shadow: none;
 }
 
 /* Overlay */
-:host([variant='overlay']) .content {
+:host([variant="overlay"]) .content {
   position: absolute;
   top: 0;
   right: 0;
@@ -204,7 +200,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
   left: 0;
   justify-content: flex-end;
   padding: var(--space-unit);
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));
   color: var(--color-text-inverse);
   fill: var(--color-text-inverse);
 }

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

@@ -1,5 +1,5 @@
-import { h, Host, } from "@stencil/core";
-import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariantEnum, ButtonSizeEnum } from "../../beans";
+import { h, Host } from "@stencil/core";
+import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ButtonSize } from "../../beans";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.
@@ -18,7 +18,8 @@ export class ZCarousel {
   }
   onIndexChange() {
     this.scrollingTo = this.current;
-    this.items[this.current].scrollIntoView({
+    this.itemsContainer.scroll({
+      left: this.items[this.current].offsetLeft,
       behavior: "smooth",
     });
     this.indexChange.emit({ currentItem: this.current });
@@ -49,7 +50,7 @@ export class ZCarousel {
       }
       const entryIndex = this.items.findIndex((item) => item === entry.target);
       /* skip setting the current item if intersection has been triggered by a programmatic scroll
-      (the scrollIntoView in `onIndexChange`) */
+      (the scroll in `onIndexChange`) */
       if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
         return;
       }
@@ -111,15 +112,9 @@ export class ZCarousel {
   }
   render() {
     if (this.isLoading) {
-      return h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null))));
+      return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
     }
-    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSizeEnum.small, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this) })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSizeEnum.small, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this) })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSizeEnum.small, variant: ButtonVariantEnum.tertiary, icon: "arrow-left-filled", onClick: this.onPrev.bind(this) })), this.progressMode === CarouselProgressMode.DOTS &&
-      this.single &&
-      this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.current === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.current === key
-        ? "white-circle-filled"
-        : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS &&
-      this.single &&
-      this.items && (h("div", { class: "numbers-progress" }, h("span", { class: "interactive-3 current" }, this.current + 1), h("span", { class: "interactive-3" }, "di"), h("span", { class: "interactive-3" }, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSizeEnum.small, variant: ButtonVariantEnum.tertiary, icon: "arrow-right-filled", onClick: this.onNext.bind(this) }))))));
+    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this) })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this) })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-left-filled", onClick: this.onPrev.bind(this) })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.current === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.current === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress" }, h("span", { class: "interactive-3 current" }, this.current + 1), h("span", { class: "interactive-3" }, "di"), h("span", { class: "interactive-3" }, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-right-filled", onClick: this.onNext.bind(this) }))))));
   }
   static get is() { return "z-carousel"; }
   static get originalStyleUrls() {

package/dist/collection/components/z-carousel/styles.css

@@ -6,14 +6,14 @@ z-carousel {
 }
 
 z-carousel[single],
-z-carousel[single='true'] {
+z-carousel[single="true"] {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
-z-carousel[single='true'] .z-carousel-container,
+z-carousel[single="true"] .z-carousel-container,
 z-carousel[single] .z-carousel-container {
   width: fit-content;
   max-width: 100%;
@@ -33,22 +33,22 @@ z-carousel .loading-items-container {
 }
 
 .z-carousel-title {
-  color: var(--gray800);
   margin-bottom: var(--space-unit);
+  color: var(--gray800);
 }
 
 .z-carousel-items-container {
   display: flex;
-  flex-direction: row;
-  overflow-x: scroll;
   max-width: 100%;
-  padding-inline-start: 0;
+  flex-direction: row;
   margin: 0;
   list-style: none;
+  -ms-overflow-style: none; /* IE and Edge */
+  overflow-x: scroll;
+  padding-inline-start: 0;
   scroll-snap-type: x mandatory;
 
   /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
 
@@ -61,7 +61,7 @@ z-carousel .loading-items-container {
   margin-right: var(--z-carousel-gutter);
 }
 
-z-carousel[single='true'] .z-carousel-items-container > *:not(:last-child),
+z-carousel[single="true"] .z-carousel-items-container > *:not(:last-child),
 z-carousel[single] .z-carousel-items-container > *:not(:last-child) {
   margin-right: 0;
 }
@@ -75,8 +75,8 @@ z-button[data-direction] {
   --z-icon-height: 32px;
 
   position: absolute;
-  bottom: calc(50% - calc(var(--space-unit) * 3));
-  cursor: pointer;
+  bottom: 50%;
+  transform: translateY(50%);
 }
 
 z-button[data-direction="next"] {
@@ -101,9 +101,9 @@ z-button[data-direction="next"] {
 .z-carousel-footer .dots-progress button {
   display: flex;
   align-items: center;
-  margin: 0;
   padding: 0;
   border: none;
+  margin: 0;
   background-color: transparent;
 }
 

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

@@ -1,4 +1,4 @@
-import { 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,12 +29,7 @@ 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"; }
@@ -90,7 +85,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",
@@ -106,7 +101,7 @@ export class ZContextualMenu {
         },
         "attribute": "popover-position",
         "reflect": true,
-        "defaultValue": "PopoverPositions.bottom_right"
+        "defaultValue": "PopoverPositions.BOTTOM_RIGHT"
       }
     };
   }