@zanichelli/albe-web-components 6.0.4 → 6.1.0-a1

package/dist/collection/components/navigation/tabs/z-navigation-tabs/index.js

@@ -1,31 +1,27 @@
 import { h, Host } from "@stencil/core";
-import { NavigationTabsSize, NavigationTabsOrientation } from "../../../../beans";
 /**
  * Navigation tabs component.
  * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
  */
 export class ZNavigationTabs {
   constructor() {
-    /**
-     * Navigation tabs orientation.
-     */
-    this.orientation = NavigationTabsOrientation.HORIZONTAL;
-    /**
-     * Navigation tabs size.
-     */
-    this.size = NavigationTabsSize.BIG;
+    this.orientation = "horizontal" /* NavigationTabsOrientation.HORIZONTAL */;
+    this.size = "big" /* NavigationTabsSize.BIG */;
+    this.canNavigate = undefined;
+    this.canNavigatePrev = undefined;
+    this.canNavigateNext = undefined;
   }
   /**
    * Getter for the direction to check based on current orientation.
    */
   get direction() {
-    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
+    return this.orientation == "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "Left" : "Top";
   }
   /**
    * Getter for the dimension to check based on current orientation.
    */
   get dimension() {
-    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
+    return this.orientation == "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "Width" : "Height";
   }
   /**
    * Set the `size` prop to all `z-navigation-tab` children.
@@ -106,9 +102,9 @@ export class ZNavigationTabs {
   }
   render() {
     return (h(Host, { class: {
-        "interactive-2": this.size === NavigationTabsSize.SMALL,
-        "interactive-1": this.size !== NavigationTabsSize.SMALL,
-      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+        "interactive-2": this.size === "small" /* NavigationTabsSize.SMALL */,
+        "interactive-1": this.size !== "small" /* NavigationTabsSize.SMALL */,
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation === "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   static get is() { return "z-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation/z-app-header/index.js

@@ -7,41 +7,19 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  */
 export class ZAppHeader {
   constructor() {
-    /**
-     * Stuck mode for the header.
-     * You can programmatically set it using an IntersectionObserver.
-     * **Optional**
-     */
-    this.stuck = false;
-    /**
-     * Should place an overlay over the hero image.
-     * Useful for legibility purpose.
-     * **Optional**
-     */
-    this.overlay = false;
-    /**
-     * Control menu bar position in the header.
-     * - auto: the menu bar is positioned near the title
-     * - stack: the menu bar is positioned below the title
-     * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
-     *
-     * **Optional**
-     */
-    this.flow = "auto";
-    /**
-     * The opening state of the drawer.
-     */
-    this.drawerOpen = false;
-    /**
-     * The stucked state of the bar.
-     */
-    this.stucked = false;
     this.observer = SUPPORT_INTERSECTION_OBSERVER &&
       new IntersectionObserver(([entry]) => {
         this.stucked = !entry.isIntersecting;
       }, {
         threshold: 0.5,
       });
+    this.stuck = false;
+    this.hero = undefined;
+    this.overlay = false;
+    this.flow = "auto";
+    this.drawerOpen = false;
+    this.stucked = false;
+    this.menuLength = undefined;
     this.openDrawer = this.openDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
     this.collectMenuElements.bind(this);

package/dist/collection/components/navigation/z-app-switcher/index.js

@@ -1,9 +1,7 @@
 import { h } from "@stencil/core";
-import { ThemeVariant } from "../../../beans";
 export class ZAppSwitcher {
   constructor() {
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.DARK;
+    this.theme = "dark" /* ThemeVariant.DARK */;
     this.isopen = false;
     this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
   }

package/dist/collection/components/navigation/z-app-topbar/index.js

@@ -1,11 +1,14 @@
 import { h, Host } from "@stencil/core";
-import { DividerOrientation, ThemeVariant } from "../../../beans";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZAppTopbar {
   constructor() {
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.DARK;
     this.topbarLinks = [];
+    this.theme = "dark" /* ThemeVariant.DARK */;
+    this.contentMaxWidth = undefined;
+    this.topbarContent = undefined;
+    this.logoLink = undefined;
+    this.showAppSwitcher = undefined;
+    this.isMobile = undefined;
   }
   handleResize() {
     this.isMobile = window.innerWidth <= mobileBreakpoint;
@@ -19,13 +22,13 @@ export class ZAppTopbar {
     }
   }
   renderTopbarLinks() {
-    return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
+    return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === "light" /* ThemeVariant.LIGHT */ ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
   }
   render() {
     return (h(Host, { class: {
         [this.theme]: true,
         "limited-width": !!this.contentMaxWidth,
-      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.VERTICAL, color: this.theme === ThemeVariant.LIGHT ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
+      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: "vertical" /* DividerOrientation.VERTICAL */, color: this.theme === "light" /* ThemeVariant.LIGHT */ ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
   }
   static get is() { return "z-app-topbar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation/z-link/index.js

@@ -4,23 +4,17 @@ import { h } from "@stencil/core";
  */
 export class ZLink {
   constructor() {
-    /** link target (optional) */
+    this.htmlid = undefined;
+    this.href = undefined;
     this.target = "_self";
-    /** tabindex link attribute (optional) */
     this.htmltabindex = 0;
-    /** disable link flag (optional) */
     this.isdisabled = false;
-    /** active link flag (optional) */
     this.isactive = false;
-    /** white variant flag (optional) */
     this.iswhite = false;
-    /** link text variant (optional) */
     this.textcolor = "primary";
-    /** big link version */
+    this.icon = undefined;
     this.big = false;
-    /** link icon position (optional) */
     this.iconposition = "left";
-    /** draw underline on text (optional) */
     this.underline = false;
     this.iconSize = 18;
     this.emitZLinkClick = this.emitZLinkClick.bind(this);

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

@@ -6,18 +6,11 @@ import { h, Host } from "@stencil/core";
  */
 export class ZMenu {
   constructor() {
-    /**
-     * Flag to set the display mode of the list.
-     * If true, the list will be absolutely positioned under the menu label,
-     * stacked beneath it otherwise.
-     * @default false
-     */
+    this.active = undefined;
     this.floating = false;
-    /**
-     * The opening state of the menu.
-     * @default false
-     */
     this.open = false;
+    this.hasHeader = undefined;
+    this.hasContent = undefined;
     this.toggle = this.toggle.bind(this);
     this.checkContent = this.checkContent.bind(this);
     this.onItemsChange = this.onItemsChange.bind(this);

package/dist/collection/components/navigation/z-menu-dropdown/index.js

@@ -1,8 +1,10 @@
 import { h } from "@stencil/core";
-import { KeyboardKeyCode } from "../../../beans/index";
 import { handleKeyboardSubmit, getClickedElement, getElementTree } from "../../../utils/utils";
 export class ZMenuDropdown {
   constructor() {
+    this.nomeutente = undefined;
+    this.menucontent = undefined;
+    this.buttonid = undefined;
     this.ismenuopen = false;
     this.handleToggle = this.handleToggle.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
@@ -27,7 +29,7 @@ export class ZMenuDropdown {
     this.ismenuopen = !this.ismenuopen;
   }
   handleFocus(e) {
-    if (e instanceof KeyboardEvent && e.keyCode !== KeyboardKeyCode.TAB) {
+    if (e instanceof KeyboardEvent && e.keyCode !== 9 /* KeyboardKeyCode.TAB */) {
       return;
     }
     const tree = getElementTree(getClickedElement());

package/dist/collection/components/navigation/z-menu-section/index.js

@@ -4,6 +4,11 @@ import { h, Host } from "@stencil/core";
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items.
  */
 export class ZMenuSection {
+  constructor() {
+    this.active = undefined;
+    this.open = undefined;
+    this.hasContent = undefined;
+  }
   toggle() {
     if (!this.hasContent) {
       return;

package/dist/collection/components/navigation/z-user-dropdown/index.js

@@ -2,9 +2,13 @@ import { h, Host } from "@stencil/core";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZUserDropdown {
   constructor() {
-    /** if inner components colors are inverted, or not, default false */
+    this.logged = undefined;
+    this.userFullName = undefined;
+    this.userEmail = undefined;
+    this.menuContent = undefined;
     this.useInverseColors = false;
     this.isMenuOpen = false;
+    this.isMobile = undefined;
     this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
     this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
   }

package/dist/collection/components/notification/z-cookiebar/index.js

@@ -1,6 +1,10 @@
 import { h } from "@stencil/core";
-import { ButtonVariant } from "../../../beans";
 export class ZCookiebar {
+  constructor() {
+    this.cookiepolicyurl = undefined;
+    this.hide = undefined;
+    this.callback = undefined;
+  }
   emitAccept(ev) {
     this.accept.emit({ ev });
   }
@@ -19,7 +23,7 @@ export class ZCookiebar {
     }
   }
   renderContentSlot() {
-    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: ButtonVariant.PRIMARY, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: "primary" /* ButtonVariant.PRIMARY */, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
     return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());

package/dist/collection/components/notification/z-info-box/index.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ZInfoBox {
   constructor() {
-    /** render close icon flag */
+    this.boxid = undefined;
     this.isclosable = true;
   }
   emitInfoBoxClose() {

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

@@ -6,14 +6,11 @@ import { h, Host } from "@stencil/core";
  */
 export class ZNotification {
   constructor() {
-    /** Enable close icon */
+    this.contenticonname = undefined;
+    this.actiontext = undefined;
+    this.type = undefined;
     this.showclose = false;
-    /**
-     * Enable shadow.
-     * @deprecated shadow is available only for the `sticky` version of the notification.
-     */
     this.showshadow = false;
-    /** Enable sticky notification bar. */
     this.sticky = false;
     this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
     this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);

package/dist/collection/components/notification/z-toast-notification/index.js

@@ -1,16 +1,19 @@
 import { h, Host } from "@stencil/core";
-import { ToastNotificationTransition } from "../../../beans";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 import Hammer from "hammerjs";
 export class ZToastNotification {
   constructor() {
-    /** toast notification autoclose can be paused */
+    this.isCloseEventCalled = false;
+    this.heading = undefined;
+    this.message = undefined;
+    this.closebutton = undefined;
+    this.autoclose = undefined;
     this.pauseonfocusloss = true;
-    /** toast notification can be draggable*/
+    this.type = undefined;
     this.isdraggable = true;
-    /** toast notification draggable percentage*/
     this.draggablepercentage = 80;
-    this.isCloseEventCalled = false;
+    this.transition = undefined;
+    this.percentage = undefined;
   }
   watchPropIsdraggable(newValue) {
     if (newValue) {
@@ -68,14 +71,14 @@ export class ZToastNotification {
   }
   mapSlideOutClass() {
     switch (this.transition) {
-      case ToastNotificationTransition.SLIDE_IN_DOWN:
-        return ToastNotificationTransition.SLIDE_OUT_UP;
-      case ToastNotificationTransition.SLIDE_IN_UP:
-        return ToastNotificationTransition.SLIDE_OUT_DOWN;
-      case ToastNotificationTransition.SLIDE_IN_LEFT:
-        return ToastNotificationTransition.SLIDE_OUT_RIGHT;
-      case ToastNotificationTransition.SLIDE_IN_RIGHT:
-        return ToastNotificationTransition.SLIDE_OUT_LEFT;
+      case "slide-in-down" /* ToastNotificationTransition.SLIDE_IN_DOWN */:
+        return "slide-out-up" /* ToastNotificationTransition.SLIDE_OUT_UP */;
+      case "slide-in-up" /* ToastNotificationTransition.SLIDE_IN_UP */:
+        return "slide-out-down" /* ToastNotificationTransition.SLIDE_OUT_DOWN */;
+      case "slide-in-left" /* ToastNotificationTransition.SLIDE_IN_LEFT */:
+        return "slide-out-right" /* ToastNotificationTransition.SLIDE_OUT_RIGHT */;
+      case "slide-in-right" /* ToastNotificationTransition.SLIDE_IN_RIGHT */:
+        return "slide-out-left" /* ToastNotificationTransition.SLIDE_OUT_LEFT */;
     }
   }
   calculateDraggedPercentage(e) {
@@ -169,7 +172,7 @@ export class ZToastNotification {
   render() {
     return (h(Host, { style: {
         "--percentuale": `${this.percentage}%`,
-      }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
+      }, class: this.transition ? this.transition : "slide-in-down" /* ToastNotificationTransition.SLIDE_IN_DOWN */, onAnimationEnd: (e) => {
         if (this.autoclose && e.animationName.includes("slidein")) {
           this.startClosingTimeout(this.autoclose);
         }

package/dist/collection/components/notification/z-tooltip/index.js

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { PopoverPositions } from "../../../beans";
 /**
  * Tooltip component.
  * It is basically a wrapper for the `<z-popover>` component with custom configuration.
@@ -10,14 +9,10 @@ import { PopoverPositions } from "../../../beans";
  */
 export class ZTooltip {
   constructor() {
-    /** Tooltip position. */
-    this.position = PopoverPositions.AUTO;
-    /** Enable tooltip dark mode. */
+    this.position = "auto" /* PopoverPositions.AUTO */;
     this.dark = false;
-    /**
-     * The open state of the tooltip.
-     */
     this.open = false;
+    this.bindTo = undefined;
   }
   onPopoverOpenChange() {
     this.open = this.popover.open;

package/dist/collection/components/panel/z-panel-elem/index.js

@@ -4,10 +4,15 @@ import { h } from "@stencil/core";
  */
 export class ZPanelElem {
   constructor() {
-    /** link target (optional) */
+    this.elemid = undefined;
+    this.imgurl = undefined;
+    this.imgalt = undefined;
+    this.linkicon = undefined;
+    this.linklabel = undefined;
+    this.url = undefined;
     this.target = "_blank";
-    /** disabled status flag (optional) */
     this.isdisabled = false;
+    this.descrSlotName = undefined;
   }
   renderIcon() {
     if (this.isdisabled) {

package/dist/collection/components/typography/z-body/index.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
 export class ZBody {
   constructor() {
-    /** Font weight variant */
+    this.level = undefined;
     this.variant = "regular";
+    this.component = undefined;
   }
   render() {
     return (h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, h("slot", null)));

package/dist/collection/components/typography/z-heading/index.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
 export class ZHeading {
   constructor() {
-    /** Font weight variant */
+    this.level = undefined;
     this.variant = "regular";
+    this.component = undefined;
   }
   render() {
     return (h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, h("slot", null)));

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

@@ -1,8 +1,9 @@
 import { h, Host } from "@stencil/core";
 export class ZTypography {
   constructor() {
-    /** Font weight variant */
+    this.level = undefined;
     this.variant = "regular";
+    this.component = undefined;
   }
   render() {
     const el = document.createElement(this.component || "span");

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

@@ -1,9 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { ZAriaAlertMode } from "../../beans";
 export class ZAriaAlert {
   constructor() {
-    /** Aria live mode */
-    this.mode = ZAriaAlertMode.POLITE;
+    this.mode = "polite" /* ZAriaAlertMode.POLITE */;
   }
   render() {
     return (h(Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", null)));

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

@@ -1,26 +1,24 @@
 import { h, Host } from "@stencil/core";
-import { AvatarSize } from "../../beans";
 export class ZAvatar {
   constructor() {
     var _a, _b;
-    /** [optional] Avatar size */
-    this.size = AvatarSize.MEDIUM;
-    /** [optional] Avatar text color */
+    this.size = "medium" /* AvatarSize.MEDIUM */;
+    this.text = undefined;
     this.textColor = "text-white";
-    /** [optional] Avatar background color */
     this.backgroundColor = "bg-grey-700";
+    this.image = undefined;
     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 === "small" /* AvatarSize.SMALL */) {
       return "5";
     }
-    else if (this.size === AvatarSize.MEDIUM) {
+    else if (this.size === "medium" /* AvatarSize.MEDIUM */) {
       return "4";
     }
-    else if (this.size === AvatarSize.LARGE) {
+    else if (this.size === "large" /* AvatarSize.LARGE */) {
       return "2";
     }
   }

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

@@ -1,11 +1,11 @@
 import { h, Host } from "@stencil/core";
-import { CardVariant } from "../../beans";
 export class ZCard {
   constructor() {
-    /** Enable click interactions on the card. Default: false */
+    this.variant = undefined;
+    this.coverIcon = undefined;
     this.clickable = false;
-    /** Enable shadow. Default: false. */
     this.showshadow = false;
+    this.hasCoverImage = undefined;
   }
   onClick(ev) {
     // Do nothing for clicks on actions.
@@ -39,13 +39,13 @@ export class ZCard {
     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 === CardVariant.TEXT) {
+    if (this.variant === "text" /* CardVariant.TEXT */) {
       return h(Host, null, this.renderContentDiv());
     }
-    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
+    if (this.variant === "overlay" /* 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.variant !== "overlay" /* CardVariant.OVERLAY */ && this.coverIcon && h("z-icon", { name: this.coverIcon }),
       ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
     }
     return h(Host, null, this.renderColorCoverCard());

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

@@ -1,5 +1,4 @@
 import { h, Host } from "@stencil/core";
-import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ButtonSize } from "../../beans";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.
@@ -7,14 +6,16 @@ import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ButtonSize
  */
 export class ZCarousel {
   constructor() {
-    /** Shows only one content at a time */
+    /** Flag indicating the items container is scrolling programmatically towards the stored index. */
+    this.scrollingTo = null;
+    this.isLoading = undefined;
+    this.label = undefined;
     this.single = false;
-    /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
+    this.arrowsPosition = undefined;
+    this.progressMode = undefined;
     this.ghostLoadingHeight = 100;
-    /** Current item index for single mode. */
     this.current = 0;
-    /** Flag indicating the items container is scrolling programmatically towards the stored index. */
-    this.scrollingTo = null;
+    this.items = undefined;
   }
   onIndexChange() {
     this.scrollingTo = this.current;
@@ -95,9 +96,9 @@ export class ZCarousel {
    * @returns {boolean}
    */
   canShowFooter() {
-    return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
-      this.progressMode === CarouselProgressMode.DOTS ||
-      this.progressMode === CarouselProgressMode.NUMBERS);
+    return (this.arrowsPosition === "bottom" /* CarouselArrowsPosition.BOTTOM */ ||
+      this.progressMode === "dots" /* CarouselProgressMode.DOTS */ ||
+      this.progressMode === "numbers" /* CarouselProgressMode.NUMBERS */);
   }
   /**
    * Set current item to passed index.
@@ -114,7 +115,7 @@ export class ZCarousel {
     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, 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) }))))));
+    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 === "over" /* CarouselArrowsPosition.OVER */ && (h("z-button", { size: "small" /* 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 === "over" /* CarouselArrowsPosition.OVER */ && (h("z-button", { size: "small" /* ButtonSize.SMALL */, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this) })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === "bottom" /* CarouselArrowsPosition.BOTTOM */ && (h("z-button", { size: "small" /* ButtonSize.SMALL */, variant: "tertiary" /* ButtonVariant.TERTIARY */, icon: "arrow-left-filled", onClick: this.onPrev.bind(this) })), this.progressMode === "dots" /* 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 === "numbers" /* 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 === "bottom" /* CarouselArrowsPosition.BOTTOM */ && (h("z-button", { size: "small" /* ButtonSize.SMALL */, variant: "tertiary" /* 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-contextual-menu/index.js

@@ -1,15 +1,9 @@
 import { h, Host } from "@stencil/core";
-import { PopoverPositions } from "../../beans";
 export class ZContextualMenu {
   constructor() {
-    /**
-     * [optional] Sets text color of ZContextualMenu's content
-     */
+    this.elements = undefined;
     this.color = "color-primary01";
-    /**
-     * [optional] Sets the position of the popover
-     */
-    this.popoverPosition = PopoverPositions.BOTTOM_RIGHT;
+    this.popoverPosition = "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */;
   }
   componentWillRender() {
     if (this.elements) {

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

@@ -1,5 +1,4 @@
 import { h, Host } from "@stencil/core";
-import { CoverHeroVariant, CoverHeroContentPosition } from "../../beans";
 /**
  * Cover hero component.
  * Component to display a hero image with content.
@@ -13,15 +12,8 @@ import { CoverHeroVariant, CoverHeroContentPosition } from "../../beans";
  */
 export class ZCoverHero {
   constructor() {
-    /**
-     * Cover hero variant.
-     * Can be one of "OVERLAY", "STACKED".
-     */
-    this.variant = CoverHeroVariant.OVERLAY;
-    /**
-     * Cover hero content position (only for STACKED variant).
-     */
-    this.contentPosition = CoverHeroContentPosition.TOP;
+    this.variant = "overlay" /* CoverHeroVariant.OVERLAY */;
+    this.contentPosition = "top" /* CoverHeroContentPosition.TOP */;
   }
   /**
    * Template for the content.
@@ -30,10 +22,10 @@ export class ZCoverHero {
     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 &&
+    return (h(Host, null, this.variant === "stacked" /* CoverHeroVariant.STACKED */ &&
+      this.contentPosition === "top" /* CoverHeroContentPosition.TOP */ &&
+      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === "overlay" /* CoverHeroVariant.OVERLAY */ && this.renderContent()), this.variant === "stacked" /* CoverHeroVariant.STACKED */ &&
+      this.contentPosition === "bottom" /* CoverHeroContentPosition.BOTTOM */ &&
       this.renderContent()));
   }
   static get is() { return "z-cover-hero"; }