@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
148 lines (143 loc) • 6.77 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
'use strict';
var index = require('./index-BrhW8s5h.js');
var componentNames = require('./component-names-5KS_pYRF.js');
var component = require('./component-CuHGwo27.js');
var common = require('./common-DPb6NWR4.js');
var href = require('./href-D8FMmJ7i.js');
var label = require('./label-8vcJJEVI.js');
var open = require('./open-D-HUKrqZ.js');
var clsx = require('./clsx-Bm_HQUnh.js');
var dev_utils = require('./dev.utils-BeTuwcHU.js');
require('./tslib.es6-Cm0ytgPY.js');
require('./bem-registry-DevvgGUu.js');
const validateActive = (component, value, options) => {
common.watchBoolean(component, '_active', value, options);
};
const KolTreeItemWc = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.groupId = dev_utils.createUniqueId('tree-group');
this.state = {
_active: false,
_hasChildren: false,
_href: '',
_label: '',
_open: false,
};
}
render() {
const { _href, _active, _hasChildren, _open, _label } = this.state;
return (index.h(index.Host, { key: '0e8dace9d24995b94398cda4155f9cc026704b1f', onSlotchange: this.handleSlotchange.bind(this) }, index.h("li", { key: '5e7cad99348e4230718731a8ccd42edc7cde0e5c', class: "kol-tree-item", style: {
'--level': `${this.level}`,
} }, index.h(componentNames.KolLinkWcTag, { key: 'c36dd466d9c4a46528628459fbfedf88cd100c60', class: clsx.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) }, index.h("span", { key: 'd1119a0de39c5c6ccb63c3c767d947a9babd5f9c', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (index.h("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, index.h(component.IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (index.h("span", { class: "kol-tree-item__toggle-button-placeholder" })), index.h("span", { key: '4ec3c0df36f1d428b2ebcd472aa5e2c54598dd0b', class: "kol-tree-item__text" }, _label))), index.h("ul", { key: '0dae6860fca3e03e5363bef3ee080542c5152f0d', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, index.h("slot", { key: '0a7af9ff0c81e4555d3e28fd4fd95b6c219b527a' })))));
}
validateActive(value) {
validateActive(this, value || false);
}
validateLabel(value) {
label.validateLabel(this, value);
}
validateOpen(value) {
open.validateOpen(this, value);
}
validateHref(value) {
href.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() !== componentNames.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(componentNames.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 index.getElement(this); }
static get watchers() { return {
"_active": ["validateActive"],
"_label": ["validateLabel"],
"_open": ["validateOpen"],
"_href": ["validateHref"]
}; }
};
exports.kol_tree_item_wc = KolTreeItemWc;
//# sourceMappingURL=kol-tree-item-wc.entry.cjs.js.map