@sankhyalabs/ezui 5.20.0-dev.2 → 5.20.0-dev.4

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -1,6 +1,7 @@
-import { ElementIDUtils, FloatingManager, ObjectUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, FloatingManager, ObjectUtils, StringUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
-import { CSSVarsUtils } from "../../utils";
+import { ApplicationUtils, CSSVarsUtils } from "../../utils";
+import { REQUIRED_INFO } from "../../utils/constants";
 export class EzComboBox {
   constructor() {
     this._changeDeboucingTimeout = null;
@@ -8,6 +9,7 @@ export class EzComboBox {
     this._maxWidthValue = 0;
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
+    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
     this._lookupMode = false;
     this._preSelection = undefined;
     this._visibleOptions = undefined;
@@ -20,6 +22,7 @@ export class EzComboBox {
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
+    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -43,7 +46,7 @@ export class EzComboBox {
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
       try {
-        if (typeof newValue === "string") {
+        if (this.searchMode && typeof newValue === "string") {
           this.setInputValue();
           return;
         }
@@ -206,7 +209,7 @@ export class EzComboBox {
   }
   updateVisibleOptions() {
     let opts = this._source || [];
-    if (this._criteria) {
+    if (!this.searchMode && this._criteria) {
       const upperCriteria = this._criteria.toUpperCase();
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
@@ -281,7 +284,7 @@ export class EzComboBox {
     return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
   }
   nextOption() {
-    if (!this.isOptionsVisible()) {
+    if (this.searchMode && !this.isOptionsVisible()) {
       return;
     }
     this.showOptions();
@@ -304,6 +307,9 @@ export class EzComboBox {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
+    else {
+      this.controlListWithOnlyOne();
+    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -322,6 +328,7 @@ export class EzComboBox {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
+          this.controlEmptySearch();
         }
       }
       else {
@@ -329,6 +336,10 @@ export class EzComboBox {
       }
     }
   }
+  clearSource() {
+    this._source = [];
+    this.updateVisibleOptions();
+  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -340,6 +351,10 @@ export class EzComboBox {
     else {
       this.resetOptions();
     }
+    if (this.searchMode) {
+      this._visibleOptions = [];
+      this.clearSource();
+    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -375,6 +390,93 @@ export class EzComboBox {
   clearSearch() {
     this.value = null;
   }
+  controlListWithOnlyOne() {
+    var _a;
+    if (this.searchMode) {
+      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) === 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();
+      }
+    }
+  }
+  validateDescriptionValue() {
+    if (!this.searchMode || StringUtils.isEmpty(this.value)) {
+      return;
+    }
+    let value = this.value;
+    if (typeof value === "object") {
+      return;
+    }
+    if (StringUtils.isEmpty(value)) {
+      return;
+    }
+    this.loadDescriptionValue(value);
+  }
+  async loadDescriptionValue(argument) {
+    var _a, _b;
+    if (argument == undefined) {
+      return;
+    }
+    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.loadOptionValue(argument);
+      return;
+    }
+    const searchArgument = {
+      mode: SearchMode.PREDICTIVE,
+      argument
+    };
+    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
+    if (source == undefined) {
+      return;
+    }
+    if (source instanceof Promise) {
+      source.then((result) => {
+        this.setDescriptionValue(result);
+      });
+    }
+    else {
+      this.setDescriptionValue(source);
+    }
+  }
+  setDescriptionValue(source) {
+    const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
+    if (value == undefined || !Object.keys(value).length) {
+      this.showNoResultMessage();
+      return;
+    }
+    this._lookupMode = true;
+    this.value = value;
+  }
+  loadOptionValue(argument) {
+    var _a;
+    const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
+    if (source != undefined) {
+      this.selectOption(source);
+    }
+    else {
+      this.showNoResultMessage();
+    }
+  }
+  async showNoResultMessage() {
+    this.clearSearch();
+    ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
+  }
+  getFieldLabel() {
+    var _a;
+    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(REQUIRED_INFO, "").toUpperCase();
+  }
   resetOptions() {
     this.hideOptions();
     this._criteria = undefined;
@@ -400,7 +502,12 @@ export class EzComboBox {
         });
       }
     }
-    this.loadOptions(SearchMode.PRELOAD);
+    if (this.searchMode) {
+      this.updateSource([]);
+    }
+    else {
+      this.loadOptions(SearchMode.PRELOAD);
+    }
   }
   componentDidRender() {
     var _a;
@@ -410,6 +517,7 @@ export class EzComboBox {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
     });
+    this.validateDescriptionValue();
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
@@ -429,7 +537,13 @@ export class EzComboBox {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.showOptions();
+    this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
+  }
+  buildNumberArgument(argument) {
+    if (this.isTextSearch) {
+      return NaN;
+    }
+    return Number(argument || undefined);
   }
   onTextInputChangeHandler(event) {
     var _a;
@@ -446,12 +560,36 @@ export class EzComboBox {
     }
     this._criteria = argument;
     if (argument) {
-      this.updateVisibleOptions();
-      this.showOptions();
+      if (this.searchMode) {
+        this._showLoading = false;
+        this.clearSource();
+        const enoughChars = argument.length >= this.limitCharsToSearch;
+        const argumentNumber = this.buildNumberArgument(argument);
+        if (enoughChars || !isNaN(argumentNumber)) {
+          this._showLoading = true;
+          this._changeDeboucingTimeout = window.setTimeout(() => {
+            this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
+          }, this._deboucingTime);
+          this.showOptions();
+        }
+        else {
+          this.hideOptions();
+        }
+      }
+      else {
+        this.updateVisibleOptions();
+        this.showOptions();
+      }
     }
     else {
       this.hideOptions();
-      this.updateVisibleOptions();
+      if (this.searchMode) {
+        this._showLoading = false;
+        this.clearSource();
+      }
+      else {
+        this.updateVisibleOptions();
+      }
     }
   }
   clearDeboucingTimeout() {
@@ -461,7 +599,9 @@ export class EzComboBox {
     }
   }
   onTextInputClickHandler() {
-    this.showOptions();
+    if (!this.searchMode) {
+      this.showOptions();
+    }
   }
   keyDownHandler(event) {
     this._tabPressed = false;
@@ -493,6 +633,7 @@ export class EzComboBox {
         break;
       case "Tab":
         this._tabPressed = true;
+        this.controlListWithOnlyOne();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -509,8 +650,11 @@ export class EzComboBox {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   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), 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: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), 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
+    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), 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("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" })), this.showOptionValue
@@ -644,6 +788,23 @@ export class EzComboBox {
         "attribute": "error-message",
         "reflect": true
       },
+      "searchMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true ativa o modo pesquisa do ez-combo-box."
+        },
+        "attribute": "search-mode",
+        "reflect": false
+      },
       "showSelectedValue": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/ez-form-view/fieldbuilder/templates/FileInput.tpl.js

@@ -3,9 +3,11 @@ import { ObjectUtils } from "@sankhyalabs/core";
 export const buildFile = ({ name, label, readOnly, contextName, props }) => {
   const uploadProps = ObjectUtils.removeEmptyValues({
     subTitle: props.subTitle,
-    requestHeaders: props.STORAGESTRATEGY ? {
+    requestHeaders: Object.assign(Object.assign({}, (props.STORAGESTRATEGY && {
       STORAGESTRATEGY: props.STORAGESTRATEGY
-    } : null
+    })), (props.INTERNAL_FILENAME && {
+      INTERNAL_FILENAME: props.INTERNAL_FILENAME
+    })),
   });
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };

package/dist/collection/components/ez-grid/ez-grid.css

@@ -4,6 +4,7 @@
   grid-template-rows: auto 1fr auto;
   height: 100%;
   width: 100%;
+  min-height: 300px;
   
   /*public*/
   /*@doc Define a cor de fundo do header do componente.*/

package/dist/collection/components/ez-grid/ez-grid.js

@@ -7,9 +7,9 @@ import { ApplicationUtils } from '../../utils';
 import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
 const windowInstace = window;
 const matches = (text, filter) => {
-  const normalizedText = StringUtils.replaceAccentuatedCharsLower(text.toLocaleLowerCase());
+  const normalizedText = StringUtils.replaceAccentuatedCharsLower(text === null || text === void 0 ? void 0 : text.toLocaleLowerCase());
   const normalizedFilter = StringUtils.replaceAccentuatedCharsLower(filter.toLocaleLowerCase());
-  return normalizedText.includes(normalizedFilter);
+  return normalizedText === null || normalizedText === void 0 ? void 0 : normalizedText.includes(normalizedFilter);
 };
 export class EzGrid {
   constructor() {

package/dist/collection/components/ez-icon/ez-icon.css

@@ -64,7 +64,7 @@ svg {
 .ez-icon-alert-mail:before { content: "\ea08"; }
 .ez-icon-alert-popup:before { content: "\ea09"; }
 .ez-icon-anexo:before { content: "\ea0a"; }
-.ez-icon-antecipação:before { content: "\ea0b"; }
+.ez-icon-antecipacao:before { content: "\ea0b"; }
 .ez-icon-apps:before { content: "\ea0c"; }
 .ez-icon-arrow-forward:before { content: "\ea0d"; }
 .ez-icon-arrow-upward:before { content: "\ea0e"; }

package/dist/collection/components/ez-search/ez-search.css

@@ -1,333 +1,3 @@
 :host {
-  /* dimensions */
-  /*@doc Define altura do input.*/
-  --ez-search--height: 42px;
-  /*@doc Define largura do input.*/
-  --ez-search--width: 100%;
-  /*@doc Define largura do slot do ícone do input.*/
-  --ez-search__icon--width: 48px;
-
-  /* general */
-  /*@doc Define o raio da borda do input.*/
-  --ez-search--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define o raio da borda do input quando pequeno.*/
-  --ez-search--border-radius-small: var(--border--radius-small, 6px);
-  /*@doc Define o tamanho da fonte dentro do input.*/
-  --ez-search--font-size: var(--text--medium, 14px);
-  /*@doc Define a família da fonte dentro do input.*/
-  --ez-search--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte dentro do input quando pesada.*/
-  --ez-search--font-weight--large: var(--text-weight--large, 500);
-  /*@doc Define o peso da fonte dentro do input quando média.*/
-  --ez-search--font-weight--medium: var(--text-weight--medium, 400);
-  /*@doc Define a cor de fundo da lista de opções.*/
-  --ez-search--background-color--xlight: var(--background--xlight, #fff);
-  /*@doc Define a cor de fundo dos itens da lista de opções.*/
-  --ez-search--background-medium: var(--background--medium, #f0f3f7);
-  /*@doc Define a altura da linha do texto dentro do input.*/
-  --ez-search--line-height: calc(var(--text--medium, 14px) + 4px);
-
-  /* input */
-  /*@doc Define a cor de fundo do input.*/
-  --ez-search__input--background-color: var(--background--medium, #e0e0e0);
-  /*@doc Define o estilo da borda do input.*/
-  --ez-search__input--border: var(--border--medium, 2px solid);
-  /*@doc Define a cor da borda do input.*/
-  --ez-search__input--border-color: var(--ez-search__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
-  /*@doc Define a cor da borda do input quando focado.*/
-  --ez-search__input--focus--border-color: var(--color--primary, #008561);
-  /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --ez-search__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
-  /*@doc Define a cor do texto dentro do input quando desabilitado.*/
-  --ez-search__input--disabled--color: var(--text--disable, #AFB6C0);
-  /*@doc Define a cor da borda do input quando com erro.*/
-  --ez-search__input--error--border-color: #CC2936;
-
-  /* buttons */
-  /*@doc Define a cor do botão de pesquisa do componente.*/
-  --ez-search__btn--color: var(--title--primary, #2B3A54);
-  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
-  --ez-search__btn-disabled--color: var(--text--disable, #AFB6C0);
-  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
-  --ez-search__btn-hover--color: var(--color--primary, #4e4e4e);
-
-  /* label */
-  /*@doc Define a cor do label.*/
-  --ez-search__label--color: var(--title--primary, #2B3A54);
-
-  /* list */
-  /*@doc Define a cor do texto da lista de opções.*/
-  --ez-search__list-title--primary: var(--title--primary, #2B3A54);
-  /*@doc Define a cor do texto do value da lista de opções.*/
-  --ez-search__list-text--primary: var(--text--primary, #626e82);
-  /*@doc Define a altura do box da lista de opções.*/
-  --ez-search__list-height: calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);
-  /*@doc Define a largura mínima da lista de opções.*/
-  --ez-search__list-min-width: 64px;
-
-  /* espaçamento */
-  /*@doc Define um espaçamento mediano entre elementos do componente.*/
-  --ez-search--space--medium: var(--space--medium, 12px);
-  /*@doc Define um espaçamento pequeno entre elementos do componente.*/
-  --ez-search--space--small: var(--space--small, 6px);
-
-  /* scrollbar */
-  /*@doc Define a cor da barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-default: var(--scrollbar--default, #626e82);
-  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
-  /*@doc Define a cor do hover na barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
-  /*@doc Define a cor do active na barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
-  /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --ez-search__scrollbar--border-radius: var(--border--radius-small, 6px);
-  /*@doc Define a largura da barra de rolagem do componente.*/
-  --ez-search__scrollbar--width: var(--space--medium, 12px);
-
-  /***************
-     host style  
-  ***************/
-  /*private*/
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-
-  /*public*/
-  width: var(--ez-search--width);
-}
-
-ez-icon {
-  --ez-icon--color: inherit;
-
-  /*public*/
-  font-weight: var(--text-weight--large, 600);
-}
-
-.suppressed-search-input{
-  /*public*/
-  --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 {
-  /*public*/
-  min-width: var(--ez-search__list-min-width);
-
-  /*private*/
-  position: relative;
   width: 100%;
-}
-
-.list-wrapper {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 0;
-
-  /*public*/
-  z-index: var(--more-visible, 2);
-  max-height: 350px;
-  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;
-
-  /*public*/
-  scrollbar-color: var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background);
-}
-
-.list-options::-webkit-scrollbar {
-  /*public*/
-  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 {
-  /*public*/
-  background-color: var(--ez-search__scrollbar--color-background);
-  border-radius: var(--ez-search__scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb {
-  /*public*/
-  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 {
-  /*public*/
-  background-color: var(--ez-search__scrollbar--color-hover);
-}
-
-.list-options::-webkit-scrollbar-thumb:vertical:active,
-.list-options::-webkit-scrollbar-thumb:horizontal:active {
-  /*public*/
-  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;
-
-  /*public*/
-  border-radius: var(--ez-search--border-radius-small);
-  padding: var(--ez-search--space--small);
-  min-height: var(--ez-search__list-height);
-  gap: var(--space--small, 6px);
-}
-
-.item__value,
-.item__label {
-  flex-basis: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  /*public*/
-  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 {
-  /*public*/
-  font-weight: var(--ez-search--font-weight--medium);
-}
-
-.item__label--bold {
-  /*public*/
-  font-weight: var(--ez-search--font-weight--large);
-}
-
-.item__value {
-  text-align: center;
-
-  /*public*/
-  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;
-  
-  /*public*/
-  min-height: var(--ez-search__list-height);
-}
-
-.message__no-result {
-  /*public*/
-  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;
-
-  /*public*/
-  border: 3px solid var(--ez-search__list-title--primary);
-  border-top: 3px solid transparent;
-}
-
-.item__list > li:hover {
-  /*public*/
-  background-color: var(--ez-search--background-medium);
-}
-
-.preselected {
-  /*public*/
-  background-color: var(--background--medium);
-}
-
-.btn {
-  outline: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-
-  /*public*/
-  color: var(--ez-search__btn--color);
-}
-
-.btn:disabled {
-  cursor: unset;
-
-  /*public*/
-  color: var(--ez-search__btn-disabled--color);
-}
-
-.btn:disabled:hover {
-  cursor: unset;
-
-  /*public*/
-  color: var(--ez-search__btn-disabled--color);
-}
-
-.btn:hover {
-  /*public*/
-  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); }
 }