@sankhyalabs/ezui 5.22.0-dev.124 → 5.22.0-dev.125

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,7 @@ export class EzGrid {
     this.outlineMode = false;
     this.enableRowTableStriped = true;
     this.compact = false;
+    this.useSearchColumn = true;
   }
   /**
    * Aplica a definição de colunas.
@@ -98,7 +100,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
@@ -596,11 +598,43 @@ 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() {
     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;
     return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: {
@@ -609,11 +643,11 @@ export class EzGrid {
         'shadow-mode': !this.outlineMode,
         'no-padding': this.compact,
         'header-overlay': !this.hideHeader(),
-      }, ref: elem => (this._container = elem) }), h("div", { class: {
+      }, 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" }))));
   }
@@ -1005,6 +1039,24 @@ 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"
       }
     };
   }

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

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

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

@@ -13,6 +13,7 @@ export class EzSplitButton {
     this.rightTitle = 'Mais opções';
     this.mode = 'default';
     this.size = 'medium';
+    this.itemBuilder = undefined;
   }
   /**
    * Remove o foco de ambos os botões.
@@ -33,6 +34,18 @@ export class EzSplitButton {
   async setRightButtonFocus() {
     this.rightButton.focus();
   }
+  /**
+   * Abre ou Fecha o dropdown do Split Button.
+   */
+  async toggleDropdown() {
+    this.show = !this.show;
+  }
+  /**
+   * Informa se a lista de ações está aberta.
+   */
+  async isOpenedDropdown() {
+    return this.show;
+  }
   clickListener(evt) {
     if (!this.enabled) {
       evt.preventDefault();
@@ -49,16 +62,12 @@ export class EzSplitButton {
   closeDropdown() {
     this.show = false;
   }
-  toggleDropdown() {
-    this.show = !this.show;
-  }
   handleButtonClick() {
     this.buttonClick.emit();
   }
   handleDropdownItemClick(evt) {
     this.dropdownItemClick.emit(evt.detail);
     evt.stopPropagation();
-    this.closeDropdown();
   }
   handleDropdownSubActionClick(evt) {
     this.dropdownSubActionClick.emit(evt.detail);
@@ -140,7 +149,7 @@ export class EzSplitButton {
     const hasIconButton = this.shouldShowIconOnLeftButton();
     const hasLabelButton = this.shouldShowLabelOnLeftButton();
     const iconSize = this.getIconSize();
-    return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); } }))))));
+    return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); }, itemBuilder: this.itemBuilder }))))));
   }
   shouldShowLabelOnLeftButton() {
     return ['icon-left', 'default'].includes(this.mode);
@@ -162,6 +171,24 @@ export class EzSplitButton {
   }
   static get properties() {
     return {
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "enabled": {
         "type": "boolean",
         "mutable": false,
@@ -324,14 +351,32 @@ export class EzSplitButton {
         "attribute": "size",
         "reflect": true,
         "defaultValue": "'medium'"
+      },
+      "itemBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: IDropdownItem, level: number) => HTMLElement | string",
+          "resolved": "(item: IDropdownItem, level: number) => string | HTMLElement",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "../ez-dropdown/structure/DropdownItem"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
+        }
       }
     };
   }
-  static get states() {
-    return {
-      "show": {}
-    };
-  }
   static get events() {
     return [{
         "method": "buttonClick",
@@ -439,6 +484,38 @@ export class EzSplitButton {
           "text": "Aplica o foco no bot\u00E3o do dropdown.",
           "tags": []
         }
+      },
+      "toggleDropdown": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Abre ou Fecha o dropdown do Split Button.",
+          "tags": []
+        }
+      },
+      "isOpenedDropdown": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Informa se a lista de a\u00E7\u00F5es est\u00E1 aberta.",
+          "tags": []
+        }
       }
     };
   }

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

@@ -158,6 +158,13 @@ input:focus {
   border-color: var(--ez-text-input__input--focus--border-color);
 }
 
+input.focused{
+  /*private*/
+  border: var(--border--medium, 2px solid);
+  /*public*/
+  border-color: var(--ez-text-input__input--focus--border-color);
+}
+
 input.icon--left {
   padding-left: var(--ez-text-input__icon--width);
 }

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

@@ -123,7 +123,12 @@ export class EzTextInput {
     const { selectText } = options || {};
     if (selectText)
       this._inputElem.select();
-    this._inputElem.focus();
+    if (this._inputElem.disabled) {
+      this._inputElem.classList.add("focused");
+      this._inputElem.scrollIntoView({ behavior: "smooth", block: "start" });
+      return;
+    }
+    requestAnimationFrame(() => this._inputElem.focus());
   }
   /**
    * Remove o foco do campo.
@@ -318,6 +323,15 @@ export class EzTextInput {
       var _a;
       this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
     });
+    this.onClickOutside = (event) => {
+      if (!this._inputElem.contains(event.target)) {
+        this._inputElem.classList.remove("focused");
+      }
+    };
+    document.addEventListener("click", this.onClickOutside);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.onClickOutside);
   }
   componentDidRender() {
     this.adjustFloatingLabel();

package/dist/collection/utils/index.js

@@ -8,3 +8,4 @@ export { CustomEditorSource } from './customEditor/interfaces/ICustomEditor';
 export { CustomRenderSource } from './customRender/interfaces/ICustomRender';
 export { SearchMode } from './search/types';
 export { FormLayout } from './form/interfaces';
+export { buildFieldSearch, openFieldSearch, focusOnFieldSerch, SEARCH_FIELD_FULL_WIDTH } from './searchColumn/search-column';

package/dist/collection/utils/searchColumn/search-column.js

@@ -0,0 +1,35 @@
+import { h } from '@stencil/core';
+export const LABEL_SEARCH_FIELD = "Buscar campos (ctrl+F)";
+export const LABEL_SEARCH_COLUMN = "Buscar colunas (Ctrl+F)";
+export const SHORTCUT_SEARCH_FIELD = "ctrl+f";
+export const SEARCH_FIELD_FULL_WIDTH = 240;
+const SEARCH_FIELD_MARGIN_BOTTOM = "0px";
+const SEARCH_FIELD_WIDTH = String(SEARCH_FIELD_FULL_WIDTH - 30) + "px";
+export const buildFieldSearch = (action, optionLoader, onSelectField) => {
+  return h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
+      "--ez-text-input__margin-bottom": SEARCH_FIELD_MARGIN_BOTTOM,
+      "--ez-search--width": SEARCH_FIELD_WIDTH
+    }, canShowError: 'false', showSelectedValue: 'false', showOptionValue: 'false', suppressEmptyOption: 'true', label: action.label, value: null, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+};
+export const openFieldSearch = async (splitButton, field) => {
+  if (!splitButton) {
+    return;
+  }
+  const isOpen = await splitButton.isOpenedDropdown();
+  if (isOpen) {
+    await focusOnFieldSerch(field);
+    return;
+  }
+  await splitButton.toggleDropdown();
+};
+export const focusOnFieldSerch = async (field) => {
+  requestAnimationFrame(async () => {
+    if (field) {
+      const realElement = field['$elm$'];
+      if (!realElement)
+        return;
+      realElement.value = null;
+      await realElement.setFocus();
+    }
+  });
+};