@sankhyalabs/ezui 5.22.0-dev.10 → 5.22.0-dev.100

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

@@ -0,0 +1,528 @@
+import { computePosition, flip, shift } from "@floating-ui/dom";
+import { h, Host } from "@stencil/core";
+export class EzPopoverCore {
+  constructor() {
+    this.TIME_DEBOUNCE = 500;
+    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;
+  }
+  observeOpened(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+    if (newValue) {
+      this.openPopover();
+    }
+    else {
+      this.hidePopover();
+    }
+  }
+  /**
+   * Atualiza a posição do popover.
+   */
+  async updatePosition(top, left) {
+    this.updateOptionPosition(top, left);
+    await this.updatePositionPopover();
+  }
+  /**
+   * Exibe o ez-popover.
+   */
+  async 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 (options) {
+      this.options = options;
+    }
+    this.anchorElement = element;
+    this.opened = true;
+  }
+  /**
+   * Oculta o ez-popover.
+   */
+  async hide() {
+    this.opened = false;
+  }
+  /**
+   * Altera as opções.
+  */
+  async setOptions(options) {
+    Object.assign(this.options, 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),
+    });
+  }
+  getElement(element) {
+    if (typeof element === 'string') {
+      return document.getElementById(element);
+    }
+    return element;
+  }
+  getAnchorElement() {
+    if (!this.anchorElement) {
+      return this._host;
+    }
+    if (Array.isArray(this.anchorElement)) {
+      for (const element of this.anchorElement) {
+        const htmlElement = this.getElement(element);
+        if (htmlElement) {
+          return htmlElement;
+        }
+      }
+    }
+    return this.getElement(this.anchorElement);
+  }
+  async updatePositionPopover() {
+    if (!this._box || !this.opened) {
+      return;
+    }
+    const currentAnchorElement = this.getAnchorElement();
+    if (this.useAnchorSize) {
+      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
+      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
+      this._box.style.width = `${width}px`;
+    }
+    await computePosition(currentAnchorElement, 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);
+  }
+  async openPopover() {
+    if (!this._box) {
+      return;
+    }
+    if (this.opened) {
+      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;
+    }
+    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);
+    this.openPopover();
+  }
+  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("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-core"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-popover-core.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-popover-core.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-popup/ez-popup.css

@@ -1,5 +1,6 @@
 :host {
   display: flex;
+  width: auto;
   /* General */
   /*@doc Define a camada em que o componente será exibido.*/
   --ez-popup-z-index: var(--elevation--24, 24);
@@ -8,7 +9,7 @@
   /*@doc Define a cor do texto do container do popup.*/
   --ez-popup__container--color: var(--title--primary, #2b3a54);
   /*@doc Define o espaçamento do container do popup.*/
-  --ez-popup__container--padding: var(--space--large, 24px);
+  --ez-popup__container--padding: var(--space--md, 20px);
 
   /* Popup Header */
   /*@doc Define o espaçamento inferior do cabeçalho do popup.*/
@@ -18,7 +19,7 @@
   /*@doc Define a família da fonte do título do popup.*/
   --ez-popup__title--font-family: var(--font-pattern, "Roboto");
   /*@doc Define o tamanho da fonte do título do popup.*/
-  --ez-popup__title--font-size: var(--title--extra-large, 24px);
+  --ez-popup__title--font-size: var(--title--large, 20px);
   /*@doc Define a cor da fonte do título do popup.*/
   --ez-popup__title--color: var(--title--primary, #2b3a54);
   /*@doc Define o peso da fonte do título do popup.*/
@@ -68,13 +69,17 @@
   border-radius: 12px;
   box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
   box-sizing: border-box;
-  padding: var(--ez-popup__container--padding)
+  padding: var(--ez-popup__container--padding);
 }
 
 .popup__container--auto {
   height: auto;
 }
 
+.popup__overflow-y--auto {
+  overflow-y: auto;
+}
+
 .popup__content {
   box-sizing: border-box;
   height: 100%;

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

@@ -9,12 +9,14 @@ export class EzPopup {
       "large": "col--sd-9",
       "x-large": "col--sd-11",
       "default": "ez-popup__size-limit--x-small",
+      "auto": "",
     };
     this.size = "medium";
     this.opened = false;
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
+    this.enabledScroll = false;
   }
   observeConfig() {
     this.manageOverflow();
@@ -49,14 +51,34 @@ export class EzPopup {
       FloatingManager.unsubscribeOverlayControl(this._popupRef || this._overlayId);
     }
   }
+  popUpFocus() {
+    if (!this.opened) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
+      if (this._popupRef && slot === null) {
+        this._popupRef.focus();
+      }
+    });
+  }
   getGridSize() {
+    if (this.size === "auto")
+      return "";
     return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
+  handlePopupHeight() {
+    return this.heightMode === 'auto' ? 'popup__container--auto' : '';
+  }
+  handlePopupOverflowY() {
+    return this.enabledScroll ? 'popup__overflow-y--auto' : '';
+  }
   componentDidRender() {
     this.manageOverlay();
+    this.popUpFocus();
   }
   render() {
-    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : "") }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
+    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: `popup__container ${(this.handlePopupHeight())} ${this.handlePopupOverflowY()}` }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
       h(Fragment, null, !!this.ezTitle && h("div", { class: "popup__title" }, this.ezTitle), h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), h("div", { class: "popup__expandable-content" }, h("slot", null))))))) : undefined));
   }
   static get is() { return "ez-popup"; }
@@ -77,8 +99,8 @@ export class EzPopup {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\"",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\" | \"auto\"",
+          "resolved": "\"auto\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {}
         },
         "required": false,
@@ -161,6 +183,24 @@ export class EzPopup {
         },
         "attribute": "ez-title",
         "reflect": false
+      },
+      "enabledScroll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Possibilita scroll vertical no conte\u00FAdo interno do componente"
+        },
+        "attribute": "enabled-scroll",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-scroller/ez-scroller.css

@@ -17,6 +17,8 @@
   --ez-scroller__scrollbar--width: var(--space--small, 6px);
   /*@doc Define o a altura máxima do componente.*/
   --ez-scroller__max-height: unset;
+  /*@doc Define o espaçamento interno direito da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--padding-right: var(--space-extra-small, 3px);
 
   display: flex;
   cursor: grab;
@@ -51,11 +53,13 @@
 .ez-scroller__container--horizontal {
   overflow-x: scroll;
   flex-direction: row;
+  padding-right: var(--ez-scroller__scrollbar--padding-right);
 }
 
 .ez-scroller__container--vertical {
   overflow-y: scroll;
   flex-direction: column;
+  width: 100%;
   max-height: var(--ez-scroller__max-height);
 }