@sankhyalabs/ezui 5.20.0-dev.1 → 5.20.0-dev.11

package/README.md

@@ -15,13 +15,13 @@ Esse projeto é constituído por um monorepo com a seguinte hierarquia:
     -- .gitlab-ci.yml
 ```
 
-Observe que na raiz do ez-ui temos um packege.json que define as configurações de storybook para todos os componentes filhos dentro da hierarquia. 
+Observe que na raiz do ez-ui temos um packege.json que define as configurações de storybook para todos os componentes filhos dentro da hierarquia.
 Cada subpasta (component1, component2) são componentes [Stencil](https://stenciljs.com/).
 
 #### O EzUI foi baseado no [UiKit](https://xd.adobe.com/view/d45d91bf-f5a8-4814-899f-e781732807d1-810e/grid) disponibilizado pela equipe de UX da Sankhya.
 
 ## Executando o projeto
-Para iniciar o projeto, basta ir até a pasta do componente que deseja testar (ex: ez-ui/component1) e executar o comando: `npm install && npm run dev`  
+Para iniciar o projeto, basta ir até a pasta do componente que deseja testar (ex: ez-ui/component1) e executar o comando: `npm install && npm run dev`
 Este procedimento irá iniciar um servidor do storybook para testar o componente. A porta que o servidor estará sendo executado é apresentada no console ao final do comando.
 
 ## Padrão de commit e merge request:
@@ -41,10 +41,9 @@ Hoje estamos utilizando o padrão de semantic release baseado no [angular](https
   └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
 ```
 
- - Na solicitação de merge request deve ter um titulo com o seguinte padrão: SKA-111 - Titulo  sugestivo da minha modificação, onde, SKA-111 é id do card do jira.
+ - Na solicitação de merge request deve ter um titulo com o seguinte padrão: KB-11111 - Titulo  sugestivo da minha modificação, onde, KB-11111 é id do card do Kanbanize.
 
 ## Fontes notáveis
-
 - **ez-ui/.storybook/***: Nessa pasta temos arquivos de configuração do storybook. Essa pasta é utilizada em ambiente de produção.
     * **ez-ui/.storybook/preview-head.html**: Esse arquivo é responsável por fazer o import de módulos dos webcomponents e dos styles globais da aplicação. Esse arquivo é utilizado em ambiente de produção.
 - **ez-ui/.storybook-dev/***: Nessa pasta temos arquivos de configuração do storybook. Porém essa pasta é utilizada apenas em ambiente de desenvolvimento.
@@ -75,4 +74,4 @@ o build do ezui, link do react-output e ezui, build do react-output e a disponib
 - [Diretrizes de documentação](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Diretrizes-de-documenta%C3%A7%C3%A3o)
 - [Link ente projetos](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Link-ente-projetos)
 - [Definindo bons data-element-id de testabilidade no design system](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Definindo-bons-data-element-id-de-testabilidade-no-design-system)
-- [Criando exemplos de componentes](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Criando-exemplos-de-componentes)
+- [Criando exemplos de componentes](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Criando-exemplos-de-componentes)

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

@@ -61,11 +61,13 @@ const EzAlertList = class {
   /**
    * Gerencia a exibição do overlay usando FloatingManager do Core.
    */
