@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

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

@@ -0,0 +1 @@
+{"file":"z-otp.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,syBAAsyB,CAAC;AACzzB,mBAAe,SAAS;;MCOX,IAAI;;;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACzC;IAED,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAC,eAAe,IACxBA,kEAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpBA,mBACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAIC,mBAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB;gBAC1B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;iBAC3B;aACF,EACD,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;iBACrD;aACF,EACD,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;aACzC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE,EACND,8EACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,EACN;KACH;;;;;;","names":["h","InputStatus"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-default-error);\n  background-color: var(--color-inverse-error);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,32 +1,28 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
-var index$1 = require('./index-wGaSHN1_.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);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-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}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(--z-pagination-background-color);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,     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-surface01);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{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);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[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column}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-surface02)}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(--z-pagination-background-color-hover)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@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)}}`;
+const index = require('./index-96af6326.js');
+const index$1 = require('./index-e30d0503.js');
+
+const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);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-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}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(--z-pagination-background-color);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-surface01);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{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);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[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column}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-surface02)}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(--z-pagination-background-color-hover)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@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)}}";
+const ZPaginationStyle0 = stylesCss;
 
 const ZPagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.pageChanged = index.createEvent(this, "pageChanged", 7);
-        /** Enable navigation arrows. */
+        this.label = undefined;
         this.navArrows = true;
-        /** Number of pages to skip. */
+        this.totalPages = undefined;
         this.skip = 0;
-        /** Enable buttons to go to the first and last pages. */
         this.edges = false;
-        /** Current page. */
+        this.split = undefined;
+        this.visiblePages = undefined;
         this.currentPage = 1;
