merge master

Author: Svetloslav15

gulpfile.js

@@ -255,4 +255,4 @@ const cleanupAngularDemosCrm = (cb) => {
 
 exports.repositoryfyAngularDemos = repositoryfyAngularDemos = gulp.series(cleanupAngularDemos, processDemosWithScss);
 exports.repositoryfyAngularDemosLob = repositoryfyAngularDemosLob = gulp.series(cleanupAngularDemosLob, processDemosLobWithScss);
-exports.repositoryfyAngularDemosCrm = repositoryfyAngularDemosCrm = gulp.series(cleanupAngularDemosCrm, processDemosCrmWithScss);
+exports.repositoryfyAngularDemosCrm = repositoryfyAngularDemosCrm = gulp.series(cleanupAngularDemosCrm, processDemosCrmWithScss);

package-lock.json

@@ -44,37 +44,37 @@
     "url": "git://github.com/IgniteUI/igniteui-angular-samples/repository.git"
   },
   "dependencies": {
-    "@angular/animations": "^15.0.0",
-    "@angular/cdk": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/localize": "^15.0.0",
-    "@angular/material": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/router": "^15.0.0",
+    "@angular/animations": "^15.0.2",
+    "@angular/cdk": "^15.0.1",
+    "@angular/common": "^15.0.2",
+    "@angular/compiler": "^15.0.2",
+    "@angular/core": "^15.0.2",
+    "@angular/forms": "^15.0.2",
+    "@angular/localize": "^15.0.2",
+    "@angular/material": "^15.0.1",
+    "@angular/platform-browser": "^15.0.2",
+    "@angular/platform-browser-dynamic": "^15.0.2",
+    "@angular/router": "^15.0.2",
     "@igniteui/material-icons-extended": "^2.10.0",
     "@microsoft/signalr": "^5.0.11",
     "@ng-bootstrap/ng-bootstrap": "^13.1.1",
     "@popperjs/core": "2.11.6",
     "@types/file-saver": "^2.0.2",
     "@types/hammerjs": "^2.0.39",
     "angular-in-memory-web-api": "0.9.0",
-    "bootstrap": "^5.2.1",
+    "bootstrap": "^5.2.3",
     "core-js": "2.6.2",
     "domino": "^2.1.4",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^15.0.0",
+    "igniteui-angular": "^15.0.2",
     "igniteui-angular-charts": "^14.0.0",
     "igniteui-angular-core": "^14.0.0",
     "igniteui-angular-i18n": "^14.2.0",
-    "igniteui-dockmanager": "^1.8.0",
+    "igniteui-dockmanager": "^1.11.3",
     "igniteui-live-editing": "^2.0.5",
     "igniteui-theming": "^1.1.4",
-    "igniteui-webcomponents": "^3.4.0",
+    "igniteui-webcomponents": "^4.0.0",
     "immediate": "^3.2.3",
     "intl": "^1.2.5",
     "minireset.css": "0.0.6",
@@ -85,23 +85,22 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.0",
-    "@angular-eslint/builder": "^15.0.0",
-    "@angular-eslint/eslint-plugin": "^15.0.0",
-    "@angular-eslint/eslint-plugin-template": "^15.0.0",
-    "@angular-eslint/schematics": "^15.0.0",
-    "@angular-eslint/template-parser": "^15.0.0",
-    "@angular/cli": "^15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
-    "@angular/language-service": "^15.0.0",
+    "@angular-devkit/build-angular": "^15.0.2",
+    "@angular-eslint/builder": "^15.1.0",
+    "@angular-eslint/eslint-plugin": "^15.1.0",
+    "@angular-eslint/eslint-plugin-template": "^15.1.0",
+    "@angular-eslint/schematics": "^15.1.0",
+    "@angular-eslint/template-parser": "^15.1.0",
+    "@angular/cli": "^15.0.2",
+    "@angular/compiler-cli": "^15.0.2",
+    "@angular/language-service": "^15.0.2",
     "@igniteui/angular-schematics": "15.0.1100",
     "@juggle/resize-observer": "^3.3.1",
     "@types/jasmine": "^3.10.2",
     "@types/jasminewd2": "^2.0.9",
     "@types/node": "^13.13.52",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
-    "codelyzer": "^6.0.2",
     "eslint": "^8.18.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsdoc": "39.3.3",
@@ -112,8 +111,6 @@
     "jasmine-core": "~4.2.0",
     "karma": "^6.4.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "sass-embedded": "^1.52.2",
@@ -122,4 +119,4 @@
     "typescript": "4.8.4",
     "webpack-bundle-analyzer": "^4.5.0"
   }
