/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright UIUX Engineering All Rights Reserved.
 */
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, } from '@angular/core';
import { AbstractControl, Validators } from '@angular/forms';
import { INITIAL_FORM_VALUE } from '@uiux/cdk/forms';
import { forbiddenWhitespaceValidator } from '@uiux/cdk/validators';
import { default as _isString } from 'lodash-es/isString';
import { Subscription } from 'rxjs';
import { SpSearchAutoComplateFormGroupFactory, } from './search-autocomplete-form-group.service';
/**
 * @record
 */
export function ISpinnerConfig() { }
if (false) {
    /** @type {?|undefined} */
    ISpinnerConfig.prototype.diameter;
    /** @type {?|undefined} */
    ISpinnerConfig.prototype.strokeWidth;
}
export class SpSearchAutoCompleteComponent {
    /**
     * @param {?} _changeDetector
     * @param {?} _formGroupFactory
     */
    constructor(_changeDetector, _formGroupFactory) {
        this._changeDetector = _changeDetector;
        this._formGroupFactory = _formGroupFactory;
        this._formSub = Subscription.EMPTY;
        this._currentSearchValue = '';
        this._optionIsSelecting = false;
        this.formValue = INITIAL_FORM_VALUE;
        this.inputBlur = true;
        this.bindStyle = true;
        this.placeholder = '';
        this.autoCompleteData = [];
        /**
         * Options
         * textOnly, iconText
         */
        this.optionTemplate = 'textOnly';
        this.delay = 300;
        this.minLength = 3;
        this.iconLeft = false;
        this.isSearching = false;
        this.disableSubmit = false;
        this.overrideMaterial = true;
        this.spinnerConfig = {
            diameter: 14,
            strokeWidth: 1,
        };
        /**
         * String emitted from input value changes.
         * Always a string value.
         */
        this.valueChanges = new EventEmitter();
        /**
         * Object or String emitted from autocomplete option select.
         * Always a string value.
         */
        this.optionSelected = new EventEmitter();
        /**
         * Object or String emitted from keyboard 'Enter' event
         * or click event on search icon.
         */
        this.submit = new EventEmitter();
        /**
         * Aggregation of optionSelected, onSubmitHandler, and valueChanges events.
         * ( You receive all events )
         */
        this.changes = new EventEmitter();
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set control(val) {
        this._controller = val;
    }
    /**
     * @return {?}
     */
    get control() {
        if (!this._controller) {
            this.formGroupService = this._formGroupFactory.create();
            this.formGroup = this.formGroupService.form;
            this._controller = this.formGroup.controls['search'];
            if (this.minLength !== 3) {
                // tslint:disable-next-line:no-string-literal
                this.formGroup.controls['search'].setValidators([
                    forbiddenWhitespaceValidator(),
                    Validators.minLength(this.minLength),
                ]);
            }
        }
        return this._controller;
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        /**
         * valueChanges handler
         */
        this._formSub = this.control.valueChanges.subscribe((/**
         * @param {?} val
         * @return {?}
         */
        (val) => {
            if (_isString(val) && this._currentSearchValue !== val.trim()) {
                this._currentSearchValue = val.trim();
                if (this._timer) {
                    clearTimeout(this._timer);
                }
                this._timer = setTimeout((/**
                 * @return {?}
                 */
                () => {
                    if (!this._optionIsSelecting) {
                        this.valueChanges.emit(this._currentSearchValue);
                        this.onChange(this._currentSearchValue);
                    }
                    else {
                        this._optionIsSelecting = false;
                    }
                }), this.delay);
            }
        }));
    }
    /**
     * onSubmitHandler handler
     * @return {?}
     */
    onSubmitHandler() {
        if (!this.disableSubmit && this._controller.valid && !this._controller.pristine) {
            this.submit.emit(this._currentSearchValue);
            this.onChange(this._currentSearchValue);
        }
    }
    /**
     * optionSelected handler
     * @param {?} e
     * @return {?}
     */
    onOptionSelected(e) {
        this.isSearching = false;
        this._optionIsSelecting = true;
        if (this._currentSearchValue !== e.option.value) {
            this._currentSearchValue = e.option.value;
            this.optionSelected.emit(this._currentSearchValue);
            this.onChange(this._currentSearchValue);
        }
    }
    /**
     * @return {?}
     */
    detectChanges() {
        this._changeDetector.detectChanges();
    }
    /**
     * @param {?} val
     * @return {?}
     */
    onChange(val) {
        this.changes.emit(val);
    }
    /**
     * if optionValueMap is provided, return
     * the value mapped in option, else, return
     * the option itself.
     *
     * @param {?} option
     * @return {?} string
     */
    formatOptionText(option) {
        if (this.optionFormatter) {
            return this.optionFormatter(option);
        }
        else {
            return option;
        }
    }
}
SpSearchAutoCompleteComponent.decorators = [
    { type: Component, args: [{
                selector: 'ix-search-autocomplete',
                template: "<mat-form-field [ngClass]=\"{'mat-form-field-label-wrapper-focus': inputBlur, 'override-mat': overrideMaterial }\">\n  <input\n    class=\"search-autocomplete-input\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    name=\"search\"\n    matInput\n    type=\"text\"\n    [matAutocomplete]=\"auto\"\n    (focus)=\"detectChanges(); inputBlur = false;\"\n    (blur)=\"detectChanges(); inputBlur = true;\"\n    (keyup.enter)=\"onSubmitHandler()\"/>\n  <button mat-button\n          class=\"search-autocomplete-search-icon\"\n          *ngIf=\"!isSearching && iconLeft\"\n          matPrefix\n          mat-icon-button\n          aria-label=\"Search\"\n          [disabled]=\"control.invalid || control.pristine\"\n          (click)=\"$event.stopPropagation(); onSubmitHandler()\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matPrefix\n          class=\"search-autocomplete-spinner pad-top-9\"\n          mat-icon-button\n          *ngIf=\"isSearching && iconLeft\">\n    <mat-progress-spinner\n      [diameter]=\"spinnerConfig.diameter\"\n      [strokeWidth]=\"spinnerConfig.strokeWidth\"\n      [mode]=\"'indeterminate'\">\n    </mat-progress-spinner>\n  </button>\n\n  <button mat-button\n          class=\"search-autocomplete-search-icon\"\n          *ngIf=\"!isSearching && !iconLeft\"\n          matSuffix\n          mat-icon-button\n          aria-label=\"Search\"\n          (click)=\"$event.stopPropagation(); onSubmitHandler()\"\n          [disabled]=\"control.invalid || control.pristine\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matSuffix\n          class=\"search-autocomplete-spinner pad-top-9\"\n          mat-icon-button\n          *ngIf=\"isSearching && !iconLeft\">\n    <mat-progress-spinner\n      [diameter]=\"spinnerConfig.diameter\"\n      [strokeWidth]=\"spinnerConfig.strokeWidth\"\n      [mode]=\"'indeterminate'\">\n    </mat-progress-spinner>\n  </button>\n  <mat-error>{{control?.errors | spShowSingleError}}</mat-error>\n</mat-form-field>\n\n<mat-autocomplete #auto=\"matAutocomplete\"\n                  class=\"search-autocomplete\"\n                  (optionSelected)=\"onOptionSelected($event)\"\n                  [displayWith]=\"displayWith\">\n  <mat-option *ngFor=\"let option of autoCompleteData\" [value]=\"option\">\n    <span [innerHtml]=\"formatOptionText(option)\"></span>\n  </mat-option>\n</mat-autocomplete>\n",
                encapsulation: ViewEncapsulation.None,
                preserveWhitespaces: false,
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".search-autocomplete-component,.search-autocomplete-component .mat-form-field{width:100%}.search-autocomplete-component .override-mat.mat-form-field-should-float .mat-input-placeholder-wrapper,.search-autocomplete-component .override-mat.mat-input-placeholder-wrapper{left:6px}.search-autocomplete-component .override-mat.mat-form-field-should-float .mat-form-field-placeholder{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transition:opacity 450ms ease-in-out;-moz-transition:opacity 450ms ease-in-out;-ms-transition:opacity 450ms ease-in-out;-o-transition:opacity 450ms ease-in-out;opacity:1}.search-autocomplete-component .override-mat.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder{-webkit-transform:translateY(0) scale(1) perspective(100px) translateZ(.001px);transform:translateY(0) scale(1) perspective(100px) translateZ(.001px);-ms-transform:translateY(0) scale(1);-webkit-transition:opacity 450ms ease-in-out;-moz-transition:opacity 450ms ease-in-out;-ms-transition:opacity 450ms ease-in-out;-o-transition:opacity 450ms ease-in-out;opacity:0}.search-autocomplete-component .override-mat.mat-input-infix{padding-left:6px}"]
            }] }
];
/** @nocollapse */
SpSearchAutoCompleteComponent.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: SpSearchAutoComplateFormGroupFactory }
];
SpSearchAutoCompleteComponent.propDecorators = {
    control: [{ type: Input }],
    bindStyle: [{ type: HostBinding, args: ['class.search-autocomplete-component',] }],
    placeholder: [{ type: Input }],
    autoCompleteData: [{ type: Input }],
    optionTemplate: [{ type: Input }],
    delay: [{ type: Input }],
    minLength: [{ type: Input }],
    iconLeft: [{ type: Input }],
    isSearching: [{ type: Input }],
    displayWith: [{ type: Input }],
    optionFormatter: [{ type: Input }],
    disableSubmit: [{ type: Input }],
    overrideMaterial: [{ type: Input }],
    spinnerConfig: [{ type: Input }],
    valueChanges: [{ type: Output }],
    optionSelected: [{ type: Output }],
    submit: [{ type: Output }],
    changes: [{ type: Output }]
};
if (false) {
    /**
     * @type {?}
     * @private
     */
    SpSearchAutoCompleteComponent.prototype._formSub;
    /**
     * @type {?}
     * @private
     */
    SpSearchAutoCompleteComponent.prototype._timer;
    /**
     * @type {?}
     * @private
     */
    SpSearchAutoCompleteComponent.prototype._currentSearchValue;
    /**
     * @type {?}
     * @private
     */
    SpSearchAutoCompleteComponent.prototype._optionIsSelecting;
    /**
     * @type {?}
     * @private
     */
    SpSearchAutoCompleteComponent.prototype._controller;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.formGroup;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.formGroupService;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.formValue;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.inputBlur;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.bindStyle;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.placeholder;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.autoCompleteData;
    /**
     * Options
     * textOnly, iconText
     * @type {?}
     */
    SpSearchAutoCompleteComponent.prototype.optionTemplate;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.delay;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.minLength;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.iconLeft;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.isSearching;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.displayWith;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.optionFormatter;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.disableSubmit;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.overrideMaterial;
    /** @type {?} */
    SpSearchAutoCompleteComponent.prototype.spinnerConfig;
    /**
     * String emitted from input value changes.
     * Always a string value.
     * @type {?}
     */
    SpSearchAutoCompleteComponent.prototype.valueChanges;
    /**
     * Object or String emitted from autocomplete option select.
     * Always a string value.
     * @type {?}
     */
    SpSearchAutoCompleteComponent.prototype.optionSelected;
    /**
     * Object or String emitted from keyboard 'Enter' event
     * or click event on search icon.
     * @type {?}
     */
    SpSearchAutoCompleteComponent.prototype.submit;
    /**
     * Aggregation of optionSelected, onSubmitHandler, and valueChanges events.
     * ( You receive all events )
     * @type {?}
     */
    SpSearchAutoCompleteComponent.prototype.changes;
    /**
     * @type {?}
     * @private
     */
    SpSearchAutoCompleteComponent.prototype._changeDetector;
    /**
     * @type {?}
     * @private
     */
    SpSearchAutoCompleteComponent.prototype._formGroupFactory;
}
//# sourceMappingURL=data:application/json;base64, 