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

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-a9700b09.js';
var 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}";
var ColorPicker = /** @class */ (function () {
    function ColorPicker(hostRef) {
        registerInstance(this, hostRef);
        this.defaultValue = "#ff0000";
        this.resettable = false;
        this.colorChanged = createEvent(this, "colorChanged", 7);
    }
    ColorPicker.prototype.componentWillLoad = function () {
        this.setValue(this.defaultValue);
    };
    ColorPicker.prototype.handleChange = function (event) {
        this.setValue(event.target.value);
    };
    ColorPicker.prototype.setValue = function (value) {
        this.value = value;
        this.colorChanged.emit(this.value);
    };
    ColorPicker.prototype.reset = function () {
        this.setValue(this.defaultValue);
    };
    ColorPicker.prototype.renderResetButton = function () {
        var _this = this;
        if (this.resettable) {
            return h("radh-button", { onClick: function () { return _this.reset(); } }, "X");
        }
    };
    ColorPicker.prototype.render = function () {
        var _this = this;
        return (h("div", { class: "color-picker" }, h("input", { type: "color", value: this.value, onChange: function (ev) { return _this.handleChange(ev); } }), h("span", null, this.value), this.renderResetButton()));
    };
    return ColorPicker;
}());
ColorPicker.style = radhColorPickerCss;
export { ColorPicker as radh_color_picker };