@sankhyalabs/ezui 5.16.0 → 5.17.0-dev.1

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

@@ -16,6 +16,12 @@ export class EzActionsButton {
             return true;
           }
         }
+        do {
+          if (floatingContainer.contains(node)) {
+            return true;
+          }
+          node = node.offsetParent;
+        } while (node != undefined && node != document.getRootNode());
       }
       return false;
     };
@@ -39,6 +45,25 @@ export class EzActionsButton {
     }
     this._floatingID = undefined;
   }
+  /**
+   * Apresenta a lista de ações.
+   */
+  async showActions() {
+    if (!this.enabled) {
+      return;
+    }
+    const options = this.getFloatOptions();
+    this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
+    const sideLimit = this.getSideLimit();
+    if (sideLimit != undefined) {
+      options.left = sideLimit;
+      FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
+    }
+    window.requestAnimationFrame(() => {
+      this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    });
+    this.ezPopoverOpen.emit(this._actionsList);
+  }
   /**
    * Verifica se a lista de ações está aberta.
    */
@@ -51,7 +76,8 @@ export class EzActionsButton {
       innerClickTest: this.innerClickCheck,
       isFixed: true,
       top: this.getPositionTop(),
-      left: this.getPositionLeft()
+      left: this.getPositionLeft(),
+      backClickListener: () => this._floatingID = undefined
     };
   }
   getSideLimit() {
@@ -63,21 +89,6 @@ export class EzActionsButton {
     }
     return;
   }
-  showActions() {
-    if (!this.enabled) {
-      return;
-    }
-    const options = this.getFloatOptions();
-    this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
-    const sideLimit = this.getSideLimit();
-    if (sideLimit != undefined) {
-      options.left = sideLimit;
-      FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
-    }
-    window.requestAnimationFrame(() => {
-      this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-    });
-  }
   updatePosition() {
     if (!this.enabled || this._floatingID == undefined) {
       return;
@@ -160,14 +171,18 @@ export class EzActionsButton {
       }
     }
   }
+  disconnectedCallback() {
+    this.ezDisconnectedActionButtons.emit();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
     ElementIDUtils.addIDInfo(this._element);
     this.controlScrollPage();
   }
   componentDidRender() {
+    var _a;
     if (this._floatingID == undefined) {
-      this._actionsList.remove();
+      (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.remove();
     }
     if (this.hasLabelOrCheckOption()) {
       if (!!this.value) {
@@ -178,6 +193,23 @@ export class EzActionsButton {
       }
     }
   }
+  buildActionElement(action) {
+    var _a;
+    if (!action) {
+      return;
+    }
+    if (action.itemBuilder != undefined) {
+      const customContent = action.itemBuilder(this._element, action);
+      if (typeof customContent === "string") {
+        return h("div", { class: "ez-actions-button__btn-action", innerHTML: customContent });
+      }
+      return customContent;
+    }
+    return h("ez-button", { size: "small", label: action.label, onClick: () => this.actionClick(action), enabled: action.enabled, class: "ez-actions-button__btn-action" +
+        (this.checkOption || this.hasIconName() ? " ez-actions-button__btn-action--spaced" : "") }, this.checkOption && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.value) === action.value &&
+      h("ez-icon", { class: "ez-actions-button__icon-check", slot: "leftIcon", size: "small", iconName: "check" }), !this.checkOption && action.iconName &&
+      h("ez-icon", { class: "ez-actions-button__icon-item", slot: "leftIcon", size: "small", iconName: action.iconName }));
+  }
   render() {
     var _a;
     return (h(Host, null, h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
@@ -185,13 +217,7 @@ export class EzActionsButton {
       h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
       h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
           (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list ez-actions-button__actions-list--max-height" +
-        (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
-      var _a;
-      return h("ez-button", { size: "small", label: action.label, onClick: () => this.actionClick(action), enabled: action.enabled, class: "ez-actions-button__btn-action" +
-          (this.checkOption || this.hasIconName() ? " ez-actions-button__btn-action--spaced" : "") }, this.checkOption && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.value) === action.value &&
-        h("ez-icon", { class: "ez-actions-button__icon-check", slot: "leftIcon", size: "small", iconName: "check" }), !this.checkOption && action.iconName &&
-        h("ez-icon", { class: "ez-actions-button__icon-item", slot: "leftIcon", size: "small", iconName: action.iconName }));
-    })))));
+        (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => this.buildActionElement(action))))));
   }
   static get is() { return "ez-actions-button"; }
   static get encapsulation() { return "shadow"; }
