@zanichelli/albe-web-components 6.2.0-a1 → 6.2.1

package/dist/cjs/z-navigation-tabs.cjs.entry.js

@@ -3,29 +3,33 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--color-white);border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px rgb(66 69 72 / 40%);cursor:pointer;fill:var(--color-primary01);outline:none}.navigation-button:focus:focus-visible{box-shadow:inset var(--shadow-focus-primary);fill:var(--color-primary01)}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation=\"horizontal\"]) nav{width:100%}:host([orientation=\"horizontal\"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation=\"horizontal\"]) .navigation-button:first-child{left:0}:host([orientation=\"horizontal\"]) .navigation-button:last-child{right:0}:host([orientation=\"vertical\"]){width:fit-content;flex-direction:column}:host([orientation=\"vertical\"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation=\"vertical\"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation=\"vertical\"]) .navigation-button:first-child{top:0}:host([orientation=\"vertical\"]) .navigation-button:last-child{bottom:0}:host([size=\"small\"][orientation=\"vertical\"]) .navigation-button{height:calc(var(--space-unit) * 4)}";
 
 const ZNavigationTabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.orientation = "horizontal" /* NavigationTabsOrientation.HORIZONTAL */;
-    this.size = "big" /* NavigationTabsSize.BIG */;
-    this.canNavigate = undefined;
-    this.canNavigatePrev = undefined;
-    this.canNavigateNext = undefined;
+    /**
+     * Navigation tabs orientation.
+     */
+    this.orientation = index$1.NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Navigation tabs size.
+     */
+    this.size = index$1.NavigationTabsSize.BIG;
   }
   /**
    * Getter for the direction to check based on current orientation.
    */
   get direction() {
-    return this.orientation == "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "Left" : "Top";
+    return this.orientation == index$1.NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
   }
   /**
    * Getter for the dimension to check based on current orientation.
    */
   get dimension() {
-    return this.orientation == "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "Width" : "Height";
+    return this.orientation == index$1.NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
   }
   /**
    * Set the `size` prop to all `z-navigation-tab` children.
@@ -106,9 +110,9 @@ const ZNavigationTabs = class {
   }
   render() {
     return (index.h(index.Host, { class: {
-        "interactive-2": this.size === "small" /* NavigationTabsSize.SMALL */,
-        "interactive-1": this.size !== "small" /* NavigationTabsSize.SMALL */,
-      }, scrollable: this.canNavigate }, this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, index.h("z-icon", { name: this.orientation === "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), index.h("nav", { role: "tablist", ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, index.h("slot", null)), this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, index.h("z-icon", { name: this.orientation === "horizontal" /* NavigationTabsOrientation.HORIZONTAL */ ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+        "interactive-2": this.size === index$1.NavigationTabsSize.SMALL,
+        "interactive-1": this.size !== index$1.NavigationTabsSize.SMALL,
+      }, scrollable: this.canNavigate }, this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, index.h("z-icon", { name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), index.h("nav", { role: "tablist", ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, index.h("slot", null)), this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, index.h("z-icon", { name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/z-notification.cjs.entry.js

@@ -11,11 +11,14 @@ const ZNotification = class {
     index.registerInstance(this, hostRef);
     this.notificationAction = index.createEvent(this, "notificationAction", 7);
     this.notificationClose = index.createEvent(this, "notificationClose", 7);
-    this.contenticonname = undefined;
-    this.actiontext = undefined;
-    this.type = undefined;
+    /** Enable close icon */
     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/cjs/z-offcanvas.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;z-index:1000;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{z-index:1010;display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
 
@@ -10,9 +11,16 @@ const ZOffcanvas = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.canvasOpenStatusChanged = index.createEvent(this, "canvasOpenStatusChanged", 7);
-    this.variant = "pushcontent" /* OffCanvasVariant.PUSHCONTENT */;
+    /**
+     * Offcanvas variant.
+     * Can be one of "overlay", "pushcontent"
+     * Default variant: pushcontent
+     */
+    this.variant = index$1.OffCanvasVariant.PUSHCONTENT;
+    /** open component. Default: false */
     this.open = false;
-    this.transitiondirection = "left" /* TransitionDirection.LEFT */;
+    /** open content transitioning in a specified direction left | right. Default: left */
+    this.transitiondirection = index$1.TransitionDirection.LEFT;
   }
   componentWillLoad() {
     this.handleOpenStatus();
@@ -25,7 +33,7 @@ const ZOffcanvas = class {
     if (this.open) {
       this.hostElement.style.display = "flex";
     }
-    else if (this.variant === "pushcontent" /* OffCanvasVariant.PUSHCONTENT */) {
+    else if (this.variant === index$1.OffCanvasVariant.PUSHCONTENT) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "hidden";
     }
@@ -34,7 +42,7 @@ const ZOffcanvas = class {
     if (this.hostElement.hasAttribute("open")) {
       this.hostElement.querySelector(`.canvas-content`).focus();
     }
-    else if (this.variant === "overlay" /* OffCanvasVariant.OVERLAY */) {
+    else if (this.variant === index$1.OffCanvasVariant.OVERLAY) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "initial";
     }

package/dist/cjs/z-otp.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
 
@@ -10,9 +11,8 @@ const ZOtp = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.otpChange = index.createEvent(this, "otpChange", 7);
+    /** Input number */
     this.inputNum = 6;
-    this.status = undefined;
-    this.message = undefined;
   }
   emitInputChange(value) {
     this.otpChange.emit({ value });
@@ -22,7 +22,7 @@ const ZOtp = class {
     this.otpRef = [...Array(this.inputNum)];
   }
   render() {
-    return (index.h("div", { class: "otp-container" }, index.h("div", { class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == "error" /* InputStatus.ERROR */ ? "error" : null, onKeyDown: (e) => {
+    return (index.h("div", { class: "otp-container" }, index.h("div", { class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
         if (e.keyCode > 47) {
           this.otpRef[i].value = "";
         }

package/dist/cjs/z-pagination-bar.cjs.entry.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 const hammer = require('./hammer-4f20813e.js');
-const utils = require('./utils-7c92be74.js');
+const utils = require('./utils-ce225fb3.js');
 require('./_commonjsHelpers-537d719a.js');
+require('./index-199cd650.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host>div{display:flex;height:48px;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:space-around}:host>div>z-icon{margin:calc(var(--space-unit) * 2) 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01)}:host>div>z-icon.disabled{color:var(--color-disabled01);cursor:default;fill:var(--color-disabled01);pointer-events:none}";
@@ -16,14 +17,14 @@ const ZPaginationBar = class {
     this.goToPage = index.createEvent(this, "goToPage", 7);
     this.changeStartPage = index.createEvent(this, "changeStartPage", 7);
     this.addPageToHistory = index.createEvent(this, "addPageToHistory", 7);
-    this.velocityConstantMultiplier = 2;
-    this.pages = undefined;
-    this.visiblepages = undefined;
+    /** current displayed page (mutable) */
     this.currentpage = 1;
+    /** initial page (mutable) */
     this.startpage = 1;
-    this.historyraw = undefined;
+    /** array of history of visited pages (mutable, optional) */
     this.listhistoryrow = [];
     this.currentPages = [];
+    this.velocityConstantMultiplier = 2;
     this.navigateRight = this.navigateRight.bind(this);
     this.navigateLeft = this.navigateLeft.bind(this);
     this.emitGoToPage = this.emitGoToPage.bind(this);

package/dist/cjs/z-pagination-page.cjs.entry.js

@@ -9,11 +9,13 @@ const stylesCss = ":host{display:inline-block;font-family:var(--font-family-sans
 const ZPaginationPage = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.pageid = undefined;
-    this.value = undefined;
+    /** selected status flag */
     this.isselected = false;
+    /** disabled status flag */
     this.isdisabled = false;
+    /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
     this.ariaLabel = "";
   }
   render() {

package/dist/cjs/z-pagination.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-icon01)}z-pagination *:disabled z-icon{fill:var(--color-disabled02)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-text02)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--color-surface03);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out, color 0.15s ease-out, border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out, font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-hover-surface);box-shadow:inset var(--shadow-focus-primary);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{background-color:var(--color-disabled01);color:var(--color-disabled02);cursor:default;pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button:focus-visible{border-bottom-color:var(--color-hover-light)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-text02);text-transform:uppercase}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface03)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--color-hover-surface)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-light)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}";
 
@@ -10,17 +11,24 @@ const ZPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.pageChanged = index.createEvent(this, "pageChanged", 7);
-    this.label = undefined;
+    /** Enable navigation arrows. */
     this.navArrows = true;
-    this.totalPages = undefined;
+    /** Number of pages to skip. */
     this.skip = 0;
+    /** Enable buttons to go to the first and last pages. */
     this.edges = false;
-    this.split = undefined;
-    this.visiblePages = undefined;
+    /** Current page. */
     this.currentPage = 1;
-    this.goToPage = undefined;
+    /**
+     * Internal visible pages variable.
+     * Needed to better handle conflicting props like `visiblePages` and `split`.
+     * This state will change based on props values and validation,
+     * keeping original `visiblePages` value intact.
+     */
     this._visiblePages = this.visiblePages;
+    /** Used to hides/change some functionalities on smaller screen sizes */
     this.isMobile = false;
+    /** Value of the go to page input */
     this.goToPageValue = null;
   }
   /**
@@ -185,7 +193,7 @@ const ZPagination = class {
         pagesChunks.map((chunk) => index.h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page)))))), this.goToPage && (index.h("form", { class: "mobile-go-to-page", onSubmit: (ev) => {
           ev.preventDefault();
           this.selectPage(this.goToPageValue);
-        } }, index.h("z-input", { class: "go-to-page-input", type: "number" /* InputType.NUMBER */, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+        } }, index.h("z-input", { class: "go-to-page-input", type: index$1.InputType.NUMBER, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
           this.goToPageValue = ev.target.value;
         }, placeholder: this.currentPage.toString(), hasclearicon: false }), index.h("span", null, `/${this.totalPages}`))), this.renderForwardButton()),
     ];
@@ -204,7 +212,7 @@ const ZPagination = class {
     if (this.isMobile) {
       return index.h(index.Host, null, this.renderMobile());
     }
-    return (index.h(index.Host, null, index.h("div", { class: "pagination-bar" }, this.label && index.h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), index.h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))), this.goToPage && (index.h("div", { class: "go-to-page" }, index.h("span", { class: "label body-5-sb" }, "Vai a pagina:"), index.h("div", { class: "inputs" }, index.h("z-input", { class: "go-to-page-input", type: "number" /* InputType.NUMBER */, min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
+    return (index.h(index.Host, null, index.h("div", { class: "pagination-bar" }, this.label && index.h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), index.h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))), this.goToPage && (index.h("div", { class: "go-to-page" }, index.h("span", { class: "label body-5-sb" }, "Vai a pagina:"), index.h("div", { class: "inputs" }, index.h("z-input", { class: "go-to-page-input", type: index$1.InputType.NUMBER, min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
         this.goToPageValue = ev.target.value;
       }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }), index.h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai"))))));
   }

package/dist/cjs/z-panel-elem.cjs.entry.js

@@ -9,15 +9,10 @@ const stylesCss = ":host{width:inherit;font-family:var(--dashboard-font);font-we
 const ZPanelElem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.elemid = undefined;
-    this.imgurl = undefined;
-    this.imgalt = undefined;
-    this.linkicon = undefined;
-    this.linklabel = undefined;
-    this.url = undefined;
+    /** link target (optional) */
     this.target = "_blank";
+    /** disabled status flag (optional) */
     this.isdisabled = false;
-    this.descrSlotName = undefined;
   }
   renderIcon() {
     if (this.isdisabled) {

package/dist/cjs/z-pocket_3.cjs.entry.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-7c92be74.js');
+const index$1 = require('./index-199cd650.js');
+const utils = require('./utils-ce225fb3.js');
 const hammer = require('./hammer-4f20813e.js');
 require('./breakpoints-88c4fd6c.js');
 require('./_commonjsHelpers-537d719a.js');
@@ -14,16 +15,16 @@ const ZPocket = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.pocketToggle = index.createEvent(this, "pocketToggle", 7);
-    this.pocketid = undefined;
-    this.status = "preview" /* PocketStatus.PREVIEW */;
+    /** pocket status */
+    this.status = index$1.PocketStatus.PREVIEW;
   }
   /** open z-pocket */
   async open() {
-    this.status = "open" /* PocketStatus.OPEN */;
+    this.status = index$1.PocketStatus.OPEN;
   }
   /** close z-pocket */
   async close() {
-    this.status = "closed" /* PocketStatus.CLOSED */;
+    this.status = index$1.PocketStatus.CLOSED;
   }
   emitPocketToggle(id, status) {
     this.pocketToggle.emit({ id, status });
@@ -31,12 +32,12 @@ const ZPocket = class {
   handlePocketHeaderClick(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
       switch (this.status) {
-        case "preview" /* PocketStatus.PREVIEW */:
-        case "closed" /* PocketStatus.CLOSED */:
-          this.status = "open" /* PocketStatus.OPEN */;
+        case index$1.PocketStatus.PREVIEW:
+        case index$1.PocketStatus.CLOSED:
+          this.status = index$1.PocketStatus.OPEN;
           break;
-        case "open" /* PocketStatus.OPEN */:
-          this.status = "closed" /* PocketStatus.CLOSED */;
+        case index$1.PocketStatus.OPEN:
+          this.status = index$1.PocketStatus.CLOSED;
           break;
       }
     }
@@ -44,10 +45,10 @@ const ZPocket = class {
   handlePocketHeaderPan(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
       if (e.detail.direction === "up") {
-        this.status = "open" /* PocketStatus.OPEN */;
+        this.status = index$1.PocketStatus.OPEN;
       }
       else if (e.detail.direction === "down") {
-        this.status = "closed" /* PocketStatus.CLOSED */;
+        this.status = index$1.PocketStatus.CLOSED;
       }
     }
   }
@@ -77,8 +78,8 @@ const stylesCss$1 = ":host{display:block;width:100%;box-sizing:border-box;font-f
 const ZPocketBody = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.pocketid = undefined;
-    this.status = "preview" /* PocketStatus.PREVIEW */;
+    /** pocket status */
+    this.status = index$1.PocketStatus.PREVIEW;
   }
   handlePocketToggle(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
@@ -98,7 +99,6 @@ const ZPocketHeader = class {
     index.registerInstance(this, hostRef);
     this.pocketHeaderClick = index.createEvent(this, "pocketHeaderClick", 7);
     this.pocketHeaderPan = index.createEvent(this, "pocketHeaderPan", 7);
-    this.pocketid = undefined;
     this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);
   }
   emitPocketHeaderClick() {

package/dist/cjs/z-popover-deprecated.cjs.entry.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-7c92be74.js');
+const index$1 = require('./index-199cd650.js');
+const utils = require('./utils-ce225fb3.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ".sc-z-popover-deprecated-h{position:relative;display:inline-block;font-family:var(--dashboard-font);font-weight:var(--font-rg);--shadow-arrow-color:rgb(66 69 72 / 20%);--shadow-arrow-below-color:rgb(66 69 72 / 10%)}.popover-content-container.sc-z-popover-deprecated{position:absolute;z-index:999;min-width:64px;min-height:32px;box-sizing:border-box;visibility:hidden}.popover-content-container.visible.sc-z-popover-deprecated{visibility:visible}.popover-content-container.border-radius-none.sc-z-popover-deprecated{border-radius:0}.popover-content-container.border-radius-small.sc-z-popover-deprecated{border-radius:var(--border-radius-small)}.popover-content-container.border-radius-medium.sc-z-popover-deprecated{border-radius:var(--border-radius)}.popover-content-container.shadow-1.sc-z-popover-deprecated{box-shadow:var(--shadow-1)}.popover-content-container.shadow-2.sc-z-popover-deprecated{box-shadow:var(--shadow-2)}.popover-content-container.shadow-3.sc-z-popover-deprecated{box-shadow:var(--shadow-3)}.popover-content-container.shadow-4.sc-z-popover-deprecated{box-shadow:var(--shadow-4)}.popover-content-container.shadow-6.sc-z-popover-deprecated{box-shadow:var(--shadow-6)}.popover-content-container.shadow-8.sc-z-popover-deprecated{box-shadow:var(--shadow-8)}.popover-content-container.shadow-12.sc-z-popover-deprecated{box-shadow:var(--shadow-12)}.popover-content-container.shadow-16.sc-z-popover-deprecated{box-shadow:var(--shadow-16)}.popover-content-container.shadow-24.sc-z-popover-deprecated{box-shadow:var(--shadow-24)}.popover-content-container.after-down.sc-z-popover-deprecated{top:0;left:calc(100% + var(--space-unit))}.popover-content-container.after-center.sc-z-popover-deprecated{top:50%;left:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.after-up.sc-z-popover-deprecated{bottom:0;left:calc(100% + var(--space-unit))}.popover-content-container.below-right.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));left:0}.popover-content-container.below-center.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));left:50%;transform:translateX(-50%)}.popover-content-container.below-left.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));right:0}.popover-content-container.before-down.sc-z-popover-deprecated{top:0;right:calc(100% + var(--space-unit))}.popover-content-container.before-center.sc-z-popover-deprecated{top:50%;right:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.before-up.sc-z-popover-deprecated{right:calc(100% + var(--space-unit));bottom:0}.popover-content-container.above-right.sc-z-popover-deprecated{bottom:calc(100% + var(--space-unit));left:0}.popover-content-container.above-center.sc-z-popover-deprecated{bottom:calc(100% + var(--space-unit));left:50%;transform:translateX(-50%)}.popover-content-container.above-left.sc-z-popover-deprecated{right:0;bottom:calc(100% + var(--space-unit))}.popover-content-container.sc-z-popover-deprecated::before{position:absolute;z-index:-1;display:none;width:8px;height:8px;background-color:inherit;content:\"\";transform:rotate(45deg)}.popover-content-container.after-down.sc-z-popover-deprecated::before{top:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-center.sc-z-popover-deprecated::before{top:calc(50% - 4px);left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-up.sc-z-popover-deprecated::before{bottom:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.below-right.sc-z-popover-deprecated::before{top:-4px;left:12px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-center.sc-z-popover-deprecated::before{top:-4px;left:calc(50% - 4px);box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-left.sc-z-popover-deprecated::before{top:-4px;right:12px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.before-down.sc-z-popover-deprecated::before{top:12px;right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-center.sc-z-popover-deprecated::before{top:calc(50% - 4px);right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-up.sc-z-popover-deprecated::before{right:-4px;bottom:12px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-right.sc-z-popover-deprecated::before{bottom:-4px;left:12px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-center.sc-z-popover-deprecated::before{bottom:-4px;left:calc(50% - 4px);box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-left.sc-z-popover-deprecated::before{right:12px;bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.show-arrow.sc-z-popover-deprecated::before{display:block}";
@@ -15,11 +16,17 @@ const ZPopoverDeprecated = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.triggerClick = index.createEvent(this, "triggerClick", 7);
-    this.position = "after-up" /* PopoverPosition.AFTER_UP */;
+    /** [optional] Popover position */
+    this.position = index$1.PopoverPosition.AFTER_UP;
+    /** [optional] Background color token for popover */
     this.backgroundColor = "color-white";
-    this.borderRadius = "small" /* PopoverBorderRadius.SMALL */;
-    this.boxShadow = "shadow-1" /* PopoverShadow.SHADOW_1 */;
+    /** [optional] Border radius token for popover */
+    this.borderRadius = index$1.PopoverBorderRadius.SMALL;
+    /** [optional] Box shadow token for popover */
+    this.boxShadow = index$1.PopoverShadow.SHADOW_1;
+    /** [optional] Show or hide arrow */
     this.showArrow = false;
+    /** [optional] Sets padding for Popover container */
     this.padding = "8px";
     this.isVisible = false;
     this.popoverPosition = this.position;
@@ -76,7 +83,7 @@ const ZPopoverDeprecated = class {
         firstSide = "after";
       }
     }
-    this.popoverPosition = `${firstSide}-${secondSide}`;
+    this.popoverPosition = index$1.PopoverPosition[`${firstSide}-${secondSide}`];
     this.isVisible = true;
   }
   closePopover() {
@@ -84,7 +91,7 @@ const ZPopoverDeprecated = class {
     this.isVisible = false;
   }
   closePopoverWithKeyboard(e) {
-    if (e.key === "Escape" /* KeyboardCode.ESC */) {
+    if (e.key === index$1.KeyboardCode.ESC) {
       this.closePopover();
     }
   }
@@ -94,7 +101,7 @@ const ZPopoverDeprecated = class {
     event.stopPropagation();
   }
   handleKeyDown(event) {
-    if (event.code === "Enter" /* KeyboardCode.ENTER */) {
+    if (event.code === index$1.KeyboardCode.ENTER) {
       this.isVisible ? this.closePopover() : this.openPopover();
     }
   }
@@ -107,7 +114,7 @@ const ZPopoverDeprecated = class {
   }
   render() {
     return (index.h(index.Host, { onKeyDown: this.handleKeyDown }, index.h("div", { tabindex: "0", onClick: (event) => this.handleClick(event), onKeyDown: (event) => {
-        if (event.key === "Enter" /* KeyboardCode.ENTER */) {
+        if (event.key === index$1.KeyboardCode.ENTER) {
           this.handleClick(event);
         }
       } }, index.h("slot", { name: "trigger" })), index.h("div", { ref: (e) => (this.popoverElem = e), class: {

package/dist/cjs/z-popover.cjs.entry.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-7c92be74.js');
+const index$1 = require('./index-199cd650.js');
+const utils = require('./utils-ce225fb3.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-text01);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);align-items:center;justify-content:center;padding:var(--z-popover-padding);background:var(--z-popover-theme--surface);border-radius:var(--border-radius-small);color:var(--z-popover-theme--text);fill:currentcolor;filter:var(--z-popover-shadow-filter);font-family:var(--font-family-sans);text-align:center}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}::slotted(*){overflow:auto;flex:1 auto}";
@@ -94,16 +95,27 @@ const ZPopover = class {
     index.registerInstance(this, hostRef);
     this.positionChange = index.createEvent(this, "positionChange", 7);
     this.openChange = index.createEvent(this, "openChange", 7);
-    this.position = "auto" /* PopoverPositions.AUTO */;
+    /** Popover position. */
+    this.position = index$1.PopoverPositions.AUTO;
+    /**
+     * The open state of the popover.
+     */
     this.open = false;
-    this.bindTo = undefined;
+    /**
+     * Whether to show popover's arrow.
+     */
     this.showArrow = false;
+    /**
+     * Whether to center the popup on the main side (according to "position").
+     */
     this.center = false;
+    /**
+     * Whether the popover should be closed when the user clicks outside of it or hit "ESC".
+     */
     this.closable = true;
-    this.currentPosition = undefined;
   }
   closePopoverWithKeyboard(e) {
-    if (this.closable && e.key === "Escape" /* KeyboardCode.ESC */) {
+    if (this.closable && e.key === index$1.KeyboardCode.ESC) {
       this.open = false;
     }
   }
@@ -119,22 +131,8 @@ const ZPopover = class {
     }
   }
   validatePosition(newValue) {
-    // FIXME: avoid this check and treat "AUTO" as the default case when modifying popover position
-    if (newValue &&
-      newValue !== "auto" /* PopoverPositions.AUTO */ &&
-      newValue !== "bottom" /* PopoverPositions.BOTTOM */ &&
-      newValue !== "bottom_left" /* PopoverPositions.BOTTOM_LEFT */ &&
-      newValue !== "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */ &&
-      newValue !== "left" /* PopoverPositions.LEFT */ &&
-      newValue !== "left_bottom" /* PopoverPositions.LEFT_BOTTOM */ &&
-      newValue !== "left_top" /* PopoverPositions.LEFT_TOP */ &&
-      newValue !== "right" /* PopoverPositions.RIGHT */ &&
-      newValue !== "right_bottom" /* PopoverPositions.RIGHT_BOTTOM */ &&
-      newValue !== "right_top" /* PopoverPositions.RIGHT_TOP */ &&
-      newValue !== "top" /* PopoverPositions.TOP */ &&
-      newValue !== "top_left" /* PopoverPositions.TOP_LEFT */ &&
-      newValue !== "top_right" /* PopoverPositions.TOP_RIGHT */) {
-      this.position = "auto" /* PopoverPositions.AUTO */;
+    if (newValue && !Object.values(index$1.PopoverPositions).includes(newValue)) {
+      this.position = index$1.PopoverPositions.AUTO;
     }
     this.currentPosition = this.position;
     this.positionChange.emit({ position: this.currentPosition });
@@ -200,28 +198,28 @@ const ZPopover = class {
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.currentPosition;
     const positions = [];
-    if (this.position === "auto" /* PopoverPositions.AUTO */) {
+    if (this.position === index$1.PopoverPositions.AUTO) {
       /**
        * The `AUTO` position tries to place the popover in the 'safest' area,
        * where there's more space available.
        */
       if (availableLeft / availableWidth > 0.6) {
-        positions.push("left" /* PopoverPositions.LEFT */);
+        positions.push(index$1.PopoverPositions.LEFT);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push("right" /* PopoverPositions.RIGHT */);
+        positions.push(index$1.PopoverPositions.RIGHT);
       }
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift("top" /* PopoverPositions.TOP */);
+        positions.unshift(index$1.PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push("top" /* PopoverPositions.TOP */);
+        positions.push(index$1.PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift("bottom" /* PopoverPositions.BOTTOM */);
+        positions.unshift(index$1.PopoverPositions.BOTTOM);
       }
       else {
-        positions.push("bottom" /* PopoverPositions.BOTTOM */);
+        positions.push(index$1.PopoverPositions.BOTTOM);
       }
       position = positions.join("_");
     }
@@ -233,17 +231,17 @@ const ZPopover = class {
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
     const offsetModifier = this.center ? 0.5 : 0;
     const sizeModifier = this.center ? 0.5 : 0;
-    if (position === "top" /* PopoverPositions.TOP */ || position === "top_right" /* PopoverPositions.TOP_RIGHT */) {
+    if (position === index$1.PopoverPositions.TOP || position === index$1.PopoverPositions.TOP_RIGHT) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableTop}px`;
-      if (position === "top_right" /* PopoverPositions.TOP_RIGHT */) {
+      if (position === index$1.PopoverPositions.TOP_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === "top_left" /* PopoverPositions.TOP_LEFT */) {
+    else if (position === index$1.PopoverPositions.TOP_LEFT) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = `${offsetBottom + boundingRect.height}px`;
@@ -251,17 +249,17 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableTop}px`;
     }
-    else if (position === "bottom" /* PopoverPositions.BOTTOM */ || position === "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */) {
+    else if (position === index$1.PopoverPositions.BOTTOM || position === index$1.PopoverPositions.BOTTOM_RIGHT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = "auto";
       style.bottom = "auto";
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableBottom}px`;
-      if (position === "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */) {
+      if (position === index$1.PopoverPositions.BOTTOM_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === "bottom_left" /* PopoverPositions.BOTTOM_LEFT */) {
+    else if (position === index$1.PopoverPositions.BOTTOM_LEFT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = "auto";
@@ -269,7 +267,7 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom}px`;
     }
-    else if (position === "right" /* PopoverPositions.RIGHT */ || position === "right_bottom" /* PopoverPositions.RIGHT_BOTTOM */) {
+    else if (position === index$1.PopoverPositions.RIGHT || position === index$1.PopoverPositions.RIGHT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = "auto";
       style.bottom = "auto";
@@ -277,7 +275,7 @@ const ZPopover = class {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === "right_top" /* PopoverPositions.RIGHT_TOP */) {
+    else if (position === index$1.PopoverPositions.RIGHT_TOP) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -285,7 +283,7 @@ const ZPopover = class {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === "left" /* PopoverPositions.LEFT */ || position === "left_bottom" /* PopoverPositions.LEFT_BOTTOM */) {
+    else if (position === index$1.PopoverPositions.LEFT || position === index$1.PopoverPositions.LEFT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = "auto";
@@ -293,7 +291,7 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === "left_top" /* PopoverPositions.LEFT_TOP */) {
+    else if (position === index$1.PopoverPositions.LEFT_TOP) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;