@sankhyalabs/ezui 2.5.1 → 2.6.0

package/dist/cjs/ez-file-item.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8646c40d.js');
+const core = require('@sankhyalabs/core');
+
+const ezFileItemCss = ":host{display:flex;width:100%;--ez-file-item--height:42px;--ez-file-item--padding:9px;--ez-file-item--border-radius:var(--border--radius-medium, 12px);--ez-file-item--border-color:var(--color--strokes, #DCE0E8);--ez-file-item--border-style:var(--border--small, 1px solid);--ez-file-item--font-family:var(--font-pattern, Arial);--ez-file-item--font-size:var(--text--medium, 14px);--ez-file-item--font-weight:var(--text-weight--medium, 400);--ez-file-item--color:var(--title--primary, #2B3A54);--ez-file-item__file-size--font-weight:var(--text-weight--large, 600);--ez-file-item__file-size--color:var(--color--primary, #008561);--ez-file-item__background-progress--color:var(--color--primary-300, E2F4EF);--ez-file-item--icon-color:var(--title--primary, #2B3A54)}.box{display:flex;box-sizing:border-box;position:relative;align-items:center;justify-content:space-between;width:100%;padding:var(--ez-file-item--padding);border:var(--ez-file-item--border-color) var(--ez-file-item--border-style);border-radius:var(--ez-file-item--border-radius);height:var(--ez-file-item--height)}.box::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));background-color:var(--ez-file-item__background-progress--color)}.content{display:flex;align-items:center;z-index:0;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item--font-weight);color:var(--ez-file-item--color)}.file-type-icon{flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color);padding-right:var(--ez-file-item--padding)}.file-size{padding-left:2px;overflow:hidden;flex-shrink:0;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item__file-size--font-weight);color:var(--ez-file-item__file-size--color)}.btn-remove{cursor:pointer;flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color)}";
+
+let EzFileItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezClick = index.createEvent(this, "ezClick", 7);
+    this.ezRemove = index.createEvent(this, "ezRemove", 7);
+    /**
+     * Define se o usuário pode remover o arquivo que está sendo apresentado.
+     */
+    this.canRemove = true;
+    /**
+     * Percentual de carregamento do arquivo para o servidor.
+     */
+    this.progress = 100;
+  }
+  observeProgress(newProgress) {
+    if (newProgress < 0 || newProgress > 100) {
+      throw new Error("O progresso de upload deve ser um número entre 0 e 100.");
+    }
+    this._element.style.setProperty("--ez-file-item--upload-progress", `${100 - newProgress}%`);
+  }
+  getFileSize() {
+    if (!this.fileSize || this.fileSize === 0) {
+      return "";
+    }
+    return `(${core.StringUtils.formatBytes(this.fileSize)})`;
+  }
+  getIconName() {
+    let extension;
+    if (this.iconName) {
+      return this.iconName;
+    }
+    if (this.fileName.indexOf(".") > -1) {
+      const index = this.fileName.lastIndexOf(".");
+      extension = this.fileName.substring(index);
+    }
+    return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
+  }
+  render() {
+    this._element.title = `${this.fileName} ${this.getFileSize()}`;
+    core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
+    return (index.h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, index.h("div", { class: "content" }, index.h("ez-icon", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), index.h("label", { class: "file-name" }, this.fileName), index.h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ?
+      index.h("ez-icon", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", onClick: evt => {
+          this.ezRemove.emit(this.fileName);
+          evt.stopPropagation();
+        } }) : undefined));
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "progress": ["observeProgress"]
+  }; }
+};
+const FILE_TYPE_ICONS = {
+  ".exe": "exe",
+  ".gif": "gif",
+  ".mp3": "mp3",
+  ".mp4": "mp4",
+  ".pdf": "pdf",
+  ".png": "png",
+  ".txt": "txt",
+  ".zip": "zip",
+  ".docx": "docx",
+  ".xlsx": "xlsx",
+  ".pptx": "pptx"
+};
+const DEFAULT_FILE_TYPE_ICON = "generic";
+EzFileItem.style = ezFileItemCss;
+
+exports.ez_file_item = EzFileItem;

