Merge branch 'master' into gedinakova/pdf-unicode-support

gedinakova · web-flow · commit e92799f55a92 · 2025-12-12T19:29:17.000+02:00
diff --git a/projects/igniteui-angular/calendar/src/calendar/day-digit.pipe.ts b/projects/igniteui-angular/calendar/src/calendar/day-digit.pipe.ts
@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { IFormattingViews } from "./calendar";
+
+@Pipe({
+    name: 'dayDigit',
+    standalone: true
+})
+export class DayDigitPipe implements PipeTransform {
+    public transform(value: string, formatViews: IFormattingViews): string {
+        if (!value) {
+            return '';
+        }
+
+        // strip non-numeric characters that might have been added by the locale formatter (e.g., "25日" -> "25").
+        if (formatViews.day) {
+            // Use regex to extract the numeric day value.
+            // This handles locales that include non-numeric characters (e.g. '25日' in zh-CN).
+            // match(/\d+/) is preferred over parseInt() as it robustly finds the digits regardless
+            // of their position (prefix/suffix) in the localized string.
+            const match = value.match(/\d+/);
+            return match ? match[0] : value;
+        }
+
+        return value;
+    }
+}
diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.html b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.html
@@ -81,7 +81,7 @@
                 (mouseEnter)="changePreviewRange(day.native)"
                 (mouseLeave)="clearPreviewRange()"
             >
-                {{ formattedDate(day.native) }}
+                {{ formattedDate(day.native) | dayDigit:formatViews }}
             </igx-day-item>
         }
     </div>
diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts
@@ -7,6 +7,7 @@ import { ScrollDirection } from "../calendar";
 import { KeyboardNavigationService } from '../calendar.services';
 import { CalendarDay } from 'igniteui-angular/core';
 import { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
+import { DayDigitPipe } from "igniteui-angular/calendar/src/calendar/day-digit.pipe";
 
 const TODAY = new Date(2024, 6, 12);
 
@@ -114,6 +115,37 @@ describe("Days View Component", () => {
         }
     });
 
+    it("should format date correctly for zh-CN locale programmatically vs template pipe", () => {
+        const fixture = TestBed.createComponent(InitDaysViewComponent);
+        const daysView = fixture.componentInstance.instance;
+        const pipe = new DayDigitPipe();
+        const date = new Date(2020, 10, 25); // Nov 25
+
+        // Initialize component
+        daysView.formatViews = { day: true, month: true, year: true };
+        fixture.detectChanges();
+
+        // Mock the formatter behavior
+        // Simulate a locale (like zh-CN) that adds a suffix to the day number.
+        // Cast to 'any' to overwrite the protected 'formatterDay' property used by formattedDate()
+        (daysView as any).formatterDay = {
+            format: () => '25日',
+        } as Intl.DateTimeFormat;
+
+        // 1. Verify Programmatic Access (formattedDate method)
+        // Should return the raw formatted string from the formatter (with suffix)
+        const programmaticResult = daysView.formattedDate(date);
+        expect(programmaticResult).toBe('25日', 'Programmatic API should return the full locale string (including suffix, in this case 日)');
+
+        // 2. Verify Pipe Logic
+        // The pipe takes the formatted string "25日" and strips non-digits to return "25"
+        const pipeResult = pipe.transform(programmaticResult, daysView.formatViews);
+        expect(pipeResult).toBe('25', 'Pipe should strip non-numeric characters from the input string');
+
+        // 3. Confirm the difference implies the pipe did its job
+        expect(programmaticResult).not.toEqual(pipeResult);
+    });
+
     describe("Keyboard navigation", () => {
         let fixture: ComponentFixture<InitDaysViewComponent>;
         let el: HTMLElement;
diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts
@@ -37,6 +37,7 @@ import {
 import { IgxCalendarBaseDirective } from '../calendar-base';
 import { IViewChangingEventArgs } from './days-view.interface';
 import { KeyboardNavigationService } from '../calendar.services';
+import { DayDigitPipe } from "../day-digit.pipe";
 
 let NEXT_ID = 0;
 
@@ -52,7 +53,7 @@ let NEXT_ID = 0;
     selector: 'igx-days-view',
     templateUrl: 'days-view.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [IgxDayItemComponent, TitleCasePipe]
+    imports: [IgxDayItemComponent, TitleCasePipe, DayDigitPipe]
 })
 export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements AfterContentChecked {
     protected el = inject(ElementRef);
diff --git a/projects/igniteui-angular/core/src/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/calendar/_calendar-theme.scss
@@ -2516,6 +2516,7 @@
             letter-spacing: sizable(var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-1-letter-spacing));
             text-transform: sizable(var(--ig-body-2-text-transform), var(--ig-body-2-text-transform), var(--ig-body-1-text-transform));
             margin: 0;
+            white-space: nowrap;
         }
     }
 
