@noaestudio/forms/fesm5/covalent-dynamic-forms.js

Dynamic forms extension for Covalent

import { __extends, __values, __awaiter, __generator, __spread } from 'tslib';
import { Component, forwardRef, Inject, ViewChild, ChangeDetectorRef, Injectable, SkipSelf, Optional, Directive, Input, HostBinding, TemplateRef, ViewContainerRef, ComponentFactoryResolver, ChangeDetectionStrategy, ContentChildren, Output, EventEmitter, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, Validators, FormControl, FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import * as _isjson_ from 'is-json';
import * as moment from 'moment';
import { utc, fn } from 'moment';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatTreeModule, MatTableModule, MAT_DATE_FORMATS, DateAdapter } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { of, timer } from 'rxjs';
import { MatDialogRef as MatDialogRef$1, MAT_DIALOG_DATA as MAT_DIALOG_DATA$1 } from '@angular/material/dialog';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as lodash_ from 'lodash';
import { TemplatePortalDirective } from '@angular/cdk/portal';
import { distinctUntilChanged } from 'rxjs/operators';
import { TREE_ACTIONS, TreeModule } from 'angular-tree-component';
import { TdLoadingService } from '@covalent/core/loading';
import { MomentDateAdapter, MatMomentDateModule } from '@angular/material-moment-adapter';
import { CommonModule } from '@angular/common';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatTabsModule } from '@angular/material/tabs';
import { MatChipsModule } from '@angular/material/chips';
import { CovalentCommonModule } from '@covalent/core/common';
import { CovalentFileModule } from '@covalent/core/file';
import { NgxEditorModule } from 'ngx-editor';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { MccColorPickerModule } from 'material-community-components';
import { NgSelectModule } from '@ng-select/ng-select';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ noop = function () {
    // empty method
};
/**
 * @abstract
 */
var  /**
 * @abstract
 */