-  async manageOverlay() {
-    if (this.opened) {
+  manageOverlay() {
+    if (this.opened && this._container) {
       this._overlayId = core.FloatingManager.float(this._container, this._overlayRef, this.getFloatOptions());
     }
     else {
+      if (this._overlayId === undefined)
+        return;
       core.FloatingManager.close(this._overlayId);
       this._overlayId = undefined;
     }
@@ -74,8 +76,10 @@ const EzAlertList = class {
    * Atualiza a posição da lista.
    */
   updatePosition(right, bottom) {
-    core.FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
-      bottom }));
+    if (this.opened) {
+      core.FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
+        bottom }));
+    }
   }
   ;
   /**
@@ -84,7 +88,7 @@ const EzAlertList = class {
   getFloatOptions() {
     return {
       autoClose: false,
-      isFixed: false,
+      isFixed: true,
       bottom: '10px',
       right: '10px',
     };
@@ -106,9 +110,9 @@ const EzAlertList = class {
     const boxHeight = this._container.getBoundingClientRect().height;
     return ((docHeight - boxHeight) / 2) + 'px';
   }
-  componentDidRender() {
+  componentDidLoad() {
     this.manageOverlay();
-    if (this.opened) {
+    if (this.opened && this._container) {
       this._container.focus();
     }
   }
@@ -116,27 +120,28 @@ const EzAlertList = class {
     this.dataElementId = core.ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
   }
   render() {
-    return (index.h(index.Host, Object.assign({}, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), index.h("div", { ref: elem => (this._overlayRef = elem) }, index.h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, index.h("div", { class: "alert-list__content" }, index.h("div", { class: "alert-list__header" }, index.h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), index.h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (index.h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": core.ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), index.h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": core.ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
-        this.opened = false;
-      }, title: 'Fechar' }))), index.h("div", { class: "alert-list__expandable-content" }, index.h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
-        return (index.h("a", { href: "#", style: {
-            fontFamily: "var(--font-pattern, 'Roboto')",
-            fontSize: 'var(--text--medium, 14px)',
-            fontWeight: 'var(--text-weight--medium, 400)',
-            color: 'var(--color--primary, #008561)',
-            marginRight: '4px',
-            cursor: 'pointer',
-            display: 'flex',
-            width: 'max-content',
-            textDecoration: 'none'
-          } }, this.getTitleText(item)));
-      }, dataSource: this.alerts.map((alert, index) => {
-        var _a;
-        return {
-          id: this.alertId(alert.title, index),
-          label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
-        };
-      }) })))))));
+    return (index.h(index.Host, Object.assign({}, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
+      (index.h("div", { ref: elem => (this._overlayRef = elem) }, index.h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, index.h("div", { class: "alert-list__content" }, index.h("div", { class: "alert-list__header" }, index.h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), index.h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (index.h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": core.ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), index.h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": core.ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+          this.opened = false;
+        }, title: 'Fechar' }))), index.h("div", { class: "alert-list__expandable-content" }, index.h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
+          return (index.h("a", { href: "#", style: {
+              fontFamily: "var(--font-pattern, 'Roboto')",
+              fontSize: 'var(--text--medium, 14px)',
+              fontWeight: 'var(--text-weight--medium, 400)',
+              color: 'var(--color--primary, #008561)',
+              marginRight: '4px',
+              cursor: 'pointer',
+              display: 'flex',
+              width: 'max-content',
+              textDecoration: 'none'
+            } }, this.getTitleText(item)));
+        }, dataSource: this.alerts.map((alert, index) => {
+          var _a;
+          return {
+            id: this.alertId(alert.title, index),
+            label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
+          };
+        }) })))))) : null));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-card-item_3.cjs.entry.js

@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+
+const ezCardItemCss = ":host {\n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--text-weight--medium, 400);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--text-weight--large, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--title--primary, #2B3A54);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  padding: 12px;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  cursor: pointer;\n  justify-content: space-between;\n  gap: var(--space--small, 6px);\n}\n\n.card-item__details-left {\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-right {\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail:not(:last-child) {\n  cursor: pointer;\n  white-space: pre-line;\n\n  /*public*/\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item__detail-label--color);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item--color);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-left {\n    width: 100%;\n  }\n  \n  .card-item__details-right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";
+
+const EzCardItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezClick = index.createEvent(this, "ezClick", 7);
+    this.item = undefined;
+  }
+  componentWillRender() {
+    this.createDetailList();
+  }
+  componentDidLoad() {
+    var _a, _b;
+    const dataInfo = { id: core.StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
+    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  createDetailList() {
+    var _a, _b, _c;
+    this._details = { detailsLeft: [], detailsRight: [] };
+    let cont = 0;
+    if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
+      for (const attribute in this.item.details) {
+        cont < 3 ?
+          this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
+          this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
+        cont++;
+      }
+    }
+  }
+  buildDetailContent(detail) {
+    return index.h("div", { class: "card-item__detail" }, index.h("label", { class: "card-item__detail-label" }, detail.label), ": ", index.h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+  }
+  render() {
+    return (index.h(index.Host, null, this.item &&
+      index.h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, index.h("label", { class: "card-item__title" }, index.h("span", { class: "card-item__key", innerHTML: this.item.key }), index.h("span", { innerHTML: this.item.title })), index.h("div", { class: "card-item__details" }, index.h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
+        return this.buildDetailContent(detail);
+      })), index.h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
+        return this.buildDetailContent(detail);
+      }))))));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzCardItem.style = ezCardItemCss;
+
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+const EzFilterInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.ezSearching = index.createEvent(this, "ezSearching", 7);
+    this.ezFocusIn = index.createEvent(this, "ezFocusIn", 7);
+    this._searchingText = "";
+    this.handleFocus = () => {
+      if (this._searchingText === "") {
+        this._textInput.value = "";
+      }
+      else {
+        this._textInput.value = this._searchingText;
+      }
+      this.ezFocusIn.emit();
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.asyncSearch = false;
+    this.canShowError = true;
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus() {
+    this._textInput.setFocus();
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /**
+   * Método responsável por setar um novo valor ao campo.
+   */
+  async setValue(newValue) {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this._searchingText = "";
+    }
+    else {
+      this._textInput.value = newValue;
+    }
+  }
+  /**
+   * Método responsável por resetar o valor do campo para o ultimo valor inputado.
+   */
+  async endSearch() {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (this._textInput.value !== this.value) {
+      this._textInput.value = this.value;
+    }
+  }
+  handleChange(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (this.asyncSearch) {
+      this._searchingText = newValue;
+      this.ezSearching.emit(newValue);
+    }
+    else if (newValue !== this.value) {
+      this.value = newValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
+  render() {
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"]
+  }; }
+};
+EzFilterInput.style = ezFilterInputCss;
+
+const multiSelectionBoxMessageCss = ".multi-selection__message{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;min-height:320px;text-align:center}.multi-selection__text-message{margin-top:-30px;font-family:var(--font-pattern);font-size:var(--text--meduim);padding:var(--space-xs);color:var(--text--primary)}";
+
+const MultiSelectionBoxMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.message = undefined;
+  }
+  render() {
+    return (index.h("div", { class: "multi-selection__message" }, index.h("span", { class: "multi-selection__text-message" }, this.message)));
+  }
+};
+MultiSelectionBoxMessage.style = multiSelectionBoxMessageCss;
+
+exports.ez_card_item = EzCardItem;
+exports.ez_filter_input = EzFilterInput;
+exports.multi_selection_box_message = MultiSelectionBoxMessage;

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

