/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, Input } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { NgxTreeService } from '../ngx-tree-lib.service';
import { TranslateService } from "@ngx-translate/core";
var NgxTreeChildrenComponent = /** @class */ (function () {
    function NgxTreeChildrenComponent(treeService, fb, tr) {
        this.treeService = treeService;
        this.fb = fb;
        this.tr = tr;
    }
    Object.defineProperty(NgxTreeChildrenComponent.prototype, "setItem", {
        // get item from parent component
        set: 
        // get item from parent component
        /**
         * @param {?} data
         * @return {?}
         */
        function (data) {
            this.element = data;
            this.itemOptions = {
                href: '#',
                hidden: false,
                hideChildren: false,
                position: this.treeService.getItemPosition(this.element),
                draggable: true,
                edit: false,
                showActionButtons: true,
                currentlyDragging: false,
                destenationTop: false,
                destenationBottom: false,
                disabled: false,
                showExpandButton: true,
                showDeleteButton: true
            };
            if (this.element.options) {
                this.setOptions(this.element.options);
                this.element.options = this.itemOptions;
            }
            else {
                this.element.options = this.itemOptions;
            }
            // enable subscribers
            this.enableSubscribers();
            // create form
            this.createForm();
        },
        enumerable: true,
        configurable: true
    });
    // enable subscribe to config
    // enable subscribe to config
    /**
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.enableSubscribers = 
    // enable subscribe to config
    /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.treeService.config.subscribe((/**
         * @param {?} config
         * @return {?}
         */
        function (config) {
            if (config !== null) {
                _this.config = config;
            }
            else {
                _this.config = _this.treeService.defaultConfig;
            }
            if (_this.element.options.draggable) {
                _this.element.options.draggable = _this.config.enableDragging;
            }
        }));
        this.treeService.language.subscribe((/**
         * @param {?} language
         * @return {?}
         */
        function (language) {
            if (language !== '') {
                _this.language = language;
            }
            else {
                _this.language = _this.treeService.defaultLanguage;
            }
        }));
    };
    /**
     * @param {?} strings
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.getTitleFromLocalized = /**
     * @param {?} strings
     * @return {?}
     */
    function (strings) {
        var _this = this;
        /** @type {?} */
        var empty = this.tr.instant('dashboard.empty');
        /** @type {?} */
        var res = empty;
        if (typeof strings === 'string' || typeof strings === 'number') {
            return strings.toString();
        }
        if (!Array.isArray(strings)) {
            return res;
        }
        strings.forEach((/**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            if (value.language === _this.language) {
                res = value.value;
            }
        }));
        return res;
    };
    // set options to item
    // set options to item
    /**
     * @param {?} options
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.setOptions = 
    // set options to item
    /**
     * @param {?} options
     * @return {?}
     */
    function (options) {
        var e_1, _a;
        try {
            for (var _b = tslib_1.__values(Object.keys(options)), _c = _b.next(); !_c.done; _c = _b.next()) {
                var key = _c.value;
                this.setValue(key, options);
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
            }
            finally { if (e_1) throw e_1.error; }
        }
    };
    // set value to options keys
    // set value to options keys
    /**
     * @param {?} item
     * @param {?} options
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.setValue = 
    // set value to options keys
    /**
     * @param {?} item
     * @param {?} options
     * @return {?}
     */
    function (item, options) {
        this.itemOptions[item] = options[item];
    };
    // create edit form
    // create edit form
    /**
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.createForm = 
    // create edit form
    /**
     * @return {?}
     */
    function () {
        this.renameForm = this.fb.group({
            name: [this.element.name || '', [
                    Validators.required,
                    Validators.minLength(this.config.minCharacterLength)
                ]],
        });
    };
    /*
      Event: onStartRenameItem;
      Enable rename mode in element
      Call onStartRenameItem() from tree service.
    */
    /*
        Event: onStartRenameItem;
        Enable rename mode in element
        Call onStartRenameItem() from tree service.
      */
    /**
     * @param {?} element
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.enableRenameMode = /*
        Event: onStartRenameItem;
        Enable rename mode in element
        Call onStartRenameItem() from tree service.
      */
    /**
     * @param {?} element
     * @return {?}
     */
    function (element) {
        element.options.edit = true;
        this.treeService.startRenameItem(element);
    };
    /*
      Event: onadditem;
      Generate id by new Date() by 'full year + day + time'.
      Call addNewItem() from tree service.
    */
    /*
        Event: onadditem;
        Generate id by new Date() by 'full year + day + time'.
        Call addNewItem() from tree service.
      */
    /**
     * @param {?} name
     * @param {?} item
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.submitAdd = /*
        Event: onadditem;
        Generate id by new Date() by 'full year + day + time'.
        Call addNewItem() from tree service.
      */
    /**
     * @param {?} name
     * @param {?} item
     * @return {?}
     */
    function (name, item) {
        /** @type {?} */
        var d = "" + new Date().getFullYear() + new Date().getDay() + new Date().getTime();
        /** @type {?} */
        var elemId = parseInt(d, null);
        this.treeService.addNewItem(elemId, name, item);
        this.element.options.hideChildren = false;
    };
    /*
      Event: onFinishRenameItem;
      Check is form valid.
      Call addNewItem() from tree service.
    */
    /*
        Event: onFinishRenameItem;
        Check is form valid.
        Call addNewItem() from tree service.
      */
    /**
     * @param {?} item
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.submitRename = /*
        Event: onFinishRenameItem;
        Check is form valid.
        Call addNewItem() from tree service.
      */
    /**
     * @param {?} item
     * @return {?}
     */
    function (item) {
        if (this.renameForm.valid) {
            this.showError = false;
            this.treeService.finishRenameItem(this.renameForm.value.name, item.id);
            this.element.options.edit = false;
        }
        else {
            this.showError = true;
        }
    };
    /*
      Events:
      onStartDeleteItem,
      onFinishDeleteItem,
      onCancelDeleteItem.
      Check is item edit, then if name empty delete item.
      Call deleteItem() from tree service.
    */
    /*
        Events:
        onStartDeleteItem,
        onFinishDeleteItem,
        onCancelDeleteItem.
        Check is item edit, then if name empty delete item.
        Call deleteItem() from tree service.
      */
    /**
     * @param {?} item
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.onSubmitDelete = /*
        Events:
        onStartDeleteItem,
        onFinishDeleteItem,
        onCancelDeleteItem.
        Check is item edit, then if name empty delete item.
        Call deleteItem() from tree service.
      */
    /**
     * @param {?} item
     * @return {?}
     */
    function (item) {
        if (!this.element.options.edit) {
            this.treeService.deleteItem(item.id);
        }
        else {
            if (item.name === null) {
                this.treeService.deleteItem(item.id);
            }
            else {
                this.element.options.edit = false;
            }
        }
    };
    // after view init
    // after view init
    /**
     * @return {?}
     */
    NgxTreeChildrenComponent.prototype.ngAfterViewInit = 
    // after view init
    /**
     * @return {?}
     */
    function () { };
    NgxTreeChildrenComponent.decorators = [
        { type: Component, args: [{
                    selector: 'lib-ngx-tree-children',
                    template: "<div class='tree-child' id={{element.id}} libDragElement [draggableValue]='element.options.draggable' [item]='element' [ngClass]=\"{disabled : element.options.disabled}\">\n  <div *ngIf=\"element && element.options\" class='d-flex'>\n    <div *ngIf='config' [ngClass]=\"{hidden : element.options.hidden}\">\n      <div class='tree-title d-inline-flex pos-relative' [ngClass]=\"{destenationTop : element.options.destenationTop, destenationBottom: element.options.destenationBottom}\" *ngIf=\"!element.options.edit;else onEdit\">\n        <div *ngIf=\"!config.setItemsAsLinks; else link\" [ngClass]=\"{addOpacity : element.options.currentlyDragging}\" libDropElement\n          [item]='element' class='draggable-item'>\n          {{getTitleFromLocalized(element.name) | translate}}\n        </div>\n        <ng-template #link>\n          <div [ngClass]=\"{addOpacity : element.options.currentlyDragging}\" libDropElement\n          [item]='element' class='draggable-item'>\n            <a [href]=\"element.options.href\" class='tree-link'>{{getTitleFromLocalized(element.name) | translate}}</a>\n          </div>\n        </ng-template>\n        <div class='d-flex buttons-bar' *ngIf=\"config.showActionButtons && element.options.showActionButtons && !element.options.disabled\">\n          <div class='d-flex'>\n            <button class=\"tree-btn add-btn\" *ngIf=\"config.showAddButtons\" (click)=\"submitAdd(null, element)\">\n              <fa-icon icon=\"plus\" [style.font-size.px]='config.setIconSize'></fa-icon>\n            </button>\n          </div>\n          <div class='d-flex'>\n            <button class=\"tree-btn edit-btn\" *ngIf=\"config.showRenameButtons\" (click)=\"enableRenameMode(element)\">\n              <fa-icon icon=\"edit\" [style.font-size.px]='config.setIconSize'></fa-icon>\n            </button>\n          </div>\n          <div class='d-flex'>\n            <button class=\"tree-btn delete-btn\" *ngIf=\"config.showDeleteButtons && element.options.showDeleteButton\" (click)=\"onSubmitDelete( element )\">\n              <fa-icon icon=\"times\" [style.font-size.px]='config.setIconSize'></fa-icon>\n            </button>\n          </div>\n        </div>\n        <div class='child-drop-place' [attr.data-id]='element.id'  libDropElement *ngIf='element.options.showDropChildZone && !element.options.disabled'>\n          <fa-icon icon=\"arrow-down\" [style.font-size.px]='config.setIconSize'></fa-icon>\n        </div>\n        <div class='show-hide-switch' *ngIf=\"config.enableExpandButtons && element.options.showExpandButton && element.children.length > 0 && !element.options.disabled\">\n          <div *ngIf=\"element.options.hideChildren; else visible\">\n            <button class='tree-btn show-btn' (click)='element.options.hideChildren = false'>\n              <fa-icon icon=\"plus\" [style.font-size.px]='config.setIconSize'></fa-icon>\n            </button>\n          </div>\n          <ng-template #visible>\n            <button class='tree-btn hide-btn' (click)='element.options.hideChildren = true'>\n              <fa-icon icon=\"minus\" [style.font-size.px]='config.setIconSize'></fa-icon>\n            </button>\n          </ng-template>\n        </div>\n      </div>\n      <ng-template #onEdit>\n        <div class='tree-title d-inline-flex'>\n          <form [formGroup]=\"renameForm\" class='d-flex' (submit)='submitRename(element)'>\n            <input type=\"text\" class='input-rename' formControlName=\"name\" libAutoFocus=\"true\" [style.font-size.px]='config.setFontSize'>\n          </form>\n          <div class='d-flex'>\n            <button class='tree-btn submit-btn' (click)='submitRename(element)'>\n              <fa-icon icon=\"check\" [style.font-size.px]='config.setIconSize'></fa-icon>\n            </button>\n            <button class='tree-btn delete-btn' (click)='onSubmitDelete(element)'>\n              <fa-icon icon=\"times\" [style.font-size.px]='config.setIconSize'></fa-icon>\n            </button>\n            <div class='error-edit-wrap' *ngIf=\"showError\">\n              {{config.validationText}}\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <div class=\"tree-content\" *ngIf=\"element.children && !element.options.hideChildren\">\n        <lib-ngx-tree-children [setItem]=\"child\" *ngFor='let child of element.children'></lib-ngx-tree-children>\n      </div>\n    </div>\n  </div>\n</div>\n"
                }] }
    ];
    /** @nocollapse */
    NgxTreeChildrenComponent.ctorParameters = function () { return [
        { type: NgxTreeService },
        { type: FormBuilder },
        { type: TranslateService }
    ]; };
    NgxTreeChildrenComponent.propDecorators = {
        setItem: [{ type: Input }]
    };
    return NgxTreeChildrenComponent;
}());
export { NgxTreeChildrenComponent };
if (false) {
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.showError;
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.config;
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.language;
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.element;
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.draggable;
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.itemOptions;
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.childrenArray;
    /** @type {?} */
    NgxTreeChildrenComponent.prototype.renameForm;
    /**
     * @type {?}
     * @private
     */
    NgxTreeChildrenComponent.prototype.treeService;
    /**
     * @type {?}
     * @private
     */
    NgxTreeChildrenComponent.prototype.fb;
    /**
     * @type {?}
     * @private
     */
    NgxTreeChildrenComponent.prototype.tr;
}
//# sourceMappingURL=data:application/json;base64, 