/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
import { Component, ChangeDetectorRef, Output, EventEmitter, ViewChild } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
import { ControlType } from '../../../models/control';
import { ProcessService } from '../../../services/process.service';
import { FVAbstractControl } from '../../shared/abstract-control.component';
import { Helper } from '../../shared/helper';
export class FVFormTabComponent extends FVAbstractControl {
    /**
     * @param {?} process
     * @param {?} ref
     */
    constructor(process, ref) {
        super(process);
        this.process = process;
        this.ref = ref;
        this.titleUpdated = new EventEmitter();
        this.onDone = new EventEmitter();
        this.shouldShow = true;
        this.subscriptions.push(this.process.onChange.subscribe((changeSet) => {
            /** @type {?} */
            const refName = this.control && (this.control.referenceName || this.control.sectionName);
            if (!refName) {
                return;
            }
            if (changeSet.changeName === `show-${refName}`) {
                this.shouldShow = !!changeSet.changeVal;
                this.class = this.generateClass();
            }
            /** @type {?} */
            const isDetectTarget = changeSet.changeVal === refName;
            if (changeSet.changeName === 'detectChanges' && isDetectTarget) {
                this.ref.detectChanges();
            }
        }));
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.class = this.generateClass();
        this.ref.detectChanges();
        if (this.control && ControlType.controlType(this.control.controlType) === 'SectionLayout') {
            this.process.set(`section-${this.control.sectionName}`, this.control, this.task && this.task.taskId || this.task.id);
        }
    }
    /**
     * @param {?} title
     * @return {?}
     */
    updateTitle(title) {
        this.titleUpdated.emit(title);
    }
    /**
     * @param {?} num
     * @return {?}
     */
    controlType(num) {
        return ControlType.controlType(num);
    }
    /**
     * @param {?} num
     * @return {?}
     */
    controlGroupType(num) {
        return ControlType.controlGroupType(num);
    }
    /**
     * @param {?} control
     * @return {?}
     */
    columnsClass(control) {
        /** @type {?} */
        const columnsCount = this.notEmptyColumns(control).length;
        return `columns-${columnsCount}`;
    }
    /**
     * @param {?} control
     * @return {?}
     */
    visibleColumns(control) {
        /** @type {?} */
        const columns = this.notEmptyColumns(control);
        return columns;
    }
    /**
     * @param {?} control
     * @return {?}
     */
    isHidden(control) {
        return !this.shouldShow || control.isHidden || ControlType.controlType(control.controlType) === 'HiddenField';
    }
    /**
     * @param {?} response
     * @return {?}
     */
    _onDone(response) {
        this.onDone.emit(response);
    }
    /**
     * @return {?}
     */
    debugText() {
        /** @type {?} */
        const sectionName = this.control.sectionName;
        if (sectionName) {
            return `sectionName: ${sectionName}
      ${super.debugText()}`;
        }
        return super.debugText();
    }
    /**
     * @return {?}
     */
    get missingFieldsDebug() {
        return this._missingFieldsDebug;
    }
    /**
     * @return {?}
     */
    get isGrid() {
        return this.task.hasOwnProperty('defaultNode');
    }
    /**
     * @param {?} control
     * @return {?}
     */
    notEmptyColumns(control) {
        return (control['columns'] || []).filter((item) => {
            if (!item.controls.length) {
                return false;
            }
            /** @type {?} */
            let controls = [];
            if (item.controls) {
                controls = item.controls.filter((_control) => Helper.haveVisibles(_control));
            }
            return controls.length ? controls : false;
        });
    }
    /**
     * @return {?}
     */
    generateClass() {
        return this.shouldShow && Helper.haveVisibles(this.control) && this.notEmptyContainer() ? 'formTab' : '';
    }
    /**
     * @return {?}
     */
    notEmptyContainer() {
        return !!this.mainContainer && this.mainContainer.nativeElement.innerText;
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.OnDestroy(this.ref);
    }
}
FVFormTabComponent.decorators = [
    { type: Component, args: [{
                selector: 'fv-form-tab',
                template: "<div #mainContainer *ngIf=\"control && group\" [class]=\"class\" [style.display]=\"isHidden(control) ? 'none' : null\"\n  [attr.id]=\"controlType(control.controlType) === 'SectionLayout' && 'section-' + control?.label\">\n  <ng-container *ngIf=\"control?.controlType\" [ngSwitch]=\"controlGroupType(control.controlType)\">\n    <!-- Design/Layout -->\n    <ng-container *ngSwitchCase=\"'design'\">\n      <!-- Switch control type -->\n      <ng-container [ngSwitch]=\"controlType(control.controlType)\">\n        <ng-container *ngSwitchCase=\"'SectionLayout'\">\n          <i *ngIf=\"buttonsDebug\" (click)=\"debugStatus =! debugStatus\" class=\"fa fa-stethoscope\"></i>\n          <span class=\"page-header\" *ngIf=\"!hideLabel\">\n            {{ control?.label | ltranslate }}</span>\n          <div *ngIf=\"debugStatus\" [innerText]=\"debugText()\"></div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'HtmlContent'\">\n          <fv-controls-html-content (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-html-content>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'CustomControl'\">\n          <fv-controls-custom-control (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-custom-control>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'BootstrapRow'\"></ng-container>\n\n        <!-- Switch default -->\n        <ng-container *ngSwitchDefault>\n          <div [ngStyle]=\"{'display': missingFieldsDebug ? 'block' : 'none'}\" [ngClass]=\"{'alert alert-warning': true, 'alert-danger': controlGroupType(control.controlType) === 'undefined'}\"\n            role=\"alert\">\n            <i *ngIf=\"buttonsDebug\" (click)=\"debugStatus =! debugStatus\" class=\"fa fa-stethoscope\"></i>\n            <div *ngIf=\"debugStatus\" [innerText]=\"debugText()\"></div>\n            <div>Unkown element</div>\n            <div [innerText]=\"debugText()\"></div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Form -->\n    <ng-container *ngSwitchCase=\"'form'\">\n\n      <!-- Switch control type -->\n      <ng-container [ngSwitch]=\"controlType(control.controlType)\">\n        <ng-container *ngSwitchCase=\"'EditableGrid'\">\n          <fv-controls-editable-grid (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\" (titleUpdated)=\"updateTitle($event)\"></fv-controls-editable-grid>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'ProgressBar'\">\n          <fv-controls-progress-bar (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-progress-bar>\n        </ng-container>\n\n        <!-- Switch default -->\n        <ng-container *ngSwitchDefault>\n          <div [ngStyle]=\"{'display': missingFieldsDebug ? 'block' : 'none'}\" [ngClass]=\"{'alert alert-warning': true, 'alert-danger': controlGroupType(control.controlType) === 'undefined'}\"\n            role=\"alert\">\n            <i *ngIf=\"buttonsDebug\" (click)=\"debugStatus =! debugStatus\" class=\"fa fa-stethoscope\"></i>\n            <div *ngIf=\"debugStatus\" [innerText]=\"debugText()\"></div>\n            <div>Unkown element</div>\n            <div>group: {{ controlGroupType(control.controlType) }}</div>\n            <div>controlType: {{ controlType(control.controlType) || 'undefined' }}</div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Inputs -->\n    <ng-container *ngSwitchCase=\"'input'\">\n\n      <!-- Switch control type -->\n      <ng-container [ngSwitch]=\"controlType(control.controlType)\">\n        <ng-container *ngSwitchCase=\"'Lookup'\">\n          <fv-controls-lookup (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\" [tabIndex]=\"tabIndex\"\n            [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\" [parentTask]=\"parentTask\"></fv-controls-lookup>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'Date'\">\n          <fv-controls-date (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\" [tabIndex]=\"tabIndex\"\n            [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\" [parentTask]=\"parentTask\"></fv-controls-date>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <fv-controls-datetime (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\" [tabIndex]=\"tabIndex\"\n            [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\" [parentTask]=\"parentTask\"></fv-controls-datetime>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'ListField'\">\n          <fv-controls-list-field (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-list-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'TextField'\">\n          <fv-controls-text-field (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-text-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'CheckBox'\">\n          <fv-controls-check-box (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\" [tabIndex]=\"tabIndex\"\n            [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\" [parentTask]=\"parentTask\"></fv-controls-check-box>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'Toggle'\">\n          <fv-controls-toggle (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\" [tabIndex]=\"tabIndex\"\n            [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\" [parentTask]=\"parentTask\"></fv-controls-toggle>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'RadioButton'\">\n          <fv-controls-radio-button (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-radio-button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'NumberField'\">\n          <fv-controls-number-field (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-number-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'MoneyField'\">\n          <fv-controls-number-field (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-number-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'UploadFile'\">\n          <fv-controls-upload-file (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" [control]=\"control\"\n            [tabIndex]=\"tabIndex\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n            [parentTask]=\"parentTask\"></fv-controls-upload-file>\n        </ng-container>\n\n        <!-- Switch default -->\n        <ng-container *ngSwitchDefault>\n          <div [ngStyle]=\"{'display': missingFieldsDebug ? 'block' : 'none'}\" [ngClass]=\"{'alert alert-warning': true, 'alert-danger': controlGroupType(control.controlType) === 'undefined'}\"\n            role=\"alert\">\n            <i *ngIf=\"buttonsDebug\" (click)=\"debugStatus =! debugStatus\" class=\"fa fa-stethoscope\"></i>\n            <div *ngIf=\"debugStatus\" [innerText]=\"debugText()\"></div>\n            <div>Unkown element</div>\n            <div>group: {{ controlGroupType(control.controlType) }}</div>\n            <div>controlType: {{ controlType(control.controlType) || 'undefined' }}</div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <div [ngStyle]=\"{'display': missingFieldsDebug ? 'block' : 'none'}\" [ngClass]=\"{'alert alert-warning': true, 'alert-danger': controlGroupType(control.controlType) === 'undefined'}\"\n        role=\"alert\">\n        <i *ngIf=\"buttonsDebug\" (click)=\"debugStatus =! debugStatus\" class=\"fa fa-stethoscope\"></i>\n        <div *ngIf=\"debugStatus\" [innerText]=\"debugText()\"></div>\n        <div>Unkown element</div>\n        <div>group: {{ controlGroupType(control.controlType) }}</div>\n        <div>controlType: {{ controlType(control.controlType) || 'undefined' }}</div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <!-- Do recursive -->\n  <div [class]=\"controlType(control.controlType) === 'SectionLayout' && 'section-' + control?.label\">\n    <div *ngIf=\"control?.controls\" class=\"controls-row\">\n      <fv-form-tab (onDone)=\"_onDone($event)\" (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" *ngFor=\"let _control of control.controls\"\n        [control]=\"_control\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n        [parentTask]=\"parentTask\" [style.display]=\"isHidden(_control) ? 'none' : null\" [tabIndex]=\"tabIndex\"></fv-form-tab>\n    </div>\n    <div *ngIf=\"control?.columns\" class=\"controls-row\">\n      <div *ngFor=\"let column of visibleColumns(control)\" [class]=\"column?.css + ' ' + columnsClass(control)\">\n        <fv-form-tab (onDone)=\"_onDone($event)\" (updateGroup)=\"updateFormGroup($event)\" [group]=\"group\" *ngFor=\"let _control of column.controls\"\n          [control]=\"_control\" [stateId]=\"stateId\" [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\"\n          [parentTask]=\"parentTask\" [style.display]=\"isHidden(_control) ? 'none' : null\" [tabIndex]=\"tabIndex\"></fv-form-tab>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- Custom containers -->\n\n<!-- Grid -->\n<fv-controls-menu-grid *ngIf=\"isGrid\" (updateGroup)=\"false\" [group]=\"group\" [control]=\"task\" [stateId]=\"stateId\"\n  [processId]=\"processId\" [disabled]=\"disabled\" [task]=\"task\" [parentTask]=\"parentTask\" (onDone)=\"_onDone($event)\"\n  (titleUpdated)=\"updateTitle($event)\"></fv-controls-menu-grid>",
                viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
                styles: [".formTab{padding:15px;border:1px solid #ddd;margin:0 0 5px;background-color:#f7f7f7}.formTab .formTab{padding:0;border:0;margin:10px 0 0;background-color:transparent}.formTab .page-header{padding:0;margin:-5px 0 15px;display:block;position:relative;color:#90a4ae;border-bottom:1px solid #90a4ae}", ".col{display:inline-flex;flex-basis:0;flex-grow:1;max-width:100%;min-width:50%}.col fv-form-tab{padding:0 5px;display:block;width:100%}.col fv-form-tab .controls-row{margin:0;padding:0}.col fv-form-tab div{max-width:100%}.columns-0,.columns-1{width:100%;min-width:100%;max-width:100%}.columns-2{width:50%;min-width:50%;max-width:50%}.columns-3{width:33.33%;max-width:33.33%;min-width:33.33%}.columns-4{width:25%;max-width:25%;min-width:25%}.controlBox .input-group{display:inline-flex;width:100%;margin-top:5px}.controlBox>.input-group>button:not(.input-group-addon),.controlBox>.input-group>input,.controlBox>.input-group>select{height:40px!important;width:100%;padding:10px}.controlBox .input-group button.input-group-addon{position:relative;width:35px;height:40px}.controlBox .input-group span.controlName{color:red}.controlBox .input-group button.input-group-addon i{position:absolute;top:10px;bottom:0;left:0;right:0}.has-text-centered,.table,.table thead th{text-align:center}.gridForm{width:100%;padding:0;margin:0 0 10px}.gridForm .input-group>.form-control{max-width:50%;border-radius:unset;margin-right:10px;min-width:80px;min-height:45px}.gridForm .input-group>.addon{background:0 0;border:none;color:#36c}.grid-table tbody>tr>td{vertical-align:middle}span.required{color:red}form:not(.ng-untouched) .ng-invalid{border:1px solid red}form:not(.ng-untouched) .ng-invalid.input-group-addon{border-left:none!important}span.error-block{color:red}@media screen and (max-width:426px){.columns-2,.columns-3,.columns-4{width:100%;max-width:100%;min-width:100%}}.tree:last-of-type(.accordion){margin:0}select:disabled{background:#eee}navigator-bot,navigator-top{display:flex}fv-menu-folder:last-of-type>accordion:last-of-type{margin:0;padding:0}.button-group>button:not(:last-child):not(:first-child){margin-left:0!important;padding-left:0!important;margin-right:0!important;padding-right:0!important}.fv_container,.fv_container>*,navigator-after,navigator-before{all:inherit!important;padding:0!important}.lookup-form .gridInputs{width:100%}.lookup-form .gridInputs select{width:40%}.lookup-form .gridInputs input{width:60%}.lookup-form .gridInputs,.lookup-form .gridInputs input,.lookup-form .gridInputs select{max-width:100%}.noMarginY{margin-top:0!important;margin-bottom:0!important}.placeholder,ng-select input:-moz-placeholder,ng-select input:-ms-input-placeholder,ng-select input:-webkit-input-placeholder,ng-select input:placeholder{color:#a9a9a9}select-dropdown>div{position:relative!important;top:0!important}select-dropdown div.options{text-align:left}bs-datepicker-navigation-view{display:block;width:100%;text-align:center}.bs-datepicker-head .previous{float:left}.bs-datepicker-head .next{float:right}textarea{min-height:45px;min-width:100%}.modal-dialog>.modal-content{max-height:100vh}.modal-content>.modal-body{max-height:85vh;overflow-y:auto;padding:2rem 2rem 40px}.modal-content fv-navigator.nav-bottom{display:block;height:50px;position:fixed;bottom:0;left:0;right:0;padding:0 3rem;background-color:#fdfdfd9e;border-bottom-right-radius:10px;border-bottom-left-radius:10px;margin:0 2px;z-index:999}.modal-content fv-navigator.nav-bottom.low-height{position:absolute}.modal-content fv-navigator .docked-buttons{width:auto}.modal-content fv-navigator .btn-col:not(.bottom){max-width:unset;padding:6px!important}.modal-dialog .modal-header .pull-right span{font-size:inherit!important}.basic-commands button{margin-right:5px;text-transform:capitalize}"]
            }] }
];
/** @nocollapse */
FVFormTabComponent.ctorParameters = () => [
    { type: ProcessService },
    { type: ChangeDetectorRef }
];
FVFormTabComponent.propDecorators = {
    titleUpdated: [{ type: Output }],
    onDone: [{ type: Output }],
    mainContainer: [{ type: ViewChild, args: ['mainContainer',] }]
};
if (false) {
    /** @type {?} */
    FVFormTabComponent.prototype.class;
    /** @type {?} */
    FVFormTabComponent.prototype.titleUpdated;
    /** @type {?} */
    FVFormTabComponent.prototype.onDone;
    /** @type {?} */
    FVFormTabComponent.prototype.mainContainer;
    /** @type {?} */
    FVFormTabComponent.prototype.shouldShow;
    /** @type {?} */
    FVFormTabComponent.prototype.process;
    /** @type {?} */
    FVFormTabComponent.prototype.ref;
}

//# sourceMappingURL=data:application/json;base64, 