Merge branch 'master' into mdragnev/zoneless-sticky-tooltip

viktorkombov · web-flow · commit dd7e690c5ebc · 2026-07-13T14:03:09.000+03:00
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -18,9 +18,6 @@ jobs:
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Update NPM
-        run: npm install -g npm@latest
-
       - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV
       - run: echo ${VERSION}
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "express": "^5.2.1",
     "fflate": "^0.8.1",
     "igniteui-i18n-core": "^1.0.2",
-    "igniteui-theming": "^27.3.0",
+    "igniteui-theming": "^27.4.0",
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21",
diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts
@@ -204,11 +204,10 @@ describe('Elements: ', () => {
                 </igc-column-layout>
             </igc-grid>`;
             testContainer.innerHTML = innerHtml;
+            const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
 
-            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+            await firstValueFrom(fromEvent(grid, "childrenResolved"));
 
-            const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
             const thirdGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Stock"]');
             const secondGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Details"]');
 
@@ -217,7 +216,7 @@ describe('Elements: ', () => {
             expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
 
             grid.removeChild(secondGroup);
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+            await firstValueFrom(fromEvent(grid, "childrenResolved"));
 
             expect(grid.columns.length).toEqual(4);
             expect(grid.getColumnByName('ProductID')).toBeTruthy();
@@ -229,7 +228,7 @@ describe('Elements: ', () => {
             newColumn.setAttribute('field', 'ProductName');
             newGroup.appendChild(newColumn);
             grid.insertBefore(newGroup, thirdGroup);
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+            await firstValueFrom(fromEvent(grid, "childrenResolved"));
 
             expect(grid.columns.length).toEqual(6);
             expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
diff --git a/projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss
@@ -39,17 +39,7 @@
         'indigo': rem(32px),
     ), $variant);
 
-    $item-mini-size: map.get((
-        'material': rem(56px),
-        'fluent': rem(40px),
-        'bootstrap': rem(88px),
-        'indigo': rem(48px),
-    ), $variant);
-
     %navdrawer-display {
-        --ig-nav-drawer-size: #{rem(240px)};
-        --ig-nav-drawer-size--mini: #{$item-mini-size};
-
         flex-basis: 0;
         transition: flex-basis;
         transition-duration: .3s;
@@ -58,11 +48,11 @@
     }
 
     %navdrawer-display-pinned {
-        flex-basis: var(--ig-nav-drawer-size);
+        flex-basis: var-get($theme, 'size');
     }
 
     %navdrawer-display-mini-pinned {
-        flex-basis: calc(var(--ig-mini-nav-drawer-size, #{$item-mini-size}) + rem(1px));
+        flex-basis: calc(#{var-get($theme, 'size--mini')} + #{rem(1px)});
     }
 
     %aside {
@@ -72,7 +62,7 @@
         overflow-x: hidden;
         background: var-get($theme, 'background');
         inset: 0 auto;
-        width: var(--ig-nav-drawer-size);
+        width: var-get($theme, 'size');
         inset-inline-start: 0;
         transition: width, padding, transform;
         transition-timing-function: $in-out-quad;
@@ -142,7 +132,7 @@
 
     %aside--mini {
         transition-duration: .3s;
-        width: var(--ig-nav-drawer-size--mini);
+        width: var-get($theme, 'size--mini');
         min-width: fit-content;
 
         %item {
@@ -168,7 +158,7 @@
 
     %aside--normal {
         transition-duration: .3s;
-        width: var(--ig-nav-drawer-size);
+        width: var-get($theme, 'size');
     }
 
     %overlay {
diff --git a/projects/igniteui-angular/core/src/core/styles/components/progress/circular/_circular-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/progress/circular/_circular-theme.scss
@@ -212,8 +212,8 @@
 
         animation: igx-initial-counter var(--_transition-duration) ease-in-out;
         counter-reset:
-            progress-integer var(--_progress-integer, 0)
-            progress-fraction var(--_progress-fraction, 0);
+            progress-integer round(down, var(--_progress-integer, 0), 1)
+            progress-fraction round(down, var(--_progress-fraction, 0), 1);
         transition:
             --_progress-integer var(--_transition-duration) ease-in-out,
             --_progress-fraction var(--_transition-duration) ease-in-out;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/progress/linear/_linear-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/progress/linear/_linear-theme.scss
@@ -227,8 +227,8 @@ $easing-curves: (
         color: var-get($theme, 'text-color');
         animation: initial-counter var(--_transition-duration) ease-in-out;
         counter-reset:
-            progress-integer var(--_progress-integer, 0)
-            progress-fraction var(--_progress-fraction, 0);
+            progress-integer round(down, var(--_progress-integer, 0), 1)
+            progress-fraction round(down, var(--_progress-fraction, 0), 1);
         transition:
             --_progress-integer var(--_transition-duration) ease-in-out,
             --_progress-fraction var(--_transition-duration) ease-in-out;
diff --git a/projects/igniteui-angular/core/src/core/styles/themes/_core.scss b/projects/igniteui-angular/core/src/core/styles/themes/_core.scss
@@ -118,13 +118,13 @@
     @include theming.spacing();
 
     @property --_progress-integer {
-        syntax: '<integer>';
+        syntax: '<number>';
         initial-value: 0;
         inherits: true;
     }
 
     @property --_progress-fraction {
-        syntax: '<integer>';
+        syntax: '<number>';
         initial-value: 0;
         inherits: true;
     }
diff --git a/projects/igniteui-angular/core/src/core/utils.ts b/projects/igniteui-angular/core/src/core/utils.ts
@@ -416,6 +416,7 @@ export const flatten = (arr: any[]) => {
 };
 
 export interface CancelableEventArgs {
+    /* csSuppress */
     /**
      * Provides the ability to cancel the event.
      */
diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.html b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.html
@@ -12,7 +12,7 @@
     [attr.popover]="pin ? null : 'manual'"
     class="igx-nav-drawer__overlay"
     [class.igx-nav-drawer__overlay--hidden]="!isOpen"
-    [class.igx-nav-drawer--disable-animation]="disableAnimation"
+    [class.igx-nav-drawer--disable-animation]="animationsDisabled"
     (click)="close()" #overlay>
 </div>
 <nav
@@ -23,7 +23,7 @@
     [class.igx-nav-drawer__aside--normal]="!miniTemplate || isOpen"
     [class.igx-nav-drawer__aside--pinned]="pin"
     [class.igx-nav-drawer__aside--right]="position === 'right'" #aside
-    [class.igx-nav-drawer--disable-animation]="disableAnimation">
+    [class.igx-nav-drawer--disable-animation]="animationsDisabled">
 
     <ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
 </nav>
diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, afterRenderEffect, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange, ViewChild, Renderer2, booleanAttribute, inject, signal, computed, ChangeDetectionStrategy } from '@angular/core';
+import { AfterContentInit, afterNextRender, afterRenderEffect, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange, ViewChild, Renderer2, booleanAttribute, inject, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 import { fromEvent, interval, Subscription } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 import { IgxNavigationService, IToggleView } from 'igniteui-angular/core';
@@ -188,9 +188,25 @@ export class IgxNavigationDrawerComponent implements
      * <igx-nav-drawer [disableAnimation]="true"></igx-nav-drawer>
      * ````
      */
-    @HostBinding('class.igx-nav-drawer--disable-animation')
     @Input({ transform: booleanAttribute }) public disableAnimation = false;
 
+    /**
+     * Suppresses transitions until the first render has painted, so the drawer
+     * settles into its resting (mini/expanded) size without an initial width
+     * animation when the aside is first shown as a top-layer popover.
+     */
+    private _animationsReady = signal(false);
+
+    /**
+     * Whether transitions are currently suppressed — either explicitly via
+     * `disableAnimation`, or implicitly until the first paint has settled.
+     * @hidden
+     */
+    @HostBinding('class.igx-nav-drawer--disable-animation')
+    public get animationsDisabled(): boolean {
+        return this.disableAnimation || !this._animationsReady();
+    }
+
     /**
      * Width of the drawer in its mini state.
      *
@@ -457,6 +473,14 @@ export class IgxNavigationDrawerComponent implements
             if (this._closingAnimation()) return;
             this.togglePopover(this._visibleOverlay());
         });
+
+        // Enable transitions only after the first paint. The initial popover show
+        // resolves the aside's width (e.g. to its mini size) as it enters the top
+        // layer; deferring past the first frame lets that settle instantly instead
+        // of animating from the fallback/expanded width.
+        afterNextRender(() => {
+            requestAnimationFrame(() => this._animationsReady.set(true));
+        });
     }
 
     /**
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
@@ -75,7 +75,7 @@
         "igniteui-trial-watermark": "^3.1.0",
         "jspdf": "^4.2.1",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^27.3.0",
+        "igniteui-theming": "^27.4.0",
         "igniteui-i18n-core": "^1.0.5",
         "@igniteui/material-icons-extended": "^3.1.0"
     },

Original file line number	Diff line number	Diff line change
`@@ -118,13 +118,13 @@`
`118`	`118`	`@include theming.spacing();`
`119`	`119`
`120`	`120`	`@property --_progress-integer {`
`121`		`- syntax: '<integer>';`
	`121`	`+ syntax: '<number>';`
`122`	`122`	`initial-value: 0;`
`123`	`123`	`inherits: true;`
`124`	`124`	`}`
`125`	`125`
`126`	`126`	`@property --_progress-fraction {`
`127`		`- syntax: '<integer>';`
	`127`	`+ syntax: '<number>';`
`128`	`128`	`initial-value: 0;`
`129`	`129`	`inherits: true;`
`130`	`130`	`}`