@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-83282.1 → 0.0.0-bugfix-dev-KB-84596.0

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

@@ -7,9 +7,8 @@ export class EzPopoverPlus {
     this.overlayType = "light";
     this.anchorElement = undefined;
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
-  }
-  listenerEzVisibilityChange({ detail }) {
-    this.ezVisibilityChange.emit(detail);
+    this.useAnchorSize = false;
+    this.minWidth = 150;
   }
   async observeOpened(newValue) {
     if (newValue && !this._popOverCore) {
@@ -62,8 +61,10 @@ export class EzPopoverPlus {
   async setAnchorElement(anchor) {
     var _a;
     await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setAnchorElement(anchor));
+    this.anchorElement = anchor;
   }
   renderPopoverCore() {
+    var _a;
     this._popOverCore = document.createElement('ez-popover-core');
     this._popOverCore.opened = this.opened;
     this._popOverCore.anchorElement = this.anchorElement;
@@ -71,6 +72,12 @@ export class EzPopoverPlus {
     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._host.children.item(0);
     if (firstChild) {
       this._popOverCore.appendChild(firstChild);
@@ -78,7 +85,10 @@ export class EzPopoverPlus {
     else {
       console.warn('O slot do popover está vazio. Adicione conteúdo ao slot para exibição correta.');
     }
-    document.body.appendChild(this._popOverCore);
+    const root = document.body.querySelector("#root");
+    const firstDiv = document.body.getElementsByTagName("div").item(0);
+    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)));
@@ -173,9 +183,12 @@ export class EzPopoverPlus {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "HTMLElement | string",
-          "resolved": "HTMLElement | string",
+          "original": "Array<HTMLElement | string> | HTMLElement | string",
+          "resolved": "(string | HTMLElement)[] | HTMLElement | string",
           "references": {
+            "Array": {
+              "location": "global"
+            },
             "HTMLElement": {
               "location": "global"
             }
@@ -209,6 +222,42 @@ export class EzPopoverPlus {
           "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"
       }
     };
   }
@@ -373,13 +422,4 @@ 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

@@ -8,7 +8,7 @@
   /*@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);
+  --ez-popover__box--z-index: var(--elevation--100, 100);
 
   /***************
      host style  
@@ -28,7 +28,7 @@
   width: 100%;
   height: 100vh;
   box-sizing: border-box;
-  z-index: var(--more-visible--2x, 3);
+  z-index: var(--elevation--24, 24);
 }
 
 .popover__overlay--light {

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

@@ -9,18 +9,19 @@ export class EzPopoverCore {
     this.overlayType = "light";
     this.anchorElement = undefined;
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
+    this.useAnchorSize = false;
+    this.minWidth = 150;
   }
-  async observeOpened(newValue, oldValue) {
-    if (newValue === oldValue)
+  observeOpened(newValue, oldValue) {
+    if (newValue === oldValue) {
       return;
+    }
     if (newValue) {
       this.openPopover();
     }
     else {
       this.hidePopover();
     }
-    this.ezVisibilityChange.emit(newValue);
-    return;
   }
   /**
    * Atualiza a posição do popover.
@@ -79,17 +80,37 @@ export class EzPopoverCore {
       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;
     }
-    if (!this.anchorElement) {
-      this.anchorElement = this._host;
-    }
-    if (typeof this.anchorElement === 'string') {
-      this.anchorElement = document.getElementById(this.anchorElement);
+    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(this.anchorElement, this._box, {
+    await computePosition(currentAnchorElement, this._box, {
       placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
       middleware: [flip(), shift({ padding: 5 })],
       strategy: 'fixed',
@@ -201,7 +222,7 @@ export class EzPopoverCore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define que ser\u00E1 fechado automaticamente quando o usu\u00E1rio clicar fora do conte\u00FAdo."
+          "text": "Define se ser\u00E1 fechado automaticamente quando o usu\u00E1rio clicar fora do conte\u00FAdo."
         },
         "attribute": "auto-close",
         "reflect": true,
@@ -265,9 +286,12 @@ export class EzPopoverCore {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "HTMLElement | string",
-          "resolved": "HTMLElement | string",
+          "original": "Array<HTMLElement | string> | HTMLElement | string",
+          "resolved": "(string | HTMLElement)[] | HTMLElement | string",
           "references": {
+            "Array": {
+              "location": "global"
+            },
             "HTMLElement": {
               "location": "global"
             }
@@ -301,6 +325,42 @@ export class EzPopoverCore {
           "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"
       }
     };
   }

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,6 +53,7 @@
 .ez-scroller__container--horizontal {
   overflow-x: scroll;
   flex-direction: row;
+  padding-right: var(--ez-scroller__scrollbar--padding-right);
 }
 
 .ez-scroller__container--vertical {

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

@@ -56,36 +56,12 @@
   /*@doc Define a cor do label.*/
   --ez-search__label--color: var(--title--primary, #2B3A54);
 
-  /* list */
-  /*@doc Define a cor do texto da lista de opções.*/
-  --ez-search__list-title--primary: var(--title--primary, #2B3A54);
-  /*@doc Define a cor do texto do value da lista de opções.*/
-  --ez-search__list-text--primary: var(--text--primary, #626e82);
-  /*@doc Define a altura do box da lista de opções.*/
-  --ez-search__list-height: calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);
-  /*@doc Define a largura mínima da lista de opções.*/
-  --ez-search__list-min-width: 64px;
-
   /* espaçamento */
   /*@doc Define um espaçamento mediano entre elementos do componente.*/
   --ez-search--space--medium: var(--space--medium, 12px);
   /*@doc Define um espaçamento pequeno entre elementos do componente.*/
   --ez-search--space--small: var(--space--small, 6px);
 
-  /* scrollbar */
-  /*@doc Define a cor da barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-default: var(--scrollbar--default, #626e82);
-  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
-  /*@doc Define a cor do hover na barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
-  /*@doc Define a cor do active na barra de rolagem do componente.*/
-  --ez-search__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
-  /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --ez-search__scrollbar--border-radius: var(--border--radius-small, 6px);
-  /*@doc Define a largura da barra de rolagem do componente.*/
-  --ez-search__scrollbar--width: var(--space--small, 6px);
-
   /***************
      host style  
   ***************/
@@ -112,182 +88,6 @@ ez-icon {
   --ez-text-input__input--disabled--color: var(--title--primary, #2B3A54);
 }
 
-.list-container {
-  /*public*/
-  min-width: var(--ez-search__list-min-width);
-  overflow: auto;
-
-  /*private*/
-  position: relative;
-  width: 100%;
-}
-
-.list-wrapper {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 0;
-
-  /*public*/
-  z-index: var(--more-visible, 2);
-  max-height: 350px;
-  min-width: 150px;
-  background-color: var(--ez-search--background-color--xlight);
-  border-radius: var(--ez-search--border-radius);
-  box-shadow: var(--shadow, 0px 0px 16px 0px #000);
-}
-
-.list-options {
-  margin-top: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  display: flex;
-  flex-direction: column;  
-  scroll-behavior: smooth;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-
-  /*public*/
-  scrollbar-color: var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background);
-
-}
-
-.list-options::-webkit-scrollbar {
-  /*public*/
-  background-color: var(--scrollbar--background);
-  width: var(--space--small);
-  max-width: var(--space--small);
-  min-width: var(--space--small);
-  height: var(--space--small);
-  max-height: var(--space--small);
-  min-height: var(--space--small);
-}
-
-.list-options::-webkit-scrollbar-track {
-  /*public*/
-  background-color: var(--ez-search__scrollbar--color-background);
-  border-radius: var(--ez-search__scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb {
-  /*public*/
-  background-color: var(--ez-search__scrollbar--color-default);
-  border-radius: var(--ez-search__scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb:vertical:hover,
-.list-options::-webkit-scrollbar-thumb:horizontal:hover {
-  /*public*/
-  background-color: var(--ez-search__scrollbar--color-hover);
-}
-
-.list-options::-webkit-scrollbar-thumb:vertical:active,
-.list-options::-webkit-scrollbar-thumb:horizontal:active {
-  /*public*/
-  background-color: var(--ez-search__scrollbar--color-clicked);
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  list-style-type: none;
-  cursor: pointer;
-
-  /*public*/
-  border-radius: var(--ez-search--border-radius-small);
-  gap: var(--space--small, 6px);
-}
-
-.item__value,
-.item__label {
-  flex-basis: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  /*public*/
-  color: var(--ez-search__list-title--primary);
-  font-family: var(--ez-search--font-family);
-  font-size: var(--ez-search--font-size);
-  line-height: var(--ez-search--line-height);
-}
-
-.item__label {
-  /*public*/
-  font-weight: var(--ez-search--font-weight--medium);
-}
-
-.item__label--bold {
-  /*public*/
-  font-weight: var(--ez-search--font-weight--large);
-}
-
-.item__value {
-  text-align: center;
-
-  /*public*/
-  color: var(--ez-search__list-text--primary);
-  font-weight: var(--ez-search--font-weight--large);
-}
-
-.item__value--hidden {
-  visibility: hidden;
-  position: absolute;
-  white-space: nowrap;
-  z-index: -1;
-  top: 0;
-  left: 0;
-}
-
-.item__label {
-  text-align: left;
-}
-
-.message {
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  list-style-type: none;
-  
-  /*public*/
-  min-height: var(--ez-search__list-height);
-}
-
-.message__no-result {
-  /*public*/
-  color: var(--ez-search__list-title--primary);
-  font-family: var(--ez-search--font-family);
-  font-size: var(--ez-search--font-size);
-}
-
-.message__loading {
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  -webkit-animation: spin 1s linear infinite;
-  animation: spin 1s linear infinite;
-
-  /*public*/
-  border: 3px solid var(--ez-search__list-title--primary);
-  border-top: 3px solid transparent;
-}
-
-.item__list > li:hover {
-  /*public*/
-  background-color: var(--ez-search--background-medium);
-}
-
-.preselected {
-  /*public*/
-  background-color: var(--background--medium);
-}
-
 .btn {
   outline: none;
   border: none;
@@ -323,23 +123,4 @@ ez-icon {
 
 ez-text-input:hover .btn__close, ez-text-input:focus .btn__close {
   visibility: visible;
-}
-
-
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@supports not (scrollbar-width: thin) {
-  /* Estilos para navegadores que NÃO suportam scrollbar-width */
-  .item {
-      /* Estilos alternativos, por exemplo, para navegadores que não suportam scrollbar-width */
-      padding-right: 8px;
-  }
 }