Merge branch '15.0.x' into skrastev/fix-12406-15.0.x

Author: ChronosSF

package-lock.json

@@ -114,7 +114,7 @@
     "hammer-simulator": "0.0.1",
     "ig-typedoc-theme": "^4.2.0",
     "igniteui-sassdoc-theme": "^1.1.4",
-    "igniteui-theming": "^1.1.4",
+    "igniteui-theming": "^1.2.0",
     "igniteui-webcomponents": "^4.0.0",
     "jasmine": "^4.5.0",
     "jasmine-core": "~4.5.0",

package.json

@@ -83,7 +83,7 @@
         "@angular/core": "^15.0.0",
         "@angular/animations": "^15.0.0",
         "@angular/forms": "^15.0.0",
-        "igniteui-theming": "^1.1.2"
+        "igniteui-theming": "^1.2.0"
     },
     "igxDevDependencies": {
         "@igniteui/angular-schematics": "~15.0.1100"

projects/igniteui-angular/package.json

@@ -986,12 +986,12 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         });
     }
 
-        /** @hidden @internal */
-        public ngDoCheck() {
-            if (this.data?.length && this.selection.length) {
-                this._value = this.createDisplayText(this.selection, []);
-            }
+    /** @hidden @internal */
+    public ngDoCheck() {
+        if (this.data?.length && this.selection.length && !this._value) {
+            this._value = this.createDisplayText(this.selection, []);
         }
+    }
 
     /** @hidden @internal */
     public ngOnDestroy() {

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -2243,6 +2243,29 @@ describe('igxCombo', () => {
             const expectedOutput = 'One';
             expect(input.nativeElement.value).toEqual(expectedOutput);
         }));
+        it('should display custom displayText on selection/deselection', () => {
+            combo.valueKey = 'key';
+            combo.displayKey = 'value';
+            combo.data = [
+                { key: 1, value: 'One' },
+                { key: 2, value: 'Two' },
+                { key: 3, value: 'Three' },
+            ];
+
+            spyOn(combo.selectionChanging, 'emit').and.callFake(
+                (event: IComboSelectionChangingEventArgs) => event.displayText = `Selected Count: ${event.newSelection.length}`);
+
+            combo.select([1]);
+            fixture.detectChanges();
+
+            expect(combo.selection).toEqual([1]);
+            expect(combo.value).toBe('Selected Count: 1');
+
+            combo.deselect([1]);
+
+            expect(combo.selection).toEqual([]);
+            expect(combo.value).toBe('Selected Count: 0');
+        });
     });
     describe('Grouping tests: ', () => {
         configureTestSuite();

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

@@ -258,9 +258,9 @@
     $button-icon-padding: 0;
 
     $button-padding-material: (
-        comfortable: rem(9px, 16px) rem(16px, 16px),
-        cosy: rem(6px, 16px) rem(16px, 16px),
-        compact: rem(3px, 16px) rem(16px, 16px)
+        comfortable: rem(7px, 16px) rem(16px, 16px),
+        cosy: rem(4px, 16px) rem(16px, 16px),
+        compact: rem(1px, 16px) rem(16px, 16px)
     );
 
     $outlined-button-padding-material: (

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

@@ -640,6 +640,8 @@
     igx-years-view,
     igx-month-picker,
     igx-months-view {
+        color: var-get($theme, 'content-text-color');
+
         %cal-body-display {
             @if $bootstrap-theme {
                 padding-bottom: 0;

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

@@ -65,7 +65,7 @@
 
     $theme: digest-schema($dock-manager-schema);
 
-    @return extend($theme, (name: $name), keywords($rest));
+    @return extend($theme, (name: $name, prefix: 'igc'), keywords($rest));
 }
 
 /// @param {Map} $theme - The theme used to style the component.

projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss

@@ -121,6 +121,8 @@
     );
 
     %igx-grid-toolbar {
+        position: absolute;
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -136,7 +138,6 @@
         background: var-get($theme, 'background-color');
         height: auto;
         min-height: map.get($grid-toolbar-height, 'comfortable');
-        position: relative;
         padding-block: 0;
         padding-inline: map.get($grid-toolbar-padding, 'comfortable');
 
@@ -164,15 +165,24 @@
                 }
             }
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'comfortable');
+        }
     }
 
+
     %igx-grid-toolbar--cosy {
         min-height: map.get($grid-toolbar-height, 'cosy');
         padding-inline: map.get($grid-toolbar-padding, 'cosy');
 
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'cosy');
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'cosy');
+        }
     }
 
     %igx-grid-toolbar--compact {
@@ -182,6 +192,10 @@
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'compact');
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'compact');
+        }
     }
 
     %igx-grid-toolbar__title {

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -77,7 +77,7 @@
     @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
-    $label-margin: rem(8px);
+    $label-margin: rem(6px);
 
     $variant: map.get($theme, variant);
     $bootstrap-theme: $variant == 'bootstrap';