@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,d as e,h as s,e as r,g as i}from"./p-C1-Dpkp7.js";import{h as t}from"./p-tWS3Egrk.js";import{i as c}from"./p-DJ2rBB6r.js";const n=class{constructor(s){o(this,s),this.fileSelect=e(this,"fileSelect",7),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 s=null===(e=o.dataTransfer)||void 0===e?void 0:e.files;if(s&&s.length>0){if(this.invalidFile="none",this.errorMessage="",this.uploadSuccess=!1,!this.isValidFileCount(s.length))return this.setInputValue("count"),void(this.errorMessage=this.getErrorMessage("count"));if(!this.isValidFileSize(s))return this.setInputValue("size"),void(this.errorMessage=this.getErrorMessage("size"));for(let o=0;o<s.length;o++){if(!this.isValidFileType(s[o]))return this.setInputValue("type"),void(this.errorMessage=this.getErrorMessage("type"));if(!this.isValidFileName(s[o]))return this.setInputValue("name"),void(this.errorMessage=this.getErrorMessage("name"))}this.uploadSuccess=!0,this.fileSelect.emit(s)}},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(){t(this.el),this.inheritedAttributes=c(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())),s=o.name.toLowerCase(),r=o.type.toLowerCase();return e.some((o=>{if(o.includes("/*")){const e=o.split("/")[0];return r.startsWith(e+"/")}return o.startsWith(".")?s.endsWith(o):r===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 s=0;s<o.length;s++)e+=o[s].size;return e<=this.maxTotalFileSizeBytes}setInputValue(o,e){this.invalidFile=o;const s=e||this.inputRef;return s&&(s.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 s=0;s<e.length;s++){if(!this.isValidFileType(e[s]))return this.setInputValue("type",o.target),void(this.errorMessage=this.getErrorMessage("type"));if(!this.isValidFileName(e[s]))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]}getDisplayState(){var o,e,s;const r="info"===(null===(o=this.feedback)||void 0===o?void 0:o.type),i="error"===(null===(e=this.feedback)||void 0===e?void 0:e.type),t="success"===(null===(s=this.feedback)||void 0===s?void 0:s.type);return this.isDraggingOver||r?{isDragging:!0,isError:!1,isSuccess:!1,message:r?this.feedback.message:this.fileDraggedOverInstructions||"Drop files here",icon:r?this.feedback.icon:void 0}:i?{isDragging:!1,isError:!0,isSuccess:!1,message:this.feedback.message,icon:this.feedback.icon}:t?{isDragging:!1,isError:!1,isSuccess:!0,message:this.feedback.message,icon:this.feedback.icon}:"none"!==this.invalidFile?{isDragging:!1,isError:!0,isSuccess:!1,message:this.errorMessage}:this.uploadSuccess?{isDragging:!1,isError:!1,isSuccess:!0,message:this.successMessage||"Successfully uploaded"}:{isDragging:!1,isError:!1,isSuccess:!1,message:this.instructions}}render(){const{isDragging:o,isError:e,isSuccess:i,message:t,icon:c}=this.getDisplayState(),n=!1!==this.includeStateIcon,d=null!=c?c:o?"cloud_upload":e?"alert":i?"check_circle":"cloud_upload",a=o?"upload-icon":e?"error-icon":i?"success-icon":"upload-icon",l=o||e||i||this.disabled?"none":"block";return s(r,{key:"3764c33420e6a2258b5c80b39e83c56cb8eb5f18"},s("div",{key:"38bb57c72d8cd548d7e841166fca709cea407ecc",class:"modus-wc-file-dropzone"},s("input",{key:"7bdef7a80528ae10aefc3917cebd252c5b5ab730",accept:this.acceptFileTypes,class:this.getClasses(),disabled:this.disabled,multiple:this.multiple,onChange:o=>this.handleFileChange(o),ref:o=>this.inputRef=o,type:"file"}),s("div",Object.assign({key:"7c115558c9d22f79ea1d22e2f12e1256295c804f","aria-disabled":this.disabled?"true":"false",class:`dropzone-content \n ${o?"dragging-over":""} \n ${!o&&e?"invalid-file-type":""} \n ${!o&&i?"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),s("div",{key:"48233c63e9cc2aacdff1cc296507771aa7a7da5d",class:"default-content"},n&&s("modus-wc-icon",{key:"0bc6b7ff22bd3b166a7b517a845ccaa7821df3d0",class:a,name:d,size:"lg",variant:"solid"}),s("span",{key:"46ca3cc4fcf44a1cbe444a325002615c32343b8d"},t),s("div",{key:"87cf35c3c86af864d920ad3f9a5dff894c808680",style:{display:l}},s("slot",{key:"8a9b7ef18e24b3fd5b4465691483620eedc1de6d",name:"dropzone"}))))))}get el(){return i(this)}};n.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-base-page);border:0.125rem dashed var(--modus-wc-color-base-200);color:var(--modus-wc-color-base-content);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-primary-pale);border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type{background-color:color-mix(in sRGB, var(--modus-wc-color-error-pale) 80%, transparent);border-color:var(--modus-wc-color-error);color:var(--modus-wc-color-error)}modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success{background-color:color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, transparent);border-color:var(--modus-wc-color-success);color:var(--modus-wc-color-success)}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-base-100);border-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-base-200);cursor:not-allowed}[data-theme=modus-classic-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=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=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=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=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{n as modus_wc_file_dropzone}