@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-86600.1 → 0.0.0-bugfix-dev-KB-86904.0

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,8 @@ export class EzGrid {
     this.outlineMode = false;
     this.enableRowTableStriped = true;
     this.compact = false;
+    this.useSearchColumn = true;
+    this.suppressHorizontalScroll = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -98,7 +101,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
@@ -227,6 +230,7 @@ export class EzGrid {
   onClearSelectedRecords() {
     var _a;
     (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection();
+    this._gridController.clearRangeSelection();
     this.setSelection(undefined);
   }
   createConfigFromState(state) {
@@ -350,16 +354,20 @@ export class EzGrid {
       ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
     }
   }
+  handlePageChange() {
+    this.resetPaginationState();
+    this._gridController.setFocusFirstRow();
+  }
   previousPage() {
     if (this.dataUnit) {
       this.dataUnit.previousPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextPage() {
     if (this.dataUnit) {
       this.dataUnit.nextPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextRecord() {
@@ -448,6 +456,7 @@ export class EzGrid {
       enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick,
       enableLockManagerLoadingComp: this.enableLockManagerLoadingComp,
       enableRowTableStriped: this.enableRowTableStriped,
+      suppressHorizontalScroll: this.suppressHorizontalScroll
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -616,11 +625,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: {
@@ -629,11 +670,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" }))));
   }
@@ -1025,6 +1067,42 @@ 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"
       }
     };
   }

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

@@ -33,7 +33,6 @@ export class FilterColumn {
   async show(configs) {
     var _a;
     if (this.canShow(configs)) {
-      await this.hide();
       this.fieldDescriptor = (_a = configs.fieldDescriptor) !== null && _a !== void 0 ? _a : this.dataUnit.getField(configs.columnName);
       this.buildIsTextSearch();
       this.columnName = configs.columnName;

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.css

@@ -95,6 +95,7 @@
   width: 100%;
   background-color: #fff;
   display: flex;
+  outline: none;
 
   /*public*/
   z-index: var(--ez-list__host--z-index);

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

@@ -1,6 +1,6 @@
 :host {
   --ez-modal-container-overflow-y: auto;
-  --ez-modal-container-overflow-x: clip;
+  --ez-modal-container-overflow-x: hidden;
   display: grid;
   grid-template-rows: 0 auto 1fr auto 0;
   width: 100%;
@@ -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-popover-plus/subcomponent/ez-popover-core.js

@@ -2,7 +2,6 @@ import { computePosition, flip, shift } from "@floating-ui/dom";
 import { h, Host } from "@stencil/core";
 export class EzPopoverCore {
   constructor() {
-    this.TIME_DEBOUNCE = 500;
     this.autoClose = true;
     this.boxWidth = "fit-content";
     this.opened = false;
@@ -106,11 +105,6 @@ export class EzPopoverCore {
       return;
     }
     const currentAnchorElement = this.getAnchorElement();
-    if (this.useAnchorSize) {
-      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
-      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
-      this._box.style.width = `${width}px`;
-    }
     await computePosition(currentAnchorElement, this._box, {
       placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
       middleware: [flip(), shift({ padding: 5 })],
@@ -138,6 +132,12 @@ export class EzPopoverCore {
     }
     this._box.style.display = 'flex';
     this._box.style.visibility = 'hidden';
+    if (this.useAnchorSize) {
+      const currentAnchorElement = this.getAnchorElement();
+      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
+      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
+      this._box.style.width = `${width}px`;
+    }
     await this.updatePositionPopover();
     this.openOverlay();
     this.ezVisibilityChange.emit(true);
@@ -164,18 +164,15 @@ export class EzPopoverCore {
     }
     return false;
   }
-  updatePositionDebounce() {
+  handlePositionUpdate() {
     if (!this.opened) {
       return;
     }
-    clearTimeout(this._timeoutDebounce);
-    this._timeoutDebounce = setTimeout(() => {
-      this.updatePositionPopover();
-    }, this.TIME_DEBOUNCE);
+    this.updatePositionPopover();
   }
   componentWillLoad() {
-    window.addEventListener('scroll', this.updatePositionDebounce.bind(this), true);
-    window.addEventListener('resize', this.updatePositionDebounce.bind(this), true);
+    window.addEventListener('scroll', this.handlePositionUpdate.bind(this), true);
+    window.addEventListener('resize', this.handlePositionUpdate.bind(this), true);
   }
   componentDidLoad() {
     this._overlayIsActive = this.checkStatusOverlay();
@@ -184,8 +181,8 @@ export class EzPopoverCore {
     this.openPopover();
   }
   disconnectedCallback() {
-    window.removeEventListener('scroll', this.updatePositionDebounce.bind(this), true);
-    window.removeEventListener('resize', this.updatePositionDebounce.bind(this), true);
+    window.removeEventListener('scroll', this.handlePositionUpdate.bind(this), true);
+    window.removeEventListener('resize', this.handlePositionUpdate.bind(this), true);
     this._resizeObserver.disconnect();
   }
   render() {

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

@@ -462,6 +462,16 @@ export class EzSearch {
           return;
       });
     });
+    this._intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting && this._ezPopOverPlusElement) {
+          this._ezPopOverPlusElement.hide();
+        }
+      });
+    }, { threshold: 0.1 });
+    if (this._textInput) {
+      this._intersectionObserver.observe(this._textInput);
+    }
     await this.handleInitialValue();
     if (this.autoFocus) {
       requestAnimationFrame(() => {
@@ -470,8 +480,9 @@ export class EzSearch {
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this._intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
   }
   //---------------------------------------------
   // Event handlers

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

@@ -5,6 +5,8 @@ export class SearchList {
   constructor() {
     this._startHighlightTag = "<span class='card-item__highlight'>";
     this._endHighlightTag = "</span>";
+    this.MAX_HEIGHT = 350;
+    this.HEADER_MENU_HEIGHT = 60;
     this.showLoading = undefined;
     this.visibleOptions = [];
     this.textEmptyList = undefined;
@@ -58,11 +60,38 @@ export class SearchList {
     };
     return h("div", { style: { "height": "100%" }, class: index === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this.changePreSelection.emit(index) }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
   }
+  componentDidLoad() {
+    if (this._optionsList) {
+      this._optionsList.style.maxHeight = `${this.MAX_HEIGHT}px`;
+    }
+  }
+  componentDidUpdate() {
+    if (this._optionsList) {
+      const rect = this._optionsList.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      if (spaceBelow < 0) {
+        this.adjustMaxHeight(rect);
+      }
+    }
+  }
+  adjustMaxHeight(rect) {
+    if (this._optionsList) {
+      const spaceAbove = rect.top - this.HEADER_MENU_HEIGHT;
+      const maxHeight = this.MAX_HEIGHT;
+      const height = Math.min(spaceAbove, maxHeight);
+      this._optionsList.style.maxHeight = `${height}px`;
+    }
+  }
+  cleanEmptyObjectArray(arr) {
+    return arr.filter(item => {
+      return Object.values(item).some(valor => valor !== undefined);
+    });
+  }
   render() {
     return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
-      && this.visibleOptions.length === 0
+      && this.cleanEmptyObjectArray(this.visibleOptions).length === 0
       && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this.textEmptyList)), this.showLoading
-      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
+      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions && this.cleanEmptyObjectArray(this.visibleOptions).map((opt, index) => this.buildItem(opt, index)))));
   }
   static get is() { return "search-list"; }
   static get encapsulation() { return "shadow"; }

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

@@ -669,11 +669,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         },
         "attribute": "show-selected-value",
         "reflect": false,
@@ -690,11 +687,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         },
         "attribute": "suppress-empty-option",
         "reflect": false,
@@ -711,11 +705,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         },
         "attribute": "hide-error-on-focus-out",
         "reflect": false,
@@ -737,11 +728,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         }
       },
       "isTextSearch": {
@@ -755,11 +743,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         },
         "attribute": "is-text-search",
         "reflect": false,
@@ -776,11 +761,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         },
         "attribute": "ignore-limit-chars-to-search",
         "reflect": false,
@@ -797,11 +779,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         },
         "attribute": "suppress-search",
         "reflect": false,
@@ -818,11 +797,8 @@ export class EzSearchPlus {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
         },
         "attribute": "suppress-pre-load",
         "reflect": false,

package/dist/collection/components/ez-skeleton/ez-skeleton.constants.js

@@ -1 +1,25 @@
-export const ALLOWED_ANIMATIONS = ['progress', 'progress-dark', 'pulse', 'false'];
+export const ALLOWED_ANIMATIONS = ['progress', 'pulse', 'false'];
+export const ALLOWED_VARIANTS = ['circle', 'rect', 'text'];
+export const DEFAULT_VALUES = {
+  COUNT: 1,
+  VARIANT: 'text',
+  ANIMATION: 'progress'
+};
+export const SKELETON_ARIA = {
+  DATA_BUSY: 'true',
+  DATA_VALUEMIN: '0',
+  DATA_VALUEMAX: '100',
+  DATA_VALUETEXT: 'Loading...',
+  ROLE: 'progressbar',
+  TABINDEX: '0'
+};
+export const VARIANT_TYPES = {
+  CIRCLE: 'circle',
+  RECT: 'rect',
+  TEXT: 'text'
+};
+export const ANIMATION_TYPES = {
+  PROGRESS: 'progress',
+  PULSE: 'pulse',
+  FALSE: 'false'
+};