@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.2

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

@@ -1,10 +1,11 @@
 import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, ApplicationContext, KeyboardManager, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { Host, h } from '@stencil/core';
-import { ApplicationUtils } from '../../utils';
+import { ApplicationUtils, buildFieldSearch } from '../../utils';
 import AgGridController from './controller/ag-grid/AgGridController';
 import { SelectionCounter } from './subcomponents/selection-counter';
 import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
+import { focusOnFieldSerch, LABEL_SEARCH_COLUMN, SEARCH_FIELD_FULL_WIDTH, SHORTCUT_SEARCH_FIELD } from '../../utils/searchColumn/search-column';
 const windowInstace = window;
 const matches = (text, filter) => {
   const normalizedText = StringUtils.replaceAccentuatedCharsLower(text === null || text === void 0 ? void 0 : text.toLocaleLowerCase());
@@ -45,6 +46,9 @@ export class EzGrid {
     this.outlineMode = false;
     this.enableRowTableStriped = true;
     this.compact = false;
+    this.useSearchColumn = true;
+    this.suppressHorizontalScroll = false;
+    this.mode = "complete";
   }
   /**
    * Aplica a definição de colunas.
@@ -98,7 +102,7 @@ export class EzGrid {
    * Localiza determinada coluna tornando-a visível.
    */
   async locateColumn(columnName) {
-    this._gridController.locateColumn(columnName);
+    this._gridController.locateColumn(columnName, this._element);
   }
   /**
    * Usa um argumento para filtrar as colunas po label
@@ -201,6 +205,14 @@ export class EzGrid {
       this._showPaginationDescription();
     }
   }
+  async observeModeChange(newMode = this.mode) {
+    if (newMode === "simple") {
+      this.canEdit = false;
+      this.multipleSelection = false;
+      this.suppressCheckboxColumn = true;
+      this.compact = true;
+    }
+  }
   onSelectionChange(evt) {
     this._currentPageSelected = evt.detail.selectionHeaderStatus === true;
     if (this.dataUnit) {
@@ -453,6 +465,7 @@ export class EzGrid {
       enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick,
       enableLockManagerLoadingComp: this.enableLockManagerLoadingComp,
       enableRowTableStriped: this.enableRowTableStriped,
+      suppressHorizontalScroll: this.suppressHorizontalScroll
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -553,6 +566,7 @@ export class EzGrid {
   }
   connectedCallback() {
     var _a;
+    this.observeModeChange();
     (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.registryListeners();
   }
   componentWillRender() {
@@ -585,6 +599,9 @@ export class EzGrid {
     return this.columnfilterDataSource;
   }
   hideHeader() {
+    if (this.mode === "simple") {
+      return true;
+    }
     return !this._hasLeftButtons && !this._paginationInfo;
   }
   resolveLeftHeaderClass() {
@@ -621,15 +638,42 @@ export class EzGrid {
         this.nextPage();
       }
     }, { description: "Avança para a próxima página.", element: this._element });
+    if (this.useSearchColumn) {
+      this._keyboardManager.bind(SHORTCUT_SEARCH_FIELD, async () => {
+        if (!this._container || !this._ezPopoverSearchColumn)
+          return;
+        const container = this._container.getBoundingClientRect();
+        await focusOnFieldSerch(this._columnSearch);
+        this._ezPopoverSearchColumn.showUnder(this._container, { horizontalGap: container.width - (SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
+      }, { description: LABEL_SEARCH_COLUMN, element: this._element });
+    }
   }
   async removeShortcuts() {
-    if (this._keyboardManager) {
-      this._keyboardManager
-        .unbind("ctrl + .")
-        .unbind("ctrl + ,")
-        .unbind("ctrl + alt + ArrowLeft")
-        .unbind("ctrl + alt + ArrowRight");
-    }
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
+  renderFieldSearchColumn() {
+    this._columnSearch = buildFieldSearch({
+      value: StringUtils.generateUUID(),
+      label: LABEL_SEARCH_COLUMN,
+    }, ({ argument }) => new Promise(accept => {
+      this.filterColumns(argument).then((columns) => {
+        accept(columns
+          .filter(column => !column.hidden)
+          .map(column => ({ label: column.label, value: column.name })));
+      });
+    }), async (option) => {
+      if (option != undefined && option.value != undefined) {
+        await this.locateColumn(option.value);
+        if (this._ezPopoverSearchColumn) {
+          this._ezPopoverSearchColumn.hide();
+        }
+        if (this._container) {
+          requestAnimationFrame(() => this._container.focus());
+        }
+      }
+    });
+    return this._columnSearch;
   }
   render() {
     var _a;
@@ -639,11 +683,12 @@ export class EzGrid {
         'shadow-mode': !this.outlineMode,
         'no-padding': this.compact,
         'header-overlay': !this.hideHeader(),
-      }, ref: elem => (this._container = elem) }), h("div", { class: {
+        'no-scroll': this.suppressHorizontalScroll
+      }, ref: elem => (this._container = elem), tabindex: "0" }), h("div", { class: {
         'ez-box ez-padding--small grid-header': true,
         'outline-mode': this.outlineMode,
         'shadow-mode': !this.outlineMode && !this.hideHeader(),
-      } }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+      }, tabindex: "0" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
@@ -664,7 +709,7 @@ export class EzGrid {
     return {
       "enableLockManagerLoadingComp": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -876,7 +921,7 @@ export class EzGrid {
       },
       "canEdit": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -966,7 +1011,7 @@ export class EzGrid {
       },
       "suppressCheckboxColumn": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -1020,7 +1065,7 @@ export class EzGrid {
       },
       "compact": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -1035,6 +1080,65 @@ export class EzGrid {
         "attribute": "compact",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "useSearchColumn": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a grade deve exibir um buscador de coluna com uso do Ctrl+F"
+        },
+        "attribute": "use-search-column",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "suppressHorizontalScroll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a grade deve suprimir o scroll horizontal."
+        },
+        "attribute": "suppress-horizontal-scroll",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IGridMode",
+          "resolved": "\"complete\" | \"simple\"",
+          "references": {
+            "IGridMode": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de uso da grade"
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"complete\""
       }
     };
   }
@@ -1594,6 +1698,9 @@ export class EzGrid {
       }, {
         "propName": "paginationCounterMode",
         "methodName": "observePaginationCounterMode"
+      }, {
+        "propName": "mode",
+        "methodName": "observeModeChange"
       }];
   }
   static get listeners() {

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

@@ -0,0 +1 @@
+export {};

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

@@ -2,3 +2,4 @@ export * from './ISelection';
 export * from './ISelectionToastConfig';
 export * from './IColumnFilter';
 export * from './ICustomFormatter';
+export * from './IGridMode';

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -1,5 +1,6 @@
 import { UserInterface } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
+import { PRESENTATION_FROM_COL_PROP_NAME } from '../../../utils/constants';
 const windowInstace = window;
 const onSubmitFilter = new CustomEvent('onSubmitFilter', {
   detail: {
@@ -30,13 +31,13 @@ export class FilterColumn {
    * @Params IFilterColumnConfigs informações para configurar o filtro
    */
   async show(configs) {
+    var _a;
     if (this.canShow(configs)) {
-      await this.hide();
-      this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
+      this.fieldDescriptor = (_a = configs.fieldDescriptor) !== null && _a !== void 0 ? _a : this.dataUnit.getField(configs.columnName);
       this.buildIsTextSearch();
       this.columnName = configs.columnName;
       this.columnLabel = configs.columnLabel;
-      await this.setOptions(configs.filteredOptions);
+      await this.setOptions(configs);
       await this.ezPopoverElement.showUnder(`filter-column-${configs.columnName}-${this.dataUnit.dataUnitId}`);
     }
   }
@@ -74,14 +75,22 @@ export class FilterColumn {
     return this.fieldDescriptor.userInterface === UserInterface.SWITCH
       || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
   }
-  async setOptions(selectedItems) {
+  async setOptions(config) {
+    var _a, _b, _c, _d;
+    const selectedItems = config.filteredOptions;
     const validateFieldUserInterfaceOptionSelector = this.hasToUseOptions();
     if (validateFieldUserInterfaceOptionSelector) {
       this.useOptions = validateFieldUserInterfaceOptionSelector;
       this.options = validateFieldUserInterfaceOptionSelector ? this.buildOptions(selectedItems) : (selectedItems !== null && selectedItems !== void 0 ? selectedItems : null);
       return;
     }
-    const options = await this.dataSource.getStaticOptions(this.columnName);
+    let colName = this.columnName;
+    const staticOptionsConfig = { onlyLabel: false };
+    if ((_b = (_a = config.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_FROM_COL_PROP_NAME]) {
+      colName = (_d = (_c = config.fieldDescriptor) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d[PRESENTATION_FROM_COL_PROP_NAME];
+      staticOptionsConfig.onlyLabel = true;
+    }
+    const options = await this.dataSource.getStaticOptions(colName, staticOptionsConfig);
     if (options != undefined) {
       const selected = new Set((selectedItems || []).filter(item => item.check).map(item => item.label));
       this.useOptions = true;

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

@@ -3,6 +3,7 @@ import { h, Host } from "@stencil/core";
 export class EzIcon {
   constructor() {
     this.size = "medium";
+    this.fontSize = undefined;
     this.href = undefined;
     this.iconName = undefined;
   }
@@ -16,12 +17,17 @@ export class EzIcon {
     if (this.isSprite()) {
       return h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }));
     }
-    else if (!StringUtils.isEmpty(this.iconName)) {
-      return h("span", { class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
-    }
-    else {
-      return h("img", { class: this.size, src: this.href });
+    if (!StringUtils.isEmpty(this.iconName)) {
+      return h("span", { style: this.getStyle(), class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
     }
+    return h("img", { class: this.size, src: this.href });
+  }
+  getStyle() {
+    if (!this.fontSize)
+      return undefined;
+    return {
+      fontSize: `${this.fontSize}px`,
+    };
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._hostElement, "icon");
@@ -61,6 +67,23 @@ export class EzIcon {
         "reflect": true,
         "defaultValue": "\"medium\""
       },
+      "fontSize": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho da fonte."
+        },
+        "attribute": "font-size",
+        "reflect": true
+      },
       "href": {
         "type": "string",
         "mutable": false,

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

@@ -576,7 +576,7 @@ export class EzList {
     return { id: item.id, label: item.label, check: evt.detail };
   }
   renderListWithGroups() {
-    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
+    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
       return (h("div", { id: this.getDivGroupId(group.group), class: 'group', key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: 'group-name', title: group.group }, group.group), h("section", { class: 'section-container', onDragOver: ev => ev.preventDefault() }, h("div", { class: 'group-items-container' }, h("div", { class: 'draggable-list' }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
@@ -586,7 +586,7 @@ export class EzList {
     }));
   }
   renderList() {
-    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => {
         this.keyDownHandler(event);
       } }, h("div", { class: 'draggable-list' }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,

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

@@ -25,7 +25,7 @@ export class EzModal {
   }
   componentDidLoad() {
     this.observeOpened();
-    new KeyboardManager({ propagate: false, element: this._element })
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezModalAction.emit.bind("OK"))
       .bind("Escape", () => this.closeModal())
       .bind("Esc", () => this.closeModal());
@@ -33,6 +33,10 @@ export class EzModal {
   componentDidRender() {
     this.modalFocus();
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
   modalFocus() {
     if (!this.opened) {
       return;

package/dist/collection/components/ez-modal-container/ez-modal-container.css

@@ -21,6 +21,7 @@
 .ez-modal-container__content {
   overflow-y: var(--ez-modal-container-overflow-y);
   overflow-x: var(--ez-modal-container-overflow-x);
+  outline: none;
 }
 
 .ez-modal-container__content::-webkit-scrollbar {

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -30,11 +30,15 @@ export class EzModalContainer {
       this.ezModalAction.emit(ModalAction.LOAD);
       this._modalRef.focus();
     });
-    new KeyboardManager({ propagate: false, element: this._element })
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
       .bind("Enter", this.ezModalAction.emit.bind(ModalAction.OK))
       .bind("Escape", () => this.closeModal())
       .bind("Esc", () => this.closeModal());
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
   closeModal() {
     this.ezModalAction.emit("CLOSE");
   }
@@ -48,7 +52,7 @@ export class EzModalContainer {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-multi-selection-list/interfaces/IStaticOptionsFetchConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -17,6 +17,7 @@ export class EzNumberInput {
     this.prettyPrecision = undefined;
     this.mode = "regular";
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   /**
    * Aplica o foco no campo.
@@ -175,7 +176,7 @@ export class EzNumberInput {
     if (this.allowNegative) {
       restrict += '-';
     }
-    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: restrict, enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
+    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: restrict, enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value, alternativePlaceholder: this.alternativePlaceholder }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -365,6 +366,23 @@ export class EzNumberInput {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": false
       }
     };
   }

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

@@ -25,11 +25,15 @@ export class EzPopup {
     if (this.opened && this._popupRef) {
       this._popupRef.focus();
     }
-    new KeyboardManager({ propagate: false, element: this._element })
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
       .bind("Esc", () => this.closePopup());
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
   closePopup() {
     this.opened = false;
     this.manageOverflow();

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

@@ -42,6 +42,7 @@ export class EzSearch {
     this.ensureClearButtonVisible = false;
     this.suppressPreLoad = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -607,7 +608,7 @@ export class EzSearch {
   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 }, 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] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
   }
@@ -1018,6 +1019,23 @@ export class EzSearch {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
       }
     };
   }