ui-lit/theme/reconfig.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { firstUpper } from 'kailib';
let LitThemeConfiger = class LitThemeConfiger extends LitElement {
    constructor() {
        super(...arguments);
        this.name = 'primary';
        this.params = [330, 75, 75];
    }
    render() {
        return html `
        <lit-header level = "4"><slot name = "name">${firstUpper(this.name)}</slot></lit-header>
        <slot></slot>
        <div class = "wrapper">
            <lit-header level = "5"><slot name = "hue">Hue:</slot></lit-header>
            <lit-range 
                @changed = "${this._changeH}" 
                min = "0" 
                max = "360" 
                value = "${this.params[0]}"></lit-range>
            <lit-header level = "5"><slot name = "chroma">Chroma:</slot></lit-header>
            <lit-range
                @changed = "${this._changeS}" 
                min = "0" 
                max = "100" 
                value = "${this.params[1]}"></lit-range>
            <lit-header level = "5"><slot name = "luminance">Luminance:</slot></lit-header>
            <lit-range
                @changed = "${this._changeL}" 
                min = "0" 
                max = "100" 
                value = "${this.params[2]}"></lit-range>
        </div>`;
    }
    _changeH(e) {
        this.params = [e.detail.valueAsNumber, this.params[1], this.params[2]];
        this._dispatch();
    }
    _changeS(e) {
        this.params = [this.params[0], e.detail.valueAsNumber, this.params[2]];
        this._dispatch();
    }
    _changeL(e) {
        this.params = [this.params[0], this.params[1], e.detail.valueAsNumber];
        this._dispatch();
    }
    _dispatch() {
        this.dispatchEvent(new CustomEvent("changedPallete", {
            detail: {
                name: this.name,
                params: this.params
            },
            composed: true,
            bubbles: true
        }));
    }
};
LitThemeConfiger.styles = css `
    :host{
        display: block;
    }
    .wrapper lit-header{
        margin: 0;
    }
    .wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: center;
    }
    `;
__decorate([
    property({ type: String })
], LitThemeConfiger.prototype, "name", void 0);
__decorate([
    property({ type: Array })
], LitThemeConfiger.prototype, "params", void 0);
LitThemeConfiger = __decorate([
    customElement("lit-theme-configer")
], LitThemeConfiger);
export { LitThemeConfiger };