devextreme-schematics 1.7.3 → 1.8.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-schematics",
-  "version": "1.7.3",
+  "version": "1.8.0-beta.0",
   "description": "DevExtreme schematics",
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -22,18 +22,18 @@
   ],
   "schematics": "./src/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "^16.2.10",
-    "@angular-devkit/schematics": "^16.2.10",
-    "@schematics/angular": "^16.2.10"
+    "@angular-devkit/core": "^17.2.1",
+    "@angular-devkit/schematics": "^17.2.1",
+    "@schematics/angular": "^17.2.1"
   },
   "devDependencies": {
     "@types/jasmine": "~3.10.18",
-    "@types/node": "ts4.9",
+    "@types/node": "ts5.2",
     "@types/semver": "^7.5.7",
     "jasmine": "^2.99.0",
     "rxjs": "^6.6.7",
     "tslint": "^5.20.1",
-    "typescript": "^4.9.3"
+    "typescript": "~5.2.1"
   },
-  "gitHead": "48c1b12ef9aef7f6b976971af76b7966a79f3883"
+  "gitHead": "afe86ffa75cfe3ee7b9b5a78af5adcb2e3bb28f3"
 }

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

@@ -39,11 +39,11 @@
     "dxversion": {
       "type": "string",
       "description": "The DevExtreme version",
-      "default": "24.1.4"
+      "default": "24.2.2-beta"
     },
     "globalNgCliVersion": {
       "type":"string",
-      "default": "^16.2.0"
+      "default": "^17.2.0"
     },
     "empty": {
       "type": "boolean",

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

@@ -8,13 +8,28 @@
           "inputFile": "<%= sourcePath %>/themes/metadata.base.json",
           "outputFile": "<%= sourcePath %>/themes/generated/theme.base.css"
         }
-      },      {
+      },
+      {
+        "command": "build-theme",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.base.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/theme.base.dark.css"
+        }
+      },
+      {
         "command": "build-theme",
         "options": {
           "inputFile": "<%= sourcePath %>/themes/metadata.additional.json",
           "outputFile": "<%= sourcePath %>/themes/generated/theme.additional.css"
         }
       },
+      {
+        "command": "build-theme",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.additional.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/theme.additional.dark.css"
+        }
+      },
       {
         "command": "export-theme-vars",
         "options": {
@@ -22,12 +37,26 @@
           "outputFile": "<%= sourcePath %>/themes/generated/variables.base.scss"
         }
       },
+      {
+        "command": "export-theme-vars",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.base.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/variables.base.dark.scss"
+        }
+      },
       {
         "command": "export-theme-vars",
         "options": {
           "inputFile": "<%= sourcePath %>/themes/metadata.additional.json",
           "outputFile": "<%= sourcePath %>/themes/generated/variables.additional.scss"
         }
+      },
+      {
+        "command": "export-theme-vars",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.additional.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/variables.additional.dark.scss"
+        }
       }
     ]
   }

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

@@ -1,6 +1,4 @@
 :host {
-  @import "../themes/generated/variables.base.scss";
-  background-color: darken($base-bg, 5.00);
   display: flex;
   height: 100%;
   width: 100%;

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

@@ -9,7 +9,8 @@ import { AuthService, ScreenService, AppInfoService } from './shared/services';
 })
 export class <%= strings.classify(name) %>Component  {
   @HostBinding('class') get getClass() {
-    return Object.keys(this.screen.sizes).filter(cl => this.screen.sizes[cl]).join(' ');
+    const sizeClassName = Object.keys(this.screen.sizes).filter(cl => this.screen.sizes[cl]).join(' ');
+    return `${sizeClassName} app` ;
   }
 
   constructor(private authService: AuthService, private screen: ScreenService, public appInfo: AppInfoService) { }

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

@@ -11,7 +11,7 @@
   <app-side-navigation-menu
     [compactMode]="!menuOpened"
     [selectedItem]="selectedRoute"
-    class="dx-swatch-additional"
+    [ngClass]="swatchClassName"
     *dxTemplate="let dataMenu of 'panel'"
     (selectedItemChanged)="navigationChanged($event)"
     (openMenu)="navigationClick()">

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

@@ -3,14 +3,8 @@
 }
 
 #navigation-header {
