@xplor-education/react-wrappers 3.2.0 → 3.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.cjs +2 -2
- package/dist/components.js +7 -6
- package/package.json +1 -1
package/dist/components.cjs
CHANGED
|
@@ -9770,7 +9770,7 @@ ol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xpl
|
|
|
9770
9770
|
.x-button.disabled.x-button--icon-only.sc-xplor-button, .x-button.disabled.x-button--with-icon.sc-xplor-button {
|
|
9771
9771
|
cursor: not-allowed;
|
|
9772
9772
|
opacity: 0.6;
|
|
9773
|
-
}`,Vl=M(class extends ${constructor(){super(),this.__registerHost(),this.type="secondary",this.mode="pg",this.disabled=!1,this.fullWidth=!1,this.icon="+"}renderIcon(){return this.icon==="svg"&&this.iconSvg?p("span",{class:"button-icon button-icon--svg ",innerHTML:this.iconSvg}):p("span",{class:"button-icon"},this.icon)}render(){const n=!this.text&&this.iconPosition!==null,
|
|
9773
|
+
}`,Vl=M(class extends ${constructor(){super(),this.__registerHost(),this.type="secondary",this.mode="pg",this.ariaLabel=null,this.disabled=!1,this.fullWidth=!1,this.fullWidthAttr=!1,this.iconPosition=null,this.icon="+"}renderIcon(){return this.icon==="svg"&&this.iconSvg?p("span",{class:"button-icon button-icon--svg ",innerHTML:this.iconSvg}):p("span",{class:"button-icon"},this.icon)}render(){const n=this.fullWidth||this.fullWidthAttr,e=!this.text&&this.iconPosition!==null,r=this.iconPosition!==null;return p(E,{key:"7e1c935559697792d2309c397baa4c9614afc136",class:{"x-button--full-width":n}},p("slot",{key:"c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a"},p("button",{key:"4bf6b7c8ab48618a343481f3c603f3d48fafbe6a",role:"button",class:Object.assign({"x-button":!0,[this.type]:!0,"x-button--full-width":n,"x-button--icon-only":e,"x-button--with-icon":r&&!e,"x-button--icon-start":this.iconPosition==="start"&&!e,"x-button--icon-end":this.iconPosition==="end"&&!e},this.styles?{[this.styles]:!0}:{}),onClick:()=>this.clickAction&&this.clickAction(),"aria-label":this.ariaLabel,"aria-disabled":this.disabled?"true":null,disabled:this.disabled},r&&this.iconPosition==="start"&&this.renderIcon(),this.text&&p("span",{key:"09bbac7ae367a56a5a23ff5d010ee453ddc09499",class:"button-text"},this.text),r&&this.iconPosition==="end"&&this.renderIcon())))}static get style(){return Eu}},[6,"xplor-button",{text:[1],type:[1],mode:[1],size:[1],styles:[1],clickAction:[16,"click-action"],ariaLabel:[1,"aria-label"],disabled:[4],fullWidth:[516,"full-width"],fullWidthAttr:[4,"fullwidth"],iconPosition:[1,"icon-position"],icon:[1],iconSvg:[1,"icon-svg"]}]);function Lt(){if(typeof customElements>"u")return;["xplor-button"].forEach(n=>{switch(n){case"xplor-button":customElements.get(n)||customElements.define(n,Vl);break}})}const Iu=`@tailwind base;
|
|
9774
9774
|
@tailwind components;
|
|
9775
9775
|
@tailwind utilities;
|
|
9776
9776
|
@layer base {
|
|
@@ -15626,7 +15626,7 @@ ol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop
|
|
|
15626
15626
|
.file-info__remove.sc-xplor-drag-and-drop-input:hover {
|
|
15627
15627
|
background-color: #e0e0e0;
|
|
15628
15628
|
color: #424242;
|
|
15629
|
-
}`,xo="*/*",hf=700,oc=M(class extends ${constructor(){super(),this.__registerHost(),this.fileSelect=k(this,"fileSelect"),this.fileClear=k(this,"fileClear"),this.disabled=!1,this.accepts=xo,this.label="Drag and drop your files here",this.browseLabel="Browse Files",this.progress=-1,this.dragover=!1,this.currentFile=null,this.horizontal=!1,this.onDrop=n=>{var e,r;if(n.preventDefault(),this.dragover=!1,this.disabled)return;const o=(r=(e=n.dataTransfer)===null||e===void 0?void 0:e.files)===null||r===void 0?void 0:r[0];o&&(this.currentFile=o,this.fileSelect.emit(this.currentFile))},this.onDragOver=n=>{n.preventDefault(),this.disabled||(this.dragover=!0)},this.onDragEnter=n=>{n.preventDefault(),this.disabled||(this.dragover=!0)},this.onDragLeave=n=>{n.preventDefault(),this.dragover=!1},this.onFileSelect=n=>{var e;const r=n.target,o=(e=r.files)===null||e===void 0?void 0:e[0];o&&(this.currentFile=o,this.fileSelect.emit(this.currentFile)),r.value=""},this.openFileDialog=()=>{var n;this.disabled||(n=this.fileInputEl)===null||n===void 0||n.click()},this.getAcceptsLabel=()=>{var n;const e=(n=this.accepts)===null||n===void 0?void 0:n.trim();return!e||e===xo?"*":e.split(",").map(r=>r.trim()).filter(r=>r.length>0).map(r=>r.startsWith("image/")?r.slice(6).toUpperCase():r.startsWith(".")?r.slice(1).toUpperCase():r.toUpperCase()).join("/")},this.formatFileSize=n=>{if(n===0)return"0 Bytes";const e=1024,r=["Bytes","KB","MB","GB"],o=Math.floor(Math.log(n)/Math.log(e));return parseFloat((n/Math.pow(e,o)).toFixed(2))+" "+r[o]},this.formatDate=n=>{const e=new Date(n),r=e.getDate(),i=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][e.getMonth()],a=e.getFullYear(),s=r===1||r===21||r===31?"st":r===2||r===22?"nd":r===3||r===23?"rd":"th",l=e.getHours(),c=e.getMinutes().toString().padStart(2,"0"),d=e.getSeconds().toString().padStart(2,"0"),h=l>=12?"PM":"AM",g=l%12||12;return`${r}${s} ${i} ${a}, ${g}:${c}:${d} ${h}`},this.showProgress=()=>this.progress>=0&&this.progress<=100}connectedCallback(){this.resizeObserver=new ResizeObserver(n=>{for(const e of n)this.horizontal=e.contentRect.width>=hf})}componentDidLoad(){const n=this.el.querySelector(".drag-drop-zone");n&&this.resizeObserver&&this.resizeObserver.observe(n)}disconnectedCallback(){var n;(n=this.resizeObserver)===null||n===void 0||n.disconnect()}async clearCurrentFile(){this.currentFile=null,this.fileInputEl&&(this.fileInputEl.value=""),this.fileClear.emit()}render(){const n=Math.min(Math.max(this.progress,0),100),e=this.ariaLabel||`${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;return p(E,{key:"
|
|
15629
|
+
}`,xo="*/*",hf=700,oc=M(class extends ${constructor(){super(),this.__registerHost(),this.fileSelect=k(this,"fileSelect"),this.fileClear=k(this,"fileClear"),this.disabled=!1,this.accepts=xo,this.label="Drag and drop your files here",this.browseLabel="Browse Files",this.ariaLabel=null,this.progress=-1,this.dragover=!1,this.currentFile=null,this.horizontal=!1,this.onDrop=n=>{var e,r;if(n.preventDefault(),this.dragover=!1,this.disabled)return;const o=(r=(e=n.dataTransfer)===null||e===void 0?void 0:e.files)===null||r===void 0?void 0:r[0];o&&(this.currentFile=o,this.fileSelect.emit(this.currentFile))},this.onDragOver=n=>{n.preventDefault(),this.disabled||(this.dragover=!0)},this.onDragEnter=n=>{n.preventDefault(),this.disabled||(this.dragover=!0)},this.onDragLeave=n=>{n.preventDefault(),this.dragover=!1},this.onFileSelect=n=>{var e;const r=n.target,o=(e=r.files)===null||e===void 0?void 0:e[0];o&&(this.currentFile=o,this.fileSelect.emit(this.currentFile)),r.value=""},this.openFileDialog=()=>{var n;this.disabled||(n=this.fileInputEl)===null||n===void 0||n.click()},this.getAcceptsLabel=()=>{var n;const e=(n=this.accepts)===null||n===void 0?void 0:n.trim();return!e||e===xo?"*":e.split(",").map(r=>r.trim()).filter(r=>r.length>0).map(r=>r.startsWith("image/")?r.slice(6).toUpperCase():r.startsWith(".")?r.slice(1).toUpperCase():r.toUpperCase()).join("/")},this.formatFileSize=n=>{if(n===0)return"0 Bytes";const e=1024,r=["Bytes","KB","MB","GB"],o=Math.floor(Math.log(n)/Math.log(e));return parseFloat((n/Math.pow(e,o)).toFixed(2))+" "+r[o]},this.formatDate=n=>{const e=new Date(n),r=e.getDate(),i=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][e.getMonth()],a=e.getFullYear(),s=r===1||r===21||r===31?"st":r===2||r===22?"nd":r===3||r===23?"rd":"th",l=e.getHours(),c=e.getMinutes().toString().padStart(2,"0"),d=e.getSeconds().toString().padStart(2,"0"),h=l>=12?"PM":"AM",g=l%12||12;return`${r}${s} ${i} ${a}, ${g}:${c}:${d} ${h}`},this.showProgress=()=>this.progress>=0&&this.progress<=100}connectedCallback(){this.resizeObserver=new ResizeObserver(n=>{for(const e of n)this.horizontal=e.contentRect.width>=hf})}componentDidLoad(){const n=this.el.querySelector(".drag-drop-zone");n&&this.resizeObserver&&this.resizeObserver.observe(n)}disconnectedCallback(){var n;(n=this.resizeObserver)===null||n===void 0||n.disconnect()}async clearCurrentFile(){this.currentFile=null,this.fileInputEl&&(this.fileInputEl.value=""),this.fileClear.emit()}render(){const n=Math.min(Math.max(this.progress,0),100),e=this.ariaLabel||`${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;return p(E,{key:"2eacbaaed09889dd61176cb1f40a1f6d57a500eb"},p("div",{key:"52736f49694809e2f1e6109938b8c6c20a5a310a",class:{"drag-drop-zone":!0,"drag-drop-zone--horizontal":this.horizontal}},p("div",{key:"601660ed6210fd827ea1f70a6150386fde0cbe85",class:{"drag-drop-card":!0,"drag-drop-card--dragover":this.dragover,"drag-drop-card--disabled":this.disabled},onDrop:this.onDrop,onDragOver:this.onDragOver,onDragEnter:this.onDragEnter,onDragLeave:this.onDragLeave,role:"region","aria-label":e},p("div",{key:"326beba09aea9a50c8a4d1eaaabf3a089f39c7bb",class:"drag-drop-card__content"},p("div",{key:"44cb69927785334d44183448a70f4fdaea84d4f9",class:"drag-drop-card__body"},p("svg",{key:"5034f7cb9abed8ce8096b89a6b197e79adc3182b",class:"drag-drop-card__icon",xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true"},p("path",{key:"12c4a69b0d769f0b0219134f8f43b98d95872a98",d:"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z",fill:"currentColor",opacity:"0.3"}),p("path",{key:"464d590b120bc66cb00de7a725dacd3d4876588e",d:"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z",fill:"currentColor"})),p("div",{key:"c12e46bb7cd3fa26972ab594ea64f06a05908058",class:"drag-drop-card__text"},p("h3",{key:"d9432f6f3f3a7710a2ef29aed828ef44c76658b1",class:"drag-drop-card__title"},this.label),this.accepts&&this.accepts!==xo&&p("p",{key:"917e60a73fb80146438559d9f9b1d962e6be3aaa",class:"drag-drop-card__accepts"},"Accepted file types: ",this.getAcceptsLabel()))),p("p",{key:"f45e185338d8385291aa8e561e573d5a053ff97e",class:"drag-drop-card__divider"},"or"),p("div",{key:"7a9ad643e13cce967e34299a43967cc757be9020",class:"drag-drop-card__action"},p("xplor-button",{key:"e392d2e3779f07834412ece1abce688894ecce22",text:this.browseLabel,type:this.disabled?"disabled":"primary",clickAction:this.openFileDialog,"aria-label":this.browseLabel}))))),this.currentFile&&p("div",{key:"6bc899dd7cd5fc411934dd03b81d0c85c93d6fb4",class:"file-info","aria-live":"polite"},this.showProgress()&&p("p",{key:"262868b9829c96965c68e01d6a4ae17eca16c2c9",class:"file-info__status"},"Uploading ",this.progress===100?"1":"0"," / 1"),p("div",{key:"e2213c9e6c37abbd06d6c4c4553b6a1e120c64b8",class:"file-info__card"},p("div",{key:"3ff619277dfcf66664f80df52ec729572d2e2d37",class:"file-info__icon","aria-hidden":"true"},p("svg",{key:"c7ede2f02ec8cc66b6c2145f4c2342f9a675835b",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor"},p("path",{key:"876db2e41243a14330e435fffbdea712ff1dadba",d:"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z"}))),p("div",{key:"c704971c9290828ae4ed4385f72fce2cead6bb70",class:"file-info__details"},p("p",{key:"4a5004f7928e7edc25d1081ce8d8bddd7163d7b8",class:"file-info__name"},this.currentFile.name),p("p",{key:"e0781583e2f7021c8c389745ae2d6b25ecc9fba9",class:"file-info__meta"},this.formatFileSize(this.currentFile.size),this.currentFile.lastModified?` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`:""),this.showProgress()&&p("div",{key:"893e2190e9b62fb4817824aef28f6f24d89688ba",class:"file-info__progress-row"},p("div",{key:"4bb48687b4a39bb5b261936f3e6073be44aeed42",class:"file-info__progress-bar",role:"progressbar","aria-valuenow":n,"aria-valuemin":0,"aria-valuemax":100,"aria-label":`Upload progress: ${Math.round(n)}%`},p("div",{key:"fff1ddc5c5913c4928f4afd38bbdc4aec46c5978",class:"file-info__progress-fill",style:{width:`${n}%`}})),p("span",{key:"0325aeb98bef764a685d46c03da1ccd1c41a9301",class:"file-info__progress-text","aria-hidden":"true"},Math.round(this.progress),"%"))),p("button",{key:"ba5c770c340a739041d387204b582cd5a819e7ad",class:"file-info__remove",onClick:()=>this.clearCurrentFile(),"aria-label":`Remove file ${this.currentFile.name}`},p("svg",{key:"03e8a7b0f531a73e3892f113ee2dab6e44db65c2",xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true"},p("path",{key:"c122d5436ca8695d6d9ffc84f1b53612d14aa0b9",d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z"}))))),p("input",{key:"bec810bcee088ac73b13b8e9c52e4532e5c66ede",id:"drag-drop-file-select",type:"file",disabled:this.disabled,accept:this.accepts,class:"drag-drop-input-hidden",ref:r=>this.fileInputEl=r,onChange:this.onFileSelect,"aria-label":`${this.browseLabel} - ${this.label}`,tabindex:-1}))}get el(){return this}static get style(){return pf}},[2,"xplor-drag-and-drop-input",{disabled:[4],accepts:[1],label:[1],browseLabel:[1,"browse-label"],ariaLabel:[1,"aria-label"],progress:[2],dragover:[32],currentFile:[32],horizontal:[32],clearCurrentFile:[64]}]);function gf(){if(typeof customElements>"u")return;["xplor-drag-and-drop-input","xplor-button"].forEach(n=>{switch(n){case"xplor-drag-and-drop-input":customElements.get(n)||customElements.define(n,oc);break;case"xplor-button":customElements.get(n)||Lt();break}})}const uf=oc,ff=gf,mf=Jl,xf=Gl,bf=`@tailwind base;
|
|
15630
15630
|
@tailwind components;
|
|
15631
15631
|
@tailwind utilities;
|
|
15632
15632
|
@layer base {
|
package/dist/components.js
CHANGED
|
@@ -12297,14 +12297,14 @@ ol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xpl
|
|
|
12297
12297
|
opacity: 0.6;
|
|
12298
12298
|
}`, Vl = /* @__PURE__ */ M(class extends $ {
|
|
12299
12299
|
constructor() {
|
|
12300
|
-
super(), this.__registerHost(), this.type = "secondary", this.mode = "pg", this.disabled = !1, this.fullWidth = !1, this.icon = "+";
|
|
12300
|
+
super(), this.__registerHost(), this.type = "secondary", this.mode = "pg", this.ariaLabel = null, this.disabled = !1, this.fullWidth = !1, this.fullWidthAttr = !1, this.iconPosition = null, this.icon = "+";
|
|
12301
12301
|
}
|
|
12302
12302
|
renderIcon() {
|
|
12303
12303
|
return this.icon === "svg" && this.iconSvg ? p("span", { class: "button-icon button-icon--svg ", innerHTML: this.iconSvg }) : p("span", { class: "button-icon" }, this.icon);
|
|
12304
12304
|
}
|
|
12305
12305
|
render() {
|
|
12306
|
-
const n = !this.text && this.iconPosition !== null,
|
|
12307
|
-
return p(E, { key: "
|
|
12306
|
+
const n = this.fullWidth || this.fullWidthAttr, e = !this.text && this.iconPosition !== null, r = this.iconPosition !== null;
|
|
12307
|
+
return p(E, { key: "7e1c935559697792d2309c397baa4c9614afc136", class: { "x-button--full-width": n } }, p("slot", { key: "c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a" }, p("button", { key: "4bf6b7c8ab48618a343481f3c603f3d48fafbe6a", role: "button", class: Object.assign({ "x-button": !0, [this.type]: !0, "x-button--full-width": n, "x-button--icon-only": e, "x-button--with-icon": r && !e, "x-button--icon-start": this.iconPosition === "start" && !e, "x-button--icon-end": this.iconPosition === "end" && !e }, this.styles ? { [this.styles]: !0 } : {}), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled }, r && this.iconPosition === "start" && this.renderIcon(), this.text && p("span", { key: "09bbac7ae367a56a5a23ff5d010ee453ddc09499", class: "button-text" }, this.text), r && this.iconPosition === "end" && this.renderIcon())));
|
|
12308
12308
|
}
|
|
12309
12309
|
static get style() {
|
|
12310
12310
|
return Eu;
|
|
@@ -12319,6 +12319,7 @@ ol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xpl
|
|
|
12319
12319
|
ariaLabel: [1, "aria-label"],
|
|
12320
12320
|
disabled: [4],
|
|
12321
12321
|
fullWidth: [516, "full-width"],
|
|
12322
|
+
fullWidthAttr: [4, "fullwidth"],
|
|
12322
12323
|
iconPosition: [1, "icon-position"],
|
|
12323
12324
|
icon: [1],
|
|
12324
12325
|
iconSvg: [1, "icon-svg"]
|
|
@@ -19271,7 +19272,7 @@ ol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop
|
|
|
19271
19272
|
color: #424242;
|
|
19272
19273
|
}`, xo = "*/*", hf = 700, oc = /* @__PURE__ */ M(class extends $ {
|
|
19273
19274
|
constructor() {
|
|
19274
|
-
super(), this.__registerHost(), this.fileSelect = k(this, "fileSelect"), this.fileClear = k(this, "fileClear"), this.disabled = !1, this.accepts = xo, this.label = "Drag and drop your files here", this.browseLabel = "Browse Files", this.progress = -1, this.dragover = !1, this.currentFile = null, this.horizontal = !1, this.onDrop = (n) => {
|
|
19275
|
+
super(), this.__registerHost(), this.fileSelect = k(this, "fileSelect"), this.fileClear = k(this, "fileClear"), this.disabled = !1, this.accepts = xo, this.label = "Drag and drop your files here", this.browseLabel = "Browse Files", this.ariaLabel = null, this.progress = -1, this.dragover = !1, this.currentFile = null, this.horizontal = !1, this.onDrop = (n) => {
|
|
19275
19276
|
var e, r;
|
|
19276
19277
|
if (n.preventDefault(), this.dragover = !1, this.disabled)
|
|
19277
19278
|
return;
|
|
@@ -19326,11 +19327,11 @@ ol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop
|
|
|
19326
19327
|
}
|
|
19327
19328
|
render() {
|
|
19328
19329
|
const n = Math.min(Math.max(this.progress, 0), 100), e = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
|
|
19329
|
-
return p(E, { key: "
|
|
19330
|
+
return p(E, { key: "2eacbaaed09889dd61176cb1f40a1f6d57a500eb" }, p("div", { key: "52736f49694809e2f1e6109938b8c6c20a5a310a", class: { "drag-drop-zone": !0, "drag-drop-zone--horizontal": this.horizontal } }, p("div", { key: "601660ed6210fd827ea1f70a6150386fde0cbe85", class: {
|
|
19330
19331
|
"drag-drop-card": !0,
|
|
19331
19332
|
"drag-drop-card--dragover": this.dragover,
|
|
19332
19333
|
"drag-drop-card--disabled": this.disabled
|
|
19333
|
-
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": e }, p("div", { key: "
|
|
19334
|
+
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": e }, p("div", { key: "326beba09aea9a50c8a4d1eaaabf3a089f39c7bb", class: "drag-drop-card__content" }, p("div", { key: "44cb69927785334d44183448a70f4fdaea84d4f9", class: "drag-drop-card__body" }, p("svg", { key: "5034f7cb9abed8ce8096b89a6b197e79adc3182b", class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, p("path", { key: "12c4a69b0d769f0b0219134f8f43b98d95872a98", d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), p("path", { key: "464d590b120bc66cb00de7a725dacd3d4876588e", d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), p("div", { key: "c12e46bb7cd3fa26972ab594ea64f06a05908058", class: "drag-drop-card__text" }, p("h3", { key: "d9432f6f3f3a7710a2ef29aed828ef44c76658b1", class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== xo && p("p", { key: "917e60a73fb80146438559d9f9b1d962e6be3aaa", class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()))), p("p", { key: "f45e185338d8385291aa8e561e573d5a053ff97e", class: "drag-drop-card__divider" }, "or"), p("div", { key: "7a9ad643e13cce967e34299a43967cc757be9020", class: "drag-drop-card__action" }, p("xplor-button", { key: "e392d2e3779f07834412ece1abce688894ecce22", text: this.browseLabel, type: this.disabled ? "disabled" : "primary", clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && p("div", { key: "6bc899dd7cd5fc411934dd03b81d0c85c93d6fb4", class: "file-info", "aria-live": "polite" }, this.showProgress() && p("p", { key: "262868b9829c96965c68e01d6a4ae17eca16c2c9", class: "file-info__status" }, "Uploading ", this.progress === 100 ? "1" : "0", " / 1"), p("div", { key: "e2213c9e6c37abbd06d6c4c4553b6a1e120c64b8", class: "file-info__card" }, p("div", { key: "3ff619277dfcf66664f80df52ec729572d2e2d37", class: "file-info__icon", "aria-hidden": "true" }, p("svg", { key: "c7ede2f02ec8cc66b6c2145f4c2342f9a675835b", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, p("path", { key: "876db2e41243a14330e435fffbdea712ff1dadba", d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), p("div", { key: "c704971c9290828ae4ed4385f72fce2cead6bb70", class: "file-info__details" }, p("p", { key: "4a5004f7928e7edc25d1081ce8d8bddd7163d7b8", class: "file-info__name" }, this.currentFile.name), p("p", { key: "e0781583e2f7021c8c389745ae2d6b25ecc9fba9", class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}` : ""), this.showProgress() && p("div", { key: "893e2190e9b62fb4817824aef28f6f24d89688ba", class: "file-info__progress-row" }, p("div", { key: "4bb48687b4a39bb5b261936f3e6073be44aeed42", class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": n, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(n)}%` }, p("div", { key: "fff1ddc5c5913c4928f4afd38bbdc4aec46c5978", class: "file-info__progress-fill", style: { width: `${n}%` } })), p("span", { key: "0325aeb98bef764a685d46c03da1ccd1c41a9301", class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%"))), p("button", { key: "ba5c770c340a739041d387204b582cd5a819e7ad", class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, p("svg", { key: "03e8a7b0f531a73e3892f113ee2dab6e44db65c2", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, p("path", { key: "c122d5436ca8695d6d9ffc84f1b53612d14aa0b9", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" }))))), p("input", { key: "bec810bcee088ac73b13b8e9c52e4532e5c66ede", id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (r) => this.fileInputEl = r, onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 }));
|
|
19334
19335
|
}
|
|
19335
19336
|
get el() {
|
|
19336
19337
|
return this;
|