@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 e,h as t,H as i,g as a}from"./index-Biu4X4Y_.js";import{y as o,x as s}from"./component-names-C3fyby67.js";import"./common-Dd0zJQbD.js";import{v as n}from"./label-Dnmzb2S_.js";const l=class{constructor(t){e(this,t),this.state={_label:""}}validateLabel(e){n(this,e)}render(){return t(i,{key:"c491bc228b1db3a9707ee892a6c307ce675bde4e",onSlotchange:this.handleSlotchange.bind(this)},t("nav",{key:"50bbc945f1302a0ddd8376076e61823a0b123aa3",class:"kol-tree","aria-label":this.state._label},t("ul",{key:"3d915f2ef9fe71b126b2778cc093e91a7907f010",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},t("slot",{key:"a97a01e4eb25a47c667531d99db716d47e404779"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===o.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach(e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})})}getTopLevelTreeItems(){var e,t,a;return null===(a=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===a?void 0:a.filter(l.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce((e,t)=>{const a=t.querySelectorAll(o);return[...e,t,...a]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const e=async t=>!l.isTreeItem(t.parentElement)||await t.parentElement.isOpen()&&await e(t.parentElement);return(await Promise.all(this.treeItemElements.map(async t=>({value:t,include:await e(t)})))).filter(e=>e.include).map(e=>e.value)}async handleKeyDown(e){var t,a,i,l,s,n,r,c,d;const v=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(o),h=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!v||!u)return;const m=null==v?void 0:v.findIndex(e=>e===u);switch(e.key){case"ArrowDown":await(null===(a=v[m+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(i=v[m-1])||void 0===i?void 0:i.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(l=v[m+1])||void 0===l?void 0:l.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=v.findIndex(e=>e===u.parentElement);-1!==e&&await(null===(s=v[e])||void 0===s?void 0:s.focusLink())}break;case"Home":await(null===(n=v[0])||void 0===n?void 0:n.focusLink()),e.preventDefault();break;case"End":await(null===(r=v[v.length-1])||void 0===r?void 0:r.focusLink()),e.preventDefault();break;case null===(c=e.key.match(/^[a-zA-Z0-9]$/))||void 0===c?void 0:c.input:if(!h){const t=e.key.toLowerCase(),a=v.indexOf(u)+1,i=v.concat(v),l=i.slice(a,a+v.length).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)});-1!==l&&(await i[a+l].focusLink(),e.preventDefault())}break;case"*":{const e=null===(d=u.parentElement)||void 0===d?void 0:d.querySelectorAll(o);null==e||e.forEach(e=>{e.expand()});break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(s)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const e=t=>{l.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,a,i;const s=null!==(i=null===(a=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===a?void 0:a.filter(l.isTreeItem))&&void 0!==i?i:[];for(const e of s){if(e._active)return e;const t=e.querySelector(`${o}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}get host(){return a(this)}static get watchers(){return{_label:["validateLabel"]}}};export{l as kol_tree_wc};