@sankhyalabs/ezui 7.3.3 → 7.3.4-dev.1

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

@@ -4,30 +4,74 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
+const index$1 = require('./index-d4a1cad8.js');
 const EzScrollDirection = require('./EzScrollDirection-b2c99895.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) {
     index.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.EzScrollDirection.HORIZONTAL) {
+      scrollOptions.left = Math.max(0, this._container.scrollLeft - this.scrollAmount);
+    }
+    else if (this.direction === EzScrollDirection.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.EzScrollDirection.HORIZONTAL) {
+      scrollOptions.left = this._container.scrollLeft + this.scrollAmount;
+    }
+    else if (this.direction === EzScrollDirection.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) {
@@ -55,27 +99,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() {
@@ -99,6 +149,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.EzScrollDirection.BOTH) {
+      return null;
+    }
+    const isHorizontal = this.direction === EzScrollDirection.EzScrollDirection.HORIZONTAL;
+    const previousIconName = isHorizontal ? "arrow_back" : "arrow-up";
+    const nextIconName = isHorizontal ? "arrow-forward" : "arrow-down";
+    const previousButton = this._startHidden ? (index.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 }, index.h("ez-icon", { iconName: previousIconName }))) : null;
+    const nextButton = this._endHidden ? (index.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 }, index.h("ez-icon", { iconName: nextIconName }))) : null;
+    return { previousButton, nextButton };
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -137,6 +198,9 @@ const EzScroller = class {
       }
     }
   }
