@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.10

package/dist/esm/ez-record-navigation.entry.js

@@ -0,0 +1,117 @@
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-baa5e267.js';
+import { Action, ElementIDUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-9e6dab5b.js';
+
+const ezRecordNavigationCss = ":host{display:block}.record-navigation__container{display:flex;align-items:center;flex-grow:1;flex-shrink:1;justify-content:flex-end;flex-wrap:nowrap}.record-navigation__buttons-container{display:flex;gap:var(--space--8, 8px)}.record-navigation__container-label{font-size:var(--font-size--default, 14px);font-family:var(--font--pattern, 'Roboto');color:var(--color--gray-600, #1C1D22);text-shadow:0 0 var(--color--gray-500, #494A4E), 0 0 1px transparent;margin-right:var(--space--12, 12px);display:flex;align-items:center}.record-navigation-contracted{width:100px}.record-navigation-expanded{min-width:150px}.record-navigation__label{width:100%;white-space:nowrap}.record-navigation__divider{width:3px;height:15px;background-color:var(--color--gray-300, #C1C2C6);margin-inline:var(--space--8, 8px)}.record-navigation-text-right{flex-direction:row-reverse}";
+
+const EzRecordNavigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._dataUnitInitialized = false;
+    this.leftButtonDisabled = undefined;
+    this.rightButtonDisabled = undefined;
+    this.dataUnit = undefined;
+    this.primaryKeys = undefined;
+    this.textPosition = 'right';
+    this.disabled = false;
+  }
+  /**
+   * Navega para a página anterior.
+   */
+  async previousRecord() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.previousRecord();
+  }
+  /**
+   * Navega para a próxima página.
+   */
+  async nextRecord() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.nextRecord();
+  }
+  onDataUnitChange() {
+    this.initializeDataUnit();
+  }
+  onDisabledChange() {
+    this.setStatusButtonPagination();
+  }
+  renderPageTitle() {
+    if (!this.primaryKeys) {
+      return null;
+    }
+    return this.primaryKeys.map((key, index) => {
+      var _a;
+      const fieldValue = this.dataUnit.getFieldValue(key);
+      const fieldLabel = (_a = this.dataUnit.getField(key)) === null || _a === void 0 ? void 0 : _a.label;
+      const isLast = index === this.primaryKeys.length - 1;
+      return (h(Fragment, null, h("ez-tooltip", { message: fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : fieldValue }, h("span", { class: "record-navigation__label", "aria-live": "polite", "aria-atomic": "true" }, fieldValue !== null && fieldValue !== void 0 ? fieldValue : '-')), !isLast && h("span", { class: "record-navigation__divider" })));
+    });
+  }
+  dataUnitObserver(action) {
+    switch (action.type) {
+      case Action.SELECTION_CHANGED:
+      case Action.PREVIOUS_SELECTED:
+      case Action.NEXT_SELECTED:
+        this.setStatusButtonPagination();
+        break;
+    }
+  }
+  getLeftButtonDisabledStatus() {
+    if (!this.dataUnit || this.disabled)
+      return true;
+    return !this.dataUnit.hasPrevious();
+  }
+  getRightButtonDisabledStatus() {
+    if (!this.dataUnit || this.disabled)
+      return true;
+    return !this.dataUnit.hasNext();
+  }
+  setStatusButtonPagination() {
+    this.leftButtonDisabled = this.getLeftButtonDisabledStatus();
+    this.rightButtonDisabled = this.getRightButtonDisabledStatus();
+  }
+  initializeDataUnit() {
+    if (!this.dataUnit || this._dataUnitInitialized) {
+      return;
+    }
+    this.setStatusButtonPagination();
+    this._dataUnitObserverBound = this.dataUnitObserver.bind(this);
+    this.dataUnit.subscribe(this._dataUnitObserverBound);
+    this._dataUnitInitialized = true;
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  async connectedCallback() {
+    this.i18n = await initI18n();
+    this.initializeDataUnit();
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  disconnectedCallback() {
+    if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
+      this.dataUnit.unsubscribe(this._dataUnitObserverBound);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "record-navigation__container": true,
+        "record-navigation-text-right": this.textPosition === 'right'
+      } }, h("div", { class: "record-navigation__container-label" }, this.renderPageTitle()), h("div", { id: "grid-record-navigation-tooltip", class: "record-navigation__buttons-container" }, h("ez-tooltip", { message: this.i18n("ez-record-navigation.previousRecord") }, h("ez-button", { iconName: "chevron-left", mode: "icon", isDisabled: this.leftButtonDisabled, onClick: () => this.previousRecord(), label: this.i18n("ez-record-navigation.previousRecord") })), h("ez-tooltip", { message: this.i18n("ez-record-navigation.nextRecord") }, h("ez-button", { iconName: "chevron-right", mode: "icon", isDisabled: this.rightButtonDisabled, onClick: () => this.nextRecord(), label: this.i18n("ez-record-navigation.nextRecord") }))))));
+  }
+  get _element() { return getElement(this); }
+  static get watchers() { return {
+    "dataUnit": ["onDataUnitChange"],
+    "disabled": ["onDisabledChange"]
+  }; }
+};
+EzRecordNavigation.style = ezRecordNavigationCss;
+
+export { EzRecordNavigation as ez_record_navigation };

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

