@sankhyalabs/ezui 1.2.0-beta.8 → 2.0.0

package/dist/ezui/ez-chip.entry.js

@@ -1,97 +0,0 @@
-import { r as registerInstance, e as createEvent, h } from './index-1e9d524f.js';
-
-const ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary)}.lbl{display:flex;white-space:nowrap;align-items:center;font-weight:var(--ez-label-chip__label--font-weight);cursor:pointer;color:var(--ez-label-chip__label--title--primary);user-select:none;height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";
-
-let EzChip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.valueChange = createEvent(this, "valueChange", 7);
-    this.removeChip = createEvent(this, "removeChip", 7);
-    this.actionClick = createEvent(this, "actionClick", 7);
-    /**
-     * Deixa o componente disponível ou não para seleção.
-     */
-    this.enabled = true;
-    /**
-     * Indica se o componente está ou não ativado.
-     */
-    this.value = false;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._labelElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._labelElem.blur();
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
-  }
-  handleValueChange() {
-    this.swichState();
-    this.valueChange.emit(this.value);
-  }
-  handleClick(ev) {
-    const target = ev.target;
-    if (!this.enabled)
-      return;
-    if (this.mode === "action")
-      return this.actionClick.emit();
-    if (target.tagName.toLowerCase() !== "ez-icon")
-      return this.handleValueChange();
-    if (target.classList.contains("btn-close"))
-      return this.removeChip.emit();
-  }
-  swichState() {
-    if (this.enabled) {
-      this.value = !this.value;
-    }
-  }
-  observeValue() {
-    (this.value && this.mode !== "action") ? this._divElem.classList.add("label__container--active") : this._divElem.classList.remove("label__container--active");
-  }
-  observeEnabled() {
-    if (this.enabled) {
-      this._divElem.classList.remove("label__container--disabled");
-      this._labelElem.classList.remove("lbl--disabled");
-      this._labelElem.classList.remove("cursor-disable");
-    }
-    else {
-      this._divElem.classList.add("label__container--disabled");
-      this._labelElem.classList.add("lbl--disabled");
-      this._labelElem.classList.add("cursor-disable");
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    if (this._divElem) {
-      this.observeValue();
-      this.observeEnabled();
-    }
-  }
-  render() {
-    return (h("div", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._divElem = el }, h("div", { class: "label__content" }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el }, this.label), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })), this.mode !== 'action' && this.removePosition && h("ez-icon", { class: "btn-close", size: "small", "icon-name": "close" })));
-  }
-  static get watchers() { return {
-    "value": ["observeValue"],
-    "enabled": ["observeEnabled"]
-  }; }
-};
-EzChip.style = ezChipCss;
-
-export { EzChip as ez_chip };

package/dist/ezui/ez-collapsible-box.entry.js

@@ -1,57 +0,0 @@
-import { r as registerInstance, e as createEvent, h } from './index-1e9d524f.js';
-
-const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
-
-let EzCollapsibleBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    /**
-     * Valor externalizado que garante a exibição ou não do componente.
-     */
-    this.value = false;
-    /**
-    * Define o tamanho do texto e do ícone do componente.
-    */
-    this.headerSize = "small";
-    /**
-    * Define o local onde o ícone será renderizado.
-    */
-    this.iconPlacement = "left";
-    /**
-    * Define se o titulo irá ocupar toda a largura do componente.
-    */
-    this.stretchTitle = false;
-  }
-  observeCollapsedValue() {
-    this.ezChange.emit(this.value);
-  }
-  /**
-   * Esconde ou revela o conteúdo do componente.
-   */
-  async showHide() {
-    this.value = !this.value;
-  }
-  /**
-   * Retorna o tamanho configurado do texto e do ícone.
-   */
-  getHeaderSize() {
-    const sizeAlias = ["xsmall", "xlarge"];
-    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
-    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
-    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
-    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
-  }
-  render() {
-    return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
-        (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
-        (this.stretchTitle ? " collapsible-box__title--stretched" : "") +
-        (this.value ? " collapsible-box__title--no-margin" : "") }, h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, h("slot", null))));
-  }
-  static get watchers() { return {
-    "value": ["observeCollapsedValue"]
-  }; }
-};
-EzCollapsibleBox.style = ezCollapsibleBoxCss;
-
-export { EzCollapsibleBox as ez_collapsible_box };

package/dist/ezui/ez-combo-box.entry.js

