@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.2

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

@@ -0,0 +1,143 @@
+import { h } from '@stencil/core';
+export class EzAvatar {
+  constructor() {
+    this.DECIMAL_PARSE_BASE = 10;
+    this.FONT_SIZE_BASE_CALC = 0.375;
+    this.name = undefined;
+    this.imageSrc = undefined;
+    this.size = '100';
+    this.shape = 'circle';
+    this.isInteractive = false;
+  }
+  /** Obtém a inicial do nome do usuário. */
+  getInitial() {
+    var _a;
+    return ((_a = this.name) === null || _a === void 0 ? void 0 : _a.trim()) ? this.name.charAt(0).toUpperCase() : '';
+  }
+  calcFontSize() {
+    const sizeNumber = parseInt(this.size, this.DECIMAL_PARSE_BASE);
+    return this.FONT_SIZE_BASE_CALC * sizeNumber;
+  }
+  getClass() {
+    return `avatar avatar--${this.size} avatar--${this.shape} ${this.imageSrc ? 'avatar--has-image' : ''}`;
+  }
+  renderAvatarContent() {
+    if (this.imageSrc) {
+      return h("img", { src: this.imageSrc, alt: this.name || 'Avatar', class: "avatar-image" });
+    }
+    if (this.name) {
+      return h("span", { class: "avatar-initial", "aria-hidden": "true" }, this.getInitial());
+    }
+    return h("ez-icon", { class: "avatar-icon", iconName: "account-outline", fontSize: this.calcFontSize() });
+  }
+  render() {
+    if (this.isInteractive) {
+      return (h("button", { "aria-label": "Perfil", class: this.getClass() }, this.renderAvatarContent()));
+    }
+    return (h("figure", { class: this.getClass() }, this.renderAvatarContent()));
+  }
+  static get is() { return "ez-avatar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-avatar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-avatar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do usu\u00E1rio para exibi\u00E7\u00E3o da inicial."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "imageSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "URL da imagem do Avatar."
+        },
+        "attribute": "image-src",
+        "reflect": true
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'320' | '300' | '280' | '260' | '240' | '220' | '200' | '180' | '160' | '140' | '120' | '100' | '80' | '60'",
+          "resolved": "\"100\" | \"120\" | \"140\" | \"160\" | \"180\" | \"200\" | \"220\" | \"240\" | \"260\" | \"280\" | \"300\" | \"320\" | \"60\" | \"80\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tamanho do Avatar (valores permitidos):\n'320x320', '300x300', '280x280', '260x260', '240x240', '220x220', '200x200',\n'180x180', '160x160', '140x140', '120x120', '100x100', '80x80', '60x60'."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'100'"
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'circle' | 'square'",
+          "resolved": "\"circle\" | \"square\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o formato do Avatar: 'circle' ou 'square'."
+        },
+        "attribute": "shape",
+        "reflect": true,
+        "defaultValue": "'circle'"
+      },
+      "isInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, o Avatar ser\u00E1 interativo. Caso contr\u00E1rio, ser\u00E1 est\u00E1tico."
+        },
+        "attribute": "is-interactive",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -351,6 +351,9 @@ input.switch-mode:checked:disabled::after {
   font-family: var(--ez-check--label--font-family);
   cursor: default;
   width: inherit;
+  display: flex;
+  align-content: center;
+  gap: var(--space--small);
 }
 
 .label--disabled {
@@ -359,4 +362,10 @@ input.switch-mode:checked:disabled::after {
 
 .label--padding {
   padding-left: var(--space--extra-small);
+}
+
+.label-alternative {
+  font-size: var(--text--small);
+  color: var(--text--secondary);
+  padding-top: 2px;
 }

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

@@ -4,6 +4,7 @@ import { CheckMode } from './CheckMode';
 export class EzCheck {
   constructor() {
     this.label = undefined;
+    this.alternativePlaceholder = undefined;
     this.value = undefined;
     this.enabled = true;
     this.indeterminate = undefined;
@@ -55,25 +56,32 @@ export class EzCheck {
     this.ezChange.emit(this.value);
   }
   getLabelClasses() {
-    const classes = ["label"];
+    const classes = ['label'];
     if (!this.enabled) {
-      classes.push("label--disabled");
+      classes.push('label--disabled');
     }
     if (!this.compact) {
-      classes.push("label--padding");
+      classes.push('label--padding');
     }
-    return classes.join(" ");
+    return classes.join(' ');
   }
   getInputClasses() {
     var _a;
-    const classes = [""];
-    classes.push(((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? "switch-mode" : "regular-mode");
+    const classes = [''];
+    classes.push(((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? 'switch-mode' : 'regular-mode');
     if (this.compact)
-      classes.push("compact");
-    return classes.join(" ");
+      classes.push('compact');
+    return classes.join(' ');
   }
   render() {
-    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled, "data-element-id": ElementIDUtils.getInternalIDInfo("input") }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => {
+        this.changeValue();
+      }, indeterminate: this.indeterminate, disabled: !this.enabled, "data-element-id": ElementIDUtils.getInternalIDInfo('input') }), this.renderLabel()));
+  }
+  renderLabel() {
+    if (!this.label)
+      return undefined;
+    return (h("label", { class: this.getLabelClasses(), onClick: () => this.changeValue(), title: this.label }, this.label, " ", this.alternativePlaceholder ? h("span", { class: "label-alternative" }, this.alternativePlaceholder) : undefined));
   }
   static get is() { return "ez-check"; }
   static get encapsulation() { return "shadow"; }
@@ -106,6 +114,23 @@ export class EzCheck {
         "attribute": "label",
         "reflect": true
       },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
+      },
       "value": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.css

@@ -73,6 +73,7 @@
   width: 100%;
   height: 100%;
   padding: 0;
+  margin: 0;
   display: flex;
   flex-direction: column;  
   scroll-behavior: smooth;

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

@@ -15,7 +15,6 @@ export class EzComboBox {
     this._startLoading = false;
     this._showLoading = true;
     this._criteria = undefined;
-    this._textInputReady = undefined;
     this.limitCharsToSearch = 3;
     this.value = undefined;
     this.label = undefined;
@@ -34,6 +33,8 @@ export class EzComboBox {
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
+    this.textEmptyOption = "Selecione um item";
   }
   observeErrorMessage() {
     var _a;
@@ -158,7 +159,7 @@ export class EzComboBox {
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
     if (this.hasToAddEmptyoption(opts)) {
-      opts = [{ value: undefined, label: "" }].concat(opts);
+      opts = [{ value: undefined, label: this.textEmptyOption }].concat(opts);
     }
     this._visibleOptions = opts;
     this._maxWidthValue = this.getMaxWidthValue();
@@ -193,17 +194,17 @@ export class EzComboBox {
     }
     return 0;
   }
-  showOptions() {
+  async showOptions() {
     var _a, _b;
     if (!this.enabled)
       return;
-    this.openPopover();
+    await this.openPopover();
     const valueString = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value;
     const indexValue = this._visibleOptions.findIndex(option => option.value === valueString);
     this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
-    this.setFocus();
+    await this.setFocus();
   }
   hideOptions() {
     var _a;
@@ -295,11 +296,6 @@ export class EzComboBox {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidRender() {
-    if (this._textInput) {
-      this._textInputReady = true;
-    }
-  }
   componentWillLoad() {
     if (this.options === undefined) {
       this.options = [];
@@ -435,15 +431,15 @@ export class EzComboBox {
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
-  openPopover() {
+  async openPopover() {
     var _a;
     this.isOpen = true;
-    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.show();
+    await ((_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput));
   }
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
   }
   static get is() { return "ez-combo-box"; }
   static get encapsulation() { return "shadow"; }
@@ -798,6 +794,41 @@ export class EzComboBox {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
+      },
+      "textEmptyOption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado na op\u00E7\u00E3o de valor nulo."
+        },
+        "attribute": "text-empty-option",
+        "reflect": false,
+        "defaultValue": "\"Selecione um item\""
       }
     };
   }
@@ -808,8 +839,7 @@ export class EzComboBox {
       "_visibleOptions": {},
       "_startLoading": {},
       "_showLoading": {},
-      "_criteria": {},
-      "_textInputReady": {}
+      "_criteria": {}
     };
   }
   static get events() {

package/dist/collection/components/ez-date-input/ez-date-input.js

@@ -13,6 +13,7 @@ export class EzDateInput {
     this.mode = "regular";
     this.canShowError = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeLabel() {
     if (this._textInput) {
@@ -163,7 +164,7 @@ export class EzDateInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); } }))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); } }))));
   }
   static get is() { return "ez-date-input"; }
   static get encapsulation() { return "shadow"; }
