@sankhyalabs/ezui 5.22.0-dev.7 → 5.22.0-dev.71

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

@@ -35,10 +35,16 @@ export class EzButton {
       ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
     }
   }
+  getButtonSize(sizeParam = "medium") {
+    const sizeList = ["x-small", "small", "medium", "large"];
+    const sizeLowerCase = this.size && this.size.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
   getIconSize(sizeParam = "medium") {
     const sizeList = ["small", "medium", "large"];
     const sizeLowerCase = this.size && this.size.toLowerCase();
-    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+    const sizeMapped = sizeLowerCase === "x-small" ? "small" : sizeLowerCase;
+    return sizeList.includes(sizeMapped) ? sizeMapped : sizeParam;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -60,16 +66,16 @@ export class EzButton {
   }
   render() {
     if (this.mode == "icon") {
-      return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
+      return (h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
     }
     else if (this.mode == "label-icon") {
-      return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
+      return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
     }
     else if (this.mode == "link") {
       return (h("a", { class: `${this.getIconSize()} ${!this.enabled ? "disabled" : ""}`, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
     else {
-      return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+      return (h("button", { class: this.getButtonSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
   }
   static get is() { return "ez-button"; }
@@ -177,8 +183,8 @@ export class EzButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"small\" | \"medium\" | \"large\" | undefined",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -1,7 +1,10 @@
-:host {
+:host {  
   /*@doc Define o tamanho da fonte do componente.*/
   --ez-card-item--font-size: var(--text--medium, 14px);
 
+  /*@doc Define o tamanho da fonte do componente no modo compacto.*/
+  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);
+
   /*@doc Define a família da fonte do componente.*/
   --ez-card-item--font-family: var(--font-pattern, Arial);
 
@@ -12,7 +15,7 @@
   --ez-card-item--font-weight-large: var(--text-weight--large, 600);
 
   /*@doc Define a cor da fonte do componente.*/
-  --ez-card-item--color: var(--title--primary, #2B3A54);
+  --ez-card-item--color: var(--text--primary, #626e82);
 
   /*@doc Define a cor da fonte da key do componente.*/
   --ez-card-item__key--color: var(--text--primary, #626e82);
@@ -29,6 +32,9 @@
   /*@doc Define a cor do highlight / marcação nos textos do componente.*/
   --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);
 
+   /*@doc Define o peso da fonte do componente.*/
+   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);
+
   width: 100%;
   display: flex;
   cursor: pointer;
@@ -39,7 +45,6 @@
   flex-direction: column;
   width: 100%;
   cursor: pointer;
-  padding: 12px;
   z-index: 0;
   position: relative;
   container-type: inline-size;
@@ -47,6 +52,21 @@
   white-space: pre-line;
 }
 
+.card-item__detail{
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: var(--opacity--soft);
+}
+
+
+
+.card-item__expanded {
+  padding: var(--space--medium);
+}
+
 .card-item:hover {
   background: #F0F3F7;
   border-radius: 12px;
@@ -81,22 +101,26 @@
 }
 
 .card-item__details-container__left {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   cursor: pointer;
   width: 50%;
 }
 
 .card-item__details-container__right {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   width: 50%;
   cursor: pointer;
 }
 
-.card-item__detail:not(:last-child) {
+.card-item__detail{
   cursor: pointer;
-  white-space: pre-line;
+}
 
-  /*public*/
+.card-item__detail-default:not(:last-child) {
   padding-bottom: var(--ez-card-item__detail--padding-bottom);
 }
 
@@ -106,8 +130,7 @@
   /*public*/
   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);
+  font-weight: var(--ez-card-item--detail-label--font-weight);
 }
 
 .card-item__detail-value {
@@ -118,7 +141,6 @@
   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 {
@@ -138,7 +160,7 @@
   align-items: center;
 }
 
-.card-item__details-container{
+.card-item__details-container_default{
   display: flex;
 }
 
@@ -146,6 +168,34 @@
   margin-left: auto;
 }
 
+/* Modo compacto */
+.card-item__compacted {
+  padding: var(--space--medium);
+  padding-bottom: 0px;
+  padding-right: 0px;
+}
+
+.card-item__detail-label-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__detail-value-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__title-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__details-container__left-compacted{
+  width: 100%;
+}
+
+.card-item__details-container__right-compacted {
+  width: 100%;
+}
+
+
 @container box (max-width: 550px) {
   .card-item__details {
     flex-direction: column;

package/dist/collection/components/ez-card-item/ez-card-item.js

@@ -4,6 +4,7 @@ export class EzCardItem {
   constructor() {
     this.item = undefined;
     this.enableKey = true;
+    this.compacted = false;
   }
   componentWillRender() {
     this.createDetailList();
@@ -26,14 +27,22 @@ export class EzCardItem {
       }
     }
   }
+  buildDetailContentTitle(detail) {
+    var _a, _b;
+    if ((detail === null || detail === void 0 ? void 0 : detail.label) == undefined && (detail === null || detail === void 0 ? void 0 : detail.value) == undefined)
+      return;
+    const cleanLabel = (_a = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
+    const cleanValue = (_b = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.value)) === null || _b === void 0 ? void 0 : _b.replace(/<[^>]*>/g, '');
+    return `${cleanLabel}: ${cleanValue}`;
+  }
   buildDetailContent(detail) {
-    return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+    return h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
   }
   render() {
     return (h(Host, null, this.item &&
-      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: "card-item__title" }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details-container" }, h("div", { class: "card-item__details-container__left" }, this._details.detailsLeft.map(detail => {
+      h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, h("div", { class: `card-item__details-container__left ${this.compacted ? "card-item__details-container__left-compacted" : ""}` }, this._details.detailsLeft.map(detail => {
         return this.buildDetailContent(detail);
-      })), h("div", { class: "card-item__details-container__right" }, this._details.detailsRight.map(detail => {
+      })), h("div", { class: `card-item__details-container__right ${this.compacted ? "card-item__details-container__right-compacted" : ""}` }, this._details.detailsRight.map(detail => {
         return this.buildDetailContent(detail);
       })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
   }
@@ -87,6 +96,24 @@ export class EzCardItem {
         "attribute": "enable-key",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "compacted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se o componente ser\u00E1 apresentado no modo compacto."
+        },
+        "attribute": "compacted",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -129,11 +129,6 @@ input.regular-mode {
   cursor: pointer;
   border-radius: 50%;
   position: relative;
-
-
-  /*public*/
-  width: var(--ez-check--width);
-  height: var(--ez-check--height);
 }
 
 input.compact{
@@ -363,5 +358,5 @@ input.switch-mode:checked:disabled::after {
 }
 
 .label--padding {
-  padding-left: var(--space--small);
+  padding-left: var(--space--extra-small);
 }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -73,7 +73,7 @@ ez-icon {
 .collapsible-box__title {
   /*private*/
   position: relative;
-  width: auto;
+  width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -98,7 +98,7 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
-  display: flex;
+  display: block;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;

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

@@ -8,6 +8,11 @@
   /*@doc Define largura do slot do ícone do input.*/
   --ez-combo-box__icon--width: 48px;
 
+  /*@doc Define a largura maxima do componente.*/
+  --ez-combo-box__min-width: 0px;
+  /*@doc Define a largura minima do componente.*/
+  --ez-combo-box__max-width: 100%;
+
   /* general */
   /*@doc Define o raio da borda do input.*/
   --ez-combo-box--border-radius: var(--border--radius-medium, 12px);
@@ -290,6 +295,7 @@ li:hover {
   border: none;
   background: none;
   cursor: pointer;
+  padding: 0px;
 
   /*public*/
   color: var(--ez-combo-box__btn--color);
@@ -303,7 +309,7 @@ li:hover {
 }
 
 .btn:disabled:hover {
-  cursor: unset;
+  cursor: not-allowed;
 
   /*public*/
   color: var(--ez-combo-box__btn-disabled--color);
@@ -322,6 +328,12 @@ ez-text-input:hover .btn__close, ez-text-input:focus .btn__close {
   visibility: visible;
 }
 
+.text-input-slot-container{
+  --ez-text-input__icon--width:32px;
+  --ez-text-input__min-width: var(--ez-combo-box__min-width);
+  --ez-text-input__max-width: var(--ez-combo-box__max-width);
+}
+
 
 @-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }

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

@@ -1,4 +1,4 @@
-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";
 export class EzComboBox {
@@ -25,11 +25,14 @@ export class EzComboBox {
     this.suppressSearch = false;
     this.optionLoader = undefined;
     this.suppressEmptyOption = false;
+    this.stopPropagateEnterKeyEvent = true;
     this.canShowError = true;
     this.mode = "regular";
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
+    this.autoFocus = false;
+    this.noMargin = false;
   }
   observeErrorMessage() {
     var _a;
@@ -92,9 +95,9 @@ export class EzComboBox {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
+  async setFocus(options) {
     if (this._textInput) {
-      this._textInput.setFocus();
+      this._textInput.setFocus(options);
     }
   }
   /**
@@ -171,7 +174,7 @@ export class EzComboBox {
       return this.listOptionsPosition;
     }
     return {
-      verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
+      verticalPosition: 6
     };
   }
   isDifferentValues(firstValue, secondValue) {
@@ -254,11 +257,15 @@ export class EzComboBox {
       : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
   }
   showOptions() {
+    var _a, _b;
     if (!this.enabled)
       return;
     if (this.isOptionsVisible()) {
       return;
     }
+    const valueString = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value;
+    const indexValue = this._visibleOptions.findIndex(option => option.value === valueString);
+    this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
     this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, isFixed: true, backClickListener: () => this.hideOptions() });
@@ -300,11 +307,26 @@ export class EzComboBox {
         liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     });
   }
-  selectCurrentOption() {
+  selectCurrentOption(focusOnInput = true) {
     if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
+      this.selectOption(this._visibleOptions[this._preSelection], focusOnInput);
       this._preSelection = undefined;
     }
+    else {
+      this.controlListWithOnlyOne(focusOnInput);
+    }
+  }
+  controlListWithOnlyOne(focusOnInput = true) {
+    var _a;
+    const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
+    if ((source === null || source === void 0 ? void 0 : source.length) > 0) {
+      let title = StringUtils.decodeHtmlEntities(source[0].label);
+      const option = {
+        value: source[0].value,
+        label: title,
+      };
+      this.selectOption(option, focusOnInput);
+    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -330,7 +352,7 @@ export class EzComboBox {
       }
     }
   }
-  selectOption(newOption) {
+  selectOption(newOption, focusOnInput = true) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
     if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString()))
@@ -341,6 +363,11 @@ export class EzComboBox {
     else {
       this.resetOptions();
     }
+    if (focusOnInput) {
+      setTimeout(() => {
+        this.setFocus();
+      }, 0);
+    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -362,7 +389,6 @@ export class EzComboBox {
         this.setInputValue(false);
       }, this._deboucingTime);
     }
-    this.resetOptions();
   }
   setInputValue(clearError = true) {
     const textValue = this.getText();
@@ -425,6 +451,11 @@ export class EzComboBox {
         }
       });
     });
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   //---------------------------------------------
   // Event handlers
@@ -451,7 +482,7 @@ export class EzComboBox {
       this.showOptions();
     }
     else {
-      this.hideOptions();
+      this._preSelection = undefined;
       this.updateVisibleOptions();
     }
   }
@@ -479,21 +510,38 @@ export class EzComboBox {
     }
     switch (event.key) {
       case "ArrowDown":
-        this.nextOption();
         event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.showOptions();
+        this.nextOption();
         break;
       case "ArrowUp":
-        this.previousOption();
         event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.showOptions();
+        this.previousOption();
         break;
       case "Enter":
-        this.selectCurrentOption();
+        this.handleEventPropagation(event);
+        if (this.isOptionsVisible()) {
+          this.selectCurrentOption();
+        }
         break;
       case "Escape":
+        if (this.isOptionsVisible()) {
+          event.stopPropagation();
+        }
         this.cancelPreselection();
+        this.resetOptions();
         break;
       case "Tab":
         this._tabPressed = true;
+        if (this.isOptionsVisible()) {
+          this.selectCurrentOption(false);
+        }
+        this.resetOptions();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -502,6 +550,12 @@ export class EzComboBox {
     //e o contexto pode reagir (fechar um popup por exemplo).
     //event.stopPropagation();
   }
+  //O evento deve ter sua propagação interrompida, apenas se a lista de opções estiver sendo exibida.
+  handleEventPropagation(event) {
+    if (this._listContainer.hasChildNodes() && this.stopPropagateEnterKeyEvent) {
+      event.stopPropagation();
+    }
+  }
   onTextInputFocusOutHandler() {
     if (this.hideErrorOnFocusOut)
       this.cancelPreselection();
@@ -511,7 +565,7 @@ export class EzComboBox {
   }
   render() {
     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: `text-input-slot-container ${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, noMargin: this.noMargin }, 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
       && 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
@@ -745,6 +799,24 @@ export class EzComboBox {
         "reflect": false,
         "defaultValue": "false"
       },
+      "stopPropagateEnterKeyEvent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, ineterrompe a propaga\u00E7\u00E3o do evento de KeyDown da tecla enter"
+        },
+        "attribute": "stop-propagate-enter-key-event",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "canShowError": {
         "type": "boolean",
         "mutable": false,
@@ -835,6 +907,42 @@ export class EzComboBox {
         "attribute": "is-text-search",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o campo n\u00E3o ter\u00E1 espa\u00E7amento externo."
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -889,11 +997,18 @@ export class EzComboBox {
       },
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ez-date-input/ez-date-input.css

@@ -22,7 +22,7 @@
 }
 
 .btn-open-cal:disabled {
-  cursor: unset;
+  cursor: not-allowed;
 }
 
 .btn-open-cal::after {