@sankhyalabs/ezui 7.2.1-rc.1 → 7.3.0

package/dist/esm/ez-popover-core.entry.js

@@ -0,0 +1,223 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { c as computePosition, f as flip, s as shift, a as size } from './floating-ui.dom.esm-c94d4011.js';
+
+const ezPopoverCoreCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--elevation--100, 100);--ez-popover__box--overlay-z-index:var(--elevation--24, 24);position:relative;display:flex;user-select:none}.popover__overlay{display:none;position:fixed;padding:0;top:0px;left:0px;width:100%;height:100vh;box-sizing:border-box;z-index:var(--ez-popover__box--overlay-z-index)}.popover__overlay--light{background-color:rgba(var(--rgb-background--overlay), var(--opacity--bright))}.popover__overlay--medium{background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.popover__box{display:none;position:fixed;top:0;left:0;z-index:var(--ez-popover__box--z-index);flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:calc(100% - 10px)}";
+
+const EzPopoverCore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezVisibilityChange = createEvent(this, "ezVisibilityChange", 7);
+    this.autoClose = true;
+    this.boxWidth = "fit-content";
+    this.opened = false;
+    this.overlayType = "light";
+    this.anchorElement = undefined;
+    this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
+    this.useAnchorSize = false;
+    this.minWidth = 150;
+    this.fitInViewport = true;
+  }
+  observeOpened(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+    if (newValue) {
+      this.openPopover();
+    }
+    else {
+      this.hidePopover();
+    }
+  }
+  /**
+   * Atualiza a posição do popover.
+   */
+  async updatePosition(top, left) {
+    this.updateOptionPosition(top, left);
+    await this.updatePositionPopover();
+  }
+  /**
+   * Exibe o ez-popover.
+   */
+  async show(top, left) {
+    this.updateOptionPosition(top, left);
+    this.opened = true;
+  }
+  /**
+   * Ancora a exibição do popOver a um elemento HTML.
+   */
+  async showUnder(element, options) {
+    if (options) {
+      this.options = options;
+    }
+    this.anchorElement = element;
+    this.opened = true;
+  }
+  /**
+   * Oculta o ez-popover.
+   */
+  async hide() {
+    this.opened = false;
+  }
+  /**
+   * Altera as opções.
+  */
+  async setOptions(options) {
+    Object.assign(this.options, options);
+  }
+  /**
+   * Altera o elemento de ancoragem.
+  */
+  async setAnchorElement(anchor) {
+    this.anchorElement = anchor;
+  }
+  parseSizePixel(sizePixel, defaultValue) {
+    if (!sizePixel) {
+      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0;
+    }
+    if (typeof sizePixel === "string") {
+      return Number(sizePixel.replace("px", ""));
+    }
+    return sizePixel !== null && sizePixel !== void 0 ? sizePixel : 0;
+  }
+  updateOptionPosition(top, left) {
+    Object.assign(this.options, {
+      horizontalGap: this.parseSizePixel(left, this.options.horizontalGap),
+      verticalGap: this.parseSizePixel(top, this.options.verticalGap),
+    });
+  }
+  getElement(element) {
+    if (typeof element === 'string') {
+      return document.getElementById(element);
+    }
+    return element;
+  }
+  getAnchorElement() {
+    if (!this.anchorElement) {
+      return this._host;
+    }
+    if (Array.isArray(this.anchorElement)) {
+      for (const element of this.anchorElement) {
+        const htmlElement = this.getElement(element);
+        if (htmlElement) {
+          return htmlElement;
+        }
+      }
+      return this._host;
+    }
+    return this.getElement(this.anchorElement);
+  }
+  async updatePositionPopover() {
+    if (!this._box || !this.opened) {
+      return;
+    }
+    const currentAnchorElement = this.getAnchorElement();
+    const middleware = [flip(), shift({ padding: 5 })];
+    if (this.fitInViewport) {
+      middleware.push(size({
+        padding: 5,
+        apply: ({ availableWidth, availableHeight, elements }) => {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${Math.max(0, availableWidth)}px`,
+            maxHeight: `${Math.max(0, availableHeight)}px`
+          });
+        },
+      }));
+    }
+    await computePosition(currentAnchorElement, this._box, {
+      placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
+      middleware,
+      strategy: 'fixed',
+    }).then(({ x, y, placement }) => {
+      const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
+      const newLeft = placement.includes("start") ? x + this.options.horizontalGap : x - this.options.horizontalGap;
+      Object.assign(this._box.style, {
+        top: `${newTop}px`,
+        left: `${newLeft}px`,
+      });
+    });
+  }
+  hidePopover() {
+    if (!this._box) {
+      return;
+    }
+    this._box.style.display = '';
+    this._box.style.maxWidth = '';
+    this._box.style.maxHeight = '';
+    this._box.style.overflow = '';
+    this.hideOverlay();
+    this.ezVisibilityChange.emit(false);
+  }
+  async openPopover() {
+    if (!this._box || !this.opened) {
+      return;
+    }
+    this._box.style.display = 'flex';
+    this._box.style.visibility = 'hidden';
+    if (this.useAnchorSize) {
+      const currentAnchorElement = this.getAnchorElement();
+      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
+      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
+      this._box.style.width = `${width}px`;
+    }
+    await this.updatePositionPopover();
+    this.openOverlay();
+    this.ezVisibilityChange.emit(true);
+    this._box.style.visibility = 'visible';
+  }
+  openOverlay() {
+    if (!this._overlay || !this._overlayIsActive) {
+      return;
+    }
+    this._overlay.style.display = 'block';
+  }
+  hideOverlay() {
+    if (!this._overlay) {
+      return;
+    }
+    this._overlay.style.display = 'none';
+  }
+  checkStatusOverlay() {
+    if (this.overlayType !== "none") {
+      return true;
+    }
+    if (this.overlayType === "none" && this.autoClose) {
+      return true;
+    }
+    return false;
+  }
+  handlePositionUpdate() {
+    if (!this.opened) {
+      return;
+    }
+    this.updatePositionPopover();
+  }
+  componentWillLoad() {
+    window.addEventListener('scroll', this.handlePositionUpdate.bind(this), true);
+    window.addEventListener('resize', this.handlePositionUpdate.bind(this), true);
+  }
+  componentDidLoad() {
+    this._overlayIsActive = this.checkStatusOverlay();
+    this._resizeObserver = new ResizeObserver(this.updatePositionPopover.bind(this));
+    this._resizeObserver.observe(this._box);
+    this.openPopover();
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.handlePositionUpdate.bind(this), true);
+    window.removeEventListener('resize', this.handlePositionUpdate.bind(this), true);
+    this._resizeObserver.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: el => this._overlay = el, onClick: () => this.hide(), class: `popover__overlay popover__overlay--${this.overlayType}` }), h("section", { ref: el => this._box = el, class: {
+        "popover__box": true,
+        "popover__box--fit-content": this.boxWidth === "fit-content",
+        "popover__box--full-width": this.boxWidth !== "fit-content",
+      } }, h("slot", null))));
+  }
+  get _host() { return getElement(this); }
+  static get watchers() { return {
+    "opened": ["observeOpened"]
+  }; }
+};
+EzPopoverCore.style = ezPopoverCoreCss;
+
+export { EzPopoverCore as ez_popover_core };

package/dist/esm/ez-popover.entry.js

@@ -83,13 +83,6 @@ const EzPopover = class {
   async show(top, left) {
     this.float({ top, left });
   }
-  /**
-   * Exibe o ez-popover ancorado acima da posição de origem (usa `bottom` em vez de `top`).
-   * Aceita opcionalmente `left` ou `right` para alinhamento horizontal.
-   */
-  async showAbove(offsets) {
-    this.float(Object.assign({}, (offsets || {})));
-  }
   /**
    * Ancora a exibição do popOver a um elemento HTML.
    */
@@ -120,7 +113,6 @@ const EzPopover = class {
     this._box.style.top = "";
     this._box.style.left = "";
     this._box.style.right = "";
-    this._box.style.bottom = "";
     const useOverlay = this.overlayType !== "none";
     const overlayClassName = `ez-scrim ez-scrim--${this.overlayType}`;
     let floatingOptions = Object.assign(Object.assign({}, position), { autoClose: this.autoClose, innerClickTest: this.innerClickTest, backClickListener: this.backClickListener });

package/dist/esm/ez-popup.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { KeyboardManager, FloatingManager } from '@sankhyalabs/core';
-import { i as initI18n } from './index-b5a15d4b.js';
+import { i as initI18n } from './index-41363fa6.js';
 
 const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:auto;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{flex-grow:1;box-sizing:border-box;width:100%;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400)}.popup__header{flex-shrink:0;width:100%;display:flex;align-items:center;margin-bottom:var(--space--16, 16px)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{flex-shrink:0;display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.popup_margin-top{margin-top:var(--space--16, 16px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 

package/dist/esm/ez-scroller_2.entry.js

@@ -1,73 +1,29 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-baa5e267.js';
 import { JSUtils, ElementIDUtils } from '@sankhyalabs/core';
-import { i as initI18n } from './index-b5a15d4b.js';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
 
-var EzScrollNavigationMode;
-(function (EzScrollNavigationMode) {
-  EzScrollNavigationMode["SCROLLBAR"] = "scrollbar";
-  EzScrollNavigationMode["BUTTONS"] = "buttons";
-})(EzScrollNavigationMode || (EzScrollNavigationMode = {}));
-
-const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__nav-button--spacing:var(--space--8, 8px);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);--ez-scroller__max-height:unset;--ez-scroller__scrollbar--padding-right:var(--space-extra-small, 3px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row;padding-right:var(--ez-scroller__scrollbar--padding-right)}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column;width:100%;max-height:var(--ez-scroller__max-height)}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:auto}.ez-scroller__wrapper--horizontal{flex-direction:row;align-items:center;gap:var(--ez-scroller__nav-button--spacing)}.ez-scroller__wrapper--vertical{flex-direction:column;align-items:center;gap:var(--ez-scroller__nav-button--spacing)}.ez-scroller__wrapper--buttons-mode{display:flex}.ez-scroller__wrapper--buttons-mode.ez-scroller__wrapper--horizontal{flex-direction:row}.ez-scroller__wrapper--buttons-mode.ez-scroller__wrapper--vertical{flex-direction:column}.ez-scroller__wrapper:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__container--buttons-mode::-webkit-scrollbar{display:none}.ez-scroller__container--buttons-mode{scrollbar-width:none;flex:1;min-width:0;position:relative}.ez-scroller__nav-button{--ez-scroller__nav-button--size:var(--space--32, 32px);--ez-scroller__nav-button--border-radius:var(--border--radius-24, 24px);--ez-scroller__nav-button--gradient-width:40px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;flex-shrink:0;position:relative;z-index:2;width:var(--ez-scroller__nav-button--size);height:var(--ez-scroller__nav-button--size);border-radius:var(--ez-scroller__nav-button--border-radius)}.ez-scroller__nav-button--previous::after{content:\"\";position:absolute;z-index:-1;pointer-events:none}.ez-scroller__wrapper--horizontal .ez-scroller__nav-button--previous::after{left:100%;top:0;bottom:0;width:var(--ez-scroller__nav-button--gradient-width);background:linear-gradient(to left, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%)}.ez-scroller__wrapper--vertical .ez-scroller__nav-button--previous::after{top:100%;left:0;right:0;height:var(--ez-scroller__nav-button--gradient-width);background:linear-gradient(to top, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%)}.ez-scroller__nav-button--next::before{content:\"\";position:absolute;z-index:-1;pointer-events:none}.ez-scroller__wrapper--horizontal .ez-scroller__nav-button--next::before{right:100%;top:0;bottom:0;width:var(--ez-scroller__nav-button--gradient-width);background:linear-gradient(to right, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%)}.ez-scroller__wrapper--vertical .ez-scroller__nav-button--next::before{bottom:100%;left:0;right:0;height:var(--ez-scroller__nav-button--gradient-width);background:linear-gradient(to bottom, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%)}.ez-scroller__nav-button ez-icon{pointer-events:none}";
+const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);--ez-scroller__max-height:unset;--ez-scroller__scrollbar--padding-right:var(--space-extra-small, 3px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row;padding-right:var(--ez-scroller__scrollbar--padding-right)}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column;width:100%;max-height:var(--ez-scroller__max-height)}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:auto}.ez-scroller__wrapper--horizontal{flex-direction:row}.ez-scroller__wrapper--vertical{flex-direction:column}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}";
 
 const EzScroller = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this._shadowStart = "ez-scroller__wrapper--shadow-start";
     this._shadowEnd = "ez-scroller__wrapper--shadow-end";
-    this._startHidden = undefined;
-    this._endHidden = undefined;
     this.isActive = false;
     this.direction = undefined;
     this.locked = false;
     this.activeShadow = false;
-    this.navigationMode = EzScrollNavigationMode.SCROLLBAR;
-    this.scrollAmount = 200;
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
-  scrollToPrevious() {
-    if (!this._container)
-      return;
-    const scrollOptions = {
-      behavior: 'smooth'
-    };
-    if (this.direction === EzScrollDirection.HORIZONTAL) {
-      scrollOptions.left = Math.max(0, this._container.scrollLeft - this.scrollAmount);
-    }
-    else if (this.direction === EzScrollDirection.VERTICAL) {
-      scrollOptions.top = Math.max(0, this._container.scrollTop - this.scrollAmount);
-    }
-    this._container.scrollTo(scrollOptions);
-  }
-  scrollToNext() {
-    if (!this._container)
-      return;
-    const scrollOptions = {
-      behavior: 'smooth'
-    };
-    if (this.direction === EzScrollDirection.HORIZONTAL) {
-      scrollOptions.left = this._container.scrollLeft + this.scrollAmount;
-    }
-    else if (this.direction === EzScrollDirection.VERTICAL) {
-      scrollOptions.top = this._container.scrollTop + this.scrollAmount;
-    }
-    this._container.scrollTo(scrollOptions);
-  }
   getContainerClass() {
-    const isButtonMode = this.navigationMode === EzScrollNavigationMode.BUTTONS;
     return `ez-scroller__container ez-scroller__container--${this.direction}
       ${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
-      ${isButtonMode ? " ez-scroller__container--buttons-mode" : ""}
     `;
   }
   getWrapperClass() {
-    const isButtonMode = this.navigationMode === EzScrollNavigationMode.BUTTONS;
-    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}
-      ${isButtonMode ? " ez-scroller__wrapper--buttons-mode" : ""}
-    `;
+    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
   }
   finishDrag() {
     if (this._controller) {
@@ -95,33 +51,27 @@ const EzScroller = class {
     this.updateShadow();
   }
   updateShadow() {
-    if (!this.activeShadow) {
-      return;
-    }
-    // Apply shadow classes to container when in buttons mode, otherwise to wrapper
-    const targetElement = this.navigationMode === EzScrollNavigationMode.BUTTONS
-      ? this._container
-      : this._wrapper;
-    if (targetElement == undefined) {
+    const wrapper = this._wrapper;
+    if (!this.activeShadow || wrapper == undefined) {
       return;
     }
     const shadowPositions = ["", "start", "end", "middle"];
     const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
     if (currentPosition === "start") {
-      targetElement.classList.add(this._shadowStart);
-      targetElement.classList.remove(this._shadowEnd);
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
     }
     else if (currentPosition === "end") {
-      targetElement.classList.remove(this._shadowStart);
-      targetElement.classList.add(this._shadowEnd);
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
     }
     else if (currentPosition === "middle") {
-      targetElement.classList.add(this._shadowStart);
-      targetElement.classList.add(this._shadowEnd);
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
     }
     else {
-      targetElement.classList.remove(this._shadowStart);
-      targetElement.classList.remove(this._shadowEnd);
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
     }
   }
   configResize() {
@@ -145,17 +95,6 @@ const EzScroller = class {
     return this._container.scrollWidth > this._container.clientWidth
       || this._container.scrollHeight > this._container.clientHeight;
   }
-  renderNavigationButtons() {
-    if (this.navigationMode !== EzScrollNavigationMode.BUTTONS || this.direction === EzScrollDirection.BOTH) {
-      return null;
-    }
-    const isHorizontal = this.direction === EzScrollDirection.HORIZONTAL;
-    const previousIconName = isHorizontal ? "arrow_back" : "arrow-up";
-    const nextIconName = isHorizontal ? "arrow-forward" : "arrow-down";
-    const previousButton = this._startHidden ? (h("ez-button", { class: "ez-scroller__nav-button ez-scroller__nav-button--previous", onClick: () => this.scrollToPrevious(), title: this.i18n('ez-scroller.previousButton'), "aria-label": this.i18n('ez-scroller.previousButton'), type: "button", variant: "tertiary", mode: 'icon', suppressAnimation: true, iconName: previousIconName }, h("ez-icon", { iconName: previousIconName }))) : null;
-    const nextButton = this._endHidden ? (h("ez-button", { class: "ez-scroller__nav-button ez-scroller__nav-button--next", onClick: () => this.scrollToNext(), title: this.i18n('ez-scroller.nextButton'), "aria-label": this.i18n('ez-scroller.nextButton'), type: "button", variant: "tertiary", mode: 'icon', suppressAnimation: true, iconName: nextIconName }, h("ez-icon", { iconName: nextIconName }))) : null;
-    return { previousButton, nextButton };
-  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -194,9 +133,6 @@ const EzScroller = class {
       }
     }
   }
-  async componentWillLoad() {
-    this.i18n = await initI18n();
-  }
   componentDidRender() {
     var _a, _b;
     if (this._container == undefined) {
@@ -213,11 +149,8 @@ const EzScroller = class {
     this.updateScroller();
   }
   render() {
-    const buttons = this.navigationMode === EzScrollNavigationMode.BUTTONS ? this.renderNavigationButtons() : null;
-    return (h(Host, null, this.activeShadow || this.navigationMode === EzScrollNavigationMode.BUTTONS
-      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, buttons === null || buttons === void 0 ? void 0 :
-        buttons.previousButton, this.getContainerElement(), buttons === null || buttons === void 0 ? void 0 :
-        buttons.nextButton)
+    return (h(Host, null, this.activeShadow
+      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
       : this.getContainerElement()));
   }
 };

package/dist/esm/ez-search-plus.entry.js

@@ -1,12 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { StringUtils, KeyboardManager, ElementIDUtils } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-29d2709c.js';
+import { A as ApplicationUtils } from './ApplicationUtils-1569f757.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import { i as initI18n } from './index-b5a15d4b.js';
-import { S as SearchMode } from './types-6f6b2650.js';
-import './FormLayout-bda67973.js';
+import { i as initI18n } from './index-41363fa6.js';
+import { S as SearchMode } from './FormLayout-071d324c.js';
 
 const ezSearchPlusCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.list-options{margin-top:0px;box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}.ez-search-plus__container{display:flex;flex-grow:1;gap:3px}.ez-search-plus__text-input{--ez-text-input--border-top-left-radius:0px;--ez-text-input--border-bottom-left-radius:0px;outline:none}.ez-search-plus__code-input-no-border{--ez-text-input--border-top-right-radius:0px;--ez-text-input--border-bottom-right-radius:0px}.ez-search-plus__code-input{max-width:85px}.ez-search-plus__code-input-full{width:100%}.description-input-container{width:100%;outline:none}";
 
@@ -63,7 +62,6 @@ const EzSearchPlus = class {
     if (newNormalizedValue === undefined) {
       this.codeValue = undefined;
       this.descriptionValue = undefined;
-      this.cleanFieldsRef();
       this.ezChange.emit(undefined);
       return;
     }
@@ -98,7 +96,7 @@ const EzSearchPlus = class {
    * Aplica o foco no campo.
    */
   async setFocus(options) {
-    var _a, _b;
+    var _a;
     if (this.disableCodeInput) {
       (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus(options);
       return;
@@ -107,7 +105,7 @@ const EzSearchPlus = class {
       this._latestFocusedInputElement.setFocus(options);
       return;
     }
-    (_b = this._textInputCodeValue) === null || _b === void 0 ? void 0 : _b.setFocus(options);
+    this._textInputCodeValue.setFocus(options);
   }
   /**
   * Obtém o valor do componente só após a compo de apresentação
@@ -394,14 +392,6 @@ const EzSearchPlus = class {
   handleDescriptionInputFocus() {
     this.setLatestFocusedInputElement(this._textInputDescriptionValue);
   }
-  cleanFieldsRef() {
-    if (this._textInputCodeValue) {
-      this._textInputCodeValue.value = null;
-    }
-    if (this._textInputDescriptionValue) {
-      this._textInputDescriptionValue.value = null;
-    }
-  }
   getRightIconElement() {
     var _a, _b;
     if (!this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value))) {

package/dist/esm/ez-search-result-list.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-baa5e267.js';
 import { StringUtils } from '@sankhyalabs/core';
-import { i as initI18n } from './index-b5a15d4b.js';
+import { i as initI18n } from './index-41363fa6.js';
 
 const ezSearchResultListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.loading__container{display:flex;flex-direction:column;margin:var(--space--small)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";