@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-132280.3 → 0.0.0-bugfix-dev-KB-157120.0

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

@@ -16,6 +16,7 @@ export class EzMuiltiSelectionList {
     this.useOptions = false;
     this.options = undefined;
     this.isTextSearch = false;
+    this.orderSelectedFirst = true;
     this.filteredOptions = undefined;
     this.displayOptions = undefined;
     this.viewScenario = undefined;
@@ -34,6 +35,21 @@ export class EzMuiltiSelectionList {
       this.filterInput.value = '';
     }
   }
+  async clearSelection() {
+    this.filteredOptions = [
+      ...this.filteredOptions.map(item => {
+        item.check = false;
+        return item;
+      }),
+    ];
+    if (this.searchInput) {
+      await this.searchInput.clearValue();
+    }
+    if (this.filterInput) {
+      this.filterInput.value = '';
+    }
+    this.changeFilteredOptions.emit(this.filteredOptions);
+  }
   onChangeUseOptions() {
     this.setInitialScenario();
   }
@@ -45,7 +61,11 @@ export class EzMuiltiSelectionList {
     this.setInitialScenario();
   }
   onChangeFilteredOptions(optionsListUpdated) {
-    this.displayOptions = this.filteredOptions;
+    var _a;
+    const activeFilter = (_a = this.filterInput) === null || _a === void 0 ? void 0 : _a.value;
+    this.displayOptions = activeFilter
+      ? ArrayUtils.applyStringFilter(activeFilter, this.filteredOptions, true)
+      : this.filteredOptions;
     this.displayOptionToCheckAllItems = this.filteredOptions.length > 1;
     this.checkInput && this.changeCheckAllValeuFromFilteredOptions();
     this.changeFilteredOptions.emit(optionsListUpdated);
@@ -57,6 +77,10 @@ export class EzMuiltiSelectionList {
     this.changeCheckAllValeuFromFilteredOptions();
   }
   ordenationByCheckStateAndAlphabetically(filteredOptions) {
+    if (!this.orderSelectedFirst) {
+      return filteredOptions.map(item => (item.value == undefined || item.label === "")
+        ? Object.assign(Object.assign({}, item), { label: this.i18n("ez-multi-selection-list.empty") }) : item);
+    }
     const listWithSelectChecked = [];
     const listWithNotSelectChecked = [];
     let emptyElement;
@@ -109,6 +133,9 @@ export class EzMuiltiSelectionList {
   }
   async handleSearchOnDataSource(event) {
     var _a;
+    if (!event.detail) {
+      return;
+    }
     const optionsToSort = (_a = this.filteredOptions) !== null && _a !== void 0 ? _a : [];
     if (event.detail && !optionsToSort.some(item => item.value == event.detail.value)) {
       this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
@@ -135,18 +162,13 @@ export class EzMuiltiSelectionList {
     this.viewScenario = ViewScenarios.OPTIONS;
   }
   handleChangeSelectAllItems(event) {
-    this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([
-      ...this.filteredOptions.map(item => {
-        item.check = !!event.detail;
-        return item;
-      }),
-    ]);
+    const allChecked = !!event.detail;
+    this.filteredOptions = this.filteredOptions.map(item => (Object.assign(Object.assign({}, item), { check: allChecked })));
   }
   handleChangeSelectedItem(event) {
     const { detail: itemCheckSelected } = event;
-    const itemSelected = this.filteredOptions.find(item => item.label === itemCheckSelected.label);
-    itemSelected.check = itemCheckSelected.check;
-    this.changeFilteredOptions.emit(this.filteredOptions);
+    this.filteredOptions = this.filteredOptions.map(item => item.label === itemCheckSelected.label
+      ? Object.assign(Object.assign({}, item), { check: itemCheckSelected.check }) : item);
   }
   buildViewList(hasDelete) {
     return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: this.i18n("ez-multi-selection-list.selectAll"), class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions.map(opt => (Object.assign(Object.assign({}, opt), { id: opt.value }))), listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
@@ -280,6 +302,24 @@ export class EzMuiltiSelectionList {
         "attribute": "is-text-search",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "orderSelectedFirst": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se as op\u00E7\u00F5es marcadas devem ser reordenadas para o topo da lista\n(e ordenadas alfabeticamente/pelo datasource). Quando `false`, a ordem original\ndas op\u00E7\u00F5es \u00E9 preservada \u2014 inclusive ao marcar/desmarcar itens.\nPadr\u00E3o: `true` (mant\u00E9m o comportamento hist\u00F3rico)."
+        },
+        "attribute": "order-selected-first",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
@@ -331,6 +371,22 @@ export class EzMuiltiSelectionList {
           "text": "",
           "tags": []
         }
+      },
+      "clearSelection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -10,6 +10,7 @@ export class EzPopoverPlus {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   async observeOpened(newValue) {
     if (newValue && !this._popOverCore) {
@@ -88,6 +89,7 @@ export class EzPopoverPlus {
     this._popOverCore.options = this.options;
     this._popOverCore.useAnchorSize = this.useAnchorSize;
     this._popOverCore.minWidth = this.minWidth;
+    this._popOverCore.fitInViewport = this.fitInViewport;
     this._popOverCore.setAttribute("data-element-id", this.buildElementId(["ez-popover-core", this._host.getAttribute("data-element-id")]));
     this._popOverCore.addEventListener('ezVisibilityChange', ({ detail }) => {
       this.ezVisibilityChange.emit(detail);
@@ -273,6 +275,24 @@ export class EzPopoverPlus {
         "attribute": "min-width",
         "reflect": true,
         "defaultValue": "150"
+      },
+      "fitInViewport": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o popover deve se ajustar ao espa\u00E7o vis\u00EDvel dispon\u00EDvel para n\u00E3o ser\ncortado pelas bordas da tela (ou por containers com rolagem). Quando verdadeiro,\no conte\u00FAdo passa a rolar internamente em vez de ficar com parte oculta.\nPadr\u00E3o: true."
+        },
+        "attribute": "fit-in-viewport",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/ez-popover-plus/subcomponent/ez-popover-core.js

@@ -1,4 +1,4 @@
-import { computePosition, flip, shift } from "@floating-ui/dom";
+import { computePosition, flip, shift, size } from "@floating-ui/dom";
 import { h, Host } from "@stencil/core";
 export class EzPopoverCore {
   constructor() {
@@ -10,6 +10,7 @@ export class EzPopoverCore {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   observeOpened(newValue, oldValue) {
     if (newValue === oldValue) {
@@ -105,9 +106,21 @@ export class EzPopoverCore {
       return;
     }
     const currentAnchorElement = this.getAnchorElement();
+    const middleware = [flip(), shift({ padding: 5 })];
+    if (this.fitInViewport) {
+      middleware.push(size({
+        padding: 5,
+        apply: ({ availableWidth, availableHeight, elements }) => {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${Math.max(0, availableWidth)}px`,
+            maxHeight: `${Math.max(0, availableHeight)}px`
+          });
+        },
+      }));
+    }
     await computePosition(currentAnchorElement, this._box, {
       placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
-      middleware: [flip(), shift({ padding: 5 })],
+      middleware,
       strategy: 'fixed',
     }).then(({ x, y, placement }) => {
       const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
@@ -123,6 +136,9 @@ export class EzPopoverCore {
       return;
     }
     this._box.style.display = '';
+    this._box.style.maxWidth = '';
+    this._box.style.maxHeight = '';
+    this._box.style.overflow = '';
     this.hideOverlay();
     this.ezVisibilityChange.emit(false);
   }
@@ -357,6 +373,24 @@ export class EzPopoverCore {
         "attribute": "min-width",
         "reflect": true,
         "defaultValue": "150"
+      },
+      "fitInViewport": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o popover deve se ajustar ao espa\u00E7o vis\u00EDvel dispon\u00EDvel para n\u00E3o ser\ncortado pelas bordas da tela (ou por containers com rolagem). Quando verdadeiro,\na largura/altura m\u00E1ximas do popover passam a ser limitadas ao espa\u00E7o dispon\u00EDvel\ne o conte\u00FAdo rola internamente, em vez de ficar com parte oculta. O elemento\npermanece no shadow DOM, preservando o estilo e o conte\u00FAdo do slot.\nPadr\u00E3o: true."
+        },
+        "attribute": "fit-in-viewport",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -49,10 +49,10 @@ export class EzPopup {
   }
   manageOverlay() {
     if (this.opened) {
-      this._overlayId = FloatingManager.subscribeOverlayControl(this._popupRef);
+      this._overlayId = FloatingManager.subscribeOverlayControl(this._overlayRef);
     }
     else {
-      FloatingManager.unsubscribeOverlayControl(this._popupRef || this._overlayId);
+      FloatingManager.unsubscribeOverlayControl(this._overlayRef || this._overlayId);
     }
   }
   popUpFocus() {
@@ -89,7 +89,6 @@ export class EzPopup {
   }
   componentDidRender() {
     this.manageOverlay();
-    this.popUpFocus();
   }
   handleAutoClose(event) {
     if (!this.opened || !this._popupRef || !this.autoClose) {
@@ -148,7 +147,7 @@ export class EzPopup {
     return this.footerButtons.slice(0, 3).map((buttonProps, index) => (h("ez-button", Object.assign({ key: index }, this.handleDefaultPropsButtonsByIndex(index), buttonProps))));
   }
   render() {
-    return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
+    return (h(Host, null, this.opened && (h("div", { class: "overlay", ref: ref => this._overlayRef = ref, tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
       h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: {
         "popup__expandable-content": true,
         "popup__overflow-y--auto": this.enabledScroll

package/dist/collection/components/ez-record-navigation/ez-record-navigation.css

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+}
+
+.record-navigation__container {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+}
+
+.record-navigation__buttons-container {
+  display: flex;
+  gap: var(--space--8, 8px);
+}
+
+.record-navigation__container-label {
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  color: var(--color--gray-600, #1C1D22);
+  text-shadow: 0 0 var(--color--gray-500, #494A4E), 0 0 1px transparent;
+  margin-right: var(--space--12, 12px);
+  display: flex;
+  align-items: center;
+}
+
+.record-navigation-contracted {
+  width: 100px;
+}
+
+.record-navigation-expanded {
+  min-width: 150px;
+}
+
+.record-navigation__label {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.record-navigation__divider {
+  width: 3px;
+  height: 15px;
+  background-color: var(--color--gray-300, #C1C2C6);
+  margin-inline: var(--space--8, 8px);
+}
+
+.record-navigation-text-right {
+  flex-direction: row-reverse;
+}

package/dist/collection/components/ez-record-navigation/ez-record-navigation.js

@@ -0,0 +1,246 @@
+import { Action, ElementIDUtils } from '@sankhyalabs/core';
+import { Fragment, Host, h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
+export class EzRecordNavigation {
+  constructor() {
+    this._dataUnitInitialized = false;
+    this.leftButtonDisabled = undefined;
+    this.rightButtonDisabled = undefined;
+    this.dataUnit = undefined;
+    this.primaryKeys = undefined;
+    this.textPosition = 'right';
+    this.disabled = false;
+  }
+  /**
+   * Navega para a página anterior.
+   */
+  async previousRecord() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.previousRecord();
+  }
+  /**
+   * Navega para a próxima página.
+   */
+  async nextRecord() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.nextRecord();
+  }
+  onDataUnitChange() {
+    this.initializeDataUnit();
+  }
+  onDisabledChange() {
+    this.setStatusButtonPagination();
+  }
+  renderPageTitle() {
+    if (!this.primaryKeys) {
+      return null;
+    }
+    return this.primaryKeys.map((key, index) => {
+      var _a;
+      const fieldValue = this.dataUnit.getFieldValue(key);
+      const fieldLabel = (_a = this.dataUnit.getField(key)) === null || _a === void 0 ? void 0 : _a.label;
+      const isLast = index === this.primaryKeys.length - 1;
+      return (h(Fragment, null, h("ez-tooltip", { message: fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : fieldValue }, h("span", { class: "record-navigation__label", "aria-live": "polite", "aria-atomic": "true" }, fieldValue !== null && fieldValue !== void 0 ? fieldValue : '-')), !isLast && h("span", { class: "record-navigation__divider" })));
+    });
+  }
+  dataUnitObserver(action) {
+    switch (action.type) {
+      case Action.SELECTION_CHANGED:
+      case Action.PREVIOUS_SELECTED:
+      case Action.NEXT_SELECTED:
+        this.setStatusButtonPagination();
+        break;
+      default:
+        break;
+    }
+  }
+  getLeftButtonDisabledStatus() {
+    if (!this.dataUnit || this.disabled)
+      return true;
+    return !this.dataUnit.hasPrevious();
+  }
+  getRightButtonDisabledStatus() {
+    if (!this.dataUnit || this.disabled)
+      return true;
+    return !this.dataUnit.hasNext();
+  }
+  setStatusButtonPagination() {
+    this.leftButtonDisabled = this.getLeftButtonDisabledStatus();
+    this.rightButtonDisabled = this.getRightButtonDisabledStatus();
+  }
+  initializeDataUnit() {
+    if (!this.dataUnit || this._dataUnitInitialized) {
+      return;
+    }
+    this.setStatusButtonPagination();
+    this._dataUnitObserverBound = this.dataUnitObserver.bind(this);
+    this.dataUnit.subscribe(this._dataUnitObserverBound);
+    this._dataUnitInitialized = true;
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  async connectedCallback() {
+    this.i18n = await initI18n();
+    this.initializeDataUnit();
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  disconnectedCallback() {
+    if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
+      this.dataUnit.unsubscribe(this._dataUnitObserverBound);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "record-navigation__container": true,
+        "record-navigation-text-right": this.textPosition === 'right'
+      } }, h("div", { class: "record-navigation__container-label" }, this.renderPageTitle()), h("div", { id: "grid-record-navigation-tooltip", class: "record-navigation__buttons-container" }, h("ez-tooltip", { message: this.i18n("ez-record-navigation.previousRecord") }, h("ez-button", { iconName: "chevron-left", mode: "icon", isDisabled: this.leftButtonDisabled, onClick: () => this.previousRecord(), label: this.i18n("ez-record-navigation.previousRecord") })), h("ez-tooltip", { message: this.i18n("ez-record-navigation.nextRecord") }, h("ez-button", { iconName: "chevron-right", mode: "icon", isDisabled: this.rightButtonDisabled, onClick: () => this.nextRecord(), label: this.i18n("ez-record-navigation.nextRecord") }))))));
+  }
+  static get is() { return "ez-record-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-record-navigation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-record-navigation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "DataUnit."
+        }
+      },
+      "primaryKeys": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chaves prim\u00E1rias dos registros, usadas para visualizar o registro atual."
+        }
+      },
+      "textPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-position",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Desabilita a navega\u00E7\u00E3o entre os registros."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "leftButtonDisabled": {},
+      "rightButtonDisabled": {}
+    };
+  }
+  static get methods() {
+    return {
+      "previousRecord": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a p\u00E1gina anterior.",
+          "tags": []
+        }
+      },
+      "nextRecord": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a pr\u00F3xima p\u00E1gina.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "dataUnit",
+        "methodName": "onDataUnitChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "onDisabledChange"
+      }];
+  }
+}

package/dist/collection/components/ez-scroller/EzScrollNavigationMode.js

@@ -0,0 +1,5 @@
+export var EzScrollNavigationMode;
+(function (EzScrollNavigationMode) {
+  EzScrollNavigationMode["SCROLLBAR"] = "scrollbar";
+  EzScrollNavigationMode["BUTTONS"] = "buttons";
+})(EzScrollNavigationMode || (EzScrollNavigationMode = {}));