@sankhyalabs/ezui 2.5.2 → 2.6.1

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";

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

@@ -48,128 +48,154 @@ svg {
 */
 [class^="ez-icon-"], [class*=" ez-icon-"] {
   font-family: 'ez-icons' !important;
-  font-size: 16px;
+  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-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-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"; }
+.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"; }
+
 /*
   END CSS GENERATED BY EZ-DESIGN ICONS
 */