@@ -236,7 +262,8 @@ export class EzActionsButton {
               "location": "global"
             },
             "IAction": {
-              "location": "local"
+              "location": "import",
+              "path": "../../utils"
             }
           }
         },
@@ -394,10 +421,45 @@ export class EzActionsButton {
           "resolved": "IAction",
           "references": {
             "IAction": {
-              "location": "local"
+              "location": "import",
+              "path": "../../utils"
             }
           }
         }
+      }, {
+        "method": "ezPopoverOpen",
+        "name": "ezPopoverOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao mostrar a lista de a\u00E7\u00F5es"
+        },
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "ezDisconnectedActionButtons",
+        "name": "ezDisconnectedActionButtons",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando componente \u00E9 desconectado da DOM"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -418,6 +480,22 @@ export class EzActionsButton {
           "tags": []
         }
       },
+      "showActions": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Apresenta a lista de a\u00E7\u00F5es.",
+          "tags": []
+        }
+      },
       "isOpened": {
         "complexType": {
           "signature": "() => Promise<boolean>",

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

@@ -5,7 +5,6 @@ import { REQUIRED_INFO } from "../../utils/constants";
 export class EzComboBox {
   constructor() {
     this._changeDeboucingTimeout = null;
-    this._limitCharsToSearch = 3;
     this._deboucingTime = 300;
     this._maxWidthValue = 0;
     this._tabPressed = false;
@@ -17,6 +16,7 @@ export class EzComboBox {
     this._startLoading = false;
     this._showLoading = true;
     this._criteria = undefined;
+    this.limitCharsToSearch = 3;
     this.value = undefined;
     this.label = undefined;
     this.enabled = true;
@@ -555,7 +555,6 @@ export class EzComboBox {
       return;
     }
     const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-    const argumentNumber = this.buildNumberArgument(argument);
     if (!this._criteria) {
       this._textInput.value = event.data || argument;
     }
@@ -564,7 +563,9 @@ export class EzComboBox {
       if (this.searchMode) {
         this._showLoading = false;
         this.clearSource();
-        if (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch) {
+        const enoughChars = argument.length >= this.limitCharsToSearch;
+        const argumentNumber = this.buildNumberArgument(argument);
+        if (enoughChars || !isNaN(argumentNumber)) {
           this._showLoading = true;
           this._changeDeboucingTimeout = window.setTimeout(() => {
             this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
@@ -674,6 +675,24 @@ export class EzComboBox {
   }
   static get properties() {
     return {
+      "limitCharsToSearch": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o limite de caracteres m\u00EDnimo para realizar uma pesquisa"
+        },
+        "attribute": "limit-chars-to-search",
+        "reflect": false,
+        "defaultValue": "3"
+      },
       "value": {
         "type": "string",
         "mutable": true,

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

@@ -14,6 +14,7 @@ export class EzForm {
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
+    this.fieldToFocus = undefined;
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -48,6 +49,7 @@ export class EzForm {
     if (currentSheet == undefined) {
       return;
     }
+    this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
     return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
   }
@@ -79,6 +81,22 @@ export class EzForm {
     metadata.addRequiredFields(this._staticFields.filter(f => f.dataset.required).map(f => f.dataset.fieldName));
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")), this.dataUnit.dataUnitId, metadata, this.recordsValidator);
     this.ezReady.emit();
+    this.handleFieldToFocus();
+  }
+  handleFieldToFocus() {
+    var _a;
+    if (this.fieldToFocus == undefined) {
+      return;
+    }
+    const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
+    const fields = currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.fields;
+    if (!fields.some(item => item.name === this.fieldToFocus)) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      this._dataBinder.setFocus(this.fieldToFocus);
+      this.ezFormRequestClearFieldToFocus.emit();
+    });
   }
   disconnectedCallback() {
     this.dataUnit.unsubscribe(this.onDataUnitAction);
@@ -166,11 +184,66 @@ export class EzForm {
           "tags": [],
           "text": "Define um validador respons\u00E1vel pela integridade dos registros."
         }
+      },
+      "fieldToFocus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina o campo que deve ficar em evid\u00EAncia."
+        },
+        "attribute": "field-to-focus",
+        "reflect": false
       }
     };
   }
   static get events() {
     return [{
+        "method": "ezFormRequestClearFieldToFocus",
+        "name": "ezFormRequestClearFieldToFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o campo recebe foco"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "ezFormSetFields",
+        "name": "ezFormSetFields",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o campo recebe foco"
+        },
+        "complexType": {
+          "original": "Array<IFieldConfig>",
+          "resolved": "IFieldConfig[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IFieldConfig": {
+              "location": "import",
+              "path": "../../utils/form/interfaces"
+            }
+          }
+        }
+      }, {
         "method": "ezReady",
         "name": "ezReady",
         "bubbles": true,

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

@@ -44,6 +44,9 @@ export default class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
+  locateColumn(columnName) {
+    this._gridOptions.api.ensureColumnVisible(columnName);
+  }
   getSort(_dataUnitName, defaultSorting) {
     const sortedColumns = [];
     this._gridOptions.columnApi

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, JSUtils, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, StringUtils, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { h, Host } from '@stencil/core';
 import AgGridController from './controller/ag-grid/AgGridController';
@@ -6,6 +6,11 @@ import { SelectionCounter } from './subcomponents/selection-counter';
 import { ApplicationUtils } from '../../utils';
 import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
 const windowInstace = window;
+const matches = (text, filter) => {
+  const normalizedText = StringUtils.replaceAccentuatedCharsLower(text.toLocaleLowerCase());
+  const normalizedFilter = StringUtils.replaceAccentuatedCharsLower(filter.toLocaleLowerCase());
+  return normalizedText.includes(normalizedFilter);
+};
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
@@ -76,6 +81,18 @@ export class EzGrid {
   async quickFilter(term) {
     this._gridController.quickFilter(term);
   }
+  /**
+   * Localiza determinada coluna tornando-a visível.
+   */
+  async locateColumn(columnName) {
+    this._gridController.locateColumn(columnName);
+  }
+  /**
+   * Usa um argumento para filtrar as colunas po label
+   */
+  async filterColumns(search) {
+    return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config.columns);
   }
@@ -814,6 +831,51 @@ export class EzGrid {
           "text": "Aplica um filtro r\u00E1pido.",
           "tags": []
         }
+      },
+      "locateColumn": {
+        "complexType": {
+          "signature": "(columnName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Localiza determinada coluna tornando-a vis\u00EDvel.",
+          "tags": []
+        }
+      },
+      "filterColumns": {
+        "complexType": {
+          "signature": "(search: string) => Promise<Array<EzGridColumn>>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "EzGridColumn": {
+              "location": "import",
+              "path": "./controller/EzGridController"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<EzGridColumn[]>"
+        },
+        "docs": {
+          "text": "Usa um argumento para filtrar as colunas po label",
+          "tags": []
+        }
       }
     };
   }

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

@@ -16,6 +16,7 @@ export class EzSearch {
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
+    this.ignoreLimitCharsToSearch = false;
   }
   observeErrorMessage() {
     if (this._comboElement) {
@@ -73,7 +74,7 @@ export class EzSearch {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch }));
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch, limitCharsToSearch: this.ignoreLimitCharsToSearch ? 0 : 3 }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -339,6 +340,24 @@ export class EzSearch {
         "attribute": "is-text-search",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "ignoreLimitCharsToSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se deve ignorar o limite de caracteres m\u00EDnimo para realizar uma pesquisa"
+        },
+        "attribute": "ignore-limit-chars-to-search",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/utils/form/DataBinder.js

@@ -75,6 +75,16 @@ export default class DataBinder {
       this.updateErrorMessage(field.name, fieldElement, field.message);
     }
   }
+  setFocus(fieldName) {
+    if (!this._fields.has(fieldName)) {
+      return;
+    }
+    const fieldElement = this._fields.get(fieldName).field;
+    if (typeof fieldElement["setFocus"] != "function") {
+      return;
+    }
+    fieldElement["setFocus"]();
+  }
   clearInvalid(recordId) {
     this._dataUnit.clearInvalid(recordId);
     this._fields.forEach(fieldBinder => {

package/dist/collection/utils/interfaces/IAction.js

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