Merge branch 'master' into master

Author: kdinev

CHANGELOG.md

@@ -3,6 +3,9 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 18.2.0
+### General
+- `IFilteringExpressionsTree`, `FilteringExpressionsTree`
+    - **Deprecation** The `find` and `findIndex` methods have been deprecated and will be removed in a future version. A `ExpressionsTreeUtil` class has been added which provides the same functionality.
 ### 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.
@@ -12,6 +15,29 @@ All notable changes for each version of this project will be documented in this
 - `IgxCarousel`
     - Added support for vertical alignment. Can be configured via the `vertical` property. Defaults to `false`.
     - Added support for showing/hiding the indicator controls (dots). Can be configured via the `indicators` property. Defaults to `true`.
+- `ColumnType`, `IgxColumn`
+    - The built-in editors for columns of type `date`, `dateTime` and `time` now use a default input format as per the `IgxGrid`'s `locale`. This is valid both for cell editors and the ones in the filtering UI for all modes - `quickFilter`, `excelStyle` and the Advanced filtering.
+    - In case the `pipeArgs.displayFormat` property of a date-time column is set and contains only numeric date-time parts or such that can be handled by the editors, the built-in editors input format is inferred from it.
+    - To configure the built-in editors, a new `editorOptions` property is added that allows to pass optional parameters. Accepts an `IColumnEditorOptions` object with the `dateTimeFormat` property, that is used as input format for the editors of
+    `date`, `dateTime` and `time` column data types:
+        ```ts
+            const editorOptions: IColumnEditorOptions = { Field?
+                dateTimeFormat: 'MM/dd/YYYY',
+            }
+        ```
+        ```html
+            <igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>
+        ```
+- `FieldType` (`IgxQueryBuilder`)
+    - Similar to the above, the fields now accept an `editorOptions` object of type `IFieldEditorOptions`. Its `dateTimeFormat` property is used as input format for the query editors of date-time fields.
+- `IgxDateTimeEditor`, `IgxDatePicker`, `IgxTimePicker`, `IgxDateRangePicker`
+    - In case the `inputFormat` property is not set, the input format is inferred from
+    `displayFormat` if set and if it contains only numeric date-time parts.
+- `IgxTimePicker`
+    - The input and display formats are now adjusted based on the locale. For instance, day period time part (AM/PM or a/p) would not be displayed for locales that do not require it.
+- `IgxDateTimeEditor`
+    - Added a new `defaultFormatType` property (`date` | `time` | `dateTime`) which configures the date-time parts
+    according to the target type that the editor mask includes. Defaults to `date`.
 
 ### Themes
 - `Palettes`

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -137,7 +137,7 @@
     ), $variant);
 
     $label-margin: map.get((
-        'material': rem(12px),
+        'material': rem(2px),
         'fluent': rem(8px),
         'bootstrap': rem(8px),
         'indigo': rem(8px),
@@ -191,6 +191,10 @@
         width: $size;
         height: $size;
 
+        @if $variant == 'material' {
+            padding: rem(20px);
+        }
+
         //ripple color
         --color: #{var-get($theme, 'empty-color')};
     }
@@ -298,7 +302,6 @@
         fill: none;
         opacity: 0;
         z-index: 1;
-        transition: opacity .1s $ease-out-quad;
 
         @if $variant == 'material' {
             inset-inline-start: -.5px;

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -349,7 +349,8 @@
 
     %igx-chip__item {
         display: grid;
-        grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
+        grid-auto-flow: column;
+        grid-auto-columns: auto;
         align-items: center;
         justify-content: center;
         text-align: center;
@@ -710,7 +711,6 @@
     %igx-chip__content {
         @include ellipsis();
 
-        grid-column: 2 / 3;
         max-width: $chip-max-width;
 
         &:empty {
@@ -853,6 +853,12 @@
                 }
             }
         }
+
+        %igx-chip__end {
+            &:has(%igx-chip__remove:only-child) {
+                display: none;
+            }
+        }
     }
 }
 

projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss

@@ -39,6 +39,7 @@
     }
 
     $theme: digest-schema($column-actions-schema);
+    $meta: map.get($theme, '_meta');
 
     @if not($title-color) and $background-color {
         $title-color: text-contrast($background-color);
@@ -48,7 +49,10 @@
         name: $name,
         elevations: $elevations,
         title-color: $title-color,
-        background-color: $background-color
+        background-color: $background-color,
+        _meta: map.merge(if($meta, $meta, ()), (
+            variant: map.get($schema, '_meta', 'theme'),
+        )),
     ));
 }
 
@@ -57,6 +61,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
     @include css-vars($theme);
+    $variant: map.get($theme, '_meta', 'variant');
 
     %column-actions-display {
         display: flex;
@@ -66,6 +71,27 @@
         width: 100%;
         flex: 1 1 auto;
         min-width: rem(180px);
+
+        @if $variant == 'material' {
+            %cbx-composite-wrapper {
+                padding: 0;
+            }
+
+            %cbx-label-pos--after {
+                margin-inline-start: rem(12px);
+            }
+
+            %cbx-label-pos--before {
+                margin-inline-end: rem(12px);
+            }
+
+            %cbx-label-pos--before,
+            %cbx-label-pos--after {
+                &:empty {
+                    margin: 0;
+                }
+            }
+        }
     }
 
     %column-actions-title {

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -100,7 +100,15 @@
     }
 
     %igx-combo__checkbox {
-        margin-inline-end: rem(8);
+        margin-inline-end: rem(8px);
+
+        @if $variant == 'material' {
+            margin-inline-end: rem(16px);
+
+            div {
+                padding: 0;
+            }
+        }
     }
 
     %igx-combo__drop-down {

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

@@ -678,7 +678,8 @@
             margin: rem(16px) 0;
 
             ~ igx-input-group,
-            ~ igx-date-picker {
+            ~ igx-date-picker,
+            ~ igx-time-picker {
                 margin-inline-start: rem(16px);
             }
         }

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

@@ -1068,6 +1068,27 @@
 
         %cbx-display {
             min-width: $cbx-size;
+
+            @if $variant == 'material' {
+                %cbx-composite-wrapper {
+                    padding: 0;
+                }
+    
+                %cbx-label-pos--after {
+                    margin-inline-start: rem(12px);
+                }
+    
+                %cbx-label-pos--before {
+                    margin-inline-end: rem(12px);
+                }
+    
+                %cbx-label-pos--before,
+                %cbx-label-pos--after {
+                    &:empty {
+                        margin: 0;
+                    }
+                }
+            }
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss

@@ -82,6 +82,12 @@
             }
         }
 
+        %cbx-composite-wrapper {
+            @if $variant == 'material' {
+                padding: 0;
+            }
+        }
+
         %form-group-input--box {
             transform: none;
         }

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -336,6 +336,27 @@
         igx-avatar {
             --ig-size: #{if($variant == 'indigo', 2, 1)};
         }
+
+        @if $variant == 'material' {
+            %cbx-composite-wrapper {
+                padding: 0;
+            }
+
+            %cbx-label-pos--after {
+                margin-inline-start: rem(12px);
+            }
+
+            %cbx-label-pos--before {
+                margin-inline-end: rem(12px);
+            }
+
+            %cbx-label-pos--before,
+            %cbx-label-pos--after {
+                &:empty {
+                    margin: 0;
+                }
+            }
+        }
     }
 
     %igx-list--empty {

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -215,9 +215,7 @@
             igc-icon {
                 --component-size: 2;
 
-                padding: rem(6px);
-                width: auto;
-                height: auto;
+                margin-inline: rem(6px);
             }
         }
     }