@nanoporetech-digital/components 9.1.7 → 9.1.8
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-datalist_3.cjs.entry.js +13 -5
- package/dist/collection/components/datalist/datalist.js +13 -5
- package/dist/components/datalist.js +13 -5
- package/dist/esm/nano-datalist_3.entry.js +13 -5
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/docs-json.json +1 -1
- package/hydrate/index.js +13 -5
- package/hydrate/index.mjs +13 -5
- package/package.json +2 -2
|
@@ -468,6 +468,14 @@ const DataList = class {
|
|
|
468
468
|
this.listBox.setFocus();
|
|
469
469
|
return;
|
|
470
470
|
}
|
|
471
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
472
|
+
// (type-to-select) value - already applied - and closes
|
|
473
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
474
|
+
e.preventDefault();
|
|
475
|
+
this.shouldOpen = false;
|
|
476
|
+
this.manageDropdownDisplay();
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
471
479
|
this.shouldOpen = true;
|
|
472
480
|
// open dropdown if possible
|
|
473
481
|
this.manageDropdownDisplay();
|
|
@@ -529,18 +537,18 @@ const DataList = class {
|
|
|
529
537
|
}
|
|
530
538
|
}
|
|
531
539
|
render() {
|
|
532
|
-
return (renderer.h(index.Host, { key: '
|
|
540
|
+
return (renderer.h(index.Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
533
541
|
? 'Select options from the list below'
|
|
534
|
-
: undefined }, renderer.h("nano-dropdown", { key: '
|
|
542
|
+
: undefined }, renderer.h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
535
543
|
dlist__dropdown: true,
|
|
536
544
|
'dlist--isfiltered': this.isFiltered,
|
|
537
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: '
|
|
545
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
538
546
|
dlist__menu: true,
|
|
539
547
|
'dlist__menu--open': this.dropwdownOpen,
|
|
540
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '
|
|
548
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), renderer.h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), renderer.h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), renderer.h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), renderer.h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
541
549
|
dlist__menu: true,
|
|
542
550
|
'dlist__menu--open': this.dropwdownOpen,
|
|
543
|
-
} }, renderer.h("slot", { key: '
|
|
551
|
+
} }, renderer.h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (renderer.h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
544
552
|
}
|
|
545
553
|
static get watchers() { return {
|
|
546
554
|
"open": ["openWatcher"],
|
|
@@ -474,6 +474,14 @@ export class DataList {
|
|
|
474
474
|
this.listBox.setFocus();
|
|
475
475
|
return;
|
|
476
476
|
}
|
|
477
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
478
|
+
// (type-to-select) value - already applied - and closes
|
|
479
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
480
|
+
e.preventDefault();
|
|
481
|
+
this.shouldOpen = false;
|
|
482
|
+
this.manageDropdownDisplay();
|
|
483
|
+
return;
|
|
484
|
+
}
|
|
477
485
|
this.shouldOpen = true;
|
|
478
486
|
// open dropdown if possible
|
|
479
487
|
this.manageDropdownDisplay();
|
|
@@ -535,18 +543,18 @@ export class DataList {
|
|
|
535
543
|
}
|
|
536
544
|
}
|
|
537
545
|
render() {
|
|
538
|
-
return (h(Host, { key: '
|
|
546
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
539
547
|
? 'Select options from the list below'
|
|
540
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
548
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
541
549
|
dlist__dropdown: true,
|
|
542
550
|
'dlist--isfiltered': this.isFiltered,
|
|
543
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
551
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
544
552
|
dlist__menu: true,
|
|
545
553
|
'dlist__menu--open': this.dropwdownOpen,
|
|
546
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
554
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
547
555
|
dlist__menu: true,
|
|
548
556
|
'dlist__menu--open': this.dropwdownOpen,
|
|
549
|
-
} }, h("slot", { key: '
|
|
557
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
550
558
|
}
|
|
551
559
|
static get is() { return "nano-datalist"; }
|
|
552
560
|
static get encapsulation() { return "shadow"; }
|
|
@@ -470,6 +470,14 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
470
470
|
this.listBox.setFocus();
|
|
471
471
|
return;
|
|
472
472
|
}
|
|
473
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
474
|
+
// (type-to-select) value - already applied - and closes
|
|
475
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
476
|
+
e.preventDefault();
|
|
477
|
+
this.shouldOpen = false;
|
|
478
|
+
this.manageDropdownDisplay();
|
|
479
|
+
return;
|
|
480
|
+
}
|
|
473
481
|
this.shouldOpen = true;
|
|
474
482
|
// open dropdown if possible
|
|
475
483
|
this.manageDropdownDisplay();
|
|
@@ -531,18 +539,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
531
539
|
}
|
|
532
540
|
}
|
|
533
541
|
render() {
|
|
534
|
-
return (h(Host, { key: '
|
|
542
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
535
543
|
? 'Select options from the list below'
|
|
536
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
544
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
537
545
|
dlist__dropdown: true,
|
|
538
546
|
'dlist--isfiltered': this.isFiltered,
|
|
539
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
547
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
540
548
|
dlist__menu: true,
|
|
541
549
|
'dlist__menu--open': this.dropwdownOpen,
|
|
542
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
550
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
543
551
|
dlist__menu: true,
|
|
544
552
|
'dlist__menu--open': this.dropwdownOpen,
|
|
545
|
-
} }, h("slot", { key: '
|
|
553
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
546
554
|
}
|
|
547
555
|
static get watchers() { return {
|
|
548
556
|
"open": ["openWatcher"],
|
|
@@ -466,6 +466,14 @@ const DataList = class {
|
|
|
466
466
|
this.listBox.setFocus();
|
|
467
467
|
return;
|
|
468
468
|
}
|
|
469
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
470
|
+
// (type-to-select) value - already applied - and closes
|
|
471
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
472
|
+
e.preventDefault();
|
|
473
|
+
this.shouldOpen = false;
|
|
474
|
+
this.manageDropdownDisplay();
|
|
475
|
+
return;
|
|
476
|
+
}
|
|
469
477
|
this.shouldOpen = true;
|
|
470
478
|
// open dropdown if possible
|
|
471
479
|
this.manageDropdownDisplay();
|
|
@@ -527,18 +535,18 @@ const DataList = class {
|
|
|
527
535
|
}
|
|
528
536
|
}
|
|
529
537
|
render() {
|
|
530
|
-
return (h(Host, { key: '
|
|
538
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
531
539
|
? 'Select options from the list below'
|
|
532
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
540
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
533
541
|
dlist__dropdown: true,
|
|
534
542
|
'dlist--isfiltered': this.isFiltered,
|
|
535
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
543
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
536
544
|
dlist__menu: true,
|
|
537
545
|
'dlist__menu--open': this.dropwdownOpen,
|
|
538
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
546
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
539
547
|
dlist__menu: true,
|
|
540
548
|
'dlist__menu--open': this.dropwdownOpen,
|
|
541
|
-
} }, h("slot", { key: '
|
|
549
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
542
550
|
}
|
|
543
551
|
static get watchers() { return {
|
|
544
552
|
"open": ["openWatcher"],
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{a as t,r as i,c as e,e as n,d as o}from"./index-RXFO3HxS.js";import{t as s,h as a}from"./renderer-B_wACs4w.js";import{g as r}from"./active-element-CKJIkX0R.js";import{d as h}from"./throttle-C93FMm2Z.js";import{g as d}from"./dom-DiLhOqyz.js";let l=0;const c=class{isNanoInput=!1;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId="nano-datalist-"+l++;isFiltered=!1;shouldFocus=!1;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t,this.connectedInput?.value||t.forEach((t=>{t.selected&&!this.selected.includes(t.value)&&this.changeInputValue(t)}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=!0;optionIds=[];constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.nanoDeselect=e(this,"nanoDeselect",7),this.nanoOptionsUpdated=e(this,"nanoOptionsUpdated",7),this.inputChange=h(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=!1;openWatcher(){n((()=>{if(this.open&&this.nanoDropdown.tetherTo){const{height:t,top:i}=this.nanoDropdown.tetherTo.getBoundingClientRect();this.nanoDropdown.style.setProperty("--max-height",`max(${window.innerHeight-(t+i+40)}px, 48vw)`)}this.nanoDropdown&&(this.nanoDropdown.open=this.open),this.connectedInput&&this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=!1;disabled=!1;async watchInputChange(){let t;(t=this.host.closest(s("nano-input")))?(this.isNanoInput=!0,this.connectedInput=await t.getInputElement()):this.input&&"string"==typeof this.input&&(t=document.querySelector(this.input))?(this.isNanoInput=!1,this.connectedInput=t):"object"==typeof this.input&&(this.connectedInput=this.input)}handleOptionsChange(){if(this.host)if(d(this.host,":not(nano-nav-item):not(nano-option):not([role])",!0).forEach((t=>t.setAttribute("role","none"))),this.options&&this.options.length||this.mo){if(this.options?.length){this.mo&&(this.mo.disconnect(),this.mo=void 0);const t=this.host.querySelectorAll(s("nano-option"));n((()=>{t?.length&&t.forEach((t=>t.remove())),this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const e=Object.assign(document.createElement(s("nano-option")),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});return this.host.append(e),e}})),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=[...this.allOptEles]}))}}else(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0}),this.processSlottedContent()}watchTypeChange(){if(!this.connectedInput||this.disabled)return;let t={closeOnSelect:!1},i="both",e=!1;switch(this.type){case"input":t={closeOnSelect:!0};break;case"select":i="list",e=!0,t={closeOnSelect:!0}}this.isNanoInput||(t.tetherTo=this.connectedInput),this.dropDownConfig={...this.dropDownConfig,...t},this.connectedInput.setAttribute("aria-autocomplete",i),this.connectedInput.readOnly=e}manageInputEvents(t,i){if(i){const t=i.closest(s("nano-input"));t&&t.removeEventListener("nanoChange",this.inputChange),this.removeEventListeners(i),this.inputLabel=null,n((()=>{i.removeAttribute("role"),i.removeAttribute("aria-expanded"),i.removeAttribute("aria-controls"),i.removeAttribute("aria-owns"),i.removeAttribute("aria-haspopup"),i.removeAttribute("aria-autocomplete"),i.removeAttribute("autocomplete")}))}if(t){const i=t.closest(s("nano-input"));i&&i.addEventListener("nanoChange",this.inputChange),t.addEventListener("change",this.inputChange),t.addEventListener("click",this.inputClick),t.addEventListener("keydown",this.inputKeydown),t.addEventListener("input",this.inputChange),this.listId=this.host.id||this.listId,this.inputLabel=t?.labels?.item(0)||function(t){let i;return t.id&&(i=document.querySelector(`label[for='${t.id}']`)),i||(i=t.closest("label")),i}(t),n((()=>{this.host.id=this.listId,t.setAttribute("role","combobox"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",this.listId),t.setAttribute("aria-owns",this.listId),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const i=this.connectedInput?.value||"",e=[];n((()=>{this.allOptEles.forEach(((n,o)=>{this.actvOptEles.includes(n)?(t++,n.setAttribute("aria-posinset",t+""),n.setAttribute("aria-setsize",this.actvOptEles.length+""),n.hidden=!1,this.isSelected(n,i)):(n.removeAttribute("aria-posinset"),n.removeAttribute("aria-setsize"),n.hidden=!0,n.selected=!1),n.id=this.listId+"-option-"+o,e.push(n.id)})),this.optionIds=e}))}manageCanOpen(){this.canOpen=!(!this.actvOptEles.length&&!this.hasNoResult)}manageDropdownDisplay(){this.shouldOpen&&this.canOpen&&!this.disabled&&(this.open=!0),this.shouldOpen&&this.canOpen||(this.open=!1),this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,i){t&&(t.selected=!(i!==t.value&&!this.selected.includes(t.value)))}get dropwdownOpen(){return!(!this.nanoDropdown||!this.open)}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let i;if(this.selected.includes(t.value)?(this.selected=this.selected.filter((i=>i!==t.value)),i=this.nanoDeselect.emit(t)):(this.selected=[...this.selected],i=this.nanoSelect.emit(t)),!i.defaultPrevented){this.connectedInput&&(this.connectedInput.value=t.value);const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}optSelected=t=>{t.stopPropagation(),this.changeInputValue(t.detail),requestAnimationFrame((()=>this.inputChange())),"selectMulti"!==this.type&&(this.shouldOpen=!1)};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect,i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));i&&this.changeInputValue(i)}removeEventListeners(t){const i=t.closest(s("nano-input"));i&&i.removeEventListener("nanoChange",this.inputChange),t.removeEventListener("change",this.inputChange),t.removeEventListener("click",this.inputClick),t.removeEventListener("keydown",this.inputKeydown),t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(s("nano-option"))),this.hasNoResult=!!this.host.querySelector('[slot="no-result"]'),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=this.allOptEles}))}handleShow=async()=>{this.shouldFocus?(this.shouldFocus=!1,this.listBox.setFocus()):"select"===this.type&&this.listBox.showActiveElement()};handleHide=()=>{this.open=!1,r().closest(this.host.tagName.toLowerCase())&&this.connectedInput.select()};inputChange(){if(!this.connectedInput)return;if(this.disableFilter)return void(this.actvOptEles=this.allOptEles);const t=this.connectedInput?.value,i=t.trim().toLowerCase();let e=!1;const n=[],o=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{t!==i.value&&t!==i.label||"selectMulti"===this.type?this.isSelected(i,t):(i.selected=!0,e=!0)})),this.allOptEles.forEach((t=>{(!i.length||e||t.value.trim().length>0&&!t.disabled&&(o(t.textContent)||o(t.value)||o(t.label)||o(t.filterMeta)))&&n.push(t)})),this.isFiltered=i.length&&!e,this.actvOptEles=n}inputClick=()=>{this.open||(this.shouldOpen=!0,this.manageDropdownDisplay())};inputKeydown=t=>{["Shift","ArrowRight","ArrowLeft","Escape","Tab"].includes(t.key)?"Tab"===t.key&&(this.shouldOpen=!1):"select"!==this.type||["ArrowDown","ArrowUp","Enter"].includes(t.key)||" "===t.key&&!this.typeToSelectTimeout?this.open&&["ArrowDown","ArrowUp"].includes(t.key)?this.listBox.setFocus():(this.shouldOpen=!0,this.manageDropdownDisplay(),["ArrowDown","ArrowUp","Enter"].includes(t.key)&&(t.preventDefault(),this.shouldFocus=!0)):(" "===t.key||/^[a-zA0-9]+$/i.test(t.key))&&(clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="",this.typeToSelectTimeout=0}),750),this.typeToSelect+=t.key,this.setOptStartsWith())};optionKeyDown=t=>{["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "].includes(t.key)?"Escape"===t.key&&this.connectedInput.focus():"select"===this.type||this.exactMatch&&!["Delete","Backspace"].includes(t.key)||this.connectedInput.focus()};connectedCallback(){this.watchInputChange(),this.handleOptionsChange()}componentDidLoad(){this.openWatcher()}componentDidRender(){setTimeout((()=>{!this.connectedInput&&this.host.isConnected&&console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.connectedInput&&(this.connectedInput=void 0)}render(){return a(o,{key:"2e64e78b3582d1c7198f55425f87c115a597beb1",class:"nano-datalist",role:this.actvOptEles.length?"listbox":void 0,"aria-owns":this.optionIds.length?this.optionIds.join(" "):void 0,"aria-label":this.optionIds.length?"Select options from the list below":void 0},a("nano-dropdown",{key:"3596eb7b1364fb13a8ca137ce846223508ca0775",part:"dropdown",exportparts:"trigger:dropdown__trigger, panel:dropdown__panel",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:!0,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"473e5fff336a3b8d2c0d52fbb85b7bce88cdaff2",part:"main-menu",ref:t=>this.listBox=t,hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:void 0,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown},a("slot",{key:"572df9989a0ea9b70918a79f73084080d0adf975",name:"list-top"}),a("slot",{key:"0cdebdc62aa2aee8ca169aa71ee770310773edc7"}),a("slot",{key:"f694eae7a6312f8220d7eddb5367830836130c5c",name:"internal-opts"}),a("slot",{key:"f6f4b2a0c7401799db21f85b14e76a81b43ff751",name:"list-bottom"})),a("nano-menu",{key:"a7c487506e3a69eb65d60382a1c903196715f2a7",part:"no-result-menu",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"bfadcf697f2c9a76acd7ea557c87022d341d9c48",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"57d347cd46afb73739d100feb35ecad36b48640f",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],disabled:["watchTypeChange"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};c.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{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-text-default);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";let p=0;const u=class{optId="nano-option-"+p++;get host(){return t(this)}constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.handleClick=h(this.handleClick.bind(this),5)}value="";valueChanged(){this.value&&this.value.length||this.label||(this.value=this.labelContent)}label="";labelChanged(){this.label&&this.label.length||(this.label=this.labelContent.length?this.labelContent:this.value)}selected=!1;disabled=!1;filterMeta="";href;nanoSelect;handleKeyDown(t){this.disabled||this.href||("Enter"===t.key&&this.nanoSelect.emit(this.host)," "===t.key&&t.preventDefault())}handleClick(){this.disabled||this.href||this.nanoSelect.emit(this.host)}get labelContent(){return d(this.host,"*:not([slot])",!1).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged(),this.labelChanged()}render(){return a(o,{key:"193c0fa2c765f3bed98dd18261c615c3171c97d4",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a(this.href?"a":"div",{key:"0a6c64fbec219970a4bd7d28e177176cf36b9d27",href:this.href||void 0,onMouseDown:this.handleClick,id:this.optId,class:{option:!0,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"6e6aceb3acd0b854562b0de41b905b013f5ea71c",part:"check-icon",class:"option__check"},a("slot",{key:"82770c1ddc501f2d8dde42c14827fd596fd30172",name:"check-icon"},a("nano-icon",{key:"a25365aa49a3694fa1c956f5645e48fe904c4e19",name:"light/check","aria-hidden":"true"}))),a("div",{key:"9f3c3d2ed11af90a0bfa658849fbc8b12545c7c6",part:"start",class:"option__start"},a("slot",{key:"194a2647aeaeeac8d8268e1386dba7feabb16d40",name:"start"})),a("div",{key:"4eb3a838d9510432b5614e0de0e958b45d132cc5",part:"label",class:"option__label"},a("slot",{key:"6db178c30cd08c9a15ed6c5996d263da86d28285"},this.label||this.value)),a("div",{key:"aac32437be089e438b419545d2659778de1119f2",part:"end",class:"option__end"},a("slot",{key:"c108eff1c579522f4ead3e2fc157930bc329ceb2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};u.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{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-fill-primary);--bg-disabled:none;--color:var(--nano-color-text-default);--color-selected:var(--nano-color-text-primary);--color-focus:var(--nano-color-basic-white);--color-disabled:var(--nano-color-fill-neutral-weak);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const b=class{constructor(t){i(this,t),this.nanoClose=e(this,"nanoClose",7)}closable=!1;size="regular";selected=!1;get el(){return t(this)}nanoClose;onKeyDown=t=>{switch(t.key){case"Enter":case" ":t.preventDefault(),this.close()}};handleClick=()=>{this.close()};close(){this.nanoClose.emit()}containsAnchor=()=>!!this.el.querySelector("a");render(){return this.closable&&!this.containsAnchor()?[a("slot",null),a("nano-icon-button",{label:"Close","icon-name":"light/xmark-large",onKeyDown:this.onKeyDown,onClick:this.handleClick})]:a("slot",null)}};b.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}}";export{c as nano_datalist,u as nano_option,b as nano_tag}
|
|
4
|
+
import{a as t,r as i,c as e,e as n,d as o}from"./index-RXFO3HxS.js";import{t as s,h as a}from"./renderer-B_wACs4w.js";import{g as r}from"./active-element-CKJIkX0R.js";import{d as h}from"./throttle-C93FMm2Z.js";import{g as l}from"./dom-DiLhOqyz.js";let d=0;const c=class{isNanoInput=!1;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId="nano-datalist-"+d++;isFiltered=!1;shouldFocus=!1;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t,this.connectedInput?.value||t.forEach((t=>{t.selected&&!this.selected.includes(t.value)&&this.changeInputValue(t)}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=!0;optionIds=[];constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.nanoDeselect=e(this,"nanoDeselect",7),this.nanoOptionsUpdated=e(this,"nanoOptionsUpdated",7),this.inputChange=h(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=!1;openWatcher(){n((()=>{if(this.open&&this.nanoDropdown.tetherTo){const{height:t,top:i}=this.nanoDropdown.tetherTo.getBoundingClientRect();this.nanoDropdown.style.setProperty("--max-height",`max(${window.innerHeight-(t+i+40)}px, 48vw)`)}this.nanoDropdown&&(this.nanoDropdown.open=this.open),this.connectedInput&&this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=!1;disabled=!1;async watchInputChange(){let t;(t=this.host.closest(s("nano-input")))?(this.isNanoInput=!0,this.connectedInput=await t.getInputElement()):this.input&&"string"==typeof this.input&&(t=document.querySelector(this.input))?(this.isNanoInput=!1,this.connectedInput=t):"object"==typeof this.input&&(this.connectedInput=this.input)}handleOptionsChange(){if(this.host)if(l(this.host,":not(nano-nav-item):not(nano-option):not([role])",!0).forEach((t=>t.setAttribute("role","none"))),this.options&&this.options.length||this.mo){if(this.options?.length){this.mo&&(this.mo.disconnect(),this.mo=void 0);const t=this.host.querySelectorAll(s("nano-option"));n((()=>{t?.length&&t.forEach((t=>t.remove())),this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const e=Object.assign(document.createElement(s("nano-option")),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});return this.host.append(e),e}})),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=[...this.allOptEles]}))}}else(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0}),this.processSlottedContent()}watchTypeChange(){if(!this.connectedInput||this.disabled)return;let t={closeOnSelect:!1},i="both",e=!1;switch(this.type){case"input":t={closeOnSelect:!0};break;case"select":i="list",e=!0,t={closeOnSelect:!0}}this.isNanoInput||(t.tetherTo=this.connectedInput),this.dropDownConfig={...this.dropDownConfig,...t},this.connectedInput.setAttribute("aria-autocomplete",i),this.connectedInput.readOnly=e}manageInputEvents(t,i){if(i){const t=i.closest(s("nano-input"));t&&t.removeEventListener("nanoChange",this.inputChange),this.removeEventListeners(i),this.inputLabel=null,n((()=>{i.removeAttribute("role"),i.removeAttribute("aria-expanded"),i.removeAttribute("aria-controls"),i.removeAttribute("aria-owns"),i.removeAttribute("aria-haspopup"),i.removeAttribute("aria-autocomplete"),i.removeAttribute("autocomplete")}))}if(t){const i=t.closest(s("nano-input"));i&&i.addEventListener("nanoChange",this.inputChange),t.addEventListener("change",this.inputChange),t.addEventListener("click",this.inputClick),t.addEventListener("keydown",this.inputKeydown),t.addEventListener("input",this.inputChange),this.listId=this.host.id||this.listId,this.inputLabel=t?.labels?.item(0)||function(t){let i;return t.id&&(i=document.querySelector(`label[for='${t.id}']`)),i||(i=t.closest("label")),i}(t),n((()=>{this.host.id=this.listId,t.setAttribute("role","combobox"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",this.listId),t.setAttribute("aria-owns",this.listId),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const i=this.connectedInput?.value||"",e=[];n((()=>{this.allOptEles.forEach(((n,o)=>{this.actvOptEles.includes(n)?(t++,n.setAttribute("aria-posinset",t+""),n.setAttribute("aria-setsize",this.actvOptEles.length+""),n.hidden=!1,this.isSelected(n,i)):(n.removeAttribute("aria-posinset"),n.removeAttribute("aria-setsize"),n.hidden=!0,n.selected=!1),n.id=this.listId+"-option-"+o,e.push(n.id)})),this.optionIds=e}))}manageCanOpen(){this.canOpen=!(!this.actvOptEles.length&&!this.hasNoResult)}manageDropdownDisplay(){this.shouldOpen&&this.canOpen&&!this.disabled&&(this.open=!0),this.shouldOpen&&this.canOpen||(this.open=!1),this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,i){t&&(t.selected=!(i!==t.value&&!this.selected.includes(t.value)))}get dropwdownOpen(){return!(!this.nanoDropdown||!this.open)}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let i;if(this.selected.includes(t.value)?(this.selected=this.selected.filter((i=>i!==t.value)),i=this.nanoDeselect.emit(t)):(this.selected=[...this.selected],i=this.nanoSelect.emit(t)),!i.defaultPrevented){this.connectedInput&&(this.connectedInput.value=t.value);const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}optSelected=t=>{t.stopPropagation(),this.changeInputValue(t.detail),requestAnimationFrame((()=>this.inputChange())),"selectMulti"!==this.type&&(this.shouldOpen=!1)};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect,i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));i&&this.changeInputValue(i)}removeEventListeners(t){const i=t.closest(s("nano-input"));i&&i.removeEventListener("nanoChange",this.inputChange),t.removeEventListener("change",this.inputChange),t.removeEventListener("click",this.inputClick),t.removeEventListener("keydown",this.inputKeydown),t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(s("nano-option"))),this.hasNoResult=!!this.host.querySelector('[slot="no-result"]'),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=this.allOptEles}))}handleShow=async()=>{this.shouldFocus?(this.shouldFocus=!1,this.listBox.setFocus()):"select"===this.type&&this.listBox.showActiveElement()};handleHide=()=>{this.open=!1,r().closest(this.host.tagName.toLowerCase())&&this.connectedInput.select()};inputChange(){if(!this.connectedInput)return;if(this.disableFilter)return void(this.actvOptEles=this.allOptEles);const t=this.connectedInput?.value,i=t.trim().toLowerCase();let e=!1;const n=[],o=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{t!==i.value&&t!==i.label||"selectMulti"===this.type?this.isSelected(i,t):(i.selected=!0,e=!0)})),this.allOptEles.forEach((t=>{(!i.length||e||t.value.trim().length>0&&!t.disabled&&(o(t.textContent)||o(t.value)||o(t.label)||o(t.filterMeta)))&&n.push(t)})),this.isFiltered=i.length&&!e,this.actvOptEles=n}inputClick=()=>{this.open||(this.shouldOpen=!0,this.manageDropdownDisplay())};inputKeydown=t=>{if(["Shift","ArrowRight","ArrowLeft","Escape","Tab"].includes(t.key))"Tab"===t.key&&(this.shouldOpen=!1);else if("select"!==this.type||["ArrowDown","ArrowUp","Enter"].includes(t.key)||" "===t.key&&!this.typeToSelectTimeout)if(this.open&&["ArrowDown","ArrowUp"].includes(t.key))this.listBox.setFocus();else{if("select"===this.type&&this.open&&"Enter"===t.key)return t.preventDefault(),this.shouldOpen=!1,void this.manageDropdownDisplay();this.shouldOpen=!0,this.manageDropdownDisplay(),["ArrowDown","ArrowUp","Enter"].includes(t.key)&&(t.preventDefault(),this.shouldFocus=!0)}else(" "===t.key||/^[a-zA0-9]+$/i.test(t.key))&&(clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="",this.typeToSelectTimeout=0}),750),this.typeToSelect+=t.key,this.setOptStartsWith())};optionKeyDown=t=>{["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "].includes(t.key)?"Escape"===t.key&&this.connectedInput.focus():"select"===this.type||this.exactMatch&&!["Delete","Backspace"].includes(t.key)||this.connectedInput.focus()};connectedCallback(){this.watchInputChange(),this.handleOptionsChange()}componentDidLoad(){this.openWatcher()}componentDidRender(){setTimeout((()=>{!this.connectedInput&&this.host.isConnected&&console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.connectedInput&&(this.connectedInput=void 0)}render(){return a(o,{key:"1fff00ce17443af0cc012034202f5b9534c3eb8e",class:"nano-datalist",role:this.actvOptEles.length?"listbox":void 0,"aria-owns":this.optionIds.length?this.optionIds.join(" "):void 0,"aria-label":this.optionIds.length?"Select options from the list below":void 0},a("nano-dropdown",{key:"aa52b8a9e448a27b572b533c8a66b582fc631b74",part:"dropdown",exportparts:"trigger:dropdown__trigger, panel:dropdown__panel",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:!0,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"cefe1e472c018fcf612ea6d30e0a591f0dbfad70",part:"main-menu",ref:t=>this.listBox=t,hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:void 0,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown},a("slot",{key:"75b377c49d3b3e0f172135e0d705dfe92bcac5aa",name:"list-top"}),a("slot",{key:"d89f6cf631fc6faeddf447be926339c85649ff93"}),a("slot",{key:"782d7373362170ba28647c1302746ee1ae606f87",name:"internal-opts"}),a("slot",{key:"e3cf0d800b7219bdce24259eed1134f01349b40c",name:"list-bottom"})),a("nano-menu",{key:"e9aafef02fe4d3157629840451da1ff0110a9b8d",part:"no-result-menu",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"89aaba1550af0b0a273179bf16a31904840552d4",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],disabled:["watchTypeChange"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};c.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{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-text-default);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";let p=0;const u=class{optId="nano-option-"+p++;get host(){return t(this)}constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.handleClick=h(this.handleClick.bind(this),5)}value="";valueChanged(){this.value&&this.value.length||this.label||(this.value=this.labelContent)}label="";labelChanged(){this.label&&this.label.length||(this.label=this.labelContent.length?this.labelContent:this.value)}selected=!1;disabled=!1;filterMeta="";href;nanoSelect;handleKeyDown(t){this.disabled||this.href||("Enter"===t.key&&this.nanoSelect.emit(this.host)," "===t.key&&t.preventDefault())}handleClick(){this.disabled||this.href||this.nanoSelect.emit(this.host)}get labelContent(){return l(this.host,"*:not([slot])",!1).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged(),this.labelChanged()}render(){return a(o,{key:"193c0fa2c765f3bed98dd18261c615c3171c97d4",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a(this.href?"a":"div",{key:"0a6c64fbec219970a4bd7d28e177176cf36b9d27",href:this.href||void 0,onMouseDown:this.handleClick,id:this.optId,class:{option:!0,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"6e6aceb3acd0b854562b0de41b905b013f5ea71c",part:"check-icon",class:"option__check"},a("slot",{key:"82770c1ddc501f2d8dde42c14827fd596fd30172",name:"check-icon"},a("nano-icon",{key:"a25365aa49a3694fa1c956f5645e48fe904c4e19",name:"light/check","aria-hidden":"true"}))),a("div",{key:"9f3c3d2ed11af90a0bfa658849fbc8b12545c7c6",part:"start",class:"option__start"},a("slot",{key:"194a2647aeaeeac8d8268e1386dba7feabb16d40",name:"start"})),a("div",{key:"4eb3a838d9510432b5614e0de0e958b45d132cc5",part:"label",class:"option__label"},a("slot",{key:"6db178c30cd08c9a15ed6c5996d263da86d28285"},this.label||this.value)),a("div",{key:"aac32437be089e438b419545d2659778de1119f2",part:"end",class:"option__end"},a("slot",{key:"c108eff1c579522f4ead3e2fc157930bc329ceb2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};u.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{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-fill-primary);--bg-disabled:none;--color:var(--nano-color-text-default);--color-selected:var(--nano-color-text-primary);--color-focus:var(--nano-color-basic-white);--color-disabled:var(--nano-color-fill-neutral-weak);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const f=class{constructor(t){i(this,t),this.nanoClose=e(this,"nanoClose",7)}closable=!1;size="regular";selected=!1;get el(){return t(this)}nanoClose;onKeyDown=t=>{switch(t.key){case"Enter":case" ":t.preventDefault(),this.close()}};handleClick=()=>{this.close()};close(){this.nanoClose.emit()}containsAnchor=()=>!!this.el.querySelector("a");render(){return this.closable&&!this.containsAnchor()?[a("slot",null),a("nano-icon-button",{label:"Close","icon-name":"light/xmark-large",onKeyDown:this.onKeyDown,onClick:this.handleClick})]:a("slot",null)}};f.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}}";export{c as nano_datalist,u as nano_option,f as nano_tag}
|
package/docs-json.json
CHANGED
package/hydrate/index.js
CHANGED
|
@@ -9476,6 +9476,14 @@ class DataList {
|
|
|
9476
9476
|
this.listBox.setFocus();
|
|
9477
9477
|
return;
|
|
9478
9478
|
}
|
|
9479
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
9480
|
+
// (type-to-select) value - already applied - and closes
|
|
9481
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
9482
|
+
e.preventDefault();
|
|
9483
|
+
this.shouldOpen = false;
|
|
9484
|
+
this.manageDropdownDisplay();
|
|
9485
|
+
return;
|
|
9486
|
+
}
|
|
9479
9487
|
this.shouldOpen = true;
|
|
9480
9488
|
// open dropdown if possible
|
|
9481
9489
|
this.manageDropdownDisplay();
|
|
@@ -9537,18 +9545,18 @@ class DataList {
|
|
|
9537
9545
|
}
|
|
9538
9546
|
}
|
|
9539
9547
|
render() {
|
|
9540
|
-
return (h(Host, { key: '
|
|
9548
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
9541
9549
|
? 'Select options from the list below'
|
|
9542
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
9550
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
9543
9551
|
dlist__dropdown: true,
|
|
9544
9552
|
'dlist--isfiltered': this.isFiltered,
|
|
9545
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
9553
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
9546
9554
|
dlist__menu: true,
|
|
9547
9555
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9548
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
9556
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
9549
9557
|
dlist__menu: true,
|
|
9550
9558
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9551
|
-
} }, h("slot", { key: '
|
|
9559
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
9552
9560
|
}
|
|
9553
9561
|
static get watchers() { return {
|
|
9554
9562
|
"open": ["openWatcher"],
|
package/hydrate/index.mjs
CHANGED
|
@@ -9474,6 +9474,14 @@ class DataList {
|
|
|
9474
9474
|
this.listBox.setFocus();
|
|
9475
9475
|
return;
|
|
9476
9476
|
}
|
|
9477
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
9478
|
+
// (type-to-select) value - already applied - and closes
|
|
9479
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
9480
|
+
e.preventDefault();
|
|
9481
|
+
this.shouldOpen = false;
|
|
9482
|
+
this.manageDropdownDisplay();
|
|
9483
|
+
return;
|
|
9484
|
+
}
|
|
9477
9485
|
this.shouldOpen = true;
|
|
9478
9486
|
// open dropdown if possible
|
|
9479
9487
|
this.manageDropdownDisplay();
|
|
@@ -9535,18 +9543,18 @@ class DataList {
|
|
|
9535
9543
|
}
|
|
9536
9544
|
}
|
|
9537
9545
|
render() {
|
|
9538
|
-
return (h(Host, { key: '
|
|
9546
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
9539
9547
|
? 'Select options from the list below'
|
|
9540
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
9548
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
9541
9549
|
dlist__dropdown: true,
|
|
9542
9550
|
'dlist--isfiltered': this.isFiltered,
|
|
9543
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
9551
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
9544
9552
|
dlist__menu: true,
|
|
9545
9553
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9546
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
9554
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
9547
9555
|
dlist__menu: true,
|
|
9548
9556
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9549
|
-
} }, h("slot", { key: '
|
|
9557
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
9550
9558
|
}
|
|
9551
9559
|
static get watchers() { return {
|
|
9552
9560
|
"open": ["openWatcher"],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanoporetech-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.8",
|
|
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.8"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@algolia/client-search": "^4.22.1",
|