radh-ui/dist/esm/radh-color-picker.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-a9700b09.js';

const radhColorPickerCss = ".color-picker{border:2px solid #afafaf;display:-ms-inline-flexbox;display:inline-flex;max-width:175px;-ms-flex-align:center;align-items:center;padding:0;margin:0}.color-picker input{cursor:pointer;border-width:0;width:50px;height:30px}.color-picker span{padding:0 10px 0 10px;width:70px;text-transform:uppercase;color:#afafaf}.color-picker button{border:none;border-left:1px solid #afafaf;font-size:0.9em;width:30px;height:25px}";

class ColorPicker {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.defaultValue = "#ff0000";
        this.resettable = false;
        this.colorChanged = createEvent(this, "colorChanged", 7);
    }
    componentWillLoad() {
        this.setValue(this.defaultValue);
    }
    handleChange(event) {
        this.setValue(event.target.value);
    }
    setValue(value) {
        this.value = value;
        this.colorChanged.emit(this.value);
    }
    reset() {
        this.setValue(this.defaultValue);
    }
    renderResetButton() {
        if (this.resettable) {
            return h("radh-button", { onClick: () => this.reset() }, "X");
        }
    }
    render() {
        return (h("div", { class: "color-picker" }, h("input", { type: "color", value: this.value, onChange: (ev) => this.handleChange(ev) }), h("span", null, this.value), this.renderResetButton()));
    }
}
ColorPicker.style = radhColorPickerCss;

export { ColorPicker as radh_color_picker };