@sankhyalabs/ezui 2.2.4 → 2.3.1

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -184,21 +184,13 @@ export class EzDateTimeInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-      if (this._calendar) {
-        ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
     return (h(Host, null,
-      h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() },
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() },
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
-      h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+      h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   static get is() { return "ez-date-time-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -55,15 +55,10 @@ export class EzFilterInput {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode },
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode },
       h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   static get is() { return "ez-filter-input"; }

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

@@ -106,7 +106,7 @@ export class EzForm {
       const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(currentSheet.label)}`;
+    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}`;
     result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
@@ -184,7 +184,7 @@ export class EzForm {
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
-      tabs.forEach(tab => tab["data-element-id"] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
     }
     return tabs;
   }

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -54,6 +54,7 @@ export default class AgGridController {
         sortingOrder: ['desc', 'asc', null],
         columnDefs: this._colDefs,
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
+        navigateToNextCell: this.navigateToNextCell.bind(this),
         getRowNodeId: this._dataUnit ? (params) => typeof params === "string" ? params : params[this._idAttribName] : undefined,
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -93,6 +94,45 @@ export default class AgGridController {
   getRowHeight() {
     return this.DEFAULT_ROW_HEIGHT;
   }
+  navigateToNextCell(params) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    switch (params.key) {
+      case 'ArrowUp':
+        if (((_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.hasPrevious()) === false) {
+          return null;
+        }
+        this._gridOptions.api.deselectAll();
+        if (((_b = params.nextCellPosition) === null || _b === void 0 ? void 0 : _b.rowIndex) < 0) {
+          (_c = this._dataUnit) === null || _c === void 0 ? void 0 : _c.previousRecord();
+          return null;
+        }
+        else {
+          (_d = this._dataUnit) === null || _d === void 0 ? void 0 : _d.setSelectionByIndex([params.nextCellPosition.rowIndex]);
+          return params.nextCellPosition;
+        }
+      case 'ArrowDown':
+        if (((_e = this._dataUnit) === null || _e === void 0 ? void 0 : _e.hasNext()) === false) {
+          return null;
+        }
+        this._gridOptions.api.deselectAll();
+        if ((_f = params.nextCellPosition) === null || _f === void 0 ? void 0 : _f.rowIndex) {
+          (_g = this._dataUnit) === null || _g === void 0 ? void 0 : _g.setSelectionByIndex([params.nextCellPosition.rowIndex]);
+        }
+        else {
+          (_h = this._dataUnit) === null || _h === void 0 ? void 0 : _h.nextRecord();
+        }
+        return params.nextCellPosition;
+      case "ArrowLeft":
+      case "ArrowRight":
+        if (((_j = params.nextCellPosition) === null || _j === void 0 ? void 0 : _j.column.colDef.headerName) !== "") {
+          return params.nextCellPosition;
+        }
+        else {
+          return null;
+        }
+    }
+    return null;
+  }
   setOptionsEvents(opt) {
     opt.onSortChanged = e => this.onCallStateChange("sort", e);
     opt.onColumnResized = e => this.onCallStateChange("columnResize", e);
@@ -153,7 +193,14 @@ export default class AgGridController {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
     this._gridOptions.api.forEachNode(node => {
-      node.setSelected(rowIds && rowIds.includes(node.id));
+      var _a;
+      if (rowIds && rowIds.includes(node.id)) {
+        node.setSelected(true);
+        (_a = this._gridOptions.api) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
+      }
+      else {
+        node.setSelected(false);
+      }
     });
     const selectionHeader = this._gridOptions.context.selectionHeader;
     if (selectionHeader) {
@@ -199,6 +246,21 @@ export default class AgGridController {
     }
     this._gridOptions.api.refreshServerSide({ purge: false });
   }
+  setFocusFirstRow() {
+    const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);
+    this.setFocusOnRow(firstRow.rowIndex);
+  }
+  setFocusLastRow() {
+    const lastRow = this._gridOptions.api.getDisplayedRowAtIndex(this._gridOptions.api.getLastDisplayedRow());
+    this.setFocusOnRow(lastRow.rowIndex);
+  }
+  setFocusOnRow(rowIndex) {
+    let displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
+    let firstCell = displayedColumns.find((column) => column.getColDef().headerName !== "");
+    this._gridOptions.api.ensureColumnVisible(firstCell);
+    this._gridOptions.api.ensureIndexVisible(rowIndex);
+    this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
+  }
   setColumnsDef(cols) {
     const newColDefs = [Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: "", checkboxSelection: true, width: 28, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, this._multipleSelection && { headerComponent: "ezGridHeaderComponent", headerClass: "ag-column-select-header" })];
     if (this._statusResolver != undefined) {

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

@@ -4,6 +4,7 @@ import AgGridController from "./controller/ag-grid/AgGridController";
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
+    this._paginationChangedByKeyboard = true;
   }
   /**
   * Método responsável por receber a definição das colunas
@@ -128,7 +129,17 @@ export class EzGrid {
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
-      onPaginationChange: (paginationInfo) => this._paginationInfo = paginationInfo,
+      onPaginationChange: (paginationInfo) => {
+        var _a;
+        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > paginationInfo.currentPage && this._paginationChangedByKeyboard) {
+          this._gridController.setFocusLastRow();
+        }
+        else {
+          this._gridController.setFocusFirstRow();
+          this._paginationChangedByKeyboard = true;
+        }
+        this._paginationInfo = paginationInfo;
+      },
       onDoubleClick: (row) => {
         this.ezDoubleClick.emit(row);
       },
@@ -151,11 +162,13 @@ export class EzGrid {
   previousPage() {
     if (this.dataUnit) {
       this.dataUnit.previousPage();
+      this._paginationChangedByKeyboard = false;
     }
   }
   nextPage() {
     if (this.dataUnit) {
       this.dataUnit.nextPage();
+      this._paginationChangedByKeyboard = false;
     }
   }
   getPaginationControl() {
@@ -289,7 +302,8 @@ export class EzGrid {
     }
   }; }
   static get states() { return {
-    "_paginationInfo": {}
+    "_paginationInfo": {},
+    "_paginationChangedByKeyboard": {}
   }; }
   static get events() { return [{
       "method": "ezColumnStateChange",

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

@@ -124,15 +124,10 @@ export class EzNumberInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -62,15 +62,10 @@ export class EzSearch {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._comboElement) {
-        ElementIDUtils.addIDInfo(this._comboElement, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   static get is() { return "ez-search"; }

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

@@ -100,7 +100,7 @@ export class EzTabselector {
   }
   componentDidLoad() {
     this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+      const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       const dataInfo = { id: `${elemIdTabSelector}_${StringUtils.toCamelCase(elem.id)}` };
       ElementIDUtils.addIDInfo(elem, null, dataInfo);
     });
@@ -193,10 +193,10 @@ export class EzTabselector {
   }
   buildElementIdTab(tabs) {
     tabs.forEach(tab => {
-      if (!tab.hasOwnProperty("data-element-id")) {
-        const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+      if (!tab.hasOwnProperty(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
+        const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
         const dataElementID = `${elemIdTabSelector}_${StringUtils.toCamelCase(tab.tabKey)}`;
-        tab["data-element-id"] = dataElementID;
+        tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
       }
     });
   }

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -134,20 +134,15 @@ export class EzTextArea {
     this.observeErrorMessage();
     this.adjustFloatingLabel();
     this.observeMode();
-    if (this._hostElement) {
-      ElementIDUtils.addIDInfo(this._hostElement, 'input');
-      if (this._inputElem) {
-        ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null,
       h("div", { class: "textarea", ref: (el) => this._container = el },
         this.label && this.mode != "slim" ?
           h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
           : null,
-        h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
+        h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
       this.canShowError && this.mode != "slim" &&
         h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }

package/dist/collection/components/ez-text-edit/ez-text-edit.js

@@ -76,20 +76,15 @@ export class EzTextEdit {
   componentDidLoad() {
     this.applyFocusSelect();
     this.setNewValue(this.value);
-    if (this._element) {
-      ElementIDUtils.addIDInfo(this._element, 'input');
-      if (this._inputElement) {
-        ElementIDUtils.addIDInfo(this._inputElement, 'internal_input', { id: this._element.getAttribute("data-element-id") });
-      }
-    }
   }
   componentDidRender() {
     this.setStyledInput();
   }
   render() {
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
     return (h(Host, null,
       h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }),
-      h("ez-text-input", { onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }),
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }),
       h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }),
       h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
   }

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

@@ -204,12 +204,6 @@ export class EzTextInput {
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
-    if (this._hostElement) {
-      ElementIDUtils.addIDInfo(this._hostElement, 'input');
-      if (this._inputElem) {
-        ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
-      }
-    }
   }
   componentWillLoad() {
     this.observeMask();
@@ -229,12 +223,13 @@ export class EzTextInput {
     }
   }
   render() {
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null,
       h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
       this.label && this.mode != "slim" ?
         h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
         : null,
-      h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
+      h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
       h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
       this.canShowError && this.mode != "slim" &&
         h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));

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

@@ -131,12 +131,6 @@ export class EzTimeInput {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   componentWillLoad() {
     this.observeShowSeconds();
@@ -148,8 +142,9 @@ export class EzTimeInput {
     }
   }
   render() {
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
     return (h(Host, null,
-      h("ez-text-input", { ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode },
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode },
         h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }