@public-ui/components/dist/esm/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 registerInstance,h,H as Host,g as getElement}from"./index-DyUiyxj3.js";import{z as KolTreeItemTag,y as KolTreeTag}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";import{v as validateLabel}from"./label-Dkj9sxQK.js";const KolTreeWc=class{constructor(e){registerInstance(this,e),this.state={_label:""}}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"6e1fc1f0d6757fec0658d28ff54fe73a58b60fa9",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"dfc733503c12e36fc8e6fc958273555f4e698237",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"9c68ce61a9bfbe5ade976515eaa43e2d9fbf380d",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"db660a5bc5cb5544f2c35e9e14f2a61d6e06ac69"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===KolTreeItemTag.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(KolTreeWc.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(KolTreeItemTag);return[...e,t,...a]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const e=async t=>!KolTreeWc.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,l,i,r,s,n,o,c,d;const v=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),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.focus()),e.preventDefault();break;case"ArrowUp":await(null===(l=v[m-1])||void 0===l?void 0:l.focus()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(i=v[m+1])||void 0===i?void 0:i.focus()):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===(r=v[e])||void 0===r?void 0:r.focus())}break;case"Home":await(null===(s=v[0])||void 0===s?void 0:s.focus()),e.preventDefault();break;case"End":await(null===(n=v[v.length-1])||void 0===n?void 0:n.focus()),e.preventDefault();break;case null===(o=e.key.match(/^[a-zA-Z0-9]$/))||void 0===o?void 0:o.input:if(!h){const t=e.key.toLowerCase(),a=v.indexOf(u)+1,l=v.concat(v),i=l.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!==i&&(await(null===(c=l[a+i])||void 0===c?void 0:c.focus()),e.preventDefault())}break;case"*":{const e=null===(d=u.parentElement)||void 0===d?void 0:d.querySelectorAll(KolTreeItemTag);null==e||e.forEach(e=>{e.expand()});break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(KolTreeTag)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const e=t=>{KolTreeWc.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,a,l;const i=null!==(l=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(KolTreeWc.isTreeItem))&&void 0!==l?l:[];for(const e of i){if(e._active)return e;const t=e.querySelector(`${KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}get host(){return getElement(this)}static get watchers(){return{_label:["validateLabel"]}}};export{KolTreeWc as kol_tree_wc};