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

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

@@ -1,8 +1,6 @@
-import { computePosition, flip, shift } from "@floating-ui/dom";
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class EzPopoverPlus {
   constructor() {
-    this.TIME_DEBOUNCE = 500;
     this.autoClose = true;
     this.boxWidth = "fit-content";
     this.opened = false;
@@ -10,167 +8,80 @@ export class EzPopoverPlus {
     this.anchorElement = undefined;
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
   }
-  async observeOpened(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      if (newValue) {
-        this.openPopover();
-      }
-      else {
-        this.hidePopover();
-      }
-      this.ezVisibilityChange.emit(newValue);
-      return;
+  listenerEzVisibilityChange({ detail }) {
+    this.ezVisibilityChange.emit(detail);
+  }
+  async observeOpened(newValue) {
+    if (newValue && !this._popOverCore) {
+      this.renderPopoverCore();
     }
+    this._popOverCore.opened = newValue;
   }
   /**
    * Atualiza a posição do popover.
    */
   async updatePosition(top, left) {
-    this.updateOptionPosition(top, left);
-    await this.updatePositionPopover();
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.updatePosition(top, left));
   }
   /**
    * Exibe o ez-popover.
    */
   async show(top, left) {
-    this.updateOptionPosition(top, left);
-    this.opened = true;
+    if (!this._popOverCore) {
+      this.renderPopoverCore();
+    }
+    await this._popOverCore.show(top, left);
   }
   /**
    * Ancora a exibição do popOver a um elemento HTML.
    */
   async showUnder(element, options) {
-    if (options) {
-      this.options = options;
+    if (!this._popOverCore) {
+      this.renderPopoverCore();
     }
-    this.anchorElement = element;
-    this.opened = true;
+    await this._popOverCore.showUnder(element, options);
   }
   /**
    * Oculta o ez-popover.
    */
   async hide() {
-    this.opened = false;
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.hide());
   }
   /**
    * Altera as opções.
   */
   async setOptions(options) {
-    Object.assign(this.options, options);
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setOptions(options));
   }
   /**
    * Altera o elemento de ancoragem.
   */
   async 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);
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setAnchorElement(anchor));
   }
-  async openPopover() {
-    if (!this._box) {
-      return;
+  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);
     }
-    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;
+    else {
+      console.warn('O slot do popover está vazio. Adicione conteúdo ao slot para exibição correta.');
     }
-    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();
+    document.body.appendChild(this._popOverCore);
   }
   render() {
-    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))));
+    return (h(Host, null, h("slot", null)));
   }
   static get is() { return "ez-popover-plus"; }
   static get encapsulation() { return "shadow"; }
@@ -462,4 +373,13 @@ export class EzPopoverPlus {
         "methodName": "observeOpened"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "ezVisibilityChange",
+        "method": "listenerEzVisibilityChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -0,0 +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);
+}