@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-6165.0 → 0.0.0-bugfix-dev-KB-17130.0

package/dist/collection/components/ez-actions-button/ez-actions-button.js

@@ -16,6 +16,12 @@ export class EzActionsButton {
             return true;
           }
         }
+        do {
+          if (floatingContainer.contains(node)) {
+            return true;
+          }
+          node = node.offsetParent;
+        } while (node != undefined && node != document.getRootNode());
       }
       return false;
     };
@@ -39,6 +45,25 @@ export class EzActionsButton {
     }
     this._floatingID = undefined;
   }
+  /**
+   * Apresenta a lista de ações.
+   */
+  async showActions() {
+    if (!this.enabled) {
+      return;
+    }
+    const options = this.getFloatOptions();
+    this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
+    const sideLimit = this.getSideLimit();
+    if (sideLimit != undefined) {
+      options.left = sideLimit;
+      FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
+    }
+    window.requestAnimationFrame(() => {
+      this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    });
+    this.ezPopoverOpen.emit(this._actionsList);
+  }
   /**
    * Verifica se a lista de ações está aberta.
    */
@@ -51,7 +76,8 @@ export class EzActionsButton {
       innerClickTest: this.innerClickCheck,
       isFixed: true,
       top: this.getPositionTop(),
-      left: this.getPositionLeft()
+      left: this.getPositionLeft(),
+      backClickListener: () => this._floatingID = undefined
     };
   }
   getSideLimit() {
@@ -63,21 +89,6 @@ export class EzActionsButton {
     }
     return;
   }
-  showActions() {
-    if (!this.enabled) {
-      return;
-    }
-    const options = this.getFloatOptions();
-    this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
-    const sideLimit = this.getSideLimit();
-    if (sideLimit != undefined) {
-      options.left = sideLimit;
-      FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
-    }
-    window.requestAnimationFrame(() => {
-      this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-    });
-  }
   updatePosition() {
     if (!this.enabled || this._floatingID == undefined) {
       return;
@@ -160,14 +171,18 @@ export class EzActionsButton {
       }
     }
   }
+  disconnectedCallback() {
+    this.ezDisconnectedActionButtons.emit();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
     ElementIDUtils.addIDInfo(this._element);
     this.controlScrollPage();
   }
   componentDidRender() {
+    var _a;
     if (this._floatingID == undefined) {
-      this._actionsList.remove();
+      (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.remove();
     }
     if (this.hasLabelOrCheckOption()) {
       if (!!this.value) {
@@ -178,20 +193,31 @@ export class EzActionsButton {
       }
     }
   }
+  buildActionElement(action) {
+    var _a;
+    if (!action) {
+      return;
+    }
+    if (action.itemBuilder != undefined) {
+      const customContent = action.itemBuilder(this._element, action);
+      if (typeof customContent === "string") {
+        return h("div", { class: "ez-actions-button__btn-action", innerHTML: customContent });
+      }
+      return customContent;
+    }
+    return h("ez-button", { size: "small", label: action.label, onClick: () => this.actionClick(action), enabled: action.enabled, class: "ez-actions-button__btn-action" +
+        (this.checkOption || this.hasIconName() ? " ez-actions-button__btn-action--spaced" : "") }, this.checkOption && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.value) === action.value &&
+      h("ez-icon", { class: "ez-actions-button__icon-check", slot: "leftIcon", size: "small", iconName: "check" }), !this.checkOption && action.iconName &&
+      h("ez-icon", { class: "ez-actions-button__icon-item", slot: "leftIcon", size: "small", iconName: action.iconName }));
+  }
   render() {
     var _a;
     return (h(Host, null, h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
         (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
       h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
       h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
-          (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
-        (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
-      var _a;
-      return h("ez-button", { size: "small", label: action.label, onClick: () => this.actionClick(action), enabled: action.enabled, class: "ez-actions-button__btn-action" +
-          (this.checkOption || this.hasIconName() ? " ez-actions-button__btn-action--spaced" : "") }, this.checkOption && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.value) === action.value &&
-        h("ez-icon", { class: "ez-actions-button__icon-check", slot: "leftIcon", size: "small", iconName: "check" }), !this.checkOption && action.iconName &&
-        h("ez-icon", { class: "ez-actions-button__icon-item", slot: "leftIcon", size: "small", iconName: action.iconName }));
-    })))));
+          (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list ez-actions-button__actions-list--max-height" +
+        (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => this.buildActionElement(action))))));
   }
   static get is() { return "ez-actions-button"; }
   static get encapsulation() { return "shadow"; }
@@ -236,7 +262,8 @@ export class EzActionsButton {
               "location": "global"
             },
             "IAction": {
-              "location": "local"
+              "location": "import",
+              "path": "../../utils"
             }
           }
         },
@@ -394,10 +421,45 @@ export class EzActionsButton {
           "resolved": "IAction",
           "references": {
             "IAction": {
-              "location": "local"
+              "location": "import",
+              "path": "../../utils"
             }
           }
         }
