@nanoporetech-digital/components 9.1.4 → 9.1.6
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/cjs/nano-file-upload.cjs.entry.js +10 -4
- package/dist/cjs/nano-tab-group.cjs.entry.js +5 -1
- package/dist/collection/components/file-upload/file-upload.js +10 -4
- package/dist/collection/components/tabs/tab-group.js +5 -1
- package/dist/components/nano-file-upload.js +10 -4
- package/dist/components/nano-tab-group.js +5 -1
- package/dist/esm/nano-file-upload.entry.js +10 -4
- package/dist/esm/nano-tab-group.entry.js +5 -1
- package/dist/nano-components/nano-file-upload.entry.js +1 -1
- package/dist/nano-components/nano-tab-group.entry.js +1 -1
- package/dist/types/components/tabs/tab-group.d.ts +1 -0
- package/docs-json.json +1 -1
- package/hydrate/index.js +15 -5
- package/hydrate/index.mjs +15 -5
- package/package.json +2 -2
|
@@ -230,10 +230,16 @@ const FileUpload = class {
|
|
|
230
230
|
checkFileSize(size) {
|
|
231
231
|
return size / 1000000 <= this.maxFileSize;
|
|
232
232
|
}
|
|
233
|
-
checkFileType(
|
|
233
|
+
checkFileType(file) {
|
|
234
234
|
if (!this.accept)
|
|
235
235
|
return true;
|
|
236
|
-
|
|
236
|
+
const type = file.type;
|
|
237
|
+
if (type) {
|
|
238
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
239
|
+
}
|
|
240
|
+
return this.accept
|
|
241
|
+
.split(',')
|
|
242
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
237
243
|
}
|
|
238
244
|
validate = () => {
|
|
239
245
|
this.errorMessage = '';
|
|
@@ -255,7 +261,7 @@ const FileUpload = class {
|
|
|
255
261
|
this.maxFileSize +
|
|
256
262
|
'Mb';
|
|
257
263
|
}
|
|
258
|
-
else if (!this.checkFileType(fileItem.file
|
|
264
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
259
265
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
260
266
|
}
|
|
261
267
|
fileItem.validationMessage = listeItemError;
|
|
@@ -419,7 +425,7 @@ const FileUpload = class {
|
|
|
419
425
|
];
|
|
420
426
|
};
|
|
421
427
|
render() {
|
|
422
|
-
return (renderer.h(index.Host, { key: '
|
|
428
|
+
return (renderer.h(index.Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, renderer.h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
423
429
|
'file-upload': true,
|
|
424
430
|
'file-upload--dragging': this.isDragging,
|
|
425
431
|
'file-upload--focus': this.hasFocus,
|
|
@@ -27,12 +27,14 @@ const NanoTabGroup = class {
|
|
|
27
27
|
initialTouchX = null;
|
|
28
28
|
initialTouchY = null;
|
|
29
29
|
init = true;
|
|
30
|
+
defaultTab = null;
|
|
30
31
|
_tab;
|
|
31
32
|
get tab() {
|
|
32
33
|
return this._tab;
|
|
33
34
|
}
|
|
34
35
|
set tab(tabName) {
|
|
35
|
-
|
|
36
|
+
tabName = tabName || this.defaultTab;
|
|
37
|
+
if (this._tab === tabName)
|
|
36
38
|
return;
|
|
37
39
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
38
40
|
if (!selectedTabEle)
|
|
@@ -301,6 +303,8 @@ const NanoTabGroup = class {
|
|
|
301
303
|
}
|
|
302
304
|
}
|
|
303
305
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
306
|
+
this.defaultTab =
|
|
307
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
304
308
|
observer.unobserve(entries[0].target);
|
|
305
309
|
this.init = false;
|
|
306
310
|
}
|
|
@@ -228,10 +228,16 @@ export class FileUpload {
|
|
|
228
228
|
checkFileSize(size) {
|
|
229
229
|
return size / 1000000 <= this.maxFileSize;
|
|
230
230
|
}
|
|
231
|
-
checkFileType(
|
|
231
|
+
checkFileType(file) {
|
|
232
232
|
if (!this.accept)
|
|
233
233
|
return true;
|
|
234
|
-
|
|
234
|
+
const type = file.type;
|
|
235
|
+
if (type) {
|
|
236
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
237
|
+
}
|
|
238
|
+
return this.accept
|
|
239
|
+
.split(',')
|
|
240
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
235
241
|
}
|
|
236
242
|
validate = () => {
|
|
237
243
|
this.errorMessage = '';
|
|
@@ -253,7 +259,7 @@ export class FileUpload {
|
|
|
253
259
|
this.maxFileSize +
|
|
254
260
|
'Mb';
|
|
255
261
|
}
|
|
256
|
-
else if (!this.checkFileType(fileItem.file
|
|
262
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
257
263
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
258
264
|
}
|
|
259
265
|
fileItem.validationMessage = listeItemError;
|
|
@@ -417,7 +423,7 @@ export class FileUpload {
|
|
|
417
423
|
];
|
|
418
424
|
};
|
|
419
425
|
render() {
|
|
420
|
-
return (h(Host, { key: '
|
|
426
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
421
427
|
'file-upload': true,
|
|
422
428
|
'file-upload--dragging': this.isDragging,
|
|
423
429
|
'file-upload--focus': this.hasFocus,
|
|
@@ -30,12 +30,14 @@ export class NanoTabGroup {
|
|
|
30
30
|
initialTouchX = null;
|
|
31
31
|
initialTouchY = null;
|
|
32
32
|
init = true;
|
|
33
|
+
defaultTab = null;
|
|
33
34
|
_tab;
|
|
34
35
|
get tab() {
|
|
35
36
|
return this._tab;
|
|
36
37
|
}
|
|
37
38
|
set tab(tabName) {
|
|
38
|
-
|
|
39
|
+
tabName = tabName || this.defaultTab;
|
|
40
|
+
if (this._tab === tabName)
|
|
39
41
|
return;
|
|
40
42
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
41
43
|
if (!selectedTabEle)
|
|
@@ -304,6 +306,8 @@ export class NanoTabGroup {
|
|
|
304
306
|
}
|
|
305
307
|
}
|
|
306
308
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
309
|
+
this.defaultTab =
|
|
310
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
307
311
|
observer.unobserve(entries[0].target);
|
|
308
312
|
this.init = false;
|
|
309
313
|
}
|
|
@@ -233,10 +233,16 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
233
233
|
checkFileSize(size) {
|
|
234
234
|
return size / 1000000 <= this.maxFileSize;
|
|
235
235
|
}
|
|
236
|
-
checkFileType(
|
|
236
|
+
checkFileType(file) {
|
|
237
237
|
if (!this.accept)
|
|
238
238
|
return true;
|
|
239
|
-
|
|
239
|
+
const type = file.type;
|
|
240
|
+
if (type) {
|
|
241
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
242
|
+
}
|
|
243
|
+
return this.accept
|
|
244
|
+
.split(',')
|
|
245
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
240
246
|
}
|
|
241
247
|
validate = () => {
|
|
242
248
|
this.errorMessage = '';
|
|
@@ -258,7 +264,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
258
264
|
this.maxFileSize +
|
|
259
265
|
'Mb';
|
|
260
266
|
}
|
|
261
|
-
else if (!this.checkFileType(fileItem.file
|
|
267
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
262
268
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
263
269
|
}
|
|
264
270
|
fileItem.validationMessage = listeItemError;
|
|
@@ -422,7 +428,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
422
428
|
];
|
|
423
429
|
};
|
|
424
430
|
render() {
|
|
425
|
-
return (h(Host, { key: '
|
|
431
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
426
432
|
'file-upload': true,
|
|
427
433
|
'file-upload--dragging': this.isDragging,
|
|
428
434
|
'file-upload--focus': this.hasFocus,
|
|
@@ -30,12 +30,14 @@ const NanoTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabGroup exten
|
|
|
30
30
|
initialTouchX = null;
|
|
31
31
|
initialTouchY = null;
|
|
32
32
|
init = true;
|
|
33
|
+
defaultTab = null;
|
|
33
34
|
_tab;
|
|
34
35
|
get tab() {
|
|
35
36
|
return this._tab;
|
|
36
37
|
}
|
|
37
38
|
set tab(tabName) {
|
|
38
|
-
|
|
39
|
+
tabName = tabName || this.defaultTab;
|
|
40
|
+
if (this._tab === tabName)
|
|
39
41
|
return;
|
|
40
42
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
41
43
|
if (!selectedTabEle)
|
|
@@ -304,6 +306,8 @@ const NanoTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabGroup exten
|
|
|
304
306
|
}
|
|
305
307
|
}
|
|
306
308
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
309
|
+
this.defaultTab =
|
|
310
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
307
311
|
observer.unobserve(entries[0].target);
|
|
308
312
|
this.init = false;
|
|
309
313
|
}
|
|
@@ -228,10 +228,16 @@ const FileUpload = class {
|
|
|
228
228
|
checkFileSize(size) {
|
|
229
229
|
return size / 1000000 <= this.maxFileSize;
|
|
230
230
|
}
|
|
231
|
-
checkFileType(
|
|
231
|
+
checkFileType(file) {
|
|
232
232
|
if (!this.accept)
|
|
233
233
|
return true;
|
|
234
|
-
|
|
234
|
+
const type = file.type;
|
|
235
|
+
if (type) {
|
|
236
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
237
|
+
}
|
|
238
|
+
return this.accept
|
|
239
|
+
.split(',')
|
|
240
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
235
241
|
}
|
|
236
242
|
validate = () => {
|
|
237
243
|
this.errorMessage = '';
|
|
@@ -253,7 +259,7 @@ const FileUpload = class {
|
|
|
253
259
|
this.maxFileSize +
|
|
254
260
|
'Mb';
|
|
255
261
|
}
|
|
256
|
-
else if (!this.checkFileType(fileItem.file
|
|
262
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
257
263
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
258
264
|
}
|
|
259
265
|
fileItem.validationMessage = listeItemError;
|
|
@@ -417,7 +423,7 @@ const FileUpload = class {
|
|
|
417
423
|
];
|
|
418
424
|
};
|
|
419
425
|
render() {
|
|
420
|
-
return (h(Host, { key: '
|
|
426
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
421
427
|
'file-upload': true,
|
|
422
428
|
'file-upload--dragging': this.isDragging,
|
|
423
429
|
'file-upload--focus': this.hasFocus,
|
|
@@ -25,12 +25,14 @@ const NanoTabGroup = class {
|
|
|
25
25
|
initialTouchX = null;
|
|
26
26
|
initialTouchY = null;
|
|
27
27
|
init = true;
|
|
28
|
+
defaultTab = null;
|
|
28
29
|
_tab;
|
|
29
30
|
get tab() {
|
|
30
31
|
return this._tab;
|
|
31
32
|
}
|
|
32
33
|
set tab(tabName) {
|
|
33
|
-
|
|
34
|
+
tabName = tabName || this.defaultTab;
|
|
35
|
+
if (this._tab === tabName)
|
|
34
36
|
return;
|
|
35
37
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
36
38
|
if (!selectedTabEle)
|
|
@@ -299,6 +301,8 @@ const NanoTabGroup = class {
|
|
|
299
301
|
}
|
|
300
302
|
}
|
|
301
303
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
304
|
+
this.defaultTab =
|
|
305
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
302
306
|
observer.unobserve(entries[0].target);
|
|
303
307
|
this.init = false;
|
|
304
308
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as i,c as o,a,d as l}from"./index-RXFO3HxS.js";import{h as e}from"./renderer-B_wACs4w.js";let n=0,t=()=>new DataTransfer;try{t()}catch{try{t=()=>new ClipboardEvent("").clipboardData,t()}catch{t=null}}const s=class{constructor(a){i(this,a),this.nanoChange=o(this,"nanoChange",7),this.nanoFocus=o(this,"nanoFocus",7),this.nanoBlur=o(this,"nanoBlur",7),this.nanoValidate=o(this,"nanoValidate",7)}inputEl;publicInputEl;mo;fileInputId="nano-file-upload-"+n++;canChangeFileList=!!t;removeFiles=[];hasHelperSlot;hasLabelSlot;errorMessage="";isDragging=!1;fileList=[];fileListChange(){this.canChangeFileList&&(this.publicInputEl.value="",this.inputEl.files=this.arrToFileList(this.fileList.map((i=>i.file))),setTimeout((()=>{this.nanoChange.emit({value:this.value,files:this.files})}),20))}hasFocus;get host(){return a(this)}name;accept;capture;maxFileSize=1;maxFiles=1;_label="";get label(){return this.required&&!this._label.endsWith("*")?this._label+" *":this._label}set label(i){this._label=i}placeholder="Choose a file";hideLabel=!1;required=!1;disabled=!1;clearable=!1;showInlineError=!0;validateOn="submitThenDirty";form;shouldValidate(){this.inputEl&&(this.validate(),requestAnimationFrame((()=>{"dirty"===this.validateOn&&this.showInlineValidation()})))}_invalid=null;get invalid(){return this._invalid}get validityMessage(){return this.inputEl?this.inputEl.validationMessage:""}get files(){return this.inputEl?Array.from(this.inputEl.files).map((i=>(i.objectURL=URL.createObjectURL(i),i))):[]}set files(i){this.addNewFiles(this.arrToFileList(i))}get value(){return this.inputEl?this.inputEl.value:""}set value(i){""===i&&this.inputEl&&(this.fileList=[],this.inputEl.value="")}nanoChange;nanoFocus;nanoBlur;nanoValidate;async reportValidity(i){return i&&(this.validate(),this.showInlineValidation()),{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}}async setFocus(){this.inputEl&&this.inputEl.focus()}getInputElement(){return Promise.resolve(this.inputEl)}async showError(i){this.inputEl&&(this.inputEl.setCustomValidity(i),this.showInlineValidation())}globalClickHandler(i){this.hasFocus&&i.composedPath().every((i=>i!==this.host))&&this.onBlur()}globalKeydownHandler(i){this.hasFocus&&"Tab"===i.key&&i.target!==this.inputEl&&this.onBlur()}onReset(i){(this.form?document.querySelector("#"+this.form):this.host.closest("form"))&&i.target===this.host.closest("form")&&(this.value="")}onClearClick=()=>{this.value=""};onBlur=()=>{this.hasFocus=!1,this.validate(),"dirty"===this.validateOn&&this.showInlineValidation(),this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=!0,this.nanoFocus.emit()};arrToFileList(i){const o=t();for(let a=0,l=i.length;a<l;a++)o.items.add(i[a]);return o.files}checkFileSize(i){return i/1e6<=this.maxFileSize}checkFileType(i){return!this.accept||!!i&&this.accept.match(i)&&this.accept.match(i).length>0}validate=()=>{let i;this.errorMessage="",this.inputEl.setCustomValidity(""),this.inputEl.validity.valid?this.fileList.length>this.maxFiles?i=`Maximum number of files exceeded (${this.maxFiles})`:this.fileList.forEach((o=>{let a=null;this.checkFileSize(o.file.size)?this.checkFileType(o.file.type)||(a=`File type is not allowed (${this.accept})`):a="Maximum file size exceeded. Max file size is "+this.maxFileSize+"Mb",o.validationMessage=a,o.valid=!a,a&&(i=a)})):i=this.inputEl.validationMessage,i?this.inputEl.setCustomValidity(i):(this.inputEl.setCustomValidity(""),this.errorMessage="")};showInlineValidation(i){"submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this._invalid=!1,this.errorMessage="",this.inputEl.validity.valid||(this.errorMessage=this.inputEl.validationMessage,this._invalid=!0),this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.inputEl.validationMessage,originalEvent:i})}slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0})}processSlottedContent(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]'),this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')}addNewFiles(i){const o=Array.from(i).map((i=>({file:i,location:URL.createObjectURL(i),valid:!0,validationMessage:null})));if(this.canChangeFileList&&this.maxFiles>1){const i=o.filter((i=>!this.fileList.find((o=>o.file.name===i.file.name))));this.fileList=[...this.fileList,...i]}else this.fileList=o}onInvalid=i=>{this.showInlineError&&i.preventDefault(),this.validate(),this.showInlineValidation(i)};onFileChoose=i=>{const o=i.target.files;o&&o.length&&this.addNewFiles(i.target.files)};onFileRemoveFileClick=(i,o)=>{this.canChangeFileList&&(this.removeFiles.push(o),i.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active"))};onFileRemoveAnim=()=>{if(this.canChangeFileList&&this.removeFiles.length){this.fileList=this.fileList.filter((i=>!this.removeFiles.find((o=>o===i))));try{this.removeFiles.forEach((i=>i.location?URL.revokeObjectURL(i.location):""))}catch(i){console.error(i)}this.removeFiles=[]}};onInputChange=()=>{this.nanoChange.emit({value:this.value,files:this.files})};onDragStop=i=>{i.preventDefault(),i.stopPropagation(),this.isDragging=!1};onDragStart=i=>{i.preventDefault(),i.stopPropagation(),this.isDragging=!0};onDrop=i=>{this.onDragStop(i),i.dataTransfer.files&&i.dataTransfer.files.length&&this.addNewFiles(i.dataTransfer.files)};disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}FileUploadInput=(i,o)=>{const a=this.fileInputId+"-lbl",l=this.showInlineError||this.hasHelperSlot?this.fileInputId+"-more":"";return[e("div",{class:"file-upload__"+i+"-wrap"},e("label",{class:"file-upload__"+i,htmlFor:this.fileInputId,id:a,onDrop:i=>{this.onDrop(i),this.onDragStop(i)},onDragEnd:this.onDragStop,onDragLeave:this.onDragStop,onDragEnter:this.onDragStart,onDragOver:this.onDragStart},(!!this.label||this.hasLabelSlot&&"drop"!==i)&&e("div",{class:"file-upload__label "+(this.hideLabel?"visually-hide":"")},this.label&&this.label.length?this.label:"",!this.label&&this.hasLabelSlot&&"drop"!==i&&e("slot",{name:"label"})),"drop"===i&&e("div",{class:"file-upload__drop-area"},e("div",null,this.hasLabelSlot&&e("slot",{name:"label"})),e("div",null,"Drag and drop or ",e("span",null,"browse"))),"btn"===i&&e("div",{class:"file-upload__button button--keyline button--icon-start "+(this.hasFocus?"button--focus":"")},e("nano-cta",{secondary:!0,class:"file-upload__btn-content"},e("div",{class:"button",disabled:this.disabled},this.fileList.length?this.fileList[0].file.name:this.placeholder)),!!this.value&&this.clearable&&!this.disabled&&e("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"0","aria-label":"Clear selected file",onClick:this.onClearClick},e("nano-icon",{name:"light/xmark"})),!this.disabled&&this.showInlineError&&e("nano-icon",this._invalid?{name:"solid/circle-xmark",class:"file-upload__icon file-upload__icon-error"}:{name:"solid/circle-check",class:"file-upload__icon file-upload__icon-success"})),e("input",{"aria-labelledby":a+" "+l+" "+o,type:"file",id:this.fileInputId,accept:this.accept,class:"file-upload__input",multiple:this.maxFiles>1,disabled:this.disabled,name:this.canChangeFileList?void 0:this.name,form:this.form,ref:i=>{this.canChangeFileList?this.publicInputEl=i:this.inputEl=i},onChange:this.onFileChoose,onFocus:this.onFocus,onReset:this.onInputChange})),e("input",{name:this.canChangeFileList?this.name:void 0,form:this.form,ref:i=>{this.canChangeFileList&&(this.inputEl=i)},type:"file",id:this.fileInputId+"-hidden",tabIndex:-1,multiple:!0,class:"file-upload__input",disabled:this.disabled,required:this.required,accept:this.accept,onInvalid:this.onInvalid,onChange:this.onInputChange})),this.showInlineError||this.hasHelperSlot?e("div",{class:"file-upload__more",id:l},this.showInlineError&&this.errorMessage.length?e("div",{class:"file-upload__error"},this.errorMessage):"",e("div",{class:"file-upload__help"},e("slot",{name:"helper"}))):""]};button=()=>this.FileUploadInput("btn");dropArea=()=>{const i=this.fileInputId+"-list";return[this.FileUploadInput("drop",i),e("output",{class:"file-upload__list-wrap",id:i},!!this.fileList&&this.fileList.length>0&&e("ul",{class:"file-upload__list list"},this.fileList.map((i=>e("li",{key:i.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:()=>this.onFileRemoveAnim()},e("span",{class:"list-title"},i.file.name),!i.valid&&e("nano-tooltip",{content:i.validationMessage,placement:"left"},e("nano-icon-button",{class:"list-button list-error",iconName:"light/triangle-exclamation",label:"File error"})),this.canChangeFileList&&e("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:i.location}),this.canChangeFileList&&e("nano-icon-button",{onClick:o=>this.onFileRemoveFileClick(o,i),class:"list-button list-button--remove",iconName:"light/xmark",label:"Remove file"}))))))]};render(){return e(l,{key:"c6fc291c7ac3c990d5304a2589c7dd1a0193333e",class:"nano-file-upload"},e("div",{key:"12fd1e6551fe6ff6e1eb6a84000a21e526c61c36",class:{"file-upload":!0,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":!0===this._invalid,"file-upload--valid":!1===this._invalid}},e(this.maxFiles>1?this.dropArea:this.button,null)))}static get watchers(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"]}}};s.style=".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-fill-danger);--color-error-light:var(--nano-color-fill-danger-weak);--color-text:var(--nano-color-text-default);--color-drop-browse:var(--nano-color-fill-text-link);--color-drop-border:var(--nano-color-border-accent);--color-drop-bg:var(--nano-color-surface-brand-feature);--drop-height:3.5em;--color-btn-bg:var(--nano-color-background-default);--color-btn-border:var(--nano-color-border-accent);--color-btn-text:var(--nano-color-fill-primary)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-surface-success)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-fill-neutral)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-fill-neutral);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-fill-neutral);background-color:var(--nano-color-fill-neutral-weak);border-color:var(--nano-color-fill-neutral)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-fill-success);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-fill-neutral);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-fill-success);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";export{s as nano_file_upload}
|
|
4
|
+
import{r as i,c as o,a,d as l}from"./index-RXFO3HxS.js";import{h as e}from"./renderer-B_wACs4w.js";let n=0,t=()=>new DataTransfer;try{t()}catch{try{t=()=>new ClipboardEvent("").clipboardData,t()}catch{t=null}}const s=class{constructor(a){i(this,a),this.nanoChange=o(this,"nanoChange",7),this.nanoFocus=o(this,"nanoFocus",7),this.nanoBlur=o(this,"nanoBlur",7),this.nanoValidate=o(this,"nanoValidate",7)}inputEl;publicInputEl;mo;fileInputId="nano-file-upload-"+n++;canChangeFileList=!!t;removeFiles=[];hasHelperSlot;hasLabelSlot;errorMessage="";isDragging=!1;fileList=[];fileListChange(){this.canChangeFileList&&(this.publicInputEl.value="",this.inputEl.files=this.arrToFileList(this.fileList.map((i=>i.file))),setTimeout((()=>{this.nanoChange.emit({value:this.value,files:this.files})}),20))}hasFocus;get host(){return a(this)}name;accept;capture;maxFileSize=1;maxFiles=1;_label="";get label(){return this.required&&!this._label.endsWith("*")?this._label+" *":this._label}set label(i){this._label=i}placeholder="Choose a file";hideLabel=!1;required=!1;disabled=!1;clearable=!1;showInlineError=!0;validateOn="submitThenDirty";form;shouldValidate(){this.inputEl&&(this.validate(),requestAnimationFrame((()=>{"dirty"===this.validateOn&&this.showInlineValidation()})))}_invalid=null;get invalid(){return this._invalid}get validityMessage(){return this.inputEl?this.inputEl.validationMessage:""}get files(){return this.inputEl?Array.from(this.inputEl.files).map((i=>(i.objectURL=URL.createObjectURL(i),i))):[]}set files(i){this.addNewFiles(this.arrToFileList(i))}get value(){return this.inputEl?this.inputEl.value:""}set value(i){""===i&&this.inputEl&&(this.fileList=[],this.inputEl.value="")}nanoChange;nanoFocus;nanoBlur;nanoValidate;async reportValidity(i){return i&&(this.validate(),this.showInlineValidation()),{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}}async setFocus(){this.inputEl&&this.inputEl.focus()}getInputElement(){return Promise.resolve(this.inputEl)}async showError(i){this.inputEl&&(this.inputEl.setCustomValidity(i),this.showInlineValidation())}globalClickHandler(i){this.hasFocus&&i.composedPath().every((i=>i!==this.host))&&this.onBlur()}globalKeydownHandler(i){this.hasFocus&&"Tab"===i.key&&i.target!==this.inputEl&&this.onBlur()}onReset(i){(this.form?document.querySelector("#"+this.form):this.host.closest("form"))&&i.target===this.host.closest("form")&&(this.value="")}onClearClick=()=>{this.value=""};onBlur=()=>{this.hasFocus=!1,this.validate(),"dirty"===this.validateOn&&this.showInlineValidation(),this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=!0,this.nanoFocus.emit()};arrToFileList(i){const o=t();for(let a=0,l=i.length;a<l;a++)o.items.add(i[a]);return o.files}checkFileSize(i){return i/1e6<=this.maxFileSize}checkFileType(i){if(!this.accept)return!0;const o=i.type;return o?!!this.accept.match(o)&&this.accept.match(o).length>0:this.accept.split(",").some((o=>i.name.endsWith(o.trim())))}validate=()=>{let i;this.errorMessage="",this.inputEl.setCustomValidity(""),this.inputEl.validity.valid?this.fileList.length>this.maxFiles?i=`Maximum number of files exceeded (${this.maxFiles})`:this.fileList.forEach((o=>{let a=null;this.checkFileSize(o.file.size)?this.checkFileType(o.file)||(a=`File type is not allowed (${this.accept})`):a="Maximum file size exceeded. Max file size is "+this.maxFileSize+"Mb",o.validationMessage=a,o.valid=!a,a&&(i=a)})):i=this.inputEl.validationMessage,i?this.inputEl.setCustomValidity(i):(this.inputEl.setCustomValidity(""),this.errorMessage="")};showInlineValidation(i){"submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this._invalid=!1,this.errorMessage="",this.inputEl.validity.valid||(this.errorMessage=this.inputEl.validationMessage,this._invalid=!0),this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.inputEl.validationMessage,originalEvent:i})}slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0})}processSlottedContent(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]'),this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')}addNewFiles(i){const o=Array.from(i).map((i=>({file:i,location:URL.createObjectURL(i),valid:!0,validationMessage:null})));if(this.canChangeFileList&&this.maxFiles>1){const i=o.filter((i=>!this.fileList.find((o=>o.file.name===i.file.name))));this.fileList=[...this.fileList,...i]}else this.fileList=o}onInvalid=i=>{this.showInlineError&&i.preventDefault(),this.validate(),this.showInlineValidation(i)};onFileChoose=i=>{const o=i.target.files;o&&o.length&&this.addNewFiles(i.target.files)};onFileRemoveFileClick=(i,o)=>{this.canChangeFileList&&(this.removeFiles.push(o),i.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active"))};onFileRemoveAnim=()=>{if(this.canChangeFileList&&this.removeFiles.length){this.fileList=this.fileList.filter((i=>!this.removeFiles.find((o=>o===i))));try{this.removeFiles.forEach((i=>i.location?URL.revokeObjectURL(i.location):""))}catch(i){console.error(i)}this.removeFiles=[]}};onInputChange=()=>{this.nanoChange.emit({value:this.value,files:this.files})};onDragStop=i=>{i.preventDefault(),i.stopPropagation(),this.isDragging=!1};onDragStart=i=>{i.preventDefault(),i.stopPropagation(),this.isDragging=!0};onDrop=i=>{this.onDragStop(i),i.dataTransfer.files&&i.dataTransfer.files.length&&this.addNewFiles(i.dataTransfer.files)};disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}FileUploadInput=(i,o)=>{const a=this.fileInputId+"-lbl",l=this.showInlineError||this.hasHelperSlot?this.fileInputId+"-more":"";return[e("div",{class:"file-upload__"+i+"-wrap"},e("label",{class:"file-upload__"+i,htmlFor:this.fileInputId,id:a,onDrop:i=>{this.onDrop(i),this.onDragStop(i)},onDragEnd:this.onDragStop,onDragLeave:this.onDragStop,onDragEnter:this.onDragStart,onDragOver:this.onDragStart},(!!this.label||this.hasLabelSlot&&"drop"!==i)&&e("div",{class:"file-upload__label "+(this.hideLabel?"visually-hide":"")},this.label&&this.label.length?this.label:"",!this.label&&this.hasLabelSlot&&"drop"!==i&&e("slot",{name:"label"})),"drop"===i&&e("div",{class:"file-upload__drop-area"},e("div",null,this.hasLabelSlot&&e("slot",{name:"label"})),e("div",null,"Drag and drop or ",e("span",null,"browse"))),"btn"===i&&e("div",{class:"file-upload__button button--keyline button--icon-start "+(this.hasFocus?"button--focus":"")},e("nano-cta",{secondary:!0,class:"file-upload__btn-content"},e("div",{class:"button",disabled:this.disabled},this.fileList.length?this.fileList[0].file.name:this.placeholder)),!!this.value&&this.clearable&&!this.disabled&&e("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"0","aria-label":"Clear selected file",onClick:this.onClearClick},e("nano-icon",{name:"light/xmark"})),!this.disabled&&this.showInlineError&&e("nano-icon",this._invalid?{name:"solid/circle-xmark",class:"file-upload__icon file-upload__icon-error"}:{name:"solid/circle-check",class:"file-upload__icon file-upload__icon-success"})),e("input",{"aria-labelledby":a+" "+l+" "+o,type:"file",id:this.fileInputId,accept:this.accept,class:"file-upload__input",multiple:this.maxFiles>1,disabled:this.disabled,name:this.canChangeFileList?void 0:this.name,form:this.form,ref:i=>{this.canChangeFileList?this.publicInputEl=i:this.inputEl=i},onChange:this.onFileChoose,onFocus:this.onFocus,onReset:this.onInputChange})),e("input",{name:this.canChangeFileList?this.name:void 0,form:this.form,ref:i=>{this.canChangeFileList&&(this.inputEl=i)},type:"file",id:this.fileInputId+"-hidden",tabIndex:-1,multiple:!0,class:"file-upload__input",disabled:this.disabled,required:this.required,accept:this.accept,onInvalid:this.onInvalid,onChange:this.onInputChange})),this.showInlineError||this.hasHelperSlot?e("div",{class:"file-upload__more",id:l},this.showInlineError&&this.errorMessage.length?e("div",{class:"file-upload__error"},this.errorMessage):"",e("div",{class:"file-upload__help"},e("slot",{name:"helper"}))):""]};button=()=>this.FileUploadInput("btn");dropArea=()=>{const i=this.fileInputId+"-list";return[this.FileUploadInput("drop",i),e("output",{class:"file-upload__list-wrap",id:i},!!this.fileList&&this.fileList.length>0&&e("ul",{class:"file-upload__list list"},this.fileList.map((i=>e("li",{key:i.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:()=>this.onFileRemoveAnim()},e("span",{class:"list-title"},i.file.name),!i.valid&&e("nano-tooltip",{content:i.validationMessage,placement:"left"},e("nano-icon-button",{class:"list-button list-error",iconName:"light/triangle-exclamation",label:"File error"})),this.canChangeFileList&&e("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:i.location}),this.canChangeFileList&&e("nano-icon-button",{onClick:o=>this.onFileRemoveFileClick(o,i),class:"list-button list-button--remove",iconName:"light/xmark",label:"Remove file"}))))))]};render(){return e(l,{key:"72dede3cd11629374dc390f030af0a9412a6af70",class:"nano-file-upload"},e("div",{key:"913c23888d43555a1cbfae0d973c848f01e733dc",class:{"file-upload":!0,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":!0===this._invalid,"file-upload--valid":!1===this._invalid}},e(this.maxFiles>1?this.dropArea:this.button,null)))}static get watchers(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"]}}};s.style=".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-fill-danger);--color-error-light:var(--nano-color-fill-danger-weak);--color-text:var(--nano-color-text-default);--color-drop-browse:var(--nano-color-fill-text-link);--color-drop-border:var(--nano-color-border-accent);--color-drop-bg:var(--nano-color-surface-brand-feature);--drop-height:3.5em;--color-btn-bg:var(--nano-color-background-default);--color-btn-border:var(--nano-color-border-accent);--color-btn-text:var(--nano-color-fill-primary)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-surface-success)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-fill-neutral)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-fill-neutral);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-fill-neutral);background-color:var(--nano-color-fill-neutral-weak);border-color:var(--nano-color-fill-neutral)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-fill-success);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-fill-neutral);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-fill-success);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";export{s as nano_file_upload}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as t,c as
|
|
4
|
+
import{r as t,c as i,a as o,k as s,d as r}from"./index-RXFO3HxS.js";import{g as a}from"./dom-DiLhOqyz.js";import{C as n}from"./component-store-DCcnMDT0.js";import{t as e,h}from"./renderer-B_wACs4w.js";import"./throttle-C93FMm2Z.js";let l=0;const d=class{constructor(o){t(this,o),this.nanoTabShow=i(this,"nanoTabShow",7),this.nanoTabHide=i(this,"nanoTabHide",7),this.nanoTabWillClose=i(this,"nanoTabWillClose",7),this.nanoTabClose=i(this,"nanoTabClose",7)}baseId="nano-tab-group-"+ ++l;activeTab;activePanel;isRtl;initialTouchX=null;initialTouchY=null;init=!0;defaultTab=null;_tab;get tab(){return this._tab}set tab(t){if(this._tab===(t=t||this.defaultTab))return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&(!this.init&&this.storeId&&n.update(this.storeId),this._tab=t,this.setActiveTab(i))}get host(){return o(this)}placement="top";noScrollControls=!1;equalTabSize=!1;size;storeId;storeMethod="url-hash";disableSwipe;nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&this.setActiveTab(i)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return a(this.host,e("nano-tab"))}get getAllPanels(){return a(this.host,e("nano-tab-content"))}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,i=!0){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t,this.tab=t.panel,this.getAllActiveTabs.map((t=>t.active=t===this.activeTab)),this.getAllPanels.map((t=>{t.name===this.activeTab.panel?(t.active=!0,this.activePanel=t):t.active=!1,t.removeAttribute("animation-dir")})),i&&(o&&this.nanoTabHide.emit({name:o.panel}),this.nanoTabShow.emit({name:this.activeTab.panel}))}}setAriaLabels(){const t=this.getAllPanels;this.getAllActiveTabs.map(((i,o)=>{const s=t.find((t=>t.name===i.panel));s&&(s.id||(s.id=`${this.baseId}-panel-${o}`),i.id||(i.id=`${this.baseId}-tab-${o}`),i.setAttribute("aria-controls",s.id),s.setAttribute("aria-labelledby",i.id))}))}handleTabClose(t){let i=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(i<0)return;const r=this.getAllPanels.find((t=>t.name===o.panel));if(r&&(t.stopImmediatePropagation(),!this.nanoTabWillClose.emit({name:o.panel}).defaultPrevented)){if(o.active){i=0===i?1:i-1;const t=this.getAllActiveTabs[i]?.panel;t&&this.host.show(t)}o.remove(),r.remove(),this.nanoTabClose.emit({name:o.panel}),s(this.host)}}handleClick=t=>{const i=t.target.closest(e("nano-tab"));i&&this.setActiveTab(i)};handleKeyDown=t=>{const i=document.activeElement;if(!i||i.tagName.toLowerCase()!==e("nano-tab"))return;if(["Enter"," "].includes(t.key)){const i=t.target.closest(e("nano-tab"));i&&(this.setActiveTab(i),t.preventDefault(),t.stopPropagation())}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let s=o.indexOf(i);"Home"===t.key&&(s=0),"End"===t.key&&(s=o.length-1),"top"===this.placement&&((this.isRtl&&"ArrowRight"===t.key||!this.isRtl&&"ArrowLeft"===t.key)&&(s=Math.max(0,s-1)),(this.isRtl&&"ArrowLeft"===t.key||!this.isRtl&&"ArrowRight"===t.key)&&(s=Math.min(o.length-1,s+1))),"start"===this.placement&&("ArrowUp"===t.key&&(s=Math.max(0,s-1)),"ArrowDown"===t.key&&(s=Math.min(o.length-1,s+1))),o[s].setFocus(),t.stopPropagation(),t.preventDefault()};handleTouchStart=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0];this.initialTouchX=i.pageX,this.initialTouchY=i.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0],o=i.pageX-this.initialTouchX,s=this.initialTouchX-i.clientX,r=this.initialTouchY-i.clientY,a=Math.abs(o)>=70&&Math.abs(r)<=50,n=this.getAllActiveTabs,e=n.findIndex((t=>t.active));if(a){const t=o<0&&"top"===this.placement||o>0&&"top"!==this.placement?1:-1;n[e+t]&&(this.setActiveTab(n[e+t]),Math.abs(s)>Math.abs(r)&&this.activePanel.setAttribute("animation-dir",s>0?"left":"right"))}this.initialTouchX=null,this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}))};handleTabSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}),500)};componentWillLoad(){this.init=!0}componentDidLoad(){new IntersectionObserver(((t,i)=>{if(t[0].intersectionRatio>0){if(this.setAriaLabels(),this.storeId){n.init(this,["tab"],this.storeMethod,this.storeId);const t=n.get(this.storeId),i=t.retrieve()?.tab;i&&i!==t.initialState?.tab&&this.getAllActiveTabs.forEach((t=>{t.active=t.panel===i}))}this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1),this.defaultTab=this.activeTab?.panel||this.getAllActiveTabs[0]?.panel,i.unobserve(t[0].target),this.init=!1}})).observe(this.host)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}render(){if(this.isRtl="rtl"===this.host.ownerDocument.dir,0!==this.getAllTabs.length)return h(r,{dir:this.isRtl?"rtl":null,class:"nano-tab-group"},h("div",{part:"base",class:{group:!0,"group--top":"top"===this.placement,"group--start":"start"===this.placement},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("nano-masked-overflow",{role:"navigation",class:"group__tabs",part:"tabs__wrapper",exportparts:"items:tabs, scroll-button:tabs__scroll-button, indicator:active-tab-indicator",orientation:"top"===this.placement?"horizontal":"vertical",isActiveHandler:t=>this.activeTab===t,scrollControls:!this.noScrollControls,hideScrollbars:!0},h("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}),h("div",{class:"group__tabs-border"})),h("div",{part:"body",class:"group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("slot",{onSlotchange:this.handleContentSlotChange}))))}};d.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-border-default);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-border-accent);--indicator-track-color:var(--nano-color-border-default);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";export{d as nano_tab_group}
|
package/docs-json.json
CHANGED
package/hydrate/index.js
CHANGED
|
@@ -14447,10 +14447,16 @@ class FileUpload {
|
|
|
14447
14447
|
checkFileSize(size) {
|
|
14448
14448
|
return size / 1000000 <= this.maxFileSize;
|
|
14449
14449
|
}
|
|
14450
|
-
checkFileType(
|
|
14450
|
+
checkFileType(file) {
|
|
14451
14451
|
if (!this.accept)
|
|
14452
14452
|
return true;
|
|
14453
|
-
|
|
14453
|
+
const type = file.type;
|
|
14454
|
+
if (type) {
|
|
14455
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
14456
|
+
}
|
|
14457
|
+
return this.accept
|
|
14458
|
+
.split(',')
|
|
14459
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
14454
14460
|
}
|
|
14455
14461
|
validate = () => {
|
|
14456
14462
|
this.errorMessage = '';
|
|
@@ -14472,7 +14478,7 @@ class FileUpload {
|
|
|
14472
14478
|
this.maxFileSize +
|
|
14473
14479
|
'Mb';
|
|
14474
14480
|
}
|
|
14475
|
-
else if (!this.checkFileType(fileItem.file
|
|
14481
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
14476
14482
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
14477
14483
|
}
|
|
14478
14484
|
fileItem.validationMessage = listeItemError;
|
|
@@ -14636,7 +14642,7 @@ class FileUpload {
|
|
|
14636
14642
|
];
|
|
14637
14643
|
};
|
|
14638
14644
|
render() {
|
|
14639
|
-
return (h(Host, { key: '
|
|
14645
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
14640
14646
|
'file-upload': true,
|
|
14641
14647
|
'file-upload--dragging': this.isDragging,
|
|
14642
14648
|
'file-upload--focus': this.hasFocus,
|
|
@@ -24314,12 +24320,14 @@ class NanoTabGroup {
|
|
|
24314
24320
|
initialTouchX = null;
|
|
24315
24321
|
initialTouchY = null;
|
|
24316
24322
|
init = true;
|
|
24323
|
+
defaultTab = null;
|
|
24317
24324
|
_tab;
|
|
24318
24325
|
get tab() {
|
|
24319
24326
|
return this._tab;
|
|
24320
24327
|
}
|
|
24321
24328
|
set tab(tabName) {
|
|
24322
|
-
|
|
24329
|
+
tabName = tabName || this.defaultTab;
|
|
24330
|
+
if (this._tab === tabName)
|
|
24323
24331
|
return;
|
|
24324
24332
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
24325
24333
|
if (!selectedTabEle)
|
|
@@ -24587,6 +24595,8 @@ class NanoTabGroup {
|
|
|
24587
24595
|
}
|
|
24588
24596
|
}
|
|
24589
24597
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
24598
|
+
this.defaultTab =
|
|
24599
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
24590
24600
|
observer.unobserve(entries[0].target);
|
|
24591
24601
|
this.init = false;
|
|
24592
24602
|
}
|
package/hydrate/index.mjs
CHANGED
|
@@ -14445,10 +14445,16 @@ class FileUpload {
|
|
|
14445
14445
|
checkFileSize(size) {
|
|
14446
14446
|
return size / 1000000 <= this.maxFileSize;
|
|
14447
14447
|
}
|
|
14448
|
-
checkFileType(
|
|
14448
|
+
checkFileType(file) {
|
|
14449
14449
|
if (!this.accept)
|
|
14450
14450
|
return true;
|
|
14451
|
-
|
|
14451
|
+
const type = file.type;
|
|
14452
|
+
if (type) {
|
|
14453
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
14454
|
+
}
|
|
14455
|
+
return this.accept
|
|
14456
|
+
.split(',')
|
|
14457
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
14452
14458
|
}
|
|
14453
14459
|
validate = () => {
|
|
14454
14460
|
this.errorMessage = '';
|
|
@@ -14470,7 +14476,7 @@ class FileUpload {
|
|
|
14470
14476
|
this.maxFileSize +
|
|
14471
14477
|
'Mb';
|
|
14472
14478
|
}
|
|
14473
|
-
else if (!this.checkFileType(fileItem.file
|
|
14479
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
14474
14480
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
14475
14481
|
}
|
|
14476
14482
|
fileItem.validationMessage = listeItemError;
|
|
@@ -14634,7 +14640,7 @@ class FileUpload {
|
|
|
14634
14640
|
];
|
|
14635
14641
|
};
|
|
14636
14642
|
render() {
|
|
14637
|
-
return (h(Host, { key: '
|
|
14643
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
14638
14644
|
'file-upload': true,
|
|
14639
14645
|
'file-upload--dragging': this.isDragging,
|
|
14640
14646
|
'file-upload--focus': this.hasFocus,
|
|
@@ -24312,12 +24318,14 @@ class NanoTabGroup {
|
|
|
24312
24318
|
initialTouchX = null;
|
|
24313
24319
|
initialTouchY = null;
|
|
24314
24320
|
init = true;
|
|
24321
|
+
defaultTab = null;
|
|
24315
24322
|
_tab;
|
|
24316
24323
|
get tab() {
|
|
24317
24324
|
return this._tab;
|
|
24318
24325
|
}
|
|
24319
24326
|
set tab(tabName) {
|
|
24320
|
-
|
|
24327
|
+
tabName = tabName || this.defaultTab;
|
|
24328
|
+
if (this._tab === tabName)
|
|
24321
24329
|
return;
|
|
24322
24330
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
24323
24331
|
if (!selectedTabEle)
|
|
@@ -24585,6 +24593,8 @@ class NanoTabGroup {
|
|
|
24585
24593
|
}
|
|
24586
24594
|
}
|
|
24587
24595
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
24596
|
+
this.defaultTab =
|
|
24597
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
24588
24598
|
observer.unobserve(entries[0].target);
|
|
24589
24599
|
this.init = false;
|
|
24590
24600
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanoporetech-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.6",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "A collection of Oxford Nanopore corporate / digital webcomponents",
|
|
6
6
|
"type": "module",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"smart-array-filter": "^4.0.2",
|
|
57
57
|
"stencil-wormhole": "3.2.1",
|
|
58
58
|
"tyqs": "^0.1.3",
|
|
59
|
-
"@nanoporetech-digital/style": "9.1.
|
|
59
|
+
"@nanoporetech-digital/style": "9.1.6"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@algolia/client-search": "^4.22.1",
|