@sankhyalabs/ezui 5.0.6 → 5.1.0

package/dist/types/components/ez-popover/ez-popover.d.ts

@@ -9,22 +9,6 @@ export declare class EzPopover {
    * Define que será fechado automaticamente quando o usuário clicar fora do conteúdo.
    */
   autoClose: boolean;
-  /**
-   * Define a distância do topo. Devem ser usados valores válidos de CSS.
-   */
-  top: string;
-  /**
-   * Define a distância do lado esquerdo. Devem ser usados valores válidos de CSS.
-   */
-  left: string;
-  /**
-   * Define a distância de baixo. Devem ser usados valores válidos de CSS.
-   */
-  bottom: string;
-  /**
-   * Define a distância do lado direito. Devem ser usados valores válidos de CSS.
-   */
-  right: string;
   /**
    * Ajusta o comportamento da largura do popover.
    */
@@ -51,11 +35,17 @@ export declare class EzPopover {
   /**
    * Atualiza a posição do popover.
    */
-  updatePosition(top?: string, left?: string, bottom?: string, right?: string): Promise<void>;
+  updatePosition(top?: string, left?: string): Promise<void>;
   /**
    * Exibe o ez-popover.
    */
-  show(top?: string, left?: string, bottom?: string, right?: string): Promise<void>;
+  show(top?: string, left?: string): Promise<void>;
+  /**
+   * Ancora a exibição do popOver a um elemento HTML.
+   */
+  showUnder(element: HTMLElement, options?: IEzPopoverAnchorOptions): Promise<void>;
+  private calculatePosition;
+  private float;
   /**
    * Oculta o ez-popover.
    */
@@ -63,3 +53,8 @@ export declare class EzPopover {
   componentDidRender(): void;
   render(): any;
 }
+export interface IEzPopoverAnchorOptions {
+  horizontalGap?: number;
+  verticalGap?: number;
+  fromRight?: boolean;
+}

package/dist/types/components.d.ts

@@ -23,6 +23,7 @@ import { IGuideItem } from "./components/ez-guide-navigator/interfaces";
 import { ListGroup, ListItem, TListMode } from "./components/ez-list/ez-list";
 import { THeightMode } from "./components/ez-modal/ez-modal";
 import { IMultiSelectionOption } from "./components/ez-multi-selection-list/interfaces/IMultiSelectionOption";
+import { IEzPopoverAnchorOptions } from "./components/ez-popover/ez-popover";
 import { Radio } from "./components/ez-radio-button/ez-radio-button";
 import { EzScrollDirection } from "./components/ez-scroller/EzScrollDirection";
 import { IOption as IOption1, ISearchArgument as ISearchArgument1 } from "./components/ez-combo-box/ez-combo-box";
@@ -928,10 +929,6 @@ export namespace Components {
           * Define que será fechado automaticamente quando o usuário clicar fora do conteúdo.
          */
         "autoClose": boolean;
-        /**
-          * Define a distância de baixo. Devem ser usados valores válidos de CSS.
-         */
-        "bottom": string;
         /**
           * Ajusta o comportamento da largura do popover.
          */
@@ -944,10 +941,6 @@ export namespace Components {
           * Define as tags que serão consideradas conteúdo.
          */
         "innerElement": Array<string> | string;
-        /**
-          * Define a distância do lado esquerdo. Devem ser usados valores válidos de CSS.
-         */
-        "left": string;
         /**
           * Define se o ez-popover está aberto.
          */
@@ -956,22 +949,18 @@ export namespace Components {
           * Define o tipo de overlay do popover.
          */
         "overlayType": "medium" | "light" | "none";
-        /**
-          * Define a distância do lado direito. Devem ser usados valores válidos de CSS.
-         */
-        "right": string;
         /**
           * Exibe o ez-popover.
          */
-        "show": (top?: string, left?: string, bottom?: string, right?: string) => Promise<void>;
+        "show": (top?: string, left?: string) => Promise<void>;
         /**
-          * Define a distância do topo. Devem ser usados valores válidos de CSS.
+          * Ancora a exibição do popOver a um elemento HTML.
          */
-        "top": string;
+        "showUnder": (element: HTMLElement, options?: IEzPopoverAnchorOptions) => Promise<void>;
         /**
           * Atualiza a posição do popover.
          */
-        "updatePosition": (top?: string, left?: string, bottom?: string, right?: string) => Promise<void>;
+        "updatePosition": (top?: string, left?: string) => Promise<void>;
     }
     interface EzPopup {
         /**
@@ -2790,10 +2779,6 @@ declare namespace LocalJSX {
           * Define que será fechado automaticamente quando o usuário clicar fora do conteúdo.
          */
         "autoClose"?: boolean;
-        /**
-          * Define a distância de baixo. Devem ser usados valores válidos de CSS.
-         */
-        "bottom"?: string;
         /**
           * Ajusta o comportamento da largura do popover.
          */
@@ -2802,10 +2787,6 @@ declare namespace LocalJSX {
           * Define as tags que serão consideradas conteúdo.
          */
         "innerElement"?: Array<string> | string;
-        /**
-          * Define a distância do lado esquerdo. Devem ser usados valores válidos de CSS.
-         */
-        "left"?: string;
         /**
           * Emitido quando acontece a alteração de estado do componente.
          */
@@ -2818,14 +2799,6 @@ declare namespace LocalJSX {
           * Define o tipo de overlay do popover.
          */
         "overlayType"?: "medium" | "light" | "none";
-        /**
-          * Define a distância do lado direito. Devem ser usados valores válidos de CSS.
-         */
-        "right"?: string;
-        /**
-          * Define a distância do topo. Devem ser usados valores válidos de CSS.
-         */
-        "top"?: string;
     }
     interface EzPopup {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyalabs/ezui",
-  "version": "5.0.6",
+  "version": "5.1.0",
   "description": "Biblioteca de componentes Sankhya.",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

package/dist/ezui/p-e8a29680.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as o,H as s,g as e}from"./p-bfc7b8ca.js";import{FloatingManager as r}from"@sankhyalabs/core";const h=class{constructor(o){t(this,o),this.ezVisibilityChange=i(this,"ezVisibilityChange",7),this._firstRender=!0,this.innerClickTest=(t,i,o)=>{const s=[t];this.innerElement&&("string"==typeof this.innerElement?s.push(document.querySelector(`#${this.innerElement}`)):this.innerElement.forEach((t=>{s.push(document.querySelector(`#${t}`))})));const e=(null==o?void 0:o.composedPath())||[];for(var r=0;r<s.length;r++){let t=s[r];if(null!=t){if(e.includes(t))return!0;if(t.contains(i))return!0;if(o&&"nodeType"in(null==o?void 0:o.target)&&t.contains(o.target))return!0;if(t.shadowRoot&&t.shadowRoot.contains(i))return!0;if(t=this._host,t.lastElementChild.shadowRoot?t.lastElementChild.shadowRoot.contains(i):t.contains(i))return!0}}return!1},this.backClickListener=()=>{this.ezVisibilityChange.emit(!1)},this.autoClose=!0,this.top="0px",this.left="0px",this.bottom="0px",this.right="0px",this.boxWidth="fit-content",this.opened=void 0,this.innerElement=void 0,this.overlayType="light"}observeOpened(t,i){t!=i&&(i?this.hide():this.show(),this.ezVisibilityChange.emit(t))}async updatePosition(t=this.top,i=this.left,o=this.bottom,s=this.right){r.updateFloatPosition(this._box,this._container,{autoClose:this.autoClose,top:t,left:i,bottom:o,right:s,innerClickTest:this.innerClickTest,backClickListener:this.backClickListener})}async show(t=this.top,i=this.left,o=this.bottom,s=this.right){const e="none"!==this.overlayType,h=`ez-scrim ez-scrim--${this.overlayType}`;let n={autoClose:this.autoClose,top:t,left:i,bottom:o,right:s,innerClickTest:this.innerClickTest,backClickListener:this.backClickListener};e&&(n=Object.assign(Object.assign({},n),{autoClose:!0,useOverlay:e,overlayClassName:h})),this._floatingID=r.float(this._box,this._container,n),this.opened=!0}async hide(){void 0!==this._floatingID&&(r.close(this._floatingID),this._floatingID=void 0,this.opened=!1)}componentDidRender(){this._firstRender&&(this._box.remove(),this._firstRender=!1)}render(){return o(s,null,o("section",{ref:t=>this._container=t},o("div",{class:"popover__box "+("fit-content"===this.boxWidth?"popover__box--fit-content":"popover__box--full-width"),ref:t=>this._box=t},o("slot",null))))}get _host(){return e(this)}static get watchers(){return{opened:["observeOpened"]}}};h.style=":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--most-visible, 3);position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;flex-direction:column;height:fit-content;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:100%}";export{h as ez_popover}