-}
+}

package.json

@@ -15,7 +15,7 @@
         integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 </head>
 
-<body class="ig-typography igx-scrollbar">
+<body class="ig-typography ig-scrollbar">
     <app-root></app-root>
 </body>
 

projects/app-crm/src/index.html

@@ -56,7 +56,7 @@ $custom-badge-theme: badge-theme(
     .selected {
         igx-badge {
             & {
-                @include badge($custom-badge-theme);
+                @include css-vars($custom-badge-theme);
             }
 
             position: absolute;

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss

@@ -1,6 +1,10 @@
 <div class="controls-wrapper">
     <div class="controls-holder">
         <div class="switches">
+            <div class="control-item" *ngIf="isThemeSwitchVisible">
+                <igx-switch class="theme-switch" [checked]="false" [(ngModel)]="theme"
+                    (change)="onChange('theme', $event)">Dark</igx-switch>
+            </div>
             <div class="control-item">
                 <igx-switch [checked]="true" (change)="onChange('grouped', $event)" color="blue"
                     cssClass="finjs-sample-switch">

projects/app-lob/src/app/grid-finjs/controllers.component.html

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import {
     IButtonGroupEventArgs, IChangeSwitchEventArgs, IgxButtonGroupComponent,
     IgxSliderComponent, IgxToastComponent, ISliderValueChangeEventArgs, VerticalAlignment }
@@ -23,6 +24,8 @@ export class ControllerComponent implements OnInit, OnDestroy {
     @Output() public playAction = new EventEmitter<{ action: string }>();
 
     public volume = 1000;
+    public theme = false;
+    public isThemeSwitchVisible = true;
     public frequency = 500;
     public controls = [
         {
@@ -51,6 +54,8 @@ export class ControllerComponent implements OnInit, OnDestroy {
     private frequencyChanged$: Observable<ISliderValueChangeEventArgs>;
     private frequencyChangedSubscription: Subscription;
 
+    constructor(private router: ActivatedRoute) {}
+
     public ngOnInit(): void {
         this.volumeChanged$ = this.volumeSlider.valueChange.pipe(debounce(() => timer(200)));
         this.volumeChangedSubscription = this.volumeChanged$.subscribe(x => this.volumeChanged.emit(this.volumeSlider.value as number));
@@ -60,6 +65,11 @@ export class ControllerComponent implements OnInit, OnDestroy {
             .subscribe(() => this.frequencyChanged.emit(this.intervalSlider.value as number));
 
         this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
+
+        // Hide theme switcher
+        if (this.router.snapshot.queryParamMap.get('theme-switch') === 'false') {
+            this.isThemeSwitchVisible = false;
+        }
     }
 
     public ngOnDestroy(): void {

projects/app-lob/src/app/grid-finjs/controllers.component.ts

@@ -79,7 +79,7 @@
 
 	.changePos2 {
 		.igx-grid__td-text {
-			--igx-success-l: 40%;
+			--ig-success-l: 40%;
 			border-inline-end: rem(4px) solid color(null, 'success', 500, .5);
 			padding-inline-end: rem(15px);
 		}

projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss

@@ -1,4 +1,4 @@
-<div class="main__wrapper igx-scrollbar">
+<div class="main__wrapper igx-scrollbar" [class.fin-dark-theme]="darkTheme">
     <app-finjs-controllers #controllers
         (switchChanged)="onSwitchChanged($event)"
         (volumeChanged)="onVolumeChanged($event)"

projects/app-lob/src/app/grid-finjs/main.component.html

@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular';
 import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
 import { Stock } from '../data/financialData';
@@ -22,12 +23,16 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
         closeOnOutsideClick: true
     };
 
+    @HostBinding('class.dark-theme')
+    public darkTheme = false;
+
     public properties = ['price', 'country'];
     public chartData: Stock[] = [];
     public volume = 1000;
     public frequency = 500;
     private _timer: ReturnType<typeof setInterval>;
 
+
     public onSwitchChanged(event: { action: string; value: boolean }): void {
         switch (event.action) {
             case 'toolbar': {
@@ -38,6 +43,10 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
                 this.finGrid.toggleGrouping();
                 break;
             }
+            case 'theme': {
+                this.darkTheme = event.value;
+                break;
+            }
             default: break;
         }
     }