/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, Output, QueryList, Renderer2, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormFieldAbstract } from '../form/form-field.abstract';
import { getBooleanValue } from '../../utils/get-boolean-value.util';
import { SelectOptionComponent } from '../select-option/select-option.component';
var SelectComponent = /** @class */ (function (_super) {
    tslib_1.__extends(SelectComponent, _super);
    function SelectComponent(renderer) {
        var _this = _super.call(this) || this;
        _this.renderer = renderer;
        _this.onChangeEmitter = new EventEmitter();
        _this.addBackdropListener = _this.addBackdropListener.bind(_this);
        _this.onSelectOption = _this.onSelectOption.bind(_this);
        _this.registerOptions = _this.registerOptions.bind(_this);
        return _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.isNativeControl = getBooleanValue(this.isNativeControlInput, defaultProps.isNativeControl);
        this.name = this.nameInput || defaultProps.name;
        this.required = getBooleanValue(this.requiredInput, defaultProps.required);
        this.value = this.valueInput || defaultProps.value;
        this.isFocused = false;
        this.isOpen = false;
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.ngAfterContentInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.optionsQueryList.changes.subscribe((/**
         * @param {?} changes
         * @return {?}
         */
        function (changes) {
            _this.options = _this.optionsQueryList.toArray();
            setTimeout(_this.registerOptions, 0);
        }));
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.registerOptions = /**
     * @return {?}
     */
    function () {
        for (var i = 0; i < this.options.length; i++) {
            /** @type {?} */
            var currentOption = this.options[i];
            currentOption.isActive = (currentOption.value === this.value);
            currentOption.onClickEmitter.subscribe(this.onSelectOption);
        }
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.desactiveAllOptions = /**
     * @return {?}
     */
    function () {
        this.options.forEach((/**
         * @param {?} option
         * @return {?}
         */
        function (option) {
            option.isActive = false;
        }));
    };
    /**
     * @param {?} value
     * @return {?}
     */
    SelectComponent.prototype.onSelectOption = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var _this = this;
        /** @type {?} */
        var prevSelectOption = this.options.find((/**
         * @param {?} item
         * @return {?}
         */
        function (item) { return item.value === _this.value; }));
        if (prevSelectOption) {
            prevSelectOption.isActive = false;
        }
        /** @type {?} */
        var selectOption = this.options.find((/**
         * @param {?} item
         * @return {?}
         */
        function (item) { return item.value === value; }));
        if (selectOption) {
            this.cloneOption(selectOption);
            this.value = value;
            this.isOpen = false;
            selectOption.isActive = true;
            this.onChangeEmitter.emit(this.value);
            this.onChange(this.value);
        }
    };
    /**
     * @param {?} selectedOption
     * @return {?}
     */
    SelectComponent.prototype.cloneOption = /**
     * @param {?} selectedOption
     * @return {?}
     */
    function (selectedOption) {
        if (!this.labelContainerRef) {
            return;
        }
        var labelContainer = this.labelContainerRef.nativeElement;
        var optionTemplateRef = selectedOption.optionTemplateRef;
        if (labelContainer.firstChild) {
            this.renderer.removeChild(labelContainer, labelContainer.firstChild);
        }
        if (optionTemplateRef) {
            var firstChild = optionTemplateRef.nativeElement.firstChild;
            /** @type {?} */
            var cloned = firstChild.cloneNode(true);
            this.renderer.appendChild(labelContainer, cloned);
        }
    };
    /**
     * @param {?} event
     * @return {?}
     */
    SelectComponent.prototype.onChangeNativeOption = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        var selectedOptions = event.target.selectedOptions;
        var value = selectedOptions[0].value;
        this.value = value;
        this.onChangeEmitter.emit(this.value);
        this.onChange(this.value);
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.onBlur = /**
     * @return {?}
     */
    function () {
        this.isFocused = false;
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.onFocus = /**
     * @return {?}
     */
    function () {
        if (!this.disabled) {
            this.isFocused = true;
            this.onTouched();
        }
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.onClick = /**
     * @return {?}
     */
    function () {
        if (!this.disabled) {
            this.isFocused = true;
            this.isOpen = true;
            if (!this.isNativeControl) {
                setTimeout(this.addBackdropListener, 0);
            }
        }
    };
    /**
     * @return {?}
     */
    SelectComponent.prototype.addBackdropListener = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.backdropRef.nativeElement.addEventListener('click', (/**
         * @return {?}
         */
        function () {
            _this.isOpen = false;
        }));
    };
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    SelectComponent.prototype.setDisabledState = /**
     * @param {?} isDisabled
     * @return {?}
     */
    function (isDisabled) {
        this.disabled = isDisabled;
    };
    /**
     * @param {?} value
     * @return {?}
     */
    SelectComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var _this = this;
        this.value = value;
        setTimeout((/**
         * @return {?}
         */
        function () {
            _this.onSelectOption(_this.value);
        }), 0);
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    SelectComponent.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onChange = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    SelectComponent.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onTouched = fn;
    };
    /**
     * @param {?} value
     * @return {?}
     */
    SelectComponent.prototype.onChange = /**
     * @param {?} value
     * @return {?}
     */
    function (value) { };
    /**
     * @return {?}
     */
    SelectComponent.prototype.onTouched = /**
     * @return {?}
     */
    function () { };
    SelectComponent.defaultProps = {
        className: '',
        disabled: false,
        floatLabel: '',
        id: '',
        isNativeControl: false,
        name: '',
        required: false,
        value: ''
    };
    SelectComponent.decorators = [
        { type: Component, args: [{
                    providers: [{
                            provide: FormFieldAbstract,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return SelectComponent; }))
                        }, {
                            multi: true,
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return SelectComponent; }))
                        }],
                    selector: 'materialize-select',
                    template: "<div class=\"form-control-select\" *ngIf=\"isNativeControl\">\n  <div class=\"form-control-container form-control-native\"\n    [ngClass]=\"className\"\n    [class.float-label]=\"floatLabel\"\n    [class.active]=\"value\"\n    [class.focused]=\"isFocused\"\n    [class.disabled]=\"disabled\"\n  >\n    <div class=\"form-control-wrapper\">\n      <div class=\"form-control-float-label\">{{ floatLabel }}</div>\n      <select class=\"form-control\"\n        [attr.id]=\"id\"\n        [disabled]=\"disabled\"\n        [name]=\"name\"\n        [required]=\"required\"\n        [value]=\"value\"\n\n        (blur)=\"onBlur()\"\n        (click)=\"onClick()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onChangeNativeOption($event)\">\n        <option [value]=\"option.value\" *ngFor=\"let option of optionsQueryList\">\n          {{ option.content }}\n        </option>\n      </select>\n      <materialize-icon className=\"form-icon-error\" name=\"error\" size=\"lg\"></materialize-icon>\n    </div>\n    <materialize-icon className=\"form-control-select-icon\" name=\"arrow_drop_down\" size=\"lg\"></materialize-icon>\n  </div>\n</div>\n\n\n<div class=\"form-control-select\" *ngIf=\"!isNativeControl\" [class.open]=\"isOpen\" tabindex=\"0\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n  <div #backdrop *ngIf=\"isOpen\" class=\"form-select-backdrop\"></div>\n  <div class=\"form-control-container\"\n\n    (click)=\"onClick()\"\n\n    [ngClass]=\"className\"\n    [class.float-label]=\"floatLabel\"\n    [class.active]=\"value\"\n    [class.focused]=\"isFocused\"\n    [class.disabled]=\"disabled\">\n    <div class=\"form-control-wrapper\">\n      <div class=\"form-control-float-label\">{{ floatLabel }}</div>\n      <div class=\"form-control\" #labelContainer></div>\n      <materialize-icon className=\"form-icon-error\" name=\"error\" size=\"lg\"></materialize-icon>\n    </div>\n\n    <materialize-icon className=\"form-control-select-icon\" name=\"arrow_drop_down\" size=\"lg\"></materialize-icon>\n  </div>\n\n  <div class=\"form-control-select-menu\">\n    <ng-content select=\"materialize-select-option\"></ng-content>\n  </div>\n</div>\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{-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;box-sizing:border-box;color:#000;font-family:Roboto;font-size:16px;font-weight:300;height:100%;line-height:18px;max-width:100%;outline:0;padding:12px;resize:vertical;width:100%}.ng-touched.ng-dirty.ng-invalid:host .form-control-container::after{background-color:#a22027;width:100%}.ng-touched.ng-dirty.ng-invalid:host .form-control-float-label{color:#a22027}.ng-touched.ng-dirty.ng-invalid:host .form-control{caret-color:#a22027;padding-right:48px}.ng-touched.ng-dirty.ng-invalid:host .form-control-wrapper ::ng-deep .form-icon-error{display:block}.form-control-float-label{background-color:#f4f3f4;border-radius:4px 4px 0 0;color:#6a6a6a;cursor:text;font-family:Roboto;font-size:16px;font-weight:300;left:0;pointer-events:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:250ms;width:100%}.form-control-float-label:not(:empty){padding:8px 12px 4px}.form-control{cursor:pointer}.form-control::before{content:'';display:inline-block;height:18px;width:0}.form-select-backdrop{background-color:transparent;bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:10}.form-control-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}.form-control-container.disabled ::ng-deep .form-control-select-icon{color:#dcdbdc;cursor:not-allowed}.form-control-select{outline:0;position:relative}.form-control-select.open ::ng-deep .form-control-select-icon{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.form-control-select ::ng-deep .form-control-select-icon{color:#6a6a6a;cursor:pointer;position:absolute;right:8px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.form-control-select.open .form-control-select-menu{display:block}"]
                }] }
    ];
    /** @nocollapse */
    SelectComponent.ctorParameters = function () { return [
        { type: Renderer2 }
    ]; };
    SelectComponent.propDecorators = {
        backdropRef: [{ type: ViewChild, args: ['backdrop',] }],
        labelContainerRef: [{ type: ViewChild, args: ['labelContainer',] }],
        optionsQueryList: [{ type: ContentChildren, args: [SelectOptionComponent,] }],
        onChangeEmitter: [{ type: Output, args: ['onChange',] }],
        classNameInput: [{ type: Input, args: ['className',] }],
        disabledInput: [{ type: Input, args: ['disabled',] }],
        floatLabelInput: [{ type: Input, args: ['floatLabel',] }],
        idInput: [{ type: Input, args: ['id',] }],
        isNativeControlInput: [{ type: Input, args: ['isNativeControl',] }],
        nameInput: [{ type: Input, args: ['name',] }],
        requiredInput: [{ type: Input, args: ['required',] }],
        valueInput: [{ type: Input, args: ['value',] }]
    };
    return SelectComponent;
}(FormFieldAbstract));
export { SelectComponent };
if (false) {
    /** @type {?} */
    SelectComponent.defaultProps;
    /** @type {?} */
    SelectComponent.prototype.backdropRef;
    /** @type {?} */
    SelectComponent.prototype.labelContainerRef;
    /** @type {?} */
    SelectComponent.prototype.optionsQueryList;
    /** @type {?} */
    SelectComponent.prototype.onChangeEmitter;
    /** @type {?} */
    SelectComponent.prototype.classNameInput;
    /** @type {?} */
    SelectComponent.prototype.disabledInput;
    /** @type {?} */
    SelectComponent.prototype.floatLabelInput;
    /** @type {?} */
    SelectComponent.prototype.idInput;
    /** @type {?} */
    SelectComponent.prototype.isNativeControlInput;
    /** @type {?} */
    SelectComponent.prototype.nameInput;
    /** @type {?} */
    SelectComponent.prototype.requiredInput;
    /** @type {?} */
    SelectComponent.prototype.valueInput;
    /** @type {?} */
    SelectComponent.prototype.className;
    /** @type {?} */
    SelectComponent.prototype.disabled;
    /** @type {?} */
    SelectComponent.prototype.floatLabel;
    /** @type {?} */
    SelectComponent.prototype.id;
    /** @type {?} */
    SelectComponent.prototype.isFocused;
    /** @type {?} */
    SelectComponent.prototype.isNativeControl;
    /** @type {?} */
    SelectComponent.prototype.isOpen;
    /** @type {?} */
    SelectComponent.prototype.name;
    /** @type {?} */
    SelectComponent.prototype.options;
    /** @type {?} */
    SelectComponent.prototype.required;
    /** @type {?} */
    SelectComponent.prototype.valueLabel;
    /** @type {?} */
    SelectComponent.prototype.value;
    /**
     * @type {?}
     * @private
     */
    SelectComponent.prototype.renderer;
}
//# sourceMappingURL=data:application/json;base64, 