Merge branch 'master' into didimmova/use-pad-function

Author: Konstantin Dinev

package-lock.json

@@ -120,7 +120,7 @@
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.16.1",
-    "igniteui-sassdoc-theme": "^2.0.1",
+    "igniteui-sassdoc-theme": "^2.0.2",
     "igniteui-webcomponents": "6.2.1",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",

package.json

@@ -241,6 +241,11 @@
             "version": "20.0.6",
             "description": "Updates Ignite UI for Angular from v20.0.2 to v20.0.6",
             "factory": "./update-20_0_6"
+        },
+        "migration-49": {
+            "version": "20.1.0",
+            "description": "Updates Ignite UI for Angular from v20.0.6 to v20.1.0",
+            "factory": "./update-20_1_0"
         }
     }
 }

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

@@ -0,0 +1,29 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+			{
+        "name": "$filtering-background-and",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      },
+      {
+        "name": "$filtering-background-and--focus",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      },
+      {
+        "name": "$filtering-background-or",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      },
+      {
+        "name": "$filtering-background-or--focus",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      }
+  ]
+}

projects/igniteui-angular/migrations/update-20_1_0/changes/theme-changes.json

@@ -0,0 +1,43 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '20.1.0';
+
+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-49';
+
+    it('should remove properties related to the advanced filtering from the grid theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-input-group-theme: grid-theme(
+                $filtering-row-background: #ccc,
+                $filtering-background-and: red,
+                $filtering-background-and--focus: blue,
+                $filtering-background-or: yellow,
+                $filtering-background-or--focus: green
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-input-group-theme: grid-theme(
+                $filtering-row-background: #ccc
+            );`
+        );
+    });
+});
+
+
+

projects/igniteui-angular/migrations/update-20_1_0/index.spec.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '20.1.0';
+
+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-20_1_0/index.ts

@@ -61,10 +61,10 @@
         $variant
     );
 
-    $button-transition: color $time ease-in-out,
-        background-color $time ease-in-out,
-        border-color $time ease-in-out,
-        box-shadow $time ease-in-out;
+    $button-transition: color var(--_init-transition, #{$time}) ease-in-out,
+        background-color var(--_init-transition, #{$time}) ease-in-out,
+        border-color var(--_init-transition, #{$time}) ease-in-out,
+        box-shadow var(--_init-transition, #{$time}) ease-in-out;
 
     $button-disabled-shadow: none;
 

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -73,8 +73,10 @@
         -webkit-tap-highlight-color: transparent;
         overflow: hidden;
         white-space: nowrap;
-        transition: box-shadow .2s ease-in, background .15s ease-out;
-        transition-delay: .05s;
+        transition:
+            box-shadow var(--_init-transition, .2s) ease-in,
+            background var(--_init-transition, .15s) ease-out;
+        transition-delay: var(--_init-transition, .05s);
         min-width: unset;
         min-height: unset;
         font-size: rem(24px, 24px);
@@ -95,7 +97,9 @@
         }
 
         @if $variant == 'fluent' {
-            transition: color .15s ease-out, background .15s ease-out;
+            transition:
+                color var(--_init-transition, .15s) ease-out,
+                background var(--_init-transition, .15s) ease-out;
 
             &::after {
                 position: absolute;
@@ -109,11 +113,18 @@
         }
 
         @if $variant == 'bootstrap' {
-            transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out;
+            transition:
+                box-shadow var(--_init-transition, .15s) ease-out,
+                color var(--_init-transition, .15s) ease-out,
+                background var(--_init-transition, .15s) ease-out;
         }
 
         @if $variant == 'indigo' {
-            transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out, border-color .15s ease-in-out;
+            transition:
+                color var(--_init-transition, .15s) ease-in-out,
+                box-shadow var(--_init-transition, .15s) ease-in-out,
+                background var(--_init-transition, .15s) ease-in-out,
+                border-color var(--_init-transition, .15s) ease-in-out;
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss

@@ -1,13 +1,28 @@
-import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute } from '@angular/core';
+import {
+    Directive,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    HostListener,
+    Input,
+    Output,
+    booleanAttribute,
+    inject,
+    afterRenderEffect,
+} from '@angular/core';
+import { PlatformUtil } from '../../core/utils';
 
 export const IgxBaseButtonType = {
     Flat: 'flat',
     Contained: 'contained',
     Outlined: 'outlined'
 } as const;
 
+
 @Directive()
 export abstract class IgxButtonBaseDirective {
+    private _platformUtil = inject(PlatformUtil);
+
     /**
      * Emitted when the button is clicked.
      */
@@ -79,7 +94,25 @@ export abstract class IgxButtonBaseDirective {
         return this.disabled || null;
     }
 
-    constructor(public element: ElementRef) { }
+    protected constructor(
+        public element: ElementRef,
+    ) {
+        // In browser, set via native API for immediate effect (no-op on server).
+        // In SSR there is no paint, so there’s no visual rendering or transitions to suppress.
+        // Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759
+        if (this._platformUtil.isBrowser) {
+            afterRenderEffect({
+                write: () => {
+                    this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+                },
+                read: () => {
+                    requestAnimationFrame(() => {
+                        this.element.nativeElement.style.removeProperty('--_init-transition');
+                    });
+                }
+            });
+        }
+    }
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/directives/button/button-base.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import {Directive, ElementRef, HostBinding, Input} from '@angular/core';
 import { IgxBaseButtonType, IgxButtonBaseDirective } from './button-base';
 
 /**
@@ -78,4 +78,10 @@ export class IgxIconButtonDirective extends IgxButtonBaseDirective {
     public get outlined(): boolean {
         return this._type === IgxBaseButtonType.Outlined;
     }
+
+    constructor(
+        public override element: ElementRef,
+    ) {
+        super(element);
+    }
 }