@sankhyalabs/ezui 1.1.73 → 1.1.76

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

@@ -2,50 +2,50 @@
 
   /* dimensions */
   /*@doc Define a altura do componente.*/
-  --iu--height: 42px;
+  --ez-upload--height: 42px;
   /*@doc Define a largura do componente.*/
-  --iu--width: 100%;
+  --ez-upload--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --iu__icon--width: 48px;
+  --ez-upload__icon--width: 48px;
 
   /* box--container */
   /*@doc Define a cor de fundo do container.*/
-  --iu__container--background-color: var(--background--medium, #d2dce9);
+  --ez-upload__container--background-color: var(--background--medium, #d2dce9);
 
   /* colors */
   /*@doc Define a cor de fundo do container.*/
-  --iu__color--primary: var(--color--primary, #008561);
+  --ez-upload__color--primary: var(--color--primary, #008561);
 
   /* espaçamento */
   /*@doc Define os espaçamentos extra pequenos no componente.*/
-  --iu--padding--extra-small: var(--space--extra-small, 3px);
+  --ez-upload--padding--extra-small: var(--space--extra-small, 3px);
   /*@doc Define os espaçamentos pequenos no componente.*/
-  --iu--padding--small: var(--space--small, 6px);
+  --ez-upload--padding--small: var(--space--small, 6px);
   /*@doc Define os espaçamentos médios no componente.*/
-  --iu--padding--medium: var(--space--medium, 12px);
+  --ez-upload--padding--medium: var(--space--medium, 12px);
   /*@doc Define os espaçamentos grandes no componente.*/
-  --iu--padding--large: var(--space--large, 24px);
+  --ez-upload--padding--large: var(--space--large, 24px);
 
   /* border */
   /*@doc Define a cor das bordas no componente.*/
-  --iu__border--color: var(--color-strokes, #DCE0E8);
+  --ez-upload__border--color: var(--color-strokes, #DCE0E8);
 
   /* text */
   /*@doc Define as sombras dos textos do componente.*/
-  --iu--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  --ez-upload--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
   /*@doc Define a cor dos textos do componente.*/
-  --iu--text--primary: var(--text-primary, #626e82);
+  --ez-upload--text--primary: var(--text-primary, #626e82);
   /*@doc Define o tamanho dos textos do componente.*/
-  --iu--font-size: var(--text--medium, 14px);
+  --ez-upload--font-size: var(--text--medium, 14px);
   /*@doc Define a família dos textos do componente.*/
-  --iu--font-family: var(--font-pattern, Arial);
+  --ez-upload--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso dos textos do componente.*/
-  --iu--font-weight: var(--text-weight--large, 500);
+  --ez-upload--font-weight: var(--text-weight--large, 500);
 
   /*@doc Contém o ícone de cancelamento.*/
-  --iu__btn__cancel-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="8x" width="8px"><path d="M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z"/></svg>');
+  --ez-upload__btn__cancel-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="8x" width="8px"><path d="M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z"/></svg>');
   /*@doc Contém o ícone de arquivo.*/
-  --iu__file-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="11x" width="9px"><path d="M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z"/></svg>');
+  --ez-upload__file-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="11x" width="9px"><path d="M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z"/></svg>');
 
   /*private*/
   display: flex;
@@ -53,17 +53,17 @@
   position: relative;
 
   /*public*/
-  font-family: var(--iu--font-family);
-  font-size: var(--iu--font-size);
-  width: var(--iu--width);
-  font-weight: var(--iu--font-weight);
+  font-family: var(--ez-upload--font-family);
+  font-size: var(--ez-upload--font-size);
+  width: var(--ez-upload--width);
+  font-weight: var(--ez-upload--font-weight);
 }
 
 .iu {
   display: flex;
   flex-wrap: wrap;
-  background-color: var(--iu__container--background-color);
-  padding: var(--iu--padding--small);
+  background-color: var(--ez-upload__container--background-color);
+  padding: var(--ez-upload--padding--small);
   width: 100%;
   border-radius: 12px;
   box-sizing: border-box;
@@ -75,7 +75,7 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  border: 2px dashed var(--iu__border--color);
+  border: 2px dashed var(--ez-upload__border--color);
   border-radius: 6px;
   box-sizing: border-box;
 }
@@ -85,7 +85,7 @@
   flex-wrap: wrap;
   justify-content: flex-start;
   width: 100%;
-  padding: 0 var(--iu--padding--medium) var(--iu--padding--medium) var(--iu--padding--medium);
+  padding: 0 var(--ez-upload--padding--medium) var(--ez-upload--padding--medium) var(--ez-upload--padding--medium);
   box-sizing: border-box;
 }
 
@@ -95,7 +95,7 @@
   justify-content: flex-start;
   align-items: center;
   align-self: center;
-  padding-bottom: var(--iu--padding--extra-small);
+  padding-bottom: var(--ez-upload--padding--extra-small);
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
@@ -118,7 +118,7 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  border: 1px dashed var(--iu__border--color);
+  border: 1px dashed var(--ez-upload__border--color);
   border-radius: 6px;
   box-sizing: border-box;
 }
@@ -126,7 +126,7 @@
 .box__container {
   display: flex;
   flex-wrap: wrap;
-  background-color: var(--iu__container--background-color);
+  background-color: var(--ez-upload__container--background-color);
   padding: 6px;
   width: 100%;
   border-radius: 12px;
@@ -145,7 +145,7 @@ progress[value] {
   display: flex;
   width: 100%;
   appearance: none;
-  border: 1px solid var(--iu__border--color);
+  border: 1px solid var(--ez-upload__border--color);
   height: 12px;
   justify-content: flex-start;
   align-items: center;
@@ -165,7 +165,7 @@ progress[value]::-webkit-progress-bar {
 progress[value]::-webkit-progress-value {
   display: flex;
   width: 100%;
-  background-color: var(--iu__color--primary);
+  background-color: var(--ez-upload__color--primary);
 }
 
 .text--center {
@@ -183,8 +183,8 @@ progress[value]::-webkit-progress-value {
 }
 
 .text--primary {
-  color: var(--iu--text--primary);
-  text-shadow: var(--iu--text-shadow);
+  color: var(--ez-upload--text--primary);
+  text-shadow: var(--ez-upload--text-shadow);
 }
 
 .text--ellipsis {
@@ -214,8 +214,8 @@ progress[value]::-webkit-progress-value {
   background-color: var(--text--primary, #008561);
   width: 8px;
   height: 8px;
-  -webkit-mask-image: var(--iu__btn__cancel-image);
-  mask-image: var(--iu__btn__cancel-image);
+  -webkit-mask-image: var(--ez-upload__btn__cancel-image);
+  mask-image: var(--ez-upload__btn__cancel-image);
 }
 
 .iu_header {
@@ -232,11 +232,11 @@ progress[value]::-webkit-progress-value {
   white-space: nowrap;
 
   /*public*/
-  font-family: var(--iu--font-family);
+  font-family: var(--ez-upload--font-family);
   font-size: var(--text--extra-small);
-  font-weight: var(--iu--font-weight);
-  color: var(--iu--text--primary);
-  text-shadow: var(--iu--text-shadow);
+  font-weight: var(--ez-upload--font-weight);
+  color: var(--ez-upload--text--primary);
+  text-shadow: var(--ez-upload--text-shadow);
 }
 
 .iu__file-icon {
@@ -256,8 +256,8 @@ progress[value]::-webkit-progress-value {
   background-color: var(--text--primary, #626e82);
   width: 9px;
   height: 11px;
-  -webkit-mask-image: var(--iu__file-icon-image);
-  mask-image: var(--iu__file-icon-image);
+  -webkit-mask-image: var(--ez-upload__file-icon-image);
+  mask-image: var(--ez-upload__file-icon-image);
 }
 
 .iu__file-icon:disabled::after {
@@ -268,7 +268,7 @@ progress[value]::-webkit-progress-value {
   justify-content: center;
   display: flex;
   cursor: pointer;
-  padding: var(--iu--padding--large) 0px;
+  padding: var(--ez-upload--padding--large) 0px;
   box-sizing: border-box;
 }
 

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

@@ -1,6 +1,6 @@
-import { Component, h, Prop, Element, Event, Method, Watch, forceUpdate } from '@stencil/core';
-import Application from '../../utils/Application';
-import RemoteFile from './RemoteFile';
+import { Component, h, Prop, Element, Event, Method, Watch, forceUpdate } from "@stencil/core";
+import Application from "../../utils/Application";
+import RemoteFile from "./RemoteFile";
 export class EzUpload {
   constructor() {
     this._filePointers = new Map();
@@ -28,28 +28,31 @@ export class EzUpload {
   }
   normalizeRequestHeaders() {
     this._requestHeaders = new Map();
-    if (typeof this.requestheaders == 'string') {
+    if (typeof this.requestHeaders == "string") {
       try {
-        this.requestheaders = JSON.parse(this.requestheaders);
+        this.requestHeaders = JSON.parse(this.requestHeaders);
       }
       catch (e) {
-        this.requestheaders = undefined;
+        this.requestHeaders = undefined;
       }
     }
-    for (var key in this.requestheaders) {
-      this._requestHeaders.set(key, this.requestheaders[key]);
+    for (var key in this.requestHeaders) {
+      this._requestHeaders.set(key, this.requestHeaders[key]);
     }
   }
+  /**
+  * Método responsável por adicionar um ou mais arquivos ao componente.
+  */
   async addFiles(files) {
-    if (this.maxfiles > 0) {
+    if (this.maxFiles > 0) {
       let countDistinctFiles = this._filePointers.size;
       files.forEach(file => {
         if (!this._filePointers.has(file.name)) {
           countDistinctFiles++;
         }
       });
-      if (countDistinctFiles > this.maxfiles) {
-        this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
+      if (countDistinctFiles > this.maxFiles) {
+        this.showError(`A quantidade máxima de arquivos é ${this.maxFiles}.`);
         return;
       }
     }
@@ -76,7 +79,7 @@ export class EzUpload {
     if (this.validateFile(file)) {
       const uploadingFile = new RemoteFile(file);
       this._filePointers.set(file.name, uploadingFile);
-      uploadingFile.upload(this.urlupload, this._requestHeaders, (file) => this.updateFeedback(file))
+      uploadingFile.upload(this.urlUpload, this._requestHeaders, (file) => this.updateFeedback(file))
         .then((files) => files.forEach(ezFile => this.finishUpload(ezFile)))
         .catch(msg => this.showError(msg));
       forceUpdate(this);
@@ -97,13 +100,13 @@ export class EzUpload {
     this.ezChange.emit(this.value);
   }
   buildProgressId(uploading) {
-    let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, '_');
+    let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, "_");
     return `PROGRESS_${sanitizedName}_${uploading.file.lastModified}`;
   }
   updateFeedback(uf) {
     window.requestAnimationFrame(() => {
       if (this._host) {
-        const progress = this._host.shadowRoot.querySelector('#' + this.buildProgressId(uf));
+        const progress = this._host.shadowRoot.querySelector("#" + this.buildProgressId(uf));
         if (progress) {
           progress.value = uf.progress;
         }
@@ -111,20 +114,20 @@ export class EzUpload {
     });
   }
   validateFile(file) {
-    if (!this._filePointers.has(file.name) && this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
-      this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
+    if (!this._filePointers.has(file.name) && this.maxFiles > 0 && this._filePointers.size >= this.maxFiles) {
+      this.showError(`A quantidade máxima de arquivos é ${this.maxFiles}.`);
       return false;
     }
     if (file.size === 0) {
       this.showError(`Erro de permissão: O arquivo "${file.name}" não pode ser enviado.`);
       return false;
     }
-    if (!this.urlupload) {
+    if (!this.urlUpload) {
       this.showError("Endereço de upload não informado");
       return false;
     }
-    if (this.maxfilesize >= 0 && file.size > this.maxfilesize) {
-      this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxfilesize));
+    if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {
+      this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxFileSize));
       return false;
     }
     return true;
@@ -134,17 +137,17 @@ export class EzUpload {
   }
   formatBytes(bytes, decimals = 1) {
     if (bytes === 0)
-      return '0 Bytes';
+      return "0 Bytes";
     const k = 1024;
     const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
   }
   onFileInputChange(event) {
     const input = event.target;
     this.addFiles(Array.from(input.files));
-    this._fileInput.value = '';
+    this._fileInput.value = "";
   }
   isRemoteFile(item) {
     return "file" in item;
@@ -160,10 +163,10 @@ export class EzUpload {
       this.removeFromList(name);
     }
     else {
-      if (this.urldelete) {
+      if (this.urlDelete) {
         const uploadingFile = new RemoteFile(null);
         this._filePointers.set(item.name, uploadingFile);
-        uploadingFile.delete(item, this.urldelete, null)
+        uploadingFile.delete(item, this.urlDelete, null)
           .then(_ok => this.removeFromList(name))
           .catch(msg => this.showError(msg));
       }
@@ -179,20 +182,20 @@ export class EzUpload {
   }
   componentDidLoad() {
     if (this.enabled && this._dropZone && window.FileList && window.File) {
-      this._dropZone.addEventListener('dragover', event => {
+      this._dropZone.addEventListener("dragover", event => {
         event.stopPropagation();
         event.preventDefault();
-        event.dataTransfer.dropEffect = 'copy';
-        this._dropZone.style.background = '#c2dbff';
+        event.dataTransfer.dropEffect = "copy";
+        this._dropZone.style.background = "#c2dbff";
       });
-      this._dropZone.addEventListener('drop', event => {
+      this._dropZone.addEventListener("drop", event => {
         event.stopPropagation();
         event.preventDefault();
         this.addFiles(Array.from(event.dataTransfer.files));
-        this._dropZone.style.background = '';
+        this._dropZone.style.background = "";
       });
-      this._dropZone.addEventListener('dragleave', _event => {
-        this._dropZone.style.background = '';
+      this._dropZone.addEventListener("dragleave", _event => {
+        this._dropZone.style.background = "";
       });
     }
   }
@@ -204,13 +207,13 @@ export class EzUpload {
     }
   }
   render() {
-    return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass('iu', 'background--disabled') },
+    return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass("iu", "background--disabled") },
       h("div", { class: "iu__container", onClick: () => this.openFilesDialog() },
         h("div", { class: "iu_header" },
-          this.label ? h("label", { class: this.evalDisabledClass('iu__label', 'text--disabled'), title: this.label }, this.label) : null,
-          h("div", { class: this.evalDisabledClass('iu__icon-label', 'mouse-pointer--disabled') },
+          this.label ? h("label", { class: this.evalDisabledClass("iu__label", "text--disabled"), title: this.label }, this.label) : null,
+          h("div", { class: this.evalDisabledClass("iu__icon-label", "mouse-pointer--disabled") },
             h("button", { class: "iu__file-icon", disabled: !this.enabled }),
-            h("div", { class: this.evalDisabledClass('text text--center text--medium text--primary', 'text--disabled') }, this.enabled ? 'Arraste e solte ou clique para adicionar arquivos' : 'Somente leitura'))),
+            h("div", { class: this.evalDisabledClass("text text--center text--medium text--primary", "text--disabled") }, this.enabled ? "Arraste e solte ou clique para adicionar arquivos" : "Somente leitura"))),
         this.buildFooter()),
       h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, hidden: true })));
   }
@@ -224,8 +227,8 @@ export class EzUpload {
   }
   buildFileItem(item) {
     const fileName = item.name;
-    const progress = Number(item['progress']);
-    const downloadURL = item['downloadURL'];
+    const progress = Number(item["progress"]);
+    const downloadURL = item["downloadURL"];
     const label = `${fileName} (${this.formatBytes(item.size)})`;
     return (h("div", { class: "iu__item", key: fileName, onClick: evt => evt.stopPropagation() },
       h("div", { class: "iu__item-label modificador" },
@@ -290,7 +293,7 @@ export class EzUpload {
       "reflect": false,
       "defaultValue": "true"
     },
-    "maxfilesize": {
+    "maxFileSize": {
       "type": "number",
       "mutable": false,
       "complexType": {
@@ -304,10 +307,10 @@ export class EzUpload {
         "tags": [],
         "text": "Define o tamanho m\u00E1ximo (em bytes) de cada arquivo que pode ser transferido"
       },
-      "attribute": "maxfilesize",
+      "attribute": "max-file-size",
       "reflect": false
     },
-    "maxfiles": {
+    "maxFiles": {
       "type": "number",
       "mutable": false,
       "complexType": {
@@ -321,10 +324,10 @@ export class EzUpload {
         "tags": [],
         "text": "Define um limite para a quantidade de arquivos"
       },
-      "attribute": "maxfiles",
+      "attribute": "max-files",
       "reflect": false
     },
-    "requestheaders": {
+    "requestHeaders": {
       "type": "any",
       "mutable": false,
       "complexType": {
@@ -338,10 +341,10 @@ export class EzUpload {
         "tags": [],
         "text": "Headers para a requisi\u00E7\u00E3o Http"
       },
-      "attribute": "requestheaders",
+      "attribute": "request-headers",
       "reflect": false
     },
-    "urlupload": {
+    "urlUpload": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -355,10 +358,10 @@ export class EzUpload {
         "tags": [],
         "text": "Define a URL de upload"
       },
-      "attribute": "urlupload",
+      "attribute": "url-upload",
       "reflect": false
     },
-    "urldelete": {
+    "urlDelete": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -372,7 +375,7 @@ export class EzUpload {
         "tags": [],
         "text": "Define a URL de dele\u00E7\u00E3o"
       },
-      "attribute": "urldelete",
+      "attribute": "url-delete",
       "reflect": false
     },
     "value": {
@@ -443,7 +446,7 @@ export class EzUpload {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "M\u00E9todo respons\u00E1vel por adicionar um ou mais arquivos ao componente.",
         "tags": []
       }
     }
@@ -453,7 +456,7 @@ export class EzUpload {
       "propName": "value",
       "methodName": "changeValue"
     }, {
-      "propName": "requestheaders",
+      "propName": "requestHeaders",
       "methodName": "normalizeRequestHeaders"
     }]; }
 }

package/dist/collection/utils/AssetsUtils.js

@@ -0,0 +1,19 @@
+import { getAssetPath, setAssetPath } from "@stencil/core";
+export const getSpritePath = (sprite) => `${getContextAssetsPath("../assets/actions-sprite.svg")}#${sprite}`;
+let ctxLoaded = false;
+function getContextAssetsPath(resource) {
+  if (!ctxLoaded) {
+    const scriptElem = document.querySelector("script[data-ezui-assets-url]");
+    if (scriptElem) {
+      let assetsPath = scriptElem.dataset.ezuiAssetsUrl;
+      if (assetsPath) {
+        if (assetsPath.startsWith('/')) {
+          assetsPath = window.location.origin + assetsPath;
+        }
+        setAssetPath(assetsPath);
+      }
+    }
+    ctxLoaded = true;
+  }
+  return getAssetPath(resource);
+}