ui-lit/header/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { customElement, property } from 'lit/decorators.js';
import { LitElement, html, css } from 'lit';
let LitHeader = class LitHeader extends LitElement {
    constructor() {
        super(...arguments);
        this.level = 1;
    }
    static get properties() {
        return {
            center: { type: Boolean }
        };
    }
    render() {
        return html `<slot></slot>`;
    }
};
LitHeader.styles = [
    css `
        :host{
            display: block;
            font-family: var(--lit-header-font-family, inherit);
        }
        :host([center]){
            text-align: center;
        }
        `,
    ...[1, 2, 3, 4, 5, 6].map(it => css `:host([level="${it}"]){
            font-weight: var(--lit-header-${it}-font-weight, bold);
            margin: var(--lit-header-${it}-margin, 2.5rem 0 1rem 0);
            font-size: var(--lit-header-${it}-font-size, ${Math.round(10 * (3 - it * 0.4)) / 10}rem);
        }`)
];
__decorate([
    property({ type: Number, attribute: true, reflect: true })
], LitHeader.prototype, "level", void 0);
LitHeader = __decorate([
    customElement('lit-header')
], LitHeader);
export { LitHeader };