@@ -303,6 +304,23 @@ export class EzDateInput {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
       }
     };
   }

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -14,6 +14,7 @@ export class EzDateTimeInput {
     this.mode = "regular";
     this.canShowError = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeLabel() {
     if (this._textInput) {
@@ -214,7 +215,7 @@ export class EzDateTimeInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, time: true, showSeconds: this.showSeconds }))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, time: true, showSeconds: this.showSeconds }))));
   }
   static get is() { return "ez-date-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -372,6 +373,23 @@ export class EzDateTimeInput {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
       }
     };
   }

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

@@ -145,18 +145,34 @@ h2 {
   overflow-y: auto;
 }
 
-.changeable__icon {
+.changeable__icon__container {
   background: var(--dialog__warning--background-color);
-  --ez-icon--color: var(--dialog__icon--color);
-  display: grid;
-  place-items: center;
-  width: 26px;
-  height: 26px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 26px;
+  min-height: 26px;
   border-radius: 50%;
 }
 
-.changeable__icon.critical{
-  background: var(--dialog__critical--background-color);
+.changeable__icon {
+  --ez-icon--color: var(--dialog__icon--color);
+}
+
+.changeable__icon__container.title-icon--critical {
+  background-color: var(--dialog__critical--background-color);
+}
+
+.changeable__icon__container.title-icon--success {
+  background-color: var(--dialog__success--background-color);
+}
+
+.changeable__icon__container.title-icon--warn {
+  background-color: var(--dialog__warning--background-color);
+}
+
+.changeable__icon__container.title-icon--warn ez-icon {
+  transform: translateY(-1px);
 }
 
 .title {
@@ -164,7 +180,6 @@ h2 {
   font-family: var(--dialog__title--font-pattern);
   margin: 0;
   font-weight: var(--dialog__title--weight--large);
-  line-height: 0;
   color: var(--title--primary);
 }
 
@@ -188,18 +203,6 @@ h2 {
   padding-left: 0;
 }
 
-.title-icon--critical {
-  background-color: var(--dialog__critical--background-color);
-}
-
-.title-icon--success {
-  background-color: var(--dialog__success--background-color);
-}
-
-.title-icon--warn {
-  background-color: var(--dialog__warning--background-color);
-}
-
 .btn-close {
   justify-content: flex-end;
   align-self: flex-start;

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

@@ -83,7 +83,8 @@ export class EzDialog {
     if (message.dialogType === DialogType.DEFAULT) {
       return;
     }
-    return h("ez-icon", { class: "changeable__icon " + this.getIconClass(message.dialogType), size: "small", iconName: this.getIconName(message) });
+    const iconClass = this.getIconClass(message.dialogType);
+    return (h("div", { class: `changeable__icon__container ${iconClass}` }, h("ez-icon", { class: "changeable__icon", size: "small", iconName: this.getIconName(message) })));
   }
   getIconClass(dialogType) {
     if (this.isCritical(dialogType)) {
@@ -150,7 +151,7 @@ export class EzDialog {
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
-    new KeyboardManager({ propagate: false, element: this._element })
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
       .bind("Enter", () => this.handleButtonClick(true), { description: "Botão de confirmação ou OK", element: this._element })
       .bind("Escape", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element })
       .bind("Esc", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element });
@@ -182,8 +183,10 @@ export class EzDialog {
     });
   }
   disconnectedCallback() {
+    var _a;
     FocusResolver.resolveFocus(this._lastActiveElement);
     this._lastActiveElement = undefined;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
   render() {
     if (this.opened && this._currentMessage) {

package/dist/collection/components/ez-double-list/doubleListHelper.js

@@ -55,21 +55,20 @@ export function transferAll({ from, to, selectedFrom, selectedTo }) {
   from = [];
   return { from, to, selectedFrom, selectedTo };
 }
-export function transferItems({ from, to, selectedFrom, selectedTo }) {
+export function transferItems({ from, to, selectedFrom, selectedTo, insertIndex = to.length, }) {
   if (!from.length)
     return { from, to, selectedFrom, selectedTo };
   const itemsToTransfer = getItemsToTransfer(to, selectedFrom, from);
   if (!itemsToTransfer.length)
     return { from, to, selectedFrom, selectedTo };
-  to = [
-    ...to.map(i => setItemSelection(i, false)),
-    ...itemsToTransfer.map(i => setItemSelection(i, true))
-  ];
-  const selectedFromIds = selectedFrom.map(id => id);
-  from = [...from.filter(item => !selectedFromIds.includes(item.id))];
-  selectedTo = [...selectedFrom];
-  selectedFrom = [];
-  return { from, to, selectedFrom, selectedTo };
+  let updatedTo = to.map(i => setItemSelection(i, false));
+  updatedTo.splice(insertIndex, 0, ...itemsToTransfer.map(i => setItemSelection(i, true)));
+  return {
+    from: from.filter(item => !selectedFrom.includes(item.id)),
+    to: updatedTo,
+    selectedFrom: [],
+    selectedTo: [...selectedFrom],
+  };
 }
 function getItemsToTransfer(to, selectedFrom, from) {
   const toListIds = to.map(item => item.id);

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

@@ -4,52 +4,20 @@
   gap: 8px;
   align-items: center;
   font-family: var(--font-pattern, "Roboto");
+  width: 100%;
 }
 
-.group {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  flex-direction: column;
-  border: var(--border--small) var(--color--strokes);
-  border-radius: var(--border--radius-medium);
-  width: 350px;
-  height: 400px;
-}
-
-.group__header {
-  background: var(--background--body);
-  padding: 10px;
-  border-radius: var(--border--radius-medium) var(--border--radius-medium) 0 0;
-}
-
-.group__label {
-  font-weight: var(--text-weight--large);
-  font-size: var(--text--medium);
-  color: var(--title--primary);
-  margin-bottom: 10px;
-  display: block;
-}
 
-.group__totalizer {
-  padding: 5px 10px;
-  background: var(--background--body);
-  font-weight: var(--text-weight--medium);
-  font-size: var(--text--medium);
-  color: var(--text--secondary);
-  border-radius: 0 0 var(--border--radius-medium) var(--border--radius-medium);
+@media screen and (max-width: 1366px){
+  .group {
+    height: 350px;
+  }
 }
 
-.empty-message{
-  font-weight: var(--text-weight--medium);
-  font-size: var(--text--medium);
-  color: var(--text--secondary);
-  text-align: center;
-  margin: auto;
-}
 
 .list__container {
   height: 100%;
+  width: 100%;
   min-height: 150px;
   overflow: auto;
   display: flex;