@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
325 lines (324 loc) • 12.9 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, Host } from "@stencil/core";
import { KolLinkWcTag, KolTreeTag } from "../../core/component-names";
import { IconFC } from "../../internal/functional-components/icon/component";
import { validateActive, validateHref, validateLabel, validateOpen } from "../../schema";
import clsx from "../../utils/clsx";
import { createUniqueId } from "../../utils/dev.utils";
export class KolTreeItemWc {
constructor() {
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;
}
static get is() { return "kol-tree-item-wc"; }
static get properties() {
return {
"_active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "OpenPropType",
"resolved": "boolean | undefined",
"references": {
"OpenPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::OpenPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If set (to true) the tree item is the active one."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_active"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LabelPropType",
"resolved": "string",
"references": {
"LabelPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LabelPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
},
"_open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "OpenPropType",
"resolved": "boolean | undefined",
"references": {
"OpenPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::OpenPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Opens/expands the element when truthy, closes/collapses when falsy."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_open"
},
"_href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "HrefPropType",
"resolved": "string",
"references": {
"HrefPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::HrefPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the target URI of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_href"
}
};
}
static get states() {
return {
"level": {},
"state": {}
};
}
static get methods() {
return {
"focus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Focuses the link element.",
"tags": []
}
},
"expand": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Expands the tree item.",
"tags": []
}
},
"collapse": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Collapses the tree item.",
"tags": []
}
},
"isOpen": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Returns whether the tree item is expanded.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_active",
"methodName": "validateActive"
}, {
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_open",
"methodName": "validateOpen"
}, {
"propName": "_href",
"methodName": "validateHref"
}];
}
}
//# sourceMappingURL=component.js.map