/*! * 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, OnInit, AfterViewInit, ContentChild, forwardRef, HostListener, OnChanges, DoCheck, SimpleChanges, ContentChildren, QueryList } from '@angular/core'; import DevExpress from 'devextreme/bundles/dx.all'; import DxFilterBuilder from 'devextreme/ui/filter_builder'; import { DxValidatorComponent } from './validator'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 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 { DxiFieldModule } from './nested/field-dxi'; import { DxoFormatModule } from './nested/format'; import { DxoLookupModule } from './nested/lookup'; import { DxoFilterOperationDescriptionsModule } from './nested/filter-operation-descriptions'; import { DxoGroupOperationDescriptionsModule } from './nested/group-operation-descriptions'; import { DxiFieldComponent } from './nested/field-dxi'; const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxFilterBuilderComponent), multi: true }; /** * The FilterBuilder widget allows a user to build complex filter expressions with an unlimited number of filter conditions, combined by logical operations using the UI. */ @Component({ selector: 'dx-filter-builder', template: '', providers: [ DxTemplateHost, WatcherHelper, CUSTOM_VALUE_ACCESSOR_PROVIDER, NestedOptionHost, IterableDifferHelper ] }) export class DxFilterBuilderComponent extends DxComponent implements OnDestroy, OnInit, AfterViewInit, ControlValueAccessor, OnChanges, DoCheck { instance: DxFilterBuilder; @ContentChild(DxValidatorComponent) validator: DxValidatorComponent; /** * 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 the widget can display hierarchical data fields. */ @Input() get allowHierarchicalFields(): boolean { return this._getOption('allowHierarchicalFields'); } set allowHierarchicalFields(value: boolean) { this._setOption('allowHierarchicalFields', 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); } /** * Configures fields. */ @Input() get fields(): Array { return this._getOption('fields'); } set fields(value: Array) { this._setOption('fields', value); } /** * Specifies filter operation descriptions. */ @Input() get filterOperationDescriptions(): any { return this._getOption('filterOperationDescriptions'); } set filterOperationDescriptions(value: any) { this._setOption('filterOperationDescriptions', 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); } /** * Specifies group operation descriptions. */ @Input() get groupOperationDescriptions(): any { return this._getOption('groupOperationDescriptions'); } set groupOperationDescriptions(value: any) { this._setOption('groupOperationDescriptions', 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); } /** * 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 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); } /** * Specifies the current filter expression. */ @Input() get value(): any { return this._getOption('value'); } set value(value: any) { this._setOption('value', 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 disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only. */ @Output() onDisposing: EventEmitter; /** * A handler for the editorPrepared event. Executed after an editor is created. */ @Output() onEditorPrepared: EventEmitter; /** * A handler for the editorPreparing event. Executed before an editor is created. */ @Output() onEditorPreparing: EventEmitter; /** * A handler for the initialized event. Executed only once, after the widget is initialized. */ @Output() onInitialized: EventEmitter; /** * A handler for the optionChanged event. Executed after an option of the widget is changed. */ @Output() onOptionChanged: EventEmitter; /** * A handler for the valueChanged event. Executed after the widget's value is changed. */ @Output() onValueChanged: EventEmitter; /** * A handler for the accessKeyChange event. */ @Output() accessKeyChange: EventEmitter; /** * A handler for the activeStateEnabledChange event. */ @Output() activeStateEnabledChange: EventEmitter; /** * A handler for the allowHierarchicalFieldsChange event. */ @Output() allowHierarchicalFieldsChange: EventEmitter; /** * A handler for the disabledChange event. */ @Output() disabledChange: EventEmitter; /** * A handler for the elementAttrChange event. */ @Output() elementAttrChange: EventEmitter; /** * A handler for the fieldsChange event. */ @Output() fieldsChange: EventEmitter>; /** * A handler for the filterOperationDescriptionsChange event. */ @Output() filterOperationDescriptionsChange: EventEmitter; /** * A handler for the focusStateEnabledChange event. */ @Output() focusStateEnabledChange: EventEmitter; /** * A handler for the groupOperationDescriptionsChange event. */ @Output() groupOperationDescriptionsChange: EventEmitter; /** * A handler for the heightChange event. */ @Output() heightChange: EventEmitter; /** * A handler for the hintChange event. */ @Output() hintChange: EventEmitter; /** * A handler for the hoverStateEnabledChange event. */ @Output() hoverStateEnabledChange: EventEmitter; /** * A handler for the rtlEnabledChange event. */ @Output() rtlEnabledChange: EventEmitter; /** * A handler for the tabIndexChange event. */ @Output() tabIndexChange: EventEmitter; /** * A handler for the valueChange event. */ @Output() valueChange: EventEmitter; /** * A handler for the visibleChange event. */ @Output() visibleChange: EventEmitter; /** * A handler for the widthChange event. */ @Output() widthChange: EventEmitter; @Output() onBlur: EventEmitter; @HostListener('valueChange', ['$event']) change(_) { } @HostListener('onBlur', ['$event']) touched = () => {}; @ContentChildren(DxiFieldComponent) get fieldsChildren(): QueryList { return this._getOption('fields'); } set fieldsChildren(value) { this.setChildren('fields', 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: 'disposing', emit: 'onDisposing' }, { subscribe: 'editorPrepared', emit: 'onEditorPrepared' }, { subscribe: 'editorPreparing', emit: 'onEditorPreparing' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'valueChanged', emit: 'onValueChanged' }, { emit: 'accessKeyChange' }, { emit: 'activeStateEnabledChange' }, { emit: 'allowHierarchicalFieldsChange' }, { emit: 'disabledChange' }, { emit: 'elementAttrChange' }, { emit: 'fieldsChange' }, { emit: 'filterOperationDescriptionsChange' }, { emit: 'focusStateEnabledChange' }, { emit: 'groupOperationDescriptionsChange' }, { emit: 'heightChange' }, { emit: 'hintChange' }, { emit: 'hoverStateEnabledChange' }, { emit: 'rtlEnabledChange' }, { emit: 'tabIndexChange' }, { emit: 'valueChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' }, { emit: 'onBlur' } ]); this._idh.setHost(this); optionHost.setHost(this); } protected _createInstance(element, options) { return new DxFilterBuilder(element, options); } writeValue(value: any): void { this.value = value; } setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } registerOnChange(fn: (_: any) => void): void { this.change = fn; } registerOnTouched(fn: () => void): void { this.touched = fn; } _createWidget(element: any) { super._createWidget(element); this.instance.on('focusOut', (e) => { this.eventHelper.fireNgEvent('onBlur', [e]); }); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); this.setupChanges('fields', changes); } setupChanges(prop: string, changes: SimpleChanges) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('fields'); 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); } } ngOnInit() { super.ngOnInit(); if (this.validator) { this.validator.createInstanceOnInit = false; } } ngAfterViewInit() { super.ngAfterViewInit(); if (this.validator) { this.validator.createInstance(this.element.nativeElement); } } } @NgModule({ imports: [ DxiFieldModule, DxoFormatModule, DxoLookupModule, DxoFilterOperationDescriptionsModule, DxoGroupOperationDescriptionsModule, DxTemplateModule ], declarations: [ DxFilterBuilderComponent ], exports: [ DxFilterBuilderComponent, DxiFieldModule, DxoFormatModule, DxoLookupModule, DxoFilterOperationDescriptionsModule, DxoGroupOperationDescriptionsModule, DxTemplateModule ], providers: [EventsRegistrator] }) export class DxFilterBuilderModule { }