+      }, {
+        "method": "ezPopoverOpen",
+        "name": "ezPopoverOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao mostrar a lista de a\u00E7\u00F5es"
+        },
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "ezDisconnectedActionButtons",
+        "name": "ezDisconnectedActionButtons",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando componente \u00E9 desconectado da DOM"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -418,6 +480,22 @@ export class EzActionsButton {
           "tags": []
         }
       },
+      "showActions": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Apresenta a lista de a\u00E7\u00F5es.",
+          "tags": []
+        }
+      },
       "isOpened": {
         "complexType": {
           "signature": "() => Promise<boolean>",

package/dist/collection/components/ez-alert-list/ez-alert-list.css

@@ -0,0 +1,87 @@
+:host {
+  display: flex;
+
+  /* Alert List */
+  
+  /*@doc Define a largura da lista minimizado */
+  --ez-alert-list__container--width: 680px;
+  /*@doc Define a altura da lista minimizado */
+  --ez-alert-list__container--height: 220px;
+  
+  /*@doc Define a largura da lista maximizada */
+  --ez-alert-list__container--width--expanded: 920px;
+  /*@doc Define a altura da lista maximizada */
+  --ez-alert-list__container--height--expanded: 540px;
+
+  /* Title */
+  /*@doc Define a fonte do título do componente */
+  --ez-alert-list__title--font-family: var(--font-pattern, "Roboto");
+  /*@doc Define o tamanho da fonte do título do popup.*/
+  --ez-alert-list__title--font-size: var(--title--large, 20px);
+  /*@doc Define a cor da fonte do título do popup.*/
+  --ez-alert-list__title--color: var(--title--primary, #2b3a54);
+  /*@doc Define o peso da fonte do título do popup.*/
+  --ez-alert-list__title--font-weight: var(--text-weight--extra-large, 700);
+
+  /* @doc Define a borda inferior do item da lista. */
+  --ez-list__item--border-bottom: var(--border--small, 1px solid);
+
+  /* @doc Define a cor da borda inferior do item da lista. */
+  --ez-list__item--border-bottom-color: var(--color--strokes, #DCE0E8);
+
+  /* @doc Define o tipo da quebra de linha do item da lista. */
+  --ez-list__item--white-space: break-space;
+}
+
+.alert-list__content {
+  display: flex;
+  flex-direction: column;
+  
+  gap: var(--space--xs);
+  margin: var(--space--large, 24px);
+  width: 100%;
+}
+
+.alert-list__container {
+  z-index: var(--more-visible--2x, 3);
+  display: flex;
+  height: var(--ez-alert-list__container--height);
+  width: var(--ez-alert-list__container--width);
+  border-radius: var(--border--radius-medium);
+  background-color: var(--background--xlight);
+  box-shadow: var(--shadow--medium);
+
+  &.expanded {
+    height: var(--ez-alert-list__container--height--expanded);
+    width: var(--ez-alert-list__container--width--expanded);
+  }
+
+  @media (max-height: 640px) {
+    max-height: calc(100vh - var(--space--3xl));
+  }  
+}
+
+.alert-list__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.alert-list__title {
+  font-family: var(--ez-alert-list__title--font-family);
+  font-size: var(--ez-alert-list__title--font-size);
+  font-weight: var(--ez-alert-list__title--font-weight);
+  color: var(--ez-alert-list__title--color);
+}
+
+.alert-list__header__buttons {
+  display: flex;
+  gap: var(--space--xs);
+}
+
+.alert-list__expandable-content {
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+

package/dist/collection/components/ez-alert-list/ez-alert-list.js

@@ -0,0 +1,268 @@
+import { ElementIDUtils, FloatingManager } from '@sankhyalabs/core';
+import { Host, h } from '@stencil/core';
+export class EzAlertList {
+  constructor() {
+    this.alerts = [];
+    this.enableDragAndDrop = undefined;
+    this.enableExpand = true;
+    this.itemRightSlotBuilder = undefined;
+    this.opened = true;
+    this.expanded = false;
+  }
+  observeOpened() {
+    this.manageOverlay();
+  }
+  /**
+   * Retorna o id do alerta a partir do título e do índice.
+   */
+  alertId(title, index) {
+    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
+    return `alert-${index}-${concatTitle(title)}`;
+  }
+  /**
+   * Retorna o título do alerta a partir do id.
+   */
+  getAlertTitle(id) {
+    var _a;
+    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  }
+  /**
+    * Retorna o texto do título do alerta.
+    */
+  getTitleText(item) {
+    var _a;
+    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
+    return `${title}${(title && item.label) ? ':' : ''}`;
+  }
+  /**
+   * Gerencia a exibição do conteúdo expandido.
+   */
+  toggleExpandContainer() {
+    if (!this.enableExpand) {
+      return;
+    }
+    ;
+    this.expanded = !this.expanded;
+    this._container.classList.toggle('expanded', this.expanded);
+    if (this.expanded) {
+      this.updatePosition(this.getBoundingRight(), this.getBoundingBottom());
+    }
+    else {
+      this.updatePosition(`10px`, `10px`);
+    }
+  }
+  /**
+   * Gerencia a exibição do overlay usando FloatingManager do Core.
+   */
+  async manageOverlay() {
+    if (this.opened) {
+      this._overlayId = FloatingManager.float(this._container, this._overlayRef, this.getFloatOptions());
+    }
+    else {
+      FloatingManager.close(this._overlayId);
+      this._overlayId = undefined;
+    }
+  }
+  /**
+   * Atualiza a posição da lista.
+   */
+  updatePosition(right, bottom) {
+    FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
+      bottom }));
+  }
+  ;
+  /**
+   * Retorna valores padrões do componente
+   */
+  getFloatOptions() {
+    return {
+      autoClose: false,
+      isFixed: false,
+      bottom: '10px',
+      right: '10px',
+    };
+  }
+  ;
+  /**
+   * Retorna o valor para o alinhamento horizontal do componente.
+   */
+  getBoundingRight() {
+    const docWidth = document.body.clientWidth;
+    const boxWidth = this._container.getBoundingClientRect().width;
+    return ((docWidth - boxWidth) / 2) + 'px';
+  }
+  /**
+   * Retorna o valor para o alinhamento vertical do componente.
+   */
+  getBoundingBottom() {
+    const docHeight = document.body.clientHeight;
+    const boxHeight = this._container.getBoundingClientRect().height;
+    return ((docHeight - boxHeight) / 2) + 'px';
+  }
+  componentDidRender() {
+    this.manageOverlay();
+    if (this.opened) {
+      this._container.focus();
+    }
+  }
+  componentWillLoad() {
+    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+  }
+  render() {
+    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+        this.opened = false;
+      }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
+        return (h("a", { href: "#", style: {
+            fontFamily: "var(--font-pattern, 'Roboto')",
+            fontSize: 'var(--text--medium, 14px)',
+            fontWeight: 'var(--text-weight--medium, 400)',
+            color: 'var(--color--primary, #008561)',
+            marginRight: '4px',
+            cursor: 'pointer',
+            display: 'flex',
+            width: 'max-content',
+            textDecoration: 'none'
+          } }, this.getTitleText(item)));
+      }, dataSource: this.alerts.map((alert, index) => {
+        var _a;
+        return {
+          id: this.alertId(alert.title, index),
+          label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
+        };
+      }) })))))));
+  }
+  static get is() { return "ez-alert-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-alert-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-alert-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alerts": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "AlertItem[]",
+          "resolved": "AlertItem[]",
+          "references": {
+            "AlertItem": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de alertas que devem ser apresentados no componente."
+        },
+        "defaultValue": "[]"
+      },
+      "enableDragAndDrop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente pode ser arrastado na tela."
+        },
+        "attribute": "enable-drag-and-drop",
+        "reflect": true
+      },
+      "enableExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente pode ser expandido."
+        },
+        "attribute": "enable-expand",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "itemRightSlotBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SlotBuilder",
+          "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
+          "references": {
+            "SlotBuilder": {
+              "location": "import",
+              "path": "../ez-list/ez-list"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define builder para elementos a direita do componente"
+        }
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 aberto."
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 expandido."
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "opened",
+        "methodName": "observeOpened"
+      }];
+  }
+}

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -42,6 +42,8 @@
   padding: 12px;
   z-index: 0;
   position: relative;
+  container-type: inline-size;
+  container-name: box;
 }
 
 .card-item:hover {
@@ -105,6 +107,7 @@
 
 .card-item__detail-value {
   cursor: pointer;
+  line-break: anywhere;
 
   /*public*/
   font-size: var(--ez-card-item--font-size);
@@ -123,4 +126,18 @@
   outline: 2px solid var(--ez-card-item__highlight--color);
   box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), 
                4px 0px 0px 0px var(--ez-card-item__highlight--color);
+}
+
+@container box (max-width: 500px) {
+  .card-item__details {
+    flex-direction: column;
+  }
+
+  .card-item__details-left {
+    width: 100%;
+  }
+  
+  .card-item__details-right {
+    width: 100%;
+  }
 }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -135,7 +135,7 @@ ez-icon {
 
 .collapsible-box__label ez-icon {
   visibility: hidden;
-  transition: 0.25s linear;
+  transition: 2s all ease-in-out;
 }
 
 .collapsible-box__label:hover ez-icon {

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -59,7 +59,6 @@ export class EzCollapsibleBox {
     this.ezEditLabelMode.emit(this._activeEditText);
   }
   confirmRemove(evt) {
-    evt.preventDefault();
     evt.stopPropagation();
     ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
       .then((canRemove) => {