AbstractControlValueAccessor = /** @class */ (function () {
    function AbstractControlValueAccessor() {
        /**
         * Implemented as part of ControlValueAccessor.
         */
        this._value = undefined;
        this.onChange = function (_) { return noop; };
        this.onTouched = function () { return noop; };
    }
    Object.defineProperty(AbstractControlValueAccessor.prototype, "value", {
        // get/set accessor (needed for ControlValueAccessor)
        get: /**
         * @return {?}
         */
        function () { return this._value; },
        set: /**
         * @param {?} v
         * @return {?}
         */
        function (v) {
            if (v !== this._value) {
                this._value = v;
                this.onChange(v);
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Implemented as part of ControlValueAccessor.
     */
    /**
     * Implemented as part of ControlValueAccessor.
     * @param {?} value
     * @return {?}
     */
    AbstractControlValueAccessor.prototype.writeValue = /**
     * Implemented as part of ControlValueAccessor.
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this.value = value;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    AbstractControlValueAccessor.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn$$1) {
        this.onChange = fn$$1;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    AbstractControlValueAccessor.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn$$1) {
        this.onTouched = fn$$1;
    };
    return AbstractControlValueAccessor;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicInputComponent; }),
    multi: true,
};
var TdDynamicInputComponent = /** @class */ (function (_super) {
    __extends(TdDynamicInputComponent, _super);
    function TdDynamicInputComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        _this.minLength = undefined;
        _this.maxLength = undefined;
        _this.step = undefined;
        _this.autocomplete = 'off';
        return _this;
    }
    /**
     * @return {?}
     */
    TdDynamicInputComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        if (this.type == 'password') {
            this.autocomplete = 'new-password';
        }
        else {
            this.autocomplete = 'off';
        }
    };
    TdDynamicInputComponent.decorators = [
        { type: Component, args: [{
                    providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-input',
                    styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
                    template: "<div class=\"td-dynamic-input-wrapper\">\n    <mat-form-field class=\"td-dynamic-input-field\">\n        <input #elementInput matInput [(ngModel)]=\"value\" [formControl]=\"control\" [placeholder]=\"label\"\n        [type]=\"type\" [autocomplete]=\"autocomplete\" [required]=\"required\" [attr.min]=\"min\" [attr.max]=\"max\"\n        [attr.minLength]=\"minLength\" [attr.maxLength]=\"maxLength\" [attr.step]=\"step\" />\n    </mat-form-field>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TdDynamicInputComponent.ctorParameters = function () { return []; };
    return TdDynamicInputComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ UPLOAD_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicFileInputComponent; }),
    multi: true,
};
var TdDynamicFileInputComponent = /** @class */ (function (_super) {
    __extends(TdDynamicFileInputComponent, _super);
    function TdDynamicFileInputComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.required = undefined;
        _this.label = '';
        return _this;
    }
    TdDynamicFileInputComponent.decorators = [
        { type: Component, args: [{
                    providers: [UPLOAD_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-file-input',
                    styles: [".td-dynamic-file-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper .td-dynamic-file-input-field{-ms-flex:1;flex:1;box-sizing:border-box}.td-file-input{margin-left:10px}"],
                    template: "<div class=\"td-dynamic-file-input-wrapper\">\n\t<mat-form-field tdFileDrop\n\t\tclass=\"td-dynamic-file-input-field\"\n\t\tfloatLabel=\"never\"\n\t\t[disabled]=\"control?.disabled\"\n\t\t(fileDrop)=\"value = $event\"\n\t\t(click)=\"!control?.disabled && fileInput.inputElement.click()\"\n\t\t(keyup.enter)=\"!control?.disabled && fileInput.inputElement.click()\"\n\t\t(keyup.delete)=\"fileInput.clear()\"\n\t\t(keyup.backspace)=\"fileInput.clear()\" >\n\t\t\t<input matInput\n\t\t\t\t[value]=\"value?.name\"\n\t\t\t\t[placeholder]=\"label\"\n\t\t\t\t[disabled]=\"control?.disabled\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\treadonly />\n\t</mat-form-field>\n\t<button mat-icon-button *ngIf=\"value\" (click)=\"fileInput.clear()\" (keyup.enter)=\"fileInput.clear()\">\n\t\t<mat-icon>cancel</mat-icon>\n\t</button>\n\t<td-file-input class=\"td-file-input\" #fileInput [(ngModel)]=\"value\">\n\t\t<mat-icon>folder</mat-icon>\n\t\t<span>{{ label }}</span>\n\t</td-file-input>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TdDynamicFileInputComponent.ctorParameters = function () { return []; };
    return TdDynamicFileInputComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ TEXTAREA_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicTextareaComponent; }),
    multi: true,
};
var TdDynamicTextareaComponent = /** @class */ (function (_super) {
    __extends(TdDynamicTextareaComponent, _super);
    function TdDynamicTextareaComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.required = undefined;
        return _this;
    }
    TdDynamicTextareaComponent.decorators = [
        { type: Component, args: [{
                    providers: [TEXTAREA_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-textarea',
                    styles: [".td-dynamic-textarea-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper .td-dynamic-textarea-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
                    template: "<div class=\"td-dynamic-textarea-wrapper\">\n  <mat-form-field class=\"td-dynamic-textarea-field\">\n    <textarea #elementInput\n            matInput\n            [(ngModel)]=\"value\"\n            [placeholder]=\"label\"\n            [required]=\"required\"\n            rows=\"4\">\n    </textarea>\n  </mat-form-field>\n</div>",
                },] },
    ];
    /** @nocollapse */
    TdDynamicTextareaComponent.ctorParameters = function () { return []; };
    return TdDynamicTextareaComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ SLIDE_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicSlideToggleComponent; }),
    multi: true,
};
var TdDynamicSlideToggleComponent = /** @class */ (function (_super) {
    __extends(TdDynamicSlideToggleComponent, _super);
    function TdDynamicSlideToggleComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.required = false;
        return _this;
    }
    TdDynamicSlideToggleComponent.decorators = [
        { type: Component, args: [{
                    providers: [SLIDE_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-slide-toggle',
                    styles: [""],
                    template: "<div class=\"td-dynamic-slide-toggle-wrapper\">\n  <mat-slide-toggle [(ngModel)]=\"value\"\n                   [required]=\"required\">\n    {{label}}\n  </mat-slide-toggle>\n</div>",
                },] },
    ];
    /** @nocollapse */
    TdDynamicSlideToggleComponent.ctorParameters = function () { return []; };
    return TdDynamicSlideToggleComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ CHECKBOX_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicCheckboxComponent; }),
    multi: true,
};
var TdDynamicCheckboxComponent = /** @class */ (function (_super) {
    __extends(TdDynamicCheckboxComponent, _super);
    function TdDynamicCheckboxComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.required = false;
        return _this;
    }
    TdDynamicCheckboxComponent.decorators = [
        { type: Component, args: [{
                    providers: [CHECKBOX_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-checkbox',
                    styles: [""],
                    template: "<div class=\"td-dynamic-checkbox-wrapper\">\n  <mat-checkbox [(ngModel)]=\"value\"\n                [required]=\"required\">\n    {{label}}\n  </mat-checkbox>\n</div>",
                },] },
    ];
    /** @nocollapse */
    TdDynamicCheckboxComponent.ctorParameters = function () { return []; };
    return TdDynamicCheckboxComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ SLIDER_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicSliderComponent; }),
    multi: true,
};
var TdDynamicSliderComponent = /** @class */ (function (_super) {
    __extends(TdDynamicSliderComponent, _super);
    function TdDynamicSliderComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        return _this;
    }
    TdDynamicSliderComponent.decorators = [
        { type: Component, args: [{
                    providers: [SLIDER_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-slider',
                    styles: [".td-dynamic-slider-field{position:relative;margin-top:8px;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-slider-field .td-dynamic-slider{-ms-flex:1;flex:1}"],
                    template: "<div class=\"td-dynamic-slider-wrapper\">\n  <div class=\"mat-form-field-placeholder-wrapper mat-form-field-can-float mat-form-field-should-float\"\n       [class.mat-focused]=\"slider._isActive\">\n    <label class=\"mat-form-field-placeholder mat-float mat-form-field-float td-slider-label\"> {{label}} <span *ngIf=\"required\" class=\"mat-placeholder-required\">*</span></label>\n  </div>\n  <div class=\"td-dynamic-slider-field\">\n    <mat-slider #slider\n                class=\"td-dynamic-slider\"\n                [(ngModel)]=\"value\"\n                [min]=\"min\"\n                [max]=\"max\"\n                thumbLabel\n                tickInterval=\"auto\"\n                [required]=\"required\">\n    </mat-slider>\n  </div>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TdDynamicSliderComponent.ctorParameters = function () { return []; };
    return TdDynamicSliderComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ isJSON = _isjson_;
var /** @type {?} */ SELECT_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicSelectComponent; }),
    multi: true,
};
var TdDynamicSelectComponent = /** @class */ (function (_super) {
    __extends(TdDynamicSelectComponent, _super);
    function TdDynamicSelectComponent(translator) {
        var _this = _super.call(this) || this;
        _this.translator = translator;
        _this.label = '';
        _this.required = undefined;
        _this.selections = undefined;
        _this.selectComplex = false;
        _this.selectMultiple = false;
        _this.flex = 100;
        _this.flexPerc = _this.flex / 100;
        return _this;
    }
    /**
     * @return {?}
     */
    TdDynamicSelectComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        if (this.selections) {
            this.selections.forEach(function (sel) {
                if (sel.label) {
                    sel.label = _this.translateLabel(sel.label);
                }
            });
        }
    };
    /**
     * @param {?} value
     * @return {?}
     */
    TdDynamicSelectComponent.prototype.translateLabel = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var /** @type {?} */ selectedLang = this.translator.currentLang;
        var /** @type {?} */ defaultLang = this.translator.defaultLang;
        if (isJSON(value)) {
            var /** @type {?} */ json = JSON.parse(value);
            if (json[selectedLang]) {
                return json[selectedLang];
            }
            else if (json[defaultLang]) {
                return json[defaultLang];
            }
            else {
                for (var /** @type {?} */ entry in json) {
                    return json[entry];
                }
            }
        }
        else {
            return this.translator.instant(value);
        }
    };
    TdDynamicSelectComponent.decorators = [
        { type: Component, args: [{
                    providers: [SELECT_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-select',
                    styles: [".td-dynamic-select-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper .td-dynamic-select-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
                    template: "<div class=\"td-dynamic-select-wrapper\">\n\n\t<mat-form-field *ngIf=\"!selectComplex\" class=\"td-dynamic-select-field\">\n\t\t<mat-select [(ngModel)]=\"value\" [placeholder]=\"label\" [required]=\"required\">\n\t\t\t<mat-option *ngFor=\"let selection of selections\" [value]=\"selection.value || selection\">{{selection.label || selection}}</mat-option>\n\t\t</mat-select>\n\t</mat-form-field>\n\n\t<ng-select style=\"padding-bottom: 2.25em;\" *ngIf=\"selectComplex\" [(ngModel)]=\"value\" placeholder=\"{{label + (required ? ' *' : '')}}\" [required]=\"required\" [multiple]=\"selectMultiple\" [items]=\"selections\"\n\t\t [searchable]=\"true\" bindLabel=\"label\" bindValue=\"value\" appendTo=\"body\" [style.flex]=\"flexPerc\">\n\t</ng-select>\n\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TdDynamicSelectComponent.ctorParameters = function () { return [
        { type: TranslateService, },
    ]; };
    return TdDynamicSelectComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TdDynamicDatepickerComponent; }),
    multi: true,
};
var TdDynamicDatepickerComponent = /** @class */ (function (_super) {
    __extends(TdDynamicDatepickerComponent, _super);
    function TdDynamicDatepickerComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        return _this;
    }
    TdDynamicDatepickerComponent.decorators = [
        { type: Component, args: [{
                    providers: [DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR],
                    selector: 'td-dynamic-datepicker',
                    styles: [".td-dynamic-datepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper .td-dynamic-datepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
                    template: "<div class=\"td-dynamic-datepicker-wrapper\">\n  <mat-form-field class=\"td-dynamic-datepicker-field\">\n    <input #elementInput\n            matInput\n            [matDatepicker]=\"dynamicDatePicker\"\n            [(ngModel)]=\"value\"\n            [formControl]=\"control\"\n            autocomplete=\"off\"\n            [placeholder]=\"label\"\n            [required]=\"required\"\n            [min]=\"min\"\n            [max]=\"max\"/>\n    <mat-datepicker-toggle matSuffix [for]=\"dynamicDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #dynamicDatePicker></mat-datepicker>\n  </mat-form-field>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TdDynamicDatepickerComponent.ctorParameters = function () { return []; };
    return TdDynamicDatepickerComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TextEditorComponent; }),
    multi: true,
};
var TextEditorComponent = /** @class */ (function (_super) {
    __extends(TextEditorComponent, _super);
    function TextEditorComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        _this.minLength = undefined;
        _this.maxLength = undefined;
        _this.height = "150px";
        _this.toolbarConfig = [
            ['bold', 'italic', 'underline'],
            ['fontName', 'fontSize', 'color'],
            ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
            ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
            ['horizontalLine', 'orderedList', 'unorderedList'],
            ['link', 'unlink']
        ];
        return _this;
    }
    TextEditorComponent.decorators = [
        { type: Component, args: [{
                    providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR$1],
                    selector: 'text-editor',
                    styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}.td-dynamic-input-wrapper .ngx-editor{margin-top:10px}"],
                    template: "<style>\n\n.ngx-editor {\n\tmargin-top: 10px;\n}\n\n</style>\n\n<div class=\"td-dynamic-input-wrapper\" style=\"display: block;\">\n\t<label>{{label}} {{required ? '*' : ''}}</label>\n\t<app-ngx-editor [(ngModel)]=\"value\" [height]=\"height\" [minHeight]=\"height\" [toolbar]=\"toolbarConfig\" style=\"width:100%;\">\n\t</app-ngx-editor>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TextEditorComponent.ctorParameters = function () { return []; };
    return TextEditorComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return ColorPickerComponent; }),
    multi: true,
};
var ColorPickerComponent = /** @class */ (function (_super) {
    __extends(ColorPickerComponent, _super);
    function ColorPickerComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        _this.minLength = undefined;
        _this.maxLength = undefined;
        _this.hideUsedColors = true;
        return _this;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    ColorPickerComponent.prototype.selectColor = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this.control.setValue(value);
    };
    ColorPickerComponent.decorators = [
        { type: Component, args: [{
                    providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR$2],
                    selector: 'color-picker',
                    styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}.td-dynamic-input-wrapper .ngx-editor{margin-top:10px}"],
                    template: "<style>\n\n.ngx-editor {\n\tmargin-top: 10px;\n}\n\n</style>\n\n<div class=\"td-dynamic-input-wrapper\" style=\"display: block;\">\n\t<label style=\"display: block; margin-right: 10px;\">{{label}} {{required ? '*' : ''}}</label>\n\t<mcc-color-picker [selectedColor]=\"value\" (selected)=\"selectColor($event)\" [hideUsedColors]=\"hideUsedColors\"></mcc-color-picker>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    ColorPickerComponent.ctorParameters = function () { return []; };
    return ColorPickerComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TimePickerComponent; }),
    multi: true,
};
var TimePickerComponent = /** @class */ (function (_super) {
    __extends(TimePickerComponent, _super);
    function TimePickerComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        _this.format = 24;
        return _this;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    TimePickerComponent.prototype.selectValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this.control.setValue(value);
    };
    TimePickerComponent.decorators = [
        { type: Component, args: [{
                    providers: [DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$1],
                    selector: 'td-time-picker',
                    styles: [".td-dynamic-timepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-timepicker-wrapper .td-dynamic-timepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
                    template: "<div class=\"td-time-picker\">\n\t<mat-form-field class=\"td-dynamic-timepicker-field\">\n\t\t<input matInput [(ngModel)]=\"value\" (ngModelChange)=\"selectValue($event)\" [format]=\"format\" [ngxTimepicker]=\"pickerT\"\n\t\t\t[placeholder]=\"label\" [required]=\"required\" [min]=\"min\" [max]=\"max\" autocomplete=\"off\"/>\n\t\t<ngx-material-timepicker #pickerT></ngx-material-timepicker>\n    </mat-form-field>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TimePickerComponent.ctorParameters = function () { return []; };
    return TimePickerComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ moment$1 = moment;
var /** @type {?} */ DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return DateTimePickerComponent; }),
    multi: true,
};
var DateTimePickerComponent = /** @class */ (function (_super) {
    __extends(DateTimePickerComponent, _super);
    function DateTimePickerComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        _this.format = 24;
        _this.dateTime = moment$1.utc();
        _this.dateValue = null;
        _this.timeValue = '';
        return _this;
    }
    /**
     * @return {?}
     */
    DateTimePickerComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        if (this.value) {
            this.dateTime = this.value;
            this.initValues();
        }
        else {
            this.dateTime = moment$1.utc();
            this.control.setValue(this.dateTime);
        }
    };
    /**
     * @return {?}
     */
    DateTimePickerComponent.prototype.initValues = /**
     * @return {?}
     */
    function () {
        this.dateValue = moment$1.utc(this.dateTime.clone());
        this.timeValue = this.dateTime.format('HH:mm');
    };
    /**
     * @param {?} value
     * @return {?}
     */
    DateTimePickerComponent.prototype.selectDateValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        if (this.dateTime == null) {
            this.dateTime = moment$1.utc();
        }
        this.dateTime.year(value.year()).month(value.month()).date(value.date());
        this.control.setValue(this.dateTime);
    };
    /**
     * @param {?} value
     * @return {?}
     */
    DateTimePickerComponent.prototype.selectTimeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var /** @type {?} */ timeMoment = moment$1.utc(this.timeValue, 'HH:mm');
        if (this.dateTime == null) {
            this.dateTime = moment$1.utc();
        }
        this.dateTime.hour(timeMoment.hour()).minute(timeMoment.minute()).second(timeMoment.second());
        this.control.setValue(this.dateTime);
    };
    DateTimePickerComponent.decorators = [
        { type: Component, args: [{
                    providers: [DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$2],
                    selector: 'td-date-time-picker',
                    styles: [".td-dynamic-timepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-timepicker-wrapper .td-dynamic-timepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
                    template: "<style>\n\n.timeLabel {\n\tdisplay: block;\n\tmargin-bottom: 5px;\n\tcolor: rgba(0, 0, 0, 0.54);\n\tfont-size: 11px;\n}\n\n.timeInput {\n\tborder: none;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.54);\n    width: 201px;\n}\n\n.timeIcon {\n\tdisplay: inline-flex;\n\tvertical-align: middle;\n}\n\n</style>\n\n<div class=\"td-dynamic-datepicker-wrapper\">\n\t<label>{{label}}</label>\n\n\t<br />\n\t<br />\n\n\t<mat-form-field class=\"td-dynamic-datepicker-field\">\n\t\t<input #elementInput matInput [matDatepicker]=\"dynamicDatePicker\" autocomplete=\"off\"\n\t\t\t[(ngModel)]=\"dateValue\" (ngModelChange)=\"selectDateValue($event)\"\n\t\t\tplaceholder=\"Fecha\" [required]=\"required\" [min]=\"min\" [max]=\"max\"\n\t\t/>\n\t\t<mat-datepicker-toggle matSuffix [for]=\"dynamicDatePicker\"></mat-datepicker-toggle>\n\t\t<mat-datepicker #dynamicDatePicker></mat-datepicker>\n\n\t</mat-form-field>\n\n\t<br />\n\n\t<label class=\"timeLabel\">Hora</label>\n\t<input class=\"timeInput\" [ngxTimepicker]=\"pickerDT\" [(ngModel)]=\"timeValue\" (ngModelChange)=\"selectTimeValue($event)\"\n\t\t[disableClick]=\"true\" readonly [format]=\"format\" [required]=\"required\" autocomplete=\"off\" />\n    <ngx-material-timepicker-toggle class=\"timeIcon\" [for]=\"pickerDT\"></ngx-material-timepicker-toggle>\n    <ngx-material-timepicker #pickerDT></ngx-material-timepicker>\n\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    DateTimePickerComponent.ctorParameters = function () { return []; };
    return DateTimePickerComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var TranslateDialogComponent = /** @class */ (function () {
    function TranslateDialogComponent(dialogRef, data) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.remainingLangs = [];
        this.selectedLang = '';
        if (this.data && this.data.langs) {
            this.remainingLangs = this.data.langs;
        }
    }
    /**
     * @return {?}
     */
    TranslateDialogComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
    };
    TranslateDialogComponent.decorators = [
        { type: Component, args: [{
                    selector: 'translate-dialog',
                    template: "<h4 mat-dialog-title>{{'newLanguage' | translate}}</h4>\n<div mat-dialog-content>\n\t<mat-form-field>\n\t\t<mat-select placeholder=\"{{'language' | translate}}\" [(ngModel)]=\"selectedLang\">\n\t\t    <mat-option *ngFor=\"let lang of remainingLangs\" [value]=\"lang\">\n\t\t\t\t{{lang | translate}}\n\t\t    </mat-option>\n\t\t</mat-select>\n\t</mat-form-field>\n</div>\n<div mat-dialog-actions>\n  \t<button mat-button style=\"float:right;\" (click)=\"dialogRef.close(selectedLang)\">OK</button>\n</div>\n"
                },] },
    ];
    /** @nocollapse */
    TranslateDialogComponent.ctorParameters = function () { return [
        { type: MatDialogRef, },
        { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] },] },
    ]; };
    return TranslateDialogComponent;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return TranslateComponent; }),
    multi: true,
};
var TranslateComponent = /** @class */ (function (_super) {
    __extends(TranslateComponent, _super);
    function TranslateComponent(dialog, changeDetector) {
        var _this = _super.call(this) || this;
        _this.dialog = dialog;
        _this.changeDetector = changeDetector;
        _this.height = "150px";
        _this.toolbarConfig = [
            ['bold', 'italic', 'underline'],
            ['fontName', 'fontSize', 'color'],
            ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
            ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
            ['horizontalLine', 'orderedList', 'unorderedList'],
            ['link', 'unlink']
        ];
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.min = undefined;
        _this.max = undefined;
        _this.minLength = undefined;
        _this.maxLength = undefined;
        _this.langs = ['es'];
        //TODO: Guachau...
        _this.allLangs = ['es', 'en', 'fr', 'de'];
        _this.selectedIndex = 0;
        _this.selectedLang = '';
        _this.templateType = '';
        return _this;
    }
    /**
     * @return {?}
     */
    TranslateComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        this.selectedLang = this.langs[0];
        this.templateType = TranslateComponent.getTemplateType(this.type);
        this.initValue(this.value);
    };
    /**
     * @param {?} arr
     * @param {?} value
     * @return {?}
     */
    TranslateComponent.prototype.inArray = /**
     * @param {?} arr
     * @param {?} value
     * @return {?}
     */
    function (arr, value) {
        return arr.indexOf(value) > -1;
    };
    /**
     * @param {?} value
     * @return {?}
     */
    TranslateComponent.prototype.initValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this.valuesJSON = {};
        if (value) {
            if (typeof value === 'string') {
                value = JSON.parse(value);
            }
            this.langs = [];
            for (var /** @type {?} */ lang in value) {
                if (this.inArray(this.allLangs, lang)) {
                    this.langs.push(lang);
                }
            }
        }
        try {
            for (var _a = __values(this.langs), _b = _a.next(); !_b.done; _b = _a.next()) {
                var lang = _b.value;
                if (value) {
                    this.valuesJSON[lang] = (value[lang] || '');
                }
                else {
                    this.valuesJSON[lang] = '';
                }
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
            }
            finally { if (e_1) throw e_1.error; }
        }
        this.values = this.parseInit(this.valuesJSON);
        var /** @type {?} */ jsonValue = JSON.stringify(this.valuesJSON);
        this.control.setValue(jsonValue);
        var e_1, _c;
    };
    /**
     * @param {?} valuesJSON
     * @return {?}
     */
    TranslateComponent.prototype.parseInit = /**
     * @param {?} valuesJSON
     * @return {?}
     */
    function (valuesJSON) {
        var /** @type {?} */ values = {};
        for (var /** @type {?} */ lang in valuesJSON) {
            values[lang] = this.parseValue(valuesJSON[lang]);
        }
        return values;
    };
    /**
     * @param {?} value
     * @return {?}
     */
    TranslateComponent.prototype.parseValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        if (this.templateType == 'file-input') {
            return undefined;
        }
        else {
            return value;
        }
    };
    /**
     * @param {?} type
     * @return {?}
     */
    TranslateComponent.getTemplateType = /**
     * @param {?} type
     * @return {?}
     */
    function (type) {
        switch (type) {
            case 'text':
            case 'input':
                return 'input';
            case 'textarea':
                return 'area';
            case 'text-editor':
                return 'editor';
            case 'file-input':
                return 'file-input';
            default:
                return '';
        }
    };
    /**
     * @param {?} lang
     * @return {?}
     */
    TranslateComponent.prototype.selectLang = /**
     * @param {?} lang
     * @return {?}
     */
    function (lang) {
        var /** @type {?} */ index = this.langs.findIndex(function (row) {
            return row == lang;
        });
        if (index != this.selectedIndex) {
            this.selectedIndex = index;
        }
    };
    /**
     * @return {?}
     */
    TranslateComponent.prototype.addLang = /**
     * @return {?}
     */
    function () {
        var _this = this;
        var /** @type {?} */ langs = this.langs;
        var /** @type {?} */ remLangs = this.allLangs.filter(function (x) {
            return !_this.inArray(langs, x);
        });
        this.openDialog(remLangs);
    };
    /**
     * @param {?} lang
     * @return {?}
     */
    TranslateComponent.prototype.removeLang = /**
     * @param {?} lang
     * @return {?}
     */
    function (lang) {
        if (this.langs.length <= 1) {
            return;
        }
        var /** @type {?} */ index = this.langs.findIndex(function (row) {
            return row == lang;
        });
        if (index !== -1) {
            this.langs.splice(index, 1);
            delete this.values[lang];
            delete this.valuesJSON[lang];
            if (index == this.selectedIndex) {
                this.selectedIndex = 0;
                this.selectedLang = this.langs[0];
            }
            else {
                this.selectLang(this.selectedLang);
            }
            var /** @type {?} */ jsonValue = JSON.stringify(this.valuesJSON);
            this.control.setValue(jsonValue);
        }
    };
    /**
     * @param {?} remLangs
     * @return {?}
     */
    TranslateComponent.prototype.openDialog = /**
     * @param {?} remLangs
     * @return {?}
     */
    function (remLangs) {
        var _this = this;
        var /** @type {?} */ data = {
            langs: remLangs
        };
        var /** @type {?} */ dialogRef = this.dialog.open(TranslateDialogComponent, { data: data });
        dialogRef.afterClosed().subscribe(function (lang) {
            if (lang) {
                _this.valuesJSON[lang] = '';
                _this.values[lang] = _this.parseValue(_this.valuesJSON[lang]);
                _this.langs.push(lang);
                _this.changeDetector.detectChanges();
                _this.selectLang(lang);
            }
        });
    };
    /**
     * @param {?} newValue
     * @param {?} lang
     * @return {?}
     */
    TranslateComponent.prototype.changeValue = /**
     * @param {?} newValue
     * @param {?} lang
     * @return {?}
     */
    function (newValue, lang) {
        return __awaiter(this, void 0, void 0, function () {
            var _a, _b, jsonValue;
            return __generator(this, function (_c) {
                switch (_c.label) {
                    case 0:
                        if (!(newValue instanceof File)) return [3 /*break*/, 2];
                        _a = this.valuesJSON;
                        _b = lang;
                        return [4 /*yield*/, TranslateComponent.toBase64(newValue)];
                    case 1:
                        _a[_b] = _c.sent();
                        return [3 /*break*/, 3];
                    case 2:
                        if (newValue == undefined) {
                            this.valuesJSON[lang] = '';
                        }
                        else {
                            this.valuesJSON[lang] = newValue;
                        }
                        _c.label = 3;
                    case 3:
                        jsonValue = JSON.stringify(this.valuesJSON);
                        this.control.setValue(jsonValue);
                        return [2 /*return*/];
                }
            });
        });
    };
    /**
     * @param {?} value
     * @return {?}
     */
    TranslateComponent.toBase64 = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        return __awaiter(this, void 0, void 0, function () {
            var myReader, image, promise;
            return __generator(this, function (_a) {
                myReader = new FileReader();
                image = '';
                promise = new Promise(function (resolve) {
                    myReader.onloadend = function (e) {
                        image = myReader.result;
                        resolve(image);
                    };
                    myReader.readAsDataURL(value);
                });
                return [2 /*return*/, promise];
            });
        });
    };
    TranslateComponent.decorators = [
        { type: Component, args: [{
                    providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR$3],
                    selector: 'translate',
                    styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
                    template: "<style>\n\n.ngx-editor {\n\tmargin-top: 10px;\n}\n\n</style>\n\n<div class=\"td-translatable\">\n\t<label>{{label}}</label>\n\t<mat-tab-group #tabGroup class=\"tab-group\" dynamicHeight [(selectedIndex)]=\"selectedIndex\">\n\t\t<mat-tab *ngFor=\"let lang of langs\">\n\t\t\t<ng-template matTabLabel>\n\t\t\t\t<span (click)=\"selectLang(lang)\">{{lang | translate}}</span>\n\t\t\t\t<mat-icon (click)=\"removeLang(lang)\" style=\"vertical-align: middle; margin-left: 10px;\">close</mat-icon>\n\t\t\t</ng-template>\n\t\t\t<div style=\"width:100%;\" [ngSwitch]=\"templateType\">\n\t\t\t\t<ng-template ngSwitchCase=\"input\">\n\t\t\t\t\t<div class=\"td-dynamic-input-wrapper\">\n\t\t\t\t\t  <mat-form-field class=\"td-dynamic-input-field\">\n\t\t\t\t\t    <input #elementInput\n\t\t\t\t\t            matInput\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t            [(ngModel)]=\"values[lang]\"\n\t\t\t\t\t\t\t\t(ngModelChange)=\"changeValue($event, lang)\"\n\t\t\t\t\t            [type]=\"type\"\n\t\t\t\t\t            [required]=\"required\"\n\t\t\t\t\t            [attr.min]=\"min\"\n\t\t\t\t\t            [attr.max]=\"max\"\n\t\t\t\t\t            [attr.minLength]=\"minLength\"\n\t\t\t\t\t            [attr.maxLength]=\"maxLength\"/>\n\t\t\t\t\t  </mat-form-field>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngSwitchCase=\"area\">\n\t\t\t\t\t<div class=\"td-dynamic-textarea-wrapper\">\n\t\t\t\t\t  <mat-form-field class=\"td-dynamic-textarea-field\" style=\"width:100%;\">\n\t\t\t\t\t    <textarea #elementInput\n\t\t\t\t\t            matInput\n\t\t\t\t\t            [(ngModel)]=\"values[lang]\"\n\t\t\t\t\t\t\t\t(ngModelChange)=\"changeValue($event, lang)\"\n\t\t\t\t\t            [required]=\"required\"\n\t\t\t\t\t            rows=\"4\">\n\t\t\t\t\t    </textarea>\n\t\t\t\t\t  </mat-form-field>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngSwitchCase=\"editor\">\n\t\t\t\t\t<div class=\"td-dynamic-input-wrapper\" style=\"display: block;\">\n\t\t\t\t\t\t<app-ngx-editor [(ngModel)]=\"values[lang]\" (ngModelChange)=\"changeValue($event, lang)\"\n\t\t\t\t\t\t\t[height]=\"height\" [minHeight]=\"height\" [toolbar]=\"toolbarConfig\" style=\"width:100%;\">\n\t\t\t\t\t\t</app-ngx-editor>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngSwitchCase=\"file-input\">\n\t\t\t\t\t<div class=\"td-dynamic-file-input-wrapper\" style=\"display: flex;\">\n\t\t\t\t\t\t<mat-form-field tdFileDrop class=\"td-dynamic-file-input-field\" floatLabel=\"never\" (fileDrop)=\"values[lang] = $event\"\n\t\t\t\t\t\t\t(click)=\"fileInput.inputElement.click()\" (keyup.enter)=\"fileInput.inputElement.click()\"\n\t\t\t\t\t\t\t(keyup.delete)=\"fileInput.clear()\" (keyup.backspace)=\"fileInput.clear()\">\n\t\t\t\t\t\t\t\t<input matInput autocomplete=\"off\" [value]=\"values[lang]?.name\" [placeholder]=\"label\" readonly />\n\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t<button style=\"align-self: center;\" mat-icon-button *ngIf=\"values[lang]\" (click)=\"fileInput.clear(); changeValue(undefined,lang);\" (keyup.enter)=\"fileInput.clear()\">\n\t\t\t\t\t\t\t<mat-icon>cancel</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<td-file-input style=\"align-self:center; margin-left:10px;\" class=\"td-file-input\" #fileInput [(ngModel)]=\"values[lang]\" (ngModelChange)=\"changeValue($event, lang)\">\n\t\t\t\t\t\t\t<mat-icon>folder</mat-icon>\n\t\t\t\t\t\t\t<span>{{ label }}</span>\n\t\t\t\t\t\t</td-file-input>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngSwitchDefault>\n\t\t\t\t\t<div class=\"td-dynamic-input-wrapper\">\n\t\t\t\t\t  <mat-form-field class=\"td-dynamic-input-field\">\n\t\t\t\t\t    <input #elementInput\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t            matInput\n\t\t\t\t\t            [(ngModel)]=\"values[lang]\"\n\t\t\t\t\t\t\t\t(ngModelChange)=\"changeValue($event, lang)\"\n\t\t\t\t\t            [type]=\"type\"\n\t\t\t\t\t            [required]=\"required\"\n\t\t\t\t\t            [attr.min]=\"min\"\n\t\t\t\t\t            [attr.max]=\"max\"\n\t\t\t\t\t            [attr.minLength]=\"minLength\"\n\t\t\t\t\t            [attr.maxLength]=\"maxLength\"/>\n\t\t\t\t\t  </mat-form-field>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</mat-tab>\n\t\t<mat-tab [disabled]=true>\n\t\t\t<ng-template matTabLabel><mat-icon (click)=\"addLang()\" style=\"color: #000000;\">add</mat-icon></ng-template>\n\t\t</mat-tab>\n\t</mat-tab-group>\n</div>\n",
                },] },
    ];
    /** @nocollapse */
    TranslateComponent.ctorParameters = function () { return [
        { type: MatDialog, },
        { type: ChangeDetectorRef, },
    ]; };
    TranslateComponent.propDecorators = {
        "tabGroup": [{ type: ViewChild, args: ['tabGroup',] },],
    };
    return TranslateComponent;
}(AbstractControlValueAccessor));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR$4 = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return FormOrganizationComponent; }),
    multi: true,
};
var FormOrganizationComponent = /** @class */ (function (_super) {
    __extends(FormOrganizationComponent, _super);
    function FormOrganizationComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.label = '';
        _this.type = undefined;
        _this.required = undefined;
        _this.hasFilter = false;
        _this.hasButtons = true;
        _this.editable = true;
        _this.multiple = false;
        _this.saveable = false;
        _this.expandible = true;
        _this.collapsable = true;
        _this.nodes = [];
        _this.extraFields = [];
        return _this;
    }
    /**
     * @return {?}
     */
    FormOrganizationComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        if (this.value) {
            this.nodes = this.value;
        }
    };
    /**
     * @param {?} nodes
     * @return {?}
     */
    FormOrganizationComponent.prototype.onUpdate = /**
     * @param {?} nodes
     * @return {?}
     */
    function (nodes) {
        if (nodes.length > 0) {
            this.control.setValue(nodes);
        }
        else {
            this.control.setValue(null);
        }
    };
    FormOrganizationComponent.decorators = [
        { type: Component, args: [{
                    providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR$4],
                    selector: 'form-organization',
                    styles: [".td-dynamic-input-wrapper{-ms-flex-directio