UNPKG

devextreme-angular

Version:

Angular UI and visualization components based on DevExtreme widgets

489 lines (370 loc) 19.9 kB
import { TransferState } from '@angular/platform-browser'; import { ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core'; import DevExpress from 'devextreme/bundles/dx.all'; import DxForm from 'devextreme/ui/form'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core'; import { DxiItemComponent } from 'devextreme-angular/ui/nested'; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/core"; import * as i3 from "@angular/platform-browser"; /** * The Form UI component represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns. */ export declare class DxFormComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; instance: DxForm; /** * Specifies the shortcut key that sets focus on the UI component. */ get accessKey(): string | undefined; set accessKey(value: string | undefined); /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ get activeStateEnabled(): boolean; set activeStateEnabled(value: boolean); /** * Specifies whether all item labels are aligned. Applies only to labels outside their editors (see labelMode). */ get alignItemLabels(): boolean; set alignItemLabels(value: boolean); /** * Specifies whether item labels in all groups are aligned. Applies only to labels outside their editors (see labelMode). */ get alignItemLabelsInAllGroups(): boolean; set alignItemLabelsInAllGroups(value: boolean); /** * The count of columns in the form layout. */ get colCount(): number | string; set colCount(value: number | string); /** * Specifies dependency between the screen factor and the count of columns in the form layout. */ get colCountByScreen(): { lg?: number | undefined; md?: number | undefined; sm?: number | undefined; xs?: number | undefined; }; set colCountByScreen(value: { lg?: number | undefined; md?: number | undefined; sm?: number | undefined; xs?: number | undefined; }); /** * Specifies a function that customizes a form item after it has been created. */ get customizeItem(): Function; set customizeItem(value: Function); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Specifies the global attributes to be attached to the UI component&apos;s container element. */ get elementAttr(): any; set elementAttr(value: any); /** * Specifies whether the UI component can be focused using keyboard navigation. */ get focusStateEnabled(): boolean; set focusStateEnabled(value: boolean); /** * Provides the Form&apos;s data. Gets updated every time form fields change. */ get formData(): any; set formData(value: any); /** * Specifies the UI component&apos;s height. */ get height(): number | Function | string | undefined; set height(value: number | Function | string | undefined); /** * Specifies text for a hint that appears when a user pauses on the UI component. */ get hint(): string | undefined; set hint(value: string | undefined); /** * Specifies whether the UI component changes its state when a user pauses on it. */ get hoverStateEnabled(): boolean; set hoverStateEnabled(value: boolean); /** * Holds an array of form items. */ get items(): Array<DevExpress.ui.dxFormSimpleItem | DevExpress.ui.dxFormGroupItem | DevExpress.ui.dxFormTabbedItem | DevExpress.ui.dxFormEmptyItem | DevExpress.ui.dxFormButtonItem>; set items(value: Array<DevExpress.ui.dxFormSimpleItem | DevExpress.ui.dxFormGroupItem | DevExpress.ui.dxFormTabbedItem | DevExpress.ui.dxFormEmptyItem | DevExpress.ui.dxFormButtonItem>); /** * Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode). */ get labelLocation(): string; set labelLocation(value: string); /** * Specifies a display mode for item labels. */ get labelMode(): string; set labelMode(value: string); /** * The minimum column width used for calculating column count in the form layout. Applies only if colCount property is &apos;auto&apos;. */ get minColWidth(): number; set minColWidth(value: number); /** * The text displayed for optional fields. Applies only if showOptionalMark is true. */ get optionalMark(): string; set optionalMark(value: string); /** * Specifies whether all editors on the form are read-only. Applies only to non-templated items. */ get readOnly(): boolean; set readOnly(value: boolean); /** * The text displayed for required fields. */ get requiredMark(): string; set requiredMark(value: string); /** * Specifies the message that is shown for end-users if a required field value is not specified. */ get requiredMessage(): string; set requiredMessage(value: string); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Specifies a function that categorizes screens by their width. */ get screenByWidth(): Function; set screenByWidth(value: Function); /** * A Boolean value specifying whether to enable or disable form scrolling. */ get scrollingEnabled(): boolean; set scrollingEnabled(value: boolean); /** * Specifies whether a colon is displayed at the end of form labels. Applies only to labels outside their editors (see labelMode). */ get showColonAfterLabel(): boolean; set showColonAfterLabel(value: boolean); /** * Specifies whether or not the optional mark is displayed for optional fields. */ get showOptionalMark(): boolean; set showOptionalMark(value: boolean); /** * Specifies whether or not the required mark is displayed for required fields. */ get showRequiredMark(): boolean; set showRequiredMark(value: boolean); /** * Specifies whether or not the total validation summary is displayed on the form. */ get showValidationSummary(): boolean; set showValidationSummary(value: boolean); /** * Specifies the number of the element when the Tab key is used for navigating. */ get tabIndex(): number; set tabIndex(value: number); /** * Gives a name to the internal validation group. */ get validationGroup(): string | undefined; set validationGroup(value: string | undefined); /** * Specifies whether the UI component is visible. */ get visible(): boolean; set visible(value: boolean); /** * Specifies the UI component&apos;s width. */ get width(): number | Function | string | undefined; set width(value: number | Function | string | undefined); /** * A function that is executed when the UI component is rendered and each time the component is repainted. */ onContentReady: EventEmitter<any>; /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter<any>; /** * A function that is executed when the Enter key has been pressed while an editor is focused. */ onEditorEnterKey: EventEmitter<any>; /** * A function that is executed when the value of a formData object field is changed. */ onFieldDataChanged: EventEmitter<any>; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter<any>; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter<any>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ accessKeyChange: EventEmitter<string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ activeStateEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ alignItemLabelsChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ alignItemLabelsInAllGroupsChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ colCountChange: EventEmitter<number | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ colCountByScreenChange: EventEmitter<{ lg?: number | undefined; md?: number | undefined; sm?: number | undefined; xs?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ customizeItemChange: EventEmitter<Function>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter<any>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ focusStateEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ formDataChange: EventEmitter<any>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ heightChange: EventEmitter<number | Function | string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hintChange: EventEmitter<string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hoverStateEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemsChange: EventEmitter<Array<DevExpress.ui.dxFormSimpleItem | DevExpress.ui.dxFormGroupItem | DevExpress.ui.dxFormTabbedItem | DevExpress.ui.dxFormEmptyItem | DevExpress.ui.dxFormButtonItem>>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelLocationChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelModeChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ minColWidthChange: EventEmitter<number>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ optionalMarkChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ readOnlyChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ requiredMarkChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ requiredMessageChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ screenByWidthChange: EventEmitter<Function>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ scrollingEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showColonAfterLabelChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showOptionalMarkChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showRequiredMarkChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showValidationSummaryChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tabIndexChange: EventEmitter<number>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationGroupChange: EventEmitter<string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ visibleChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ widthChange: EventEmitter<number | Function | string | undefined>; get itemsChildren(): QueryList<DxiItemComponent>; set itemsChildren(value: QueryList<DxiItemComponent>); constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxForm; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration<DxFormComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DxFormComponent, "dx-form", never, { "accessKey": "accessKey"; "activeStateEnabled": "activeStateEnabled"; "alignItemLabels": "alignItemLabels"; "alignItemLabelsInAllGroups": "alignItemLabelsInAllGroups"; "colCount": "colCount"; "colCountByScreen": "colCountByScreen"; "customizeItem": "customizeItem"; "disabled": "disabled"; "elementAttr": "elementAttr"; "focusStateEnabled": "focusStateEnabled"; "formData": "formData"; "height": "height"; "hint": "hint"; "hoverStateEnabled": "hoverStateEnabled"; "items": "items"; "labelLocation": "labelLocation"; "labelMode": "labelMode"; "minColWidth": "minColWidth"; "optionalMark": "optionalMark"; "readOnly": "readOnly"; "requiredMark": "requiredMark"; "requiredMessage": "requiredMessage"; "rtlEnabled": "rtlEnabled"; "screenByWidth": "screenByWidth"; "scrollingEnabled": "scrollingEnabled"; "showColonAfterLabel": "showColonAfterLabel"; "showOptionalMark": "showOptionalMark"; "showRequiredMark": "showRequiredMark"; "showValidationSummary": "showValidationSummary"; "tabIndex": "tabIndex"; "validationGroup": "validationGroup"; "visible": "visible"; "width": "width"; }, { "onContentReady": "onContentReady"; "onDisposing": "onDisposing"; "onEditorEnterKey": "onEditorEnterKey"; "onFieldDataChanged": "onFieldDataChanged"; "onInitialized": "onInitialized"; "onOptionChanged": "onOptionChanged"; "accessKeyChange": "accessKeyChange"; "activeStateEnabledChange": "activeStateEnabledChange"; "alignItemLabelsChange": "alignItemLabelsChange"; "alignItemLabelsInAllGroupsChange": "alignItemLabelsInAllGroupsChange"; "colCountChange": "colCountChange"; "colCountByScreenChange": "colCountByScreenChange"; "customizeItemChange": "customizeItemChange"; "disabledChange": "disabledChange"; "elementAttrChange": "elementAttrChange"; "focusStateEnabledChange": "focusStateEnabledChange"; "formDataChange": "formDataChange"; "heightChange": "heightChange"; "hintChange": "hintChange"; "hoverStateEnabledChange": "hoverStateEnabledChange"; "itemsChange": "itemsChange"; "labelLocationChange": "labelLocationChange"; "labelModeChange": "labelModeChange"; "minColWidthChange": "minColWidthChange"; "optionalMarkChange": "optionalMarkChange"; "readOnlyChange": "readOnlyChange"; "requiredMarkChange": "requiredMarkChange"; "requiredMessageChange": "requiredMessageChange"; "rtlEnabledChange": "rtlEnabledChange"; "screenByWidthChange": "screenByWidthChange"; "scrollingEnabledChange": "scrollingEnabledChange"; "showColonAfterLabelChange": "showColonAfterLabelChange"; "showOptionalMarkChange": "showOptionalMarkChange"; "showRequiredMarkChange": "showRequiredMarkChange"; "showValidationSummaryChange": "showValidationSummaryChange"; "tabIndexChange": "tabIndexChange"; "validationGroupChange": "validationGroupChange"; "visibleChange": "visibleChange"; "widthChange": "widthChange"; }, ["itemsChildren"], never>; } export declare class DxFormModule { static ɵfac: i0.ɵɵFactoryDeclaration<DxFormModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<DxFormModule, [typeof DxFormComponent], [typeof i1.DxoColCountByScreenModule, typeof i1.DxiItemModule, typeof i1.DxoLabelModule, typeof i1.DxiValidationRuleModule, typeof i1.DxoTabPanelOptionsModule, typeof i1.DxiTabModule, typeof i1.DxoButtonOptionsModule, typeof i2.DxIntegrationModule, typeof i2.DxTemplateModule, typeof i3.BrowserTransferStateModule], [typeof DxFormComponent, typeof i1.DxoColCountByScreenModule, typeof i1.DxiItemModule, typeof i1.DxoLabelModule, typeof i1.DxiValidationRuleModule, typeof i1.DxoTabPanelOptionsModule, typeof i1.DxiTabModule, typeof i1.DxoButtonOptionsModule, typeof i2.DxTemplateModule]>; static ɵinj: i0.ɵɵInjectorDeclaration<DxFormModule>; }