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

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{f as KolLinkWcTag,e as KolIconTag,x as KolTreeTag}from"./component-names.js";import{c as watchBoolean}from"./common.js";import{v as validateHref}from"./href.js";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{n as nonce}from"./dev.utils.js";const validateActive=(e,t,a)=>{watchBoolean(e,"_active",t,a)},KolTreeItemWc$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.groupId=`tree-group-${nonce()}`,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1}}render(){const{_href:e,_active:t,_hasChildren:a,_open:l,_label:i}=this.state;return h(Host,{key:"e99bc051fe9fe90cd4a5aaf861d61d0d512c808a",onSlotchange:this.handleSlotchange.bind(this)},h("li",{key:"e0ae86b656eab778f80852a40dd84cda832695a9",class:"kol-tree-item",style:{"--level":`${this.level}`}},h(KolLinkWcTag,{key:"3ffea17f30ab8e461e936d691d7fd4389f04bf2c",class:clsx("kol-tree-item__link",{"kol-tree-item__link--first-level":0===this.level,"kol-tree-item__link--active":t}),_href:e,_label:"",_role:"treeitem",_tabIndex:t?0:-1,_ariaExpanded:a?l:void 0,_ariaOwns:a?this.groupId:void 0,ref:e=>this.linkElement=e},h("span",{key:"dfd6fa644efe7efe4700ec74a5f1c50e82262494",class:"kol-tree-item__link-inner",slot:"expert"},a?h("span",{class:"kol-tree-item__toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},h(KolIconTag,{class:"kol-tree-item__toggle-button-icon",_icons:"kolicon kolicon-"+(l?"chevron-down":"chevron-right"),_label:""})):h("span",{class:"kol-tree-item__toggle-button-placeholder"}),h("span",{key:"ef4714af7a6a63c447b3df2647dc605d5c9693b9",class:"kol-tree-item__text"},i))),h("ul",{key:"34f5c43c0d6b3ecc0d78d6eb2101aa451e5d1cb2",class:"kol-tree-item__children",hidden:!a||!l,role:"group",id:this.groupId},h("slot",{key:"1ef6c1855acdebee823d68f7d0849fcd79d5d558"}))))}validateActive(e){validateActive(this,e||!1)}validateLabel(e){validateLabel(this,e)}validateOpen(e){validateOpen(this,e)}validateHref(e){validateHref(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren(),this.determineTreeItemDepth()}determineTreeItemDepth(){let e=0,t=this.host.parentNode.host.parentNode;for(;null!==t&&t.tagName.toLowerCase()!==KolTreeTag&&t!==document.body;)t=t.parentElement,e+=1;this.level=e}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements)||void 0===t?void 0:t.call(e).length)})}async focus(){var e;return Promise.resolve(null===(e=this.linkElement)||void 0===e?void 0:e.focus())}async handleExpandClick(e){var t;e.preventDefault(),await(null===(t=this.linkElement)||void 0===t?void 0:t.focus()),await this.expand()}async expand(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}async handleCollapseClick(e){var t;e.preventDefault(),await(null===(t=this.linkElement)||void 0===t?void 0:t.focus()),await this.collapse()}async collapse(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}async isOpen(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}get host(){return this}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}},[260,"kol-tree-item-wc",{_active:[4],_label:[1],_open:[4],_href:[1],level:[32],state:[32],focus:[64],expand:[64],collapse:[64],isOpen:[64]},void 0,{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item-wc"].forEach(e=>{if("kol-tree-item-wc"===e)customElements.get(e)||customElements.define(e,KolTreeItemWc$1)})}const KolTreeItemWc=KolTreeItemWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeItemWc,defineCustomElement};