@sankhyalabs/ezui 5.22.0-dev.11 → 5.22.0-dev.110

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

@@ -1,13 +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-71ce76be.js';
-import { ObjectUtils, StringUtils, FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
+import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
+import { ObjectUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import './ICustomRender-875b5a40.js';
-import { R as REQUIRED_INFO } from './constants-4e0d35b7.js';
+import './types-6f6b2650.js';
+import './FormLayout-54092963.js';
+import { R as REQUIRED_INFO } from './constants-b036528f.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__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--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)}.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);padding:var(--ez-search--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-search__scrollbar--color-background);width:var(--ez-search__scrollbar--width);max-width:var(--ez-search__scrollbar--width);min-width:var(--ez-search__scrollbar--width)}.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);padding:var(--ez-search--space--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:unset;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:unset;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)}}";
+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 EzSearch = class {
   constructor(hostRef) {
@@ -26,15 +28,18 @@ const EzSearch = class {
     this._visibleOptions = undefined;
     this._startLoading = false;
     this._showLoading = true;
+    this._showLoadingDescription = false;
     this._criteria = undefined;
     this.value = undefined;
     this.label = undefined;
     this.enabled = true;
     this.errorMessage = undefined;
     this.optionLoader = undefined;
+    this.contextProperties = undefined;
     this.showSelectedValue = true;
     this.showOptionValue = true;
     this.suppressEmptyOption = false;
+    this.stopPropagateEnterKeyEvent = false;
     this.mode = "regular";
     this.canShowError = true;
     this.hideErrorOnFocusOut = true;
@@ -43,7 +48,9 @@ const EzSearch = class {
     this.ignoreLimitCharsToSearch = false;
     this.options = undefined;
     this.suppressSearch = false;
-    this.fromGrid = false;
+    this.ensureClearButtonVisible = false;
+    this.suppressPreLoad = true;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a;
@@ -54,12 +61,21 @@ const EzSearch = class {
       }
     }
   }
+  getValue(val) {
+    return typeof val === 'object' ? val === null || val === void 0 ? void 0 : val.value : val;
+  }
   validateNewValue(newValue, oldValue) {
-    const getValue = (val) => typeof val === 'object' ? val === null || val === void 0 ? void 0 : val.value : val;
-    return (getValue(newValue) !== getValue(oldValue));
+    const parsedNewValue = this.getValue(newValue);
+    const parsedOldValue = this.getValue(oldValue);
+    const newValueIsValid = parsedNewValue !== "[object Object]";
+    const valuesIsDifferent = parsedNewValue !== parsedOldValue;
+    if (newValueIsValid && valuesIsDifferent) {
+      return true;
+    }
+    return false;
   }
   async observeValue(newValue, oldValue) {
-    if (this._textInput && newValue !== oldValue && this.validateNewValue(newValue, oldValue)) {
+    if (this._textInput && this.validateNewValue(newValue, oldValue)) {
       if (typeof newValue === "string") {
         await this.handleValueAsString(newValue);
         return;
@@ -76,7 +92,7 @@ const EzSearch = class {
     }
   }
   observeOptions(newOptions, oldOptions) {
-    if (!newOptions.length && this.fromGrid)
+    if (!newOptions.length && this.suppressPreLoad)
       return;
     if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.join('')) === (oldOptions === null || oldOptions === void 0 ? void 0 : oldOptions.join('')))
       return;
@@ -102,9 +118,9 @@ const EzSearch = class {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
+  async setFocus(options) {
     if (this._textInput) {
-      this._textInput.setFocus();
+      this._textInput.setFocus(options);
     }
   }
   /**
@@ -127,73 +143,19 @@ const EzSearch = class {
   async clearValue() {
     this.clearSearch();
   }
-  scrollListener() {
-    var _a;
-    if (this._floatingID == undefined) {
-      return;
-    }
-    if ((_a = this.listOptionsPosition) === null || _a === void 0 ? void 0 : _a.hardPosition) {
-      this.hideOptions();
-    }
-    else {
-      window.requestAnimationFrame(() => {
-        this.updateListPosition();
-      });
-    }
-  }
   async handleValueAsString(value) {
     if (this.getSelectedOption(value)) {
       this.setInputValue();
       return;
     }
     await this.loadDescriptionValue(value);
+    if (!this._currentValue) {
+      return;
+    }
     this.setInputValue();
     this.ezChange.emit(this.value);
     this._currentValue = this.value;
   }
-  updateListPosition() {
-    let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
-    const elementRect = this._listWrapper.getBoundingClientRect();
-    const containerRect = this._listContainer.getBoundingClientRect();
-    const textInputRect = this._textInput.getBoundingClientRect();
-    const limitHeight = bottomLimit || window.innerHeight;
-    const neededHeight = containerRect.bottom + elementRect.height;
-    if (!fromBottom && (elementRect.top < 0 || neededHeight > limitHeight)) {
-      fromBottom = true;
-    }
-    if (!hardPosition) {
-      verticalPosition = verticalPosition || 0;
-      horizontalPosition = horizontalPosition || 0;
-      if (fromBottom) {
-        verticalPosition = window.innerHeight - textInputRect.top + verticalPosition;
-      }
-      else {
-        verticalPosition += containerRect.top;
-      }
-      if (fromRight) {
-        horizontalPosition = window.innerWidth - textInputRect.right + horizontalPosition;
-      }
-      else {
-        horizontalPosition += containerRect.left;
-      }
-    }
-    if (verticalPosition != undefined) {
-      this._listWrapper.style[fromBottom ? "bottom" : "top"] = `${verticalPosition}px`;
-      this._listWrapper.style[fromBottom ? "top" : "bottom"] = "";
-    }
-    if (horizontalPosition != undefined) {
-      this._listWrapper.style[fromRight ? "right" : "left"] = `${horizontalPosition}px`;
-      this._listWrapper.style[fromRight ? "left" : "right"] = "";
-    }
-  }
-  getListPosition() {
-    if (this.listOptionsPosition) {
-      return this.listOptionsPosition;
-    }
-    return {
-      verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
-    };
-  }
   isDifferentValues(firstValue, secondValue) {
     return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
   }
@@ -201,28 +163,21 @@ const EzSearch = class {
     if (currentValue == undefined) {
       return;
     }
-    let text = (!this.showSelectedValue || currentValue.value == undefined) ? currentValue.label : `${currentValue.value} - ${currentValue.label}`;
-    text = text.replace(new RegExp(this._startHighlightTag, 'g'), '').replace(new RegExp(this._endHighlightTag, 'g'), '');
+    let text = (!this.showSelectedValue || currentValue.value == undefined) ? currentValue.label : currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
+    text = text === null || text === void 0 ? void 0 : text.replace(new RegExp(this._startHighlightTag, 'g'), '').replace(new RegExp(this._endHighlightTag, 'g'), '');
     return text;
   }
   getText() {
     const currentValue = this.getSelectedOption(this._currentValue);
     const text = this.getFormattedText(currentValue);
-    if (text == undefined) {
-      return;
-    }
-    return String(text)
-      .replace(/&amp;/g, '&')
-      .replace(/&lt;/g, '<')
-      .replace(/&gt;/g, '>')
-      .replace(/&quot;/g, '"');
+    return replaceQuotes(text);
   }
   getSelectedOption(value) {
     if (typeof value === "string" || value instanceof String) {
       return this._visibleOptions.find(o => o.value === value);
     }
     if (value) {
-      return Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
+      return Object.assign(Object.assign({}, value), { value: replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
     }
     return value;
   }
@@ -260,75 +215,19 @@ const EzSearch = class {
     }
     return 0;
   }
-  createOption(detail) {
-    let { key, title } = detail;
-    const startHighlight = new RegExp(this._startHighlightTag, 'g');
-    const endHighlight = new RegExp(this._endHighlightTag, 'g');
-    title = StringUtils.decodeHtmlEntities(title);
-    const option = {
-      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
-      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
-    };
-    this.selectOption(option);
-  }
-  buildItem(opt, index) {
-    opt.label = opt.label || opt.value;
-    const card = {
-      key: opt.value,
-      title: opt.label,
-      details: opt.details
-    };
-    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this._preSelection = index }, h("ez-card-item", { item: card }));
-  }
   showOptions() {
     if (!this.enabled)
       return;
     if (this.isOptionsVisible()) {
       return;
     }
-    if (!!this._resizeObserver)
-      this._resizeObserver.observe(this._textInput);
-    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: false, isFixed: true, backClickListener: () => this.hideOptions() });
-    this.setFocus();
-    window.requestAnimationFrame(() => {
-      this.updateListPosition();
-      if (!this.listOptionsPosition) {
-        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-      }
-    });
+    this._ezPopOverPlusElement.showUnder(this._textInput);
   }
   hideOptions() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-    }
-    this._floatingID = undefined;
-    if (!!this._resizeObserver)
-      this._resizeObserver.unobserve(this._textInput);
+    this._ezPopOverPlusElement.hide();
   }
   isOptionsVisible() {
-    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
-  }
-  nextOption() {
-    if (!this.isOptionsVisible()) {
-      return;
-    }
-    this.showOptions();
-    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  previousOption() {
-    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  scrollToOption(opt) {
-    window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
-        ? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
-        : undefined;
-      if (liElem) {
-        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
-      }
-    });
+    return this._ezPopOverPlusElement.opened;
   }
   selectCurrentOption() {
     if (this._preSelection !== undefined) {
@@ -343,10 +242,13 @@ const EzSearch = class {
     this._startLoading = false;
     if (source instanceof Promise) {
       this._showLoading = true;
+      this._showLoadingDescription = true;
       source.then(result => {
-        this._showLoading = false;
         this.updateSource(result);
-      }).catch(() => this._showLoading = false);
+      }).finally(() => {
+        this._showLoading = false;
+        this._showLoadingDescription = false;
+      });
       this.updateVisibleOptions();
     }
     else {
@@ -356,7 +258,7 @@ const EzSearch = class {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
-          this.controlEmptySearch();
+          this.controlEmptySearch(false);
         }
       }
       else {
@@ -368,18 +270,14 @@ const EzSearch = class {
     this._source = [];
     this.updateVisibleOptions();
   }
-  replaceHighlight(value) {
-    const startHighlight = new RegExp(this._startHighlightTag, 'g');
-    const endHighlight = new RegExp(this._endHighlightTag, 'g');
-    return (value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
-  }
-  selectOption(newOption) {
+  selectOption(newOption, focusOnInput = true) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
-    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
-    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) === null || _b === void 0 ? void 0 : _b.toString()))
-      || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
-      const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
+    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) === null || _b === void 0 ? void 0 : _b.toString()))
+      || (currentValue == undefined && newOptionsFormatted != undefined && "value" in newOptionsFormatted)) {
+      const adjustedOpt = !(newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) ? undefined : newOptionsFormatted;
       this.value = adjustedOpt;
       this._currentValue = adjustedOpt;
     }
@@ -389,20 +287,25 @@ const EzSearch = class {
     }
     this._visibleOptions = [];
     this.clearSource();
+    if (focusOnInput) {
+      setTimeout(() => {
+        this.setFocus();
+      }, 0);
+    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
     this._startLoading = true;
     if (this.optionLoader) {
       const searchArgument = { mode, argument };
-      this.updateSource(this.optionLoader(searchArgument));
+      this.updateSource(this.optionLoader(searchArgument, this.contextProperties));
     }
     else {
       this.updateSource(this.options);
     }
   }
   cancelPreselection() {
-    if (!this._textInput.value && this._currentValue) {
+    if (!this._textInput.value && this._currentValue && this._source.length > 0) {
       this.selectOption(undefined);
     }
     else {
@@ -425,7 +328,7 @@ const EzSearch = class {
     this.value = null;
     this._currentValue = null;
   }
-  controlListWithOnlyOne() {
+  controlListWithOnlyOne(focusOnInput = true) {
     var _a, _b;
     const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
     if ((source === null || source === void 0 ? void 0 : source.length) > 0) {
@@ -436,32 +339,19 @@ const EzSearch = class {
         value: (_b = source[0].value) === null || _b === void 0 ? void 0 : _b.replace(startHighlight, '').replace(endHighlight, ''),
         label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
       };
-      this.selectOption(option);
+      this.selectOption(option, focusOnInput);
     }
   }
-  controlEmptySearch() {
+  controlEmptySearch(focusOnInput = true) {
     var _a;
     if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
       this.clearSearch();
       ApplicationUtils.info(this._textEmptyList);
     }
     else {
-      this.controlListWithOnlyOne();
+      this.controlListWithOnlyOne(focusOnInput);
     }
   }
-  validateDescriptionValue() {
-    if (StringUtils.isEmpty(this.value)) {
-      return;
-    }
-    if (!this.validateNewValue(this.value, this._currentValue)) {
-      return;
-    }
-    let value = this.value;
-    if (typeof value === "object") {
-      return;
-    }
-    this.loadDescriptionValue(value);
-  }
   async loadDescriptionValue(argument) {
     var _a, _b;
     if (argument == undefined) {
@@ -475,7 +365,7 @@ const EzSearch = class {
       mode: SearchMode.PREDICTIVE,
       argument
     };
-    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
+    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument, this.contextProperties));
     if (source == undefined) {
       return;
     }
@@ -494,8 +384,17 @@ const EzSearch = class {
       this.showNoResultMessage();
       return;
     }
-    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: replaceHighlight(value.value), label: replaceHighlight(value.label) }) : value;
     this.value = this._currentValue;
+    this.setTextInputValue();
+  }
+  setTextInputValue() {
+    if (this._textInput && (this._textInput.value === null || this._textInput.value === undefined)) {
+      if (this.value === undefined || this.value === null)
+        return;
+      const textValue = (typeof this.value === 'string') ? this.value : this.getFormattedText(this.value);
+      this._textInput.value = replaceQuotes(textValue);
+    }
   }
   loadOptionValue(argument) {
     var _a;
@@ -521,6 +420,19 @@ const EzSearch = class {
     this._preSelection = undefined;
     this.updateVisibleOptions();
   }
+  async handleInitialValue() {
+    const valueIsValid = !!this.getValue(this.value);
+    if (!valueIsValid) {
+      return;
+    }
+    if (typeof this.value === "string") {
+      await this.handleValueAsString(this.value);
+      return;
+    }
+    let text = this.getFormattedText(this.value);
+    text = replaceQuotes(text);
+    this._textInput.value = text;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -545,28 +457,29 @@ const EzSearch = class {
   }
   componentDidRender() {
     var _a;
-    if (this._floatingID === undefined) {
-      this._listWrapper.remove();
-    }
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       ElementIDUtils.addIDInfoIfNotExists(elem, "itemSearch");
     });
-    this.validateDescriptionValue();
   }
-  componentDidLoad() {
+  async componentDidLoad() {
     this._currentValue = this.value;
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
-    this.setInputValue(false);
     this._resizeObserver = new ResizeObserver((entries) => {
       window.requestAnimationFrame(() => {
         if (!Array.isArray(entries) || !entries.length)
           return;
-        const { clientWidth } = this._listContainer;
-        if (clientWidth > 0 && !!this._listWrapper) {
-          this._listWrapper.style.width = `${clientWidth < 610 ? 610 : clientWidth}px`;
-        }
       });
     });
+    await this.handleInitialValue();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   //---------------------------------------------
   // Event handlers
@@ -621,7 +534,7 @@ const EzSearch = class {
       this._changeDeboucingTimeout = null;
     }
   }
-  keyDownHandler(event) {
+  async keyDownHandler(event) {
     this._tabPressed = false;
     if (event.ctrlKey) {
       if (event.key === "f" || event.key === "F") {
@@ -636,14 +549,24 @@ const EzSearch = class {
     }
     switch (event.key) {
       case "ArrowDown":
-        this.nextOption();
         event.stopPropagation();
+        if (this.canShowListOptions()) {
+          event.preventDefault();
+        }
+        if (!this.isOptionsVisible()) {
+          this.showOptions();
+        }
+        await this._searchList.nextOption();
         break;
       case "ArrowUp":
-        this.previousOption();
         event.stopPropagation();
+        if (this.canShowListOptions()) {
+          event.preventDefault();
+        }
+        await this._searchList.previousOption();
         break;
       case "Enter":
+        this.handleEventPropagation(event);
         this.selectCurrentOption();
         break;
       case "Escape":
@@ -651,7 +574,7 @@ const EzSearch = class {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne();
+        this.controlListWithOnlyOne(false);
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -660,6 +583,12 @@ const EzSearch = class {
     //e o contexto pode reagir (fechar um popup por exemplo).
     //event.stopPropagation();
   }
+  //O evento deve ter sua propagação interrompida, apenas se a lista de opções estiver sendo exibida.
+  handleEventPropagation(event) {
+    if (this._ezPopOverPlusElement.opened && this.stopPropagateEnterKeyEvent) {
+      event.stopPropagation();
+    }
+  }
   onTextInputFocusOutHandler() {
     if (this.hideErrorOnFocusOut)
       this.cancelPreselection();
@@ -667,15 +596,18 @@ const EzSearch = class {
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
+  canShowLoadSpinDescription() {
+    return this._showLoadingDescription && !this._ezPopOverPlusElement.opened;
+  }
+  onChangePreSelection(value) {
+    this._preSelection = value;
+  }
   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 }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.fromGrid)
+    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 }, 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("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
-      && this._visibleOptions.length === 0
-      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
-      && h("div", { class: "message" }, h("div", { class: "message__loading" })), h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem }), this.canShowListOptions() && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
+      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

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

@@ -28,7 +28,7 @@ const MESSAGES = {
   PUSH_PIN_MENU: 'Fixar menu',
 };
 
-const ezSidebarNavigatorCss = ":host{--ez-sidebar-navigator--padding-left:var(--space--xs, 12px);--ez-sidebar-navigator--padding-right:var(--space--xs, 12px);--ez-sidebar-navigator--gap:var(--space--xs, 12px);--ez-sidebar-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-sidebar-navigator--background-color:var(--color--inverted);--ez-sidebar-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-sidebar-navigator--height:calc(100vh - var(--space--lg, 24px));--ez-sidebar-navigator--header-gap:var(--space--xs, 12px);--ez-sidebar-navigator--footer-gap:var(--space--xs, 12px);--ez-ez-sidebar-navigator__title--font-family:var(--font-pattern, \"Roboto\");--ez-ez-sidebar-navigator__title--font-size:var(--title--medium, 16px);--ez-ez-sidebar-navigator__title--color:var(--title--primary, #2b3a54);--ez-ez-sidebar-navigator__title--font-weight:var(--text-weight--extra-large, 700)}.inverted{transform:rotate(180deg)}.ez-sidebar-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:var(--ez-sidebar-navigator--height);padding-top:var(--space--xs, 12px);padding-bottom:var(--space--xs, 12px);gap:var(--ez-sidebar-navigator--gap);padding-left:var(--ez-sidebar-navigator--padding-left);padding-right:var(--ez-sidebar-navigator--padding-right);background-color:var(--ez-sidebar-navigator--background-color);-webkit-box-shadow:var(--ez-sidebar-navigator--box-shadow);box-shadow:var(--ez-sidebar-navigator--box-shadow);border-radius:var(--ez-sidebar-navigator--border-radius)}.ez-sidebar-navigator__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between;gap:var(--ez-sidebar-navigator--header-gap)}.ez-sidebar-navigator__content{height:100%}.ez-sidebar-navigator__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-sidebar-navigator--footer-gap)}.ez-sidebar-navigator__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ez-ez-sidebar-navigator__title--font-family);font-size:var(--ez-ez-sidebar-navigator__title--font-size);font-weight:var(--ez-ez-sidebar-navigator__title--font-weight);color:var(--ez-ez-sidebar-navigator__title--color)}.ez-sidebar-navigator__end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;gap:var(--ez-sidebar-navigator--gap)}.dynamic{position:absolute;z-index:var(--most-visible\t, 4)}.fixed{position:relative}.hidden{display:none}.show{animation:fadeIn .1s ease-in-out 1}@keyframes fadeIn{from{transform:translate(-100%)}}.sm{width:240px}.md{width:280px}.lg{width:320px}@media screen and (max-width: 991px){.responsive{width:240px}}@media screen and (min-width: 992px){.responsive{width:280px}}@media screen and (min-width: 1200px){.responsive{width:320px}}";
+const ezSidebarNavigatorCss = ":host{--ez-sidebar-navigator--padding-left:var(--space--xs, 12px);--ez-sidebar-navigator--padding-right:var(--space--xs, 12px);--ez-sidebar-navigator--gap:var(--space--xs, 12px);--ez-sidebar-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-sidebar-navigator--background-color:var(--color--inverted);--ez-sidebar-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-sidebar-navigator--height:calc(100vh - var(--space--lg, 24px));--ez-sidebar-navigator--z-index:var(--elevation--20, 20);--ez-sidebar-navigator--header-gap:var(--space--xs, 12px);--ez-sidebar-navigator--footer-gap:var(--space--xs, 12px);--ez-ez-sidebar-navigator__title--font-family:var(--font-pattern, \"Roboto\");--ez-ez-sidebar-navigator__title--font-size:var(--title--medium, 16px);--ez-ez-sidebar-navigator__title--color:var(--title--primary, #2b3a54);--ez-ez-sidebar-navigator__title--font-weight:var(--text-weight--extra-large, 700)}.inverted{transform:rotate(180deg)}.ez-sidebar-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:var(--ez-sidebar-navigator--height);padding-top:var(--space--xs, 12px);padding-bottom:var(--space--xs, 12px);outline:none;gap:var(--ez-sidebar-navigator--gap);padding-left:var(--ez-sidebar-navigator--padding-left);padding-right:var(--ez-sidebar-navigator--padding-right);background-color:var(--ez-sidebar-navigator--background-color);-webkit-box-shadow:var(--ez-sidebar-navigator--box-shadow);box-shadow:var(--ez-sidebar-navigator--box-shadow);border-radius:var(--ez-sidebar-navigator--border-radius)}.ez-sidebar-navigator__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between;gap:var(--ez-sidebar-navigator--header-gap)}.ez-sidebar-navigator__content{height:100%}.ez-sidebar-navigator__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-sidebar-navigator--footer-gap)}.ez-sidebar-navigator__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ez-ez-sidebar-navigator__title--font-family);font-size:var(--ez-ez-sidebar-navigator__title--font-size);font-weight:var(--ez-ez-sidebar-navigator__title--font-weight);color:var(--ez-ez-sidebar-navigator__title--color)}.ez-sidebar-navigator__end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;gap:var(--ez-sidebar-navigator--gap)}.dynamic{position:absolute;z-index:var(--ez-sidebar-navigator--z-index)}.fixed{position:relative}.hidden{display:none}.show{animation:fadeIn .1s ease-in-out 1}@keyframes fadeIn{from{transform:translate(-100%)}}.sm{width:240px}.md{width:280px}.lg{width:320px}@media screen and (max-width: 991px){.responsive{width:240px}}@media screen and (min-width: 992px){.responsive{width:280px}}@media screen and (min-width: 1200px){.responsive{width:320px}}";
 
 const EzSidebarNavigator = class {
   constructor(hostRef) {

package/dist/esm/ez-split-button.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
-const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #FFF);--ez-split-button--font-size:var(--text--medium, 14px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--medium, #008561);--ez-split-button--border-radius:var(--border--radius-large, 12px);--ez-split-button--border:none;--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600);--ez-split-button--hover--background-color:var(--background--medium, var(--ez-split-button--background-color));--ez-split-button--disabled-color:var(--text--disable);--ez-split-button--disabled--background-color:var(--color--disable-secondary);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:var(--ez-split-button--border);justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:focus,.ez-split-button__right-button:focus{outline:var(--ez-split-button--focus--border);box-shadow:var(--ez-split-button--focus--box-shadow)}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:--ez-elevation--8;border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
+const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #2B3A54);--ez-split-button--font-size:var(--text--small, 12px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--light, #ffffff);--ez-split-button--border-radius:var(--border--radius-large, 24px);--ez-split-button--border:1px solid var(--color--strokes);--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--background--light, #ffffff);--ez-split-button--disabled-color:var(--text--primary);--ez-split-button--disabled--background-color:var(--background--medium);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:none;justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button{border:var(--ez-split-button--border);border-right:none;outline:none}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button:focus{box-shadow:0 0 0 2px var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__right-button:focus{box-shadow:2px 0 0 0 var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:active,.ez-split-button__right-button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}.ez-split-button__left-button:disabled{border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled{border:var(--ez-split-button--disabled-border);border-left:none}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0;border-right:var(--ez-split-button--border)}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:--ez-elevation--8;border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
 
 const EzSplitButton = class {
   constructor(hostRef) {
@@ -49,7 +49,7 @@ const EzSplitButton = class {
   }
   getIconSize(sizeParam = 'medium') {
     var _a;
-    const sizeList = ['medium', 'large'];
+    const sizeList = ['small', 'medium', 'large'];
     const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
   }