@@ -1,439 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-1e9d524f.js';
-import { F as FloatingManager } from './index-b96183c8.js';
-import './index-f32470b5.js';
-import { A as ApplicationUtils } from './ApplicationUtils-30a69eb0.js';
-import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
-import './DialogType-72afa679.js';
-
-const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__list-scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--ez-combo-box__list-scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--ez-combo-box__list-scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__list-scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--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{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ez-combo-box__list-scrollbar--background-color-primary) var(--ez-combo-box__list-scrollbar--background-color-secondary)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__list-scrollbar--background-color-secondary);border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__list-scrollbar--background-color-primary);border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__list-scrollbar--background-color-secondary);width:var(--ez-combo-box__list-scrollbar--width);max-width:var(--ez-combo-box__list-scrollbar--width);min-width:var(--ez-combo-box__list-scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:#f0f2f5;border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__list-scrollbar--background-color);border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-combo-box__list-scrollbar--width);max-width:var(--ez-combo-box__list-scrollbar--width);min-width:var(--ez-combo-box__list-scrollbar--width)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary)}.item__value--hidden{visibility:hidden;position:absolute;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:calc(var(--ez-combo-box__list-height) * 1.5)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:16px;height:16px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__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)}}";
-
-let EzComboBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    this._changeDeboucingTimeout = null;
-    this._limitCharsToSearch = 3;
-    this._deboucingTime = 300;
-    this._maxWidthValue = 0;
-    this._tabPressed = false;
-    this._textEmptyList = "Nenhum resultado encontrado";
-    this._startLoading = false;
-    this._showLoading = true;
-    /**
-     * Deixa o campo disponível ou não para interação com usuário.
-     */
-    this.enabled = true;
-    /**
-     * Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
-     */
-    this.showSelectedValue = false;
-    /**
-     * Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
-     */
-    this.showOptionValue = false;
-    /**
-    * Desabilita a digitação dentro do componente.
-    */
-    this.suppressSearch = false;
-    /**
-     * Remove a opção vazia da lista de opções
-     */
-    this.suppressEmptyOption = false;
-    /**
-     * Permite exibir a mensagem de erro.
-     */
-    this.canShowError = true;
-    /**
-     * Define o modo do tamanho do campo; opções: slim e regular.
-     */
-    this.mode = "regular";
-  }
-  observeErrorMessage() {
-    var _a;
-    if (this._textInput) {
-      this._textInput.errorMessage = this.errorMessage;
-      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
-        this.setInputValue();
-      }
-    }
-  }
-  observeValue(newValue, oldValue) {
-    var _a, _b, _c, _d;
-    if (this._textInput && newValue != oldValue) {
-      const newValueSelected = this.getSelectedOption(newValue);
-      const oldValueSelected = this.getSelectedOption(oldValue);
-      const currentValue = this.getSelectedOption(this.value);
-      if (((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) != ((_b = newValueSelected === null || newValueSelected === void 0 ? void 0 : newValueSelected.value) === null || _b === void 0 ? void 0 : _b.toString())) {
-        this.value = newValueSelected;
-      }
-      if (((_c = newValueSelected === null || newValueSelected === void 0 ? void 0 : newValueSelected.value) === null || _c === void 0 ? void 0 : _c.toString()) !== ((_d = oldValueSelected === null || oldValueSelected === void 0 ? void 0 : oldValueSelected.value) === null || _d === void 0 ? void 0 : _d.toString())) {
-        this.setInputValue();
-        const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
-        this.ezChange.emit(valueEmitted);
-      }
-      this.hideOptions();
-      this._criteria = undefined;
-      this._preSelection = undefined;
-      this.updateVisibleOptions();
-    }
-  }
-  /**
-   * Realiza o foco no componente de seleção
-   */
-  async setFocus() {
-    this._textInput.setFocus();
-  }
-  /**
-   * Remove o foco no componente de seleção
-   */
-  async setBlur() {
-    this._textInput.setBlur();
-  }
-  /**
-   * Retorna informando se o campo está inválido (true | false)
-   */
-  async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
-  }
-  getText() {
-    let text = "";
-    const currentValue = this.getSelectedOption(this.value);
-    if (currentValue) {
-      text = this.showSelectedValue ? `${currentValue.value} - ${currentValue.label}` : currentValue.label;
-    }
-    return text;
-  }
-  getSelectedOption(value) {
-    if (typeof value === "string" || value instanceof String) {
-      return this._visibleOptions.find(o => o.value === value);
-    }
-    return value;
-  }
-  updateVisibleOptions() {
-    let opts = this._source || [];
-    if (!this.searchMode && this._criteria) {
-      const upperCriteria = this._criteria.toUpperCase();
-      opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
-    }
-    if (this.suppressEmptyOption) {
-      this._visibleOptions = opts;
-    }
-    else {
-      this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
-    }
-    this._maxWidthValue = this.getMaxWidthValue();
-  }
-  getMaxWidthValue() {
-    var _a;
-    if (this.showOptionValue) {
-      const arrValues = [];
-      (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.forEach(opt => {
-        const widthValue = this.getWidthValue(opt.value);
-        if (!arrValues.includes(widthValue)) {
-          arrValues.push(widthValue);
-        }
-      });
-      return arrValues.length > 1 ? Math.max(...arrValues) : 0;
-    }
-    return 0;
-  }
-  getWidthValue(value) {
-    if (this._itemValueBasis) {
-      const span = this._itemValueBasis;
-      if (value) {
-        span.innerHTML = value;
-        return span.clientWidth > 0 ? (span.clientWidth + 1) : 0;
-      }
-      else {
-        span.innerHTML = "";
-      }
-    }
-    return 0;
-  }
-  buildItem(opt, index) {
-    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, this.showOptionValue
-      ? h("span", { class: "item__value", title: opt.value, style: { width: this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '' } }, opt.value)
-      : undefined, h("span", { class: "item__label", title: opt.label }, opt.label));
-  }
-  showOptions() {
-    if (!this.enabled) {
-      return;
-    }
-    //FIXME: Provavelmente isso fará com que o popup abra em uma 
-    //posição errada no futuro. Preferi fazer simples no começo,
-    //porque não quis onerar o text input com essa funcionalidade...
-    const top = (this.errorMessage || !this.canShowError || this.mode === "slim") ? "0px" : "-19px";
-    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, top });
-    window.requestAnimationFrame(() => {
-      this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-    });
-  }
-  hideOptions() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-    }
-    this._floatingID = undefined;
-  }
-  isOptionsVisible() {
-    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
-  }
-  nextOption() {
-    if (this.searchMode && !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], true);
-  }
-  previousOption() {
-    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
-    this.scrollToOption(this._visibleOptions[this._preSelection], false);
-  }
-  scrollToOption(opt, down) {
-    window.requestAnimationFrame(() => {
-      const liElem = this._optionsList.querySelector(`li#item_${opt.value}`);
-      if (liElem) {
-        const parent = liElem.parentElement;
-        const parentRect = parent.getBoundingClientRect();
-        const itemRect = liElem.getBoundingClientRect();
-        if (down && itemRect.bottom > parentRect.bottom) {
-          parent.scrollTop = itemRect.top;
-        }
-        else if (!down && itemRect.top < parentRect.top) {
-          parent.scrollTop = 0;
-        }
-      }
-    });
-  }
-  selectCurrentOption() {
-    if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
-      this._preSelection = undefined;
-    }
-    else {
-      this.controlListWithOnlyOne();
-    }
-  }
-  updateSource(source) {
-    this._startLoading = false;
-    if (source instanceof Promise) {
-      this._showLoading = true;
-      source.then(result => {
-        this._showLoading = false;
-        this.updateSource(result);
-      }).catch(() => this._showLoading = false);
-      this.updateVisibleOptions();
-    }
-    else {
-      this._showLoading = false;
-      if (Array.isArray(source)) {
-        this._source = source;
-        this.updateVisibleOptions();
-        if (this._tabPressed) {
-          this._tabPressed = false;
-          this.controlEmptySearch();
-        }
-      }
-      else {
-        this.selectOption(source);
-      }
-    }
-  }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
-  selectOption(newOption) {
-    var _a, _b;
-    const currentValue = this.getSelectedOption(this.value);
-    if (((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString())) {
-      const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
-      this.value = adjustedOpt;
-    }
-    else {
-      this.setInputValue();
-    }
-    if (this.searchMode) {
-      this._visibleOptions = [];
-    }
-    if (this.searchMode) {
-      this._visibleOptions = [];
-    }
-  }
-  loadOptions(mode, argument = "") {
-    this._criteria = argument;
-    this._startLoading = true;
-    if (this.optionLoader) {
-      this.updateSource(this.optionLoader({ mode, argument }));
-    }
-    else {
-      this.updateSource(this.options);
-    }
-  }
-  cancelPreselection() {
-    if (!this._textInput.value && this.value) {
-      this.selectOption(undefined);
-    }
-    else {
-      this.setInputValue();
-    }
-  }
-  setInputValue(clearError = true) {
-    const textValue = this.getText();
-    if ((this._textInput.value || '') !== textValue) {
-      this._textInput.value = textValue;
-      if (clearError) {
-        this.errorMessage = "";
-      }
-    }
-  }
-  clearSearch() {
-    this.value = null;
-  }
-  controlListWithOnlyOne() {
-    if (this.searchMode) {
-      const source = this._visibleOptions;
-      if ((source === null || source === void 0 ? void 0 : source.length) === 1) {
-        this.selectOption(source[0]);
-      }
-    }
-  }
-  controlEmptySearch() {
-    var _a;
-    if (this.searchMode) {
-      if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
-        this.clearSearch();
-        ApplicationUtils.info(this._textEmptyList);
-      }
-      else {
-        this.controlListWithOnlyOne();
-      }
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentWillLoad() {
-    if (this.options === undefined) {
-      this.options = [];
-      const optionsTags = this.el.querySelectorAll("option");
-      if (optionsTags) {
-        optionsTags.forEach(e => {
-          let label = e.innerText;
-          let value = e.getAttribute("value");
-          if (!value) {
-            value = label;
-          }
-          this.options.push({ label, value });
-          e.hidden = true;
-        });
-      }
-    }
-    if (this.searchMode) {
-      this.updateSource([]);
-    }
-    else {
-      this.loadOptions("PRELOAD");
-    }
-  }
-  componentDidRender() {
-    if (this._floatingID === undefined) {
-      this._listWrapper.remove();
-    }
-  }
-  componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
-    this.setInputValue(false);
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handlerIconClick() {
-    this.searchMode ? this.loadOptions("ADVANCED") : this.showOptions();
-  }
-  onTextInputChangeHandler(event) {
-    var _a;
-    this.clearDeboucingTimeout();
-    if (this._startLoading) {
-      this._changeDeboucingTimeout = window.setTimeout(() => {
-        this.onTextInputChangeHandler(event);
-      }, this._deboucingTime);
-      return;
-    }
-    const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-    const argumentNumber = Number(argument || undefined);
-    if (!this._criteria) {
-      this._textInput.value = event.data || argument;
-    }
-    this._criteria = argument;
-    if (argument && (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch)) {
-      if (this.searchMode) {
-        this._showLoading = true;
-        this.clearSource();
-        this._changeDeboucingTimeout = window.setTimeout(() => {
-          this.loadOptions("PREDICTIVE", isNaN(argumentNumber) ? argument : argumentNumber.toString());
-        }, this._deboucingTime);
-      }
-      else {
-        this.updateVisibleOptions();
-      }
-      this.showOptions();
-    }
-    else {
-      this.hideOptions();
-    }
-  }
-  clearDeboucingTimeout() {
-    if (this._changeDeboucingTimeout) {
-      window.clearTimeout(this._changeDeboucingTimeout);
-      this._changeDeboucingTimeout = undefined;
-    }
-  }
-  onTextInputClickHandler() {
-    if (!this.searchMode) {
-      this.showOptions();
-    }
-  }
-  keyDownHandler(event) {
-    this._tabPressed = false;
-    switch (event.key) {
-      case "ArrowDown":
-        this.nextOption();
-        break;
-      case "ArrowUp":
-        this.previousOption();
-        break;
-      case "Enter":
-        this.selectCurrentOption();
-        break;
-      case "Escape":
-        this.cancelPreselection();
-        break;
-      case "Tab":
-        this._tabPressed = true;
-        this.controlListWithOnlyOne();
-        break;
-    }
-    event.stopPropagation();
-  }
-  onTextInputFocusOutHandler() {
-    this.cancelPreselection();
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("ez-text-input", { 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), onClick: () => this.onTextInputClickHandler(), 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: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
-      ? 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("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
-      && h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
-      ? h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem })
-      : undefined, this._visibleOptions.length > 0 && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["observeErrorMessage"],
-    "value": ["observeValue"]
-  }; }
-};
-EzComboBox.style = ezComboBoxCss;
-
-export { EzComboBox as ez_combo_box };