Merge branch 'master' into ganastasov/refactor-14315-master

Author: kacheshmarova

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxSimpleCombo`
     - Introduced ability for Simple Combo to automatically select and retain valid input on "Tab" press enhancing user experience by streamlining data entry and reducing the need for manual selection improving form navigation.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - To streamline the sorting of columns with custom formats, a new `FormattedValuesSortingStrategy` has been introduced. This strategy simplifies the sorting process by allowing direct sorting based on formatted values, eliminating the need to extend the `DefaultSortingStrategy` or implement a custom `ISortingStrategy`. This enhancement improves the ease of handling sorting with custom column formatters.
 
 #### Scrollbar: New CSS variables
 

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^12.0.0",
+    "igniteui-theming": "^12.2.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^12.0.0",
+        "igniteui-theming": "^12.2.1",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -25,9 +25,16 @@
     class="igx-checkbox__composite-wrapper"
 >
     <span #label class="igx-checkbox__composite">
-        <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <path d="M4.1,12.7 9,17.6 20.3,6.3" />
-        </svg>
+        @if (theme === 'indigo') {
+            <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <rect width="18" height="4" x="2" y="9" rx="1.85"/>
+                <path d="M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z"/>
+            </svg>
+        } @else {
+            <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M4.1,12.7 9,17.6 20.3,6.3"/>
+            </svg>
+        }
     </span>
 
     <div class="igx-checkbox__ripple"></div>

projects/igniteui-angular/src/lib/checkbox/checkbox.component.html

@@ -20,6 +20,7 @@ import { IBaseEventArgs, mkenum } from '../core/utils';
 import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
 import { noop, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { IgxTheme, ThemeService } from '../services/theme/theme.service';
 
 export const LabelPosition = /*@__PURE__*/mkenum({
     BEFORE: 'before',
@@ -428,11 +429,20 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
      */
     private _required = false;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    protected theme: IgxTheme = 'material';
+
     constructor(
         protected cdr: ChangeDetectorRef,
         protected renderer: Renderer2,
+        protected themeService: ThemeService,
         @Optional() @Self() public ngControl: NgControl,
     ) {
+        this.theme = this.themeService?.globalTheme;
+
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }

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

@@ -36,7 +36,7 @@
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
     <div class="igx-combo__search">
-        <igx-input-group *ngIf="displaySearchInput" theme="material" >
+        <igx-input-group *ngIf="displaySearchInput">
             <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
                    [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
                    (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -98,7 +98,7 @@
         --size: #{rem(22px)};
         --_badge-size: var(--size);
 
-        display: flex;
+        display: inline-flex;
         justify-content: center;
         align-items: center;
         min-width: var(--_badge-size);
@@ -138,7 +138,7 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding: $badge-value-padding;
+        padding-inline: $badge-value-padding;
     }
 
     %igx-badge--success {

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -146,6 +146,11 @@
         flex-wrap: wrap;
         align-self: flex-end;
         gap: rem(8px);
+
+        > a {
+            display: inline-flex;
+            align-items: center;
+        }
     }
 }
 

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -146,6 +146,10 @@
             @extend %date-selected-special !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'active')) {
+            @extend %date-selected-special-active !optional;
+        }
+
         @include e(date, $mods: ('selected', 'range')) {
             @extend %date-selected-range !optional;
         }
@@ -219,10 +223,22 @@
             @extend %date-range-selected-special-last !optional;
         }
 
-        @include e(date, $mods: ('selected', 'special', 'first', 'last')) {
+        @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last')) {
             @extend %date-selected-special-first-last !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'current', 'first', 'last')) {
+            @extend %date-selected-special-current-first-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'first')) {
+            @extend %date-selected-special-current-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'last')) {
+            @extend %date-selected-special-current-first !optional;
+        }
+
         @include e(date, $mods: ('range', 'selected', 'active')) {
             @extend %date-range-selected-active !optional;
         }
@@ -299,6 +315,14 @@
             @extend %date-selected-current-active !optional;
         }
 
+        @include e(date, $mods: ('current', 'selected', 'special')) {
+            @extend %date-selected-current-special !optional;
+        }
+
+        @include e(date, $mods: ('current', 'selected', 'special', 'active')) {
+            @extend %date-selected-current-special-active !optional;
+        }
+
         @include e(date, 'special') {
             @extend %date-special !optional;
         }
@@ -307,16 +331,26 @@
             @extend %date-special-current !optional;
         }
 
+        @include e(date, $mods: ('special', 'current', 'selected')) {
+            @extend %date-special-current-selected !optional;
+        }
+
+        @include e(date, $mods: ('special', 'current', 'selected', 'active')) {
+            @extend %date-special-current-selected-active !optional;
+        }
+
         @include e(date, $mods: ('special' 'active')) {
             @extend %date-special-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active', 'range')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, 'first') {