ngx-form-control/fesm5/ngx-form-control.js

Form controls for angular 6

import { Input, Component, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
import { __extends, __values, __spread } from 'tslib';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
/**
 * @abstract
 */
var BaseControlComponent = /** @class */ (function () {
    function BaseControlComponent() {
        this.id = 'ngx-' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
        this.innerCustomErrorMessages = [];
        this.name = '';
        this.label = '';
        this.placeholder = '';
        this.title = '';
        this.required = false;
        this.disabled = false;
        this.validMessage = '';
        this.requiredErrorMessage = 'This field is required.';
    }
    Object.defineProperty(BaseControlComponent.prototype, "customErrorMessages", {
        set: /**
         * @param {?} messages
         * @return {?}
         */
        function (messages) {
            if (!messages) {
                this.innerCustomErrorMessages = [];
            }
            else if ('string' === typeof messages) {
                this.innerCustomErrorMessages = [messages];
            }
            else if (messages[0]) {
                this.innerCustomErrorMessages = messages;
            }
            else {
                this.innerCustomErrorMessages = [];
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BaseControlComponent.prototype, "hasCustomError", {
        get: /**
         * @return {?}
         */
        function () {
            return !!(this.innerCustomErrorMessages && this.innerCustomErrorMessages[0]);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BaseControlComponent.prototype, "hasRequiredError", {
        get: /**
         * @return {?}
         */
        function () {
            return this.required && this.value !== false && this.value !== 0 && !this.value;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} fn
     * @return {?}
     */
    BaseControlComponent.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        var _this = this;
        this._onChangeCallback = function (event) {
            if (_this.cleanCustomErrorMessageOnChanged) {
                _this.innerCustomErrorMessages = [];
            }
            return fn(event);
        };
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    BaseControlComponent.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this._onTouchedCallback = fn;
    };
    /**
     * @return {?}
     */
    BaseControlComponent.prototype.triggerChange = /**
     * @return {?}
     */
    function () {
        if (this._onChangeCallback) {
            this._onChangeCallback(this.value);
        }
    };
    BaseControlComponent.propDecorators = {
        name: [{ type: Input }],
        label: [{ type: Input }],
        placeholder: [{ type: Input }],
        title: [{ type: Input }],
        required: [{ type: Input }],
        disabled: [{ type: Input }],
        validMessage: [{ type: Input }],
        requiredErrorMessage: [{ type: Input }],
        cleanCustomErrorMessageOnChanged: [{ type: Input }],
        customErrorMessages: [{ type: Input }]
    };
    return BaseControlComponent;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
/**
 * @abstract
 */
var BaseListControlComponent = /** @class */ (function (_super) {
    __extends(BaseListControlComponent, _super);
    function BaseListControlComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._options = [];
        _this._selectOptions = [];
        _this._selectedIndexes = [];
        return _this;
    }
    Object.defineProperty(BaseListControlComponent.prototype, "textKey", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._textKey = value;
            this.initOptions();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BaseListControlComponent.prototype, "valueKey", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._valueKey = value;
            this.initOptions();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BaseListControlComponent.prototype, "comparedKey", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._comparedKey = value;
            this.initOptions();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BaseListControlComponent.prototype, "options", {
        set: /**
         * @param {?} options
         * @return {?}
         */
        function (options) {
            this._options = options;
            this.initOptions();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BaseListControlComponent.prototype, "selectOptions", {
        get: /**
         * @return {?}
         */
        function () {
            return this._selectOptions;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BaseListControlComponent.prototype, "selectedIndexes", {
        get: /**
         * @return {?}
         */
        function () {
            return this._selectedIndexes;
        },
        set: /**
         * @param {?} indexes
         * @return {?}
         */
        function (indexes) {
            /** @type {?} */
            var oldSelectedIndexes = JSON.stringify(this._selectedIndexes);
            this._selectedIndexes = indexes && indexes.length ? indexes.reduce(function (arr, value) {
                value = +value;
                if (value > -1) {
                    arr.push(value);
                }
                return arr;
            }, []) : [];
            /** @type {?} */
            var newSelectedIndexes = JSON.stringify(this._selectedIndexes);
            if (newSelectedIndexes !== oldSelectedIndexes) {
                this.triggerChange();
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} value
     * @return {?}
     */
    BaseListControlComponent.prototype.findIndex = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        /** @type {?} */
        var comparedValue = this.getComparedValue(value);
        return this._selectOptions.findIndex(function (option) {
            return comparedValue === option.comparedValue;
        });
    };
    /**
     * @param {?} arrValue
     * @return {?}
     */
    BaseListControlComponent.prototype.findIndexes = /**
     * @param {?} arrValue
     * @return {?}
     */
    function (arrValue) {
        var _this = this;
        if (!arrValue || !arrValue.length) {
            return [];
        }
        return arrValue.reduce(function (arr, value) {
            /** @type {?} */
            var index = _this.findIndex(value);
            if (index > -1) {
                arr.push(index);
            }
            return arr;
        }, []);
    };
    /**
     * @return {?}
     */
    BaseListControlComponent.prototype.initOptions = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.beforeInitOptions();
        /** @type {?} */
        var oldValue = this.value;
        this._selectOptions = [];
        if (this._options && this._options.length) {
            this._options.map(function (option, index) {
                /** @type {?} */
                var text;
                /** @type {?} */
                var value;
                if ('string' === typeof option || 'number' === typeof option) {
                    text = option;
                    value = option;
                }
                else {
                    text = option[_this._textKey || 'text'];
                    value = _this._valueKey ? option[_this._valueKey] : option;
                }
                _this._selectOptions.push({
                    id: index,
                    text: text,
                    value: value,
                    comparedValue: _this.getComparedValue(option),
                });
            });
        }
        this.afterInitOptions();
        this.writeValue(oldValue);
        /** @type {?} */
        var newValue = this.value;
        if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
            this.triggerChange();
        }
    };
    /**
     * @return {?}
     */
    BaseListControlComponent.prototype.beforeInitOptions = /**
     * @return {?}
     */
    function () {
    };
    /**
     * @return {?}
     */
    BaseListControlComponent.prototype.afterInitOptions = /**
     * @return {?}
     */
    function () {
    };
    /**
     * @param {?} option
     * @return {?}
     */
    BaseListControlComponent.prototype.getComparedValue = /**
     * @param {?} option
     * @return {?}
     */
    function (option) {
        if (!option) {
            return '';
        }
        if ('string' === typeof option || 'number' === typeof option) {
            return option;
        }
        /** @type {?} */
        var value;
        if (this._comparedKey) {
            value = option[this._comparedKey];
        }
        else {
            value = this._valueKey ? option[this._valueKey] : option;
        }
        if ('string' === typeof value || 'number' === typeof value) {
            return value;
        }
        return JSON.stringify(value);
    };
    BaseListControlComponent.propDecorators = {
        textKey: [{ type: Input }],
        valueKey: [{ type: Input }],
        comparedKey: [{ type: Input }],
        options: [{ type: Input }]
    };
    return BaseListControlComponent;
}(BaseControlComponent));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
var FormCheckboxComponent = /** @class */ (function (_super) {
    __extends(FormCheckboxComponent, _super);
    function FormCheckboxComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._isTouched = false;
        return _this;
    }
    Object.defineProperty(FormCheckboxComponent.prototype, "isEmpty", {
        get: /**
         * @return {?}
         */
        function () {
            return !this._selectedIndexes || !this._selectedIndexes.length;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormCheckboxComponent.prototype, "value", {
        get: /**
         * @return {?}
         */
        function () {
            var _this = this;
            return this.isEmpty ? null : this._selectedIndexes.map(function (index) { return _this._selectOptions[index].value; });
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormCheckboxComponent.prototype, "invalid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return true;
            }
            if (!this._isTouched) {
                return false;
            }
            return this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormCheckboxComponent.prototype, "valid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return false;
            }
            if (!this._isTouched) {
                return false;
            }
            return !this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormCheckboxComponent.prototype, "errorMessages", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return this.innerCustomErrorMessages;
            }
            if (this.hasRequiredError) {
                return [this.requiredErrorMessage];
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} value
     * @return {?}
     */
    FormCheckboxComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var _this = this;
        /** @type {?} */
        var listElement = this.listRadioElement.nativeElement.querySelectorAll('.custom-control-input');
        try {
            for (var listElement_1 = __values(listElement), listElement_1_1 = listElement_1.next(); !listElement_1_1.done; listElement_1_1 = listElement_1.next()) {
                var element = listElement_1_1.value;
                element.checked = false;
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (listElement_1_1 && !listElement_1_1.done && (_a = listElement_1.return)) _a.call(listElement_1);
            }
            finally { if (e_1) throw e_1.error; }
        }
        if (!value) {
            return;
        }
        this._selectedIndexes = this.findIndexes(value);
        if (!this.listRadioElement || !this.listRadioElement.nativeElement) {
            return;
        }
        if (this.value) {
            setTimeout(function () {
                _this._selectedIndexes.map(function (index) {
                    listElement[index].checked = true;
                });
            });
        }
        var e_1, _a;
    };
    /**
     * @return {?}
     */
    FormCheckboxComponent.prototype.validate = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var result = {};
        if (this.hasRequiredError) {
            result['required'] = true;
        }
        return result;
    };
    // noinspection JSMethodCanBeStatic
    /**
     * @param {?} index
     * @param {?} event
     * @return {?}
     */
    FormCheckboxComponent.prototype.toggle = /**
     * @param {?} index
     * @param {?} event
     * @return {?}
     */
    function (index, event) {
        this._isTouched = true;
        /** @type {?} */
        var checked = event.target.checked;
        index = +index;
        if (checked) {
            this._selectedIndexes.push(index);
        }
        else {
            /** @type {?} */
            var indexOfIndex = this._selectedIndexes.indexOf(index);
            if (indexOfIndex > -1) {
                this._selectedIndexes.splice(indexOfIndex, 1);
            }
        }
        this.triggerChange();
    };
    /**
     * @return {?}
     */
    FormCheckboxComponent.prototype.reset = /**
     * @return {?}
     */
    function () {
        this._isTouched = false;
    };
    FormCheckboxComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ngx-form-checkbox',
                    template: "<label *ngIf=\"label\" [for]=\"id\">{{label}}</label>\n\n<div #listRadioElement>\n  <div class=\"custom-control custom-checkbox\" *ngFor=\"let option of selectOptions; let index = index;\">\n    <input class=\"custom-control-input\"\n           [ngClass]=\"{'is-invalid': invalid, 'is-valid': valid}\"\n           type=\"checkbox\"\n           [id]=\"id + '-' + index\"\n           [name]=\"id\"\n           (click)=\"toggle(index, $event)\"\n           title=\"\">\n    <label class=\"custom-control-label\" [for]=\"id + '-' + index\">{{option.text}}</label>\n  </div>\n</div>\n\n<ng-container *ngIf=\"valid && validMessage\">\n  <div class=\"custom-control-input is-valid\"></div>\n  <div class=\"valid-feedback\">{{validMessage}}</div>\n</ng-container>\n\n<ng-container *ngIf=\"invalid\">\n  <div class=\"custom-control-input is-invalid\"></div>\n  <div class=\"invalid-feedback\">\n    <span *ngFor=\"let message of errorMessages; let last = last;\">\n      {{message}}<br *ngIf=\"!last\">\n    </span>\n  </div>\n</ng-container>\n",
                    styles: [":host .form-check.is-valid~.invalid-feedback,:host .form-check.is-valid~.invalid-tooltip,:host .form-check.is-valid~.valid-feedback,:host .form-check.is-valid~.valid-tooltip,:host .was-validated~.invalid-feedback,:host .was-validated~.invalid-tooltip,:host .was-validated~.valid-feedback,:host .was-validated~.valid-tooltip{display:block}"],
                    providers: [
                        { provide: NG_VALUE_ACCESSOR, useExisting: FormCheckboxComponent, multi: true },
                        { provide: NG_VALIDATORS, useExisting: FormCheckboxComponent, multi: true }
                    ]
                },] },
    ];
    FormCheckboxComponent.propDecorators = {
        listRadioElement: [{ type: ViewChild, args: ['listRadioElement',] }]
    };
    return FormCheckboxComponent;
}(BaseListControlComponent));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
var FormInputComponent = /** @class */ (function (_super) {
    __extends(FormInputComponent, _super);
    function FormInputComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'text';
        _this.pattern = '';
        _this.readonly = false;
        _this.autocomplete = true;
        _this.trimResult = true;
        _this.minLengthErrorMessage = 'Value is too short.';
        _this.patternErrorMessage = 'Value is not valid.';
        _this.matchErrorMessage = 'Value does not match.';
        _this.focus = new EventEmitter();
        _this.blur = new EventEmitter();
        return _this;
    }
    Object.defineProperty(FormInputComponent.prototype, "match", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._match = value || '';
            this.triggerChange();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormInputComponent.prototype, "value", {
        get: /**
         * @return {?}
         */
        function () {
            if (!this._innerValue) {
                return '';
            }
            if ('string' !== typeof this._innerValue) {
                return this._innerValue;
            }
            return this.trimResult ? this._innerValue.trim() : this._innerValue;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            if (value !== this._innerValue) {
                this._innerValue = value;
                this.triggerChange();
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormInputComponent.prototype, "hasMatchError", {
        get: /**
         * @return {?}
         */
        function () {
            return !!this._match && this._match !== this.value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormInputComponent.prototype, "hasPatternError", {
        get: /**
         * @return {?}
         */
        function () {
            return this.customInput.errors && this.customInput.errors['pattern'];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormInputComponent.prototype, "hasMinLengthError", {
        get: /**
         * @return {?}
         */
        function () {
            return this.customInput.errors && this.customInput.errors['minlength'];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormInputComponent.prototype, "invalid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return true;
            }
            if (!this.customInput.touched) {
                return false;
            }
            return this.customInput.invalid || this.hasMatchError || this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormInputComponent.prototype, "valid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return false;
            }
            if (!this.customInput.touched) {
                return false;
            }
            return !this.customInput.invalid && !this.hasMatchError && !this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormInputComponent.prototype, "errorMessages", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasRequiredError) {
                return [this.requiredErrorMessage];
            }
            if (this.hasMatchError) {
                return [this.matchErrorMessage];
            }
            if (this.hasPatternError) {
                return [this.patternErrorMessage];
            }
            if (this.hasMinLengthError) {
                return [this.minLengthErrorMessage];
            }
            if (this.hasCustomError) {
                return this.innerCustomErrorMessages;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} value
     * @return {?}
     */
    FormInputComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this._innerValue = value;
    };
    /**
     * @return {?}
     */
    FormInputComponent.prototype.validate = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var result = this.customInput.errors || {};
        if (this.hasRequiredError) {
            result['required'] = true;
        }
        else {
            delete result['required'];
        }
        if (this.hasMatchError) {
            result['match'] = true;
        }
        return result;
    };
    // noinspection JSUnusedGlobalSymbols
    /**
     * @return {?}
     */
    FormInputComponent.prototype.reset = /**
     * @return {?}
     */
    function () {
        this.customInput.reset();
    };
    /**
     * @param {?} event
     * @return {?}
     */
    FormInputComponent.prototype.onFocus = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.focus.emit(event);
    };
    /**
     * @param {?} event
     * @return {?}
     */
    FormInputComponent.prototype.onBlur = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.blur.emit(event);
    };
    FormInputComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ngx-form-input',
                    template: "<label *ngIf=\"label\" [for]=\"id\">{{label}}</label>\n\n<!--suppress HtmlFormInputWithoutLabel -->\n<input class=\"form-control\"\n       [ngClass]=\"{'is-invalid': invalid, 'is-valid': valid}\"\n       [type]=\"type\"\n       [id]=\"id\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [readonly]=\"readonly\"\n       [minlength]=\"minlength\"\n       [maxlength]=\"maxlength\"\n       [placeholder]=\"placeholder\"\n       [title]=\"title\"\n       [pattern]=\"pattern\"\n       [(ngModel)]=\"value\"\n       (input)=\"triggerChange()\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (focus)=\"onFocus($event)\"\n       (blur)=\"onBlur($event)\"\n       #customInput=\"ngModel\">\n\n<div class=\"valid-feedback\" *ngIf=\"valid && validMessage\">{{validMessage}}</div>\n\n<div class=\"invalid-feedback\" *ngIf=\"invalid\">\n  <span *ngFor=\"let message of errorMessages; let last = last;\">\n    {{message}}<br *ngIf=\"!last\">\n  </span>\n</div>\n",
                    styles: [""],
                    providers: [
                        { provide: NG_VALUE_ACCESSOR, useExisting: FormInputComponent, multi: true },
                        { provide: NG_VALIDATORS, useExisting: FormInputComponent, multi: true }
                    ]
                },] },
    ];
    FormInputComponent.propDecorators = {
        type: [{ type: Input }],
        pattern: [{ type: Input }],
        readonly: [{ type: Input }],
        autocomplete: [{ type: Input }],
        minlength: [{ type: Input }],
        maxlength: [{ type: Input }],
        trimResult: [{ type: Input }],
        minLengthErrorMessage: [{ type: Input }],
        patternErrorMessage: [{ type: Input }],
        matchErrorMessage: [{ type: Input }],
        customInput: [{ type: ViewChild, args: ['customInput',] }],
        match: [{ type: Input }],
        focus: [{ type: Output }],
        blur: [{ type: Output }]
    };
    return FormInputComponent;
}(BaseControlComponent));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
var FormRadioComponent = /** @class */ (function (_super) {
    __extends(FormRadioComponent, _super);
    function FormRadioComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._isTouched = false;
        return _this;
    }
    Object.defineProperty(FormRadioComponent.prototype, "isEmpty", {
        get: /**
         * @return {?}
         */
        function () {
            return !this._selectedIndexes || !this._selectedIndexes.length;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormRadioComponent.prototype, "value", {
        get: /**
         * @return {?}
         */
        function () {
            return this.isEmpty ? null : this._selectOptions[this._selectedIndexes[0]].value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormRadioComponent.prototype, "invalid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return true;
            }
            if (!this._isTouched) {
                return false;
            }
            return this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormRadioComponent.prototype, "valid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return false;
            }
            if (!this._isTouched) {
                return false;
            }
            return !this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormRadioComponent.prototype, "errorMessages", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasRequiredError) {
                return [this.requiredErrorMessage];
            }
            if (this.hasCustomError) {
                return this.innerCustomErrorMessages;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} value
     * @return {?}
     */
    FormRadioComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var _this = this;
        /** @type {?} */
        var listElement = this.listRadioElement.nativeElement.querySelectorAll('.custom-control-input');
        try {
            for (var listElement_1 = __values(listElement), listElement_1_1 = listElement_1.next(); !listElement_1_1.done; listElement_1_1 = listElement_1.next()) {
                var element = listElement_1_1.value;
                element.checked = false;
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (listElement_1_1 && !listElement_1_1.done && (_a = listElement_1.return)) _a.call(listElement_1);
            }
            finally { if (e_1) throw e_1.error; }
        }
        if (!value) {
            return;
        }
        this._selectedIndexes = this.findIndexes([value]);
        if (!this.listRadioElement || !this.listRadioElement.nativeElement) {
            return;
        }
        if (this.value) {
            setTimeout(function () {
                /** @type {?} */
                var index = _this._selectedIndexes[0];
                listElement[index].checked = true;
            });
        }
        var e_1, _a;
    };
    /**
     * @return {?}
     */
    FormRadioComponent.prototype.validate = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var result = {};
        if (this.hasRequiredError) {
            result['required'] = true;
        }
        return result;
    };
    // noinspection JSMethodCanBeStatic
    /**
     * @param {?} index
     * @param {?} event
     * @return {?}
     */
    FormRadioComponent.prototype.toggle = /**
     * @param {?} index
     * @param {?} event
     * @return {?}
     */
    function (index, event) {
        this._isTouched = true;
        index = +index;
        if (this.required || index !== this._selectedIndexes[0]) {
            this._selectedIndexes = [+index];
        }
        else {
            this._selectedIndexes = [];
            event.target.checked = false;
        }
        this.triggerChange();
    };
    /**
     * @return {?}
     */
    FormRadioComponent.prototype.reset = /**
     * @return {?}
     */
    function () {
        this._isTouched = false;
    };
    FormRadioComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ngx-form-radio',
                    template: "<label *ngIf=\"label\" [for]=\"id\">{{label}}</label>\n\n<div #listRadioElement>\n  <div class=\"custom-control custom-radio\" *ngFor=\"let option of selectOptions; let index = index;\">\n    <input class=\"custom-control-input\"\n           [ngClass]=\"{'is-invalid': invalid, 'is-valid': valid}\"\n           type=\"radio\"\n           [id]=\"id + '-' + index\"\n           [name]=\"id\"\n           (click)=\"toggle(index, $event)\"\n           title=\"\">\n    <label class=\"custom-control-label\" [for]=\"id + '-' + index\">{{option.text}}</label>\n  </div>\n</div>\n\n<ng-container *ngIf=\"valid && validMessage\">\n  <div class=\"custom-control-input is-valid\"></div>\n  <div class=\"valid-feedback\">{{validMessage}}</div>\n</ng-container>\n\n<ng-container *ngIf=\"invalid\">\n  <div class=\"custom-control-input is-invalid\"></div>\n  <div class=\"invalid-feedback\">\n    <span *ngFor=\"let message of errorMessages; let last = last;\">\n      {{message}}<br *ngIf=\"!last\">\n    </span>\n  </div>\n</ng-container>\n",
                    styles: [":host .form-check.is-valid~.invalid-feedback,:host .form-check.is-valid~.invalid-tooltip,:host .form-check.is-valid~.valid-feedback,:host .form-check.is-valid~.valid-tooltip,:host .was-validated~.invalid-feedback,:host .was-validated~.invalid-tooltip,:host .was-validated~.valid-feedback,:host .was-validated~.valid-tooltip{display:block}"],
                    providers: [
                        { provide: NG_VALUE_ACCESSOR, useExisting: FormRadioComponent, multi: true },
                        { provide: NG_VALIDATORS, useExisting: FormRadioComponent, multi: true }
                    ]
                },] },
    ];
    FormRadioComponent.propDecorators = {
        listRadioElement: [{ type: ViewChild, args: ['listRadioElement',] }]
    };
    return FormRadioComponent;
}(BaseListControlComponent));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
var FormSelectComponent = /** @class */ (function (_super) {
    __extends(FormSelectComponent, _super);
    function FormSelectComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(FormSelectComponent.prototype, "multiple", {
        get: /**
         * @return {?}
         */
        function () {
            return this._multiple;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._multiple = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelectComponent.prototype, "isEmpty", {
        get: /**
         * @return {?}
         */
        function () {
            return !this._selectedIndexes ||
                !this._selectedIndexes.length ||
                (1 === this._selectedIndexes.length && -1 === this._selectedIndexes[0]);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelectComponent.prototype, "value", {
        get: /**
         * @return {?}
         */
        function () {
            var _this = this;
            if (this.isEmpty) {
                return null;
            }
            if (this._multiple) {
                return this._selectedIndexes.map(function (index) { return _this._selectOptions[index].value; });
            }
            else {
                /** @type {?} */
                var index = this._selectedIndexes[0];
                return this.selectOptions[index].value;
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelectComponent.prototype, "invalid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return true;
            }
            if (!this.customSelect.touched) {
                return false;
            }
            return this.customSelect.invalid || this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelectComponent.prototype, "valid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return false;
            }
            if (!this.customSelect.touched) {
                return false;
            }
            return !this.customSelect.invalid && !this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelectComponent.prototype, "errorMessages", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasRequiredError) {
                return [this.requiredErrorMessage];
            }
            if (this.hasCustomError) {
                return this.innerCustomErrorMessages;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} value
     * @return {?}
     */
    FormSelectComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        if (!this.multiple) {
            value = [value];
        }
        this._selectedIndexes = this.findIndexes(value);
    };
    /**
     * @return {?}
     */
    FormSelectComponent.prototype.validate = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var result = this.customSelect.errors || {};
        if (this.hasRequiredError) {
            result['required'] = true;
        }
        else {
            delete result['required'];
        }
        return result;
    };
    /**
     * @return {?}
     */
    FormSelectComponent.prototype.reset = /**
     * @return {?}
     */
    function () {
        this.customSelect.reset();
    };
    FormSelectComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ngx-form-select',
                    template: "<label *ngIf=\"label\" [for]=\"id\">{{label}}</label>\n\n<!--suppress HtmlFormInputWithoutLabel -->\n<select class=\"form-control\"\n        [ngClass]=\"{'is-invalid': invalid, 'is-valid': valid}\"\n        [id]=\"id\"\n        [title]=\"title\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [multiple]=\"multiple\"\n        [(ngModel)]=\"selectedIndexes\"\n        #customSelect=\"ngModel\"\n        #customSelectElement>\n  <option value=\"-1\" *ngIf=\"placeholder\">{{placeholder}}</option>\n  <option *ngFor=\"let option of selectOptions; let index = index;\" [value]=\"index\">{{option.text}}</option>\n</select>\n\n<div class=\"valid-feedback\" *ngIf=\"valid && validMessage\">{{validMessage}}</div>\n\n<div class=\"invalid-feedback\" *ngIf=\"invalid\">\n  <span *ngFor=\"let message of errorMessages; let last = last;\">\n    {{message}}<br *ngIf=\"!last\">\n  </span>\n</div>\n",
                    styles: [""],
                    providers: [
                        { provide: NG_VALUE_ACCESSOR, useExisting: FormSelectComponent, multi: true },
                        { provide: NG_VALIDATORS, useExisting: FormSelectComponent, multi: true }
                    ]
                },] },
    ];
    FormSelectComponent.propDecorators = {
        customSelect: [{ type: ViewChild, args: ['customSelect',] }],
        customSelectElement: [{ type: ViewChild, args: ['customSelectElement',] }],
        multiple: [{ type: Input }]
    };
    return FormSelectComponent;
}(BaseListControlComponent));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
var Common = /** @class */ (function () {
    function Common() {
    }
    /**
     * @return {?}
     */
    Common.isClient = /**
     * @return {?}
     */
    function () {
        return 'undefined' !== typeof window;
    };
    /**
     * @return {?}
     */
    Common.isServer = /**
     * @return {?}
     */
    function () {
        return 'undefined' === typeof window;
    };
    return Common;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
var FormSelect2Component = /** @class */ (function (_super) {
    __extends(FormSelect2Component, _super);
    function FormSelect2Component() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._isTouched = false;
        return _this;
    }
    Object.defineProperty(FormSelect2Component.prototype, "placeholder", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._placeholder = value;
            this.updateSelect2Options();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "required", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._required = value;
            this.updateSelect2Options();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "disabled", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._disabled = value;
            this.updateSelect2Options();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "multiple", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._multiple = value;
            this.updateSelect2Options();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "tag", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._tag = value;
            this.updateSelect2Options();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "tokenSeparators", {
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._tag = value;
            this.updateSelect2Options();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "value", {
        get: /**
         * @return {?}
         */
        function () {
            var _this = this;
            if (!this._selectedIndexes || !this._selectedIndexes.length) {
                return null;
            }
            /** @type {?} */
            var result = this._selectedIndexes.reduce(function (currentResult, index) {
                if (Number.isInteger(index) && _this._selectOptions[index]) {
                    currentResult.push(_this._selectOptions[index].value);
                }
                else if (_this._tag) {
                    /** @type {?} */
                    var match = index['value'].match(/^number: {([\d]+)}$/);
                    if (match) {
                        currentResult.push(match[1]);
                    }
                    else {
                        currentResult.push(index['value']);
                    }
                }
                return currentResult;
            }, []);
            return this._multiple ? result : result[0];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "invalid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return true;
            }
            if (!this._isTouched) {
                return false;
            }
            return this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "valid", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasCustomError) {
                return false;
            }
            if (!this._isTouched) {
                return false;
            }
            return !this.hasRequiredError;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSelect2Component.prototype, "errorMessages", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.hasRequiredError) {
                return [this.requiredErrorMessage];
            }
            if (this.hasCustomError) {
                return this.innerCustomErrorMessages;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    FormSelect2Component.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        this.updateSelect2Options();
    };
    /**
     * @param {?} value
     * @return {?}
     */
    FormSelect2Component.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        if (this._multiple && value && value.length) {
            this.selectValues(value);
        }
        else if (!this._multiple) {
            this.selectValue(value);
        }
        else {
            this.cleanValue();
        }
    };
    /**
     * @return {?}
     */
    FormSelect2Component.prototype.validate = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var result = {};
        if (this.hasRequiredError) {
            result['required'] = true;
        }
        return result;
    };
    // noinspection JSUnusedGlobalSymbols
    /**
     * @return {?}
     */
    FormSelect2Component.prototype.reset = /**
     * @return {?}
     */
    function () {
        this._isTouched = false;
    };
    /**
     * @return {?}
     */
    FormSelect2Component.prototype.afterInitOptions = /**
     * @return {?}
     */
    function () {
        this._selectOptions = __spread(this._selectOptions);
        this.updateSelect2Options();
    };
    /**
     * @param {?} values
     * @return {?}
     */
    FormSelect2Component.prototype.selectValues = /**
     * @param {?} values
     * @return {?}
     */
    function (values) {
        var _this = this;
        this._selectedIndexes = [];
        /** @type {?} */
        var select2Data = [];
        if (values && values.length) {
            values.map(function (value) {
                /** @type {?} */
                var index = _this.findIndex(value);
                if (index > -1) {
                    _this._selectedIndexes.push(index);
                    select2Data.push(index);
                }
                else if (_this._tag) {
                    _this._selectedIndexes.push({ value: value });
                    select2Data.push(value);
                }
            });
        }
        if (Common.isClient()) {
            this._selectElement.val(select2Data);
            this._selectElement.trigger('change');
        }
    };
    /**
     * @return {?}
     */
    FormSelect2Component.prototype.updateSelectedIndexes = /**
     * @return {?}
     */
    function () {
        var _this = this;
        if (Common.isServer()) {
            return;
        }
        /** @type {?} */
        var oldSelectedIndexes = JSON.stringify(this._selectedIndexes);
        /** @type {?} */
        var value = this._selectElement.val();
        if ('number' === typeof value || ('string' === typeof value && Number.isInteger(+value))) {
            this._selectedIndexes = [+value];
        }
        else if ('string' === typeof value && this._tag) {
            this._selectedIndexes = [{ value: value }];
        }
        else if (value && value.length) {
            this._selectedIndexes = value.map(function (item) {
                if (Number.isInteger(+item)) {
                    return +item;
                }
                if (_this._tag) {
                    return { value: item };
                }
                return null;
            });
        }
        else {
            this._selectedIndexes = [];
        }
        /** @type {?} */
        var newSelectedIndexes = JSON.stringify(this._selectedIndexes);
        if (newSelectedIndexes !== oldSelectedIndexes) {
            this.triggerChange();
        }
    };
    /**
     * @param {?} value
     * @return {?}
     */
    FormSelect2Component.prototype.selectValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        if (Common.isServer()) {
            return;
        }
        /** @type {?} */
        var index = this.findIndex(value);
        if (index > -1) {
            this._selectedIndexes = [index];
            this._selectElement.val(this._selectedIndexes);
            this._selectElement.trigger('change');
        }
        else if (this._tag) {
            this._selectedIndexes = [{ value: value }];
            this._selectElement.val(value);
            this._selectElement.trigger('change');
        }
        else {
            this.cleanValue();
        }
    };
    /**
     * @return {?}
     */
    FormSelect2Component.prototype.cleanValue = /**
     * @return {?}
     */
    function () {
        if (Common.isServer()) {
            return;
        }
        this._selectedIndexes = [];
        this._selectElement.val(null);
        this._selectElement.trigger('change');
    };
    /**
     * @return {?}
     */
    FormSelect2Component.prototype.updateSelect2Options = /**
     * @return {?}
     */
    function () {
        var _this = this;
        if (Common.isServer() || !this.customSelectElement || !this.customSelectElement.nativeElement) {
            return;
        }
        this._selectElement = $(this.customSelectElement.nativeElement);
        if (this._selectElement.hasClass('select2-hidden-accessible')) {
            this._selectElement.select2().empty();
            this._selectElement.select2('destroy');
        }
        this._selectElement.select2({
            tags: this._tag,
            tokenSeparators: this._tokenSeparators || [],
            placeholder: this._placeholder,
            al