@sankhyalabs/ezui 6.4.4 → 6.5.0-dev.10

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

@@ -1,21 +1,21 @@
 :host {
   /* dimensions */
   /*@doc Define a altura do chip.*/
-  --ez-label-chip--height: 30px;
+  --ez-label-chip--height: 32px;
 
   /* Label */
   /*@doc Define o tamanho do label.*/
-  --ez-label-chip__label--font-size: var(--text--medium, 14px);
+  --ez-label-chip__label--font-size: var(--font-size--default, 14px);
   /*@doc Define a família da fonte do label.*/
   --ez-label-chip__label--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --ez-label-chip__label--font-weight: var(--text-weight--medium, 400);
+  --ez-label-chip__label--font-weight: var(--font-weight--regular, 400);
   /*@doc Define o espaçamento do label.*/
-  --ez-label-chip__label--space--medium: var(--space--medium, 12px);
+  --ez-label-chip__horizontal-padding: var(--space--8, 8px);
   /*@doc Define a cor do texto.*/
-  --ez-label-chip__label--title--primary: var(--title--primary, #2B3A54);
+  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
   /*@doc Define a cor do ícone.*/
-  --ez-label-chip__label--text--primary: var(--text--primary, #626e82);
+  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);
 
   /* Label Container */
   /*@doc Define o raio da borda do container do chip.*/
@@ -23,53 +23,48 @@
   /*@doc Define o estilo da borda do container.*/
   --ez-label-chip__label__container--border: 1px solid;
   /*@doc Define a cor da borda do container.*/
-  --ez-label-chip__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
   /*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
   --ez-label-chip__label__container--color-primary: var(--color--primary, #008561);
   /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
-  --ez-label-chip__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
-  /*@doc Define a cor de fundo do container quando ativo.*/
-  --ez-label-chip__label__container--background-color: var(--color--primary-300);
+  --ez-label-chip__label__container-color--disable-secondary: var(--color--gray-80, #F9F9F9);
+  /*@doc Define a cor de fundo do container.*/
+  --ez-label-chip__label__container--background-color: var(--color--ocean-green-600, #008561);
   /*@doc Define a cor da borda do container quando ativo.*/
   --ez-label-chip__label__container--border-color: #0085610F;
-  /*@doc Define a cor da borda do container quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--border-color--active: var(--color--primary, #007a5a);
-  /*@doc Define a cor do fundo do container quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--background-color--hover: var(--color--primary-300, #f2faf8);
+    /*@doc Define a cor da borda do container quando ativo.*/
+  --ez-label-chip__label__container--border-color-active: transparent;
+  /*@doc Define a cor do fundo do container quando o cursor está ativo.*/
+  --ez-label-chip__label__container--default--background-color--active: var(--color--ocean-green-700, #00684C);
   /*@doc Define a cor do texto quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--color--hover: var(--color--primary, #f2faf8);
+  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
   /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
-  --ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
+  --ez-label-chip__label__container--text--disabled: var(--color--gray-300, #A4A5A7);
   /*@doc Define a cor da borda quando o componente está ativo.*/
-  --ez-label-chip__label__container--default--border-color--active: var(--color--primary);
+  --ez-label-chip__label__container--default--border-color--active: var(--color--ocean-green-200);
+  /*@doc Define a cor da borda quando o componente está ativo e na variação secundária.*/
+  --ez-label-chip__label__container--secondary--border-color--active: var(--color--gray-200);
   /*@doc Define a margem superior.*/
-  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 3px);
+  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 0px);
 }
 
-.lbl {
+.label__text {
   /*private*/
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
   cursor: pointer;
+  white-space: nowrap;
   user-select: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
 
   /*public*/
-  color: var(--ez-label-chip__label--title--primary);
-  height: var(--ez-label-chip--height);
   font-family: var(--ez-label-chip__label--font-family);
   font-size: var(--ez-label-chip__label--font-size);
   font-weight: var(--ez-label-chip__label--font-weight);
 }
 
-.lbl--active {
-  /*public*/
-  color: var(--ez-label-chip__label__container--default--color--hover);
-}
-
-.lbl--disabled {
-  /*public*/
-  color: var(--ez-label-chip__label__container--text--disabled);
+.label__text--disabled {
+  cursor: not-allowed;
 }
 
 .label__container {
@@ -79,89 +74,116 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  background-color: #FFFFFF;
+  gap: var(--space--4);
+  outline: none;
   /*public*/
-  color: var(--ez-label-chip__label--text--primary);
-  fill: var(--ez-label-chip__label--text--primary);
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+  height: var(--ez-label-chip--height);
   border: var(--ez-label-chip__label__container--border);
   border-radius: var(--ez-label-chip__label__container--border-radius);
-  border-color: var(--ez-label-chip__label__container--border-color-strokes);
-  padding-right: var(--ez-label-chip__label--space--medium);
-  padding-left: var(--ez-label-chip__label--space--medium);
+  padding: 0 var(--ez-label-chip__horizontal-padding);
   outline-color: var(--ez-label-chip__label__container--default--border-color--active);
   margin-top: var(--ez-label-chip__label__container--default--margin-top);
 }
 
-.label__content {
-  /*private*/
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+.label__container[data-size="default"] {
+  height: var(--ez-label-chip--height, 32px);
 }
 
-.label__container--disabled {
-  cursor: default;
-  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  fill: var(--ez-label-chip__label__container--text--disabled);
-  color: var(--ez-label-chip__label__container--text--disabled);
-  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+.label__container[data-size="medium"] {
+  height: 42px;
+}
+
+.label__container[data-size="large"] {
+  height: 50px;
 }
 
-.label__container--active {
-  border-color: var(--ez-label-chip__label__container--default--background-color--hover);
-  background-color: var(--ez-label-chip__label__container--default--background-color--hover);
-  color: var(--ez-label-chip__label__container--default--color--hover);
-  fill: var(--ez-label-chip__label__container--default--color--hover);
-  --ez-icon--color: var(--ez-label-chip__label__container--default--color--hover);
+.label__container--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.label__container--disabled {
+  cursor: not-allowed;
 }
 
 .label__container:hover {
-  border-color: var(--ez-label-chip__label__container--default--border-color--active);
+  -webkit-transition: 150ms -webkit-filter linear;
+  transition: 150ms filter linear, 150ms -webkit-filter linear;
+  filter: brightness(90%);
 }
 
 .label__container:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active);
+  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active);
 }
 
-.label__container--disabled:hover {
-  cursor: default;
-  border: var(--ez-label-chip__label__container--border);
-  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  fill: var(--ez-label-chip__label__container--text--disabled);
-  color: var(--ez-label-chip__label__container--text--disabled);
-  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+.label__container:active {
+  -webkit-transition: 150ms -webkit-filter linear;
+  transition: 150ms filter linear, 150ms -webkit-filter linear;
+  filter: brightness(85%);
 }
 
-.label__content__icon {
-  display: flex;
-  cursor: pointer;
+/*PRIMARY*/
+
+.label__container[data-color-type="primary"] ez-icon {
+  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
+}
+
+:host .label__container[data-color-type="primary"] ::slotted(ez-icon) {
+  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
+}
+
+.label__container[data-color-type="primary"][data-color-state="default"] {
+  border-color: var(--ez-label-chip__label__container--border-color-strokes);
+  background-color: var(--ez-label-chip__label__container--background-color);
   color: var(--ez-label-chip__label--text--primary);
-  fill: var(--ez-label-chip__label--text--primary);
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
 }
 
-.label__container--row-reverse{
- flex-direction: row-reverse;
+.label__container[data-color-type="primary"][data-color-state="active"] {
+  border-color: var(--ez-label-chip__label__container--border-color-active);
+  background-color: var(--ez-label-chip__label__container--default--background-color--active);
+  color: var(--ez-label-chip__label__container--default--color--active);
 }
 
-.label__container .btn-close {
-  padding: 0px 0px 0px 8px;
+.label__container[data-color-type="primary"]:focus {
+  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active);
 }
 
-.label__container--row-reverse .btn-close{
-  padding: 0px 8px 0px 0px;
- }
+/*SECONDARY*/
 
+.label__container[data-color-type="secondary"] ez-icon {
+  --ez-icon--color: var(--color--gray-300, #A4A5A7);
+}
+
+:host .label__container[data-color-type="secondary"] ::slotted(ez-icon) {
+  --ez-icon--color: var(--color--gray-300, #A4A5A7);
+}
+
+.label__container[data-color-type="secondary"][data-color-state="default"] {
+  border-color: var(--color--gray-200, #D2D2D3);
+  background-color: var(--color--gray-70);
+  color: var(--color--ocean-green-1000, #00281D);
+}
+
+.label__container[data-color-type="secondary"][data-color-state="active"] {
+  border-color: var(--color--gray-200, #D2D2D3);
+  background-color: var(--color--primary-300, #f2faf8);
+  color: var(--color--primary, #f2faf8);
+}
 
-.cursor-disable{
-  cursor: default;
+.label__container[data-color-type="secondary"]:focus {
+  color: var(--color--primary, #007a5a);
+  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--secondary--border-color--active);
 }
 
-ez-icon {
-  --ez-icon--color: inherit;
+/*DISABLED*/
+
+.label__container[data-color-state="disabled"] {
+  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  color: var(--ez-label-chip__label__container--text--disabled);
+  cursor: not-allowed;
+  filter: none;
+}
+
+.label__container[data-color-state="disabled"] ez-icon {
+  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
 }

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

@@ -1,5 +1,5 @@
-import { h } from "@stencil/core";
 import { ElementIDUtils } from '@sankhyalabs/core';
+import { h } from "@stencil/core";
 export class EzChip {
   constructor() {
     this.label = undefined;
@@ -7,8 +7,16 @@ export class EzChip {
     this.removePosition = undefined;
     this.mode = undefined;
     this.value = false;
-    this.showNativeTooltip = true;
+    this.showNativeTooltip = false;
     this.disableAutoUpdateValue = false;
+    this.maxWidth = undefined;
+    this.size = 'default';
+    this.iconNameLeft = undefined;
+    this.iconNameRight = undefined;
+    this.type = 'primary';
+    this.tabIndex = 0;
+    this.removeWithKeyboard = false;
+    this._isOverflowing = false;
   }
   //---------------------------------------------
   // Public methods
@@ -25,53 +33,65 @@ export class EzChip {
   async setBlur() {
     this._containerElem.blur();
   }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
-  }
   handleValueChange() {
     this.swichState();
     this.valueChange.emit(this.value);
   }
-  handleClick(ev) {
-    const target = ev.target;
-    if (!this.enabled)
+  handleClick(event) {
+    if (!this.enabled) {
       return;
-    if (this.mode === "action")
+    }
+    event.stopPropagation();
+    if (this.mode === "action") {
       return this.actionClick.emit();
-    if (target.tagName.toLowerCase() !== "ez-icon" && !this.disableAutoUpdateValue)
+    }
+    if (!this.disableAutoUpdateValue) {
       return this.handleValueChange();
-    if (target.classList.contains("btn-close"))
-      return this.removeChip.emit();
+    }
+  }
+  handleClickRemoveButton(event) {
+    if (!this.enabled) {
+      return;
+    }
+    event.stopPropagation();
+    this.removeChip.emit();
+  }
+  handleIconClick(event, icon) {
+    if (!this.enabled) {
+      return;
+    }
+    event.stopPropagation();
+    this.iconClick.emit({ icon });
   }
   swichState() {
     if (this.enabled) {
       this.value = !this.value;
     }
   }
-  formatLabel() {
-    if (this.label.length > ChipSize.CHAR_LIMIT) {
-      return this.label.substring(0, ChipSize.CHAR_LIMIT) + "...";
+  checkIsOverflowing() {
+    if (this._labelElem) {
+      this._isOverflowing = this._labelElem.offsetWidth < this._labelElem.scrollWidth;
+      return;
     }
-    return this.label;
+    this._isOverflowing = false;
   }
-  observeValue() {
-    (this.value && this.mode !== "action") ? this._containerElem.classList.add("label__container--active") : this._containerElem.classList.remove("label__container--active");
-  }
-  observeEnabled() {
-    if (this.enabled) {
-      this._containerElem.classList.remove("label__container--disabled");
-      this._labelElem.classList.remove("lbl--disabled");
-      this._labelElem.classList.remove("cursor-disable");
+  handleDeleteKey() {
+    if (this.removeWithKeyboard) {
+      this.removeChip.emit();
+      return;
+    }
+    if (this.mode === "action") {
+      this.actionClick.emit();
     }
     else {
-      this._containerElem.classList.add("label__container--disabled");
-      this._labelElem.classList.add("lbl--disabled");
-      this._labelElem.classList.add("cursor-disable");
+      this.swichState();
+      this.valueChange.emit(this.value);
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
+      event.preventDefault();
+      this.handleDeleteKey();
     }
   }
   //---------------------------------------------
@@ -82,14 +102,27 @@ export class EzChip {
       ElementIDUtils.addIDInfo(this._element, 'ezChip');
     }
     if (this._containerElem) {
-      this.observeValue();
-      this.observeEnabled();
       this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo('button'));
     }
+    this.checkIsOverflowing();
   }
   render() {
-    const labelTitle = this.showNativeTooltip ? this.label : undefined;
-    return (h("button", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._containerElem = el }, h("div", { class: "label__content" }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el, title: labelTitle }, this.formatLabel()), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })), this.mode !== 'action' && this.removePosition && h("ez-icon", { class: "btn-close", size: "small", "icon-name": "close" })));
+    let colorState = 'default';
+    if (!this.enabled) {
+      colorState = 'disabled';
+    }
+    else if (this.value && this.mode !== "action") {
+      colorState = 'active';
+    }
+    return (h("ez-tooltip", { active: this.showNativeTooltip || this._isOverflowing, message: this.label }, h("button", { ref: (el) => this._containerElem = el, class: {
+        "label__container--row-reverse": this.removePosition === "left",
+        "label__container": true,
+      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: this.handleClick.bind(this), tabIndex: this.tabIndex, style: {
+        maxWidth: this.maxWidth
+      }, onKeyDown: this.handleKeyDown.bind(this) }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
+        "label__text--disabled": !this.enabled,
+        "label__text": true,
+      } }, this.label), h("slot", { name: "rightIcon" }), this.iconNameRight && (h("ez-icon", { size: "medium", "icon-name": this.iconNameRight, onClick: (event) => this.handleIconClick(event, 'right') })), (this.mode !== 'action' && this.removePosition) && (h("ez-icon", { class: "btn-close", size: "medium", "icon-name": "close", onClick: (event) => this.handleClickRemoveButton(event) })))));
   }
   static get is() { return "ez-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -208,7 +241,7 @@ export class EzChip {
         },
         "attribute": "show-native-tooltip",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "disableAutoUpdateValue": {
         "type": "boolean",
@@ -227,9 +260,137 @@ export class EzChip {
         "attribute": "disable-auto-update-value",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho m\u00E1ximo do chip."
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'medium' | 'large'",
+          "resolved": "\"default\" | \"large\" | \"medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do chip."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "iconNameLeft": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o icone esquerdo."
+        },
+        "attribute": "icon-name-left",
+        "reflect": false
+      },
+      "iconNameRight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o icone direito."
+        },
+        "attribute": "icon-name-right",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de estiliza\u00E7\u00E3o do chip."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "tabIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tabindex do chip.\nPor padr\u00E3o \u00E9 0, permitindo que o chip seja foc\u00E1vel."
+        },
+        "attribute": "tab-index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "removeWithKeyboard": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o chip deve ser removido ao pressionar a tecla Enter quando focado."
+        },
+        "attribute": "remove-with-keyboard",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "_isOverflowing": {}
+    };
+  }
   static get events() {
     return [{
         "method": "valueChange",
@@ -276,6 +437,21 @@ export class EzChip {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "iconClick",
+        "name": "iconClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o icone \u00E9 acionado."
+        },
+        "complexType": {
+          "original": "{ icon: \"left\" | \"right\" }",
+          "resolved": "{ icon: \"left\" | \"right\"; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -315,17 +491,4 @@ export class EzChip {
     };
   }
   static get elementRef() { return "_element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "observeValue"
-      }, {
-        "propName": "enabled",
-        "methodName": "observeEnabled"
-      }];
-  }
 }
-var ChipSize;
-(function (ChipSize) {
-  ChipSize[ChipSize["CHAR_LIMIT"] = 28] = "CHAR_LIMIT";
-})(ChipSize || (ChipSize = {}));

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

@@ -48,6 +48,7 @@ ez-icon {
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
 }
 
 

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { ApplicationUtils } from "../../utils";
+import initI18n from '../../utils/i18n';
 export class EzCollapsibleBox {
   constructor() {
     this._activeEditText = false;
@@ -58,14 +59,13 @@ export class EzCollapsibleBox {
     this._activeEditText = true;
     this.ezEditLabelMode.emit(this._activeEditText);
   }
-  confirmRemove(evt) {
+  async confirmRemove(evt) {
     evt.stopPropagation();
-    ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
-      .then((canRemove) => {
-      if (canRemove) {
-        this.removeElement();
-      }
-    });
+    const confirmMessage = this.i18n("ez-collapsible-box.confirmRemove", { label: this.label });
+    const canRemove = await ApplicationUtils.confirm(this.i18n("app.warning"), confirmMessage);
+    if (canRemove) {
+      this.removeElement();
+    }
   }
   saveEditionText(editDetails) {
     const { value, newValue } = editDetails.detail;
@@ -95,6 +95,9 @@ export class EzCollapsibleBox {
     };
     return styledLabel;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._hostElement);
   }
@@ -103,8 +106,8 @@ export class EzCollapsibleBox {
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
         (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
       h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
-        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
-        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
+        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: this.i18n("app.edit") }), this.removable &&
+        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: this.i18n("app.remove") })) :
       h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() })), h("slot", { name: "rightSlot" })), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, this.subtitle &&
       h("div", { class: "subtitle-box__content" }, h("label", { class: "subtitle-box__label", title: this.subtitle }, h("span", null, this.subtitle))), h("slot", null))));
   }