@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
146 lines (142 loc) • 6.72 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { r as registerInstance, h, H as Host, g as getElement } from './index-BQlHOxik.js';
import { c as KolLinkWcTag, u as KolTreeTag } from './component-names-Dy77vq43.js';
import { I as IconFC } from './component-DzaT2WlJ.js';
import { e as watchBoolean } from './common-Cx_AGO_M.js';
import { v as validateHref } from './href-Dp4go7zq.js';
import { v as validateLabel } from './label-Fyi30H9j.js';
import { v as validateOpen } from './open-Dw4Y2dzo.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { c as createUniqueId } from './dev.utils-02Sl9bQo.js';
import './tslib.es6-QNbPBOk5.js';
import './bem-registry-CWvl2xho.js';
const validateActive = (component, value, options) => {
watchBoolean(component, '_active', value, options);
};
const KolTreeItemWc = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.groupId = createUniqueId('tree-group');
this.state = {
_active: false,
_hasChildren: false,
_href: '',
_label: '',
_open: false,
};
}
render() {
const { _href, _active, _hasChildren, _open, _label } = this.state;
return (h(Host, { key: '0e8dace9d24995b94398cda4155f9cc026704b1f', onSlotchange: this.handleSlotchange.bind(this) }, h("li", { key: '5e7cad99348e4230718731a8ccd42edc7cde0e5c', class: "kol-tree-item", style: {
'--level': `${this.level}`,
} }, h(KolLinkWcTag, { key: 'c36dd466d9c4a46528628459fbfedf88cd100c60', class: clsx('kol-tree-item__link', {
'kol-tree-item__link--first-level': this.level === 0,
'kol-tree-item__link--active': _active,
}), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, h("span", { key: 'd1119a0de39c5c6ccb63c3c767d947a9babd5f9c', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (h("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, h(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (h("span", { class: "kol-tree-item__toggle-button-placeholder" })), h("span", { key: '4ec3c0df36f1d428b2ebcd472aa5e2c54598dd0b', class: "kol-tree-item__text" }, _label))), h("ul", { key: '0dae6860fca3e03e5363bef3ee080542c5152f0d', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, h("slot", { key: '0a7af9ff0c81e4555d3e28fd4fd95b6c219b527a' })))));
}
validateActive(value) {
validateActive(this, value || false);
}
validateLabel(value) {
validateLabel(this, value);
}
validateOpen(value) {
validateOpen(this, value);
}
validateHref(value) {
validateHref(this, value);
}
componentWillLoad() {
this.validateActive(this._active);
this.validateLabel(this._label);
this.validateOpen(this._open);
this.validateHref(this._href);
this.checkForChildren();
this.determineTreeItemDepth();
}
determineTreeItemDepth() {
var _a, _b;
let level = 0;
let traverseItem = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.host.parentNode;
while (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {
traverseItem = traverseItem.parentElement;
level += 1;
}
this.level = level;
}
handleSlotchange() {
this.checkForChildren();
}
checkForChildren() {
var _a, _b, _c;
this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements) === null || _c === void 0 ? void 0 : _c.call(_b).length) });
}
getTreeParent() {
var _a, _b;
let element = this.host;
while (element) {
const parent = element.closest(KolTreeTag);
if (parent) {
const treeWc = (_a = parent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('kol-tree-wc');
if (treeWc) {
return treeWc;
}
return undefined;
}
const shadowHost = (_b = element.getRootNode()) === null || _b === void 0 ? void 0 : _b.host;
if (!shadowHost || shadowHost === document.body) {
break;
}
element = shadowHost.parentElement;
}
return undefined;
}
async focus() {
if (this.host && this.linkElement) {
return Promise.resolve(this.linkElement.focus());
}
}
async handleExpandClick(event) {
event.preventDefault();
if (this.host && this.linkElement) {
await this.linkElement.focus();
}
await this.expand();
}
async expand() {
var _a, _b;
if (this.state._hasChildren) {
this.state = Object.assign(Object.assign({}, this.state), { _open: true });
void ((_b = (_a = this.getTreeParent()) === null || _a === void 0 ? void 0 : _a.invalidateOpenItemsCache) === null || _b === void 0 ? void 0 : _b.call(_a));
}
}
async handleCollapseClick(event) {
event.preventDefault();
if (this.host && this.linkElement) {
await this.linkElement.focus();
}
await this.collapse();
}
async collapse() {
var _a, _b;
if (this.state._hasChildren) {
this.state = Object.assign(Object.assign({}, this.state), { _open: false });
void ((_b = (_a = this.getTreeParent()) === null || _a === void 0 ? void 0 : _a.invalidateOpenItemsCache) === null || _b === void 0 ? void 0 : _b.call(_a));
}
}
async isOpen() {
var _a;
return (_a = this.state._open) !== null && _a !== void 0 ? _a : false;
}
get host() { return getElement(this); }
static get watchers() { return {
"_active": ["validateActive"],
"_label": ["validateLabel"],
"_open": ["validateOpen"],
"_href": ["validateHref"]
}; }
};
export { KolTreeItemWc as kol_tree_item_wc };
//# sourceMappingURL=kol-tree-item-wc.entry.js.map