@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
1 lines • 10.2 kB
JavaScript
import{r as o,c as e,h as r,H as t,g as s}from"./p-D_4hbGjA.js";import{i}from"./p-BLBSdonk.js";const d=class{constructor(r){o(this,r),this.fileSelect=e(this,"fileSelect"),this.inheritedAttributes={},this.isDraggingOver=!1,this.invalidFile="none",this.errorMessage="",this.uploadSuccess=!1,this.customClass="",this.includeStateIcon=!0,this.handleDropzoneDrop=o=>{var e;if(o.preventDefault(),o.stopPropagation(),this.isDraggingOver=!1,this.disabled)return;const r=null===(e=o.dataTransfer)||void 0===e?void 0:e.files;if(r&&r.length>0){if(this.invalidFile="none",this.errorMessage="",this.uploadSuccess=!1,!this.isValidFileCount(r.length))return this.setInputValue("count"),void(this.errorMessage=this.getErrorMessage("count"));if(!this.isValidFileSize(r))return this.setInputValue("size"),void(this.errorMessage=this.getErrorMessage("size"));for(let o=0;o<r.length;o++){if(!this.isValidFileType(r[o]))return this.setInputValue("type"),void(this.errorMessage=this.getErrorMessage("type"));if(!this.isValidFileName(r[o]))return this.setInputValue("name"),void(this.errorMessage=this.getErrorMessage("name"))}this.uploadSuccess=!0,this.fileSelect.emit(r)}},this.handleDropzoneDragOver=o=>{o.preventDefault(),o.stopPropagation(),this.disabled||this.isDraggingOver||(this.isDraggingOver=!0)},this.handleDropzoneDragLeave=o=>{o.preventDefault(),o.stopPropagation(),this.isDraggingOver=!1},this.handleDropzoneClick=()=>{var o;this.disabled||null===(o=this.inputRef)||void 0===o||o.click()},this.handleDropzoneKeyDown=o=>{var e;if(" "===o.key||"Enter"===o.key){if(o.preventDefault(),this.disabled)return;null===(e=this.inputRef)||void 0===e||e.click()}}}componentWillLoad(){this.inheritedAttributes=i(this.el)}async reset(){return this.invalidFile="none",this.errorMessage="",this.uploadSuccess=!1,this.isDraggingOver=!1,this.inputRef&&(this.inputRef.value=""),Promise.resolve()}getErrorMessage(o){switch(o){case"type":return this.invalidFileTypeMessage||"File format not accepted";case"name":return"Filename exceeds maximum length";case"count":return`Maximum number of files allowed is ${this.maxFileCount}`;case"size":return`Total file size exceeds ${this.formatFileSize(this.maxTotalFileSizeBytes)}`;default:return"Validation error"}}isValidFileType(o){if(!this.acceptFileTypes)return!0;const e=this.acceptFileTypes.split(",").map((o=>o.trim().toLowerCase())),r=o.name.toLowerCase(),t=o.type.toLowerCase();return e.some((o=>{if(o.includes("/*")){const e=o.split("/")[0];return t.startsWith(e+"/")}return o.startsWith(".")?r.endsWith(o):t===o}))}isValidFileName(o){return null==this.maxFileNameLength||o.name.replace(/\.[^/.]+$/,"").length<=this.maxFileNameLength}isValidFileCount(o){return null==this.maxFileCount||o<=this.maxFileCount}isValidFileSize(o){if(null==this.maxTotalFileSizeBytes)return!0;let e=0;for(let r=0;r<o.length;r++)e+=o[r].size;return e<=this.maxTotalFileSizeBytes}setInputValue(o,e){this.invalidFile=o;const r=e||this.inputRef;return r&&(r.value=""),!1}handleFileChange(o){const e=o.target.files;if(e&&0!==e.length){if(this.invalidFile="none",this.errorMessage="",this.uploadSuccess=!1,!this.isValidFileCount(e.length))return this.setInputValue("count",o.target),void(this.errorMessage=this.getErrorMessage("count"));if(!this.isValidFileSize(e))return this.setInputValue("size",o.target),void(this.errorMessage=this.getErrorMessage("size"));for(let r=0;r<e.length;r++){if(!this.isValidFileType(e[r]))return this.setInputValue("type",o.target),void(this.errorMessage=this.getErrorMessage("type"));if(!this.isValidFileName(e[r]))return this.setInputValue("name",o.target),void(this.errorMessage=this.getErrorMessage("name"))}this.fileSelect.emit(e),this.uploadSuccess=!0}}getClasses(){const o=["modus-wc-file-input"],e=(({disabled:o})=>{let e="file-input";return o&&(e=`${e} file-input-disabled`),e})({disabled:this.disabled});return e&&o.push(e),o.join(" ")}formatFileSize(o){if(!o)return"0 Bytes";const e=Math.floor(Math.log(o)/Math.log(1024));return parseFloat((o/Math.pow(1024,e)).toFixed(2))+" "+["Bytes","KB","MB","GB","TB"][e]}render(){const o={success:this.successMessage||"Successfully uploaded",dragOver:this.fileDraggedOverInstructions||"Drop files here"},e=!1!==this.includeStateIcon,s=this.isDraggingOver?"cloud_upload":"none"!==this.invalidFile?"alert":this.uploadSuccess?"check_circle":"cloud_upload",i=this.isDraggingOver?"upload-icon":"none"!==this.invalidFile?"error-icon":this.uploadSuccess?"success-icon":"upload-icon",d=this.isDraggingOver?o.dragOver:"none"!==this.invalidFile?this.errorMessage:this.uploadSuccess?o.success:this.instructions,n=this.isDraggingOver||"none"!==this.invalidFile||this.uploadSuccess||this.disabled?"none":"block";return r(t,{key:"af24e075777f3c228a5a6633e5050c85a9ce7369"},r("div",{key:"1d779ea4719bfa0c8e89ba7ea309ff39c6cf79fb",class:"modus-wc-file-dropzone"},r("input",{key:"d65b32ad27ef57cee54a4782dbc8a0b166354c25",accept:this.acceptFileTypes,class:this.getClasses(),disabled:this.disabled,multiple:this.multiple,onChange:o=>this.handleFileChange(o),ref:o=>this.inputRef=o,type:"file"}),r("div",Object.assign({key:"35b82d6945aa001223d1187a9beac03626306a82","aria-disabled":this.disabled?"true":"false",class:`dropzone-content \n ${this.isDraggingOver?"dragging-over":""} \n ${this.isDraggingOver||"none"===this.invalidFile?"":"invalid-file-type"} \n ${!this.isDraggingOver&&this.uploadSuccess?"upload-success":""} \n ${this.customClass||""}`,onClick:this.handleDropzoneClick,onDragLeave:this.handleDropzoneDragLeave,onDragOver:this.handleDropzoneDragOver,onDrop:this.handleDropzoneDrop,onKeyDown:this.handleDropzoneKeyDown,role:"button",tabindex:this.disabled?-1:0},this.inheritedAttributes),r("div",{key:"634ac7af3f46c884f963def72dbf26a3ab22307d",class:"default-content"},e&&r("modus-wc-icon",{key:"c23a30b68ec7b7d788cf81a264439ea9f1f37890",class:i,name:s,size:"lg",variant:"solid"}),r("span",{key:"22833a4c4a0d782cbd7f036120782c3bfefd86a4"},d),r("div",{key:"6213bb059f17c6da27d36a681ea6e0a8a08b938c",style:{display:n}},r("slot",{key:"3c488bd1855c3903e55d5fd078ca7fde60422983",name:"dropzone"}))))))}get el(){return s(this)}};d.style="modus-wc-file-dropzone .modus-wc-file-dropzone .modus-wc-file-input{display:none}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content{align-items:center;background-color:var(--modus-wc-color-gray-light);border:0.125rem dashed var(--modus-wc-color-gray-6);color:var(--modus-wc-color-gray-6);cursor:pointer;display:flex;flex-direction:column;font-weight:600;height:201px;justify-content:center;padding:0.75rem 1rem;transition:background-color 0.2s ease;width:431px}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.dragging-over{background-color:var(--modus-wc-color-blue-pale);border-color:var(--modus-wc-color-trimble-blue);color:var(--modus-wc-color-gray-10)}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type{background-color:color-mix(in sRGB, var(--modus-wc-color-red-pale) 80%, transparent);border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-gray-10)}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success{background-color:color-mix(in sRGB, var(--modus-wc-color-green-pale) 80%, transparent);border-color:var(--modus-wc-color-green-dark);color:var(--modus-wc-color-gray-10)}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content .default-content{align-items:center;display:flex;flex-direction:column;justify-content:center}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content .default-content span{text-align:center}modus-wc-file-dropzone .modus-wc-file-dropzone:has(input:disabled) .dropzone-content{background-color:var(--modus-wc-color-gray-0);border-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-gray-6);cursor:not-allowed}[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content,[data-theme=modus-modern-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content,[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content{background-color:var(--modus-wc-color-gray-10);color:var(--modus-wc-color-gray-3)}[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.dragging-over,[data-theme=modus-modern-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.dragging-over,[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.dragging-over{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type,[data-theme=modus-modern-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type,[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type{background-color:color-mix(in sRGB, var(--modus-wc-color-red) 50%, transparent);border-color:var(--modus-wc-color-red);color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success,[data-theme=modus-modern-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success,[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success{background-color:color-mix(in sRGB, var(--modus-wc-color-green) 50%, transparent);border-color:var(--modus-wc-color-green);color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone:has(input:disabled) .dropzone-content,[data-theme=modus-modern-dark] modus-wc-file-dropzone .modus-wc-file-dropzone:has(input:disabled) .dropzone-content,[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone:has(input:disabled) .dropzone-content{background-color:var(--modus-wc-color-gray-9);border-color:var(--modus-wc-color-gray-3);color:var(--modus-wc-color-gray-3);cursor:not-allowed}";export{d as modus_wc_file_dropzone}