/*!
 * devextreme-angular-test
 * Version: 17.2.8
 * Build date: Mon Feb 05 2018
 *
 * Copyright (c) 2012 - 2018 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-angular
 */











import {
    Component,
    NgModule,
    ElementRef,
    NgZone,
    Input,
    Output,
    OnDestroy,
    Injector,
    EventEmitter,
    OnChanges,
    DoCheck,
    SimpleChanges,
    ContentChildren,
    QueryList
} from '@angular/core';


import DevExpress from 'devextreme/bundles/dx.all';

import DxForm from 'devextreme/ui/form';


import { DxComponent } from '../core/component';
import { DxTemplateHost } from '../core/template-host';
import { DxTemplateModule } from '../core/template';
import { EventsRegistrator } from '../core/events-strategy';
import { NestedOptionHost } from '../core/nested-option';
import { WatcherHelper } from '../core/watcher-helper';
import { IterableDifferHelper } from '../core/iterable-differ-helper';

import { DxoColCountByScreenModule } from './nested/col-count-by-screen';
import { DxiItemModule } from './nested/item-dxi';
import { DxoLabelModule } from './nested/label';
import { DxiValidationRuleModule } from './nested/validation-rule-dxi';
import { DxoTabPanelOptionsModule } from './nested/tab-panel-options';
import { DxiTabModule } from './nested/tab-dxi';

import { DxiItemComponent } from './nested/item-dxi';




/**
 * The Form widget represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns.
 */
