ui-lit/treeview/tree-subview.js

UI Elements on LIT

import { __decorate } from "tslib";
import { classMap } from 'lit/directives/class-map';
import { html, LitElement, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
let LitTreeSubView = class LitTreeSubView extends LitElement {
    constructor() {
        super(...arguments);
        this.label = '';
        this.opened = true;
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('subviewSelected', this._onSelected);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('subviewSelected', this._onSelected);
    }
    _onSelected(e) {
        this.updateSelection(e.detail);
    }
    updateSelection(isSelected) {
        if (this.hasAttribute('selected') !== isSelected) {
            isSelected
                ? this.setAttribute('selected', '')
                : this.removeAttribute('selected');
        }
    }
    _iconTemplate() {
        const data = {
            dropup: this.opened,
            "icon-before": true
        };
        return html `<lit-icon 
                        icon = "dropdown" 
                        class = "${classMap(data)}"></lit-icon>`;
    }
    _toggle() {
        this.opened = !this.opened;
    }
    render() {
        return html `
            <div class = "label" 
                 @click = "${this._toggle}">${this._iconTemplate()}${this.label}</div>
            <div class = "content"><slot></slot></div>`;
    }
};
LitTreeSubView.styles = css `
    :host{
        display: block;
    }
    .label{
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 5px 10px;
    }
    .content{
        margin-left: 25px;
    }
    lit-icon{
        margin-right: 5px;
    }
    :host(:not([opened])) .content{
        display: none;
    }
    :host([selected]) .label{
        color: var(--lit-treeitem-selected-color, tomato);
    }
    `;
__decorate([
    property({ type: String })
], LitTreeSubView.prototype, "label", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], LitTreeSubView.prototype, "opened", void 0);
LitTreeSubView = __decorate([
    customElement("lit-tree-subview")
], LitTreeSubView);
export { LitTreeSubView };