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

Stencil Component Starter

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-710e648a.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) {
        index.registerInstance(this, hostRef);
        this.defaultValue = "#ff0000";
        this.resettable = false;
        this.colorChanged = index.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 index.h("radh-button", { onClick: () => this.reset() }, "X");
        }
    }
    render() {
        return (index.h("div", { class: "color-picker" }, index.h("input", { type: "color", value: this.value, onChange: (ev) => this.handleChange(ev) }), index.h("span", null, this.value), this.renderResetButton()));
    }
}
ColorPicker.style = radhColorPickerCss;

exports.radh_color_picker = ColorPicker;