/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, Input, EventEmitter, Output, HostListener, ElementRef, ChangeDetectorRef, forwardRef } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { PrivateConstants } from '../../constants';
import { PrivateDynamicFromService, DynamicFormService } from '../../services';
var DropdownControllComponent = /** @class */ (function () {
    function DropdownControllComponent(cdref, _elementRef, _privateDynamicFromService, _dynamicFormService) {
        this.cdref = cdref;
        this._elementRef = _elementRef;
        this._privateDynamicFromService = _privateDynamicFromService;
        this._dynamicFormService = _dynamicFormService;
        this.bindKey = "value";
        this.bindName = "label";
        this.privateConstants = PrivateConstants;
        this.selectedOption = [];
        this.optionList = [];
        this.triggerValueChangeObj = null;
        this.toggleDropdown = false;
        this.clickComponent = false;
        this.openDropdown = new EventEmitter();
        this.closeDropdown = new EventEmitter();
        this.onChange = (/**
         * @return {?}
         */
        function () { });
        this.onTouched = (/**
         * @return {?}
         */
        function () { });
    }
    /**
     * @return {?}
     */
    DropdownControllComponent.prototype.clickInsideComponent = /**
     * @return {?}
     */
    function () {
        this.clickComponent = true;
    };
    /**
     * @return {?}
     */
    DropdownControllComponent.prototype.clickOutsideComponent = /**
     * @return {?}
     */
    function () {
        if (!this.clickComponent) {
            this.toggleDropdown = false;
        }
        this.clickComponent = false;
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DropdownControllComponent.prototype.handleKeyboardEvent = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        console.log('$event', $event.keyCode);
    };
    Object.defineProperty(DropdownControllComponent.prototype, "value", {
        get: /**
         * @return {?}
         */
        function () {
            return this.setValue;
        },
        set: /**
         * @param {?} val
         * @return {?}
         */
        function (val) {
            this.setValue = val;
            // this.onChange(val);
            // this.onTouched(); 
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    DropdownControllComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        if (typeof this.field.otherOptions !== "undefined" && Array.isArray(this.field.otherOptions)) {
            this.optionList = this.field.otherOptions.sort();
        }
    };
    /**
     * @param {?} validations
     * @return {?}
     */
    DropdownControllComponent.prototype.showRequired = /**
     * @param {?} validations
     * @return {?}
     */
    function (validations) {
        return this._privateDynamicFromService.showRequired(validations);
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    DropdownControllComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        this.searchText = null;
    };
    /**
     * @return {?}
     */
    DropdownControllComponent.prototype.ngAfterViewInit = /**
     * @return {?}
     */
    function () {
    };
    /**
     * @return {?}
     */
    DropdownControllComponent.prototype.toggleSelectDropdown = /**
     * @return {?}
     */
    function () {
        this.toggleDropdown = !this.toggleDropdown;
        if (this.toggleDropdown) {
            this.openDropdown.emit();
        }
        else {
            this.closeDropdown.emit();
        }
    };
    /**
     * @param {?} value
     * @return {?}
     */
    DropdownControllComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var e_1, _a, e_2, _b;
        if (value) {
            /** @type {?} */
            var unselectedObj = [];
            /** @type {?} */
            var selectedObj = [];
            /** @type {?} */
            var updateFormValue = false;
            if (value && value.length) {
                try {
                    for (var _c = tslib_1.__values(this.field.otherOptions), _d = _c.next(); !_d.done; _d = _c.next()) {
                        var option = _d.value;
                        /** @type {?} */
                        var isFind = false;
                        try {
                            for (var value_1 = tslib_1.__values(value), value_1_1 = value_1.next(); !value_1_1.done; value_1_1 = value_1.next()) {
                                var row = value_1_1.value;
                                if (row && row[this.bindKey] && row[this.bindKey] === option[this.bindKey]) {
                                    selectedObj.push(option);
                                    isFind = true;
                                }
                                else if (row && row === option[this.bindKey]) {
                                    selectedObj.push(option);
                                    isFind = true;
                                    updateFormValue = true;
                                }
                            }
                        }
                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
                        finally {
                            try {
                                if (value_1_1 && !value_1_1.done && (_b = value_1.return)) _b.call(value_1);
                            }
                            finally { if (e_2) throw e_2.error; }
                        }
                        if (!isFind) {
                            unselectedObj.push(option);
                        }
                    }
                }
                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                finally {
                    try {
                        if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                    }
                    finally { if (e_1) throw e_1.error; }
                }
            }
            this.optionList = unselectedObj;
            if (updateFormValue) {
                this._dynamicFormService.updateFormValue([
                    {
                        fieldName: this.field.name,
                        rowId: this.rowField.id,
                        value: unselectedObj
                    }
                ]);
            }
            if (Array.isArray(value)) {
                if (this.field.attr && this.field.attr.multiple) {
                    this.value = selectedObj;
                }
                else {
                    this.value = selectedObj[0];
                }
            }
            else {
                this.value = selectedObj;
            }
            if (this.selectedOption.length === 0) {
                if (Array.isArray(value)) {
                    this.selectedOption = selectedObj;
                }
                else {
                    this.selectedOption.push(selectedObj);
                }
            }
        }
    };
    /**
     * @param {?} option
     * @param {?} key
     * @return {?}
     */
    DropdownControllComponent.prototype.deselectOption = /**
     * @param {?} option
     * @param {?} key
     * @return {?}
     */
    function (option, key) {
        if (!(this.field.attr && this.field.attr.readonly)) {
            this.selectedOption.splice(key, 1);
            this.optionList.push(option);
            this.optionList.sort();
            this.triggerValueChange();
        }
    };
    /**
     * @param {?} option
     * @param {?} key
     * @return {?}
     */
    DropdownControllComponent.prototype.selectOption = /**
     * @param {?} option
     * @param {?} key
     * @return {?}
     */
    function (option, key) {
        if (!(this.field.attr && this.field.attr.readonly)) {
            if (!(this.field.attr && this.field.attr.multiple)) {
                if (this.selectedOption.length > 0) {
                    this.optionList.push(this.selectedOption[0]);
                }
                this.selectedOption = [];
                this.toggleDropdown = false;
            }
            this.optionList.splice(key, 1);
            this.optionList.sort();
            this.selectedOption.push(option);
            this.selectedOption.sort();
            this.triggerValueChange();
        }
    };
    /**
     * @return {?}
     */
    DropdownControllComponent.prototype.triggerValueChange = /**
     * @return {?}
     */
    function () {
        var _this = this;
        if (!this.triggerValueChangeObj) {
            this.triggerValueChangeObj = setTimeout((/**
             * @return {?}
             */
            function () {
                _this.valueChanged();
            }), this.privateConstants.defaultUpdateTime.dropDown);
        }
        else {
            clearTimeout(this.triggerValueChangeObj);
            this.triggerValueChangeObj = null;
            this.triggerValueChange();
        }
    };
    /**
     * @return {?}
     */
    DropdownControllComponent.prototype.valueChanged = /**
     * @return {?}
     */
    function () {
        this.writeValue(this.selectedOption);
        this._dynamicFormService.updateFormValue([
            {
                fieldName: this.field.name,
                rowId: this.rowField.id,
                value: this.selectedOption
            }
        ]);
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    DropdownControllComponent.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onChange = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    DropdownControllComponent.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onTouched = fn;
    };
    DropdownControllComponent.decorators = [
        { type: Component, args: [{
                    selector: 'dropdown-controll',
                    template: "<div class=\"form-group {{(field.class) ? field.class : ''}}\">\n    <show-label [class]=\"'col-form-label w-100'\" [labelName]=\"field.label\" [labelId]=\"field.name + '-' + (i + '' + j)\"\n        [isrequired]=\"showRequired(field.validations)\">\n    </show-label>\n    <div class=\"dropdown-container\" tabindex=\"0\">\n        <button type=\"button\" class=\"dropdown-button\"\n            [ngClass]=\"{'dropdown-readonly': (field && field.attr && field.attr.readonly)}\"\n            (click)=\"toggleSelectDropdown()\">\n            <span>{{ (field && field.attr && field.attr.placeholder) ? field.attr.placeholder : privateConstants.applicationMsg.selectDefaultOption }}\n            </span>\n            <span class=\"select-down-icon\"></span>\n        </button>\n        <div class=\"dropdown-list\" [ngClass]=\"{'dropdown-readonly': (field && field.attr && field.attr.readonly)}\"\n            *ngIf=\"toggleDropdown\">\n            <!-- <div class=\"search-container\">\n                <input name=\"search\" [(ngModel)]=\"searchText\" />\n                <label [ngClass]=\"{'active': searchText}\">\n                    <span class=\"nsdicon-search\"></span> Search </label>\n            </div> -->\n            <ul class=\"selected-items\">\n                <li tabindex=\"-1\" *ngFor=\"let selected of selectedOption;let i = index\"\n                    (click)=\"deselectOption(selected,i)\">\n                    <span class=\"nsdicon-close\"></span>\n                    <span> {{selected.label || selected}}</span>\n                </li>\n            </ul>\n            <hr *ngIf=\"selectedOption.length > 0 && optionList.length > 0\" />\n            <ul class=\"available-items\">\n                <!-- <li *ngFor=\"let item of optionList| filterBy: searchText : 'label' | limitTo : 10;let i = index\"\n                    tabindex=\"-1\" [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectOption(item,i)\"> -->\n                <li *ngFor=\"let item of optionList; let key = index\" tabindex=\"-1\" (click)=\"selectOption(item,key)\">\n                    {{item.label || item}}</li>\n            </ul>\n        </div>\n    </div>\n</div>",
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return DropdownControllComponent; })),
                            multi: true
                        }
                    ],
                    styles: [".dropdown-container{width:100%;position:relative}.dropdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown-container button span{vertical-align:middle;float:left}.dropdown-container button .select-down-icon{position:relative;font-size:large;float:right}.dropdown-container .dropdown-button{width:100%;min-height:30px;padding:5px 10px;background-color:#fff}.dropdown-container .dropdown-readonly{background-color:#f1f1f1!important}.dropdown-container .dropdown-list{box-sizing:border-box;border:1px solid rgba(0,0,0,.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background:#fff;max-height:auto;position:absolute;box-shadow:5px 5px 5px 0 rgba(0,0,0,.21);overflow-y:auto}.dropdown-container .dropdown-list .search-container{position:relative;padding-top:10px;margin-top:5px}.dropdown-container .dropdown-list .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:0;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:.3s}.dropdown-container .dropdown-list .search-container input:focus{border-bottom:1px solid #26a69a}.dropdown-container .dropdown-list .search-container input:focus+label{-webkit-transform:translateY(-2px) scale(.8);transform:translateY(-2px) scale(.8);-webkit-transform-origin:0 0;transform-origin:0 0}.dropdown-container .dropdown-list .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;-webkit-transform-origin:0 100%;transform-origin:0 100%;text-align:initial;-webkit-transform:translateY(12px);transform:translateY(12px);pointer-events:none}.dropdown-container .dropdown-list .search-container label.active{-webkit-transform:translateY(-2px) scale(.8);transform:translateY(-2px) scale(.8);-webkit-transform-origin:0 0;transform-origin:0 0}.dropdown-container .dropdown-list ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0}.dropdown-container .dropdown-list ul.selected-items li{background-color:#337ab7;color:#fff;margin-bottom:2px}.dropdown-container .dropdown-list ul.available-items li.active{background-color:#337ab7;color:#ffff}.dropdown-container .dropdown-list ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}.dropdown-container .disabled{pointer-events:none;background-color:#e9ecef;opacity:1;cursor:no-drop}"]
                }] }
    ];
    /** @nocollapse */
    DropdownControllComponent.ctorParameters = function () { return [
        { type: ChangeDetectorRef },
        { type: ElementRef },
        { type: PrivateDynamicFromService },
        { type: DynamicFormService }
    ]; };
    DropdownControllComponent.propDecorators = {
        rowField: [{ type: Input }],
        field: [{ type: Input }],
        i: [{ type: Input }],
        j: [{ type: Input }],
        bindKey: [{ type: Input }],
        bindName: [{ type: Input }],
        setValue: [{ type: Input }],
        openDropdown: [{ type: Output }],
        closeDropdown: [{ type: Output }],
        clickInsideComponent: [{ type: HostListener, args: ['click',] }],
        clickOutsideComponent: [{ type: HostListener, args: ['document:click',] }],
        handleKeyboardEvent: [{ type: HostListener, args: ['keydown', ['$event'],] }]
    };
    return DropdownControllComponent;
}());
export { DropdownControllComponent };
if (false) {
    /** @type {?} */
    DropdownControllComponent.prototype.rowField;
    /** @type {?} */
    DropdownControllComponent.prototype.field;
    /** @type {?} */
    DropdownControllComponent.prototype.i;
    /** @type {?} */
    DropdownControllComponent.prototype.j;
    /** @type {?} */
    DropdownControllComponent.prototype.bindKey;
    /** @type {?} */
    DropdownControllComponent.prototype.bindName;
    /** @type {?} */
    DropdownControllComponent.prototype.privateConstants;
    /** @type {?} */
    DropdownControllComponent.prototype.selectedOption;
    /** @type {?} */
    DropdownControllComponent.prototype.optionList;
    /** @type {?} */
    DropdownControllComponent.prototype.triggerValueChangeObj;
    /** @type {?} */
    DropdownControllComponent.prototype.toggleDropdown;
    /** @type {?} */
    DropdownControllComponent.prototype.clickComponent;
    /** @type {?} */
    DropdownControllComponent.prototype.searchText;
    /** @type {?} */
    DropdownControllComponent.prototype.setValue;
    /** @type {?} */
    DropdownControllComponent.prototype.openDropdown;
    /** @type {?} */
    DropdownControllComponent.prototype.closeDropdown;
    /** @type {?} */
    DropdownControllComponent.prototype.onChange;
    /** @type {?} */
    DropdownControllComponent.prototype.onTouched;
    /**
     * @type {?}
     * @private
     */
    DropdownControllComponent.prototype.cdref;
    /** @type {?} */
    DropdownControllComponent.prototype._elementRef;
    /**
     * @type {?}
     * @private
     */
    DropdownControllComponent.prototype._privateDynamicFromService;
    /**
     * @type {?}
     * @private
     */
    DropdownControllComponent.prototype._dynamicFormService;
}
//# sourceMappingURL=data:application/json;base64, 