@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 4.6 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{r as registerInstance,h,H as Host,g as getElement}from"./index-1ed13705.js";import"./index-ebe5a881.js";import{x as KolTreeItemTag,w as KolTreeTag}from"./component-names-7924d82a.js";import{v as validateLabel}from"./label-bf9966d0.js";const KolTreeWc=class{constructor(e){registerInstance(this,e),this.state={_label:""},this._label=void 0}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"05d1fdf7fc5589847e2fdce7b3d307860721ccd2",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"b03ad56f3ce550d09d22efa04e23273588093034",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"7b7e4fc2e98037621beb67e6dcdd00f7072d3878",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"c6bd99309dd93b1eb88031533f17f25c0e9952c7"}))))}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,d;const c=await this.getOpenTreeItemElements(),v=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),u=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!c||!v)return;const h=null==c?void 0:c.findIndex((e=>e===v));switch(e.key){case"ArrowDown":await(null===(a=c[h+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(l=c[h-1])||void 0===l?void 0:l.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await v.isOpen()?await(null===(i=c[h+1])||void 0===i?void 0:i.focusLink()):await v.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await v.isOpen())await v.collapse();else{const e=c.findIndex((e=>e===v.parentElement));-1!==e&&await(null===(r=c[e])||void 0===r?void 0:r.focusLink())}break;case"Home":await(null===(s=c[0])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"End":await(null===(n=c[c.length-1])||void 0===n?void 0:n.focusLink()),e.preventDefault();break;case null===(o=e.key.match(/^[a-zA-Z0-9]$/))||void 0===o?void 0:o.input:if(!u){const t=e.key.toLowerCase(),a=c.indexOf(v)+1,l=c.concat(c),i=l.slice(a,a+c.length).findIndex((e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)}));-1!==i&&(await l[a+i].focusLink(),e.preventDefault())}break;case"*":{const e=null===(d=v.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};