/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, forwardRef, Input } from '@angular/core';
import fieldValidations from '../../fixtures/field-validations';
import { FormFieldAbstract } from '../form/form-field.abstract';
import { getBooleanValue } from '../../utils/get-boolean-value.util';
var SelectComponent = /** @class */ (function (_super) {
    tslib_1.__extends(SelectComponent, _super);
    function SelectComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /**
     * @return {?}
     */
    SelectComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        this.initValues();
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.initValues = /**
     * @return {?}
     */
    function () {
        var defaultProps = SelectComponent.defaultProps;
        this.className = this.classNameInput || defaultProps.className;
        this.disabled = getBooleanValue(this.disabledInput, defaultProps.disabled);
        this.floatLabel = this.floatLabelInput || defaultProps.floatLabel;
        this.id = this.idInput || defaultProps.id;
        this.label = this.labelInput || defaultProps.label;
        this.name = this.nameInput || defaultProps.name;
        this.options = this.optionsInput || defaultProps.options;
        this.required = getBooleanValue(this.requiredInput, defaultProps.required);
        this.value = this.valueInput || defaultProps.value;
        this.isFocused = false;
        this.isTouched = false;
        this.selectedOption = this.getInitOption(this.value, this.options);
        this.isValid = this.validate(this.value, this.required);
    };
    /**
     * @param {?} value
     * @param {?} required
     * @return {?}
     */
    SelectComponent.prototype.validate = /**
     * @param {?} value
     * @param {?} required
     * @return {?}
     */
    function (value, required) {
        if (required && !value) {
            /** @type {?} */
            var fieldValidation = fieldValidations['required'];
            this.errorMessage = fieldValidation.errorMessage;
            return false;
        }
        return true;
    };
    /**
     * @param {?} value
     * @param {?} options
     * @return {?}
     */
    SelectComponent.prototype.getInitOption = /**
     * @param {?} value
     * @param {?} options
     * @return {?}
     */
    function (value, options) {
        for (var i = 0; i < options.length; i++) {
            /** @type {?} */
            var currentOption = options[i];
            if (value === currentOption.value) {
                return currentOption;
            }
        }
        return (/** @type {?} */ ({}));
    };
    /**
     * @param {?} event
     * @param {?} selectedOption
     * @return {?}
     */
    SelectComponent.prototype.selectOption = /**
     * @param {?} event
     * @param {?} selectedOption
     * @return {?}
     */
    function (event, selectedOption) {
        event.stopImmediatePropagation();
        this.selectedOption = selectedOption;
        this.value = selectedOption
            ? selectedOption.value
            : '';
        this.closeMenu();
        this.isValid = this.validate(this.value, this.required);
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.openMenu = /**
     * @return {?}
     */
    function () {
        if (!this.disabled) {
            this.isFocused = true;
        }
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.closeMenu = /**
     * @return {?}
     */
    function () {
        this.isTouched = true;
        this.isFocused = false;
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.updateAndValidity = /**
     * @return {?}
     */
    function () {
        this.isTouched = true;
        this.isValid = this.validate(this.value, this.required);
    };
    SelectComponent.defaultProps = {
        className: '',
        disabled: false,
        errorMessage: '',
        floatLabel: '',
        id: '',
        label: '',
        name: '',
        options: [],
        required: false,
        selectedOption: (/** @type {?} */ ({})),
        value: ''
    };
    SelectComponent.decorators = [
        { type: Component, args: [{
                    providers: [{
                            provide: FormFieldAbstract,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return SelectComponent; }))
                        }],
                    selector: 'materialize-select',
                    template: "<materialize-label>{{ label }}</materialize-label>\n\n<div class=\"form-control-container\"\n  tabindex=\"0\"\n\n  (focus)=\"openMenu()\"\n  (blur)=\"closeMenu()\"\n  (click)=\"openMenu()\"\n\n  [ngClass]=\"className\"\n  [class.active]=\"isFocused || (selectedOption && selectedOption.content)\"\n  [class.disabled]=\"disabled\"\n  [class.focused]=\"isFocused\"\n  [class.float-label]=\"floatLabel\"\n  [class.error]=\"!isValid && isTouched\">\n\n  <div class=\"form-control-wrapper\">\n    <div class=\"form-control-float-label\">{{ floatLabel }}</div>\n\n    <div class=\"form-control\" [id]=\"id\">{{ selectedOption ? selectedOption.content : '' }}</div>\n\n    <materialize-icon className=\"icon-error\" name=\"error\" size=\"lg\" *ngIf=\"!isValid && isTouched\"></materialize-icon>\n  </div>\n\n  <div class=\"select-menu\" [class.open]=\"isFocused\">\n    <div class=\"select-option\" *ngFor=\"let option of options\" [class.active]=\"value === option.value\" (click)=\"selectOption($event, option)\">\n      {{ option.content }}\n    </div>\n  </div>\n\n  <materialize-form-message type=\"error\" *ngIf=\"!isValid && isTouched\">{{ errorMessage }}</materialize-form-message>\n</div>\n\n  <!-- <select\n    (blur)=\"onSelectBlur()\"\n    (change)=\"onSelectChange($event)\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [value]=\"value\">\n    <option [value]=\"option.value\" *ngFor=\"let option of options\">\n      {{ option.content }}\n    </option>\n  </select> -->\n",
                    styles: [".form-control-container{background-color:#f4f3f4;border-bottom:1px solid #6a6a6a;border-radius:4px 4px 0 0;display:flex;flex-direction:row;outline:0;position:relative}.form-control-container::after{background-color:#5707eb;bottom:-1px;content:'';height:2px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:width 250ms;width:0;z-index:10}.float-label.form-control-container .form-control{padding-top:24px}.active.form-control-container .form-control-float-label,.focused.form-control-container .form-control-float-label{font-size:12px;top:0;-webkit-transform:unset;transform:unset}.focused.form-control-container .form-control-float-label{color:#5707eb}.focused.form-control-container::after{width:100%}.focused.form-control-container .form-label{color:#5707eb}.focused.form-control-container .form-control{caret-color:#5707eb}.disabled.form-control-container .form-control-wrapper{border-bottom-color:#f4f3f4;cursor:not-allowed}.disabled.form-control-container .form-control,.disabled.form-control-container .form-control-float-label{cursor:not-allowed}.disabled.form-control-container .form-control,.disabled.form-control-container .form-control-float-label,.disabled.form-control-container .form-label{color:#dcdbdc}.form-control-wrapper{position:relative;width:100%}.form-control-wrapper ::ng-deep .form-icon-error{color:#a22027;display:none;position:absolute;right:12px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10}.form-control{background-color:transparent;border:0;box-sizing:border-box;color:#000;font-family:Roboto;font-size:16px;font-weight:300;height:100%;max-width:100%;outline:0;padding:12px;resize:vertical;width:100%}.form-control-float-label{background-color:#f4f3f4;color:#6a6a6a;cursor:text;font-family:Roboto;font-size:16px;font-weight:300;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:250ms;width:100%;z-index:10}.form-control-float-label:not(:empty){padding:8px 12px 6px}.select-container{cursor:pointer}.select-container .form-control{position:relative}.select-container .form-control::before{border-color:#6a6a6a transparent;border-style:solid;border-width:5px 5px 0;content:'';position:absolute;right:12px;top:18px;transition:transform 250ms;transition:transform 250ms,-webkit-transform 250ms}.select-container.float-label .form-float-label{cursor:pointer}.select-container.focused .form-control::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.select-container.error .form-control::before{border-top-color:#a22027}.select-container.error .icon-error{right:28px}.select-container.disabled .form-control::before{border-bottom-color:#dcdbdc;border-top-color:#dcdbdc}.select-menu{background:#fff;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);cursor:pointer;display:none;left:0;padding:8px 0;position:absolute;top:100%;width:100%;z-index:20}.select-menu.open{display:block}.select-muenu-option{color:#6a6a6a;font-size:14px;font-weight:200;min-height:46px;outline:0;padding:16px 12px}.select-muenu-option:hover{background-color:#f4f3f4}.select-muenu-option.active{background-color:rgba(87,7,235,.1)}"]
                }] }
    ];
    SelectComponent.propDecorators = {
        classNameInput: [{ type: Input, args: ['className',] }],
        disabledInput: [{ type: Input, args: ['disabled',] }],
        floatLabelInput: [{ type: Input, args: ['floatLabel',] }],
        idInput: [{ type: Input, args: ['id',] }],
        labelInput: [{ type: Input, args: ['label',] }],
        nameInput: [{ type: Input, args: ['name',] }],
        optionsInput: [{ type: Input, args: ['options',] }],
        requiredInput: [{ type: Input, args: ['required',] }],
        valueInput: [{ type: Input, args: ['value',] }]
    };
    return SelectComponent;
}(FormFieldAbstract));
export { SelectComponent };
if (false) {
    /** @type {?} */
    SelectComponent.defaultProps;
    /** @type {?} */
    SelectComponent.prototype.classNameInput;
    /** @type {?} */
    SelectComponent.prototype.disabledInput;
    /** @type {?} */
    SelectComponent.prototype.floatLabelInput;
    /** @type {?} */
    SelectComponent.prototype.idInput;
    /** @type {?} */
    SelectComponent.prototype.labelInput;
    /** @type {?} */
    SelectComponent.prototype.nameInput;
    /** @type {?} */
    SelectComponent.prototype.optionsInput;
    /** @type {?} */
    SelectComponent.prototype.requiredInput;
    /** @type {?} */
    SelectComponent.prototype.valueInput;
    /** @type {?} */
    SelectComponent.prototype.className;
    /** @type {?} */
    SelectComponent.prototype.disabled;
    /** @type {?} */
    SelectComponent.prototype.errorMessage;
    /** @type {?} */
    SelectComponent.prototype.floatLabel;
    /** @type {?} */
    SelectComponent.prototype.id;
    /** @type {?} */
    SelectComponent.prototype.isFocused;
    /** @type {?} */
    SelectComponent.prototype.isTouched;
    /** @type {?} */
    SelectComponent.prototype.isValid;
    /** @type {?} */
    SelectComponent.prototype.label;
    /** @type {?} */
    SelectComponent.prototype.name;
    /** @type {?} */
    SelectComponent.prototype.options;
    /** @type {?} */
    SelectComponent.prototype.required;
    /** @type {?} */
    SelectComponent.prototype.selectedOption;
    /** @type {?} */
    SelectComponent.prototype.value;
}
//# sourceMappingURL=data:application/json;base64, 