@@ -2528,6 +2529,7 @@
             letter-spacing: sizable(var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-1-letter-spacing));
             text-transform: sizable(var(--ig-body-2-text-transform), var(--ig-body-2-text-transform), var(--ig-body-1-text-transform));
             margin: 0;
+            white-space: nowrap;
         }
     }
 }
diff --git a/projects/igniteui-angular/core/src/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/slider/_slider-theme.scss
@@ -89,7 +89,6 @@
         // https://github.com/IgniteUI/igniteui-angular/issues/11597
         z-index: 0;
         height: $slider-height;
-        flex-grow: 1;
         align-items: center;
         transition: all .2s $out-quad;
         touch-action: pan-y pinch-zoom;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/tabs/_tabs-theme.scss
@@ -56,6 +56,7 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
+        text-align: initial;
     }
 
     %tabs-header {
@@ -322,7 +323,7 @@
                             var-get($theme, 'item-active-hover-background') 1px,
                             var-get($theme, 'item-active-hover-background') calc(100% - 1px),
                             var-get($theme, 'border-color') calc(100% - 1px)
-                    );								
+                    );
                 }
             }
         }
diff --git a/projects/igniteui-angular/directives/src/directives/button/button-base.ts b/projects/igniteui-angular/directives/src/directives/button/button-base.ts
@@ -9,8 +9,10 @@ import {
     booleanAttribute,
     inject,
     AfterViewInit,
+    OnDestroy
 } from '@angular/core';
 import { PlatformUtil } from 'igniteui-angular/core';