package/dist/cjs/ez-icon.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8646c40d.js');
 const core = require('@sankhyalabs/core');
 
-const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-account-outline:before{content:\"\\ea03\"}.ez-icon-account:before{content:\"\\ea04\"}.ez-icon-actions-sprite:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-apps:before{content:\"\\ea0b\"}.ez-icon-arrow_back:before{content:\"\\ea0c\"}.ez-icon-arrow_downward:before{content:\"\\ea0d\"}.ez-icon-balance:before{content:\"\\ea0e\"}.ez-icon-bell-inverted:before{content:\"\\ea0f\"}.ez-icon-bell:before{content:\"\\ea10\"}.ez-icon-boleto:before{content:\"\\ea11\"}.ez-icon-business-center:before{content:\"\\ea12\"}.ez-icon-calendar-clock:before{content:\"\\ea13\"}.ez-icon-calendar:before{content:\"\\ea14\"}.ez-icon-cash-remove:before{content:\"\\ea15\"}.ez-icon-check-circle-inverted:before{content:\"\\ea16\"}.ez-icon-check-circle:before{content:\"\\ea17\"}.ez-icon-check:before{content:\"\\ea18\"}.ez-icon-chevron-down:before{content:\"\\ea19\"}.ez-icon-chevron-left:before{content:\"\\ea1a\"}.ez-icon-chevron-right:before{content:\"\\ea1b\"}.ez-icon-chevron-up:before{content:\"\\ea1c\"}.ez-icon-circle--medium:before{content:\"\\ea1d\"}.ez-icon-circle:before{content:\"\\ea1e\"}.ez-icon-cleaning:before{content:\"\\ea1f\"}.ez-icon-clipboard:before{content:\"\\ea20\"}.ez-icon-close:before{content:\"\\ea21\"}.ez-icon-cobrar:before{content:\"\\ea22\"}.ez-icon-configuration:before{content:\"\\ea23\"}.ez-icon-copy:before{content:\"\\ea24\"}.ez-icon-credit_card:before{content:\"\\ea25\"}.ez-icon-crop:before{content:\"\\ea26\"}.ez-icon-custom:before{content:\"\\ea27\"}.ez-icon-delete:before{content:\"\\ea28\"}.ez-icon-description:before{content:\"\\ea29\"}.ez-icon-dot-notification:before{content:\"\\ea2a\"}.ez-icon-dots-horizontal:before{content:\"\\ea2b\"}.ez-icon-dots-vertical:before{content:\"\\ea2c\"}.ez-icon-drag-indicator:before{content:\"\\ea2d\"}.ez-icon-dual-chevron-down:before{content:\"\\ea2e\"}.ez-icon-dual-chevron-up:before{content:\"\\ea2f\"}.ez-icon-edit-file:before{content:\"\\ea30\"}.ez-icon-edit-table:before{content:\"\\ea31\"}.ez-icon-edit-time:before{content:\"\\ea32\"}.ez-icon-edit:before{content:\"\\ea33\"}.ez-icon-email:before{content:\"\\ea34\"}.ez-icon-expand:before{content:\"\\ea35\"}.ez-icon-extrato:before{content:\"\\ea36\"}.ez-icon-eye-off:before{content:\"\\ea37\"}.ez-icon-eye:before{content:\"\\ea38\"}.ez-icon-favorite:before{content:\"\\ea39\"}.ez-icon-file-download:before{content:\"\\ea3a\"}.ez-icon-file-upload:before{content:\"\\ea3b\"}.ez-icon-filter:before{content:\"\\ea3c\"}.ez-icon-find-file:before{content:\"\\ea3d\"}.ez-icon-find-page:before{content:\"\\ea3e\"}.ez-icon-format-color-fill:before{content:\"\\ea3f\"}.ez-icon-graph_bar:before{content:\"\\ea40\"}.ez-icon-handshake:before{content:\"\\ea41\"}.ez-icon-help-inverted:before{content:\"\\ea42\"}.ez-icon-help:before{content:\"\\ea43\"}.ez-icon-home:before{content:\"\\ea44\"}.ez-icon-icons104:before{content:\"\\ea45\"}.ez-icon-language:before{content:\"\\ea46\"}.ez-icon-launch:before{content:\"\\ea47\"}.ez-icon-lightbulb:before{content:\"\\ea48\"}.ez-icon-list:before{content:\"\\ea49\"}.ez-icon-location:before{content:\"\\ea4a\"}.ez-icon-lock-outline:before{content:\"\\ea4b\"}.ez-icon-lock:before{content:\"\\ea4c\"}.ez-icon-menu:before{content:\"\\ea4d\"}.ez-icon-mid:before{content:\"\\ea4e\"}.ez-icon-minus:before{content:\"\\ea4f\"}.ez-icon-money-off:before{content:\"\\ea50\"}.ez-icon-money:before{content:\"\\ea51\"}.ez-icon-more:before{content:\"\\ea52\"}.ez-icon-north-west:before{content:\"\\ea53\"}.ez-icon-number:before{content:\"\\ea54\"}.ez-icon-ordem-ascendente:before{content:\"\\ea55\"}.ez-icon-ordem-descendente:before{content:\"\\ea56\"}.ez-icon-parcelar:before{content:\"\\ea57\"}.ez-icon-pause:before{content:\"\\ea58\"}.ez-icon-payments:before{content:\"\\ea59\"}.ez-icon-play:before{content:\"\\ea5a\"}.ez-icon-plus:before{content:\"\\ea5b\"}.ez-icon-power:before{content:\"\\ea5c\"}.ez-icon-print:before{content:\"\\ea5d\"}.ez-icon-push-pin:before{content:\"\\ea5e\"}.ez-icon-receipt:before{content:\"\\ea5f\"}.ez-icon-restore:before{content:\"\\ea60\"}.ez-icon-return:before{content:\"\\ea61\"}.ez-icon-save:before{content:\"\\ea62\"}.ez-icon-search:before{content:\"\\ea63\"}.ez-icon-settings-inverted:before{content:\"\\ea64\"}.ez-icon-settings:before{content:\"\\ea65\"}.ez-icon-share:before{content:\"\\ea66\"}.ez-icon-shield:before{content:\"\\ea67\"}.ez-icon-south-east:before{content:\"\\ea68\"}.ez-icon-sync:before{content:\"\\ea69\"}.ez-icon-table:before{content:\"\\ea6a\"}.ez-icon-text:before{content:\"\\ea6b\"}.ez-icon-timeline:before{content:\"\\ea6c\"}.ez-icon-timer-outline:before{content:\"\\ea6d\"}.ez-icon-tune:before{content:\"\\ea6e\"}.ez-icon-un-pin:before{content:\"\\ea6f\"}.ez-icon-unfold_less:before{content:\"\\ea70\"}.ez-icon-unfold_more:before{content:\"\\ea71\"}.ez-icon-user-circle:before{content:\"\\ea72\"}.ez-icon-warning-outline:before{content:\"\\ea73\"}.ez-icon-warning_triangle:before{content:\"\\ea74\"}.ez-icon-whatshot:before{content:\"\\ea75\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
+const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-account-outline:before{content:\"\\ea03\"}.ez-icon-account:before{content:\"\\ea04\"}.ez-icon-actions-sprite-v1:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-antecipação:before{content:\"\\ea0b\"}.ez-icon-apps:before{content:\"\\ea0c\"}.ez-icon-arrow_back:before{content:\"\\ea0d\"}.ez-icon-arrow_downward:before{content:\"\\ea0e\"}.ez-icon-baixa:before{content:\"\\ea0f\"}.ez-icon-balance:before{content:\"\\ea10\"}.ez-icon-bell-inverted:before{content:\"\\ea11\"}.ez-icon-bell:before{content:\"\\ea12\"}.ez-icon-boleto:before{content:\"\\ea13\"}.ez-icon-business-center:before{content:\"\\ea14\"}.ez-icon-calendar-clock:before{content:\"\\ea15\"}.ez-icon-calendar:before{content:\"\\ea16\"}.ez-icon-cash-remove:before{content:\"\\ea17\"}.ez-icon-check-circle-inverted:before{content:\"\\ea18\"}.ez-icon-check-circle:before{content:\"\\ea19\"}.ez-icon-check:before{content:\"\\ea1a\"}.ez-icon-chevron-down:before{content:\"\\ea1b\"}.ez-icon-chevron-left:before{content:\"\\ea1c\"}.ez-icon-chevron-right:before{content:\"\\ea1d\"}.ez-icon-chevron-up:before{content:\"\\ea1e\"}.ez-icon-circle--medium:before{content:\"\\ea1f\"}.ez-icon-circle:before{content:\"\\ea20\"}.ez-icon-cleaning:before{content:\"\\ea21\"}.ez-icon-clipboard:before{content:\"\\ea22\"}.ez-icon-close:before{content:\"\\ea23\"}.ez-icon-cobrar:before{content:\"\\ea24\"}.ez-icon-code:before{content:\"\\ea25\"}.ez-icon-configuration:before{content:\"\\ea26\"}.ez-icon-copy:before{content:\"\\ea27\"}.ez-icon-credit_card:before{content:\"\\ea28\"}.ez-icon-crop:before{content:\"\\ea29\"}.ez-icon-custom:before{content:\"\\ea2a\"}.ez-icon-delete:before{content:\"\\ea2b\"}.ez-icon-description:before{content:\"\\ea2c\"}.ez-icon-dividir:before{content:\"\\ea2d\"}.ez-icon-docx:before{content:\"\\ea2e\"}.ez-icon-dot-notification:before{content:\"\\ea2f\"}.ez-icon-dots-horizontal:before{content:\"\\ea30\"}.ez-icon-dots-vertical:before{content:\"\\ea31\"}.ez-icon-drag-indicator:before{content:\"\\ea32\"}.ez-icon-dual-chevron-down:before{content:\"\\ea33\"}.ez-icon-dual-chevron-up:before{content:\"\\ea34\"}.ez-icon-edit-file:before{content:\"\\ea35\"}.ez-icon-edit-table:before{content:\"\\ea36\"}.ez-icon-edit-time:before{content:\"\\ea37\"}.ez-icon-edit:before{content:\"\\ea38\"}.ez-icon-email:before{content:\"\\ea39\"}.ez-icon-estorno:before{content:\"\\ea3a\"}.ez-icon-exe:before{content:\"\\ea3b\"}.ez-icon-expand:before{content:\"\\ea3c\"}.ez-icon-expandir_card:before{content:\"\\ea3d\"}.ez-icon-extrato:before{content:\"\\ea3e\"}.ez-icon-eye-off:before{content:\"\\ea3f\"}.ez-icon-eye:before{content:\"\\ea40\"}.ez-icon-favorite:before{content:\"\\ea41\"}.ez-icon-figma:before{content:\"\\ea42\"}.ez-icon-file-download:before{content:\"\\ea43\"}.ez-icon-file-upload:before{content:\"\\ea44\"}.ez-icon-filter:before{content:\"\\ea45\"}.ez-icon-find-file:before{content:\"\\ea46\"}.ez-icon-find-page:before{content:\"\\ea47\"}.ez-icon-format-color-fill:before{content:\"\\ea48\"}.ez-icon-generic:before{content:\"\\ea49\"}.ez-icon-gif:before{content:\"\\ea4a\"}.ez-icon-graph_bar:before{content:\"\\ea4b\"}.ez-icon-handshake:before{content:\"\\ea4c\"}.ez-icon-help-inverted:before{content:\"\\ea4d\"}.ez-icon-help:before{content:\"\\ea4e\"}.ez-icon-hide_menu:before{content:\"\\ea4f\"}.ez-icon-home:before{content:\"\\ea50\"}.ez-icon-icons104:before{content:\"\\ea51\"}.ez-icon-language:before{content:\"\\ea52\"}.ez-icon-launch:before{content:\"\\ea53\"}.ez-icon-lightbulb:before{content:\"\\ea54\"}.ez-icon-list:before{content:\"\\ea55\"}.ez-icon-location:before{content:\"\\ea56\"}.ez-icon-lock-outline:before{content:\"\\ea57\"}.ez-icon-lock:before{content:\"\\ea58\"}.ez-icon-menu:before{content:\"\\ea59\"}.ez-icon-mid:before{content:\"\\ea5a\"}.ez-icon-minus:before{content:\"\\ea5b\"}.ez-icon-money-off:before{content:\"\\ea5c\"}.ez-icon-money:before{content:\"\\ea5d\"}.ez-icon-more:before{content:\"\\ea5e\"}.ez-icon-mp3:before{content:\"\\ea5f\"}.ez-icon-mp4:before{content:\"\\ea60\"}.ez-icon-north-west:before{content:\"\\ea61\"}.ez-icon-number:before{content:\"\\ea62\"}.ez-icon-ordem-ascendente:before{content:\"\\ea63\"}.ez-icon-ordem-descendente:before{content:\"\\ea64\"}.ez-icon-parcelar:before{content:\"\\ea65\"}.ez-icon-pause:before{content:\"\\ea66\"}.ez-icon-payments:before{content:\"\\ea67\"}.ez-icon-pdf:before{content:\"\\ea68\"}.ez-icon-play:before{content:\"\\ea69\"}.ez-icon-plus:before{content:\"\\ea6a\"}.ez-icon-png:before{content:\"\\ea6b\"}.ez-icon-power:before{content:\"\\ea6c\"}.ez-icon-pptx:before{content:\"\\ea6d\"}.ez-icon-print:before{content:\"\\ea6e\"}.ez-icon-push-pin:before{content:\"\\ea6f\"}.ez-icon-rateio:before{content:\"\\ea70\"}.ez-icon-receipt:before{content:\"\\ea71\"}.ez-icon-recolher_card:before{content:\"\\ea72\"}.ez-icon-restore:before{content:\"\\ea73\"}.ez-icon-return:before{content:\"\\ea74\"}.ez-icon-save:before{content:\"\\ea75\"}.ez-icon-search:before{content:\"\\ea76\"}.ez-icon-settings-inverted:before{content:\"\\ea77\"}.ez-icon-settings:before{content:\"\\ea78\"}.ez-icon-share:before{content:\"\\ea79\"}.ez-icon-shield:before{content:\"\\ea7a\"}.ez-icon-show_menu:before{content:\"\\ea7b\"}.ez-icon-south-east:before{content:\"\\ea7c\"}.ez-icon-sync:before{content:\"\\ea7d\"}.ez-icon-table:before{content:\"\\ea7e\"}.ez-icon-tag_code:before{content:\"\\ea7f\"}.ez-icon-text:before{content:\"\\ea80\"}.ez-icon-timeline:before{content:\"\\ea81\"}.ez-icon-timer-outline:before{content:\"\\ea82\"}.ez-icon-tune:before{content:\"\\ea83\"}.ez-icon-txt:before{content:\"\\ea84\"}.ez-icon-un-pin:before{content:\"\\ea85\"}.ez-icon-unfold_less:before{content:\"\\ea86\"}.ez-icon-unfold_more:before{content:\"\\ea87\"}.ez-icon-user-circle:before{content:\"\\ea88\"}.ez-icon-warning-outline:before{content:\"\\ea89\"}.ez-icon-warning_triangle:before{content:\"\\ea8a\"}.ez-icon-whatshot:before{content:\"\\ea8b\"}.ez-icon-xlsx:before{content:\"\\ea8c\"}.ez-icon-zip:before{content:\"\\ea8d\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
 
 let EzIcon = class {
   constructor(hostRef) {

package/dist/cjs/ez-toast.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8646c40d.js');
 const core = require('@sankhyalabs/core');
 
-const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container-z-index:var(--more-visible, 2);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;bottom:100px;z-index:var(--ez-toast__container-z-index);left:100px;width:280px;box-sizing:border-box;background-color:var(--ez-toast__container--background-color);border-radius:6px;align-items:center;padding:12px;visibility:hidden}.message__container{font-family:var(--font-pattern, \"Roboto\");text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis}.message__conteiner--icon{padding-left:var(--ez-toast__icon--padding-left);width:80%}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--opened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@-webkit-keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}";
+const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container--z-index:var(--more-visible, 2);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__container--left:var(--space--large, 24px);--ez-toast__container--bottom:var(--space--large, 24px);--ez-toast__container--width:400px;--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;box-sizing:border-box;border-radius:6px;align-items:center;padding:12px;visibility:hidden;width:var(--ez-toast__container--width);left:var(--ez-toast__container--left);bottom:var(--ez-toast__container--bottom);z-index:var(--ez-toast__container--z-index);background-color:var(--ez-toast__container--background-color)}.message__container{text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis;font-family:var(--font-pattern, \"Roboto\")}.message__conteiner--icon{width:80%;padding-left:var(--ez-toast__icon--padding-left)}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--opened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@-webkit-keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}@keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}";
 
 let EzToast = class {
   constructor(hostRef) {

package/dist/cjs/ezui.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isFirefox":[32],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isFirefox":[32],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isFirefox":[32],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isFirefox":[32],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -17,6 +17,7 @@
     "./components/ez-date-input/ez-date-input.js",
     "./components/ez-date-time-input/ez-date-time-input.js",
     "./components/ez-dialog/ez-dialog.js",
+    "./components/ez-file-item/ez-file-item.js",
     "./components/ez-filter-input/ez-filter-input.js",
     "./components/ez-grid/ez-grid.js",
     "./components/ez-icon/ez-icon.js",

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

@@ -0,0 +1,125 @@
+:host {
+  /*private*/
+  display: flex;
+  width: 100%;
+  
+  /* Dimensões */
+  /*@doc Define a altura do componente.*/
+  --ez-file-item--height: 42px;
+  /*@doc Define espaçamento interno do componente.*/
+  --ez-file-item--padding: 9px;
+
+  /* Borda */
+  /*@doc Define o arredondamento dos retangulos.*/
+  --ez-file-item--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a cor da borda.*/
+  --ez-file-item--border-color: var(--color--strokes, #DCE0E8);
+  /*@doc Define largura e estilo da borda.*/
+  --ez-file-item--border-style: var(--border--small, 1px solid);
+  
+  /* Textos */
+  /*@doc Define a família da fonte.*/
+  --ez-file-item--font-family: var(--font-pattern, Arial);
+  /*@doc Define o tamanho da fonte.*/
+  --ez-file-item--font-size: var(--text--medium, 14px);
+  /*@doc Define o peso da fonte.*/
+  --ez-file-item--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor da fonte.*/
+  --ez-file-item--color: var(--title--primary, #2B3A54);
+  
+  /* Label File size */
+  /*@doc Define o peso da fonte do tamanho do arquivo.*/
+  --ez-file-item__file-size--font-weight: var(--text-weight--large, 600);
+  /*@doc Define o peso da fonte do tamanho do arquivo.*/
+  --ez-file-item__file-size--color: var(--color--primary, #008561);
+
+  /* Barra de progresso */
+  --ez-file-item__background-progress--color: var(--color--primary-300, E2F4EF);
+
+  /* Ícone remover */
+  /*@doc Define a cor do ícone.*/
+  --ez-file-item--icon-color: var(--title--primary, #2B3A54);
+}
+
+.box {
+  /*private*/
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  
+  /*public*/
+  padding: var(--ez-file-item--padding);
+  border: var(--ez-file-item--border-color) var(--ez-file-item--border-style);
+  border-radius: var(--ez-file-item--border-radius);
+  height: var(--ez-file-item--height);
+}
+
+.box::before {
+  /*private*/
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  clip-path: inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));
+  
+  /*public*/
+  background-color: var(--ez-file-item__background-progress--color);
+}
+
+.content {
+  /*private*/
+  display: flex;
+  align-items: center;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.file-name {
+  /*private*/
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+
+  /*public*/
+  font-family: var(--ez-file-item--font-family);
+  font-size: var(--ez-file-item--font-size);
+  font-weight: var(--ez-file-item--font-weight);
+  color: var(--ez-file-item--color);
+}
+
+.file-type-icon {
+  /*private*/
+  flex-shrink: 0;
+
+  /*public*/
+  --ez-icon--color: var(--ez-file-item--icon-color);
+  padding-right: var(--ez-file-item--padding) ;
+}
+
+.file-size {
+  /*private*/
+  padding-left: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  /*public*/
+  font-family: var(--ez-file-item--font-family);
+  font-size: var(--ez-file-item--font-size);
+  font-weight: var(--ez-file-item__file-size--font-weight);
+  color: var(--ez-file-item__file-size--color);
+}
+
+.btn-remove {
+  /*private*/
+  cursor: pointer;
+  flex-shrink: 0;
+
+  /*public*/
+  --ez-icon--color: var(--ez-file-item--icon-color);
+}

package/dist/collection/components/ez-file-item/ez-file-item.js

@@ -0,0 +1,198 @@
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
+export class EzFileItem {
+  constructor() {
+    /**
+     * Define se o usuário pode remover o arquivo que está sendo apresentado.
+     */
+    this.canRemove = true;
+    /**
+     * Percentual de carregamento do arquivo para o servidor.
+     */
+    this.progress = 100;
+  }
+  observeProgress(newProgress) {
+    if (newProgress < 0 || newProgress > 100) {
+      throw new Error("O progresso de upload deve ser um número entre 0 e 100.");
+    }
+    this._element.style.setProperty("--ez-file-item--upload-progress", `${100 - newProgress}%`);
+  }
+  getFileSize() {
+    if (!this.fileSize || this.fileSize === 0) {
+      return "";
+    }
+    return `(${StringUtils.formatBytes(this.fileSize)})`;
+  }
+  getIconName() {
+    let extension;
+    if (this.iconName) {
+      return this.iconName;
+    }
+    if (this.fileName.indexOf(".") > -1) {
+      const index = this.fileName.lastIndexOf(".");
+      extension = this.fileName.substring(index);
+    }
+    return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
+  }
+  render() {
+    this._element.title = `${this.fileName} ${this.getFileSize()}`;
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
+    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) },
+      h("div", { class: "content" },
+        h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }),
+        h("label", { class: "file-name" }, this.fileName),
+        h("label", { class: "file-size" }, this.getFileSize())),
+      this.canRemove ?
+        h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", onClick: evt => {
+            this.ezRemove.emit(this.fileName);
+            evt.stopPropagation();
+          } }) : undefined));
+  }
+  static get is() { return "ez-file-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-file-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-file-item.css"]
+  }; }
+  static get properties() { return {
+    "canRemove": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o usu\u00E1rio pode remover o arquivo que est\u00E1 sendo apresentado."
+      },
+      "attribute": "can-remove",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "fileName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o nome do arquivo, com extens\u00E3o."
+      },
+      "attribute": "file-name",
+      "reflect": false
+    },
+    "iconName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define qual \u00EDcone que representa o arquivo."
+      },
+      "attribute": "icon-name",
+      "reflect": false
+    },
+    "fileSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tamanho do arquivo (em bytes)."
+      },
+      "attribute": "file-size",
+      "reflect": false
+    },
+    "progress": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Percentual de carregamento do arquivo para o servidor."
+      },
+      "attribute": "progress",
+      "reflect": false,
+      "defaultValue": "100"
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezClick",
+      "name": "ezClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitido ao clicar no ez-file-input (exceto no bot\u00E3o de remover)."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "ezRemove",
+      "name": "ezRemove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitido ao clicar no bot\u00E3o de remover."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_element"; }
+  static get watchers() { return [{
+      "propName": "progress",
+      "methodName": "observeProgress"
+    }]; }
+}
+const FILE_TYPE_ICONS = {
+  ".exe": "exe",
+  ".gif": "gif",
+  ".mp3": "mp3",
+  ".mp4": "mp4",
+  ".pdf": "pdf",
+  ".png": "png",
+  ".txt": "txt",
+  ".zip": "zip",
+  ".docx": "docx",
+  ".xlsx": "xlsx",
+  ".pptx": "pptx"
+};
+const DEFAULT_FILE_TYPE_ICON = "generic";