@public-ui/components/dist/kolibri/kol-tree-wc.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{r as i,h as e,H as t,g as a}from"./index-BQlHOxik.js";import{v as s,u as o}from"./component-names-Dy77vq43.js";import"./common-Cx_AGO_M.js";import{v as n}from"./label-Fyi30H9j.js";const l=class{constructor(e){i(this,e);this.state={_label:""};this.cacheValid=false}validateLabel(i){n(this,i)}async focus(){var i;const e=await this.getOpenTreeItemElements();await((i=e===null||e===void 0?void 0:e[0])===null||i===void 0?void 0:i.focus())}async invalidateOpenItemsCache(){await Promise.resolve(this.cacheValid=false)}render(){return e(t,{key:"a788072549f6998bb11036a8d4b6fdb86ecc589b",onSlotchange:this.handleSlotchange.bind(this)},e("nav",{key:"655f5ab41e487c1351df3526e8cfe9880787247a",class:"kol-tree","aria-label":this.state._label},e("ul",{key:"a11bb5d15793e011bb53df02a6ee9627d6060b4e",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},e("slot",{key:"c861df068ff6bfff14c5a5262d3f718db3b7da85"}))))}static isTreeItem(i){return(i===null||i===void 0?void 0:i.tagName)===s.toUpperCase()}componentWillLoad(){this.validateLabel(this._label);this.handleTreeChange();this.observeChildListMutations()}disconnectedCallback(){var i;(i=this.observer)===null||i===void 0?void 0:i.disconnect();if(this.rafHandle!==undefined){cancelAnimationFrame(this.rafHandle);this.rafHandle=undefined}}observeChildListMutations(){this.observer=new MutationObserver((()=>this.scheduleTreeChange()));this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems();this.scheduleTreeChange()}observeTopLevelItems(){var i;(i=this.getTopLevelTreeItems())===null||i===void 0?void 0:i.forEach((i=>{var e;(e=this.observer)===null||e===void 0?void 0:e.observe(i,{childList:true,subtree:true})}))}scheduleTreeChange(){if(this.rafHandle)cancelAnimationFrame(this.rafHandle);this.rafHandle=requestAnimationFrame((()=>{this.handleTreeChange()}))}getTopLevelTreeItems(){var i,e,t,a;return(a=(t=(e=(i=this.host)===null||i===void 0?void 0:i.querySelector("slot"))===null||e===void 0?void 0:e.assignedNodes)===null||t===void 0?void 0:t.call(e))===null||a===void 0?void 0:a.filter(l.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements();this.cacheValid=false;void this.ensureActiveItemVisibility()}getTreeItemElements(){var i;return(i=this.getTopLevelTreeItems())===null||i===void 0?void 0:i.reduce(((i,e)=>{const t=e.querySelectorAll(s);return[...i,e,...t]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements){return}if(this.cacheValid&&this.cachedOpenItems){return this.cachedOpenItems}const i=async i=>{let e=i.parentElement;while(e&&l.isTreeItem(e)){if(!await e.isOpen()){return false}e=e.parentElement}return true};this.cachedOpenItems=await Promise.all(this.treeItemElements.map((async e=>({item:e,isOpen:await i(e)})))).then((i=>i.filter((({isOpen:i})=>i)).map((({item:i})=>i))));this.cacheValid=true;return this.cachedOpenItems}async handleKeyDown(i){var e,t,a,o,n,l,r,d,v,c;const u=await this.getOpenTreeItemElements();const h=(e=document.activeElement)===null||e===void 0?void 0:e.closest(s);const f=i.metaKey||i.altKey||i.ctrlKey||i.shiftKey;if(!u||!h){return}const b=u===null||u===void 0?void 0:u.findIndex((i=>i===h));switch(i.key){case"ArrowDown":{await((t=u[b+1])===null||t===void 0?void 0:t.focus());i.preventDefault();break}case"ArrowUp":{await((a=u[b-1])===null||a===void 0?void 0:a.focus());i.preventDefault();break}case"Right":case"ArrowRight":{i.preventDefault();if(await h.isOpen()){await((o=u[b+1])===null||o===void 0?void 0:o.focus())}else{await h.expand()}break}case"Left":case"ArrowLeft":{i.preventDefault();if(await h.isOpen()){await h.collapse()}else{const i=h.parentElement;const e=i?u.indexOf(i):-1;if(e!==-1){await((n=u[e])===null||n===void 0?void 0:n.focus())}}break}case"Home":{await((l=u[0])===null||l===void 0?void 0:l.focus());i.preventDefault();break}case"End":{await((r=u[u.length-1])===null||r===void 0?void 0:r.focus());i.preventDefault();break}case(d=i.key.match(/^[a-zA-Z0-9]$/))===null||d===void 0?void 0:d.input:{if(!f){const e=i.key.toLowerCase();const t=u.indexOf(h)+1;let a=u.slice(t).findIndex((i=>{var t;return(t=i.getAttribute("_label"))===null||t===void 0?void 0:t.trim().toLowerCase().startsWith(e)}));if(a===-1){a=u.slice(0,t).findIndex((i=>{var t;return(t=i.getAttribute("_label"))===null||t===void 0?void 0:t.trim().toLowerCase().startsWith(e)}))}else{a+=t}if(a!==-1){await((v=u[a])===null||v===void 0?void 0:v.focus());i.preventDefault()}}break}case"*":{const i=(c=h.parentElement)===null||c===void 0?void 0:c.querySelectorAll(s);i===null||i===void 0?void 0:i.forEach((i=>{void i.expand()}));break}}}handleFocusIn(i){var e;if(i.target===this.host&&!((e=document.activeElement)===null||e===void 0?void 0:e.closest(s))){requestAnimationFrame((()=>{void this.focus()}))}}handleFocusOut(i){if(i.relatedTarget&&!i.relatedTarget.closest(o)){this.ensureActiveItemVisibility()}}ensureActiveItemVisibility(){const i=()=>{var i,e,t,a,o;const n=(o=(a=(t=(e=(i=this.host)===null||i===void 0?void 0:i.querySelector("slot"))===null||e===void 0?void 0:e.assignedNodes)===null||t===void 0?void 0:t.call(e))===null||a===void 0?void 0:a.filter(l.isTreeItem))!==null&&o!==void 0?o:[];for(const i of n){if(i._active){return i}const e=i.querySelector(`${s}[_active="true"]`);if(e&&e._active){return e}}};const e=i=>{if(l.isTreeItem(i.parentElement)){void i.parentElement.expand();e(i.parentElement)}};const t=i();if(t){e(t)}}get host(){return a(this)}static get watchers(){return{_label:["validateLabel"]}}};export{l as kol_tree_wc};
//# sourceMappingURL=kol-tree-wc.entry.js.map