@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.10

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

@@ -1,6 +1,8 @@
 :host {
   /*@doc Define a cor de efeito de sombreado com componente.*/
   --ez-scroller--box-shadow-color: var(--background--body, #fafcff);
+  /*@doc Define o espaçamento entre os botões de navegação e o conteúdo.*/
+  --ez-scroller__nav-button--spacing: var(--space--8, 8px);
 
   /* scrollbar */
   /*@doc Define a cor da barra de rolagem do componente.*/
@@ -141,56 +143,160 @@
 
 .ez-scroller__wrapper--horizontal {
   flex-direction: row;
+  align-items: center;
+  gap: var(--ez-scroller__nav-button--spacing);
 }
 
 .ez-scroller__wrapper--vertical {
   flex-direction: column;
+  align-items: center;
+  gap: var(--ez-scroller__nav-button--spacing);
 }
 
-.ez-scroller__wrapper--shadow-start::before,
-.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--buttons-mode {
+  display: flex;
+}
+
+.ez-scroller__wrapper--buttons-mode.ez-scroller__wrapper--horizontal {
+  flex-direction: row;
+}
+
+.ez-scroller__wrapper--buttons-mode.ez-scroller__wrapper--vertical {
+  flex-direction: column;
+}
+
+/* Shadow effects - applied to wrapper when not in buttons mode */
+.ez-scroller__wrapper:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   content: "";
   display: flex;
   position: absolute;
   z-index: 1;
 }
 
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   width: 24px;
   min-height: calc(100% - 10px);
 }
 
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before {
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before {
   left: 0;
 
   /*public*/
   background: linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
 }
 
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   right: 0;
 
   /*public*/
   background: linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
 }
 
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   min-width: calc(100% - 10px);
   height: 24px;
 }
 
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before {
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before {
   top: 0;
 
   /*public*/
   background: linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
 }
 
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   bottom: 0;
 
   /*public*/
   background: linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
-}
+}
+
+/* Navigation buttons */
+.ez-scroller__container--buttons-mode::-webkit-scrollbar {
+  display: none;
+}
+
+.ez-scroller__container--buttons-mode {
+  scrollbar-width: none;
+  flex: 1;
+  min-width: 0;
+  position: relative;
+}
+
+.ez-scroller__nav-button {
+  /*@doc Define o tamanho do botão de navegação.*/
+  --ez-scroller__nav-button--size: var(--space--32, 32px);
+  /*@doc Define o raio da borda do botão de navegação.*/
+  --ez-scroller__nav-button--border-radius: var(--border--radius-24, 24px);
+  /*@doc Define a largura do gradiente ao lado do botão.*/
+  --ez-scroller__nav-button--gradient-width: 40px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+
+  /*public*/
+  width: var(--ez-scroller__nav-button--size);
+  height: var(--ez-scroller__nav-button--size);
+  border-radius: var(--ez-scroller__nav-button--border-radius);
+}
+
+/* Gradient attached to previous button (left/top) */
+.ez-scroller__nav-button--previous::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.ez-scroller__wrapper--horizontal .ez-scroller__nav-button--previous::after {
+  left: 100%;
+  top: 0;
+  bottom: 0;
+  width: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to left, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+.ez-scroller__wrapper--vertical .ez-scroller__nav-button--previous::after {
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to top, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+/* Gradient attached to next button (right/bottom) */
+.ez-scroller__nav-button--next::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.ez-scroller__wrapper--horizontal .ez-scroller__nav-button--next::before {
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to right, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+.ez-scroller__wrapper--vertical .ez-scroller__nav-button--next::before {
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to bottom, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+.ez-scroller__nav-button ez-icon {
+  pointer-events: none;
+}

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

@@ -1,25 +1,64 @@
 import { JSUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
+import initI18n from '../../utils/i18n';
 import { EzScrollDirection } from './EzScrollDirection';
+import { EzScrollNavigationMode } from './EzScrollNavigationMode';
 export class EzScroller {
   constructor() {
     this._shadowStart = "ez-scroller__wrapper--shadow-start";
     this._shadowEnd = "ez-scroller__wrapper--shadow-end";
+    this._startHidden = undefined;
+    this._endHidden = undefined;
     this.isActive = false;
     this.direction = undefined;
     this.locked = false;
     this.activeShadow = false;
+    this.navigationMode = EzScrollNavigationMode.SCROLLBAR;
+    this.scrollAmount = 200;
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
+  scrollToPrevious() {
+    if (!this._container)
+      return;
+    const scrollOptions = {
+      behavior: 'smooth'
+    };
+    if (this.direction === EzScrollDirection.HORIZONTAL) {
+      scrollOptions.left = Math.max(0, this._container.scrollLeft - this.scrollAmount);
+    }
+    else if (this.direction === EzScrollDirection.VERTICAL) {
+      scrollOptions.top = Math.max(0, this._container.scrollTop - this.scrollAmount);
+    }
+    this._container.scrollTo(scrollOptions);
+  }
+  scrollToNext() {
+    if (!this._container)
+      return;
+    const scrollOptions = {
+      behavior: 'smooth'
+    };
+    if (this.direction === EzScrollDirection.HORIZONTAL) {
+      scrollOptions.left = this._container.scrollLeft + this.scrollAmount;
+    }
+    else if (this.direction === EzScrollDirection.VERTICAL) {
+      scrollOptions.top = this._container.scrollTop + this.scrollAmount;
+    }
+    this._container.scrollTo(scrollOptions);
+  }
   getContainerClass() {
+    const isButtonMode = this.navigationMode === EzScrollNavigationMode.BUTTONS;
     return `ez-scroller__container ez-scroller__container--${this.direction}
       ${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
+      ${isButtonMode ? " ez-scroller__container--buttons-mode" : ""}
     `;
   }
   getWrapperClass() {
-    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
+    const isButtonMode = this.navigationMode === EzScrollNavigationMode.BUTTONS;
+    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}
+      ${isButtonMode ? " ez-scroller__wrapper--buttons-mode" : ""}
+    `;
   }
   finishDrag() {
     if (this._controller) {
@@ -47,27 +86,33 @@ export class EzScroller {
     this.updateShadow();
   }
   updateShadow() {
-    const wrapper = this._wrapper;
-    if (!this.activeShadow || wrapper == undefined) {
+    if (!this.activeShadow) {
+      return;
+    }
+    // Apply shadow classes to container when in buttons mode, otherwise to wrapper
+    const targetElement = this.navigationMode === EzScrollNavigationMode.BUTTONS
+      ? this._container
+      : this._wrapper;
+    if (targetElement == undefined) {
       return;
     }
     const shadowPositions = ["", "start", "end", "middle"];
     const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
     if (currentPosition === "start") {
-      wrapper.classList.add(this._shadowStart);
-      wrapper.classList.remove(this._shadowEnd);
+      targetElement.classList.add(this._shadowStart);
+      targetElement.classList.remove(this._shadowEnd);
     }
     else if (currentPosition === "end") {
-      wrapper.classList.remove(this._shadowStart);
-      wrapper.classList.add(this._shadowEnd);
+      targetElement.classList.remove(this._shadowStart);
+      targetElement.classList.add(this._shadowEnd);
     }
     else if (currentPosition === "middle") {
-      wrapper.classList.add(this._shadowStart);
-      wrapper.classList.add(this._shadowEnd);
+      targetElement.classList.add(this._shadowStart);
+      targetElement.classList.add(this._shadowEnd);
     }
     else {
-      wrapper.classList.remove(this._shadowStart);
-      wrapper.classList.remove(this._shadowEnd);
+      targetElement.classList.remove(this._shadowStart);
+      targetElement.classList.remove(this._shadowEnd);
     }
   }
   configResize() {
@@ -91,6 +136,17 @@ export class EzScroller {
     return this._container.scrollWidth > this._container.clientWidth
       || this._container.scrollHeight > this._container.clientHeight;
   }
+  renderNavigationButtons() {
+    if (this.navigationMode !== EzScrollNavigationMode.BUTTONS || this.direction === EzScrollDirection.BOTH) {
+      return null;
+    }
+    const isHorizontal = this.direction === EzScrollDirection.HORIZONTAL;
+    const previousIconName = isHorizontal ? "arrow_back" : "arrow-up";
+    const nextIconName = isHorizontal ? "arrow-forward" : "arrow-down";
+    const previousButton = this._startHidden ? (h("ez-button", { class: "ez-scroller__nav-button ez-scroller__nav-button--previous", onClick: () => this.scrollToPrevious(), title: this.i18n('ez-scroller.previousButton'), "aria-label": this.i18n('ez-scroller.previousButton'), type: "button", variant: "tertiary", mode: 'icon', suppressAnimation: true, iconName: previousIconName }, h("ez-icon", { iconName: previousIconName }))) : null;
+    const nextButton = this._endHidden ? (h("ez-button", { class: "ez-scroller__nav-button ez-scroller__nav-button--next", onClick: () => this.scrollToNext(), title: this.i18n('ez-scroller.nextButton'), "aria-label": this.i18n('ez-scroller.nextButton'), type: "button", variant: "tertiary", mode: 'icon', suppressAnimation: true, iconName: nextIconName }, h("ez-icon", { iconName: nextIconName }))) : null;
+    return { previousButton, nextButton };
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -129,6 +185,9 @@ export class EzScroller {
       }
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidRender() {
     var _a, _b;
     if (this._container == undefined) {
@@ -145,8 +204,11 @@ export class EzScroller {
     this.updateScroller();
   }
   render() {
-    return (h(Host, null, this.activeShadow
-      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
+    const buttons = this.navigationMode === EzScrollNavigationMode.BUTTONS ? this.renderNavigationButtons() : null;
+    return (h(Host, null, this.activeShadow || this.navigationMode === EzScrollNavigationMode.BUTTONS
+      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, buttons === null || buttons === void 0 ? void 0 :
+        buttons.previousButton, this.getContainerElement(), buttons === null || buttons === void 0 ? void 0 :
+        buttons.nextButton)
       : this.getContainerElement()));
   }
   static get is() { return "ez-scroller"; }
@@ -220,11 +282,54 @@ export class EzScroller {
         "attribute": "active-shadow",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "navigationMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "EzScrollNavigationMode",
+          "resolved": "EzScrollNavigationMode.BUTTONS | EzScrollNavigationMode.SCROLLBAR",
+          "references": {
+            "EzScrollNavigationMode": {
+              "location": "import",
+              "path": "./EzScrollNavigationMode"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de navega\u00E7\u00E3o: 'scrollbar' (padr\u00E3o) ou 'buttons' (bot\u00F5es de carrossel)."
+        },
+        "attribute": "navigation-mode",
+        "reflect": false,
+        "defaultValue": "EzScrollNavigationMode.SCROLLBAR"
+      },
+      "scrollAmount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a quantidade de pixels que ser\u00E1 rolado ao clicar nos bot\u00F5es de navega\u00E7\u00E3o."
+        },
+        "attribute": "scroll-amount",
+        "reflect": false,
+        "defaultValue": "200"
       }
     };
   }
   static get states() {
     return {
+      "_startHidden": {},
+      "_endHidden": {},
       "isActive": {}
     };
   }

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

@@ -4,6 +4,9 @@
   --ez-search--height: 42px;
   /*@doc Define largura do input.*/
   --ez-search--width: 100%;
+  /*@doc Define largura mínima do input.*/
+  --ez-search--min-width: 0;
+
   /*@doc Define largura do slot do ícone do input.*/
   --ez-search__icon--width: 48px;
 
@@ -72,6 +75,7 @@
 
   /*public*/
   width: var(--ez-search--width);
+  min-width: var(--ez-search--min-width);
 }
 
 ez-icon {

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

@@ -41,6 +41,8 @@ export class EzSearch {
     this.suppressPreLoad = true;
     this.autoFocus = false;
     this.alternativePlaceholder = undefined;
+    this.showMore = undefined;
+    this.suppressInputPersist = false;
     this.hideDescriptionInput = false;
   }
   observeErrorMessage() {
@@ -307,6 +309,10 @@ export class EzSearch {
     this.resetOptions();
   }
   setInputValue(clearError = true) {
+    if (this.suppressInputPersist) {
+      this.clearSearch();
+      return;
+    }
     const textValue = this.getText();
     if ((this._textInput.value || '') !== textValue) {
       this._textInput.value = textValue;
@@ -318,6 +324,7 @@ export class EzSearch {
   clearSearch() {
     this.value = null;
     this._currentValue = null;
+    this._textInput.value = "";
     this.ezChange.emit(null);
   }
   controlListWithOnlyOne(focusOnInput = true) {
@@ -421,11 +428,24 @@ export class EzSearch {
     return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(this.i18n("app.requiredInfo"), "").toUpperCase();
   }
   resetOptions() {
+    if (this.showMore) {
+      this.handleResetOptionsWithShowMoreVisible();
+      return;
+    }
     this.hideOptions();
     this._criteria = undefined;
     this._preSelection = undefined;
     this.updateVisibleOptions();
   }
+  handleResetOptionsWithShowMoreVisible() {
+    //Eh preciso adicionar um timeout para garantir que o evento seja escutado pelo botão de mostrar mais.
+    setTimeout(() => {
+      this.hideOptions();
+      this._criteria = undefined;
+      this._preSelection = undefined;
+      this.updateVisibleOptions();
+    }, 100);
+  }
   async handleInitialValue() {
     const valueIsValid = !!this.getValue(this.value);
     if (!valueIsValid) {
@@ -620,12 +640,29 @@ export class EzSearch {
   onChangePreSelection(value) {
     this._preSelection = value;
   }
+  async handleClickShowMore() {
+    var _a, _b;
+    if (!this.optionLoader)
+      return;
+    const argument = (_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+    const searchArgument = { mode: SearchMode.ADVANCED, argument };
+    const selectedOption = await this.optionLoader(searchArgument, this.contextProperties);
+    if (selectedOption && !Array.isArray(selectedOption)) {
+      this.selectOption(selectedOption);
+    }
+  }
+  renderShowMore() {
+    if (!this.showMore || this._showLoading)
+      return;
+    return (h("div", { style: { display: "flex", justifyContent: "center" }, "data-element-id": ElementIDUtils.getInternalIDInfo("showMore") }, h("ez-button", { onClick: async () => await this.handleClickShowMore(), variant: "tertiary", style: { width: "100%", justifyContent: "center" }, label: this.i18n("ez-search.showMore") })));
+  }
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
+    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), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) :
+      h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el], "data-element-id": this.el.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
+      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el], "data-element-id": this.el.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("div", null, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }), this.renderShowMore()))));
   }
   static get is() { return "ez-search"; }
   static get encapsulation() { return "shadow"; }
@@ -1052,6 +1089,41 @@ export class EzSearch {
         "attribute": "alternative-placeholder",
         "reflect": true
       },
+      "showMore": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se deve exibir a op\u00E7\u00E3o de mostrar mais resultados."
+        },
+        "attribute": "show-more",
+        "reflect": false
+      },
+      "suppressInputPersist": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se o valor da op\u00E7\u00E3o selecionada deve persistir no input de texto."
+        },
+        "attribute": "suppress-input-persist",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "hideDescriptionInput": {
         "type": "boolean",
         "mutable": true,
@@ -1064,7 +1136,7 @@ export class EzSearch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Se true o campo de de apresenta\u00E7\u00E3o n\u00E3o ser\u00E1 exibido."
+          "text": "Se true o campo de descri\u00E7\u00E3o n\u00E3o ser\u00E1 exibido."
         },
         "attribute": "hide-description-input",
         "reflect": true,

package/dist/collection/components/ez-search-plus/ez-search-plus.js

@@ -52,6 +52,7 @@ export class EzSearchPlus {
     if (newNormalizedValue === undefined) {
       this.codeValue = undefined;
       this.descriptionValue = undefined;
+      this.cleanFieldsRef();
       this.ezChange.emit(undefined);
       return;
     }
@@ -86,7 +87,7 @@ export class EzSearchPlus {
    * Aplica o foco no campo.
    */
   async setFocus(options) {
-    var _a;
+    var _a, _b;
     if (this.disableCodeInput) {
       (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus(options);
       return;
@@ -95,7 +96,7 @@ export class EzSearchPlus {
       this._latestFocusedInputElement.setFocus(options);
       return;
     }
-    this._textInputCodeValue.setFocus(options);
+    (_b = this._textInputCodeValue) === null || _b === void 0 ? void 0 : _b.setFocus(options);
   }
   /**
   * Obtém o valor do componente só após a compo de apresentação
@@ -382,6 +383,14 @@ export class EzSearchPlus {
   handleDescriptionInputFocus() {
     this.setLatestFocusedInputElement(this._textInputDescriptionValue);
   }
+  cleanFieldsRef() {
+    if (this._textInputCodeValue) {
+      this._textInputCodeValue.value = null;
+    }
+    if (this._textInputDescriptionValue) {
+      this._textInputDescriptionValue.value = null;
+    }
+  }
   getRightIconElement() {
     var _a, _b;
     if (!this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value))) {

package/dist/collection/components/ez-sortable-list/ez-sortable-list.css

@@ -198,7 +198,7 @@
 
 @media (max-height: 630px) {
     .sortable-content{
-        height: 290px;
+        height: 270px;
     }
 }
 

package/dist/collection/components/ez-split-button/ez-split-button.css

@@ -343,7 +343,7 @@
     position: absolute;
     background-color: #f1f1f1;
     min-width: 160px;
-    z-index:  var(--ez-elevation--8);
+    z-index:  var(--elevation--8);
     border-radius: var(--ez-split-button--border-radius);
   }