@digital-realty/ix-file-uploader 1.0.27 → 1.0.29

package/dist/ix-file-uploader.min.js

@@ -0,0 +1 @@
+import{__decorate}from"tslib";import"@digital-realty/theme";import{css,LitElement,html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{createRef,ref}from"lit/directives/ref.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";const IxFileChipStyles=css`.file-chip{align-items:center;background:#f5f7ff;cursor:pointer;display:flex;flex:auto;padding:4px 8px}.file-chip span{margin-right:10px}`;class IxFileChip extends LitElement{onClick(){var e=new CustomEvent("on-file-click",{detail:{file:this.file}});this.dispatchEvent(e)}onDelete(){var e=new CustomEvent("on-file-delete",{detail:{file:this.file}});this.dispatchEvent(e)}render(){var e;return html`<li class="file-chip"><span @click="${this.onClick}">${null==(e=this.file)?void 0:e.name}</span><ix-icon-button @click="${this.onDelete}" name="delete-button" appearance="text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 4.5H19V6.5H5V4.5H8.5L9.5 3.5H14.5L15.5 4.5ZM8 21.5C6.9 21.5 6 20.6 6 19.5V7.5H18V19.5C18 20.6 17.1 21.5 16 21.5H8Z" fill="#DB0028"/></svg></ix-icon-button></li>`}}IxFileChip.styles=[IxFileChipStyles],__decorate([property({type:Object})],IxFileChip.prototype,"file",void 0),customElements.define("ix-file-chip",IxFileChip),function(e){e.B="B",e.KB="KB",e.MB="MB",e.GB="GB",e.TB="TB",e.PB="PB",e.EB="EB",e.ZB="ZB",e.YB="YB"}(DataStorageUnit=DataStorageUnit||{});var DataStorageUnit,DataStorageUnit$1=DataStorageUnit;const KB=1024,MB=1024*KB,GB=1024*MB,TB=1024*GB,PB=1024*TB,EB=1024*PB,ZB=1024*EB,YB=1024*ZB,getTotalBytes=e=>{switch(e){case DataStorageUnit$1.KB:return KB;case DataStorageUnit$1.MB:return MB;case DataStorageUnit$1.GB:return GB;case DataStorageUnit$1.TB:return TB;case DataStorageUnit$1.PB:return PB;case DataStorageUnit$1.EB:return EB;case DataStorageUnit$1.ZB:return ZB;case DataStorageUnit$1.YB:return YB;default:return 0}},processFiles=e=>{var{currentFiles:i,extensions:t,filesToProcess:e,maxFileCount:l,maxFileSizeInBytes:a}=e,o=[];let s=0;for(const n of e){var r=n.name.split(".").pop()||"";t.includes(r)?n.size>a?(r=`File size ${n.size} bytes is too large; maximum allowed size is ${a} bytes`,o.push({file:n,message:r,uploaded:!1})):i.length+s>=l?o.push({file:n,message:`File not uploaded; it would exceed the maximum number of files (${l})`,uploaded:!1}):i.some(e=>e.name===n.name)?(r="File not uploaded; there is already a file named "+n.name,o.push({file:n,message:r,uploaded:!1})):(o.push({file:n,message:"File uploaded",uploaded:!0}),s+=1):(r=`File extension for "${n.name}" is not allowed`,o.push({file:n,message:r,uploaded:!1}))}return o},sortFilesAscending=(e=[])=>e.sort((e,i)=>{e=e.name.toLocaleLowerCase(),i=i.name.toLocaleLowerCase();return e<i?-1:0}),IxFileUploaderStyles=css`.ix-file-uploader{display:flex;flex-direction:column;justify-content:center;min-width:320px}.dropzone{background:var(--Background,#f5f7ff);border:1px dashed var(--Secondary-Main,#378aca);border-radius:3px;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:16px}.ix-file-uploader__label{color:var(--Text-Dark,#092241);font-family:Red Hat Display;font-size:.75rem;font-style:normal;font-weight:700;line-height:16px;letter-spacing:1.25px;text-align:center;text-transform:uppercase}.ix-file-uploader__help-text{color:var(--Text-Dark,#092241);font-family:Red Hat Display;font-size:.75rem;text-align:center}.uploaded-file-list{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;margin-top:32px;padding:0}.file-input{opacity:0;border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}`;class IxFileUploader extends LitElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.dropzoneRef=createRef(),this.fileRef=createRef(),this.allowMultipleFiles=!1,this.bodyText="",this.extensions=[],this.headerText="",this.maxFileCount=10,this.maxFileSizeUnit=DataStorageUnit$1.MB,this.maxFileSizeValue=10,this.name="ix-file-uploader",this.files=[],this.maxFileSizeInBytes=0}get form(){return this.internals.form}onDrop(e){e.preventDefault(),e.dataTransfer&&(e=Array.from(e.dataTransfer.files),this.process(e))}onFileChange(e){e=e.currentTarget.files,e=Array.from(e);this.process(e),this.fileRef.value.files=(new DataTransfer).files}process(e){e=processFiles({currentFiles:this.files,extensions:this.extensions,filesToProcess:e,maxFileCount:this.allowMultipleFiles?this.maxFileCount:1,maxFileSizeInBytes:this.maxFileSizeInBytes});this.updateState(e),this.onFilesUploaded(e)}updateState(e=[]){const i=[];e.forEach(e=>{e.uploaded&&i.push(e.file)}),this.allowMultipleFiles?this.files=[...this.files,...i]:i.length&&(e=i[0],this.files=[e])}onFilesUploaded(e){e=new CustomEvent("on-files-uploaded",{detail:{allFiles:this.files,filesUploaded:e.filter(e=>e.uploaded),filesNotUploaded:e.filter(e=>!e.uploaded)}});this.dispatchEvent(e)}onFileClick(e){e=new CustomEvent("on-file-clicked",{detail:{allFiles:this.files,file:e.detail.file}});this.dispatchEvent(e)}onFileDelete(e){const i=null==(t=e.detail.file)?void 0:t.name;this.files=[...this.files].filter(e=>e.name!==i);var t=new CustomEvent("on-file-removed",{detail:{allFiles:this.files,file:e.detail.file}});this.dispatchEvent(t)}openFileUploadDialog(){var e;null!=(e=this.fileRef.value)&&e.click()}firstUpdated(){var e=this.dropzoneRef.value,e=(e&&(e.addEventListener("dragenter",e=>e.preventDefault()),e.addEventListener("dragover",e=>e.preventDefault()),e.addEventListener("drop",this.onDrop.bind(this))),this.fileRef.value),e=(e&&e.addEventListener("change",this.onFileChange.bind(this)),getTotalBytes(this.maxFileSizeUnit));this.maxFileSizeInBytes=this.maxFileSizeValue*e}renderFileList(e=[]){e=sortFilesAscending(e).map(e=>html`<ix-file-chip .file="${e}" @on-file-click="${this.onFileClick}" @on-file-delete="${this.onFileDelete}"></ix-file-chip>`);return html`<ul class="uploaded-file-list">${e}</ul>`}updated(e){const i=new FormData;this.files.forEach(e=>{i.append(this.name+"[]",e)}),this.internals.setFormValue(i)}render(){var e=this.extensions.map(e=>"."+e).join(", ");return html`<div class="ix-file-uploader"><div class="dropzone" @click="${this.openFileUploadDialog}" @keyup="${this.openFileUploadDialog}" ${ref(this.dropzoneRef)}><div class="ix-file-uploader__label">${this.headerText}</div><div class="ix-file-uploader__help-text">${this.bodyText}</div><input accept="${e}" class="file-input" ?multiple="${this.allowMultipleFiles}" onchange="${this.onFileChange}" ${ref(this.fileRef)} type="file"></div>${this.files.length?this.renderFileList(this.files):nothing}</div>`}}IxFileUploader.styles=[IxFileUploaderStyles],IxFileUploader.formAssociated=!0,__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowMultipleFiles",void 0),__decorate([property()],IxFileUploader.prototype,"bodyText",void 0),__decorate([property({type:Array})],IxFileUploader.prototype,"extensions",void 0),__decorate([property()],IxFileUploader.prototype,"headerText",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileCount",void 0),__decorate([property()],IxFileUploader.prototype,"maxFileSizeUnit",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileSizeValue",void 0),__decorate([property()],IxFileUploader.prototype,"name",void 0),__decorate([state()],IxFileUploader.prototype,"files",void 0),customElements.define("ix-file-uploader",IxFileUploader);

package/package.json

@@ -3,13 +3,14 @@
   "description": "Webcomponent ix-file-uploader following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./ix-file-uploader.js": "./dist/ix-file-uploader.js",
+    "./ix-file-uploader.min.js": "./dist/ix-file-uploader.min.js",
     "./FileUploadResult": "./dist/file-upload-result.js",
     "./IxFileUploader": "./dist/react/IxFileUploader.js",
     "./DataStorageUnit": "./dist/data-storage-unit.js"
@@ -19,7 +20,7 @@
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "build": "tsc && npm run analyze -- --exclude dist",
+    "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
@@ -28,9 +29,9 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-button": "^3.2.30",
-    "@digital-realty/ix-icon-button": "^1.0.35",
-    "@digital-realty/theme": "^1.0.26",
+    "@digital-realty/ix-button": "^3.2.31",
+    "@digital-realty/ix-icon-button": "^1.0.37",
+    "@digital-realty/theme": "^1.0.27",
     "@lit-labs/react": "^2.1.0",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
@@ -51,6 +52,9 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-summary": "^2.0.0",
+    "rollup-plugin-uglify": "^6.0.4",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
@@ -109,5 +113,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "e21beb0a9ade15ab27c4896bf4dc2ba54ff7ceb7"
+  "gitHead": "c7668fda980293ca038c0dd061ebe350fa88ee60"
 }