diff --git a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html index 3b8ff335e78..67f29105f7b 100644 --- a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html +++ b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html @@ -21,7 +21,7 @@

Selected Files

Type: {{ file.type }}
Last Modified Date: - {{ file.lastModifiedDate }} + {{ file.lastModified | demodate }} diff --git a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts index 25fd1891716..e3b49208dd6 100644 --- a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts +++ b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts @@ -1,8 +1,23 @@ -import { NgModule, Component, enableProdMode } from '@angular/core'; +import { + NgModule, Component, enableProdMode, Pipe, PipeTransform, +} from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule } from 'devextreme-angular'; +import { + DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule, +} from 'devextreme-angular'; + +if (!/localhost/.test(document.location.host)) { + enableProdMode(); +} + +@Pipe({ name: 'demodate' }) +export class DemoDatePipe implements PipeTransform { + transform(date: number) { + return new Date(date); + } +} if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -14,7 +29,7 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - value: any[] = []; + value: File[] = []; } @NgModule({ @@ -25,7 +40,7 @@ export class AppComponent { DxFileUploaderModule, DxSelectBoxModule, ], - declarations: [AppComponent], + declarations: [AppComponent, DemoDatePipe], bootstrap: [AppComponent], }) export class AppModule { } diff --git a/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts index bea20443742..320be62090a 100644 --- a/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts +++ b/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts @@ -1,16 +1,12 @@ -import { - NgModule, Component, ViewChild, enableProdMode, -} from '@angular/core'; +import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - DxListModule, - DxButtonModule, - DxTagBoxModule, - DxFilterBuilderModule, -} from 'devextreme-angular'; +import { DxListModule, DxButtonModule, DxTagBoxModule } from 'devextreme-angular'; +import { DxFilterBuilderModule, DxFilterBuilderComponent, DxFilterBuilderTypes } from 'devextreme-angular/ui/filter-builder'; import { Service } from './app.service'; +type FilterBuilderValue = ReturnType; + if (!/localhost/.test(document.location.host)) { enableProdMode(); } @@ -20,11 +16,10 @@ const anyOfOperation = { caption: 'Is any of', icon: 'check', editorTemplate: 'tagBoxTemplate', - calculateFilterExpression(filterValue: any, field: any) { - return filterValue && filterValue.length - && Array.prototype.concat.apply([], filterValue.map((value) => [[field.dataField, '=', value], 'or'])).slice(0, -1); - }, -}; + calculateFilterExpression: (filterValue: string[], field: Record) => filterValue?.flatMap( + (value) => [[field.dataField, '=', value], 'or'], + ).slice(0, -1), +} as const; @Component({ selector: 'demo-app', @@ -34,44 +29,49 @@ const anyOfOperation = { }) export class AppComponent { - filterText: any; - - dataSourceText: any; + filterText: string; - fields: Array; + dataSourceText: string; - customOperations: Array; + fields: Array; - filter: any; + filter: Array; categories: string[]; - groupOperations: string[] = ['and', 'or']; + customOperations: Array = [anyOfOperation]; + + groupOperations = ['and', 'or']; constructor(service: Service) { this.fields = service.getFields(); this.filter = service.getFilter(); this.categories = service.getCategories(); - this.customOperations = [anyOfOperation]; } - updateTexts(e) { + updateTexts(e: DxFilterBuilderTypes.InitializedEvent) { this.filterText = AppComponent.formatValue(e.component.option('value')); this.dataSourceText = AppComponent.formatValue(e.component.getFilterExpression()); } - private static formatValue(value, spaces = 0) { + private static formatValue(value: FilterBuilderValue, spaces = 0) { if (value && Array.isArray(value[0])) { const TAB_SIZE = 4; + spaces = spaces || TAB_SIZE; - return `[${AppComponent.getLineBreak(spaces)}${value.map((item) => (Array.isArray(item[0]) ? AppComponent.formatValue(item, spaces + TAB_SIZE) : JSON.stringify(item))).join(`,${AppComponent.getLineBreak(spaces)}`)}${AppComponent.getLineBreak(spaces - TAB_SIZE)}]`; + + return `[${AppComponent.getLineBreak(spaces)}${ + (value as string[]).map( + (item: FilterBuilderValue) => (Array.isArray(item[0]) + ? AppComponent.formatValue(item, spaces + TAB_SIZE) + : JSON.stringify(item)), + ).join(`,${AppComponent.getLineBreak(spaces)}`) + }${AppComponent.getLineBreak(spaces - TAB_SIZE)}]`; } return JSON.stringify(value); } - private static getLineBreak(spaces) { - return `\r\n${new Array(spaces + 1).join(' ')}`; - } + private static getLineBreak = (spaces: number) => `\r\n${new Array(spaces + 1).join(' ')}`; } @NgModule({ diff --git a/JSDemos/Demos/FilterBuilder/Customization/React/data.ts b/JSDemos/Demos/FilterBuilder/Customization/React/data.ts index 8c711f9f903..969928054ec 100644 --- a/JSDemos/Demos/FilterBuilder/Customization/React/data.ts +++ b/JSDemos/Demos/FilterBuilder/Customization/React/data.ts @@ -16,8 +16,8 @@ export const categories = [ 'Projectors', 'Automation', ]; -export const groupOperations: FilterBuilderTypes.Properties['groupOperations'] = ['and', 'or']; -export const fields: FilterBuilderTypes.Properties['fields'] = [{ +export const groupOperations: FilterBuilderTypes.GroupOperation[] = ['and', 'or']; +export const fields: FilterBuilderTypes.Field[] = [{ dataField: 'Name', }, { dataField: 'Price', diff --git a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts index 017e82c4876..4d3127b624f 100644 --- a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts +++ b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts @@ -10,6 +10,7 @@ import { import DataSource from 'devextreme/data/data_source'; import ODataStore from 'devextreme/data/odata/store'; import { Service } from './app.service'; +import type { Fields, Condition } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -23,13 +24,13 @@ if (!/localhost/.test(document.location.host)) { }) export class AppComponent { - dataSource: any; + dataSource: DataSource; - fields: Array; + fields: Fields; - filter: any; + filter: Condition; - gridFilterValue: any; + gridFilterValue: Condition; constructor(service: Service) { this.fields = service.getFields(); diff --git a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts index 76fba539712..d9fb0ddff63 100644 --- a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts +++ b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts @@ -1,6 +1,9 @@ import { Injectable } from '@angular/core'; -const filter: Array = [ +export type Condition = Condition[] | string | number; +export type Fields = typeof fields; + +const filter: Condition = [ ['Product_Current_Inventory', '<>', 0], 'or', [ @@ -9,7 +12,7 @@ const filter: Array = [ ['Product_Cost', '<', 200], ], ]; -const fields: Array = [ +const fields: Record[] = [ { caption: 'ID', width: 50, @@ -42,11 +45,11 @@ const fields: Array = [ @Injectable() export class Service { - getFields(): Array { + getFields(): Fields { return fields; } - getFilter(): Array { + getFilter(): Condition { return filter; } } diff --git a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts index 0a5187a1a9b..546f4a0f35a 100644 --- a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts +++ b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts @@ -11,7 +11,7 @@ import { DxFilterBuilderModule, } from 'devextreme-angular'; import DataSource from 'devextreme/data/data_source'; -import { Service } from './app.service'; +import { Fields, Filter, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -27,11 +27,11 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { @ViewChild(DxFilterBuilderComponent, { static: false }) filterBuilder: DxFilterBuilderComponent; - dataSource: any; + dataSource: DataSource; - fields: Array; + fields: Fields; - filter: any; + filter: Filter; constructor(service: Service) { this.fields = service.getFields(); diff --git a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts index d0c4f92bc63..71af817cabd 100644 --- a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts +++ b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts @@ -18,7 +18,7 @@ export class Product { ImageSrc: string; } -const filter: Array = [ +const filter = [ ['Category', '=', 'Video Players'], 'or', [ @@ -40,7 +40,7 @@ const categories: string[] = [ 'Projectors', 'Automation', ]; -const fields: Array = [ +const fields = [ { dataField: 'ID', dataType: 'number', @@ -226,3 +226,6 @@ export class Service { return filter; } } + +export type Fields = typeof fields; +export type Filter = typeof filter; diff --git a/JSDemos/Demos/FilterBuilder/WithList/React/data.ts b/JSDemos/Demos/FilterBuilder/WithList/React/data.ts index fd4df6940e4..ac1a006f4eb 100644 --- a/JSDemos/Demos/FilterBuilder/WithList/React/data.ts +++ b/JSDemos/Demos/FilterBuilder/WithList/React/data.ts @@ -22,7 +22,7 @@ const categories = [ 'Projectors', 'Automation', ]; -export const fields: FilterBuilderTypes.Properties['fields'] = [ +export const fields: FilterBuilderTypes.Field[] = [ { dataField: 'ID', dataType: 'number', diff --git a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts index 407890ed6cd..55e7647caea 100644 --- a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts @@ -3,16 +3,11 @@ import { } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - import config from 'devextreme/core/config'; import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button'; -import { - DxDataGridModule, - DxDataGridComponent, - DxSpeedDialActionModule, - DxSelectBoxModule, -} from 'devextreme-angular'; - +import { DxSpeedDialActionModule } from 'devextreme-angular'; +import { DxDataGridModule, DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; +import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box'; import { Service, Employee, State, directions, } from './app.service'; @@ -34,14 +29,13 @@ export class AppComponent { states: State[]; - directions: any; + directions = directions; selectedRowIndex = -1; constructor(private service: Service) { this.employees = service.getEmployees(); this.states = service.getStates(); - this.directions = directions; } editRow() { @@ -59,11 +53,11 @@ export class AppComponent { this.grid.instance.deselectAll(); } - selectedChanged(e) { + selectedChanged(e: DxDataGridTypes.SelectionChangedEvent) { this.selectedRowIndex = e.component.getRowIndexByKey(e.selectedRowKeys[0]); } - directionChanged(e) { + directionChanged(e: DxSelectBoxTypes.SelectionChangedEvent) { config({ floatingActionButtonConfig: this.directions[e.selectedItem], }); diff --git a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts index a98e1f9bcdd..b1a2cc534ad 100644 --- a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts +++ b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; -export const directions: any = { +export const directions = { auto: { icon: 'rowfield', shading: true, diff --git a/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts b/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts index af076a730bb..e1c3be13e8b 100644 --- a/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts +++ b/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts @@ -1,10 +1,8 @@ -import { - NgModule, Component, ViewChild, enableProdMode, -} from '@angular/core'; +import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxFormModule, DxCheckBoxModule } from 'devextreme-angular'; - +import { DxFormModule } from 'devextreme-angular'; +import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box'; import { Employee, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -20,21 +18,18 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { employee: Employee; - colCountByScreen: Object; + colCountByScreen = { + md: 4, + sm: 2, + }; constructor(service: Service) { this.employee = service.getEmployee(); - this.colCountByScreen = { - md: 4, - sm: 2, - }; } - screen(width) { - return width < 720 ? 'sm' : 'md'; - } + screen = (width: number) => (width < 720 ? 'sm' : 'md'); - valueChanged(e) { + valueChanged(e: DxCheckBoxTypes.ValueChangedEvent) { if (e.value) { this.colCountByScreen = null; } else { diff --git a/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts index 2fc9273caad..e5828ded933 100644 --- a/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts @@ -1,13 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - DxCheckBoxModule, - DxSelectBoxModule, - DxNumberBoxModule, - DxFormModule, -} from 'devextreme-angular'; - +import { DxCheckBoxModule, DxNumberBoxModule, DxSelectBoxModule } from 'devextreme-angular'; +import { DxFormModule, DxFormTypes } from 'devextreme-angular/ui/form'; import { Company, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -23,27 +18,21 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { companies: Company[]; - labelMode: string; + width: number; - labelLocation: string; + labelMode: DxFormTypes.FormLabelMode = 'floating'; - readOnly: boolean; + labelLocation: DxFormTypes.LabelLocation = 'left'; - showColon: boolean; + readOnly = false; - minColWidth: number; + showColon = true; - colCount: number; + minColWidth = 300; - width: any; + colCount = 2; constructor(service: Service) { - this.labelMode = 'floating'; - this.labelLocation = 'left'; - this.readOnly = false; - this.showColon = true; - this.minColWidth = 300; - this.colCount = 2; this.companies = service.getCompanies(); } diff --git a/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts b/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts index 8f91ee1a075..1bb75f180f9 100644 --- a/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts +++ b/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts @@ -1,12 +1,10 @@ -import { - NgModule, Component, enableProdMode, AfterViewInit, -} from '@angular/core'; +import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - DxFormModule, -} from 'devextreme-angular'; - +import { DxFormModule } from 'devextreme-angular'; +import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box'; +import { DxButtonTypes } from 'devextreme-angular/ui/button'; +import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box'; import { Employee, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -20,52 +18,39 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) -export class AppComponent implements AfterViewInit { +export class AppComponent { employee: Employee; - isHomeAddressVisible: boolean; + isHomeAddressVisible = true; - checkBoxOptions: any; + phoneOptions: DxTextBoxTypes.Properties[] = []; - phoneOptions: any[] = []; + checkBoxOptions: DxCheckBoxTypes.Properties = { + text: 'Show Address', + value: true, + onValueChanged: (e: DxCheckBoxTypes.ValueChangedEvent) => { + this.isHomeAddressVisible = e.component.option('value'); + }, + }; - addPhoneButtonOptions: any; + addPhoneButtonOptions: DxButtonTypes.Properties = { + icon: 'add', + text: 'Add phone', + onClick: () => { + this.employee.Phones.push(''); + this.phoneOptions = this.getPhonesOptions(this.employee.Phones); + }, + }; constructor(service: Service) { this.employee = service.getEmployee(); - this.isHomeAddressVisible = true; this.phoneOptions = this.getPhonesOptions(this.employee.Phones); - - this.checkBoxOptions = { - text: 'Show Address', - value: true, - onValueChanged: (e) => { - this.isHomeAddressVisible = e.component.option('value'); - }, - }; - - this.addPhoneButtonOptions = { - icon: 'add', - text: 'Add phone', - onClick: () => { - this.employee.Phones.push(''); - this.phoneOptions = this.getPhonesOptions(this.employee.Phones); - }, - }; } - ngAfterViewInit(): void {} - - getPhonesOptions(phones: any) { - const options = []; - for (let i = 0; i < phones.length; i++) { - options.push(this.generateNewPhoneOptions(i)); - } - return options; - } + getPhonesOptions = (phones: string[]) => phones.map((_, index) => this.generateNewPhoneOptions(index)); - generateNewPhoneOptions(index: number) { + generateNewPhoneOptions(index: number): DxTextBoxTypes.Properties { return { mask: '+1 (X00) 000-0000', maskRules: { X: /[01-9]/ }, diff --git a/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts b/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts index da912f60714..ca10285be8b 100644 --- a/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts +++ b/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts @@ -7,16 +7,20 @@ import { DxCheckBoxModule, DxSelectBoxModule, DxNumberBoxModule, - DxButtonModule, - DxFormModule, DxAutocompleteModule, - DxFormComponent, } from 'devextreme-angular'; import notify from 'devextreme/ui/notify'; import Validator from 'devextreme/ui/validator'; - +import { AsyncRule } from 'devextreme-angular/common'; +import { DxFormModule, DxFormComponent, DxFormTypes } from 'devextreme-angular/ui/form'; +import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box'; +import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box'; +import { DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box'; +import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button'; import { Customer, Service } from './app.service'; +type EditorOptions = DxTextBoxTypes.Properties; + if (!/localhost/.test(document.location.host)) { enableProdMode(); } @@ -37,9 +41,23 @@ const sendRequest = function (value) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - @ViewChild(DxFormComponent, { static: false }) form:DxFormComponent; + @ViewChild(DxFormComponent, { static: false }) form: DxFormComponent; + + customer: Customer; + + countries: string[]; + + cities: string[]; + + maxDate: Date = new Date(); + + cityPattern = '^[^0-9]+$'; + + namePattern = /^[^0-9]+$/; + + phonePattern = /^[02-9]\d{9}$/; - passwordEditorOptions: any = { + passwordEditorOptions: EditorOptions = { mode: 'password', valueChangeEvent: 'keyup', onValueChanged: () => { @@ -62,19 +80,19 @@ export class AppComponent { ], }; - emailEditorOptions: any = { + emailEditorOptions: EditorOptions = { valueChangeEvent: 'keyup', }; - nameEditorOptions: any = { + nameEditorOptions: EditorOptions = { valueChangeEvent: 'keyup', }; - addressEditorOptions: any = { + addressEditorOptions: EditorOptions = { valueChangeEvent: 'keyup', }; - phoneEditorOptions: any = { + phoneEditorOptions: EditorOptions = { mask: '+1 (X00) 000-0000', maskRules: { X: /[02-9]/, @@ -83,65 +101,49 @@ export class AppComponent { valueChangeEvent: 'keyup', }; - confirmPasswordEditorOptions: any = { + confirmPasswordEditorOptions: EditorOptions = { mode: 'password', valueChangeEvent: 'keyup', buttons: [ { name: 'password', - stylingMode: 'text', - icon: 'eyeopen', location: 'after', options: { - stylingMode: 'text', icon: 'eyeopen', + stylingMode: 'text', onClick: () => this.changePasswordMode('ConfirmPassword'), }, }, ], }; - colCountByScreen = { + colCountByScreen: DxFormTypes.GroupItem['colCountByScreen'] = { xs: 2, sm: 2, md: 2, lg: 2, }; - customer: Customer; - - countries: string[]; - - cities: string[]; - - maxDate: Date = new Date(); - - cityPattern = '^[^0-9]+$'; - - namePattern: any = /^[^0-9]+$/; - - phonePattern: any = /^[02-9]\d{9}$/; - - dateBoxOptions = { + dateBoxOptions: DxDateBoxTypes.Properties = { placeholder: 'Birth Date', acceptCustomValue: false, openOnFieldClick: true, }; - dateRangeBoxOptions = { + dateRangeBoxOptions: DxDateRangeBoxTypes.Properties = { startDatePlaceholder: 'Start Date', endDatePlaceholder: 'End Date', acceptCustomValue: false, }; - registerButtonOptions = { + registerButtonOptions: DxButtonTypes.Properties = { text: 'Register', type: 'default', width: '120px', useSubmitBehavior: true, }; - resetButtonOptions = { + resetButtonOptions: DxButtonTypes.Properties = { text: 'Reset', width: '120px', disabled: true, @@ -151,13 +153,20 @@ export class AppComponent { }, }; + constructor(service: Service) { + this.maxDate = new Date(this.maxDate.setFullYear(this.maxDate.getFullYear() - 21)); + this.countries = service.getCountries(); + this.cities = service.getCities(); + this.customer = service.getCustomer(); + } + passwordComparison = () => this.form.instance.option('formData').Password; checkComparison() { return true; } - changePasswordMode = (name) => { + changePasswordMode = (name: string) => { let editor = this.form.instance.getEditor(name); editor.option( 'mode', @@ -165,13 +174,6 @@ export class AppComponent { ); }; - constructor(service: Service) { - this.maxDate = new Date(this.maxDate.setFullYear(this.maxDate.getFullYear() - 21)); - this.countries = service.getCountries(); - this.cities = service.getCities(); - this.customer = service.getCustomer(); - } - validateVacationDatesRange({ value }) { const [startDate, endDate] = value; @@ -195,11 +197,9 @@ export class AppComponent { return startDate !== null && endDate !== null; } - asyncValidation(params) { - return sendRequest(params.value); - } + asyncValidation: AsyncRule['validationCallback'] = ({ value }) => sendRequest(value); - onFormSubmit = function (e) { + onFormSubmit = (e: SubmitEvent) => { notify({ message: 'You have submitted the form', position: { @@ -211,7 +211,7 @@ export class AppComponent { e.preventDefault(); }; - onOptionChanged = function (e) { + onOptionChanged = (e: DxFormTypes.OptionChangedEvent) => { if (e.name === 'isDirty') { const resetButton = this.form.instance.getButton('Reset'); resetButton.option('disabled', !e.value); diff --git a/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts index 74c1c5518ea..512f345028f 100644 --- a/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts @@ -1,8 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxCheckBoxModule, DxGalleryModule } from 'devextreme-angular'; - +import { DxGalleryModule } from 'devextreme-angular'; +import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -24,7 +24,7 @@ export class AppComponent { this.dataSource = service.getImages(); } - valueChanged(e) { + valueChanged(e: DxCheckBoxTypes.ValueChangedEvent) { this.slideshowDelay = e.value ? 2000 : 0; } } diff --git a/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts index cda1f9a2758..d4a5a2b2efd 100644 --- a/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts @@ -2,9 +2,8 @@ import { ViewEncapsulation } from '@angular/compiler/src/core'; import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - DxGanttModule, DxCheckBoxModule, DxSelectBoxModule, DxDateBoxModule, -} from 'devextreme-angular'; +import { DxCheckBoxModule, DxSelectBoxModule, DxDateBoxModule } from 'devextreme-angular'; +import { DxGanttModule, DxGanttTypes } from 'devextreme-angular/ui/gantt'; import { Service, Task, Dependency, Resource, ResourceAssignment, } from './app.service'; @@ -30,44 +29,37 @@ export class AppComponent { resourceAssignments: ResourceAssignment[]; - scaleType: string; + scaleType: DxGanttTypes.Properties['scaleType'] = 'months'; - titlePosition: string; + titlePosition: DxGanttTypes.Properties['taskTitlePosition'] = 'outside'; - showResources: boolean; + showResources = true; - showDependencies: boolean; + showDependencies = true; - showCustomTaskTooltip: boolean; + showCustomTaskTooltip = true; - startDateRange: Date; + startDateRange = new Date(2018, 11, 1); - endDateRange: Date; + endDateRange = new Date(2019, 11, 1); constructor(service: Service) { this.tasks = service.getTasks(); this.dependencies = service.getDependencies(); this.resources = service.getResources(); this.resourceAssignments = service.getResourceAssignments(); - this.scaleType = 'months'; - this.titlePosition = 'outside'; - this.showResources = true; - this.showDependencies = true; - this.showCustomTaskTooltip = true; - this.startDateRange = new Date(2018, 11, 1); - this.endDateRange = new Date(2019, 11, 1); } - getTimeEstimate(task) { - return Math.abs(task.start - task.end) / 36e5; + getTimeEstimate(task: Task) { + return Math.abs((task.start as unknown as number) - (task.end as unknown as number)) / 36e5; } - getTimeLeft(task) { - const timeEstimate = Math.abs(task.start - task.end) / 36e5; + getTimeLeft(task: Task) { + const timeEstimate = Math.abs((task.start as unknown as number) - (task.end as unknown as number)) / 36e5; return Math.floor((100 - task.progress) / 100 * timeEstimate); } - getTime(date) { + getTime(date: Date) { return date.toLocaleString(); } } diff --git a/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts index af125106c19..57e7c9eefac 100644 --- a/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts @@ -1,7 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxGanttModule, DxCheckBoxModule } from 'devextreme-angular'; +import { DxGanttModule, DxGanttTypes } from 'devextreme-angular/ui/gantt'; +import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box'; import { Service, Task, Dependency, Resource, ResourceAssignment, } from './app.service'; @@ -26,35 +27,32 @@ export class AppComponent { resourceAssignments: ResourceAssignment[]; - contextMenuItems: {}; + showResources = true; - showResources: boolean; + disableContextMenu = false; - disableContextMenu: boolean; + contextMenuItems = this.getContextMenuItems(); constructor(service: Service) { this.tasks = service.getTasks(); this.dependencies = service.getDependencies(); this.resources = service.getResources(); this.resourceAssignments = service.getResourceAssignments(); - this.showResources = true, - this.disableContextMenu = false, - this.contextMenuItems = this.getContextMenuItems(); } - onContextMenuPreparing(e) { + onContextMenuPreparing(e: DxGanttTypes.ContextMenuPreparingEvent) { e.cancel = this.disableContextMenu; } - onCustomizeContextMenu(e) { + onCustomizeContextMenu(e: DxCheckBoxTypes.ValueChangedEvent) { this.contextMenuItems = e.value ? this.getContextMenuItems() : undefined; } - onPreventContextMenuShowing(e) { + onPreventContextMenuShowing(e: DxCheckBoxTypes.ValueChangedEvent) { this.disableContextMenu = e.value; } - onCustomCommandClick(e) { + onCustomCommandClick(e: DxGanttTypes.CustomCommandEvent) { if (e.name == 'ToggleDisplayOfResources') { this.showResources = !this.showResources; } diff --git a/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html b/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html index 8d2eb9b20f0..34d3199e9b8 100644 --- a/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html +++ b/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html @@ -64,6 +64,7 @@
[0]['exportMode']; +type DateRange = Parameters[0]['dateRange']; + @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', @@ -29,62 +36,52 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { @ViewChild(DxGanttComponent, { static: false }) gantt: DxGanttComponent; - formats: string[] = ['A0', 'A1', 'A2', 'A3', 'A4', 'Auto']; + startDate: Date; - exportModes: string[] = ['All', 'Chart', 'Tree List']; + endDate: Date; - dateRanges: string[] = ['All', 'Visible', 'Custom']; + tasks: Task[]; - formatBoxValue: string; + dependencies: Dependency[]; - exportModeBoxValue: string; + resources: Resource[]; - dateRangeBoxValue: string; + resourceAssignments: ResourceAssignment[]; - landscapeCheckBoxValue: boolean; + startTaskIndex = 0; - startTaskIndex: number; + endTaskIndex = 3; - endTaskIndex: number; + customRangeDisabled = true; - startDate: Date; + formats = ['A0', 'A1', 'A2', 'A3', 'A4', 'Auto']; - endDate: Date; + exportModes = ['All', 'Chart', 'Tree List']; - customRangeDisabled: boolean; + dateRanges = ['all', 'visible', 'custom']; - tasks: Task[]; + formatBoxValue = this.formats[0]; - dependencies: Dependency[]; + landscapeCheckBoxValue = true; - resources: Resource[]; + exportModeBoxValue = this.exportModes[0]; - resourceAssignments: ResourceAssignment[]; + dateRangeBoxValue = this.dateRanges[1]; - exportButtonOptions: any; + exportButtonOptions: DxButtonTypes.Properties = { + hint: 'Export to PDF', + icon: 'exportpdf', + stylingMode: 'text', + onClick: () => this.exportButtonClick(), + }; constructor(service: Service, private ref: ChangeDetectorRef) { this.tasks = service.getTasks(); this.dependencies = service.getDependencies(); this.resources = service.getResources(); this.resourceAssignments = service.getResourceAssignments(); - - this.exportButtonOptions = { - hint: 'Export to PDF', - icon: 'exportpdf', - stylingMode: 'text', - onClick: () => this.exportButtonClick(), - }; - - this.formatBoxValue = this.formats[0]; - this.landscapeCheckBoxValue = true; - this.exportModeBoxValue = this.exportModes[0]; - this.dateRangeBoxValue = this.dateRanges[1]; - this.startTaskIndex = 0; - this.endTaskIndex = 3; this.startDate = this.tasks[0].start; this.endDate = this.tasks[0].end; - this.customRangeDisabled = true; } exportButtonClick() { @@ -92,39 +89,44 @@ export class AppComponent { const format = this.formatBoxValue.toLowerCase(); const isLandscape = this.landscapeCheckBoxValue; const exportMode = this.getExportMode(); - const dataRangeMode = this.dateRangeBoxValue.toLowerCase(); - let dataRange; + const dataRangeMode = this.dateRangeBoxValue; + let dateRange: DateRange; + if (dataRangeMode === 'custom') { - dataRange = { + dateRange = { startIndex: this.startTaskIndex, endIndex: this.endTaskIndex, startDate: this.startDate, endDate: this.endDate, }; } else { - dataRange = dataRangeMode; + dateRange = dataRangeMode as Exclude; } + exportGanttToPdf( { component: gantt, - createDocumentMethod: (args?: any) => new jsPDF(args), + createDocumentMethod: (args?: unknown) => new jsPDF(args), format, landscape: isLandscape, exportMode, - dateRange: dataRange, + dateRange, }, ).then((doc) => doc.save('gantt.pdf')); } - getExportMode() { - if (this.exportModeBoxValue === 'Tree List') { return 'treeList'; } - if (this.exportModeBoxValue === 'All') { return 'all'; } - if (this.exportModeBoxValue === 'Chart') { return 'chart'; } - return 'all'; - } + capitalize = ([firstLetter, ...restLetters]: string) => firstLetter.toUpperCase() + restLetters; + + getExportMode: () => ExportMode = () => { + const modes: Record = { + 'Tree List': 'treeList', + Chart: 'chart', + }; + return modes[this.exportModeBoxValue] || 'all'; + }; - onDateRangeBoxSelectionChanged(e) { - this.customRangeDisabled = e.value !== 'Custom'; + onDateRangeBoxSelectionChanged(e: DxSelectBoxTypes.ValueChangedEvent) { + this.customRangeDisabled = e.value !== 'custom'; this.ref.detectChanges(); } } diff --git a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html index 12d67ecd55f..74dc59d8428 100644 --- a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html +++ b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html @@ -8,7 +8,7 @@ [items]="['single', 'multiple', 'none']" [(value)]="sortingMode" [inputAttr]="{ 'aria-label': 'Sorting Mode' }" - (onValueChanged)="onSortingValueChanged($event)" + (onValueChanged)="onSortingValueChanged()" >
diff --git a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts index d62d2f835cd..8c0c52ca7a8 100644 --- a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts @@ -1,9 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - import { DxGanttModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular'; - +import { SingleOrMultiple } from 'devextreme-angular/common'; import { Service, Task, Dependency, Resource, ResourceAssignment, } from './app.service'; @@ -28,23 +27,20 @@ export class AppComponent { resourceAssignments: ResourceAssignment[]; - sortingMode: 'single' | 'multiple' | 'none'; + showSortIndexes = false; - showSortIndexes: boolean; + showSortIndexDisabled = true; - showSortIndexDisabled: boolean; + sortingMode: SingleOrMultiple = 'single'; constructor(service: Service) { this.tasks = service.getTasks(); this.dependencies = service.getDependencies(); this.resources = service.getResources(); this.resourceAssignments = service.getResourceAssignments(); - this.sortingMode = 'single'; - this.showSortIndexes = false; - this.showSortIndexDisabled = true; } - onSortingValueChanged(e) { + onSortingValueChanged() { this.showSortIndexDisabled = this.sortingMode !== 'multiple'; } } diff --git a/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts index c880bf83ea4..11005cab210 100644 --- a/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts @@ -1,9 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - import { DxGanttModule, DxPopupModule } from 'devextreme-angular'; - +import { DxButtonTypes } from 'devextreme-angular/ui/button'; import { Service, Task, Dependency, Resource, ResourceAssignment, } from './app.service'; @@ -28,25 +27,22 @@ export class AppComponent { resourceAssignments: ResourceAssignment[]; - customButtonOptions: any; + popupVisible = false; - popupVisible: boolean; + customButtonOptions: DxButtonTypes.Properties = { + text: 'About', + icon: 'info', + stylingMode: 'text', + onClick: () => { + this.popupVisible = true; + }, + }; constructor(service: Service) { this.tasks = service.getTasks(); this.dependencies = service.getDependencies(); this.resources = service.getResources(); this.resourceAssignments = service.getResourceAssignments(); - this.popupVisible = false; - - this.customButtonOptions = { - text: 'About', - icon: 'info', - stylingMode: 'text', - onClick: () => { - this.popupVisible = true; - }, - }; } } diff --git a/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts index f30f42965a1..23b76bda4ea 100644 --- a/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts @@ -1,21 +1,22 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxLinearGaugeModule, DxCircularGaugeModule } from 'devextreme-angular'; +import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge'; +import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } +type ScaleLabel = DxLinearGaugeTypes.ScaleLabel | DxCircularGaugeTypes.ScaleLabel; + @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], }) export class AppComponent { - customizeText(arg: any) { - return `${arg.valueText}°`; - } + customizeText: ScaleLabel['customizeText'] = ({ valueText }) => `${valueText}°`; } @NgModule({ diff --git a/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts index 7b956014d33..d9683c4a2d3 100644 --- a/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts @@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - customizeText(arg: any) { - return `$${arg.valueText}`; - } + customizeText = ({ valueText }) => `$${valueText}`; } @NgModule({ diff --git a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts index ab43f692532..c255a4a4e3b 100644 --- a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts @@ -1,7 +1,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxCircularGaugeModule } from 'devextreme-angular'; +import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - customizeText(arg: any) { - return `${arg.valueText} %`; - } + customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`; } @NgModule({ diff --git a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts index a56a3e2daf9..f3807d48ee1 100644 --- a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts @@ -1,7 +1,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxLinearGaugeModule } from 'devextreme-angular'; +import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - customizeText(arg: any) { - return `${arg.valueText} %`; - } + customizeText: DxLinearGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`; } @NgModule({ diff --git a/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts index 63b009f1e50..7d61823f39b 100644 --- a/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts @@ -13,11 +13,9 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - customizeTooltip(arg: any) { - return { - text: `${arg.valueText} ohm`, - }; - } + customizeTooltip = ({ valueText }) => ({ + text: `${valueText} ohm`, + }); } @NgModule({ diff --git a/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts index ab43f692532..c255a4a4e3b 100644 --- a/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts @@ -1,7 +1,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxCircularGaugeModule } from 'devextreme-angular'; +import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - customizeText(arg: any) { - return `${arg.valueText} %`; - } + customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`; } @NgModule({ diff --git a/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts index 4996b597d7a..42eccffce02 100644 --- a/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts @@ -1,7 +1,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxCircularGaugeModule } from 'devextreme-angular'; +import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - customizeText(arg: any) { - return `${arg.valueText} °C`; - } + customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} °C`; } @NgModule({ diff --git a/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts b/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts index 770420e2c8a..20f65660181 100644 --- a/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts +++ b/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts @@ -7,7 +7,7 @@ export class City { id: string; - data: any; + data: Record; } const cities: City[] = [{ diff --git a/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts index e6c568efae1..cb433b613f8 100644 --- a/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts @@ -1,7 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxCircularGaugeModule, DxNumberBoxModule, DxButtonModule } from 'devextreme-angular'; +import { DxNumberBoxModule, DxButtonModule } from 'devextreme-angular'; +import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -15,15 +16,13 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { mainGenerator = 34; - additionalGenerator: number[] = [12, 23]; + additionalGenerator = [12, 23]; gaugeValue = 34; - gaugeSubvalues: number[] = [12, 23]; + gaugeSubvalues = [12, 23]; - customizeText(arg: any) { - return `${arg.valueText} kV`; - } + customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} kV`; updateValues() { this.gaugeValue = this.mainGenerator; diff --git a/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts index eb7435b6a26..e86f6dfe18a 100644 --- a/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts +++ b/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts @@ -1,7 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxLinearGaugeModule, DxSelectBoxModule } from 'devextreme-angular'; +import { DxSelectBoxModule } from 'devextreme-angular'; +import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge'; import { Service, PowerInfo } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -24,17 +25,15 @@ export class AppComponent { this.currentValue = this.powerInfo[0]; } - customizeText(arg: any) { - return `${arg.valueText} kW`; - } + customizeText: DxLinearGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} kW`; + + customizeTooltip({ index, valueText }) { + let result = `${valueText} kW`; + + result = (index >= 0) + ? `Secondary ${index + 1}: ${result}` + : `Primary: ${result}`; - customizeTooltip(arg) { - let result = `${arg.valueText} kW`; - if (arg.index >= 0) { - result = `Secondary ${arg.index + 1}: ${result}`; - } else { - result = `Primary: ${result}`; - } return { text: result, }; diff --git a/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts b/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts index ce5a7c8a802..83484135dfa 100644 --- a/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts +++ b/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts @@ -1,17 +1,11 @@ -import { - NgModule, ViewChild, Component, enableProdMode, -} from '@angular/core'; +import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - DxButtonGroupModule, - DxHtmlEditorModule, -} from 'devextreme-angular'; - import 'devextreme/ui/html_editor/converters/markdown'; - import prettier from 'prettier/standalone'; import parserHtml from 'prettier/parser-html'; +import { DxHtmlEditorModule, DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor'; +import { DxButtonGroupModule, DxButtonGroupTypes } from 'devextreme-angular/ui/button-group'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -28,13 +22,13 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { valueContent: string; - editorValueType = 'html'; + editorValueType: DxHtmlEditorTypes.MarkupType = 'html'; constructor(service: Service) { this.valueContent = service.getMarkup(); } - onValueTypeChanged({ addedItems }) { + onValueTypeChanged({ addedItems }: DxButtonGroupTypes.SelectionChangedEvent) { this.editorValueType = addedItems[0].text.toLowerCase(); } diff --git a/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts b/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts index 2f76826b1c9..9840b45dc89 100644 --- a/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts +++ b/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts @@ -1,15 +1,10 @@ import { - NgModule, ViewChild, Component, enableProdMode, + NgModule, Component, enableProdMode, } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - DxHtmlEditorComponent, - DxHtmlEditorModule, - DxPopupComponent, - DxPopupModule, -} from 'devextreme-angular'; - +import { DxHtmlEditorModule, DxPopupModule } from 'devextreme-angular'; +import { DxButtonTypes } from 'devextreme-angular/ui/button'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -28,7 +23,7 @@ export class AppComponent { popupVisible: boolean; - toolbarButtonOptions :any = { + toolbarButtonOptions: DxButtonTypes.Properties = { text: 'Show markup', stylingMode: 'text', onClick: () => this.popupVisible = true, diff --git a/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts b/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts index 9291261a4ed..61b15bda431 100644 --- a/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts +++ b/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts @@ -2,13 +2,15 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxListModule } from 'devextreme-angular'; - +import { DxSortableTypes } from 'devextreme-angular/ui/sortable'; import { Task, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } +type DxoItemDraggingProperties = DxSortableTypes.Properties; + @Component({ selector: 'demo-app', providers: [Service], @@ -24,28 +26,24 @@ export class AppComponent { constructor(service: Service) { this.doingTasks = service.getDoingTasks(); this.plannedTasks = service.getPlannedTasks(); - - this.onAdd = this.onAdd.bind(this); - this.onRemove = this.onRemove.bind(this); - this.onReorder = this.onReorder.bind(this); } - onDragStart(e) { + onDragStart: DxoItemDraggingProperties['onDragStart'] = (e) => { e.itemData = e.fromData[e.fromIndex]; - } + }; - onAdd(e) { + onAdd: DxoItemDraggingProperties['onAdd'] = (e) => { e.toData.splice(e.toIndex, 0, e.itemData); - } + }; - onRemove(e) { + onRemove: DxoItemDraggingProperties['onRemove'] = (e) => { e.fromData.splice(e.fromIndex, 1); - } + }; - onReorder(e) { - this.onRemove(e); - this.onAdd(e); - } + onReorder: DxoItemDraggingProperties['onReorder'] = (e) => { + this.onRemove(e as DxSortableTypes.RemoveEvent); + this.onAdd(e as DxSortableTypes.AddEvent); + }; } @NgModule({ diff --git a/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts b/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts index 88b126a3960..89f26010682 100644 --- a/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts +++ b/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts @@ -1,8 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxSelectBoxModule, DxCheckBoxModule, DxListModule } from 'devextreme-angular'; - +import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular'; +import { DxListModule, DxListTypes } from 'devextreme-angular/ui/list'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -19,7 +19,7 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { allowDeletion = false; - itemDeleteMode = 'toggle'; + itemDeleteMode: DxListTypes.ItemDeleteMode = 'toggle'; tasks: string[]; diff --git a/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts b/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts index c8bb931b09a..1016482688a 100644 --- a/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts +++ b/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts @@ -1,11 +1,12 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxSelectBoxModule, DxListModule, DxCheckBoxModule } from 'devextreme-angular'; import DataSource from 'devextreme/data/data_source'; import ArrayStore from 'devextreme/data/array_store'; - -import { Task, Service } from './app.service'; +import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular'; +import { SingleMultipleAllOrNone } from 'devextreme-angular/common'; +import { DxListModule, DxListTypes } from 'devextreme-angular/ui/list'; +import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -21,9 +22,9 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { tasks: DataSource; - selectAllModeValue = 'page'; + selectAllModeValue: DxListTypes.SelectAllMode = 'page'; - selectionModeValue = 'all'; + selectionModeValue: SingleMultipleAllOrNone = 'all'; selectByClick = false; diff --git a/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts b/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts index 3506f78181b..edd933a4808 100644 --- a/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts +++ b/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts @@ -15,21 +15,17 @@ if (!/localhost/.test(document.location.host)) { templateUrl: 'app/app.component.html', }) export class AppComponent { - listData: any; - - constructor() { - this.listData = new DataSource({ - store: AspNetData.createStore({ - key: 'ProductID', - loadUrl: 'https://js.devexpress.com/Demos/Mvc/api/ListData/Orders', - }), - sort: 'ProductName', - group: 'Category.CategoryName', - paginate: true, - pageSize: 1, - filter: ['UnitPrice', '>', 15], - }); - } + listData = new DataSource({ + store: AspNetData.createStore({ + key: 'ProductID', + loadUrl: 'https://js.devexpress.com/Demos/Mvc/api/ListData/Orders', + }), + sort: 'ProductName', + group: 'Category.CategoryName', + paginate: true, + pageSize: 1, + filter: ['UnitPrice', '>', 15], + }); } @NgModule({ diff --git a/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts b/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts index ee9f11d84ca..be01ed96867 100644 --- a/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts @@ -20,7 +20,7 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { employee: Employee; - employeeInfo: any = {}; + employeeInfo: Employee | {} = {}; loadingVisible = false; diff --git a/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts b/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts index 66ceb45b65e..9f7723a13fb 100644 --- a/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts +++ b/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts @@ -20,7 +20,7 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { employees: string[]; - dataSource: any; + dataSource: DataSource; constructor(service: Service) { this.dataSource = new DataSource({ diff --git a/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts b/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts index 426fdad563a..ff3ba5df18a 100644 --- a/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts +++ b/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts @@ -1,8 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxLookupModule, DxSelectBoxModule } from 'devextreme-angular'; - +import { DxSelectBoxModule } from 'devextreme-angular'; +import { DxLookupModule, DxLookupTypes } from 'devextreme-angular/ui/lookup'; import { Service, Employee } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -18,29 +18,21 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { employees: Employee[]; - selectedEmployee: any; + selectedEmployee: Employee; - applyValueMode: string; + applyValueMode: DxLookupTypes.ApplyValueMode = 'instantly'; - applyValueModes: string[]; + applyValueModes: DxLookupTypes.ApplyValueMode[] = ['instantly', 'useButtons']; constructor(service: Service) { this.employees = service.getEmployees(); - this.applyValueMode = 'instantly'; - this.applyValueModes = ['instantly', 'useButtons']; } - valueChanged(data) { - this.selectedEmployee = data.value; + valueChanged({ value }: DxLookupTypes.ValueChangedEvent) { + this.selectedEmployee = value; } - getDisplayExpr(item) { - if (!item) { - return ''; - } - - return `${item.FirstName} ${item.LastName}`; - } + getDisplayExpr = ({ FirstName, LastName }: Record = {}) => (FirstName ? `${FirstName} ${LastName}` : undefined); } @NgModule({ diff --git a/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts b/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts index 5b3c7ba255d..aac101532e5 100644 --- a/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts +++ b/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts @@ -7,7 +7,7 @@ export class Tooltip { } export class Marker { - location: any; + location: unknown; tooltip: Tooltip; } diff --git a/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts b/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts index e5d94693ff8..71a13c1d1e7 100644 --- a/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts +++ b/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts @@ -1,13 +1,10 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxMapModule, DxSelectBoxModule } from 'devextreme-angular'; - +import { DxMapModule } from 'devextreme-angular'; +import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box'; import { - Marker, - APIKey, - Route, - Service, + Marker, APIKey, Route, Service, } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -27,23 +24,21 @@ export class AppComponent { markers: Marker[]; - apiKey: APIKey = {}; + apiKey: APIKey = { bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC' }; constructor(service: Service) { - this.apiKey.bing = 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC'; - this.markers = service.getMarkers(); this.routes = service.getRoutes(); } - setMode(e) { + setMode(e: DxSelectBoxTypes.ValueChangedEvent) { this.routes = this.routes.map((item) => { item.mode = e.value; return item; }); } - selectColor(e) { + selectColor(e: DxSelectBoxTypes.ValueChangedEvent) { this.routes = this.routes.map((item) => { item.color = e.value; return item; diff --git a/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts b/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts index 81c245c840e..7f6b71f1328 100644 --- a/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts +++ b/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; export class Marker { - location: any; + location: unknown; } export type APIKey = { diff --git a/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts index 4e03f85c4cf..a7d4a1ff9d6 100644 --- a/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts @@ -1,9 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { DxMenuModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular'; - +import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular'; +import { DxMenuModule, DxMenuTypes } from 'devextreme-angular/ui/menu'; import { Product, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -19,26 +18,24 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { products: Product[]; - showSubmenuModes: any; + showSubmenuModes = [{ + name: 'onHover' as DxMenuTypes.SubmenuShowMode, + delay: { show: 0, hide: 500 }, + }, { + name: 'onClick' as DxMenuTypes.SubmenuShowMode, + delay: { show: 0, hide: 300 }, + }]; - showFirstSubmenuModes: any; + showFirstSubmenuModes = this.showSubmenuModes[1]; currentProduct: Product; constructor(service: Service) { this.products = service.getProducts(); - this.showSubmenuModes = [{ - name: 'onHover', - delay: { show: 0, hide: 500 }, - }, { - name: 'onClick', - delay: { show: 0, hide: 300 }, - }]; - this.showFirstSubmenuModes = this.showSubmenuModes[1]; } - itemClick(data) { - const item = data.itemData; + itemClick(data: DxMenuTypes.ItemClickEvent) { + const item = data.itemData as Product; if (item.price) { this.currentProduct = item; diff --git a/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts b/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts index d1b8f73745a..7d6a0a3ebab 100644 --- a/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts @@ -1,7 +1,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxNumberBoxModule } from 'devextreme-angular'; +import { DxNumberBoxModule, DxNumberBoxTypes } from 'devextreme-angular/ui/number-box'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -12,7 +12,7 @@ if (!/localhost/.test(document.location.host)) { templateUrl: 'app/app.component.html', }) export class AppComponent { - keyDown(e) { + keyDown(e: DxNumberBoxTypes.KeyDownEvent) { const event = e.event; const str = event.key; if (/^[.,e]$/.test(str)) { diff --git a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html index bc6412836bd..5ccf72d8b8e 100644 --- a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html +++ b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html @@ -14,7 +14,6 @@ [allowSortingBySummary]="true" [allowFiltering]="true" [showBorders]="true" - [allowSortingBySummary]="true" [showColumnGrandTotals]="false" [showRowGrandTotals]="false" [showRowTotals]="false" diff --git a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts index 3e31a76b798..7ba5d9941fa 100644 --- a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts @@ -10,7 +10,7 @@ import { DxChartModule, DxChartComponent, } from 'devextreme-angular'; -import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -28,9 +28,9 @@ export class AppComponent implements AfterViewInit { @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent; - pivotGridDataSource: any; + pivotGridDataSource: DataSourceConfig; - constructor(service: Service, private currencyPipe: CurrencyPipe) { + constructor(service: Service) { this.customizeTooltip = this.customizeTooltip.bind(this); this.pivotGridDataSource = { diff --git a/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts index 63528216266..dbb3e4e58ee 100644 --- a/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts @@ -4,13 +4,14 @@ import { import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { - DxPivotGridModule, DxDataGridComponent, DxDataGridModule, DxPopupModule, DxTemplateModule, } from 'devextreme-angular'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import DataSource from 'devextreme/data/data_source'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -26,9 +27,9 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { @ViewChild('drillDownDataGrid') drillDownDataGrid: DxDataGridComponent; - pivotGridDataSource: any; + pivotGridDataSource: PivotGridDataSource; - drillDownDataSource: any; + drillDownDataSource: DataSource; salesPopupVisible = false; @@ -62,7 +63,7 @@ export class AppComponent { }); } - onPivotCellClick(e) { + onPivotCellClick(e: DxPivotGridTypes.CellClickEvent) { if (e.area == 'data') { const rowPathLength = e.cell.rowPath.length; const rowPathName = e.cell.rowPath[rowPathLength - 1]; diff --git a/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts index 104542bbd0f..b31ff1c2ea7 100644 --- a/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts @@ -1,17 +1,20 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxPivotGridModule } from 'devextreme-angular'; import { Workbook } from 'exceljs'; import { saveAs } from 'file-saver-es'; // Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications. import { exportPivotGrid } from 'devextreme/excel_exporter'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service, Sale } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } +type CellData = DxPivotGridTypes.CellPreparedEvent['cell'] & { area?: string }; + @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', @@ -20,7 +23,7 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { sales: Sale[]; - dataSource: any; + dataSource: DataSourceConfig; constructor(service: Service) { this.dataSource = { @@ -50,7 +53,7 @@ export class AppComponent { }; } - onExporting(e) { + onExporting(e: DxPivotGridTypes.ExportingEvent) { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Sales'); @@ -78,30 +81,31 @@ export class AppComponent { }); } - onCellPrepared({ cell, area, cellElement }) { - cell.area = area; - if (this.isDataCell(cell) || this.isTotalCell(cell)) { - const appearance = this.getConditionalAppearance(cell); + onCellPrepared({ cell, area, cellElement }: DxPivotGridTypes.CellPreparedEvent) { + const cellData = { ...cell, area }; + + if (this.isDataCell(cellData) || this.isTotalCell(cellData)) { + const appearance = this.getConditionalAppearance(cellData); Object.assign(cellElement.style, this.getCssStyles(appearance)); } } - isDataCell(cell) { + isDataCell(cell: CellData) { return (cell.area === 'data' && cell.rowType === 'D' && cell.columnType === 'D'); } - isTotalCell(cell) { + isTotalCell(cell: CellData) { return (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT'); } - getExcelCellFormat({ fill, font, bold }) { + getExcelCellFormat({ fill, font, bold }: ReturnType) { return { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: fill } }, font: { color: { argb: font }, bold }, }; } - getCssStyles({ fill, font, bold }) { + getCssStyles({ fill, font, bold }: ReturnType) { return { 'background-color': `#${fill}`, color: `#${font}`, @@ -109,18 +113,20 @@ export class AppComponent { }; } - getConditionalAppearance(cell) { + getConditionalAppearance(cell: CellData) { if (this.isTotalCell(cell)) { return { fill: 'F2F2F2', font: '3F3F3F', bold: true }; } + const { value } = cell; + if (value < 20000) { return { font: '9C0006', fill: 'FFC7CE', bold: false }; } - if (value > 50000) { - return { font: '006100', fill: 'C6EFCE', bold: false }; - } - return { font: '9C6500', fill: 'FFEB9C', bold: false }; + + return (value > 50000) + ? { font: '006100', fill: 'C6EFCE', bold: false } + : { font: '9C6500', fill: 'FFEB9C', bold: false }; } } diff --git a/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts index 0152acf58e0..c593022d1f1 100644 --- a/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts @@ -1,11 +1,12 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxPivotGridModule } from 'devextreme-angular'; import { Workbook } from 'exceljs'; import { saveAs } from 'file-saver-es'; // Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications. import { exportPivotGrid } from 'devextreme/excel_exporter'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service, Sale } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -21,7 +22,7 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { sales: Sale[]; - dataSource: any; + dataSource: DataSourceConfig; constructor(service: Service) { this.dataSource = { @@ -52,7 +53,7 @@ export class AppComponent { }; } - onExporting(e) { + onExporting(e: DxPivotGridTypes.ExportingEvent) { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Sales'); diff --git a/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts index 511ed8e3316..621d62aa10d 100644 --- a/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts @@ -1,12 +1,13 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxPivotGridModule, DxCheckBoxModule } from 'devextreme-angular'; - +import { DxCheckBoxModule } from 'devextreme-angular'; import { Workbook, WorksheetViewFrozen } from 'exceljs'; import { saveAs } from 'file-saver-es'; // Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications. import { exportPivotGrid } from 'devextreme/excel_exporter'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service, Sale } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -23,7 +24,7 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { sales: Sale[]; - dataSource: any; + dataSource: DataSourceConfig; exportDataFieldHeaders = false; @@ -68,7 +69,7 @@ export class AppComponent { }; } - onExporting(e) { + onExporting(e: DxPivotGridTypes.ExportingEvent) { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Sales'); diff --git a/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts index a7413f8a3dd..0de2dcf980c 100644 --- a/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts @@ -1,8 +1,9 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxPivotGridModule, DxCheckBoxModule } from 'devextreme-angular'; +import { DxCheckBoxModule } from 'devextreme-angular'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service, Sale } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -17,7 +18,7 @@ if (!/localhost/.test(document.location.host)) { preserveWhitespaces: true, }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: PivotGridDataSource; showDataFields = true; @@ -57,9 +58,11 @@ export class AppComponent { }); } - contextMenuPreparing(e) { + contextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) { + type SourceField = (typeof e.field) & { index: number }; + const dataSource = e.component.getDataSource(); - const sourceField = e.field; + const sourceField = e.field as SourceField; if (sourceField) { if (!sourceField.groupName || sourceField.groupIndex === 0) { @@ -67,8 +70,9 @@ export class AppComponent { text: 'Hide field', onItemClick() { let fieldIndex; + if (sourceField.groupName) { - fieldIndex = dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex].index; + fieldIndex = (dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex] as SourceField).index; } else { fieldIndex = sourceField.index; } diff --git a/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts index cb7206a4f8d..bbd6356efbe 100644 --- a/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts @@ -16,7 +16,7 @@ if (!/localhost/.test(document.location.host)) { preserveWhitespaces: true, }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: PivotGridDataSource; searchEnabled = true; diff --git a/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts index 021a741edf2..e4e5780699d 100644 --- a/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts @@ -1,9 +1,9 @@ -import { - NgModule, Component, ViewChild, enableProdMode, -} from '@angular/core'; +import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxPivotGridModule, DxSelectBoxModule } from 'devextreme-angular'; +import { DxSelectBoxModule } from 'devextreme-angular'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -15,40 +15,33 @@ if (!/localhost/.test(document.location.host)) { templateUrl: 'app/app.component.html', }) export class AppComponent { - dataSource: any; - - applyChangesModes: any; - - applyChangesMode: any; - - constructor() { - this.dataSource = { - fields: [ - { dataField: '[Product].[Category]', area: 'row' }, - { - dataField: '[Product].[Subcategory]', - area: 'row', - headerFilter: { - search: { - enabled: true, - }, + dataSource: DataSourceConfig = { + fields: [ + { dataField: '[Product].[Category]', area: 'row' }, + { + dataField: '[Product].[Subcategory]', + area: 'row', + headerFilter: { + search: { + enabled: true, }, }, - { dataField: '[Ship Date].[Calendar Year]', area: 'column' }, - { dataField: '[Ship Date].[Month of Year]', area: 'column' }, - { dataField: '[Measures].[Customer Count]', area: 'data' }, - ], - store: { - type: 'xmla', - url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', - catalog: 'Adventure Works DW Standard Edition', - cube: 'Adventure Works', }, - }; - - this.applyChangesModes = ['instantly', 'onDemand']; - this.applyChangesMode = this.applyChangesModes[0]; - } + { dataField: '[Ship Date].[Calendar Year]', area: 'column' }, + { dataField: '[Ship Date].[Month of Year]', area: 'column' }, + { dataField: '[Measures].[Customer Count]', area: 'data' }, + ], + store: { + type: 'xmla', + url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', + catalog: 'Adventure Works DW Standard Edition', + cube: 'Adventure Works', + }, + }; + + applyChangesModes: DxPivotGridTypes.ApplyChangesMode[] = ['instantly', 'onDemand']; + + applyChangesMode = this.applyChangesModes[0]; } @NgModule({ diff --git a/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts index cc0d98c0029..055f84cbca1 100644 --- a/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts @@ -17,7 +17,7 @@ if (!/localhost/.test(document.location.host)) { preserveWhitespaces: true, }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: PivotGridDataSource; showTotalsPrior = false; @@ -26,7 +26,7 @@ export class AppComponent { treeHeaderLayout = true; constructor(service: Service) { - this.pivotGridDataSource = { + this.pivotGridDataSource = new PivotGridDataSource({ fields: [{ caption: 'Region', dataField: 'region', @@ -61,7 +61,7 @@ export class AppComponent { area: 'data', }], store: service.getSales(), - }; + }); } } diff --git a/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts index d98c11e5d5e..977c491e336 100644 --- a/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts @@ -1,9 +1,10 @@ import { - NgModule, Component, ViewChild, enableProdMode, + NgModule, Component, enableProdMode, } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPivotGridModule } from 'devextreme-angular'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -15,7 +16,7 @@ if (!/localhost/.test(document.location.host)) { templateUrl: 'app/app.component.html', }) export class AppComponent { - dataSource: any; + dataSource: DataSourceConfig; constructor() { this.dataSource = { diff --git a/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts index 81b1f82b9cb..f41f6024b78 100644 --- a/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts @@ -9,7 +9,7 @@ import { DxChartModule, DxChartComponent, } from 'devextreme-angular'; -import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -27,7 +27,7 @@ export class AppComponent implements AfterViewInit { @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent; - pivotGridDataSource: any; + pivotGridDataSource: DataSourceConfig; constructor(service: Service) { this.customizeTooltip = this.customizeTooltip.bind(this); diff --git a/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts index 3a35ca22d5c..e6766ca62b1 100644 --- a/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts @@ -2,6 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPivotGridModule } from 'devextreme-angular'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -13,25 +14,21 @@ if (!/localhost/.test(document.location.host)) { templateUrl: 'app/app.component.html', }) export class AppComponent { - dataSource: any; - - constructor() { - this.dataSource = { - paginate: true, - fields: [ - { dataField: '[Customer].[Customer]', area: 'row' }, - { dataField: '[Ship Date].[Calendar Year]', area: 'column' }, - { dataField: '[Ship Date].[Month of Year]', area: 'column' }, - { dataField: '[Measures].[Internet Sales Amount]', area: 'data' }, - ], - store: { - type: 'xmla', - url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', - catalog: 'Adventure Works DW Standard Edition', - cube: 'Adventure Works', - }, - }; - } + dataSource: DataSourceConfig = { + paginate: true, + fields: [ + { dataField: '[Customer].[Customer]', area: 'row' }, + { dataField: '[Ship Date].[Calendar Year]', area: 'column' }, + { dataField: '[Ship Date].[Month of Year]', area: 'column' }, + { dataField: '[Measures].[Internet Sales Amount]', area: 'data' }, + ], + store: { + type: 'xmla', + url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', + catalog: 'Adventure Works DW Standard Edition', + cube: 'Adventure Works', + }, + }; } @NgModule({ diff --git a/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts index 8b6dd30817e..cecb046ee23 100644 --- a/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts @@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPivotGridModule } from 'devextreme-angular'; -import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -16,10 +16,10 @@ if (!/localhost/.test(document.location.host)) { providers: [Service], }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: DataSourceConfig; constructor(service: Service) { - this.pivotGridDataSource = new PivotGridDataSource({ + this.pivotGridDataSource = { fields: [{ caption: 'Region', width: 120, @@ -64,7 +64,7 @@ export class AppComponent { allowCrossGroupCalculation: true, }], store: service.getSales(), - }); + }; } } diff --git a/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts index 72cdb1e4cf7..de6d1e7285c 100644 --- a/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts @@ -4,6 +4,7 @@ import { import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPivotGridModule } from 'devextreme-angular'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; import { Service, Sale } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -19,7 +20,7 @@ if (!/localhost/.test(document.location.host)) { export class AppComponent { sales: Sale[]; - dataSource: any; + dataSource: DataSourceConfig; constructor(service: Service) { this.dataSource = { diff --git a/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts index 112a54109cc..7d8b55f1683 100644 --- a/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts @@ -2,13 +2,13 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { - DxPivotGridModule, DxPivotGridFieldChooserModule, DxRadioGroupModule, DxButtonModule, DxSelectBoxModule, } from 'devextreme-angular'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service, Layout, Sale } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -23,17 +23,17 @@ if (!/localhost/.test(document.location.host)) { preserveWhitespaces: true, }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: PivotGridDataSource; layouts: Layout[]; layout = 0; - applyChangesModes: any; + applyChangesModes: DxPivotGridTypes.ApplyChangesMode[] = ['instantly', 'onDemand']; - applyChangesMode: any; + applyChangesMode = this.applyChangesModes[0]; - state: any; + state: Record; constructor(service: Service) { this.pivotGridDataSource = new PivotGridDataSource({ @@ -78,16 +78,13 @@ export class AppComponent { this.state = this.pivotGridDataSource.state(); this.layouts = service.getLayouts(); - - this.applyChangesModes = ['instantly', 'onDemand']; - this.applyChangesMode = this.applyChangesModes[0]; } - applyClick(data) { + applyClick() { this.pivotGridDataSource.state(this.state); } - cancelClick(data) { + cancelClick() { this.state = this.pivotGridDataSource.state(); } } diff --git a/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts index 8761163787a..233d37b90a2 100644 --- a/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts @@ -1,8 +1,9 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxPivotGridModule, DxButtonModule } from 'devextreme-angular'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { DxButtonModule } from 'devextreme-angular'; +import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -16,9 +17,9 @@ if (!/localhost/.test(document.location.host)) { providers: [Service], }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: PivotGridDataSource; - summaryDisplayModes: any = [ + summaryDisplayModes = [ { text: 'None', value: 'none' }, { text: 'Absolute Variation', value: 'absoluteVariation' }, { text: 'Percent Variation', value: 'percentVariation' }, @@ -63,8 +64,9 @@ export class AppComponent { }); } - prepareContextMenu(e) { - const dataSource: any = this.pivotGridDataSource; + prepareContextMenu(e: DxPivotGridTypes.ContextMenuPreparingEvent) { + const dataSource = this.pivotGridDataSource; + if (e.field !== dataSource.field(4)) { return; } for (const summaryDisplayMode of this.summaryDisplayModes) { @@ -73,7 +75,7 @@ export class AppComponent { e.items.push({ text: summaryDisplayMode.text, selected: e.field.summaryDisplayMode === summaryDisplayModeValue, - onItemClick(args) { + onItemClick() { let format; const caption = summaryDisplayModeValue === 'none' ? 'Total Sales' : 'Relative Sales'; if (summaryDisplayModeValue === 'none' || summaryDisplayModeValue === 'absoluteVariation') { diff --git a/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts index e09dd8bc761..1772379af25 100644 --- a/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts @@ -3,6 +3,7 @@ import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-bro import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPivotGridModule } from 'devextreme-angular'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid'; import { Service, Sale } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -16,9 +17,9 @@ if (!/localhost/.test(document.location.host)) { providers: [Service], }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: PivotGridDataSource; - summaryDisplayModes: any[] = [ + summaryDisplayModes = [ { text: 'None', value: 'none' }, { text: 'Absolute Variation', value: 'absoluteVariation' }, { text: 'Percent Variation', value: 'percentVariation' }, @@ -61,20 +62,23 @@ export class AppComponent { }); } - prepareContextMenu(e) { + prepareContextMenu(e: DxPivotGridTypes.ContextMenuPreparingEvent) { + type SourceField = (typeof e.field) & { index: number }; + if (e.field && e.field.dataField === 'amount') { this.summaryDisplayModes.forEach((mode) => { e.items.push({ text: mode.text, selected: e.field.summaryDisplayMode === mode.value, onItemClick: () => { - let format; + let format: string; const caption = mode.value === 'none' ? 'Total Sales' : 'Relative Sales'; + if (mode.value === 'none' || mode.value === 'absoluteVariation') { format = 'currency'; } - this.pivotGridDataSource.field(e.field.index, { + this.pivotGridDataSource.field((e.field as SourceField).index, { summaryDisplayMode: mode.value, format, caption, diff --git a/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts index a42906b108e..36f17139a27 100644 --- a/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts @@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPivotGridModule } from 'devextreme-angular'; -import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -15,7 +15,7 @@ if (!/localhost/.test(document.location.host)) { providers: [Service], }) export class AppComponent { - pivotGridDataSource: any; + pivotGridDataSource: DataSourceConfig; constructor(service: Service) { this.pivotGridDataSource = { diff --git a/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts index 0cfc6de1111..4d8cd17a37f 100644 --- a/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts +++ b/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts @@ -1,9 +1,9 @@ import { - NgModule, Component, enableProdMode, ChangeDetectionStrategy, + NgModule, Component, enableProdMode, } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - +import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source'; import { DxPivotGridModule } from 'devextreme-angular'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; @@ -16,69 +16,65 @@ if (!/localhost/.test(document.location.host)) { templateUrl: 'app/app.component.html', }) export class AppComponent { - dataSource: any; - - constructor() { - this.dataSource = { - remoteOperations: true, - store: AspNetData.createStore({ - key: 'OrderID', - loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales/Orders', - }), - fields: [{ - caption: 'Category', - dataField: 'ProductCategoryName', - width: 250, - expanded: true, - sortBySummaryField: 'SalesAmount', - sortBySummaryPath: [], - sortOrder: 'desc', - area: 'row', - }, { - caption: 'Subcategory', - dataField: 'ProductSubcategoryName', - width: 250, - sortBySummaryField: 'SalesAmount', - sortBySummaryPath: [], - sortOrder: 'desc', - area: 'row', - }, { - caption: 'Product', - dataField: 'ProductName', - area: 'row', - sortBySummaryField: 'SalesAmount', - sortBySummaryPath: [], - sortOrder: 'desc', - width: 250, - }, { - caption: 'Date', - dataField: 'DateKey', - dataType: 'date', - area: 'column', - }, { - caption: 'Amount', - dataField: 'SalesAmount', - summaryType: 'sum', - format: 'currency', - area: 'data', - }, { - caption: 'Store', - dataField: 'StoreName', - }, { - caption: 'Quantity', - dataField: 'SalesQuantity', - summaryType: 'sum', - }, { - caption: 'Unit Price', - dataField: 'UnitPrice', - format: 'currency', - summaryType: 'sum', - }, { - dataField: 'Id', - visible: false, - }], - }; - } + dataSource: DataSourceConfig = { + remoteOperations: true, + store: AspNetData.createStore({ + key: 'OrderID', + loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales/Orders', + }), + fields: [{ + caption: 'Category', + dataField: 'ProductCategoryName', + width: 250, + expanded: true, + sortBySummaryField: 'SalesAmount', + sortBySummaryPath: [], + sortOrder: 'desc', + area: 'row', + }, { + caption: 'Subcategory', + dataField: 'ProductSubcategoryName', + width: 250, + sortBySummaryField: 'SalesAmount', + sortBySummaryPath: [], + sortOrder: 'desc', + area: 'row', + }, { + caption: 'Product', + dataField: 'ProductName', + area: 'row', + sortBySummaryField: 'SalesAmount', + sortBySummaryPath: [], + sortOrder: 'desc', + width: 250, + }, { + caption: 'Date', + dataField: 'DateKey', + dataType: 'date', + area: 'column', + }, { + caption: 'Amount', + dataField: 'SalesAmount', + summaryType: 'sum', + format: 'currency', + area: 'data', + }, { + caption: 'Store', + dataField: 'StoreName', + }, { + caption: 'Quantity', + dataField: 'SalesQuantity', + summaryType: 'sum', + }, { + caption: 'Unit Price', + dataField: 'UnitPrice', + format: 'currency', + summaryType: 'sum', + }, { + dataField: 'Id', + visible: false, + }], + }; } @NgModule({ diff --git a/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts index dc14d051d2c..ec235d87b6f 100644 --- a/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts @@ -24,11 +24,11 @@ export class AppComponent { popupVisible = false; - moreInfoButtonOptions: any; + moreInfoButtonOptions: Record; - emailButtonOptions: any; + emailButtonOptions: Record; - closeButtonOptions: any; + closeButtonOptions: Record; positionOf: string; @@ -72,11 +72,11 @@ export class AppComponent { }; } - detailsButtonMouseEnter(id) { + detailsButtonMouseEnter(id: number) { this.positionOf = `#image${id}`; } - showInfo(employee) { + showInfo(employee: Employee) { this.currentEmployee = employee; this.popupVisible = true; } diff --git a/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts b/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts index f1c26ddd44b..5c6af44c86d 100644 --- a/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts +++ b/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts @@ -1,10 +1,8 @@ import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { - DxPopupModule, DxButtonModule, DxScrollViewModule, DxTemplateModule, -} from 'devextreme-angular'; +import { DxPopupModule, DxScrollViewModule, DxTemplateModule } from 'devextreme-angular'; +import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -21,7 +19,16 @@ export class AppComponent { popupWithScrollViewVisible = false; - bookButtonOptions: any; + bookButtonOptions: DxButtonTypes.Properties = { + width: 300, + text: 'Book', + type: 'default', + stylingMode: 'contained', + onClick: () => { + this.popupVisible = false; + this.popupWithScrollViewVisible = false; + }, + }; showPopup() { this.popupVisible = true; @@ -30,19 +37,6 @@ export class AppComponent { showPopupWithScrollView() { this.popupWithScrollViewVisible = true; } - - constructor() { - this.bookButtonOptions = { - width: 300, - text: 'Book', - type: 'default', - stylingMode: 'contained', - onClick: () => { - this.popupVisible = false; - this.popupWithScrollViewVisible = false; - }, - }; - } } @NgModule({ diff --git a/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts b/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts index eb01b5aa565..47c488c82b8 100644 --- a/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts @@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxRadioGroupModule, DxTemplateModule } from 'devextreme-angular'; - +import { DxRadioGroupTypes } from 'devextreme-angular/ui/radio-group'; import { PriorityEntity, Service, Task } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -16,8 +16,6 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - priorities: string[]; - priorityEntities: PriorityEntity[]; selectionPriorityId: number; @@ -28,25 +26,26 @@ export class AppComponent { currentData: string[] = []; + priorities = [ + 'Low', + 'Normal', + 'Urgent', + 'High', + ]; + constructor(service: Service) { this.tasks = service.getTasks(); - this.priorities = [ - 'Low', - 'Normal', - 'Urgent', - 'High', - ]; this.priorityEntities = service.getPriorityEntities(); this.colorPriority = this.priorities[2]; this.currentData[0] = this.tasks[1].subject; this.selectionPriorityId = this.priorityEntities[0].id; } - onValueChanged($event) { + onValueChanged({ value }: DxRadioGroupTypes.ValueChangedEvent) { this.currentData = []; this.tasks.forEach((item, index) => { - if (item.priority == $event.value) { + if (item.priority == value) { this.currentData.push(this.tasks[index].subject); } }); diff --git a/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts index af6b80f2107..3154125b600 100644 --- a/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts +++ b/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts @@ -13,24 +13,20 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - dataSource: any[]; + dataSource = [ + { t: new Date(2011, 11, 22), costs: 19, income: 18 }, + { t: new Date(2011, 11, 29), costs: 27, income: 12 }, + { t: new Date(2012, 0, 5), costs: 30, income: 5 }, + { t: new Date(2012, 0, 12), costs: 26, income: 6 }, + { t: new Date(2012, 0, 19), costs: 18, income: 10 }, + { t: new Date(2012, 0, 26), costs: 15, income: 15 }, + { t: new Date(2012, 1, 2), costs: 14, income: 21 }, + { t: new Date(2012, 1, 9), costs: 14, income: 25 }, + ]; startSelectedValue: Date = new Date(2011, 11, 25); endSelectedValue: Date = new Date(2012, 0, 1); - - constructor() { - this.dataSource = [ - { t: new Date(2011, 11, 22), costs: 19, income: 18 }, - { t: new Date(2011, 11, 29), costs: 27, income: 12 }, - { t: new Date(2012, 0, 5), costs: 30, income: 5 }, - { t: new Date(2012, 0, 12), costs: 26, income: 6 }, - { t: new Date(2012, 0, 19), costs: 18, income: 10 }, - { t: new Date(2012, 0, 26), costs: 15, income: 15 }, - { t: new Date(2012, 1, 2), costs: 14, income: 21 }, - { t: new Date(2012, 1, 9), costs: 14, income: 25 }, - ]; - } } @NgModule({ diff --git a/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts index 538021e64e2..360ac8a8266 100644 --- a/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts +++ b/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts @@ -13,33 +13,27 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - dataSource: any[]; + dataSource = [ + { x: 0, y: 15 }, + { x: 1, y: -1 }, + { x: 2, y: 10 }, + { x: 3, y: -3 }, + { x: 4, y: 16 }, + { x: 5, y: 0 }, + { x: 6, y: 9 }, + { x: 7, y: 3 }, + { x: 8, y: 15 }, + { x: 9, y: -1 }, + { x: 10, y: 10 }, + { x: 11, y: -3 }, + { x: 12, y: 16 }, + { x: 13, y: 0 }, + { x: 14, y: 9 }, + { x: 15, y: 3 }, + { x: 16, y: 13 }, + ]; - constructor() { - this.dataSource = [ - { x: 0, y: 15 }, - { x: 1, y: -1 }, - { x: 2, y: 10 }, - { x: 3, y: -3 }, - { x: 4, y: 16 }, - { x: 5, y: 0 }, - { x: 6, y: 9 }, - { x: 7, y: 3 }, - { x: 8, y: 15 }, - { x: 9, y: -1 }, - { x: 10, y: 10 }, - { x: 11, y: -3 }, - { x: 12, y: 16 }, - { x: 13, y: 0 }, - { x: 14, y: 9 }, - { x: 15, y: 3 }, - { x: 16, y: 13 }, - ]; - } - - customizeText(value) { - return `${value.valueText} s`; - } + customizeText = ({ valueText }) => `${valueText} s`; } @NgModule({ diff --git a/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts index 00611916c11..04c2d6d9b20 100644 --- a/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts +++ b/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts @@ -1,8 +1,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxRangeSelectorModule } from 'devextreme-angular'; - +import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector'; import { Service, ProductionData } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -24,7 +23,7 @@ export class AppComponent { this.dataSource = service.getData(); } - onValueChanged(e) { + onValueChanged(e: DxRangeSelectorTypes.ValueChangedEvent) { const data = this.dataSource; let total = 0; let startIndex; diff --git a/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts index 20da2b3c9b8..fd53181b8cd 100644 --- a/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts +++ b/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts @@ -1,9 +1,8 @@ -import { - NgModule, Component, ViewChild, enableProdMode, -} from '@angular/core'; +import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxRangeSelectorModule, DxChartModule } from 'devextreme-angular'; +import { DxRangeSelectorModule } from 'devextreme-angular'; +import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -15,9 +14,9 @@ if (!/localhost/.test(document.location.host)) { styleUrls: ['app/app.component.css'], }) export class AppComponent { - dataSource: any[] = []; + dataSource: Record[] = []; - visualRange: any = {}; + visualRange: DxChartTypes.ArgumentAxis['visualRange'] = {}; constructor() { const max = 100; diff --git a/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts index f49f3bd25ce..a1a45d90d6d 100644 --- a/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts +++ b/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts @@ -2,7 +2,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { DatePipe } from '@angular/common'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxRangeSelectorModule, DxSelectBoxModule } from 'devextreme-angular'; +import { DxSelectBoxModule } from 'devextreme-angular'; +import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -15,17 +16,17 @@ if (!/localhost/.test(document.location.host)) { preserveWhitespaces: true, }) export class AppComponent { - pipe: any = new DatePipe('en-US'); + pipe = new DatePipe('en-US'); - dataSource: string[] = ['onHandleMove', 'onHandleRelease']; + dataSource = ['onHandleMove', 'onHandleRelease']; workingDaysCount = 260; - startValue: Date = new Date(2011, 0, 1); + startValue = new Date(2011, 0, 1); - endValue: Date = new Date(2011, 11, 31); + endValue = new Date(2011, 11, 31); - onValueChanged = (e) => { + onValueChanged = (e: DxRangeSelectorTypes.ValueChangedEvent) => { const currentDate = new Date(e.value[0]); let workingDaysCount = 0; @@ -38,9 +39,9 @@ export class AppComponent { this.workingDaysCount = workingDaysCount; }; - customizeSliderMarker = (data) => this.pipe.transform(data.value, 'dd EEEE'); + customizeSliderMarker: DxRangeSelectorTypes.Properties['sliderMarker']['customizeText'] = ({ value }) => this.pipe.transform(value, 'dd EEEE'); - customizeLabel = (data) => this.pipe.transform(data.value, 'MMM'); + customizeLabel: DxRangeSelectorTypes.Properties['scale']['label']['customizeText'] = ({ value }) => this.pipe.transform(value, 'MMM'); } @NgModule({ diff --git a/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts index 3cf0b87dd2e..7bbc8a42231 100644 --- a/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts +++ b/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts @@ -1,8 +1,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxRangeSelectorModule, DxDataGridModule } from 'devextreme-angular'; - +import { DxDataGridModule } from 'devextreme-angular'; +import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector'; import { Service, Employee } from './app.service'; if (!/localhost/.test(document.location.host)) { @@ -20,23 +20,19 @@ export class AppComponent { selectedEmployees: Employee[]; - tableTitles: string[] = ['First Name', 'Last Name', 'Birth Year', 'City', 'Title']; - constructor(service: Service) { this.employees = service.getEmployees(); this.selectedEmployees = this.employees; } - onValueChanged(e) { - const selectedEmployees: any[] = []; - - this.employees.forEach((item, index) => { - if (item.BirthYear >= e.value[0] && item.BirthYear <= e.value[1]) { - selectedEmployees.push(item); - } - }); - - this.selectedEmployees = selectedEmployees; + onValueChanged(e: DxRangeSelectorTypes.ValueChangedEvent) { + this.selectedEmployees = this.employees.map( + (item, index) => ( + (item.BirthYear >= (e.value[0] as number) && item.BirthYear <= (e.value[1] as number)) + ? item + : undefined + ), + ).filter(Boolean); } } diff --git a/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts b/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts index 6b61988c73d..14e9e005db6 100644 --- a/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts +++ b/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts @@ -1,6 +1,4 @@ -import { - NgModule, Component, ViewChild, enableProdMode, -} from '@angular/core'; +import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxRangeSliderModule, DxNumberBoxModule } from 'devextreme-angular';