Merge branch 'mkirova/fix-default-row-height' of https://github.com/IgniteUI/igniteui-angular.git

Author: MKirova

package-lock.json

@@ -56,16 +56,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/platform-server": "^18.0.0",
-    "@angular/router": "^18.0.0",
-    "@angular/ssr": "^18.0.0",
+    "@angular/animations": "^18.0.1",
+    "@angular/common": "^18.0.1",
+    "@angular/compiler": "^18.0.1",
+    "@angular/core": "^18.0.1",
+    "@angular/forms": "^18.0.1",
+    "@angular/platform-browser": "^18.0.1",
+    "@angular/platform-browser-dynamic": "^18.0.1",
+    "@angular/platform-server": "^18.0.1",
+    "@angular/router": "^18.0.1",
+    "@angular/ssr": "^18.0.2",
     "@igniteui/material-icons-extended": "^3.0.0",
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
@@ -81,16 +81,16 @@
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.0",
-    "@angular-devkit/schematics": "^18.0.0",
-    "@angular-eslint/builder": "^18.0.0-alpha.1",
-    "@angular-eslint/eslint-plugin": "^18.0.0-alpha.1",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0-alpha.1",
-    "@angular-eslint/schematics": "^18.0.0-alpha.1",
-    "@angular-eslint/template-parser": "^18.0.0-alpha.1",
-    "@angular/cli": "^18.0.0",
-    "@angular/compiler-cli": "^18.0.0",
-    "@angular/language-service": "^18.0.0",
+    "@angular-devkit/build-angular": "^18.0.2",
+    "@angular-devkit/schematics": "^18.0.2",
+    "@angular-eslint/builder": "^18.0.1",
+    "@angular-eslint/eslint-plugin": "^18.0.1",
+    "@angular-eslint/eslint-plugin-template": "^18.0.1",
+    "@angular-eslint/schematics": "^18.0.1",
+    "@angular-eslint/template-parser": "^18.0.1",
+    "@angular/cli": "^18.0.2",
+    "@angular/compiler-cli": "^18.0.1",
+    "@angular/language-service": "^18.0.1",
     "@angularclass/hmr": "^3.0.0",
     "@types/estree": "^1.0.0",
     "@types/express": "^4.17.17",
@@ -142,4 +142,4 @@
     "typedoc-plugin-localization": "^3.0.4",
     "typescript": "5.4.5"
   }
-}
+}

package.json

@@ -139,6 +139,12 @@
             }
         }
 
+        @if not($icon-color) and $background {
+            @if meta.type-of($background) == 'color' {
+                $icon-color: text-contrast($background);
+            }
+        }
+
         @if not($icon-color-hover) and $hover-foreground {
             @if meta.type-of($hover-background) == 'color' {
                 $icon-color-hover: $hover-foreground;
@@ -577,7 +583,7 @@
         background: var-get($flat-theme, 'focus-visible-background');
         color: var-get($flat-theme, 'focus-visible-foreground');
         border-color: var-get($flat-theme, 'focus-visible-border-color');
-        
+
         igx-icon {
             color: var-get($flat-theme, 'icon-color');
         }
@@ -599,7 +605,7 @@
                 color: var-get($flat-theme, 'focus-foreground');
             }
         }
-        
+
         @if ($variant == 'bootstrap') {
             box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
         }
@@ -780,7 +786,7 @@
                 map.get($items-gap, 'cosy'),
                 $items-gap-indigo-comfortable
             );
-            
+
             &:active {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');

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

@@ -932,6 +932,8 @@
     %month-picker {
         @extend %parent-container;
 
+        display: flex;
+
         %years-view,
         %months-view {
             color: inherit;

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -113,15 +113,35 @@
             --item-hover-background: #{color($color: 'gray', $variant: 100)};
             --item-selected-background: #{color($color: 'gray', $variant: 100)};
             --item-text-color: #{color($color: 'gray', $variant: 700)};
+            --item-icon-color: #{color($color: 'gray', $variant: 700)};
             --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
+            --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
             --item-selected-text-color: #{if(
                 $variant == 'indigo-design',
                 contrast-color($color: 'surface'),
                 color($color: 'secondary', $variant: 500)
             )};
+            --item-selected-icon-color: #{if(
+                $variant == 'indigo-design',
+                contrast-color($color: 'surface'),
+                color($color: 'secondary', $variant: 500)
+            )};
+            --item-selected-hover-icon-color: #{if(
+                $variant == 'fluent',
+                color($color: 'secondary', $variant: 500),
+                contrast-color($color: 'gray', $variant: 50)
+            )};
             --item-border-color: transparent;
+            --item-hover-border-color: transparent;
+            --item-focused-border-color: #{if(
+                $variant == 'fluent',
+                color($color: 'gray', $variant: 700),
+                transparent
+            )};
             --item-selected-border-color: transparent;
+            --item-selected-hover-border-color: transparent;
             --item-disabled-border: transparent;