+import { animationFrameScheduler, Subscription } from 'rxjs';
 
 export const IgxBaseButtonType = {
     Flat: 'flat',
@@ -20,10 +22,11 @@ export const IgxBaseButtonType = {
 
 
 @Directive()
-export abstract class IgxButtonBaseDirective implements AfterViewInit{
+export abstract class IgxButtonBaseDirective implements AfterViewInit, OnDestroy {
     private _platformUtil = inject(PlatformUtil);
     public element = inject(ElementRef);
-        private _viewInit = false;
+    private _viewInit = false;
+    private _animationScheduler: Subscription;
 
     /**
      * Emitted when the button is clicked.
@@ -109,12 +112,16 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit{
         if (this._platformUtil.isBrowser && !this._viewInit) {
             this._viewInit = true;
 
-            requestAnimationFrame(() => {
+            this._animationScheduler = animationFrameScheduler.schedule(() => {
                 this.element.nativeElement.style.removeProperty('--_init-transition');
             });
         }
     }
 
+    public ngOnDestroy(): void {
+        this._animationScheduler.unsubscribe();
+    }
+
     /**
      * @hidden
      * @internal
diff --git a/projects/igniteui-angular/grids/core/src/columns/column.component.ts b/projects/igniteui-angular/grids/core/src/columns/column.component.ts
@@ -2672,13 +2672,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      * @internal
      */
-    public getConstrainedSizePx(newSize){
-        if (this.maxWidth && newSize > this.maxWidthPx) {
+    public getConstrainedSizePx(newSize) {
+        if (this.maxWidth && newSize >= this.maxWidthPx) {
             this.widthConstrained = true;
             return this.maxWidthPx;
-        } else if (this.minWidth && newSize < this.userSetMinWidthPx) {
+        } else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
             this.widthConstrained = true;
             return this.userSetMinWidthPx;
+        } else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
+            return this.grid.minColumnWidth;
         } else {
             this.widthConstrained = false;
             return newSize;
@@ -2701,11 +2703,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         } else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
             const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
-            this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
+            this._calcWidth = this.getConstrainedSizePx(parseFloat(currentCalcWidth));
         } else {
             let possibleColumnWidth = '';
             if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) {
-                possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx);
+                possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth();
             } else {
                 possibleColumnWidth = this.width;
             }
diff --git a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts
@@ -905,7 +905,7 @@ export interface GridType extends IGridDataBindable {
     refreshSearch(): void;
     getDefaultExpandState(record: any): boolean;
     trackColumnChanges(index: number, column: any): any;
-    getPossibleColumnWidth(baseWidth?: number, minColumnWidth?: number): string;
+    getPossibleColumnWidth(baseWidth?: number): string;
     resetHorizontalVirtualization(): void;
     hasVerticalScroll(): boolean;
     getVisibleContentHeight(): number;
diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
@@ -5573,7 +5573,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    public getPossibleColumnWidth(baseWidth: number = null, minColumnWidth: number = null) {
+    public getPossibleColumnWidth(baseWidth: number = null) {
         let computedWidth;
         if (baseWidth !== null) {
             computedWidth = baseWidth;
@@ -5620,13 +5620,12 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (!sumExistingWidths && !columnsToSize) {
             return '0px';
         }
-        computedWidth -= this.featureColumnsWidth();
 
-        const minColWidth = minColumnWidth || this.minColumnWidth;
+        computedWidth -= this.featureColumnsWidth();
 
         const columnWidth = !Number.isFinite(sumExistingWidths) ?
-            Math.max(computedWidth / columnsToSize, minColWidth) :
-            Math.max((computedWidth - sumExistingWidths) / columnsToSize, minColWidth);
+            computedWidth / columnsToSize :
+            (computedWidth - sumExistingWidths) / columnsToSize;
 
         return columnWidth + 'px';
     }
@@ -6736,49 +6735,28 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     protected _derivePossibleWidth() {
         if (!this.columnWidthSetByUser) {
-            this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
+            const possibleWidth = this.getPossibleColumnWidth();
+            if (possibleWidth === "0px") {
+                // all columns - hidden
+                this._columnWidth = possibleWidth;
+            } else if (this.width !== null) {
+                this._columnWidth = Math.max(parseFloat(possibleWidth), this.minColumnWidth) + 'px'
+            } else {
+                this._columnWidth =  this.minColumnWidth + 'px';
+            }
         }
         this._columns.forEach((column: IgxColumnComponent) => {
             if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
                 const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
             } else {
-                // D.K. March 29th, 2021 #9145 Consider min/max width when setting defaultWidth property
-                column.defaultWidth = this.getExtremumBasedColWidth(column);
+                column.defaultWidth = this._columnWidth;
                 column.resetCaches();
             }
         });
         this.resetCachedWidths();
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    protected getExtremumBasedColWidth(column: IgxColumnComponent): string {
-        let width = this._columnWidth;
-        if (width && typeof width !== 'string') {
-            width = String(width);
-        }
-        const minWidth = width.indexOf('%') === -1 ? column.userSetMinWidthPx : column.minWidthPercent;
-        const maxWidth = width.indexOf('%') === -1 ? column.maxWidthPx : column.maxWidthPercent;
-        if (column.hidden) {
-            return width;
-        }
-
-        if (minWidth > parseFloat(width)) {
-            width = String(column.minWidth);
-        } else if (maxWidth < parseFloat(width)) {
-            width = String(column.maxWidth);
-        }
-
-        // if no px or % are defined in maxWidth/minWidth consider it px
-        if (width.indexOf('%') === -1 && width.indexOf('px') === -1) {
-            width += 'px';
-        }
-        return width;
-    }
-
     protected resetNotifyChanges() {
         this._cdrRequestRepaint = false;
         this._cdrRequests = false;
@@ -7072,13 +7050,6 @@ export abstract class IgxGridBaseDirective implements GridType,
             this.cdr.detectChanges();
         }
 
-        // in case horizontal scrollbar has appeared recalc to size correctly.
-        if (hasHScroll !== this.hasHorizontalScroll()) {
-            this.isHorizontalScrollHidden = !this.hasHorizontalScroll();
-            this.cdr.detectChanges();
-            this.calculateGridHeight();
-            this.cdr.detectChanges();
-        }
         if (this.zone.isStable) {
             this.zone.run(() => {
                 this._applyWidthHostBinding();
@@ -7098,6 +7069,16 @@ export abstract class IgxGridBaseDirective implements GridType,
                 this._autoSizeColumnsNotify.next();
             });
         }
+
+        // in case horizontal scrollbar has appeared recalc to size correctly.
+        if (hasHScroll !== this.hasHorizontalScroll()) {
+            this.isHorizontalScrollHidden = !this.hasHorizontalScroll();
+            this.cdr.detectChanges();
+            this.calculateGridHeight();
+            this.cdr.detectChanges();
+        } else {
+            this.resetCaches(recalcFeatureWidth);
+        }
     }
 
     /**
diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts
@@ -2170,6 +2170,38 @@ describe('IgxGrid Component Tests #grid', () => {
                 // first column takes new min
                 expect(col1.calcPixelWidth).toBe(500);
             });
+
+            it('in columns with no width and min-widths should recalculate and re-apply constraints to all cols.', () => {
+                const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
+                // 3 cols
+                fix.componentInstance.initColumnsRows(5, 3);
+                fix.detectChanges();
+
+                const grid = fix.componentInstance.grid;
+                grid.columns[0].minWidth = "80px";
+                grid.columns[1].minWidth = "90px";
+                grid.columns[2].minWidth = "130px";
+
+                grid.width = "300px";
+                fix.detectChanges();
+
+                expect(grid.columns[0].calcWidth).toBe(80);
+                expect(grid.columns[1].calcWidth).toBe(90);
+                expect(grid.columns[2].calcWidth).toBe(130);
+
+                expect(grid.hasHorizontalScroll()).toBe(false);
+                expect(grid.isHorizontalScrollHidden).toBe(true);
+
+                grid.width = "290px";
+                fix.detectChanges();
+
+                expect(grid.columns[0].calcWidth).toBe(80);
+                expect(grid.columns[1].calcWidth).toBe(90);
+                expect(grid.columns[2].calcWidth).toBe(130);
+
+                expect(grid.hasHorizontalScroll()).toBe(true);
+                expect(grid.isHorizontalScrollHidden).toBe(false);
+            });
         });
 
 
diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html
@@ -14,6 +14,7 @@
                 [showWeekNumbers]="properties.showWeekNumbers"
                 [hasHeader]="!properties.hideHeader"
                 [formatOptions]="formatOptions"
+                [formatViews]="formatViews"
                 [disabledDates]="disabledDates"
                 [specialDates]="specialDates"
                 (selected)="onSelection($event)"
diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts

Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@`
`81`	`81`	`(mouseEnter)="changePreviewRange(day.native)"`
`82`	`82`	`(mouseLeave)="clearPreviewRange()"`
`83`	`83`	`>`
`84`		`- {{ formattedDate(day.native) }}`
	`84`	`+ {{ formattedDate(day.native) \| dayDigit:formatViews }}`
`85`	`85`	`</igx-day-item>`
`86`	`86`	`}`
`87`	`87`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -2516,6 +2516,7 @@`
`2516`	`2516`	`letter-spacing: sizable(var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-1-letter-spacing));`
`2517`	`2517`	`text-transform: sizable(var(--ig-body-2-text-transform), var(--ig-body-2-text-transform), var(--ig-body-1-text-transform));`
`2518`	`2518`	`margin: 0;`
	`2519`	`+ white-space: nowrap;`
`2519`	`2520`	`}`
`2520`	`2521`	`}`
`2521`	`2522`
`@@ -2528,6 +2529,7 @@`
`2528`	`2529`	`letter-spacing: sizable(var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-1-letter-spacing));`
`2529`	`2530`	`text-transform: sizable(var(--ig-body-2-text-transform), var(--ig-body-2-text-transform), var(--ig-body-1-text-transform));`
`2530`	`2531`	`margin: 0;`
	`2532`	`+ white-space: nowrap;`
`2531`	`2533`	`}`
`2532`	`2534`	`}`
`2533`	`2535`	`}`
Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,7 @@`
`56`	`56`	`display: flex;`
`57`	`57`	`flex-direction: column;`
`58`	`58`	`overflow: hidden;`
	`59`	`+ text-align: initial;`
`59`	`60`	`}`
`60`	`61`
`61`	`62`	`%tabs-header {`
`@@ -322,7 +323,7 @@`
`322`	`323`	`var-get($theme, 'item-active-hover-background') 1px,`
`323`	`324`	`var-get($theme, 'item-active-hover-background') calc(100% - 1px),`
`324`	`325`	`var-get($theme, 'border-color') calc(100% - 1px)`
`325`		`- );`
	`326`	`+ );`
`326`	`327`	`}`
`327`	`328`	`}`
`328`	`329`	`}`