+  async componentWillLoad() {
+    this.i18n = await index$1.initI18n();
+  }
   componentDidRender() {
     var _a, _b;
     if (this._container == undefined) {
@@ -153,8 +217,11 @@ const EzScroller = class {
     this.updateScroller();
   }
   render() {
-    return (index.h(index.Host, null, this.activeShadow
-      ? index.h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
+    const buttons = this.navigationMode === EzScrollNavigationMode.BUTTONS ? this.renderNavigationButtons() : null;
+    return (index.h(index.Host, null, this.activeShadow || this.navigationMode === EzScrollNavigationMode.BUTTONS
+      ? index.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/cjs/ez-search-plus.cjs.entry.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-5cc05979.js');
+const ApplicationUtils = require('./ApplicationUtils-9a9185fc.js');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const index$1 = require('./index-1be40f19.js');
-const FormLayout = require('./FormLayout-18853e70.js');
+const index$1 = require('./index-d4a1cad8.js');
+const types = require('./types-6a5df0c7.js');
+require('./FormLayout-fe8da83c.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}";
 
@@ -66,6 +67,7 @@ const EzSearchPlus = class {
     if (newNormalizedValue === undefined) {
       this.codeValue = undefined;
       this.descriptionValue = undefined;
+      this.cleanFieldsRef();
       this.ezChange.emit(undefined);
       return;
     }
@@ -100,7 +102,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;
@@ -109,7 +111,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
@@ -230,7 +232,7 @@ const EzSearchPlus = class {
     }
     try {
       this.isLoadingDescription = true;
-      const searchArgument = { mode: FormLayout.SearchMode.LOAD_DESCRIPTION, argument: codeValue };
+      const searchArgument = { mode: types.SearchMode.LOAD_DESCRIPTION, argument: codeValue };
       const loadedOption = await this.optionLoader(searchArgument);
       if (!loadedOption) {
         return "";
@@ -258,7 +260,7 @@ const EzSearchPlus = class {
       console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
       return;
     }
-    const searchArgument = { mode: FormLayout.SearchMode.ADVANCED, argument: "" };
+    const searchArgument = { mode: types.SearchMode.ADVANCED, argument: "" };
     let selectedItem = undefined;
     try {
       selectedItem = await this.optionLoader(searchArgument, this.contextProperties);
@@ -316,7 +318,7 @@ const EzSearchPlus = class {
   async processOptionsLoader(argument) {
     try {
       this.showLoading = true;
-      const searchArgument = { mode: FormLayout.SearchMode.PREDICTIVE, argument };
+      const searchArgument = { mode: types.SearchMode.PREDICTIVE, argument };
       const options = await this.optionLoader(searchArgument);
       this.visibleOptions = this.parseSearchOptions(options);
     }
@@ -396,6 +398,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/cjs/ez-search-result-list.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$1 = require('./index-1be40f19.js');
+const index$1 = require('./index-d4a1cad8.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/cjs/ez-search.cjs.entry.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-5cc05979.js');
+const ApplicationUtils = require('./ApplicationUtils-9a9185fc.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const index$1 = require('./index-1be40f19.js');
-const FormLayout = require('./FormLayout-18853e70.js');
+const index$1 = require('./index-d4a1cad8.js');
+const types = require('./types-6a5df0c7.js');
+require('./FormLayout-fe8da83c.js');
 const searchFormatters = require('./searchFormatters-b7e1ed1e.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) {
@@ -54,6 +55,8 @@ const EzSearch = class {
     this.suppressPreLoad = true;
     this.autoFocus = false;
     this.alternativePlaceholder = undefined;
+    this.showMore = undefined;
+    this.suppressInputPersist = false;
     this.hideDescriptionInput = false;
   }
   observeErrorMessage() {
@@ -100,7 +103,7 @@ const EzSearch = class {
       return;
     if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.join('')) === (oldOptions === null || oldOptions === void 0 ? void 0 : oldOptions.join('')))
       return;
-    this.loadOptions(FormLayout.SearchMode.PRELOAD);
+    this.loadOptions(types.SearchMode.PRELOAD);
   }
   /*
   * Retorna uma promise com o valor da opção selecionada,
@@ -320,6 +323,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;
@@ -331,6 +338,7 @@ const EzSearch = class {
   clearSearch() {
     this.value = null;
     this._currentValue = null;
+    this._textInput.value = "";
     this.ezChange.emit(null);
   }
   controlListWithOnlyOne(focusOnInput = true) {
@@ -366,7 +374,7 @@ const EzSearch = class {
       this.loadOptionValue(argument);
       return;
     }
-    const searchMode = this.hideDescriptionInput ? FormLayout.SearchMode.LOAD_DESCRIPTION : FormLayout.SearchMode.PREDICTIVE;
+    const searchMode = this.hideDescriptionInput ? types.SearchMode.LOAD_DESCRIPTION : types.SearchMode.PREDICTIVE;
     const searchArgument = {
       mode: searchMode,
       argument
@@ -434,11 +442,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) {
@@ -516,7 +537,7 @@ const EzSearch = class {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.loadOptions(FormLayout.SearchMode.ADVANCED);
+    this.loadOptions(types.SearchMode.ADVANCED);
   }
   buildNumberArgument(argument) {
     if (this.isTextSearch) {
@@ -545,7 +566,7 @@ const EzSearch = class {
       if (this.ignoreLimitCharsToSearch || !isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch) {
         this._showLoading = true;
         this._changeDeboucingTimeout = window.setTimeout(() => {
-          this.loadOptions(FormLayout.SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
+          this.loadOptions(types.SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
         }, this._deboucingTime);
         this.showOptions();
       }
@@ -569,7 +590,7 @@ const EzSearch = class {
     this._tabPressed = false;
     if (event.ctrlKey) {
       if (event.key === "f" || event.key === "F") {
-        this.loadOptions(FormLayout.SearchMode.ADVANCED);
+        this.loadOptions(types.SearchMode.ADVANCED);
         //ATENÇÃO: Ctrl + F tem ação específica nos browsers
         //nesse caso, como vamos abrir o popup de busca avançada,
         //não é interessante deixar o evento propagar;
@@ -633,12 +654,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: types.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 (index.h("div", { style: { display: "flex", justifyContent: "center" }, "data-element-id": core.ElementIDUtils.getInternalIDInfo("showMore") }, index.h("ez-button", { onClick: async () => await this.handleClickShowMore(), variant: "tertiary", style: { width: "100%", justifyContent: "center" }, label: this.i18n("ez-search.showMore") })));
+  }
   render() {
     var _a;
     core.ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? index.h("div", { class: "message__loading" }) : index.h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? index.h("div", { class: "message__loading" }) :
+      index.h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? index.h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, index.h("ez-icon", { iconName: "close" }))
-      : undefined), index.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() }, index.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), index.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() }, index.h("div", null, index.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 index.getElement(this); }
   static get watchers() { return {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
-const index$1 = require('./index-1be40f19.js');
+const index$1 = require('./index-d4a1cad8.js');
 
 var ModeMenuEnum;
 (function (ModeMenuEnum) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
-const index$1 = require('./index-1be40f19.js');
+const index$1 = require('./index-d4a1cad8.js');
 require('@sankhyalabs/core');
 
 const ALLOWED_ANIMATIONS = ['progress', 'pulse', 'false'];

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$2 = require('./index-1be40f19.js');
+const index$2 = require('./index-d4a1cad8.js');
 
 /**!
  * Sortable 1.15.7
@@ -3282,7 +3282,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/cjs/ez-spinner.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$1 = require('./index-1be40f19.js');
+const index$1 = require('./index-d4a1cad8.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}}";