-  @import "../../../themes/generated/variables.additional.scss";
-  background-color: $base-accent;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
-  ::ng-deep .menu-button .dx-icon {
-    color: $base-text-color;
-  }
-
   :host-context(.screen-x-small) & {
     padding-left: 20px;
   }

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

@@ -1,13 +1,15 @@
 import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
-import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
-import { ScreenService } from '../../shared/services';
+import { Router, NavigationEnd } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
 import { DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { DxDrawerModule, DxDrawerTypes } from 'devextreme-angular/ui/drawer';
 import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
 import { DxToolbarModule, DxToolbarTypes } from 'devextreme-angular/ui/toolbar';
-import { CommonModule } from '@angular/common';
 
-import { Router, NavigationEnd } from '@angular/router';
+import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
+import { ScreenService } from '../../shared/services';
+import { ThemeService } from '../../shared/services/theme.service';
 
 @Component({
   selector: 'app-side-nav-inner-toolbar',
@@ -29,8 +31,13 @@ export class SideNavInnerToolbarComponent implements OnInit {
   menuRevealMode: DxDrawerTypes.RevealMode = 'expand';
   minMenuSize = 0;
   shaderEnabled = false;
+  swatchClassName = 'dx-swatch-additional';
 
-  constructor(private screen: ScreenService, private router: Router) { }
+  constructor(protected themeService: ThemeService, private screen: ScreenService, private router: Router) {
+    themeService.isDark.subscribe((isDark) => {
+      this.swatchClassName = 'dx-swatch-additional' + (isDark ? '-dark' : '');
+    })
+  }
 
   ngOnInit() {
     this.menuOpened = this.screen.sizes['screen-large'];

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

@@ -18,7 +18,7 @@
   <app-side-navigation-menu
     [compactMode]="!menuOpened"
     [selectedItem]="selectedRoute"
-    class="dx-swatch-additional"
+    [ngClass]="swatchClassName"
     *dxTemplate="let dataMenu of 'panel'"
     (selectedItemChanged)="navigationChanged($event)"
     (openMenu)="navigationClick()">

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

@@ -6,5 +6,5 @@
 }
 
 .layout-header {
-  z-index: 1501;
+  z-index: 1505;
 }

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

@@ -1,12 +1,13 @@
 import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
-import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
-import { ScreenService } from '../../shared/services';
+import { CommonModule } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
+
 import { DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { DxDrawerModule, DxDrawerTypes } from 'devextreme-angular/ui/drawer';
 import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
-import { CommonModule } from '@angular/common';
 
-import { Router, NavigationEnd } from '@angular/router';
+import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
+import { ScreenService, ThemeService } from '../../shared/services';
 
 @Component({
   selector: 'app-side-nav-outer-toolbar',
@@ -28,8 +29,13 @@ export class SideNavOuterToolbarComponent implements OnInit {
   menuRevealMode: DxDrawerTypes.RevealMode = 'expand';
   minMenuSize = 0;
   shaderEnabled = false;
+  swatchClassName = 'dx-swatch-additional';
 
-  constructor(private screen: ScreenService, private router: Router) { }
+  constructor(protected themeService: ThemeService, private screen: ScreenService, private router: Router) {
+    themeService.isDark.subscribe((isDark) => {
+      this.swatchClassName = 'dx-swatch-additional' + (isDark ? '-dark' : '');
+    })
+  }
 
   ngOnInit() {
     this.menuOpened = this.screen.sizes['screen-large'];

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

@@ -1,5 +1,3 @@
-@import "../../../themes/generated/variables.base.scss";
-
 :host {
   width: 100%;
   height: 100%;
@@ -26,14 +24,14 @@
       margin-bottom: 30px;
 
       .title {
-        color: $base-text-color;
+        color: var(--base-text-color);
         line-height: 28px;
         font-weight: 500;
         font-size: 24px;
       }
 
       .description {
-        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        color: var(--base-text-color-alpha-7);
         line-height: 18px;
       }
     }

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

@@ -1,19 +1,17 @@
-@import "../../../../themes/generated/variables.base.scss";
-
 .create-account-form {
   .policy-info {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
     font-size: 14px;
     font-style: normal;
 
     a {
-      color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+      color: var(--base-text-color-alpha-7);
     }
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }

package/src/add-layout/files/src/app/shared/components/footer/footer.component.scss

@@ -1,9 +1,12 @@
-@import "../../../../themes/generated/variables.base.scss";
-
 :host {
   display: block;
-  color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--base-text-color-alpha-7);
+  border-top: 1px solid var(--footer-border-color);
   padding-top: 20px;
   padding-bottom: 24px;
+  margin: 0 40px;
+
+  .screen-x-small & {
+    margin: 0 20px;
+  }
 }

package/src/add-layout/files/src/app/shared/components/header/header.component.html

@@ -17,24 +17,23 @@
       *ngIf="title"
       [text]="title">
     </dxi-item>
+    <dxi-item
+      location="after"
+    >
+      <ng-container *dxTemplate>
+        <theme-switcher></theme-switcher>
+      </ng-container>
+    </dxi-item>
     <dxi-item
       location="after"
       locateInMenu="auto"
       menuItemTemplate="menuItem">
       <div *dxTemplate="let data of 'item'">
-        <dx-button
-          class="user-button authorization"
-          width="210px"
-          height="100%"
-          stylingMode="text">
-          <div *dxTemplate="let data of 'content'">
-            <app-user-panel [user]="user" [menuItems]="userMenuItems" menuMode="context"></app-user-panel>
-          </div>
-        </dx-button>
+        <app-user-panel [menuItems]="userMenuItems"></app-user-panel>
       </div>
     </dxi-item>
     <div *dxTemplate="let data of 'menuItem'">
-      <app-user-panel [user]="user" [menuItems]="userMenuItems" menuMode="list"></app-user-panel>
+      <app-user-panel [menuItems]="userMenuItems" menuMode="list"></app-user-panel>
     </div>
   </dx-toolbar>
 </header>

package/src/add-layout/files/src/app/shared/components/header/header.component.scss

@@ -1,14 +1,11 @@
-@import "../../../../themes/generated/variables.base.scss";
-@import "../../../../dx-styles.scss";
-
 :host {
   flex: 0 0 auto;
   z-index: 1;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
 
-  ::ng-deep .dx-toolbar .dx-toolbar-item.menu-button>.dx-toolbar-item-content .dx-icon {
-    color: $base-accent;
-  }
+::ng-deep header {
+  background-color: var(--base-bg);
 }
 
 ::ng-deep .dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {
@@ -20,7 +17,7 @@
 }
 
 ::ng-deep .dx-toolbar .dx-toolbar-item.menu-button {
-  width: $side-panel-min-width;
+  width: var(--side-panel-min-width);
   text-align: center;
   padding: 0;
 }

package/src/add-layout/files/src/app/shared/components/header/header.component.ts

@@ -7,6 +7,7 @@ import { DxButtonModule } from 'devextreme-angular/ui/button';
 import { DxToolbarModule } from 'devextreme-angular/ui/toolbar';
 
 import { Router } from '@angular/router';
+import {ThemeSwitcherModule} from "../theme-switcher/theme-switcher.component";
 @Component({
   selector: 'app-header',
   templateUrl: 'header.component.html',
@@ -57,7 +58,8 @@ export class HeaderComponent implements OnInit {
     CommonModule,
     DxButtonModule,
     UserPanelModule,
-    DxToolbarModule
+    DxToolbarModule,
+    ThemeSwitcherModule,
   ],
   declarations: [ HeaderComponent ],
   exports: [ HeaderComponent ]

package/src/add-layout/files/src/app/shared/components/login-form/login-form.component.scss

@@ -1,6 +1,3 @@
-@import "../../../../themes/generated/variables.base.scss";
-
-
 .login-form {
   .link {
     text-align: center;
@@ -14,6 +11,6 @@
 
   ::ng-deep .form-text {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
   }
 }

package/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.scss

@@ -1,12 +1,10 @@
-@import "../../../../themes/generated/variables.base.scss";
-
 .reset-password-form {
   ::ng-deep .submit-button {
     margin-top: 10px;
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }

package/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.scss

@@ -1,19 +1,18 @@
-@import "../../../../dx-styles.scss";
-@import "../../../../themes/generated/variables.additional.scss";
-
-:host {
+:host.dx-swatch-additional,
+:host.dx-swatch-additional-dark {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
   width: 250px !important;
+  background-color: var(--base-bg);
 
-  .menu-container {
+  ::ng-deep .menu-container {
     min-height: 100%;
     display: flex;
     flex: 1;
 
-    ::ng-deep .dx-treeview {
+    .dx-treeview {
       // ## Long text positioning
       white-space: nowrap;
       // ##
@@ -21,15 +20,17 @@
       // ## Icon width customization
       .dx-treeview-item {
         padding-left: 0;
+        border-radius: 0;
         flex-direction: row-reverse;
 
         .dx-icon {
-          width: $side-panel-min-width !important;
+          width: var(--side-panel-min-width) !important;
           margin: 0 !important;
         }
       }
+
       // ##
-      
+
       // ## Arrow customization
       .dx-treeview-node {
         padding: 0 0 !important;
@@ -48,43 +49,16 @@
 
       // ## Item levels customization
       .dx-treeview-node {
-        &[aria-level='1'] {
+        &[aria-level="1"] {
           font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
         }
-  
-        &[aria-level='2'] .dx-treeview-item-content {
+
+        &[aria-level="2"] .dx-treeview-item-content {
           font-weight: normal;
-          padding: 0 $side-panel-min-width;
+          padding: 0 var(--side-panel-min-width);
         }
       }
       // ##
     }
-
-    // ## Selected & Focuced items customization
-    ::ng-deep .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused)> .dx-treeview-item {
-            background: transparent;
-          }
-
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
-          }
-
-          &:not(.dx-state-focused)>.dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4.00);
-          }
-        }
-      }
-    }
-
-    :host-context(.dx-theme-generic) ::ng-deep.dx-treeview {
-      .dx-treeview-node-container .dx-treeview-node.dx-state-selected.dx-state-focused > .dx-treeview-item * {
-        color: inherit;
-      }
-    }
-    // ##
   }
 }

package/src/add-layout/files/src/app/shared/components/theme-switcher/theme-switcher.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component, NgModule,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DxButtonModule } from 'devextreme-angular';
+import { ThemeService } from '../../services/theme.service';
+
+@Component({
+  selector: 'theme-switcher',
+  template: `
+    <dx-button
+      class="theme-button"
+      stylingMode="text"
+      [icon]="themeService.currentTheme === 'dark' ? 'sun' : 'moon'"
+      (onClick)="onButtonClick()"
+    ></dx-button>`,
+  styleUrls: [],
+  standalone: false
+})
+export class ThemeSwitcherComponent {
+  constructor(public themeService: ThemeService) {}
+
+  onButtonClick () {
+    this.themeService.switchTheme();
+  }
+}
+
+@NgModule({
+  imports: [CommonModule, DxButtonModule],
+  declarations: [ThemeSwitcherComponent],
+  exports: [ThemeSwitcherComponent],
+})
+export class ThemeSwitcherModule { }

package/src/add-layout/files/src/app/shared/components/user-panel/user-panel.component.html

@@ -1,25 +1,20 @@
 <div class="user-panel">
-  <div class="user-info">
-    <div class="image-container">
-      <div class="user-image"></div>
-    </div>
-    <div class="user-name">{{user?.email}}</div>
-  </div>
-  <dx-context-menu
-    *ngIf="menuMode === 'context'"
+  <dx-drop-down-button
+    *ngIf="menuMode !== 'list'"
+    stylingMode="text"
+    [icon]="'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'"
+    [showArrowIcon]="false"
     [items]="menuItems"
-    target=".user-button"
-    showEvent="dxclick"
-    width="210px"
-    [position]="{
-      my: 'top',
-      at: 'bottom'
-    }"
-    cssClass="user-menu">
-  </dx-context-menu>
+    displayExpr="text"
+    keyExpr="id"
+    [elementAttr]="{class: 'user-button'}"
+    [dropDownOptions]="{width: '150px'}">
+  </dx-drop-down-button>
   <dx-list
     *ngIf="menuMode === 'list'"
-    class="dx-toolbar-menu-action"
+    displayExpr="text"
+    keyExpr="id"
+    width="130"
     [items]="menuItems">
   </dx-list>
 </div>