Merge branch 'master' into thristodorova/query-builder-fix-return-fields

Author: teodosiah

.vscode/settings.json

@@ -3,7 +3,13 @@
     "javascript.preferences.quoteStyle": "single",
     "typescript.preferences.quoteStyle": "single",
     "cSpell.words": [
+        "aria-describedby",
+        "aria-haspopup",
+        "aria-labelledby",
         "ghostclass",
+        "groupable",
+        "groupby",
+        "maxlength",
         "ungroup"
     ]
-}
+}

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^15.1.1",
+    "igniteui-theming": "^16.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -211,6 +211,11 @@
             "version": "19.1.0",
             "description": "Updates Ignite UI for Angular from v18.2.3 to v19.1.0",
             "factory": "./update-19_1_0"
+        },
+        "migration-43": {
+            "version": "19.1.1",
+            "description": "Updates Ignite UI for Angular from v19.1.0 to v19.1.1",
+            "factory": "./update-19_1_1"
         }
     }
 }

projects/igniteui-angular/migrations/migration-collection.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "../../common/schema/theme-changes.schema.json",
+    "changes": [
+      {
+        "name": "$progress-circle-color",
+        "replaceWith": "$fill-color-default",
+        "owner": "circular-theme",
+        "type": "property"
+      }
+    ]
+  }

projects/igniteui-angular/migrations/update-19_1_1/changes/theme-changes.json

@@ -0,0 +1,36 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '19.1.1';
+const themes = [
+    'circular-theme'
+];
+const testFilePath = '/testSrc/appPrefix/component/${theme}.component.scss';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-43';
+
+    themes.forEach(theme => {
+        it('should rename the progress circle color property of the circular progress', async () => {
+            appTree.create(
+                testFilePath,
+                `$custom-${theme}: ${theme}($progress-circle-color: red);`
+            );
+
+            const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `$custom-${theme}: ${theme}($fill-color-default: red);`
+            );
+        });
+    });
+});

projects/igniteui-angular/migrations/update-19_1_1/index.spec.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '19.1.1';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/migrations/update-19_1_1/index.ts

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^15.1.1",
+        "igniteui-theming": "^16.0.0",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
@@ -93,7 +93,7 @@
         }
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~19.0.1430"
+        "@igniteui/angular-schematics": "~19.1.14315"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json",

projects/igniteui-angular/package.json

@@ -49,6 +49,12 @@
             }
         }
 
+        @each $modifier in ('danger', 'warning', 'info', 'success') {
+            @include m($modifier) {
+                @extend %display-circular--#{$modifier} !optional;
+            }
+        }
+
         @include m(animation-none) {
             @extend %animation-none !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-component.scss

@@ -9,22 +9,30 @@
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $base-circle-color [null] - The base circle fill color.
-/// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.
+/// @param {Color | List<Color>} $fill-color-default [null] - The progress circle fill color.
+/// @param {Color} $fill-color-danger [null] - The track danger fill color.
+/// @param {Color} $fill-color-warning [null] - The track warning fill color.
+/// @param {Color} $fill-color-info [null] - The track info fill color.
+/// @param {Color} $fill-color-success [null] - The track success fill color.
 /// @param {Color} $text-color [null] - The value text color.
 /// @param {Number} $diameter [null] - The progress circle diameter.
 ///
 /// @requires $light-material-schema
 ///
 /// @example scss Change the circle progress color
 ///   $my-progress-circular-theme: progress-circular-theme(
-///     $progress-circle-color: purple
+///     $fill-color-default: purple
 ///   );
 ///   // Pass the theme to the igx-progress-circular component mixin
 ///   @include igx-progress-circular($my-progress-circle-theme);
 @function progress-circular-theme(
     $schema: $light-material-schema,
     $base-circle-color: null,
-    $progress-circle-color: null,
+    $fill-color-default: null,
+    $fill-color-danger: null,
+    $fill-color-warning: null,
+    $fill-color-info: null,
+    $fill-color-success: null,
     $text-color: null,
     $diameter: null
 ) {
@@ -40,24 +48,28 @@
     $theme: digest-schema($circular-bar-schema);
     $meta: map.get($theme, '_meta');
 
-    $progress-circle-color-start: map.get($theme, 'progress-circle-color');
-    $progress-circle-color-end: map.get($theme, 'progress-circle-color');
+    $fill-color-default-start: map.get($theme, 'fill-color-default');
+    $fill-color-default-end: map.get($theme, 'fill-color-default');
 
-    @if meta.type-of($progress-circle-color) == 'color' {
-        $progress-circle-color-start: $progress-circle-color;
-        $progress-circle-color-end: $progress-circle-color;
+    @if meta.type-of($fill-color-default) == 'color' {
+        $fill-color-default-start: $fill-color-default;
+        $fill-color-default-end: $fill-color-default;
     }
 
-    @if list.length($progress-circle-color) == 2 {
-        $progress-circle-color-start: list.nth($progress-circle-color, 1);
-        $progress-circle-color-end: list.nth($progress-circle-color, 2);
+    @if list.length($fill-color-default) == 2 {
+        $fill-color-default-start: list.nth($fill-color-default, 1);
+        $fill-color-default-end: list.nth($fill-color-default, 2);
     }
 
     @return extend($theme, (
         name: $name,
         base-circle-color: $base-circle-color,
-        progress-circle-color-start: $progress-circle-color-start,
-        progress-circle-color-end: $progress-circle-color-end,
+        fill-color-default-start: $fill-color-default-start,
+        fill-color-default-end: $fill-color-default-end,
+        fill-color-danger: $fill-color-danger,
+        fill-color-warning: $fill-color-warning,
+        fill-color-info: $fill-color-info,
+        fill-color-success: $fill-color-success,
         text-color: $text-color,
         diameter: $diameter,
         theme: map.get($schema, '_meta', 'theme'),
@@ -238,6 +250,14 @@
         }
     }
 
+    @each $mod in ('success','info','warning','danger') {
+        %display-circular--#{$mod} {
+            svg %outer {
+                stroke: var-get($theme, 'fill-color-#{$mod}');
+            }
+        }
+    }
+
     %outer--indeterminate {
         stroke-dasharray: 289;
         @include animation(igx-indeterminate-accordion var(--_transition-duration) cubic-bezier(0, .085, .68, .53) normal infinite);
@@ -292,11 +312,11 @@
     }
 
     %gradient-start {
-        stop-color: var-get($theme, 'progress-circle-color-start');
+        stop-color: var-get($theme, 'fill-color-default-start');
     }
 
     %gradient-end {
-        stop-color: var-get($theme, 'progress-circle-color-end');
+        stop-color: var-get($theme, 'fill-color-default-end');
     }
 
     @keyframes igx-indeterminate-accordion {