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

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as KolLinkWcTag, t as KolTreeTag } from './component-names.js';
import { I as IconFC } from './component3.js';
import './common.js';
import { b as watchBoolean } from './prop.validators.js';
import { v as validateHref } from './href.js';
import { v as validateLabel } from './label.js';
import { v as validateOpen } from './open.js';
import { c as clsx } from './clsx.js';
import { c as createUniqueId } from './dev.utils.js';

const validateActive = (component, value, options) => {
    watchBoolean(component, '_active', value, options);
};

const KolTreeItemWc$1 = proxyCustomElement(class KolTreeItemWc extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        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 this; }
    static get watchers() { return {
        "_active": ["validateActive"],
        "_label": ["validateLabel"],
        "_open": ["validateOpen"],
        "_href": ["validateHref"]
    }; }
}, [260, "kol-tree-item-wc", {
        "_active": [4],
        "_label": [1],
        "_open": [4],
        "_href": [1],
        "level": [32],
        "state": [32],
        "focus": [64],
        "expand": [64],
        "collapse": [64],
        "isOpen": [64]
    }, undefined, {
        "_active": ["validateActive"],
        "_label": ["validateLabel"],
        "_open": ["validateOpen"],
        "_href": ["validateHref"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kol-tree-item-wc"];
    components.forEach(tagName => { switch (tagName) {
        case "kol-tree-item-wc":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KolTreeItemWc$1);
            }
            break;
    } });
}

const KolTreeItemWc = KolTreeItemWc$1;
const defineCustomElement = defineCustomElement$1;

export { KolTreeItemWc, defineCustomElement };
//# sourceMappingURL=kol-tree-item-wc.js.map

//# sourceMappingURL=kol-tree-item-wc.js.map