devextreme-schematics 1.3.0-beta.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-schematics",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0",
   "description": "DevExtreme schematics",
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -11,8 +11,9 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git://github.com/DevExpress/devextreme-schematics.git"
+    "url": "https://github.com/DevExpress/devextreme-cli/tree/master/packages/devextreme-schematics"
   },
+  "homepage": "https://www.npmjs.com/package/devextreme-schematics",
   "files": [
     "src/**/*",
     "!*.ts",
@@ -21,16 +22,17 @@
   ],
   "schematics": "./src/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "^8.0.0",
-    "@angular-devkit/schematics": "^8.0.0",
-    "@schematics/angular": "^8.0.0",
+    "@angular-devkit/core": "^12.0.0",
+    "@angular-devkit/schematics": "^12.0.0",
+    "@schematics/angular": "^12.0.0",
     "rxjs": "~6.4.0",
-    "typescript": "3.5.3"
+    "typescript": "~4.3.1"
   },
   "devDependencies": {
-    "@types/jasmine": "^3.3.8",
+    "@types/jasmine": "~3.10.3",
     "@types/node": "^8.10.39",
     "jasmine": "^2.8.0",
     "tslint": "^5.15.0"
-  }
+  },
+  "gitHead": "c61a31f44439fe1b0e82449a15c4db8375af34f3"
 }

package/src/add-app-template/index.js