+            --disabled-selected-border-color: transparent;
         }
 
         @include tree(tree-theme(

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -102,6 +102,10 @@
         // WARN: This is a workaround around a bug in Safari.
         position: absolute;
         visibility: hidden;
+        // width/height/min-width to 0 needed for bug #14303
+        width: 0;
+        min-width: 0;
+        height: 0;
         top: 0;
         left: 0;
         margin: -1px;

projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { By, HammerModule } from '@angular/platform-browser';
@@ -1753,6 +1753,10 @@ describe('IgxSlider', () => {
             fakeDoc.documentElement.dir = 'rtl';
         });
 
+        afterEach(() => {
+            fakeDoc.documentElement.dir = 'ltr';
+        });
+
         it('should reflect on the right instead of the left css property of the slider handlers', () => {
             const fix = TestBed.createComponent(SliderRtlComponent);
             fix.detectChanges();
@@ -1809,6 +1813,40 @@ describe('IgxSlider', () => {
             fixture.detectChanges();
             expect(slider.value).toBe(formControl.value);
         });
+
+        it('Should respect the ngModelOptions updateOn: blur', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SliderTemplateFormComponent);
+            fixture.componentInstance.updateOn = 'blur';
+            fixture.componentInstance.value = 0;
+            fixture.detectChanges();
+
+            const slider = fixture.componentInstance.slider;
+
+            const thumbEl = fixture.debugElement.query(By.css(THUMB_TAG)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = thumbEl.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
+
+            thumbEl.dispatchEvent(new Event('focus'));
+            fixture.detectChanges();
+
+            (slider as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+            tick();
+
+            (slider as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            tick();
+
+            const activeThumb = fixture.debugElement.query(By.css(THUMB_TO_PRESSED_CLASS));
+            expect(activeThumb).not.toBeNull();
+            expect(fixture.componentInstance.value).not.toBeGreaterThan(0);
+
+            thumbEl.dispatchEvent(new Event('blur'));
+            fixture.detectChanges();
+            tick();
+
+            expect(fixture.componentInstance.value).toBeGreaterThan(0);
+        }));
     });
 
 
@@ -1984,7 +2022,7 @@ class RangeSliderWithCustomTemplateComponent {
 @Component({
     template: `
         <form #form="ngForm">
-            <igx-slider [(ngModel)]="value" name="amount"></igx-slider>
+            <igx-slider [(ngModel)]="value" name="amount" [ngModelOptions]="{ updateOn: updateOn}"></igx-slider>
         </form>
     `,
     standalone: true,
@@ -1993,6 +2031,8 @@ class RangeSliderWithCustomTemplateComponent {
 export class SliderTemplateFormComponent {
     @ViewChild(IgxSliderComponent, { read: IgxSliderComponent, static: true }) public slider: IgxSliderComponent;
 
+    @Input() public updateOn: 'change' | 'blur' | 'submit' = 'change';
+
     public value = 10;
 }
 

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -991,13 +991,13 @@ export class IgxSliderComponent implements
         this.setTickInterval();
         this.changeThumbFocusableState(this.disabled);
 
-        this.subscribeTo(this.thumbFrom, this.thumbChanged.bind(this));
-        this.subscribeTo(this.thumbTo, this.thumbChanged.bind(this));
+        this.subscribeToEvents(this.thumbFrom);
+        this.subscribeToEvents(this.thumbTo);
 
         this.thumbs.changes.pipe(takeUntil(this._destroyer$)).subscribe(change => {
             const thumbFrom = change.find((thumb: IgxSliderThumbComponent) => thumb.type === SliderHandle.FROM);
             this.positionHandler(thumbFrom, null, this.lowerValue);
-            this.subscribeTo(thumbFrom, this.thumbChanged.bind(this));
+            this.subscribeToEvents(thumbFrom);
             this.changeThumbFocusableState(this.disabled);
         });
 
@@ -1078,7 +1078,6 @@ export class IgxSliderComponent implements
         // Finally do positionHandlersAndUpdateTrack the DOM
         // based on data values
         this.positionHandlersAndUpdateTrack();
-        this._onTouchedCallback();
     }
 
     /**
@@ -1411,14 +1410,18 @@ export class IgxSliderComponent implements
         }
     }
 
-    private subscribeTo(thumb: IgxSliderThumbComponent, callback: (a: number, b: string) => void) {
+    private subscribeToEvents(thumb: IgxSliderThumbComponent) {
         if (!thumb) {
             return;
         }
 
         thumb.thumbValueChange
             .pipe(takeUntil(this.unsubscriber(thumb)))
-            .subscribe(value => callback(value, thumb.type));
+            .subscribe(value => this.thumbChanged(value, thumb.type));
+
+        thumb.thumbBlur
+            .pipe(takeUntil(this.unsubscriber(thumb)))
+            .subscribe(() => this._onTouchedCallback());
     }
 
     private unsubscriber(thumb: IgxSliderThumbComponent) {

projects/igniteui-angular/src/lib/slider/slider.component.ts

@@ -66,6 +66,9 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
     @Output()
     public thumbChange = new EventEmitter<any>();
 
+    @Output()
+    public thumbBlur = new EventEmitter<void>();
+
     @Output()
     public hoverChange = new EventEmitter<boolean>();
 
@@ -189,6 +192,7 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
         this.isActive = false;
         this.zIndex = 0;
         this.focused = false;
+        this.thumbBlur.emit();
     }
 
     @HostListener('focus')