@Component({
    selector: 'dx-form',
    template: '',
    providers: [
        DxTemplateHost,
        WatcherHelper,
        NestedOptionHost,
        IterableDifferHelper
    ]
})
export class DxFormComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
    instance: DxForm;


    /**
     * Specifies the shortcut key that sets focus on the widget.
     */
    @Input()
    get accessKey(): string {
        return this._getOption('accessKey');
    }
    set accessKey(value: string) {
        this._setOption('accessKey', value);
    }


    /**
     * Specifies whether or not the widget changes its state when interacting with a user.
     */
    @Input()
    get activeStateEnabled(): boolean {
        return this._getOption('activeStateEnabled');
    }
    set activeStateEnabled(value: boolean) {
        this._setOption('activeStateEnabled', value);
    }


    /**
     * Specifies whether or not all root item labels are aligned.
     */
    @Input()
    get alignItemLabels(): boolean {
        return this._getOption('alignItemLabels');
    }
    set alignItemLabels(value: boolean) {
        this._setOption('alignItemLabels', value);
    }


    /**
     * Specifies whether or not item labels in all groups are aligned.
     */
    @Input()
    get alignItemLabelsInAllGroups(): boolean {
        return this._getOption('alignItemLabelsInAllGroups');
    }
    set alignItemLabelsInAllGroups(value: boolean) {
        this._setOption('alignItemLabelsInAllGroups', value);
    }


    /**
     * The count of columns in the form layout.
     */
    @Input()
    get colCount(): number|
        string {
        return this._getOption('colCount');
    }
    set colCount(value: number|
        string) {
        this._setOption('colCount', value);
    }


    /**
     * Specifies dependency between the screen factor and the count of columns in the form layout.
     */
    @Input()
    get colCountByScreen(): any {
        return this._getOption('colCountByScreen');
    }
    set colCountByScreen(value: any) {
        this._setOption('colCountByScreen', value);
    }


    /**
     * Specifies a function that customizes a form item after it has been created.
     */
    @Input()
    get customizeItem(): Function {
        return this._getOption('customizeItem');
    }
    set customizeItem(value: Function) {
        this._setOption('customizeItem', value);
    }


    /**
     * Specifies whether the widget responds to user interaction.
     */
    @Input()
    get disabled(): boolean {
        return this._getOption('disabled');
    }
    set disabled(value: boolean) {
        this._setOption('disabled', value);
    }


    /**
     * Specifies the attributes to be attached to the widget's root element.
     */
    @Input()
    get elementAttr(): any {
        return this._getOption('elementAttr');
    }
    set elementAttr(value: any) {
        this._setOption('elementAttr', value);
    }


    /**
     * Specifies whether the widget can be focused using keyboard navigation.
     */
    @Input()
    get focusStateEnabled(): boolean {
        return this._getOption('focusStateEnabled');
    }
    set focusStateEnabled(value: boolean) {
        this._setOption('focusStateEnabled', value);
    }


    /**
     * An object providing data for the form.
     */
    @Input()
    get formData(): any {
        return this._getOption('formData');
    }
    set formData(value: any) {
        this._setOption('formData', value);
    }


    /**
     * Specifies the widget's height.
     */
    @Input()
    get height(): number|
        Function|
        string {
        return this._getOption('height');
    }
    set height(value: number|
        Function|
        string) {
        this._setOption('height', value);
    }


    /**
     * Specifies text for a hint that appears when a user pauses on the widget.
     */
    @Input()
    get hint(): string {
        return this._getOption('hint');
    }
    set hint(value: string) {
        this._setOption('hint', value);
    }


    /**
     * Specifies whether the widget changes its state when a user pauses on it.
     */
    @Input()
    get hoverStateEnabled(): boolean {
        return this._getOption('hoverStateEnabled');
    }
    set hoverStateEnabled(value: boolean) {
        this._setOption('hoverStateEnabled', value);
    }


    /**
     * Holds an array of form items.
     */
    @Input()
    get items(): Array<DevExpress.ui.dxFormSimpleItem|
        DevExpress.ui.dxFormGroupItem|
        DevExpress.ui.dxFormTabbedItem|
        DevExpress.ui.dxFormEmptyItem> {
        return this._getOption('items');
    }
    set items(value: Array<DevExpress.ui.dxFormSimpleItem|
        DevExpress.ui.dxFormGroupItem|
        DevExpress.ui.dxFormTabbedItem|
        DevExpress.ui.dxFormEmptyItem>) {
        this._setOption('items', value);
    }


    /**
     * Specifies the location of a label against the editor.
     */
    @Input()
    get labelLocation(): string {
        return this._getOption('labelLocation');
    }
    set labelLocation(value: string) {
        this._setOption('labelLocation', value);
    }


    /**
     * The minimum column width used for calculating column count in the form layout.
     */
    @Input()
    get minColWidth(): number {
        return this._getOption('minColWidth');
    }
    set minColWidth(value: number) {
        this._setOption('minColWidth', value);
    }


    /**
     * The text displayed for optional fields.
     */
    @Input()
    get optionalMark(): string {
        return this._getOption('optionalMark');
    }
    set optionalMark(value: string) {
        this._setOption('optionalMark', value);
    }


    /**
     * Specifies whether all editors on the form are read-only. Applies only to non-templated items.
     */
    @Input()
    get readOnly(): boolean {
        return this._getOption('readOnly');
    }
    set readOnly(value: boolean) {
        this._setOption('readOnly', value);
    }


    /**
     * The text displayed for required fields.
     */
    @Input()
    get requiredMark(): string {
        return this._getOption('requiredMark');
    }
    set requiredMark(value: string) {
        this._setOption('requiredMark', value);
    }


    /**
     * Specifies the message that is shown for end-users if a required field value is not specified.
     */
    @Input()
    get requiredMessage(): string {
        return this._getOption('requiredMessage');
    }
    set requiredMessage(value: string) {
        this._setOption('requiredMessage', value);
    }


    /**
     * Switches the widget to a right-to-left representation.
     */
    @Input()
    get rtlEnabled(): boolean {
        return this._getOption('rtlEnabled');
    }
    set rtlEnabled(value: boolean) {
        this._setOption('rtlEnabled', value);
    }


    /**
     * Specifies the function returning the screen factor depending on the screen width.
     */
    @Input()
    get screenByWidth(): Function {
        return this._getOption('screenByWidth');
    }
    set screenByWidth(value: Function) {
        this._setOption('screenByWidth', value);
    }


    /**
     * A Boolean value specifying whether to enable or disable form scrolling.
     */
    @Input()
    get scrollingEnabled(): boolean {
        return this._getOption('scrollingEnabled');
    }
    set scrollingEnabled(value: boolean) {
        this._setOption('scrollingEnabled', value);
    }


    /**
     * Specifies whether or not a colon is displayed at the end of form labels.
     */
    @Input()
    get showColonAfterLabel(): boolean {
        return this._getOption('showColonAfterLabel');
    }
    set showColonAfterLabel(value: boolean) {
        this._setOption('showColonAfterLabel', value);
    }


    /**
     * Specifies whether or not the optional mark is displayed for optional fields.
     */
    @Input()
    get showOptionalMark(): boolean {
        return this._getOption('showOptionalMark');
    }
    set showOptionalMark(value: boolean) {
        this._setOption('showOptionalMark', value);
    }


    /**
     * Specifies whether or not the required mark is displayed for required fields.
     */
    @Input()
    get showRequiredMark(): boolean {
        return this._getOption('showRequiredMark');
    }
    set showRequiredMark(value: boolean) {
        this._setOption('showRequiredMark', value);
    }


    /**
     * Specifies whether or not the total validation summary is displayed on the form.
     */
    @Input()
    get showValidationSummary(): boolean {
        return this._getOption('showValidationSummary');
    }
    set showValidationSummary(value: boolean) {
        this._setOption('showValidationSummary', value);
    }


    /**
     * Specifies the number of the element when the Tab key is used for navigating.
     */
    @Input()
    get tabIndex(): number {
        return this._getOption('tabIndex');
    }
    set tabIndex(value: number) {
        this._setOption('tabIndex', value);
    }


    /**
     * Gives a name to the internal validation group.
     */
    @Input()
    get validationGroup(): string {
        return this._getOption('validationGroup');
    }
    set validationGroup(value: string) {
        this._setOption('validationGroup', value);
    }


    /**
     * Specifies whether the widget is visible.
     */
    @Input()
    get visible(): boolean {
        return this._getOption('visible');
    }
    set visible(value: boolean) {
        this._setOption('visible', value);
    }


    /**
     * Specifies the widget's width.
     */
    @Input()
    get width(): number|
        Function|
        string {
        return this._getOption('width');
    }
    set width(value: number|
        Function|
        string) {
        this._setOption('width', value);
    }

    /**
     * A handler for the contentReady event. Executed when the widget's content is ready. This handler may be executed multiple times during the widget's lifetime depending on the number of times its content changes.
     */
    @Output() onContentReady: EventEmitter<any>;

    /**
     * A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.
     */
    @Output() onDisposing: EventEmitter<any>;

    /**
     * A handler for the editorEnterKey event.
     */
    @Output() onEditorEnterKey: EventEmitter<any>;

    /**
     * A handler for the fieldDataChanged event.
     */
    @Output() onFieldDataChanged: EventEmitter<any>;

    /**
     * A handler for the initialized event. Executed only once, after the widget is initialized.
     */
    @Output() onInitialized: EventEmitter<any>;

    /**
     * A handler for the optionChanged event. Executed after an option of the widget is changed.
     */
    @Output() onOptionChanged: EventEmitter<any>;

    /**
     * A handler for the accessKeyChange event.
     */
    @Output() accessKeyChange: EventEmitter<string>;

    /**
     * A handler for the activeStateEnabledChange event.
     */
    @Output() activeStateEnabledChange: EventEmitter<boolean>;

    /**
     * A handler for the alignItemLabelsChange event.
     */
    @Output() alignItemLabelsChange: EventEmitter<boolean>;

    /**
     * A handler for the alignItemLabelsInAllGroupsChange event.
     */
    @Output() alignItemLabelsInAllGroupsChange: EventEmitter<boolean>;

    /**
     * A handler for the colCountChange event.
     */
    @Output() colCountChange: EventEmitter<number|
        string>;

    /**
     * A handler for the colCountByScreenChange event.
     */
    @Output() colCountByScreenChange: EventEmitter<any>;

    /**
     * A handler for the customizeItemChange event.
     */
    @Output() customizeItemChange: EventEmitter<Function>;

    /**
     * A handler for the disabledChange event.
     */
    @Output() disabledChange: EventEmitter<boolean>;

    /**
     * A handler for the elementAttrChange event.
     */
    @Output() elementAttrChange: EventEmitter<any>;

    /**
     * A handler for the focusStateEnabledChange event.
     */
    @Output() focusStateEnabledChange: EventEmitter<boolean>;

    /**
     * A handler for the formDataChange event.
     */
    @Output() formDataChange: EventEmitter<any>;

    /**
     * A handler for the heightChange event.
     */
    @Output() heightChange: EventEmitter<number|
        Function|
        string>;

    /**
     * A handler for the hintChange event.
     */
    @Output() hintChange: EventEmitter<string>;

    /**
     * A handler for the hoverStateEnabledChange event.
     */
    @Output() hoverStateEnabledChange: EventEmitter<boolean>;

    /**
     * A handler for the itemsChange event.
     */
    @Output() itemsChange: EventEmitter<Array<DevExpress.ui.dxFormSimpleItem|
        DevExpress.ui.dxFormGroupItem|
        DevExpress.ui.dxFormTabbedItem|
        DevExpress.ui.dxFormEmptyItem>>;

    /**
     * A handler for the labelLocationChange event.
     */
    @Output() labelLocationChange: EventEmitter<string>;

    /**
     * A handler for the minColWidthChange event.
     */
    @Output() minColWidthChange: EventEmitter<number>;

    /**
     * A handler for the optionalMarkChange event.
     */
    @Output() optionalMarkChange: EventEmitter<string>;

    /**
     * A handler for the readOnlyChange event.
     */
    @Output() readOnlyChange: EventEmitter<boolean>;

    /**
     * A handler for the requiredMarkChange event.
     */
    @Output() requiredMarkChange: EventEmitter<string>;

    /**
     * A handler for the requiredMessageChange event.
     */
    @Output() requiredMessageChange: EventEmitter<string>;

    /**
     * A handler for the rtlEnabledChange event.
     */
    @Output() rtlEnabledChange: EventEmitter<boolean>;

    /**
     * A handler for the screenByWidthChange event.
     */
    @Output() screenByWidthChange: EventEmitter<Function>;

    /**
     * A handler for the scrollingEnabledChange event.
     */
    @Output() scrollingEnabledChange: EventEmitter<boolean>;

    /**
     * A handler for the showColonAfterLabelChange event.
     */
    @Output() showColonAfterLabelChange: EventEmitter<boolean>;

    /**
     * A handler for the showOptionalMarkChange event.
     */
    @Output() showOptionalMarkChange: EventEmitter<boolean>;

    /**
     * A handler for the showRequiredMarkChange event.
     */
    @Output() showRequiredMarkChange: EventEmitter<boolean>;

    /**
     * A handler for the showValidationSummaryChange event.
     */
    @Output() showValidationSummaryChange: EventEmitter<boolean>;

    /**
     * A handler for the tabIndexChange event.
     */
    @Output() tabIndexChange: EventEmitter<number>;

    /**
     * A handler for the validationGroupChange event.
     */
    @Output() validationGroupChange: EventEmitter<string>;

    /**
     * A handler for the visibleChange event.
     */
    @Output() visibleChange: EventEmitter<boolean>;

    /**
     * A handler for the widthChange event.
     */
    @Output() widthChange: EventEmitter<number|
        Function|
        string>;




    @ContentChildren(DxiItemComponent)
    get itemsChildren(): QueryList<DxiItemComponent> {
        return this._getOption('items');
    }
    set itemsChildren(value) {
        this.setChildren('items', value);
    }


    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, injector: Injector,
            private _watcherHelper: WatcherHelper,
            private _idh: IterableDifferHelper, optionHost: NestedOptionHost) {

        super(elementRef, ngZone, templateHost, _watcherHelper);
        injector.get(EventsRegistrator);

        this._createEventEmitters([
            { subscribe: 'contentReady', emit: 'onContentReady' },
            { subscribe: 'disposing', emit: 'onDisposing' },
            { subscribe: 'editorEnterKey', emit: 'onEditorEnterKey' },
            { subscribe: 'fieldDataChanged', emit: 'onFieldDataChanged' },
            { subscribe: 'initialized', emit: 'onInitialized' },
            { subscribe: 'optionChanged', emit: 'onOptionChanged' },
            { emit: 'accessKeyChange' },
            { emit: 'activeStateEnabledChange' },
            { emit: 'alignItemLabelsChange' },
            { emit: 'alignItemLabelsInAllGroupsChange' },
            { emit: 'colCountChange' },
            { emit: 'colCountByScreenChange' },
            { emit: 'customizeItemChange' },
            { emit: 'disabledChange' },
            { emit: 'elementAttrChange' },
            { emit: 'focusStateEnabledChange' },
            { emit: 'formDataChange' },
            { emit: 'heightChange' },
            { emit: 'hintChange' },
            { emit: 'hoverStateEnabledChange' },
            { emit: 'itemsChange' },
            { emit: 'labelLocationChange' },
            { emit: 'minColWidthChange' },
            { emit: 'optionalMarkChange' },
            { emit: 'readOnlyChange' },
            { emit: 'requiredMarkChange' },
            { emit: 'requiredMessageChange' },
            { emit: 'rtlEnabledChange' },
            { emit: 'screenByWidthChange' },
            { emit: 'scrollingEnabledChange' },
            { emit: 'showColonAfterLabelChange' },
            { emit: 'showOptionalMarkChange' },
            { emit: 'showRequiredMarkChange' },
            { emit: 'showValidationSummaryChange' },
            { emit: 'tabIndexChange' },
            { emit: 'validationGroupChange' },
            { emit: 'visibleChange' },
            { emit: 'widthChange' }
        ]);

        this._idh.setHost(this);
        optionHost.setHost(this);
    }

    protected _createInstance(element, options) {
        return new DxForm(element, options);
    }

    ngOnDestroy() {
        this._destroyWidget();
    }

    ngOnChanges(changes: SimpleChanges) {
        super.ngOnChanges(changes);
        this.setupChanges('items', changes);
    }

    setupChanges(prop: string, changes: SimpleChanges) {
        if (!(prop in this._optionsToUpdate)) {
            this._idh.setup(prop, changes);
        }
    }

    ngDoCheck() {
        this._idh.doCheck('items');
        this._watcherHelper.checkWatchers();
        super.ngDoCheck();
    }

    _setOption(name: string, value: any) {
        let isSetup = this._idh.setupSingle(name, value);
        let isChanged = this._idh.getChanges(name, value) !== null;

        if (isSetup || isChanged) {
            super._setOption(name, value);
        }
    }

}

@NgModule({
  imports: [
    DxoColCountByScreenModule,
    DxiItemModule,
    DxoLabelModule,
    DxiValidationRuleModule,
    DxoTabPanelOptionsModule,
    DxiTabModule,
    DxTemplateModule
  ],
  declarations: [
    DxFormComponent
  ],
  exports: [
    DxFormComponent,
    DxoColCountByScreenModule,
    DxiItemModule,
    DxoLabelModule,
    DxiValidationRuleModule,
    DxoTabPanelOptionsModule,
    DxiTabModule,
    DxTemplateModule
  ],
  providers: [EventsRegistrator]

})
export class DxFormModule { }