@@ -4,11 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
+require('./ApplicationUtils-c9d1205c.js');
 const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const constants = require('./constants-2714478b.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--line-height:calc(var(--text--medium, 14px) + 4px);--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) + 4px);--ez-combo-box__list-min-width:64px;--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__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{min-width:var(--ez-combo-box__list-min-width);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:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);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%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__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-combo-box--border-radius-small);padding: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-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--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-combo-box__list-height)}.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:14px;height:14px;-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)}}";
 
@@ -21,7 +20,6 @@ const EzComboBox = class {
     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;
@@ -34,7 +32,6 @@ const EzComboBox = class {
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
-    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -58,7 +55,7 @@ const EzComboBox = class {
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
       try {
-        if (this.searchMode && typeof newValue === "string") {
+        if (typeof newValue === "string") {
           this.setInputValue();
           return;
         }
@@ -221,7 +218,7 @@ const EzComboBox = class {
   }
   updateVisibleOptions() {
     let opts = this._source || [];
-    if (!this.searchMode && this._criteria) {
+    if (this._criteria) {
       const upperCriteria = this._criteria.toUpperCase();
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
@@ -296,7 +293,7 @@ const EzComboBox = class {
     return this._floatingID !== undefined && core.FloatingManager.isFloating(this._floatingID);
   }
   nextOption() {
-    if (this.searchMode && !this.isOptionsVisible()) {
+    if (!this.isOptionsVisible()) {
       return;
     }
     this.showOptions();
@@ -319,9 +316,6 @@ const EzComboBox = class {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
-    else {
-      this.controlListWithOnlyOne();
-    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -340,7 +334,6 @@ const EzComboBox = class {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
-          this.controlEmptySearch();
         }
       }
       else {
@@ -348,10 +341,6 @@ const EzComboBox = class {
       }
     }
   }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -363,10 +352,6 @@ const EzComboBox = class {
     else {
       this.resetOptions();
     }
-    if (this.searchMode) {
-      this._visibleOptions = [];
-      this.clearSource();
-    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -385,7 +370,7 @@ const EzComboBox = class {
     }
     else {
       window.setTimeout(() => {
-        this.setInputValue();
+        this.setInputValue(false);
       }, this._deboucingTime);
     }
     this.resetOptions();
@@ -402,93 +387,6 @@ const EzComboBox = class {
   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.ApplicationUtils.info(this._textEmptyList);
-      }
-      else {
-        this.controlListWithOnlyOne();
-      }
-    }
-  }
-  validateDescriptionValue() {
-    if (!this.searchMode || core.StringUtils.isEmpty(this.value)) {
-      return;
-    }
-    let value = this.value;
-    if (typeof value === "object") {
-      return;
-    }
-    if (core.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.ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
-  }
-  getFieldLabel() {
-    var _a;
-    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(constants.REQUIRED_INFO, "").toUpperCase();
-  }
   resetOptions() {
     this.hideOptions();
     this._criteria = undefined;
@@ -514,12 +412,7 @@ const EzComboBox = class {
         });
       }
     }
-    if (this.searchMode) {
-      this.updateSource([]);
-    }
-    else {
-      this.loadOptions(SearchMode.PRELOAD);
-    }
+    this.loadOptions(SearchMode.PRELOAD);
   }
   componentDidRender() {
     var _a;
@@ -529,7 +422,6 @@ const EzComboBox = class {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       core.ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
     });
-    this.validateDescriptionValue();
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
@@ -549,13 +441,7 @@ const EzComboBox = class {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
-  }
-  buildNumberArgument(argument) {
-    if (this.isTextSearch) {
-      return NaN;
-    }
-    return Number(argument || undefined);
+    this.showOptions();
   }
   onTextInputChangeHandler(event) {
     var _a;
@@ -572,36 +458,12 @@ const EzComboBox = class {
     }
     this._criteria = argument;
     if (argument) {
-      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();
-      }
+      this.updateVisibleOptions();
+      this.showOptions();
     }
     else {
       this.hideOptions();
-      if (this.searchMode) {
-        this._showLoading = false;
-        this.clearSource();
-      }
-      else {
-        this.updateVisibleOptions();
-      }
+      this.updateVisibleOptions();
     }
   }
   clearDeboucingTimeout() {
@@ -611,9 +473,7 @@ const EzComboBox = class {
     }
   }
   onTextInputClickHandler() {
-    if (!this.searchMode) {
-      this.showOptions();
-    }
+    this.showOptions();
   }
   keyDownHandler(event) {
     this._tabPressed = false;
@@ -645,7 +505,6 @@ const EzComboBox = class {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -662,11 +521,8 @@ const EzComboBox = class {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   render() {
-    var _a;
     core.ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, index.h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.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)
-      ? index.h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, index.h("ez-icon", { iconName: "close" }))
-      : undefined), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, index.h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.h("ez-icon", { iconName: "chevron-down" }))), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
       && this._visibleOptions.length === 0
       && index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
       && index.h("div", { class: "message" }, index.h("div", { class: "message__loading" })), this.showOptionValue

package/dist/cjs/ez-date-input.cjs.entry.js

@@ -111,6 +111,9 @@ const EzDateInput = class {
     this._calendar.hide();
   }
   handleBlur() {
+    if (!this._changePending) {
+      return;
+    }
     try {
       const strValue = this._textInput.value;
       const newValue = core.DateUtils.strToDate(strValue);

package/dist/cjs/ez-date-time-input.cjs.entry.js

@@ -163,6 +163,9 @@ const EzDateTimeInput = class {
   }
   handleBlur() {
     var _a, _b;
+    if (!this._changePending) {
+      return;
+    }
     try {
       const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
       const newValue = this.getParsedDateTime();