@@ -12,7 +12,8 @@ function default_1(options) {
             resolveConflicts: options.resolveConflicts,
             project: options.project,
             skipInstall: true,
-            updateBudgets: options.updateBudgets
+            updateBudgets: options.updateBudgets,
+            globalNgCliVersion: options.globalNgCliVersion
         })
     ];
     if (!options.empty) {

package/src/add-app-template/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;AAAA,2DAIoC;AAEpC,mBAAwB,OAAY;IAClC,MAAM,KAAK,GAAG;QACZ,sBAAS,CAAC,SAAS,EAAE;YACnB,SAAS,EAAE,OAAO,CAAC,SAAS;YAC5B,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB,CAAC;QACF,sBAAS,CAAC,YAAY,EAAE;YACtB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,gBAAgB,EAAE,OAAO,CAAC,gBAAgB;YAC1C,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,WAAW,EAAE,IAAI;YACjB,aAAa,EAAE,OAAO,CAAC,aAAa;SACrC,CAAC;KACH,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;QAClB,KAAK,CAAC,IAAI,CAAC,sBAAS,CAAC,kBAAkB,EAAE;YACvC,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB,CAAC,CAAC,CAAC;KACL;IAED,OAAO,kBAAK,CAAC,KAAK,CAAC,CAAC;AACtB,CAAC;AAtBD,4BAsBC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;AAAA,2DAIoC;AAEpC,mBAAwB,OAAY;IAClC,MAAM,KAAK,GAAG;QACZ,sBAAS,CAAC,SAAS,EAAE;YACnB,SAAS,EAAE,OAAO,CAAC,SAAS;YAC5B,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB,CAAC;QACF,sBAAS,CAAC,YAAY,EAAE;YACtB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,gBAAgB,EAAE,OAAO,CAAC,gBAAgB;YAC1C,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,WAAW,EAAE,IAAI;YACjB,aAAa,EAAE,OAAO,CAAC,aAAa;YACpC,kBAAkB,EAAE,OAAO,CAAC,kBAAkB;SAC/C,CAAC;KACH,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;QAClB,KAAK,CAAC,IAAI,CAAC,sBAAS,CAAC,kBAAkB,EAAE;YACvC,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB,CAAC,CAAC,CAAC;KACL;IAED,OAAO,kBAAK,CAAC,KAAK,CAAC,CAAC;AACtB,CAAC;AAvBD,4BAuBC"}

package/src/add-app-template/index.ts

@@ -0,0 +1,30 @@
+import {
+  Rule,
+  chain,
+  schematic,
+} from '@angular-devkit/schematics';
+
+export default function(options: any): Rule {
+  const rules = [
+    schematic('install', {
+      dxversion: options.dxversion,
+      project: options.project
+    }),
+    schematic('add-layout', {
+      layout: options.layout,
+      resolveConflicts: options.resolveConflicts,
+      project: options.project,
+      skipInstall: true,
+      updateBudgets: options.updateBudgets,
+      globalNgCliVersion: options.globalNgCliVersion
+    })
+  ];
+
+  if (!options.empty) {
+    rules.push(schematic('add-sample-views', {
+      project: options.project
+    }));
+  }
+
+  return chain(rules);
+}

package/src/add-app-template/index_spec.js

@@ -1,9 +1,10 @@
 "use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
@@ -28,18 +29,18 @@ const workspaceOptions = {
 const angularSchematicsCollection = require.resolve('../../node_modules/@schematics/angular/collection.json');
 const schematicRunner = new testing_1.SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
 let appTree;
-beforeEach(() => __awaiter(this, void 0, void 0, function* () {
+beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
     appTree = yield schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
     appTree = yield schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
 }));
 describe('add-app-template', () => {
-    it('should add DevExtreme', () => __awaiter(this, void 0, void 0, function* () {
+    it('should add DevExtreme', () => __awaiter(void 0, void 0, void 0, function* () {
         const runner = new testing_1.SchematicTestRunner('schematics', collectionPath);
         const tree = yield runner.runSchematicAsync('add-app-template', {}, appTree).toPromise();
         const packageConfig = JSON.parse(tree.readContent('package.json'));
         expect('devextreme' in packageConfig.dependencies).toBe(true);
     }));
-    it('should consider the `project` option', () => __awaiter(this, void 0, void 0, function* () {
+    it('should consider the `project` option', () => __awaiter(void 0, void 0, void 0, function* () {
         appTree = yield schematicRunner.runSchematicAsync('application', {
             name: 'testApp2',
             inlineStyle: false,
@@ -59,7 +60,7 @@ describe('add-app-template', () => {
         expect(tree.files)
             .toContain('/projects/testApp2/src/app/pages/home/home.component.ts');
     }));
-    it('should consider the `updateBudgets` option', () => __awaiter(this, void 0, void 0, function* () {
+    it('should consider the `updateBudgets` option', () => __awaiter(void 0, void 0, void 0, function* () {
         const runner = new testing_1.SchematicTestRunner('schematics', collectionPath);
         const tree = yield runner.runSchematicAsync('add-app-template', { updateBudgets: true }, appTree).toPromise();
         const angularContent = JSON.parse(tree.readContent('/angular.json'));

package/src/add-app-template/index_spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index_spec.js","sourceRoot":"","sources":["index_spec.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index_spec.js","sourceRoot":"","sources":["index_spec.ts"],"names":[],"mappings":"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"}

package/src/add-app-template/index_spec.ts

@@ -0,0 +1,73 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
+import * as path from 'path';
+
+const collectionPath = path.join(__dirname, '../collection.json');
+
+const appOptions: any = {
+  name: 'testApp',
+  projectRoot: '',
+  inlineStyle: false,
+  inlineTemplate: false,
+  routing: true,
+  style: 'css',
+  skipTests: false,
+  skipPackageJson: false
+};
+
+const workspaceOptions: WorkspaceOptions = {
+  name: 'workspace',
+  version: '6.0.0'
+};
+
+const angularSchematicsCollection = require.resolve('../../node_modules/@schematics/angular/collection.json');
+const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
+let appTree: UnitTestTree;
+
+beforeEach(async () => {
+  appTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
+  appTree = await schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
+});
+
+describe('add-app-template', () => {
+  it('should add DevExtreme', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('add-app-template', { }, appTree).toPromise();
+    const packageConfig = JSON.parse(tree.readContent('package.json'));
+
+    expect('devextreme' in packageConfig.dependencies).toBe(true);
+  });
+
+  it('should consider the `project` option', async () => {
+    appTree = await schematicRunner.runSchematicAsync('application', {
+      name: 'testApp2',
+      inlineStyle: false,
+      inlineTemplate: false,
+      routing: true,
+      style: 'scss',
+      projectRoot: 'projects/testApp2'
+    }, appTree).toPromise();
+
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('add-app-template', {
+      project: 'testApp2'
+    }, appTree).toPromise();
+
+    expect(tree.files)
+      .toContain('/devextreme.json');
+    expect(tree.files)
+      .toContain('/projects/testApp2/src/themes/metadata.base.json');
+    expect(tree.files)
+      .toContain('/projects/testApp2/src/app/pages/home/home.component.ts');
+  });
+
+  it('should consider the `updateBudgets` option', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('add-app-template', { updateBudgets: true }, appTree).toPromise();
+
+    const angularContent = JSON.parse(tree.readContent('/angular.json'));
+    const budgets = angularContent.projects.testApp.architect.build.configurations.production.budgets;
+
+    expect(budgets[0].maximumWarning).toEqual('4mb');
+  });
+});

package/src/add-app-template/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "SchematicsDevextremeAddAppTemplate",
+  "$id": "SchematicsDevextremeAddAppTemplate",
   "title": "Add a DevExtreme layout template to an Anular application",
   "type": "object",
   "properties": {
@@ -10,7 +10,7 @@
       "description": "The type of a DevExtreme layout to add",
       "default": "side-nav-outer-toolbar",
       "x-prompt": {
-        "message": "What layout do you want to add?",
+        "message": "Specify desired application layout:",
         "type": "list",
         "items": [
           { "value": "side-nav-outer-toolbar", "label": "Side navigation (outer toolbar)" },
@@ -39,7 +39,11 @@
     "dxversion": {
       "type": "string",
       "description": "The DevExtreme version",
-      "default": "20.1-stable"
+      "default": "^20.2.4"
+    },
+    "globalNgCliVersion": {
+      "type":"string",
+      "default": "^12.0.0"
     },
     "empty": {
       "type": "boolean",

package/src/add-layout/files/devextreme.json

@@ -1,5 +1,5 @@
 {
-  "applicationEngine": "<%= engine %>",
+  "applicationEngine": "angular",
   "build": {
     "commands": [
       {

package/src/add-layout/files/src/app/__name__.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="isAutorized(); else notAuthorized">
+<ng-container *ngIf="isAuthenticated(); else unauthenticated">
   <app-<%= layout %> title="{{appInfo.title}}">
     <router-outlet></router-outlet>
     <app-footer>
@@ -9,6 +9,6 @@
   </app-<%= layout %>>
 </ng-container>
 
-<ng-template #notAuthorized>
-  <app-not-authorized-container></app-not-authorized-container>
+<ng-template #unauthenticated>
+  <app-unauthenticated-content></app-unauthenticated-content>
 </ng-template>

package/src/add-layout/files/src/app/__name__.component.ts

@@ -13,7 +13,7 @@ export class <%= strings.classify(name) %>Component  {
 
   constructor(private authService: AuthService, private screen: ScreenService, public appInfo: AppInfoService) { }
 
-  isAutorized() {
+  isAuthenticated() {
     return this.authService.loggedIn;
   }
 }

package/src/add-layout/files/src/app/app-routing.module.ts

@@ -27,7 +27,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
   providers: [AuthGuardService],
   exports: [RouterModule]
 })

package/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
 import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
 import { ScreenService } from '../../shared/services';
+import { ItemClickEvent as TreeViewItemClickEvent } from 'devextreme/ui/tree_view';
+import { ItemClickEvent as ToolbarItemClickEvent } from 'devextreme/ui/toolbar';
 import { DxDrawerModule } from 'devextreme-angular/ui/drawer';
 import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
 import { DxToolbarModule } from 'devextreme-angular/ui/toolbar';
@@ -14,14 +16,14 @@ import { Router, NavigationEnd } from '@angular/router';
   styleUrls: ['./side-nav-inner-toolbar.component.scss']
 })
 export class SideNavInnerToolbarComponent implements OnInit {
-  @ViewChild(DxScrollViewComponent, { static: true }) scrollView: DxScrollViewComponent;
+  @ViewChild(DxScrollViewComponent, { static: true }) scrollView!: DxScrollViewComponent;
   selectedRoute = '';
 
-  menuOpened: boolean;
+  menuOpened!: boolean;
   temporaryMenuOpened = false;
 
   @Input()
-  title: string;
+  title!: string;
 
   menuMode = 'shrink';
   menuRevealMode = 'expand';
@@ -54,9 +56,9 @@ export class SideNavInnerToolbarComponent implements OnInit {
     this.shaderEnabled = !isLarge;
   }
 
-  toggleMenu = (e) => {
+  toggleMenu = (e: ToolbarItemClickEvent) => {
     this.menuOpened = !this.menuOpened;
-    e.event.stopPropagation();
+    e.event?.stopPropagation();
   }
 
   get hideMenuAfterNavigation() {
@@ -67,13 +69,13 @@ export class SideNavInnerToolbarComponent implements OnInit {
     return !this.menuOpened;
   }
 
-  navigationChanged(event) {
-    const path = event.itemData.path;
+  navigationChanged(event: TreeViewItemClickEvent) {
+    const path = (event.itemData as any).path;
     const pointerEvent = event.event;
 
     if (path && this.menuOpened) {
-      if (event.node.selected) {
-        pointerEvent.preventDefault();
+      if (event.node?.selected) {
+        pointerEvent?.preventDefault();
       } else {
         this.router.navigate([path]);
         this.scrollView.instance.scrollTo(0);
@@ -82,10 +84,10 @@ export class SideNavInnerToolbarComponent implements OnInit {
       if (this.hideMenuAfterNavigation) {
         this.temporaryMenuOpened = false;
         this.menuOpened = false;
-        pointerEvent.stopPropagation();
+        pointerEvent?.stopPropagation();
       }
     } else {
-      pointerEvent.preventDefault();
+      pointerEvent?.preventDefault();
     }
   }
 

package/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
 import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
 import { ScreenService } from '../../shared/services';
+import { ItemClickEvent } from 'devextreme/ui/tree_view';
 import { DxDrawerModule } from 'devextreme-angular/ui/drawer';
 import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
 import { CommonModule } from '@angular/common';
@@ -13,14 +14,14 @@ import { Router, NavigationEnd } from '@angular/router';
   styleUrls: ['./side-nav-outer-toolbar.component.scss']
 })
 export class SideNavOuterToolbarComponent implements OnInit {
-  @ViewChild(DxScrollViewComponent, { static: true }) scrollView: DxScrollViewComponent;
+  @ViewChild(DxScrollViewComponent, { static: true }) scrollView!: DxScrollViewComponent;
   selectedRoute = '';
 
-  menuOpened: boolean;
+  menuOpened!: boolean;
   temporaryMenuOpened = false;
 
   @Input()
-  title: string;
+  title!: string;
 
   menuMode = 'shrink';
   menuRevealMode = 'expand';
@@ -61,13 +62,13 @@ export class SideNavOuterToolbarComponent implements OnInit {
     return !this.menuOpened;
   }
 
-  navigationChanged(event) {
-    const path = event.itemData.path;
+  navigationChanged(event: ItemClickEvent) {
+    const path = (event.itemData as any).path;
     const pointerEvent = event.event;
 
     if (path && this.menuOpened) {
-      if (event.node.selected) {
-        pointerEvent.preventDefault();
+      if (event.node?.selected) {
+        pointerEvent?.preventDefault();
       } else {
         this.router.navigate([path]);
         this.scrollView.instance.scrollTo(0);
@@ -76,10 +77,10 @@ export class SideNavOuterToolbarComponent implements OnInit {
       if (this.hideMenuAfterNavigation) {
         this.temporaryMenuOpened = false;
         this.menuOpened = false;
-        pointerEvent.stopPropagation();
+        pointerEvent?.stopPropagation();
       }
     } else {
-      pointerEvent.preventDefault();
+      pointerEvent?.preventDefault();
     }
   }
 

package/src/add-layout/files/src/app/layouts/single-card/single-card.component.ts

@@ -8,12 +8,12 @@ import { DxScrollViewModule }  from 'devextreme-angular/ui/scroll-view';
   styleUrls: ['./single-card.component.scss']
 })
 export class SingleCardComponent {
-  @Input() 
-  title: string;
+  @Input()
+  title!: string;
 
   @Input()
-  description: string;
-  
+  description!: string;
+
   constructor() { }
 }
 

package/src/add-layout/files/src/app/not-authorized-container.ts

@@ -29,6 +29,7 @@ export class NotAuthorizedContainerComponent {
       case 'reset-password': return 'Reset Password';
       case 'create-account': return 'Sign Up';
       case 'change-password': return 'Change Password';
+      default: return '';
     }
   }
 
@@ -36,6 +37,7 @@ export class NotAuthorizedContainerComponent {
     const path = this.router.url.split('/')[1];
     switch (path) {
       case 'reset-password': return 'Please enter the email address that you used to register, and we will send you a link to reset your password via Email.';
+      default: return '';
     }
   }
 }

package/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.html

@@ -21,12 +21,14 @@
     </dxi-item>
 
     <ng-container *dxTemplate="let item of 'changePasswordTemplate'">
-      <span class="dx-button-text">
-        <ng-container *ngIf="loading; else notLoading">
-          <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
-        </ng-container>
-        <ng-template #notLoading>Continue</ng-template>
-      </span>
+      <div>
+        <span class="dx-button-text">
+          <ng-container *ngIf="loading; else notLoading">
+            <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+          </ng-container>
+          <ng-template #notLoading>Continue</ng-template>
+        </span>
+      </div>
     </ng-container>
 
   </dx-form>

package/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.ts

@@ -1,13 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component, NgModule, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
-import { DxCheckBoxModule } from 'devextreme-angular/ui/check-box';
+import { ValidationCallbackData } from 'devextreme/ui/validation_rules';
 import { DxFormModule } from 'devextreme-angular/ui/form';
 import { DxLoadIndicatorModule } from 'devextreme-angular/ui/load-indicator';
-import { DxTextBoxModule } from 'devextreme-angular/ui/text-box';
-import { DxValidationGroupModule } from 'devextreme-angular/ui/validation-group';
-import { DxValidatorModule } from 'devextreme-angular/ui/validator';
 import notify from 'devextreme/ui/notify';
 import { AuthService } from '../../services';
 
@@ -19,17 +15,17 @@ import { AuthService } from '../../services';
 export class ChangePasswordFormComponent implements OnInit {
   loading = false;
   formData: any = {};
-  recoveryCode: string;
+  recoveryCode: string = '';
 
   constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) { }
 
   ngOnInit() {
     this.route.paramMap.subscribe(params => {
-      this.recoveryCode = params.get('recoveryCode');
+      this.recoveryCode = params.get('recoveryCode') || '';
     });
   }
 
-  async onSubmit(e) {
+  async onSubmit(e: Event) {
     e.preventDefault();
     const { password } = this.formData;
     this.loading = true;
@@ -44,7 +40,7 @@ export class ChangePasswordFormComponent implements OnInit {
     }
   }
 
-  confirmPassword = (e: { value: string }) => {
+  confirmPassword = (e: ValidationCallbackData) => {
     return e.value === this.formData.password;
   }
 }
@@ -52,13 +48,8 @@ export class ChangePasswordFormComponent implements OnInit {
   imports: [
     CommonModule,
     RouterModule,
-    DxButtonModule,
-    DxCheckBoxModule,
-    DxTextBoxModule,
     DxFormModule,
-    DxValidatorModule,
-    DxLoadIndicatorModule,
-    DxValidationGroupModule
+    DxLoadIndicatorModule
   ],
   declarations: [ ChangePasswordFormComponent ],
   exports: [ ChangePasswordFormComponent ]

package/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.html

@@ -41,13 +41,15 @@
     </dxi-item>
 
     <ng-container *dxTemplate="let item of 'createAccountTemplate'">
-      <span class="dx-button-text">
-        <ng-container *ngIf="loading; else notLoading">
-          <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
-        </ng-container>
-
-        <ng-template #notLoading>Create a new account</ng-template>
-      </span>
+      <div>
+        <span class="dx-button-text">
+          <ng-container *ngIf="loading; else notLoading">
+            <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+          </ng-container>
+  
+          <ng-template #notLoading>Create a new account</ng-template>
+        </span>
+      </div>
     </ng-container>
 
   </dx-form>

package/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.ts

@@ -1,13 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
-import { DxCheckBoxModule } from 'devextreme-angular/ui/check-box';
+import { ValidationCallbackData } from 'devextreme/ui/validation_rules';
 import { DxFormModule } from 'devextreme-angular/ui/form';
 import { DxLoadIndicatorModule } from 'devextreme-angular/ui/load-indicator';
-import { DxTextBoxModule } from 'devextreme-angular/ui/text-box';
-import { DxValidationGroupModule } from 'devextreme-angular/ui/validation-group';
-import { DxValidatorModule } from 'devextreme-angular/ui/validator';
 import notify from 'devextreme/ui/notify';
 import { AuthService } from '../../services';
 
@@ -23,7 +19,7 @@ export class CreateAccountFormComponent {
 
   constructor(private authService: AuthService, private router: Router) { }
 
-  async onSubmit(e) {
+  async onSubmit(e: Event) {
     e.preventDefault();
     const { email, password } = this.formData;
     this.loading = true;
@@ -38,7 +34,7 @@ export class CreateAccountFormComponent {
     }
   }
 
-  confirmPassword = (e: { value: string }) => {
+  confirmPassword = (e: ValidationCallbackData) => {
     return e.value === this.formData.password;
   }
 }
@@ -46,13 +42,8 @@ export class CreateAccountFormComponent {
   imports: [
     CommonModule,
     RouterModule,
-    DxButtonModule,
-    DxCheckBoxModule,
-    DxTextBoxModule,
     DxFormModule,
-    DxValidatorModule,
-    DxLoadIndicatorModule,
-    DxValidationGroupModule
+    DxLoadIndicatorModule
   ],
   declarations: [ CreateAccountFormComponent ],
   exports: [ CreateAccountFormComponent ]