ui-lit/treeview/tree-item.js

UI Elements on LIT

import { __decorate } from "tslib";
import { customElement, property } from 'lit/decorators.js';
import { LitElement, html, css } from 'lit';
let LitTreeItem = class LitTreeItem extends LitElement {
    constructor() {
        super(...arguments);
        this.value = '';
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('click', this._onClick);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('click', this._onClick);
    }
    updateSelection(selected) {
        const isSelected = selected === this.value;
        if (this.hasAttribute('selected') !== isSelected) {
            isSelected
                ? this.setAttribute('selected', '')
                : this.removeAttribute('selected');
        }
        if (isSelected) {
            this.dispatchEvent(new CustomEvent('subviewSelected', {
                detail: isSelected,
                bubbles: true
            }));
        }
    }
    _onClick() {
        this.dispatchEvent(new CustomEvent("changed", {
            detail: this.value,
            bubbles: true
        }));
    }
    render() {
        return html `<slot></slot>`;
    }
};
LitTreeItem.styles = css `
    :host{
        display: block;
        padding: 5px 10px;
        cursor: pointer;
    }
    :host([selected]){
        background-color: var(--lit-treeitem-selected-background, rgba(0, 0, 0, 0.05));
        color: var(--lit-treeitem-selected-color, tomato);
    }
    `;
__decorate([
    property()
], LitTreeItem.prototype, "value", void 0);
LitTreeItem = __decorate([
    customElement("lit-tree-item")
], LitTreeItem);
export { LitTreeItem };