@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-83282.0 → 0.0.0-bugfix-dev-KB-75065.1

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, ApplicationContext, KeyboardManager, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, ApplicationContext, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { Host, h } from '@stencil/core';
 import { ApplicationUtils } from '../../utils';
@@ -362,20 +362,6 @@ export class EzGrid {
         .then(() => this.resetPaginationState());
     }
   }
-  nextRecord() {
-    if (this.dataUnit) {
-      if (this.dataUnit.getSelectionInfo().records.length === 0) {
-        this.dataUnit.selectFirst();
-        return;
-      }
-      this.dataUnit.nextRecord();
-    }
-  }
-  previousRecord() {
-    if (this.dataUnit) {
-      this.dataUnit.previousRecord();
-    }
-  }
   resetPaginationState() {
     var _a;
     this._paginationChangedByKeyboard = false;
@@ -458,7 +444,6 @@ export class EzGrid {
     this._gridController.configFilterColumn(this._filterColumn);
     if (this.paginationCounterMode === 'auto')
       this._initHeaderOverflowWatcher();
-    this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
     var _a;
@@ -525,7 +510,6 @@ export class EzGrid {
     var _a, _b;
     (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
     (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.destroy();
-    this.removeShortcuts();
   }
   connectedCallback() {
     var _a;
@@ -564,45 +548,6 @@ export class EzGrid {
       return "left__header-expanded";
     return "left__header-contracted";
   }
-  async initKeyboardManager() {
-    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
-    this._keyboardManager
-      .bind("ctrl + .", () => {
-      if (!this._paginationInfo)
-        return;
-      this.nextRecord();
-    }, { description: "Avança para o próximo registro.", element: this._element })
-      .bind("ctrl + ,", () => {
-      if (!this._paginationInfo)
-        return;
-      this.previousRecord();
-    }, { description: "Retorna ao registro anterior.", element: this._element })
-      .bind("ctrl + alt + ArrowLeft", () => {
-      if (!this._paginationInfo)
-        return;
-      const { currentPage } = this._paginationInfo;
-      if (currentPage > 0) {
-        this.previousPage();
-      }
-    }, { description: "Retorna a pagina anterior.", element: this._element })
-      .bind("ctrl + alt + ArrowRight", () => {
-      if (!this._paginationInfo)
-        return;
-      const { hasMore } = this._paginationInfo;
-      if (hasMore) {
-        this.nextPage();
-      }
-    }, { description: "Avança para a próxima página.", element: this._element });
-  }
-  async removeShortcuts() {
-    if (this._keyboardManager) {
-      this._keyboardManager
-        .unbind("ctrl + .")
-        .unbind("ctrl + ,")
-        .unbind("ctrl + alt + ArrowLeft")
-        .unbind("ctrl + alt + ArrowRight");
-    }
-  }
   render() {
     var _a;
     return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: {

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

@@ -1,3 +1,67 @@
 :host {
+
+  /* box */
+  /*@doc Define o raio da borda do popover.*/
+  --ez-popover__box--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a sombra do popover.*/
+  --ez-popover__box--box-shadow: var(--shadow, 0px 0px 16px 0px #000);
+  /*@doc Define a cor de fundo do popover.*/
+  --ez-popover__box--background-color: var(--background--xlight, #fff);
+  /*@doc Define a camada de visibilidade do popover.*/
+  --ez-popover__box--z-index: var(--most-visible, 4);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  position: relative;
+  display: flex;
+  user-select: none;
+}
+
+.popover__overlay {
   display: none;
+  position: fixed;
+  padding: 0;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  z-index: var(--more-visible--2x, 3);
+}
+
+.popover__overlay--light {
+  background-color: rgba(var(--rgb-background--overlay), var(--opacity--bright)); 
+}
+
+.popover__overlay--medium {
+  background-color: rgba(var(--rgb-background--overlay), var(--opacity--soft));
+  backdrop-filter: blur(var(--background-blur--medium)); 
+}
+
+.popover__box {
+  /*private*/
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  z-index: var(--ez-popover__box--z-index);
+  flex-direction: column;
+
+  height: fit-content;
+
+  /*public*/
+  background-color: var(--ez-popover__box--background-color);
+  border-radius: var(--ez-popover__box--border-radius);
+  box-shadow: var(--ez-popover__box--box-shadow);
+}
+
+.popover__box--fit-content {
+  width: fit-content;
+}
+
+.popover__box--full-width {
+  width: calc(100% - 10px);
 }

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

@@ -1,6 +1,8 @@
-import { Host, h } from "@stencil/core";
+import { computePosition, flip, shift } from "@floating-ui/dom";
+import { h, Host } from "@stencil/core";
 export class EzPopoverPlus {
   constructor() {
+    this.TIME_DEBOUNCE = 500;
     this.autoClose = true;
     this.boxWidth = "fit-content";
     this.opened = false;
@@ -8,80 +10,167 @@ export class EzPopoverPlus {
     this.anchorElement = undefined;
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
   }
-  listenerEzVisibilityChange({ detail }) {
-    this.ezVisibilityChange.emit(detail);
-  }
-  async observeOpened(newValue) {
-    if (newValue && !this._popOverCore) {
-      this.renderPopoverCore();
+  async observeOpened(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      if (newValue) {
+        this.openPopover();
+      }
+      else {
+        this.hidePopover();
+      }
+      this.ezVisibilityChange.emit(newValue);
+      return;
     }
-    this._popOverCore.opened = newValue;
   }
   /**
    * Atualiza a posição do popover.
    */
   async updatePosition(top, left) {
-    var _a;
-    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.updatePosition(top, left));
+    this.updateOptionPosition(top, left);
+    await this.updatePositionPopover();
   }
   /**
    * Exibe o ez-popover.
    */
   async show(top, left) {
-    if (!this._popOverCore) {
-      this.renderPopoverCore();
-    }
-    await this._popOverCore.show(top, left);
+    this.updateOptionPosition(top, left);
+    this.opened = true;
   }
   /**
    * Ancora a exibição do popOver a um elemento HTML.
    */
   async showUnder(element, options) {
-    if (!this._popOverCore) {
-      this.renderPopoverCore();
+    if (options) {
+      this.options = options;
     }
-    await this._popOverCore.showUnder(element, options);
+    this.anchorElement = element;
+    this.opened = true;
   }
   /**
    * Oculta o ez-popover.
    */
   async hide() {
-    var _a;
-    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.hide());
+    this.opened = false;
   }
   /**
    * Altera as opções.
   */
   async setOptions(options) {
-    var _a;
-    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setOptions(options));
+    Object.assign(this.options, options);
   }
   /**
    * Altera o elemento de ancoragem.
   */
   async setAnchorElement(anchor) {
-    var _a;
-    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setAnchorElement(anchor));
+    this.anchorElement = anchor;
+  }
+  parseSizePixel(sizePixel, defaultValue) {
+    if (!sizePixel) {
+      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0;
+    }
+    if (typeof sizePixel === "string") {
+      return Number(sizePixel.replace("px", ""));
+    }
+    return sizePixel !== null && sizePixel !== void 0 ? sizePixel : 0;
+  }
+  updateOptionPosition(top, left) {
+    Object.assign(this.options, {
+      horizontalGap: this.parseSizePixel(left, this.options.horizontalGap),
+      verticalGap: this.parseSizePixel(top, this.options.verticalGap),
+    });
+  }
+  async updatePositionPopover() {
+    if (!this._box || !this.opened) {
+      return;
+    }
+    if (!this.anchorElement) {
+      this.anchorElement = this._host;
+    }
+    if (typeof this.anchorElement === 'string') {
+      this.anchorElement = document.getElementById(this.anchorElement);
+    }
+    await computePosition(this.anchorElement, this._box, {
+      placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
+      middleware: [flip(), shift({ padding: 5 })],
+      strategy: 'fixed',
+    }).then(({ x, y, placement }) => {
+      const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
+      const newLeft = placement.includes("start") ? x + this.options.horizontalGap : x - this.options.horizontalGap;
+      Object.assign(this._box.style, {
+        top: `${newTop}px`,
+        left: `${newLeft}px`,
+      });
+    });
+  }
+  hidePopover() {
+    if (!this._box) {
+      return;
+    }
+    this._box.style.display = '';
+    this.hideOverlay();
+    this.ezVisibilityChange.emit(false);
   }
-  renderPopoverCore() {
-    this._popOverCore = document.createElement('ez-popover-core');
-    this._popOverCore.opened = this.opened;
-    this._popOverCore.anchorElement = this.anchorElement;
-    this._popOverCore.autoClose = this.autoClose;
-    this._popOverCore.boxWidth = this.boxWidth;
-    this._popOverCore.overlayType = this.overlayType;
-    this._popOverCore.options = this.options;
-    const firstChild = this._host.children.item(0);
-    if (firstChild) {
-      this._popOverCore.appendChild(firstChild);
+  async openPopover() {
+    if (!this._box) {
+      return;
     }
-    else {
-      console.warn('O slot do popover está vazio. Adicione conteúdo ao slot para exibição correta.');
+    this._box.style.display = 'flex';
+    this._box.style.visibility = 'hidden';
+    await this.updatePositionPopover();
+    this.openOverlay();
+    this.ezVisibilityChange.emit(true);
+    this._box.style.visibility = 'visible';
+  }
+  openOverlay() {
+    if (!this._overlay || !this._overlayIsActive) {
+      return;
+    }
+    this._overlay.style.display = 'block';
+  }
+  hideOverlay() {
+    if (!this._overlay) {
+      return;
+    }
+    this._overlay.style.display = 'none';
+  }
+  checkStatusOverlay() {
+    if (this.overlayType !== "none") {
+      return true;
+    }
+    if (this.overlayType === "none" && this.autoClose) {
+      return true;
+    }
+    return false;
+  }
+  updatePositionDebounce() {
+    if (!this.opened) {
+      return;
     }
-    document.body.appendChild(this._popOverCore);
+    clearTimeout(this._timeoutDebounce);
+    this._timeoutDebounce = setTimeout(() => {
+      this.updatePositionPopover();
+    }, this.TIME_DEBOUNCE);
+  }
+  componentWillLoad() {
+    window.addEventListener('scroll', this.updatePositionDebounce.bind(this), true);
+    window.addEventListener('resize', this.updatePositionDebounce.bind(this), true);
+  }
+  componentDidLoad() {
+    this._overlayIsActive = this.checkStatusOverlay();
+    this._resizeObserver = new ResizeObserver(this.updatePositionPopover.bind(this));
+    this._resizeObserver.observe(this._box);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.updatePositionDebounce.bind(this), true);
+    window.removeEventListener('resize', this.updatePositionDebounce.bind(this), true);
+    this._resizeObserver.disconnect();
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, null, h("div", { ref: el => this._overlay = el, onClick: () => this.hide(), class: `popover__overlay popover__overlay--${this.overlayType}` }), h("section", { ref: el => this._box = el, class: {
+        "popover__box": true,
+        "popover__box--fit-content": this.boxWidth === "fit-content",
+        "popover__box--full-width": this.boxWidth !== "fit-content",
+      } }, h("slot", null))));
   }
   static get is() { return "ez-popover-plus"; }
   static get encapsulation() { return "shadow"; }
@@ -373,13 +462,4 @@ export class EzPopoverPlus {
         "methodName": "observeOpened"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "ezVisibilityChange",
-        "method": "listenerEzVisibilityChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/custom-elements/index.d.ts

@@ -86,12 +86,6 @@ export const EzComboBox: {
   new (): EzComboBox;
 };
 
-interface EzComboBoxList extends Components.EzComboBoxList, HTMLElement {}
-export const EzComboBoxList: {
-  prototype: EzComboBoxList;
-  new (): EzComboBoxList;
-};
-
 interface EzCustomFormInput extends Components.EzCustomFormInput, HTMLElement {}
 export const EzCustomFormInput: {
   prototype: EzCustomFormInput;
@@ -212,12 +206,6 @@ export const EzPopover: {
   new (): EzPopover;
 };
 
-interface EzPopoverCore extends Components.EzPopoverCore, HTMLElement {}
-export const EzPopoverCore: {
-  prototype: EzPopoverCore;
-  new (): EzPopoverCore;
-};
-
 interface EzPopoverPlus extends Components.EzPopoverPlus, HTMLElement {}
 export const EzPopoverPlus: {
   prototype: EzPopoverPlus;