-        /**
-         * 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.goToPage = undefined;
         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;
     }
     /**
@@ -219,20 +215,14 @@ const ZPagination = class {
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "_visiblePages": [{
-                "setPagesContainerWidth": 0
-            }],
-        "visiblePages": [{
-                "setVisiblePages": 0
-            }],
-        "currentPage": [{
-                "onPageChanged": 0
-            }],
-        "split": [{
-                "onSplitChanged": 0
-            }]
+        "_visiblePages": ["setPagesContainerWidth"],
+        "visiblePages": ["setVisiblePages"],
+        "currentPage": ["onPageChanged"],
+        "split": ["onSplitChanged"]
     }; }
 };
-ZPagination.style = stylesCss();
+ZPagination.style = ZPaginationStyle0;
 
 exports.z_pagination = ZPagination;
+
+//# sourceMappingURL=z-pagination.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-pagination.entry.cjs.js","mappings":"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","names":["h","InputType","Host"],"sources":["src/components/z-pagination/styles.css?tag=z-pagination","src/components/z-pagination/index.tsx"],"sourcesContent":["z-pagination {\n  --z-pagination--page-button-width: 64px;\n  --z-pagination--pages-container-max-width: 100%;\n  --z-pagination-background-color: var(--color-background);\n  --z-pagination-background-color-hover: var(--color-surface01);\n\n  display: flex;\n  max-width: 100%;\n  flex-flow: column wrap;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);\n}\n\nz-pagination,\nz-pagination * {\n  box-sizing: border-box;\n}\n\nz-pagination button {\n  height: 100%;\n}\n\nz-pagination z-icon {\n  fill: var(--color-primary01-icon);\n}\n\nz-pagination *:disabled z-icon {\n  fill: var(--color-disabled03);\n}\n\nz-pagination .page-label {\n  margin-right: calc(var(--space-unit) * 3);\n  color: var(--color-default-text);\n}\n\nz-pagination .pagination-bar {\n  display: flex;\n  max-width: 100%;\n  height: 48px;\n  align-items: center;\n}\n\nz-pagination .pagination-bar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  margin: 0;\n  background-color: var(--z-pagination-background-color);\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-family: inherit;\n  font-weight: inherit;\n  transition:\n    background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out;\n}\n\nz-pagination .pagination-bar button:focus-visible {\n  background-color: var(--color-surface01);\n  outline: none;\n}\n\nz-pagination .pagination-bar .pagination-button {\n  padding: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\nz-pagination .pagination-bar .navigation-button {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);\n}\n\nz-pagination .pagination-bar .pagination-button:disabled,\nz-pagination .pagination-bar .navigation-button:disabled {\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  pointer-events: none;\n}\n\nz-pagination .pagination-bar .page-button,\nz-pagination .pagination-bar .ellipsis-button {\n  width: var(--z-pagination--page-button-width);\n}\n\nz-pagination .pages-container {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  height: 100%;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scroll-snap-align: center;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-pagination .pages-container::-webkit-scrollbar {\n  display: none;\n}\n\nz-pagination .pages-chunk {\n  display: flex;\n  scroll-snap-align: center;\n}\n\nz-pagination .pagination-bar .page-button {\n  padding-top: var(--border-size-large) solid transparent;\n  border-bottom: var(--border-size-large) solid transparent;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n}\n\nz-pagination .pagination-bar .page-button[data-current] {\n  border-bottom-color: var(--color-primary01);\n  font-size: var(--font-size-7);\n}\n\nz-pagination .go-to-page {\n  display: flex;\n  flex-direction: column;\n}\n\nz-pagination .go-to-page .inputs {\n  display: flex;\n  column-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .inputs z-input {\n  width: calc(var(--space-unit) * 11);\n}\n\nz-pagination .go-to-page .inputs z-input input,\nz-pagination .mobile-go-to-page z-input input {\n  padding: 0 calc(var(--space-unit) * 1.5) !important;\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page {\n  display: flex;\n  height: 100%;\n  flex: 1 auto;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--color-surface02);\n}\n\nz-pagination .mobile-go-to-page z-input {\n  width: var(--z-pagination--page-button-width);\n  margin-right: var(--space-unit);\n}\n\nz-pagination .mobile-go-to-page z-input input {\n  text-align: center;\n}\n\nz-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,\nz-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page > span {\n  font-size: var(--font-size-2);\n}\n\n@media (hover: hover) {\n  z-pagination .pagination-bar button:hover {\n    background-color: var(--z-pagination-background-color-hover);\n  }\n\n  z-pagination .pagination-bar .page-button:hover {\n    border-bottom-color: var(--color-hover-primary);\n    color: var(--color-hover-primary);\n  }\n}\n\n@media (min-width: 768px) {\n  z-pagination {\n    --z-pagination--page-button-width: 88px;\n\n    flex-direction: row;\n    align-items: flex-end;\n  }\n\n  z-pagination .pages-container {\n    max-width: var(--z-pagination--pages-container-max-width);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background\n * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01\n */\n@Component({\n  tag: \"z-pagination\",\n  styleUrl: \"styles.css\",\n})\nexport class ZPagination {\n  @Element() host: HTMLZPaginationElement;\n\n  /** Pagination label placed before the bar. */\n  @Prop()\n  label?: string;\n\n  /** Enable navigation arrows. */\n  @Prop()\n  navArrows = true;\n\n  /** Total number of pages. Required. */\n  @Prop()\n  totalPages!: number;\n\n  /** Number of pages to skip. */\n  @Prop()\n  skip = 0;\n\n  /** Enable buttons to go to the first and last pages. */\n  @Prop()\n  edges = false;\n\n  /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n  @Prop()\n  split?: number;\n\n  /** Number of pages to show at a time. If not set, all pages will be shown. */\n  @Prop()\n  visiblePages?: number;\n\n  /** Current page. */\n  @Prop({mutable: true})\n  currentPage = 1;\n\n  /** Whether to show \"go to page\" feature. */\n  @Prop()\n  goToPage: boolean;\n\n  /**\n   * Internal visible pages variable.\n   * Needed to better handle conflicting props like `visiblePages` and `split`.\n   * This state will change based on props values and validation,\n   * keeping original `visiblePages` value intact.\n   */\n  @State()\n  private _visiblePages = this.visiblePages;\n\n  /** Used to hides/change some functionalities on smaller screen sizes */\n  @State()\n  isMobile = false;\n\n  /** Value of the go to page input */\n  @State()\n  goToPageValue = null;\n\n  /** Event emitted when the current page has changed. */\n  @Event()\n  pageChanged: EventEmitter;\n\n  /**\n   * Set the max width of the pages container.\n   */\n  @Watch(\"_visiblePages\")\n  setPagesContainerWidth(): void {\n    if (!this._visiblePages || this.split) {\n      this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n      return;\n    }\n\n    const pagesContainerStyle = window.getComputedStyle(this.host);\n    const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n    this.host.style.setProperty(\n      \"--z-pagination--pages-container-max-width\",\n      `calc(${pageButtonWidth} * ${this._visiblePages})`\n    );\n  }\n\n  /**\n   * Set visible pages.\n   * Ensure that the visible pages are always <= the total pages.\n   * If `visiblePages` isn't set, fallback to the total pages.\n   */\n  @Watch(\"visiblePages\")\n  setVisiblePages(): void {\n    this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n  }\n\n  /**\n   * On page changed.\n   * @emits pageChanged\n   */\n  @Watch(\"currentPage\")\n  onPageChanged(): void {\n    this.pageChanged.emit(this.currentPage);\n    this.scrollToPage();\n  }\n\n  /**\n   * On split changed.\n   * Empty `edges` value. The split feature wins over the pages chunks and edges.\n   */\n  @Watch(\"split\")\n  onSplitChanged(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n  }\n\n  /**\n   * Hide stuff on mobile.\n   */\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  onResize(): void {\n    this.setMobile();\n  }\n\n  /**\n   * Set functionalities according to screen size.\n   */\n  private setMobile(): void {\n    const mobileMediaQuery = \"screen and (max-width: 767px)\";\n    this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n  }\n\n  /**\n   * Get a list of pages chunks, each of `visiblePages` length.\n   * @returns {number[][]}\n   */\n  private getPagesChunks(): number[][] {\n    // array of numbers from 1 to `totalPages`\n    const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n    const chunks = [];\n    const chunksCount = Math.ceil(pages.length / this._visiblePages);\n    for (let index = 0; index < chunksCount; index++) {\n      chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n    }\n\n    return chunks;\n  }\n\n  /**\n   * Scroll to the left the chunk of pages containing the current page.\n   */\n  private scrollToPage(): void {\n    const container = this.host.querySelector(\".pages-container\") as HTMLElement;\n    const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n    const navBtn = this.host.querySelector(\".navigation-button\") as HTMLElement;\n\n    if (!pageBtn || !container) {\n      return;\n    }\n\n    const containerWidth = container.getBoundingClientRect().width;\n    const pageBtnWidth = pageBtn.getBoundingClientRect().width;\n    const navBtnWidth = navBtn?.getBoundingClientRect()?.width ?? 0;\n\n    container.scrollLeft = this.currentPage * pageBtnWidth - navBtnWidth - containerWidth / 2;\n  }\n\n  /**\n   * Select a page.\n   * Do validations on the passed value before assigning it to `currentPage`.\n   * @param {number} page Page number to set\n   */\n  private selectPage(page): void {\n    this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n  }\n\n  /**\n   * Render page number button.\n   * @param {number} page Page number to render\n   * @returns {HTMLButtonElement}\n   */\n  private renderPage(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"page-button\"\n        type=\"button\"\n        aria-current={this.currentPage === page ? \"page\" : \"false\"}\n        title={`Vai alla pagina ${page}`}\n        data-page={page}\n        data-current={this.currentPage === page}\n        onClick={() => this.selectPage(page)}\n      >\n        {page}\n      </button>\n    );\n  }\n\n  /**\n   * Render split button.\n   * @param {number} page Page to select on click.\n   * @returns {HTMLButtonElement}\n   */\n  private renderEllipsisButton(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"ellipsis-button\"\n        type=\"button\"\n        title={`Vai alla pagina ${page}`}\n        onClick={() => this.selectPage(page)}\n      >\n        …\n      </button>\n    );\n  }\n\n  /**\n   * Render chunked page buttons.\n   * @returns {HTMLDivElement[]}\n   */\n  private renderPages(): HTMLDivElement[] {\n    const pagesChunks = this.getPagesChunks();\n    if (pagesChunks.length <= 0) {\n      return;\n    }\n\n    return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n  }\n\n  /**\n   * Render page buttons when split feature is enabled.\n   * @returns {HTMLButtonElement[]}\n   */\n  private renderSplitPages(): HTMLButtonElement[] {\n    // left and right split pages, current page, first and last page, left and right ellipsis button\n    if (this.totalPages <= this.split * 2 + 5) {\n      // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n      return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n    }\n\n    if (this.currentPage <= this.split * 2 + 2) {\n      // Render first (2 * split + 3) pages, ellipsis, then last page.\n      return [\n        ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n        this.renderEllipsisButton(this.split * 2 + 4),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n      // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n      return [\n        this.renderPage(1),\n        this.renderEllipsisButton(this.currentPage - this.split - 1),\n        ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n        this.renderEllipsisButton(this.currentPage + this.split + 1),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    // Render first page, ellipsis, then last (2 * split + 3) pages.\n    return [\n      this.renderPage(1),\n      this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n      ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n    ];\n  }\n\n  private renderBackButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla pagina precedente\"\n        disabled={this.currentPage === 1}\n        onClick={() => this.selectPage(this.currentPage - 1)}\n      >\n        <z-icon name=\"chevron-left\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderForwardButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla prossima pagina\"\n        disabled={this.currentPage === this.totalPages}\n        onClick={() => this.selectPage(this.currentPage + 1)}\n      >\n        <z-icon name=\"chevron-right\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderMobile(): HTMLElement[] {\n    const pagesChunks = this.getPagesChunks();\n\n    return [\n      this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n      <div class=\"pagination-bar\">\n        {this.renderBackButton()}\n\n        {!this.goToPage && (\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {pagesChunks.length > 0 &&\n              pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n          </div>\n        )}\n\n        {this.goToPage && (\n          <form\n            class=\"mobile-go-to-page\"\n            onSubmit={(ev) => {\n              ev.preventDefault();\n              this.selectPage(this.goToPageValue);\n            }}\n          >\n            <z-input\n              class=\"go-to-page-input\"\n              type={InputType.NUMBER}\n              min={1}\n              max={this.totalPages}\n              message={false}\n              onInput={(ev: InputEvent) => {\n                this.goToPageValue = (ev.target as HTMLZInputElement).value;\n              }}\n              placeholder={this.currentPage.toString()}\n              hasclearicon={false}\n            ></z-input>\n            <span>{`/${this.totalPages}`}</span>\n          </form>\n        )}\n\n        {this.renderForwardButton()}\n      </div>,\n    ];\n  }\n\n  componentDidLoad(): void {\n    this.setVisiblePages();\n  }\n\n  componentDidRender(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n\n    this.setPagesContainerWidth();\n    this.setMobile();\n    this.scrollToPage();\n  }\n\n  render(): HTMLZPaginationElement {\n    if (this.isMobile) {\n      return <Host>{this.renderMobile()}</Host>;\n    }\n\n    return (\n      <Host>\n        <div class=\"pagination-bar\">\n          {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title=\"Vai alla pagina 1\"\n              disabled={this.currentPage === 1}\n              onClick={() => this.selectPage(1)}\n            >\n              Pagina 1\n            </button>\n          )}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage - this.skip}`}\n              disabled={this.currentPage <= this.skip}\n              onClick={() => this.selectPage(this.currentPage - this.skip)}\n            >\n              -{this.skip}\n            </button>\n          )}\n\n          {this.navArrows && this.renderBackButton()}\n\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {this.split ? this.renderSplitPages() : this.renderPages()}\n          </div>\n\n          {this.navArrows && this.renderForwardButton()}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage + this.skip}`}\n              disabled={this.currentPage > this.totalPages - this.skip}\n              onClick={() => this.selectPage(this.currentPage + this.skip)}\n            >\n              +{this.skip}\n            </button>\n          )}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.totalPages}`}\n              disabled={this.currentPage === this.totalPages}\n              onClick={() => this.selectPage(this.totalPages)}\n            >\n              Pagina {this.totalPages}\n            </button>\n          )}\n        </div>\n        {this.goToPage && (\n          <div class=\"go-to-page\">\n            <span class=\"z-label body-5-sb\">Vai a pagina:</span>\n            <div class=\"inputs\">\n              <z-input\n                class=\"go-to-page-input\"\n                type={InputType.NUMBER}\n                min={1}\n                max={this.totalPages}\n                message={false}\n                placeholder=\"2\"\n                hasclearicon={false}\n                onInput={(ev: InputEvent) => {\n                  this.goToPageValue = (ev.target as HTMLZInputElement).value;\n                }}\n                onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n              ></z-input>\n              <z-button\n                disabled={!this.goToPageValue}\n                title=\"Vai alla pagina inserita\"\n                onClick={() => this.selectPage(this.goToPageValue)}\n              >\n                vai\n              </z-button>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,27 +1,37 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `.sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}`;
+const index = require('./index-96af6326.js');
+
+const stylesCss = ".sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}";
+const ZPanelElemStyle0 = stylesCss;
 
 const ZPanelElem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /** 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;
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (index.h("div", { key: 'bf6057103a8e781435017171f363f109af47c187', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { key: 'e0eece1dc3fff40916d2e84e6ab2ffd8ad93cc46', "aria-hidden": "true", class: "panel-elem-icon" }, index.h("img", { key: '1283e1f34165b450f80a60e1c34b39f84f161e1d', src: this.imgurl, alt: this.imgalt }))), index.h("div", { key: '57e1b5dbd8050d48ad049789994ab7180d257bef', class: "panel-elem-link" }, index.h("a", { key: 'df2dbff9ef103b387ebc11226ad10446ee4b5426', class: {
+        return (index.h("div", { key: '5d734919b0fd927095c2e65ff1200ed550e48bd2', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { key: '3d315fef58dfe7ecf601ade8f1652e447fdbe636', "aria-hidden": "true", class: "panel-elem-icon" }, index.h("img", { key: '47f8a1c400949b67c984d25c5bdf9f20ee3d846b', src: this.imgurl, alt: this.imgalt }))), index.h("div", { key: '9757e879ebe255ccdbdd815c7404a6cfe9f9cb1e', class: "panel-elem-link" }, index.h("a", { key: '4ee9897a9875081e871e4a72d7cdd9c6df23f6e1', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { key: '55cec9fbbe2f357fcd5c0438eb1b1deeb3b690db', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { key: '3dddbd3a8291ef131214a44ff5e7297c7b7117b1', class: "panel-elem-desc" }, index.h("slot", { key: '6c0b10c119536f938d4d6e64fb2ba75af80a5935', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { key: 'b651e1ab06b937189e46634c0a91470afcde9168', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { key: '5ab6f6ba7f8f3f50a3018b56b7ff3ea75f7e5aa5', class: "panel-elem-desc" }, index.h("slot", { key: 'c4d1f5928e8be8f25e36f1a3bf9a33f603b37148', name: this.descrSlotName })))));
     }
 };
-ZPanelElem.style = stylesCss();
+ZPanelElem.style = ZPanelElemStyle0;
 
 exports.z_panel_elem = ZPanelElem;
+
+//# sourceMappingURL=z-panel-elem.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-panel-elem.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2zBAA2zB,CAAC;AAC90B,yBAAe,SAAS;;MCUX,UAAU;;;;;;;;;sBA2BH,QAAQ;0BAIH,KAAK;;;IAM5B,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QAE9C,QACEA,kEAAK,KAAK,EAAC,sBAAsB,IAC9B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,MAC1BA,iFACc,MAAM,EAClB,KAAK,EAAC,iBAAiB,IAEvBA,kEACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,CACE,CACP,EACDA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,gEACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,iBAAiB,EAAE,IAAI,CAAC,UAAU;gBAClC,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI;aACpB,EACD,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,qEACE,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,GACX,EACT,IAAI,CAAC,SAAS,CACb,CACA,EACL,IAAI,CAAC,aAAa,KACjBA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,mEAAM,IAAI,EAAE,IAAI,CAAC,aAAa,GAAI,CAC9B,CACP,CACG,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/z-panel-elem/styles.css?tag=z-panel-elem&encapsulation=scoped","src/components/z-panel-elem/index.tsx"],"sourcesContent":[":host {\n  width: inherit;\n  font-family: var(--font-family sans);\n  font-weight: var(--font-rg);\n}\n\n.panel-elem-container {\n  width: 100%;\n}\n\n.panel-elem-icon {\n  margin: auto calc(var(--space-unit) * 3);\n}\n\n.panel-elem-icon img {\n  display: block;\n  max-width: 96px;\n  height: 32px;\n  margin: auto;\n  object-fit: contain;\n}\n\n.panel-elem-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--space-unit) auto 0;\n  border-radius: var(--border-no-radius);\n  font-size: 12px;\n}\n\n.panel-elem-link > a.z-link {\n  padding: calc(var(--space-unit) * 0.5) 0;\n  font-weight: var(--font-sb);\n}\n\n.panel-elem-desc {\n  padding-top: var(--space-unit);\n  margin: 0;\n  letter-spacing: 0.16px;\n  text-align: center;\n}\n\na > z-icon {\n  margin-right: var(--space-unit);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot `descrSlotName` - description content\n */\n@Component({\n  tag: \"z-panel-elem\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZPanelElem {\n  /** html element id (optional) */\n  @Prop()\n  elemid?: string;\n\n  /** image url source (optional) */\n  @Prop()\n  imgurl?: string;\n\n  /** alternative image text (optional) */\n  @Prop()\n  imgalt?: string;\n\n  /** icon link name (optional) */\n  @Prop()\n  linkicon?: string;\n\n  /** link label text*/\n  @Prop()\n  linklabel: string;\n\n  /** link url */\n  @Prop()\n  url: string;\n\n  /** link target (optional) */\n  @Prop()\n  target?: string = \"_blank\";\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** name of slot container (optional) */\n  @Prop()\n  descrSlotName?: string;\n\n  render(): HTMLDivElement {\n    const elemId = this.elemid ? this.elemid : \"\";\n\n    return (\n      <div class=\"panel-elem-container\">\n        {(this.imgurl || this.imgalt) && (\n          <div\n            aria-hidden=\"true\"\n            class=\"panel-elem-icon\"\n          >\n            <img\n              src={this.imgurl}\n              alt={this.imgalt}\n            />\n          </div>\n        )}\n        <div class=\"panel-elem-link\">\n          <a\n            class={{\n              \"z-link\": true,\n              \"z-link-disabled\": this.isdisabled,\n              \"z-link-icon\": true,\n              \"z-link-blue\": true,\n            }}\n            id={elemId + \"link_id\"}\n            href={this.url}\n            target={this.target}\n          >\n            <z-icon\n              height={14}\n              width={14}\n              name={this.linkicon}\n            ></z-icon>\n            {this.linklabel}\n          </a>\n        </div>\n        {this.descrSlotName && (\n          <div class=\"panel-elem-desc\">\n            <slot name={this.descrSlotName} />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,41 +1,29 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
-var index$1 = require('./index-wGaSHN1_.js');
-var utils = require('./utils-Ctc6JP2n.js');
-require('./breakpoints-B7vFm-3T.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `:host{position:fixed;display:none;max-width:calc(100dvw - var(--grid-margin) * 2);max-height:calc(100dvh - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center;visibility:hidden;}:host([open]:not([open="false"])[current-position]){display:block}: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, var(--color-surface01));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}`;
+const index = require('./index-96af6326.js');
+const index$1 = require('./index-e30d0503.js');
+const utils = require('./utils-b1859d65.js');
+require('./breakpoints-8a1e87e0.js');
+
+const stylesCss = ":host{position:fixed;display:none;max-width:calc(100dvw - var(--grid-margin) * 2);max-height:calc(100dvh - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center;visibility:hidden;}:host([open]:not([open=\"false\"])[current-position]){display:block}: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, var(--color-surface01));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}";
+const ZPopoverStyle0 = stylesCss;
 
 const ZPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.positionChange = index.createEvent(this, "positionChange", 7);
         this.openChange = index.createEvent(this, "openChange", 7);
-        /**
-         * The preferred position to render the popover.
-         * The popover will automatically search another position if not enough space is available for the preferred position.
-         * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.
-         */
+        /** space tolerance for space calculations */
+        this.spaceTolerance = 3;
         this.position = index$1.PopoverPosition.TOP;
-        /**
-         * The initial open state of the popover.
-         * Internal changes of this prop are emitted through the `openChange` event.
-         * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.
-         */
         this.open = false;
-        /** Whether to show popover's arrow. */
+        this.bindTo = undefined;
         this.showArrow = false;
-        /** Whether to center the popup on the main side (according to "position"). */
         this.center = false;
-        /**
-         * Whether the popover can be closed by clicking outside of it or pressing the escape key.
-         * Otherwise, it will be closed only programmatically (by setting `open` to `false`).
-         * Default: `true`.
-         */
         this.closable = true;
-        /** space tolerance for space calculations */
-        this.spaceTolerance = 3;
+        this.currentPosition = undefined;
     }
     closePopoverWithKeyboard(e) {
         if (this.closable && e.key === index$1.KeyboardCode.ESC) {
@@ -508,19 +496,13 @@ const ZPopover = class {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (index.h(index.Host, { key: '4495d149544c712575571ae8c9d6332c8ae28b42', "current-position": this.currentPosition }, index.h("slot", { key: '677e85a39324a18ee8d4fea1b28f90a913dd5eaa' })));
+        return (index.h(index.Host, { key: '0a8cd5736765d61bf31b6f19f6fd6b3b61ffb414', "current-position": this.currentPosition }, index.h("slot", { key: '269e9c027b0636583b199d91e724ca2093aac615' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "position": [{
-                "validatePosition": 0
-            }],
-        "open": [{
-                "onOpen": 0
-            }],
-        "bindTo": [{
-                "onBindingChange": 0
-            }]
+        "position": ["validatePosition"],
+        "open": ["onOpen"],
+        "bindTo": ["onBindingChange"]
     }; }
 };
 // Clockwise order of positions.
@@ -538,6 +520,8 @@ ZPopover.positionOrder = [
     index$1.PopoverPosition.LEFT_TOP,
     index$1.PopoverPosition.LEFT_BOTTOM,
 ];
-ZPopover.style = stylesCss();
+ZPopover.style = ZPopoverStyle0;
 
 exports.z_popover = ZPopover;
+
+//# sourceMappingURL=z-popover.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-popover.entry.cjs.js","mappings":"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","names":["PopoverPosition","KeyboardCode","containsElement","getParentElement","findContainingBlockAncestor","getDevice","Device","isElementVisibleInContainer","h","Host"],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n  --z-popover-theme--surface: ;\n  --z-popover-theme--text: ;\n  --z-popover-padding: ;\n  --z-popover-shadow-filter: ;\n\n  position: fixed;\n  display: none;\n  max-width: calc(100dvw - var(--grid-margin) * 2);\n  max-height: calc(100dvh - var(--grid-margin) * 2);\n  padding: var(--z-popover-padding, 0);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  border-radius: var(--border-radius-small);\n  color: var(--z-popover-theme--text, var(--color-default-text));\n  fill: currentcolor;\n  filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));\n  text-align: center;\n  visibility: hidden; /* hidden by default. the positioning algorithm will set it to 'visible' when needed */\n}\n\n:host([open]:not([open=\"false\"])[current-position]) {\n  display: block;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n  transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n  transform: translateY(-50%);\n}\n\n:host([current-position^=\"top\"]) {\n  margin: 0 0 var(--space-unit);\n}\n\n:host([current-position^=\"bottom\"]) {\n  margin: var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"left\"]) {\n  margin: 0 var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"right\"]) {\n  margin: 0 0 0 var(--space-unit);\n}\n\n/* Arrow style */\n:host([current-position])::before {\n  --arrow-size: 6px;\n  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  content: \"\";\n  transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n  display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n  top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n  bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n  left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n  top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n  right: auto;\n  left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n  top: var(--arrow-center-x-offset);\n  bottom: auto;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {\n  containsElement,\n  findContainingBlockAncestor,\n  getDevice,\n  getParentElement,\n  isElementVisibleInContainer,\n} from \"../../utils/utils\";\n\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\ntype Offsets = {top: number; right: number; bottom: number; left: number};\n\n/**\n * Popover component.\n * This component displays a popover bound to an element.\n * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.\n *\n * Notes:\n * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is \"fluid\" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n  tag: \"z-popover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPopover {\n  /**\n   * The preferred position to render the popover.\n   * The popover will automatically search another position if not enough space is available for the preferred position.\n   * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n   */\n  @Prop({reflect: true, mutable: true})\n  position?: PopoverPosition = PopoverPosition.TOP;\n\n  /**\n   * The initial open state of the popover.\n   * Internal changes of this prop are emitted through the `openChange` event.\n   * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the popover.\n   * If string css selector is provided make sure to use a valid selector.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /** Whether to show popover's arrow. */\n  @Prop({reflect: true})\n  showArrow = false;\n\n  /** Whether to center the popup on the main side (according to \"position\"). */\n  @Prop({reflect: true})\n  center = false;\n\n  /**\n   * Whether the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n   * Default: `true`.\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * The current position of the popover.\n   * It differs from `position` only when calculated automatically for space reasons.\n   */\n  @State()\n  currentPosition?: PopoverPosition;\n\n  @Element() host: HTMLZPopoverElement;\n\n  // Clockwise order of positions.\n  private static readonly positionOrder: PopoverPosition[] = [\n    PopoverPosition.TOP,\n    PopoverPosition.TOP_RIGHT,\n    PopoverPosition.TOP_LEFT,\n    PopoverPosition.RIGHT,\n    PopoverPosition.RIGHT_BOTTOM,\n    PopoverPosition.RIGHT_TOP,\n    PopoverPosition.BOTTOM,\n    PopoverPosition.BOTTOM_LEFT,\n    PopoverPosition.BOTTOM_RIGHT,\n    PopoverPosition.LEFT,\n    PopoverPosition.LEFT_TOP,\n    PopoverPosition.LEFT_BOTTOM,\n  ] as const;\n\n  private animationFrameRequestId?: number;\n\n  /** space tolerance for space calculations */\n  private readonly spaceTolerance = 3;\n\n  /** The element bound to the popover. */\n  private boundElement?: HTMLElement;\n\n  /** Cached available space around the bound element to avoid unnecessary recalculations */\n  private cachedAvailableSpace?: Offsets;\n\n  /** Last bounding rect of the bound element to detect changes and eventually invalidate the caches. */\n  private lastBoundRect?: DOMRect;\n\n  /** Fired when the position changes. */\n  @Event()\n  positionChange: EventEmitter<{position: PopoverPosition}>;\n\n  /** Event emitted when the open state of the popover changes (e.g. when the user clicks outside the popover to close it, if `closable` is true). */\n  @Event()\n  openChange: EventEmitter<{open: boolean}>;\n\n  @Listen(\"keyup\", {target: \"window\", capture: true})\n  closePopoverWithKeyboard(e: KeyboardEvent): void {\n    if (this.closable && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n      this.open = false;\n    }\n  }\n\n  /**\n   * Close the popover when clicking outside of its content.\n   * Stop event propagation if the click was fired by popover's trigger element,\n   * to prevent close and reopen glitches.\n   */\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    const target = e.target as Element;\n    if (!this.closable || !this.open || containsElement(this.host, target)) {\n      return;\n    }\n\n    if (containsElement(this.boundElement, target)) {\n      // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n      e.stopPropagation();\n    }\n    this.open = false;\n  }\n\n  @Watch(\"position\")\n  validatePosition(newValue: PopoverPosition): void {\n    if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) || newValue === PopoverPosition.AUTO) {\n      newValue = PopoverPosition.TOP;\n      this.position = newValue;\n    }\n    this.currentPosition = newValue;\n    if (this.open) {\n      this.setPosition();\n    }\n  }\n\n  /** Setup popover behaviors when `open` changes. */\n  @Watch(\"open\")\n  onOpen(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n    this.openChange.emit({open: this.open});\n    if (!this.open) {\n      Object.assign(this.host.style, {\n        // Reset all positioning properties\n        top: \"auto\",\n        right: \"auto\",\n        bottom: \"auto\",\n        left: \"auto\",\n        maxWidth: \"\",\n        maxHeight: \"\",\n        // Set initial visibility to hidden while calculating position...\n        visibility: \"hidden\",\n      });\n      this.currentPosition = undefined;\n\n      return;\n    }\n\n    const updatePositionLoop = (): void => {\n      if (!this.open) {\n        return;\n      }\n\n      this.setPosition();\n      this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);\n    };\n\n    // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n    setTimeout(() => {\n      updatePositionLoop();\n    }, 0);\n  }\n\n  @Watch(\"bindTo\")\n  onBindingChange(): void {\n    this.findBoundElement();\n  }\n\n  /** Returns the offset modifier to use in calculations to align the popover with the bound element. */\n  private get offsetModifier(): OffsetModifier {\n    return this.center ? 0.5 : 0;\n  }\n\n  private findBoundElement(): void {\n    if (typeof this.bindTo === \"string\") {\n      this.boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n    } else if (this.bindTo) {\n      this.boundElement = this.bindTo;\n    } else {\n      this.boundElement = getParentElement(this.host) as HTMLElement;\n      if (this.boundElement.tagName.toLowerCase() === \"z-tooltip\") {\n        // If the popover is used inside a tooltip without a specified `bindTo`, bind it to the parent of the tooltip.\n        this.boundElement = getParentElement(this.boundElement) as HTMLElement;\n      }\n    }\n  }\n\n  /**\n   * Check if element has enough space to the right and left to be centered.\n   * Used for `TOP` and `BOTTOM` position.\n   * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.\n   */\n  private hasCenteredHorizontalSpace(\n    availableLeft: number,\n    availableRight: number,\n    hostWidth: number,\n    boundElementWidth: number\n  ): boolean {\n    const requiredSideSpace = (hostWidth - boundElementWidth) * (1 - this.offsetModifier);\n\n    if (!this.center) {\n      return availableRight >= requiredSideSpace - this.spaceTolerance;\n    }\n\n    return (\n      availableRight >= requiredSideSpace - this.spaceTolerance &&\n      availableLeft >= requiredSideSpace - this.spaceTolerance\n    );\n  }\n\n  /**\n   * Check if element has enough space to the top and bottom to be centered.\n   * Used for `RIGHT` and `LEFT` position.\n   * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.\n   */\n  private hasCenteredVerticalSpace(\n    availableTop: number,\n    availableBottom: number,\n    hostHeight: number,\n    boundElementHeight: number\n  ): boolean {\n    const requiredSideSpace = (hostHeight - boundElementHeight) * (1 - this.offsetModifier);\n\n    if (!this.center) {\n      return availableBottom >= requiredSideSpace - this.spaceTolerance;\n    }\n\n    return (\n      availableTop >= requiredSideSpace - this.spaceTolerance &&\n      availableBottom >= requiredSideSpace - this.spaceTolerance\n    );\n  }\n\n  /**\n   * Check if there is enough space in the given direction to fit the popover.\n   * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.\n   */\n  private hasEnoughSideSpace(\n    availableSpace: number,\n    hostSize: number,\n    boundElementSize: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    return availableSpace >= hostSize - boundElementSize * (1 - offsetModifier) - this.spaceTolerance;\n  }\n\n  /**\n   * Given a desired position and available space around the bound element, returns the best position\n   * that fits the popover, trying all positions if needed.\n   * Takes into account offsetModifier for centering.\n   * @param desiredPosition The desired position of the popover.\n   * @param availableSpace The available space around the bound element.\n   */\n  private getOptimalPopoverPosition(desiredPosition: PopoverPosition, availableSpace: Offsets): PopoverPosition {\n    const hostWidth = this.host.offsetWidth;\n    const hostHeight = this.host.offsetHeight;\n    const boundElementWidth = this.boundElement.getBoundingClientRect().width;\n    const boundElementHeight = this.boundElement.getBoundingClientRect().height;\n    const offsetModifier = this.offsetModifier;\n\n    /** Check if there is enough space to fit the popover in the desired position */\n    const fits = (pos: PopoverPosition): boolean => {\n      switch (pos) {\n        case PopoverPosition.TOP:\n          return (\n            availableSpace.top >= hostHeight - this.spaceTolerance &&\n            this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n          );\n        case PopoverPosition.TOP_RIGHT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.TOP_LEFT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.RIGHT:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n          );\n        case PopoverPosition.RIGHT_BOTTOM:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.RIGHT_TOP:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.BOTTOM:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n          );\n        case PopoverPosition.BOTTOM_LEFT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.BOTTOM_RIGHT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.LEFT:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n          );\n        case PopoverPosition.LEFT_TOP:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.LEFT_BOTTOM:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n          );\n\n        default:\n          return false;\n      }\n    };\n\n    // Check desired position first\n    if (fits(desiredPosition)) {\n      return desiredPosition;\n    }\n\n    // Find position index and create rotation starting from next position\n    const positions = ZPopover.positionOrder;\n    const startIndex = positions.indexOf(desiredPosition);\n\n    if (startIndex === -1) {\n      return desiredPosition; // fallback if position not found\n    }\n\n    // Try all other positions starting from the next one\n    for (let i = 1; i < positions.length; i++) {\n      const posIndex = (startIndex + i) % positions.length;\n      const pos = positions[posIndex];\n      if (fits(pos)) {\n        return pos;\n      }\n    }\n\n    return this.findBestFallbackPosition(availableSpace);\n  }\n\n  /** Find the best fallback position based on available space when no position fits perfectly. */\n  private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n    // Determine which horizontal and vertical direction has the most available space\n    const bestHorizontalDirection =\n      availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n    const bestVerticalDirection =\n      availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n    // Choose the main direction based on which axis has more space overall\n    const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n    const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n    const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n    // Decide if a secondary direction is needed\n    // Only add a secondary direction if the difference between min and max in that axis is at least double\n    let needsSecondaryDirection = false;\n\n    if (mainDirection === bestVerticalDirection) {\n      // If main direction is vertical, check horizontal space difference\n      const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n      needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;\n    } else {\n      // If main direction is horizontal, check vertical space difference\n      const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n      needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n    }\n\n    if (!needsSecondaryDirection) {\n      return mainDirection;\n    }\n\n    const secondaryDirection =\n      mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n    // Return a combined position (e.g., \"bottom_right\")\n    return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n  }\n\n  /**\n   * Find the nearest scrollable ancestor of an element to take as a reference for positioning.\n   * The ancestor is considered scrollable if it doesn't have `overflow` property set to `hidden` and its scroll size is bigger than its client size.\n   */\n  private findScrollableAncestor(element: HTMLElement): HTMLElement {\n    let parent = getParentElement(element);\n\n    while (parent) {\n      if (parent === element.ownerDocument.documentElement) {\n        return parent as HTMLElement;\n      }\n\n      const style = getComputedStyle(parent);\n      const {overflow, overflowX, overflowY} = style;\n      const hasHiddenOverflow = overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\";\n      const isScrollable =\n        (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") ||\n        (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\");\n\n      if (!hasHiddenOverflow && isScrollable) {\n        return parent as HTMLElement;\n      }\n\n      parent = getParentElement(parent);\n    }\n\n    return element.ownerDocument.documentElement;\n  }\n\n  /**\n   * Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.\n   *\n   * Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...\n   * For more information see the explanation in the docs.\n   * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value\n   */\n  private calculateAvailableSpace(): Offsets {\n    const boundElementRect = this.boundElement.getBoundingClientRect();\n\n    if (\n      this.lastBoundRect &&\n      this.lastBoundRect.x === boundElementRect.x &&\n      this.lastBoundRect.y === boundElementRect.y &&\n      this.lastBoundRect.width === boundElementRect.width &&\n      this.lastBoundRect.height === boundElementRect.height &&\n      this.cachedAvailableSpace\n    ) {\n      // If the bound element's rect hasn't changed, return the cached rect\n      return this.cachedAvailableSpace;\n    }\n\n    this.lastBoundRect = boundElementRect;\n    const scrollableAncestor = this.findScrollableAncestor(this.boundElement);\n    const scrollableAncestorRect = scrollableAncestor.getBoundingClientRect();\n    const isScrollableAncestorNested = scrollableAncestor !== this.boundElement.ownerDocument.documentElement;\n    const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n    const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n    const safeSpace = 8; // extra space to avoid popover being too close to the edges\n\n    // These deltas represent the offset between the scrollable ancestor and the viewport.\n    // They are used to adjust the available space calculations when the scrollable ancestor is not the document or body,\n    // to try to fit the popover inside the scrollable ancestor.\n    const deltaTop = isScrollableAncestorNested ? scrollableAncestorRect.top : 0;\n    const deltaRight = isScrollableAncestorNested ? documentWidth - scrollableAncestorRect.right : 0;\n    const deltaBottom = isScrollableAncestorNested ? documentHeight - scrollableAncestorRect.bottom : 0;\n    const deltaLeft = isScrollableAncestorNested ? scrollableAncestorRect.left : 0;\n\n    this.cachedAvailableSpace = {\n      top: boundElementRect.top - deltaTop - safeSpace,\n      right: documentWidth - boundElementRect.right - deltaRight - safeSpace,\n      bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,\n      left: boundElementRect.left - deltaLeft - safeSpace,\n    };\n\n    return this.cachedAvailableSpace;\n  }\n\n  /** Calculate the space around the bound element relative to the viewport. */\n  private getBoundElementOffsets(): Offsets {\n    const elementRect = this.boundElement.getBoundingClientRect();\n    const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n    const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n\n    return {\n      top: elementRect.top,\n      right: documentWidth - elementRect.right,\n      bottom: documentHeight - elementRect.bottom,\n      left: elementRect.left,\n    };\n  }\n\n  /** Compute positioning offsets in the appropriate coordinate space, accounting for transformed containing blocks and scroll. */\n  private computePositionOffsets(): Offsets {\n    const boundElementOffsets = this.getBoundElementOffsets();\n    const containingBlockAncestor = findContainingBlockAncestor(this.host);\n    const isDocumentElement = containingBlockAncestor === this.host.ownerDocument.documentElement;\n\n    if (isDocumentElement) {\n      return boundElementOffsets;\n    }\n\n    const containingBlockRect = containingBlockAncestor.getBoundingClientRect();\n    const containingBlockStyle = getComputedStyle(containingBlockAncestor);\n    /** Padding box of the containing block, accounting for borders. */\n    const paddingBox = {\n      top: containingBlockRect.top + parseFloat(containingBlockStyle.borderTopWidth),\n      right: containingBlockRect.right - parseFloat(containingBlockStyle.borderRightWidth),\n      bottom: containingBlockRect.bottom - parseFloat(containingBlockStyle.borderBottomWidth),\n      left: containingBlockRect.left + parseFloat(containingBlockStyle.borderLeftWidth),\n    };\n\n    const boundElementRect = this.boundElement.getBoundingClientRect();\n    /** Bound element offsets relative to the containing block padding box. */\n    const relativeOffsets = {\n      top: boundElementRect.top - paddingBox.top,\n      right: paddingBox.right - boundElementRect.right,\n      bottom: paddingBox.bottom - boundElementRect.bottom,\n      left: boundElementRect.left - paddingBox.left,\n    };\n\n    /** Account for scroll to keep the popover aligned while the containing block scrolls. */\n    return {\n      top: relativeOffsets.top + containingBlockAncestor.scrollTop,\n      right: relativeOffsets.right - containingBlockAncestor.scrollLeft,\n      bottom: relativeOffsets.bottom - containingBlockAncestor.scrollTop,\n      left: relativeOffsets.left + containingBlockAncestor.scrollLeft,\n    };\n  }\n\n  /** Apply positioning styles based on `position` parameter. */\n  private applyPositionStyles(position: PopoverPosition, availableSpace: Offsets): void {\n    const boundElementWidth = this.boundElement.offsetWidth;\n    const boundElementHeight = this.boundElement.offsetHeight;\n    const offsetModifier = this.offsetModifier;\n    /**\n     * Distance between the arrow center and the popover edge.\n     * Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled.\n     */\n    const arrowModifier = this.showArrow && this.center ? 8 : 0;\n    const hostStyle = this.host.style;\n    /** Gap between the popover and the bound element, set as margin in CSS. */\n    const distanceFromBound = parseFloat(getComputedStyle(this.host).marginTop.replace(\"px\", \"\")) || 0;\n    const positionOffsets = this.computePositionOffsets();\n\n    /**\n     * Precomputed bases to reduce repeated arithmetic in the switch below.\n     * They represent the bound element edges plus optional centering offsets.\n     */\n    const leftBase = positionOffsets.left + boundElementWidth * offsetModifier;\n    const rightBase = positionOffsets.right + boundElementWidth * offsetModifier;\n    const topBase = positionOffsets.top + boundElementHeight;\n    const bottomBase = positionOffsets.bottom + boundElementHeight;\n    const sideTopBase = positionOffsets.top + boundElementHeight * offsetModifier;\n    const sideBottomBase = positionOffsets.bottom + boundElementHeight * offsetModifier;\n\n    let maxWidth: number;\n    let maxHeight: number;\n\n    switch (position) {\n      case PopoverPosition.TOP:\n      case PopoverPosition.TOP_RIGHT:\n        hostStyle.bottom = `${bottomBase}px`;\n        hostStyle.left = `${leftBase - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n        maxHeight = availableSpace.top - distanceFromBound;\n        if (position === PopoverPosition.TOP_RIGHT) {\n          maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.TOP_LEFT:\n        hostStyle.right = `${rightBase - arrowModifier}px`;\n        hostStyle.bottom = `${bottomBase}px`;\n        maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n        maxHeight = availableSpace.top - distanceFromBound;\n        break;\n\n      case PopoverPosition.BOTTOM:\n      case PopoverPosition.BOTTOM_RIGHT:\n        hostStyle.top = `${topBase}px`;\n        hostStyle.left = `${leftBase - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n        maxHeight = availableSpace.bottom - distanceFromBound;\n        if (position === PopoverPosition.BOTTOM_RIGHT) {\n          maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.BOTTOM_LEFT:\n        hostStyle.top = `${topBase}px`;\n        hostStyle.right = `${rightBase - arrowModifier}px`;\n        maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n        maxHeight = availableSpace.bottom - distanceFromBound;\n        break;\n\n      case PopoverPosition.RIGHT:\n      case PopoverPosition.RIGHT_BOTTOM:\n        hostStyle.top = `${sideTopBase - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n        hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n        maxWidth = availableSpace.right - distanceFromBound;\n        if (position === PopoverPosition.RIGHT) {\n          maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;\n        } else {\n          maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.RIGHT_TOP:\n        hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n        hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n        maxWidth = availableSpace.right - distanceFromBound;\n        maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n        break;\n\n      case PopoverPosition.LEFT:\n      case PopoverPosition.LEFT_BOTTOM:\n        hostStyle.top = `${sideTopBase - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n        hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n        maxWidth = availableSpace.left - distanceFromBound;\n        if (position === PopoverPosition.LEFT_BOTTOM) {\n          maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.LEFT_TOP:\n        hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n        hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n        maxWidth = availableSpace.left - distanceFromBound;\n        maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n        break;\n    }\n\n    if (getDevice() !== Device.MOBILE) {\n      // Only force max sizes on non-mobile viewports\n      Object.assign(hostStyle, {\n        maxWidth: maxWidth ? `${maxWidth}px` : \"\",\n        maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n      });\n    }\n  }\n\n  /** Set the position of the popover. */\n  private setPosition(): void {\n    if (!this.boundElement) {\n      return;\n    }\n\n    if (!isElementVisibleInContainer(this.boundElement, this.findScrollableAncestor(this.boundElement))) {\n      // If the bound element is not visible, hide the popover too\n      this.open = false;\n\n      return;\n    }\n\n    Object.assign(this.host.style, {\n      // Reset all positioning properties\n      top: \"auto\",\n      right: \"auto\",\n      bottom: \"auto\",\n      left: \"auto\",\n      maxWidth: \"\",\n      maxHeight: \"\",\n      // Set initial visibility to hidden while calculating position...\n      visibility: \"hidden\",\n    });\n\n    const availableSpace = this.calculateAvailableSpace();\n    const position = this.getOptimalPopoverPosition(this.position, availableSpace);\n\n    this.applyPositionStyles(position, availableSpace);\n    this.currentPosition = position;\n    this.positionChange.emit({position: this.currentPosition});\n\n    // ...then restore the visibility\n    this.host.style.visibility = \"visible\";\n  }\n\n  componentWillLoad(): void {\n    this.validatePosition(this.position);\n  }\n\n  componentDidLoad(): void {\n    this.findBoundElement();\n    if (this.open) {\n      this.onOpen();\n    }\n  }\n\n  disconnectedCallback(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <Host current-position={this.currentPosition}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}