radh-ui/dist/esm-es5/radh-input.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-a9700b09.js';
//export type Validator<A> = (x: A) => boolean;
var defaultValidator = {
    validate: function (_x) { return true; }
};
function combineValidators(v1, v2) {
    var combined;
    combined = {
        validate: function (x) {
            var res1 = v1.validate(x);
            var res2 = v2.validate(x);
            if (!res1) {
                combined.errorMessage = v1.errorMessage;
            }
            else if (!res2) {
                combined.errorMessage = v2.errorMessage;
            }
            return res1 && res2;
        },
    };
    return combined;
}
var FruitValidator = {
    validate: function (value) {
        var fruits = ['banana', 'apple', 'cherry'];
        return fruits.find(function (a) { return a === value; }) ? true : false;
    },
    errorMessage: 'You must enter a valid fruit name'
};
function getLengthValidator(min, max) {
    return {
        validate: function (value) {
            value = value || '';
            if (min && max) {
                return min <= value.length && value.length <= max;
            }
            if (min) {
                return min <= value.length;
            }
            if (max) {
                return value.length <= max;
            }
            return true;
        },
        errorMessage: min && max ? "You must enter between " + min + " and " + max + " characters"
            : min ? "You must enter at least " + min + " characters"
                : max ? "You must enter less than " + max + " characters" : ''
    };
}
var ValidatorsName;
(function (ValidatorsName) {
    ValidatorsName["fruit"] = "fruit";
    ValidatorsName["length"] = "length";
})(ValidatorsName || (ValidatorsName = {}));
function getValidator(list) {
    return (list || []).map(function (v) {
        if (typeof v === 'string') {
            return validatorFactory(v, null);
        }
        else if (v && v.name) {
            v = v;
            return validatorFactory(v.name, v.options);
        }
        else {
            return v;
        }
    }).reduce(combineValidators, defaultValidator);
}
function validatorFactory(name, options) {
    options = options || {};
    switch (name) {
        case (ValidatorsName.fruit):
            return FruitValidator;
        case (ValidatorsName.length):
            return getLengthValidator(options.min, options.max);
        default:
            return defaultValidator;
    }
}
var radhInputCss = ".input-container{padding:0.5rem;border-radius:1rem;border:1px solid grey}input{outline:none !important;border:none;width:100%;font-size:0.8rem}.validation-error{font-size:0.8rem;color:red}";
var RadhInput = /** @class */ (function () {
    function RadhInput(hostRef) {
        registerInstance(this, hostRef);
        this._validator = defaultValidator;
        this.changed = createEvent(this, "changed", 7);
    }
    RadhInput.prototype.componentWillLoad = function () {
        this._validator = getValidator(this.validator);
    };
    RadhInput.prototype.componentWillUpdate = function () {
        this._validator = getValidator(this.validator);
    };
    RadhInput.prototype.handleChange = function (ev) {
        this.value = ev.target ? ev.target.value : null;
        this.changed.emit(this.value);
    };
    RadhInput.prototype.render = function () {
        var _this = this;
        console.log(this._validator, this._validator.validate(this.value));
        return (h("div", null, h("div", { class: "input-container" }, h("input", { value: this.value, onInput: function (ev) { return _this.handleChange(ev); } })), !this._validator.validate(this.value) ?
            h("span", { class: "validation-error" }, this._validator.errorMessage)
            : null));
    };
    return RadhInput;
}());
RadhInput.style = radhInputCss;
export { RadhInput as radh_input };