@public-ui/components 2.2.11-rc.1 → 3.0.0-023e727fba43bcd74fd9f7ce52558eee4a3aa906.0

package/dist/kolibri/kol-tree-item-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as t,H as s,g as i}from"./index-924e4118.js";import{j as a,g as l,x as n}from"./component-names-4cb1c62b.js";import{n as d}from"./dev.utils-ad6f5327.js";import{b as c}from"./prop.validators-17aec743.js";import{v as o}from"./label-90c13388.js";import{v as h}from"./open-4d9f16d0.js";import{v as r}from"./href-8bd5e6c9.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./index-6d801dad.js";const f=(e,t,a)=>{c(e,"_active",t,a)},b=class{constructor(t){e(this,t),this.groupId=`tree-group-${d()}`,this.level=void 0,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){const{_href:e,_active:i,_hasChildren:n,_open:o,_label:d}=this.state;return t(s,{key:"ceb601f2530ae6d55fe0a136905b084acb3a58c4",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},t("li",{key:"cf961136786ddbf84b69485240b2ad564fdd3344",class:"tree-item",style:{"--level":`${this.level}`}},t(a,{key:"6b2fef9321edbacad56337a59ff24e7f00faa02c",class:{"tree-link":!0,"first-level":0===this.level,active:Boolean(i)},_href:e,_label:"",_role:"treeitem",_tabIndex:i?0:-1,_ariaExpanded:n?o:void 0,_ariaOwns:n?this.groupId:void 0,ref:e=>this.linkElement=e},t("span",{key:"3d1e9682b93daf10ce9f39708af6ab3651e61fa5",class:"tree-link-inner",slot:"expert"},n?t("span",{class:"toggle-button",onClick:e=>o?void this.handleCollapseClick(e):void this.handleExpandClick(e)},t(l,{class:"toggle-button-icon",_icons:"codicon codicon-"+(o?"chevron-down":"chevron-right"),_label:""})):t("span",{class:"toggle-button-placeholder"}),t("span",{key:"3372295b8f1da04ce7d985d1c9d40188450d808f",class:"text"},d))),t("ul",{key:"c1d6ff3d02c3414cb2d9500c83c17b9869f9d637",hidden:!n||!o,role:"group",id:this.groupId},t("slot",{key:"254166f7813cd1cb26c15e5334e6688e02b85b87"}))))}validateActive(e){f(this,e||!1)}validateLabel(e){o(this,e)}validateOpen(e){h(this,e)}validateHref(e){r(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()!==n&&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 focusLink(){await this.linkElement.kolFocus()}async handleExpandClick(e){e.preventDefault(),await this.linkElement.kolFocus(),await this.expand()}async expand(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}async handleCollapseClick(e){e.preventDefault(),this.linkElement.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 i(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};export{b as kol_tree_item_wc};
+import{r as e,h as t,H as i,g as s}from"./index-25e8692e.js";import{f as a,d as l,w as n}from"./component-names-60d77143.js";import{n as o}from"./dev.utils-dab0acde.js";import{c}from"./clsx-09a06a12.js";import{b as r}from"./prop.validators-17aec743.js";import{v as d}from"./label-90c13388.js";import{v as h}from"./open-4d9f16d0.js";import{v as f}from"./href-8bd5e6c9.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./index-6d801dad.js";const _=(e,t,a)=>{r(e,"_active",t,a)},b=class{constructor(t){e(this,t),this.groupId=`tree-group-${o()}`,this.level=void 0,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){const{_href:e,_active:s,_hasChildren:o,_open:n,_label:r}=this.state;return t(i,{key:"1358f3b8f8c7ae14535f30e3c2ff1ef8ab6904b1",onSlotchange:this.handleSlotchange.bind(this)},t("li",{key:"d6271238a133cac44eb78bf8ed0b94a951135432",class:"kol-tree-item",style:{"--level":`${this.level}`}},t(a,{key:"329b9adc28bacf6742544123bc02fe82f2ceb9b5",class:c("kol-tree-item__link",{"kol-tree-item__link--first-level":0===this.level,"kol-tree-item__link--active":s}),_href:e,_label:"",_role:"treeitem",_tabIndex:s?0:-1,_ariaExpanded:o?n:void 0,_ariaOwns:o?this.groupId:void 0,ref:e=>this.linkElement=e},t("span",{key:"0292f071a8abfe0f9332ef4a8561149d38f804e2",class:"kol-tree-item__link-inner",slot:"expert"},o?t("span",{class:"kol-tree-item__toggle-button",onClick:e=>n?void this.handleCollapseClick(e):void this.handleExpandClick(e)},t(l,{class:"kol-tree-item__toggle-button-icon",_icons:"codicon codicon-"+(n?"chevron-down":"chevron-right"),_label:""})):t("span",{class:"kol-tree-item__toggle-button-placeholder"}),t("span",{key:"ed810a798a4e2ba38f848ce0c6fdfc3893c3c86d",class:"kol-tree-item__text"},r))),t("ul",{key:"0e8ea268f1c26f79e55d45bfeda91d230bc4789d",class:"kol-tree-item__children",hidden:!o||!n,role:"group",id:this.groupId},t("slot",{key:"a6509011c3fa851be4c6cace3aadf2b6d6bbfc7b"}))))}validateActive(e){_(this,e||!1)}validateLabel(e){d(this,e)}validateOpen(e){h(this,e)}validateHref(e){f(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()!==n&&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 focusLink(){await this.linkElement.kolFocus()}async handleExpandClick(e){e.preventDefault(),await this.linkElement.kolFocus(),await this.expand()}async expand(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}async handleCollapseClick(e){e.preventDefault(),this.linkElement.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 s(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};export{b as kol_tree_item_wc};

package/dist/kolibri/kol-tree-item-wc.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateActive","component","value","options","watchBoolean","KolTreeItemWc","this","groupId","nonce","_active","_hasChildren","_href","_label","_open","render","state","h","Host","key","onSlotchange","handleSlotchange","bind","class","style","level","KolLinkWcTag","active","Boolean","_role","_tabIndex","_ariaExpanded","undefined","_ariaOwns","ref","element","linkElement","slot","onClick","event","handleCollapseClick","handleExpandClick","KolIconTag","_icons","hidden","role","id","validateLabel","validateOpen","validateHref","componentWillLoad","checkForChildren","determineTreeItemDepth","traverseItem","host","parentNode","tagName","toLowerCase","KolTreeTag","document","body","parentElement","Object","assign","_b","_a","querySelector","assignedElements","call","length","focusLink","kolFocus","preventDefault","expand","focus","collapse","isOpen"],"sources":["src/schema/props/active.ts","src/components/tree-item/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ActivePropType = boolean;\n\n/**\n * Defines whether something is active.\n */\nexport type PropActive = {\n\tactive: ActivePropType;\n};\n\n/* validator */\nexport const validateActive = (component: Generic.Element.Component, value: ActivePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_active', value, options);\n};\n","import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement!: HTMLKolLinkWcElement;\n\tprivate groupId = `tree-group-${nonce()}`;\n\n\t@State() private level?: number;\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)} class=\"kol-tree-item-wc\">\n\t\t\t\t<li\n\t\t\t\t\tclass=\"tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'tree-link': true,\n\t\t\t\t\t\t\t'first-level': this.level === 0,\n\t\t\t\t\t\t\tactive: Boolean(_active),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"tree-link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span class=\"toggle-button\" onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}>\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\tclass=\"toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\t_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\t_label={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host.parentNode as unknown as ShadowRoot).host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\t@Method() async focusLink() {\n\t\tawait this.linkElement.kolFocus();\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.linkElement.kolFocus();\n\t\tawait this.expand();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.collapse();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateActive","component","value","options","watchBoolean","KolTreeItemWc","this","groupId","nonce","_active","_hasChildren","_href","_label","_open","render","state","h","Host","key","onSlotchange","handleSlotchange","bind","class","style","level","KolLinkWcTag","clsx","_role","_tabIndex","_ariaExpanded","undefined","_ariaOwns","ref","element","linkElement","slot","onClick","event","handleCollapseClick","handleExpandClick","KolIconTag","_icons","hidden","role","id","validateLabel","validateOpen","validateHref","componentWillLoad","checkForChildren","determineTreeItemDepth","traverseItem","host","parentNode","tagName","toLowerCase","KolTreeTag","document","body","parentElement","Object","assign","Boolean","_b","_a","querySelector","assignedElements","call","length","focusLink","kolFocus","preventDefault","expand","focus","collapse","isOpen"],"sources":["src/schema/props/active.ts","src/components/tree-item/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ActivePropType = boolean;\n\n/**\n * Defines whether something is active.\n */\nexport type PropActive = {\n\tactive: ActivePropType;\n};\n\n/* validator */\nexport const validateActive = (component: Generic.Element.Component, value: ActivePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_active', value, options);\n};\n","import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\nimport clsx from 'clsx';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement!: HTMLKolLinkWcElement;\n\tprivate groupId = `tree-group-${nonce()}`;\n\n\t@State() private level?: number;\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<li\n\t\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-tree-item__link', {\n\t\t\t\t\t\t\t'kol-tree-item__link--first-level': this.level === 0,\n\t\t\t\t\t\t\t'kol-tree-item__link--active': _active,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"kol-tree-item__link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button\"\n\t\t\t\t\t\t\t\t\tonClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\t_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\t_label={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"kol-tree-item__toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"kol-tree-item__text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul class=\"kol-tree-item__children\" hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host.parentNode as unknown as ShadowRoot).host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\t@Method() async focusLink() {\n\t\tawait this.linkElement.kolFocus();\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.linkElement.kolFocus();\n\t\tawait this.expand();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.collapse();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-tree-item.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-924e4118.js";import{v as t}from"./component-names-4cb1c62b.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .tree-item {\n    --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree-link.first-level > a {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link > a {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-left: max(var(--indentation) * var(--level) + (8rem / var(--kolibri-root-font-size, 16)), 8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link-inner {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    text-decoration: none;\n  }\n  a .kol-span-wc {\n    place-items: unset;\n  }\n  .toggle-button,\n  .toggle-button-placeholder {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .text {\n    text-decoration: underline;\n  }\n}",o=i,a=class{constructor(e){n(this,e),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var n,e;return null!==(e=await(null===(n=this.element)||void 0===n?void 0:n.isOpen()))&&void 0!==e&&e}render(){return e(t,{key:"6d8b7de1a3d8ecf617fb066631fd87c37c042a91",class:"kol-tree-item",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:n=>this.element=n},e("slot",{key:"3bf19da6a7cd918c5159f7adb363d77237bb8bad"}))}};a.style={default:o};export{a as kol_tree_item};
+import{r as n,h as e}from"./index-25e8692e.js";import{t}from"./component-names-60d77143.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link .kol-link {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-left: max(var(--indentation) * var(--level) + (8rem / var(--kolibri-root-font-size, 16)), 8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}",o=i,a=class{constructor(e){n(this,e),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var n,e;return null!==(e=await(null===(n=this.element)||void 0===n?void 0:n.isOpen()))&&void 0!==e&&e}render(){return e(t,{key:"058ffb876889218e812b8d16395cf3d4735e9786",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:n=>this.element=n},e("slot",{key:"a084e5ba793a60fd5696756cd16d92e50f6c9c9f"}))}};a.style={default:o};export{a as kol_tree_item};

package/dist/kolibri/kol-tree-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTreeItemDefaultStyle0","KolTreeItem","focusLink","this","element","expand","collapse","isOpen","_b","_a","render","h","KolTreeItemWcTag","key","class","_active","_label","_open","_href","ref"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: rem(8);\n\n\t.tree-item {\n\t\t--indentation: var(--tree-item-indentation, #{rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\t}\n\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t}\n\n\t.tree-link {\n\t\t&.first-level > a {\n\t\t\tpadding-left: rem(6);\n\t\t}\n\n\t\t& > a {\n\t\t\talign-items: center;\n\t\t\tdisplay: inline-flex;\n\t\t\tmin-height: var(--a11y-min-size);\n\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\tpadding-right: rem(6);\n\t\t}\n\t}\n\n\t.tree-link-inner {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\n\ta .kol-span-wc {\n\t\tplace-items: unset; // unset 'center' style from global layer\n\t}\n\n\t.toggle-button,\n\t.toggle-button-placeholder {\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.text {\n\t\ttext-decoration: underline;\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,oyKACxB,MAAAC,EAAeD,E,MCWFE,EAAW,M,gHAuBb,eAAMC,GACf,GAAIC,KAAKC,QAAS,OACXD,KAAKC,QAAQF,W,EAIX,YAAMG,GACf,GAAIF,KAAKC,QAAS,OACXD,KAAKC,QAAQC,Q,EAIX,cAAMC,GACf,GAAIH,KAAKC,QAAS,OACXD,KAAKC,QAAQE,U,EAIX,YAAMC,G,QACf,OAAOC,SAAOC,EAAAN,KAAKC,WAAO,MAAAK,SAAA,SAAAA,EAAEF,aAAS,MAAAC,SAAA,EAAAA,EAAI,K,CAGnC,MAAAE,GACN,OACCC,EAACC,EAAgB,CAAAC,IAAA,2CAChBC,MAAM,gBACNC,QAASZ,KAAKY,QACdC,OAAQb,KAAKa,OACbC,MAAOd,KAAKc,MACZC,MAAOf,KAAKe,MACZC,IAAMf,GAAwCD,KAAKC,QAAUA,GAE7DO,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolTreeItemDefaultStyle0","KolTreeItem","focusLink","this","element","expand","collapse","isOpen","_b","_a","render","h","KolTreeItemWcTag","key","_active","_label","_open","_href","ref"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: rem(8);\n\n\t.kol-tree-item {\n\t\t$root: &;\n\t\t--indentation: var(--tree-item-indentation, #{rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\t\tfont-size: rem(16);\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\t\tpadding-right: rem(6);\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\n\t\t\t&--first-level .kol-link {\n\t\t\t\tpadding-left: rem(6);\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\twidth: var(--a11y-min-size);\n\t\t\theight: var(--a11y-min-size);\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"mappings":";;;4FAAA,MAAMA,EAAkB,02KACxB,MAAAC,EAAeD,E,MCWFE,EAAW,M,gHAuBb,eAAMC,GACf,GAAIC,KAAKC,QAAS,OACXD,KAAKC,QAAQF,W,EAIX,YAAMG,GACf,GAAIF,KAAKC,QAAS,OACXD,KAAKC,QAAQC,Q,EAIX,cAAMC,GACf,GAAIH,KAAKC,QAAS,OACXD,KAAKC,QAAQE,U,EAIX,YAAMC,G,QACf,OAAOC,SAAOC,EAAAN,KAAKC,WAAO,MAAAK,SAAA,SAAAA,EAAEF,aAAS,MAAAC,SAAA,EAAAA,EAAI,K,CAGnC,MAAAE,GACN,OACCC,EAACC,EAAgB,CAAAC,IAAA,2CAChBC,QAASX,KAAKW,QACdC,OAAQZ,KAAKY,OACbC,MAAOb,KAAKa,MACZC,MAAOd,KAAKc,MACZC,IAAMd,GAAwCD,KAAKC,QAAUA,GAE7DO,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/kolibri/kol-tree-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as e,g as a}from"./index-924e4118.js";import{y as s,x as o}from"./component-names-4cb1c62b.js";import{v as n}from"./label-90c13388.js";import"./prop.validators-17aec743.js";import"./index-6d801dad.js";import"./dev.utils-fab45cbc.js";const l=class{constructor(e){i(this,e),this.state={_label:""},this._label=void 0}validateLabel(e){n(this,e)}render(){return t(e,{key:"87bb07435a32099310d375c4b31e2ad6a18b14d7",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-wc"},t("nav",{key:"67bdfb5d267557d9755747638d2a975d113123fc",class:"tree","aria-label":this.state._label},t("ul",{key:"0ea5d150fc9dc6a81518b89735bd617d20f5f930",class:"treeview-navigation",role:"tree","aria-label":this.state._label},t("slot",{key:"2540559f4e0afafb361e7e643f4b0b43721ebbb7"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===s.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(s);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,n,r,o,d,c;const v=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(s),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===(n=v[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(r=v[0])||void 0===r?void 0:r.focusLink()),e.preventDefault();break;case"End":await(null===(o=v[v.length-1])||void 0===o?void 0:o.focusLink()),e.preventDefault();break;case null===(d=e.key.match(/^[a-zA-Z0-9]$/))||void 0===d?void 0:d.input:if(!h){const t=e.key.toLowerCase(),a=v.indexOf(u)+1,i=v.concat(v),s=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!==s&&(await i[a+s].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=u.parentElement)||void 0===c?void 0:c.querySelectorAll(s);null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(o)&&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 n=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 n){if(e._active)return e;const t=e.querySelector(`${s}[_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};
+import{r as e,h as i,H as t,g as a}from"./index-25e8692e.js";import{x as o,w as s}from"./component-names-60d77143.js";import{v as n}from"./label-90c13388.js";import"./prop.validators-17aec743.js";import"./index-6d801dad.js";import"./dev.utils-fab45cbc.js";const l=class{constructor(t){e(this,t),this.state={_label:""},this._label=void 0}validateLabel(e){n(this,e)}render(){return i(t,{key:"05d1fdf7fc5589847e2fdce7b3d307860721ccd2",onSlotchange:this.handleSlotchange.bind(this)},i("nav",{key:"b03ad56f3ce550d09d22efa04e23273588093034",class:"kol-tree","aria-label":this.state._label},i("ul",{key:"7b7e4fc2e98037621beb67e6dcdd00f7072d3878",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},i("slot",{key:"c6bd99309dd93b1eb88031533f17f25c0e9952c7"}))))}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,i;return null===(i=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===i?void 0:i.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 i=t.querySelectorAll(o);return[...e,t,...i]}),[])}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,i,a,l,s,n,r,d,c;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===(i=v[m+1])||void 0===i?void 0:i.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(a=v[m-1])||void 0===a?void 0:a.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===(d=e.key.match(/^[a-zA-Z0-9]$/))||void 0===d?void 0:d.input:if(!h){const t=e.key.toLowerCase(),i=v.indexOf(u)+1,a=v.concat(v),l=a.slice(i,i+v.length).findIndex((e=>{var i;return null===(i=e.getAttribute("_label"))||void 0===i?void 0:i.trim().toLowerCase().startsWith(t)}));-1!==l&&(await a[i+l].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=u.parentElement)||void 0===c?void 0:c.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,i,a;const s=null!==(a=null===(i=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===i?void 0:i.filter(l.isTreeItem))&&void 0!==a?a:[];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};

package/dist/kolibri/kol-tree-wc.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["KolTreeWc","_label","validateLabel","value","this","render","h","Host","key","onSlotchange","handleSlotchange","bind","class","state","role","isTreeItem","element","tagName","KolTreeItemTag","toUpperCase","componentWillLoad","handleTreeChange","observeChildListMutations","disconnectedCallback","_a","observer","disconnect","MutationObserver","observeTopLevelItems","getTopLevelTreeItems","forEach","treeItem","observe","childList","subtree","_c","_b","host","querySelector","assignedNodes","call","filter","treeItemElements","getTreeItemElements","ensureActiveItemVisibility","reduce","accumulator","currentValue","children","querySelectorAll","getOpenTreeItemElements","areElementAndAllParentsOpen","async","parentElement","isOpen","elementsWithInclude","Promise","all","map","include","handleKeyDown","event","openItems","currentTreeItem","document","activeElement","closest","hasModifierKeyPressed","metaKey","altKey","ctrlKey","shiftKey","currentIndex","findIndex","elem","focusLink","preventDefault","_d","expand","collapse","parentIndex","item","_e","_f","_g","length","_h","match","input","char","toLowerCase","startIndex","indexOf","wrapAroundItems","concat","matchIndex","slice","getAttribute","trim","startsWith","siblings","_j","handleFocusOut","relatedTarget","KolTreeTag","findActiveItem","rootNodes","rootNode","_active","childMatch","expandParentElements","target"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)} class=\"kol-tree-wc\">\n\t\t\t\t<nav class=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focusLink());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex].focusLink();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["KolTreeWc","_label","validateLabel","value","this","render","h","Host","key","onSlotchange","handleSlotchange","bind","class","state","role","isTreeItem","element","tagName","KolTreeItemTag","toUpperCase","componentWillLoad","handleTreeChange","observeChildListMutations","disconnectedCallback","_a","observer","disconnect","MutationObserver","observeTopLevelItems","getTopLevelTreeItems","forEach","treeItem","observe","childList","subtree","_c","_b","host","querySelector","assignedNodes","call","filter","treeItemElements","getTreeItemElements","ensureActiveItemVisibility","reduce","accumulator","currentValue","children","querySelectorAll","getOpenTreeItemElements","areElementAndAllParentsOpen","async","parentElement","isOpen","elementsWithInclude","Promise","all","map","include","handleKeyDown","event","openItems","currentTreeItem","document","activeElement","closest","hasModifierKeyPressed","metaKey","altKey","ctrlKey","shiftKey","currentIndex","findIndex","elem","focusLink","preventDefault","_d","expand","collapse","parentIndex","item","_e","_f","_g","length","_h","match","input","char","toLowerCase","startIndex","indexOf","wrapAroundItems","concat","matchIndex","slice","getAttribute","trim","startsWith","siblings","_j","handleFocusOut","relatedTarget","KolTreeTag","findActiveItem","rootNodes","rootNode","_active","childMatch","expandParentElements","target"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focusLink());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex].focusLink();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-tree.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-924e4118.js";import{u as i}from"./component-names-4cb1c62b.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .tree ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",a=o,l=class{constructor(e){n(this,e),this._label=void 0}render(){return e(t,{key:"6430c90de00f6f06970d9abfcb0040bb765a2a12",class:"kol-tree"},e(i,{key:"fcb3d3174feec3a8ae2127fecaf3d5d373d1ee11",_label:this._label},e("slot",{key:"25dd947e8b94534ac4bb63e53e7f66dec9c517bf"})))}};l.style={default:a};export{l as kol_tree};
+import{r as n,h as e}from"./index-25e8692e.js";import{r as t}from"./component-names-60d77143.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",i=o,a=class{constructor(e){n(this,e),this._label=void 0}render(){return e(t,{key:"d9f26f840ce0ccdb32731859e6075cd0fd737dd5",_label:this._label},e("slot",{key:"8f020e01d6f839e2739e5cf0256afdd01eb5c0e5"}))}};a.style={default:i};export{a as kol_tree};

package/dist/kolibri/kol-tree.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTreeDefaultStyle0","KolTree","render","h","Host","key","class","KolTreeWcTag","_label","this"],"sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n\n@layer kol-component {\n\t.tree {\n\t\tul {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { LabelPropType, TreeProps } from '../../schema';\nimport { KolTreeWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-tree\">\n\t\t\t\t<KolTreeWcTag _label={this._label}>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolTreeWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,26IACxB,MAAAC,EAAeD,E,MCYFE,EAAO,M,+CAMZ,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACXH,EAACI,EAAY,CAAAF,IAAA,2CAACG,OAAQC,KAAKD,QAC1BL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolTreeDefaultStyle0","KolTree","render","h","KolTreeWcTag","key","_label","this"],"sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-tree {\n\t\tfont-size: rem(16);\n\n\t\t&__treeview-navigation {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport type { LabelPropType, TreeProps } from '../../schema';\nimport { KolTreeWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeWcTag _label={this._label}>\n\t\t\t\t<slot />\n\t\t\t</KolTreeWcTag>\n\t\t);\n\t}\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,k7IACxB,MAAAC,EAAeD,E,MCYFE,EAAO,M,+CAMZ,MAAAC,GACN,OACCC,EAACC,EAAY,CAAAC,IAAA,2CAACC,OAAQC,KAAKD,QAC1BH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/kolibri/kol-version.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-924e4118.js";import{t as i}from"./i18n-31adef87.js";import{w as o}from"./component-names-4cb1c62b.js";import{v as a}from"./label-90c13388.js";import"./i18n-eef4b287.js";import"./reuse-32931294.js";import"./prop.validators-17aec743.js";import"./index-6d801dad.js";import"./dev.utils-fab45cbc.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}",l=s,r=class{constructor(e){n(this,e),this._label=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return e(t,{key:"52c047c6155afc6cfcf189fd6689057a9ec1c6df",class:"kol-version"},e(o,{key:"eddaf7d1ba9a2f8caa5c904a06fe3a6947df0624",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:i("kol-version")}},_label:this.state._label}))}validateLabel(n){a(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}};r.style={default:l};export{r as kol_version};
+import{r as n,h as e,H as t}from"./index-25e8692e.js";import{t as o}from"./i18n-efbafc80.js";import{u as i}from"./component-names-60d77143.js";import{v as a}from"./label-90c13388.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./prop.validators-17aec743.js";import"./index-6d801dad.js";import"./dev.utils-fab45cbc.js";const l="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",s=l,r=class{constructor(e){n(this,e),this._label=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return e(t,{key:"abaf942617b20e8e900dde885533f035b3cda21a",class:"kol-version"},e(i,{key:"ac1df455d3abf291c8a88debe0a0e2ae51ce6b61",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:o("kol-version")}},_label:this.state._label}))}validateLabel(n){a(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}};r.style={default:s};export{r as kol_version};

package/dist/kolibri/kol-version.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolVersionDefaultStyle0","KolVersion","_label","render","h","Host","key","class","KolBadgeTag","_color","_icons","left","icon","label","translate","this","state","validateLabel","value","required","componentWillLoad"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n","import type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;gVAAA,MAAMA,EAAkB,qvIACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,0DAoBiB,CACtCC,OAAQ,gB,CApBF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAACI,EAAW,CAAAF,IAAA,2CACXG,OAAO,UACPC,OAAQ,CACPC,KAAM,CAAEC,KAAM,2BAA4BC,MAAOC,EAAU,iBAE5DZ,OAAQa,KAAKC,MAAMd,S,CAgBhB,aAAAe,CAAcC,GACpBD,EAAcF,KAAMG,EAAO,CAC1BC,SAAU,M,CAIL,iBAAAC,GACNL,KAAKE,cAAcF,KAAKb,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolVersionDefaultStyle0","KolVersion","_label","render","h","Host","key","class","KolBadgeTag","_color","_icons","left","icon","label","translate","this","state","validateLabel","value","required","componentWillLoad"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;gVAAA,MAAMA,EAAkB,yvIACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,0DAoBiB,CACtCC,OAAQ,gB,CApBF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAACI,EAAW,CAAAF,IAAA,2CACXG,OAAO,UACPC,OAAQ,CACPC,KAAM,CAAEC,KAAM,2BAA4BC,MAAOC,EAAU,iBAE5DZ,OAAQa,KAAKC,MAAMd,S,CAgBhB,aAAAe,CAAcC,GACpBD,EAAcF,KAAMG,EAAO,CAC1BC,SAAU,M,CAIL,iBAAAC,GACNL,KAAKE,cAAcF,KAAKb,O","ignoreList":[]}