@sankhyalabs/ezui 5.22.0-dev.12 → 5.22.0-dev.121

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

@@ -0,0 +1,434 @@
+import { Host, h } from "@stencil/core";
+export class EzPopoverPlus {
+  constructor() {
+    this.autoClose = true;
+    this.boxWidth = "fit-content";
+    this.opened = false;
+    this.overlayType = "light";
+    this.anchorElement = undefined;
+    this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
+    this.useAnchorSize = false;
+    this.minWidth = 150;
+  }
+  async observeOpened(newValue) {
+    if (newValue && !this._popOverCore) {
+      this.renderPopoverCore();
+    }
+    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));
+  }
+  /**
+   * Exibe o ez-popover.
+   */
+  async show(top, left) {
+    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 (!this._popOverCore) {
+      this.renderPopoverCore();
+    }
+    await this._popOverCore.showUnder(element, options);
+  }
+  /**
+   * Oculta o ez-popover.
+   */
+  async hide() {
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.hide());
+  }
+  /**
+   * Altera as opções.
+  */
+  async setOptions(options) {
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setOptions(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;
+  }
+  getFirstElement(collection) {
+    if (Array.isArray(collection) && collection.length) {
+      return collection[0];
+    }
+    if (!Array.isArray(collection) && collection.item) {
+      return collection.item(0);
+    }
+    return null;
+  }
+  renderPopoverCore() {
+    var _a;
+    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;
+    this._popOverCore.useAnchorSize = this.useAnchorSize;
+    this._popOverCore.minWidth = this.minWidth;
+    this._popOverCore.addEventListener('ezVisibilityChange', ({ detail }) => {
+      this.ezVisibilityChange.emit(detail);
+      this.opened = detail;
+    });
+    const firstChild = this.getFirstElement(this._host.children);
+    if (firstChild) {
+      this._popOverCore.appendChild(firstChild);
+    }
+    else {
+      console.warn('O slot do popover está vazio. Adicione conteúdo ao slot para exibição correta.');
+    }
+    const root = document.body.querySelector("#root");
+    const firstDiv = this.getFirstElement(document.body.getElementsByTagName("div"));
+    const parentElement = (_a = root !== null && root !== void 0 ? root : firstDiv) !== null && _a !== void 0 ? _a : document.body;
+    parentElement.appendChild(this._popOverCore);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ez-popover-plus"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-popover-plus.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-popover-plus.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define que ser\u00E1 fechado automaticamente quando o usu\u00E1rio clicar fora do conte\u00FAdo."
+        },
+        "attribute": "auto-close",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "boxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"full-width\" | \"fit-content\"",
+          "resolved": "\"fit-content\" | \"full-width\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Ajusta o comportamento da largura do popover."
+        },
+        "attribute": "box-width",
+        "reflect": true,
+        "defaultValue": "\"fit-content\""
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o ez-popover est\u00E1 aberto."
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "overlayType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"medium\" | \"light\" | \"none\"",
+          "resolved": "\"light\" | \"medium\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de overlay do popover."
+        },
+        "attribute": "overlay-type",
+        "reflect": true,
+        "defaultValue": "\"light\""
+      },
+      "anchorElement": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<HTMLElement | string> | HTMLElement | string",
+          "resolved": "(string | HTMLElement)[] | HTMLElement | string",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o elemento de ancoragem."
+        },
+        "attribute": "anchor-element",
+        "reflect": true
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IEzPopoverAnchorOptions",
+          "resolved": "IEzPopoverAnchorOptions",
+          "references": {
+            "IEzPopoverAnchorOptions": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define as op\u00E7\u00F5es do elemento."
+        },
+        "defaultValue": "{ horizontalGap: 0, verticalGap: 0, fromRight: false }"
+      },
+      "useAnchorSize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o elemento manter\u00E1 o mesmo tamanho do componente de ancora."
+        },
+        "attribute": "use-anchor-size",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "minWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a largura m\u00EDnima do elemento (apenas ser\u00E1 considerada caso a propriedade useAnchorSize seja verdadeira)."
+        },
+        "attribute": "min-width",
+        "reflect": true,
+        "defaultValue": "150"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezVisibilityChange",
+        "name": "ezVisibilityChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de estado do componente."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "updatePosition": {
+        "complexType": {
+          "signature": "(top?: string, left?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza a posi\u00E7\u00E3o do popover.",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "(top?: string | number, left?: string | number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Exibe o ez-popover.",
+          "tags": []
+        }
+      },
+      "showUnder": {
+        "complexType": {
+          "signature": "(element: HTMLElement | string, options?: IEzPopoverAnchorOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            },
+            "IEzPopoverAnchorOptions": {
+              "location": "local"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Ancora a exibi\u00E7\u00E3o do popOver a um elemento HTML.",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Oculta o ez-popover.",
+          "tags": []
+        }
+      },
+      "setOptions": {
+        "complexType": {
+          "signature": "(options: IEzPopoverAnchorOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IEzPopoverAnchorOptions": {
+              "location": "local"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Altera as op\u00E7\u00F5es.",
+          "tags": []
+        }
+      },
+      "setAnchorElement": {
+        "complexType": {
+          "signature": "(anchor: HTMLElement | string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Altera o elemento de ancoragem.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_host"; }
+  static get watchers() {
+    return [{
+        "propName": "opened",
+        "methodName": "observeOpened"
+      }];
+  }
+}

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(--elevation--100, 100);
+
+  /***************
+     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(--elevation--24, 24);
+}
+
+.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);
+}