ui-lit/code/code-line.js

UI Elements on LIT

import { __decorate } from "tslib";
import { customElement, state } from 'lit/decorators.js';
import { LitElement, html, css } from 'lit';
import { getParentTagName } from 'kailib';
let LitCodeLine = class LitCodeLine extends LitElement {
    constructor() {
        super(...arguments);
        this.number = 0;
    }
    get root() {
        return getParentTagName(this, 'lit-code');
    }
    connectedCallback() {
        super.connectedCallback();
        const root = this.root;
        if (!root) {
            console.warn('Code line must be child of lit-code');
            return;
        }
        this.number = root.inc();
    }
    render() {
        return html `<div class = "wrapper">
                <div class = "line-number">${this.number}</div>
                <div><slot></slot></div>   
            </div>`;
    }
};
LitCodeLine.styles = css `
    :host{
        display: block;
        padding: 3px;
    }
    .wrapper{
        display: grid;
        grid-template-columns: 25px auto;
    }
    .line-number{
        color: var(--lit-code-number, #777);
    }
    `;
__decorate([
    state()
], LitCodeLine.prototype, "number", void 0);
LitCodeLine = __decorate([
    customElement('lit-code-line')
], LitCodeLine);
export { LitCodeLine };