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

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.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+
+const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;line-break:anywhere;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
+
+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;
+
+exports.ez_card_item = EzCardItem;

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

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-require('./ApplicationUtils-c9d1205c.js');
+const ApplicationUtils = 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)}}";
 
@@ -20,6 +21,7 @@ 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;
@@ -32,6 +34,7 @@ const EzComboBox = class {
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
+    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -55,7 +58,7 @@ const EzComboBox = class {
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
       try {
-        if (typeof newValue === "string") {
+        if (this.searchMode && typeof newValue === "string") {
           this.setInputValue();
           return;
         }
@@ -218,7 +221,7 @@ const EzComboBox = class {
   }
   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);
     }
@@ -293,7 +296,7 @@ const EzComboBox = class {
     return this._floatingID !== undefined && core.FloatingManager.isFloating(this._floatingID);
   }
   nextOption() {
-    if (!this.isOptionsVisible()) {
+    if (this.searchMode && !this.isOptionsVisible()) {
       return;
     }
     this.showOptions();
@@ -316,6 +319,9 @@ const EzComboBox = class {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
+    else {
+      this.controlListWithOnlyOne();
+    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -334,6 +340,7 @@ const EzComboBox = class {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
+          this.controlEmptySearch();
         }
       }
       else {
@@ -341,6 +348,10 @@ const EzComboBox = class {
       }
     }
   }
+  clearSource() {
+    this._source = [];
+    this.updateVisibleOptions();
+  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -352,6 +363,10 @@ const EzComboBox = class {
     else {
       this.resetOptions();
     }
+    if (this.searchMode) {
+      this._visibleOptions = [];
+      this.clearSource();
+    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -387,6 +402,93 @@ 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;
@@ -412,7 +514,12 @@ const EzComboBox = class {
         });
       }
     }
-    this.loadOptions(SearchMode.PRELOAD);
+    if (this.searchMode) {
+      this.updateSource([]);
+    }
+    else {
+      this.loadOptions(SearchMode.PRELOAD);
+    }
   }
   componentDidRender() {
     var _a;
@@ -422,6 +529,7 @@ 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);
@@ -441,7 +549,13 @@ const EzComboBox = class {
   // 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;
@@ -458,12 +572,36 @@ const EzComboBox = class {
     }
     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() {
@@ -473,7 +611,9 @@ const EzComboBox = class {
     }
   }
   onTextInputClickHandler() {
-    this.showOptions();
+    if (!this.searchMode) {
+      this.showOptions();
+    }
   }
   keyDownHandler(event) {
     this._tabPressed = false;
@@ -505,6 +645,7 @@ const EzComboBox = class {
         break;
       case "Tab":
         this._tabPressed = true;
+        this.controlListWithOnlyOne();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -521,8 +662,11 @@ 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: "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
+    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
       && 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-filter-input_2.cjs.entry.js

@@ -0,0 +1,137 @@
+'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 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_filter_input = EzFilterInput;
+exports.multi_selection_box_message = MultiSelectionBoxMessage;

package/dist/cjs/ez-form-view.cjs.entry.js

@@ -48,9 +48,11 @@ const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) =>
 const buildFile = ({ name, label, readOnly, contextName, props }) => {
   const uploadProps = core.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 (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));