@@ -1,29 +1,73 @@
 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-9e6dab5b.js';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
 
-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%)}";
+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 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() {
-    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
+    const isButtonMode = this.navigationMode === EzScrollNavigationMode.BUTTONS;
+    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}
+      ${isButtonMode ? " ez-scroller__wrapper--buttons-mode" : ""}
+    `;
   }
   finishDrag() {
     if (this._controller) {
@@ -51,27 +95,33 @@ const EzScroller = class {
     this.updateShadow();
   }
   updateShadow() {
-    const wrapper = this._wrapper;
-    if (!this.activeShadow || wrapper == undefined) {
+    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) {
       return;
     }
     const shadowPositions = ["", "start", "end", "middle"];
     const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
     if (currentPosition === "start") {
-      wrapper.classList.add(this._shadowStart);
-      wrapper.classList.remove(this._shadowEnd);
+      targetElement.classList.add(this._shadowStart);
+      targetElement.classList.remove(this._shadowEnd);
     }
     else if (currentPosition === "end") {
-      wrapper.classList.remove(this._shadowStart);
-      wrapper.classList.add(this._shadowEnd);
+      targetElement.classList.remove(this._shadowStart);
+      targetElement.classList.add(this._shadowEnd);
     }
     else if (currentPosition === "middle") {
-      wrapper.classList.add(this._shadowStart);
-      wrapper.classList.add(this._shadowEnd);
+      targetElement.classList.add(this._shadowStart);
+      targetElement.classList.add(this._shadowEnd);
     }
     else {
-      wrapper.classList.remove(this._shadowStart);
-      wrapper.classList.remove(this._shadowEnd);
+      targetElement.classList.remove(this._shadowStart);
+      targetElement.classList.remove(this._shadowEnd);
     }
   }
   configResize() {
@@ -95,6 +145,17 @@ 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
   //---------------------------------------------
@@ -133,6 +194,9 @@ const EzScroller = class {
       }
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidRender() {
     var _a, _b;
     if (this._container == undefined) {
@@ -149,8 +213,11 @@ const EzScroller = class {
     this.updateScroller();
   }
   render() {
-    return (h(Host, null, this.activeShadow
-      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
+    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)
       : this.getContainerElement()));
   }
 };

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

@@ -1,11 +1,12 @@
 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-1569f757.js';
+import { A as ApplicationUtils } from './ApplicationUtils-f7721533.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import { i as initI18n } from './index-41363fa6.js';
-import { S as SearchMode } from './FormLayout-071d324c.js';
+import { i as initI18n } from './index-9e6dab5b.js';
+import { S as SearchMode } from './types-6f6b2650.js';
+import './FormLayout-bda67973.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}";
 
@@ -62,6 +63,7 @@ const EzSearchPlus = class {
     if (newNormalizedValue === undefined) {
       this.codeValue = undefined;
       this.descriptionValue = undefined;
+      this.cleanFieldsRef();
       this.ezChange.emit(undefined);
       return;
     }
@@ -96,7 +98,7 @@ const EzSearchPlus = class {
    * Aplica o foco no campo.
    */
   async setFocus(options) {
-    var _a;
+    var _a, _b;
     if (this.disableCodeInput) {
       (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus(options);
       return;
@@ -105,7 +107,7 @@ const EzSearchPlus = class {
       this._latestFocusedInputElement.setFocus(options);
       return;
     }
-    this._textInputCodeValue.setFocus(options);
+    (_b = this._textInputCodeValue) === null || _b === void 0 ? void 0 : _b.setFocus(options);
   }
   /**
   * Obtém o valor do componente só após a compo de apresentação
@@ -392,6 +394,14 @@ 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-41363fa6.js';
+import { i as initI18n } from './index-9e6dab5b.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}}";
 

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

@@ -1,14 +1,15 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import { ObjectUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-1569f757.js';
+import { A as ApplicationUtils } from './ApplicationUtils-f7721533.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import { i as initI18n } from './index-41363fa6.js';
-import { S as SearchMode } from './FormLayout-071d324c.js';
+import { i as initI18n } from './index-9e6dab5b.js';
+import { S as SearchMode } from './types-6f6b2650.js';
+import './FormLayout-bda67973.js';
 import { r as replaceQuotes, a as replaceHighlight } from './searchFormatters-8229207e.js';
 
-const ezSearchCss = ":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--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);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)}.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}";
+const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search--min-width:0;--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--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width);min-width:var(--ez-search--min-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)}.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}";
 
 const EzSearch = class {
   constructor(hostRef) {
@@ -50,6 +51,8 @@ const EzSearch = class {
     this.suppressPreLoad = true;
     this.autoFocus = false;
     this.alternativePlaceholder = undefined;
+    this.showMore = undefined;
+    this.suppressInputPersist = false;
     this.hideDescriptionInput = false;
   }
   observeErrorMessage() {
@@ -316,6 +319,10 @@ const EzSearch = class {
     this.resetOptions();
   }
   setInputValue(clearError = true) {
+    if (this.suppressInputPersist) {
+      this.clearSearch();
+      return;
+    }
     const textValue = this.getText();
     if ((this._textInput.value || '') !== textValue) {
       this._textInput.value = textValue;
@@ -327,6 +334,7 @@ const EzSearch = class {
   clearSearch() {
     this.value = null;
     this._currentValue = null;
+    this._textInput.value = "";
     this.ezChange.emit(null);
   }
   controlListWithOnlyOne(focusOnInput = true) {
@@ -430,11 +438,24 @@ const EzSearch = class {
     return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(this.i18n("app.requiredInfo"), "").toUpperCase();
   }
   resetOptions() {
+    if (this.showMore) {
+      this.handleResetOptionsWithShowMoreVisible();
+      return;
+    }
     this.hideOptions();
     this._criteria = undefined;
     this._preSelection = undefined;
     this.updateVisibleOptions();
   }
+  handleResetOptionsWithShowMoreVisible() {
+    //Eh preciso adicionar um timeout para garantir que o evento seja escutado pelo botão de mostrar mais.
+    setTimeout(() => {
+      this.hideOptions();
+      this._criteria = undefined;
+      this._preSelection = undefined;
+      this.updateVisibleOptions();
+    }, 100);
+  }
   async handleInitialValue() {
     const valueIsValid = !!this.getValue(this.value);
     if (!valueIsValid) {
@@ -629,12 +650,29 @@ const EzSearch = class {
   onChangePreSelection(value) {
     this._preSelection = value;
   }
+  async handleClickShowMore() {
+    var _a, _b;
+    if (!this.optionLoader)
+      return;
+    const argument = (_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+    const searchArgument = { mode: SearchMode.ADVANCED, argument };
+    const selectedOption = await this.optionLoader(searchArgument, this.contextProperties);
+    if (selectedOption && !Array.isArray(selectedOption)) {
+      this.selectOption(selectedOption);
+    }
+  }
+  renderShowMore() {
+    if (!this.showMore || this._showLoading)
+      return;
+    return (h("div", { style: { display: "flex", justifyContent: "center" }, "data-element-id": ElementIDUtils.getInternalIDInfo("showMore") }, h("ez-button", { onClick: async () => await this.handleClickShowMore(), variant: "tertiary", style: { width: "100%", justifyContent: "center" }, label: this.i18n("ez-search.showMore") })));
+  }
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) :
+      h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el], "data-element-id": this.el.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
+      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el], "data-element-id": this.el.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("div", null, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }), this.renderShowMore()))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-sidebar-navigator.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
-import { i as initI18n } from './index-41363fa6.js';
+import { i as initI18n } from './index-9e6dab5b.js';
 
 var ModeMenuEnum;
 (function (ModeMenuEnum) {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-baa5e267.js';
-import { i as initI18n } from './index-41363fa6.js';
+import { i as initI18n } from './index-9e6dab5b.js';
 import '@sankhyalabs/core';
 
 const ALLOWED_ANIMATIONS = ['progress', 'pulse', 'false'];

package/dist/esm/ez-sortable-list.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { ArrayUtils } from '@sankhyalabs/core';
-import { i as initI18n } from './index-41363fa6.js';
+import { i as initI18n } from './index-9e6dab5b.js';
 
 /**!
  * Sortable 1.15.7
@@ -3278,7 +3278,7 @@ function removeMultiDragElements() {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
-const ezSortableListCss = ":host{--ez-sortable-list__host--z-index:var(--visible, 1);--ez-sortable-list__host--border-radius:var(--border--radius-medium, 12px);--ez-sortable-list__host--padding:var(--space--medium, 12px);--ez-sortable-list__item--margin:0 var(--space--small, 6px);--ez-sortable-list__item--padding:var(--space--3xs, 6px);--ez-sortable-list__item--color:var(--title--primary, #2b3a54);--ez-sortable-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-sortable-list__item--font-size:var(--text--medium, 14px);--ez-sortable-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-sortable-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-sortable-list__selectable--padding-right:var(--space--small, 6px);--ez-sortable-list__selectable--padding-left:var(--space--small, 6px);--ez-sortable-list__icon--color:#AFB6C0;--ez-sortable-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-sortable-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-sortable-list--color-background:var(--scrollbar--background, #E5EAF0);--ez-sortable-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-sortable-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-sortable-list--border-radius:var(--border--radius-small, 6px);--ez-sortable-list__scrollbar--width:var(--space--small, 6px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-sortable-list__host--z-index)}.sortable-item{display:flex;justify-content:space-between;font-family:var(--ez-sortable-list__item--font-family);font-size:var(--ez-sortable-list__item--font-size);padding:var(--ez-sortable-list__item--padding) 0px;margin:var(--ez-sortable-list__item--margin)}.hover-feedback:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.sortable-item.dragging{background:#FFFFFF;border:1px solid #008561;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.sortable-list{padding:0;margin:0;width:100%;height:100%;max-height:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;color:var(--text-color);scrollbar-color:var(--ez-sortable-list__scrollbar--color-clicked) var(--ez-sortable-list--color-background)}.sortable-list.empty-content::after{content:attr(data-content);display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.list-scroller--fix{scrollbar-width:thin}.list-scroller--hover{scrollbar-width:none}.item-content{display:flex;flex-grow:1;flex-direction:row}.empty-message{font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);margin:auto}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-sortable-list__icon--color);-webkit-mask-image:var(--ez-sortable-list__draggable-icon--image);mask-image:var(--ez-sortable-list__draggable-icon--image)}.selectable{cursor:pointer;padding-right:var(--ez-sortable-list__selectable--padding-right);padding-left:var(--ez-sortable-list__selectable--padding-left)}.selected{background:var(--ez-sortable-list__selected-item--background-color);border-radius:var(--ez-sortable-list__selected-item--border-radius)}.list-fix::-webkit-scrollbar-thumb{background-color:var(--ez-sortable-list__scrollbar--color-default);border-radius:var(--ez-sortable-list--border-radius)}.list-fix::-webkit-scrollbar-thumb:active{background-color:var(--ez-sortable-list__scrollbar--color-clicked)}.list-fix::-webkit-scrollbar{width:var(--ez-sortable-list__scrollbar--width);display:none}.list-hover::-webkit-scrollbar-thumb:hover{background-color:var(--ez-sortable-list__scrollbar--color-hover)}.list-hover:hover{scrollbar-width:thin}.list-hover:hover::-webkit-scrollbar{display:block}.ghost{opacity:.5;background:#589f7b}.sortable-content{display:flex;justify-content:space-between;gap:10px;flex-direction:column;border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-medium);width:100%;height:400px;min-width:40%}@media (max-height: 630px){.sortable-content{height:290px}}.sortable-header{background:var(--background--body);padding:10px;border-radius:var(--border--radius-medium) var(--border--radius-medium) 0 0}.sortable-label{font-weight:var(--text-weight--large);font-size:var(--text--medium);color:var(--title--primary);margin-bottom:10px;display:block}.sortable-totalizer{padding:5px 10px;background:var(--background--body);font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--primary);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}";
+const ezSortableListCss = ":host{--ez-sortable-list__host--z-index:var(--visible, 1);--ez-sortable-list__host--border-radius:var(--border--radius-medium, 12px);--ez-sortable-list__host--padding:var(--space--medium, 12px);--ez-sortable-list__item--margin:0 var(--space--small, 6px);--ez-sortable-list__item--padding:var(--space--3xs, 6px);--ez-sortable-list__item--color:var(--title--primary, #2b3a54);--ez-sortable-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-sortable-list__item--font-size:var(--text--medium, 14px);--ez-sortable-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-sortable-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-sortable-list__selectable--padding-right:var(--space--small, 6px);--ez-sortable-list__selectable--padding-left:var(--space--small, 6px);--ez-sortable-list__icon--color:#AFB6C0;--ez-sortable-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-sortable-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-sortable-list--color-background:var(--scrollbar--background, #E5EAF0);--ez-sortable-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-sortable-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-sortable-list--border-radius:var(--border--radius-small, 6px);--ez-sortable-list__scrollbar--width:var(--space--small, 6px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-sortable-list__host--z-index)}.sortable-item{display:flex;justify-content:space-between;font-family:var(--ez-sortable-list__item--font-family);font-size:var(--ez-sortable-list__item--font-size);padding:var(--ez-sortable-list__item--padding) 0px;margin:var(--ez-sortable-list__item--margin)}.hover-feedback:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.sortable-item.dragging{background:#FFFFFF;border:1px solid #008561;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.sortable-list{padding:0;margin:0;width:100%;height:100%;max-height:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;color:var(--text-color);scrollbar-color:var(--ez-sortable-list__scrollbar--color-clicked) var(--ez-sortable-list--color-background)}.sortable-list.empty-content::after{content:attr(data-content);display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.list-scroller--fix{scrollbar-width:thin}.list-scroller--hover{scrollbar-width:none}.item-content{display:flex;flex-grow:1;flex-direction:row}.empty-message{font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);margin:auto}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-sortable-list__icon--color);-webkit-mask-image:var(--ez-sortable-list__draggable-icon--image);mask-image:var(--ez-sortable-list__draggable-icon--image)}.selectable{cursor:pointer;padding-right:var(--ez-sortable-list__selectable--padding-right);padding-left:var(--ez-sortable-list__selectable--padding-left)}.selected{background:var(--ez-sortable-list__selected-item--background-color);border-radius:var(--ez-sortable-list__selected-item--border-radius)}.list-fix::-webkit-scrollbar-thumb{background-color:var(--ez-sortable-list__scrollbar--color-default);border-radius:var(--ez-sortable-list--border-radius)}.list-fix::-webkit-scrollbar-thumb:active{background-color:var(--ez-sortable-list__scrollbar--color-clicked)}.list-fix::-webkit-scrollbar{width:var(--ez-sortable-list__scrollbar--width);display:none}.list-hover::-webkit-scrollbar-thumb:hover{background-color:var(--ez-sortable-list__scrollbar--color-hover)}.list-hover:hover{scrollbar-width:thin}.list-hover:hover::-webkit-scrollbar{display:block}.ghost{opacity:.5;background:#589f7b}.sortable-content{display:flex;justify-content:space-between;gap:10px;flex-direction:column;border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-medium);width:100%;height:400px;min-width:40%}@media (max-height: 630px){.sortable-content{height:270px}}.sortable-header{background:var(--background--body);padding:10px;border-radius:var(--border--radius-medium) var(--border--radius-medium) 0 0}.sortable-label{font-weight:var(--text-weight--large);font-size:var(--text--medium);color:var(--title--primary);margin-bottom:10px;display:block}.sortable-totalizer{padding:5px 10px;background:var(--background--body);font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--primary);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}";
 
 Sortable.mount(new MultiDragPlugin());
 const EzSortableList = class {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { g as getI18n } from './index-41363fa6.js';
+import { g as getI18n } from './index-9e6dab5b.js';
 
 const ezSpinnerCss = ":host{--ez-spinner--color:var(--color--ocean-green-600, #008561);--ez-spinner--size-default:24px;--ez-spinner--size-medium:32px;--ez-spinner--size-large:42px;--ez-spinner--animation-duration:1.4s;display:inline-flex;align-items:center;justify-content:center}.spinner__container{display:inline-flex;align-items:center;justify-content:center}.spinner__svg{color:var(--ez-spinner--color);width:var(--ez-spinner--size-default);height:var(--ez-spinner--size-default)}.spinner__container[data-size=\"medium\"] .spinner__svg{width:var(--ez-spinner--size-medium);height:var(--ez-spinner--size-medium)}.spinner__container[data-size=\"large\"] .spinner__svg{width:var(--ez-spinner--size-large);height:var(--ez-spinner--size-large)}.spinner__path{animation:spinner-dash var(--ez-spinner--animation-duration) ease-in-out infinite,\n    spinner-rotate var(--ez-spinner--animation-duration) linear infinite;transform-origin:center;will-change:stroke-dasharray, stroke-dashoffset}@keyframes spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1, 63;stroke-dashoffset:0}50%{stroke-dasharray:32, 63;stroke-dashoffset:-16}100%{stroke-dasharray:1, 63;stroke-dashoffset:-63}}";