Merge branch '13.1.x' into dkamburov/add-gitattributes

IgniteUI · Mar 21, 2022 · dc3f34a · dc3f34a
2 parents 2025062 + 74b697f
commit dc3f34a
Show file tree

Hide file tree

Showing 63 changed files with 1,183 additions and 462 deletions.
diff --git a/projects/igniteui-angular/src/lib/combo/combo.api.ts b/projects/igniteui-angular/src/lib/combo/combo.api.ts
@@ -41,7 +41,7 @@ export class IgxComboAPIService {
 
     public set_selected_item(itemID: any, event?: Event): void {
         const selected = this.combo.isItemSelected(itemID);
-        if (itemID === null || itemID === undefined) {
+        if (!itemID && itemID !== 0) {
             return;
         }
         if (!selected) {

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -28,7 +28,7 @@ import { IgxDropDownModule } from '../drop-down/public_api';
 import { IgxInputGroupModule } from '../input-group/input-group.component';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
-import { IgxComboFilteringPipe, IgxComboGroupingPipe } from './combo.pipes';
+import { IgxComboCleanPipe, IgxComboFilteringPipe, IgxComboGroupingPipe } from './combo.pipes';
 import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { IGX_COMBO_COMPONENT, IgxComboBaseDirective } from './combo.common';
 import { IgxComboAddItemComponent } from './combo-add-item.component';
@@ -448,6 +448,7 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         IgxComboDropDownComponent,
         IgxComboEmptyDirective,
         IgxComboFilteringPipe,
+        IgxComboCleanPipe,
         IgxComboFooterDirective,
         IgxComboGroupingPipe,
         IgxComboHeaderDirective,
@@ -464,6 +465,7 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         IgxComboDropDownComponent,
         IgxComboEmptyDirective,
         IgxComboFilteringPipe,
+        IgxComboCleanPipe,
         IgxComboFooterDirective,
         IgxComboGroupingPipe,
         IgxComboHeaderDirective,

diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
@@ -5,10 +5,17 @@ import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
 import { DefaultSortingStrategy, SortingDirection } from '../data-operations/sorting-strategy';
 import { IComboFilteringOptions } from './combo.component';
 
+/** @hidden */
+@Pipe({
+    name: 'comboClean'
+})
+export class IgxComboCleanPipe implements PipeTransform {
+    public transform(collection: any[]) {
+        return collection.filter(e => !!e);
+    }
+}
 
-/**
- * @hidden
- */
+/** @hidden */
 @Pipe({
     name: 'comboFiltering'
 })
@@ -23,8 +30,8 @@ export class IgxComboFilteringPipe implements PipeTransform {
         } else {
             const searchTerm = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
             if (displayKey != null) {
-                return collection.filter(e => filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm) :
-                    e[displayKey].toString().toLowerCase().includes(searchTerm));
+                return collection.filter(e => filteringOptions.caseSensitive ? e[displayKey]?.includes(searchTerm) :
+                    e[displayKey]?.toString().toLowerCase().includes(searchTerm));
             } else {
                 return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
                     e.toString().toLowerCase().includes(searchTerm));
@@ -33,9 +40,7 @@ export class IgxComboFilteringPipe implements PipeTransform {
     }
 }
 
-/**
- * @hidden
- */
+/** @hidden */
 @Pipe({ name: 'comboGrouping' })
 export class IgxComboGroupingPipe implements PipeTransform {
 

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -21,10 +21,11 @@
 /// @param {Color} $fill-color [null] - The checked border and fill colors.
 /// @param {Color} $tick-color [null] - The checked mark color.
 /// @param {Color} $disabled-color [null] - The disabled border and fill colors.
+/// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state.
 /// @param {Color} $disabled-color-label [null] - The disabled label color.
 /// @param {border-radius} $border-radius [null] - The border radius used for checkbox component.
 /// @param {border-radius} $border-radius-ripple [null] - The border radius used for checkbox ripple.
-/// @param {Color} $focus-outline-color [null] - TThe focus outlined color.
+/// @param {Color} $focus-outline-color [null] - The focus outlined color.
 /// Set to light when the surrounding area is dark.
 ///
 /// @requires $default-palette
@@ -46,6 +47,7 @@
     $fill-color: null,
     $tick-color: null,
     $disabled-color: null,
+    $disabled-indeterminate-color: null,
     $disabled-color-label: null,
     $border-radius-ripple: null,
     $focus-outline-color: null
@@ -77,6 +79,7 @@
         fill-color: $fill-color,
         tick-color: $tick-color,
         disabled-color: $disabled-color,
+        disabled-indeterminate-color: $disabled-indeterminate-color,
         disabled-color-label: $disabled-color-label,
         border-radius: $border-radius,
         border-radius-ripple: $border-radius-ripple,
@@ -103,7 +106,7 @@
     // If updating the WIDTH of the checkbox here, please update it in the grid theme as well.
     // It is under the name of $cbx-size
     $size: em(20px);
-    $size-bs: em(14px);
+    $size-bs: em(16px);
     $checkbox-radius: math.div($size, 2);
 
     $variant: map.get($theme, variant);
@@ -135,7 +138,7 @@
     $mark-stroke: map.get((
         material: 3,
         fluent: 1,
-        bootstrap: 2,
+        bootstrap: 3,
         indigo-design: 3,
     ), $variant);
 
@@ -229,31 +232,19 @@
         background: transparent;
 
         @if $bootstrap-theme {
-            %cbx-composite-mark {
-                stroke: var-get($theme, 'empty-color');
-            }
+            border-color: var-get($theme, 'disabled-color-label');
         }
     }
 
     %cbx-composite--x--disabled {
-        @if $bootstrap-theme {
-            background: transparent;
-        } @else {
-            background: var-get($theme, 'disabled-color');
-        }
+        background: var-get($theme, 'disabled-color');
 
         &::after {
-            @if $bootstrap-theme {
-                background: transparent;
-            } @else {
-                background: var-get($theme, 'disabled-color');
-            }
+            background: var-get($theme, 'disabled-color');
         }
 
         @if $bootstrap-theme {
-            %cbx-composite-mark--x {
-                stroke: var-get($theme, 'empty-color');
-            }
+            border-color: var-get($theme, 'disabled-color');
         }
     }
 
@@ -279,6 +270,16 @@
             top: $mark-offset;
             left: $mark-offset;
         }
+
+        @if $variant == 'material' {
+            %cbx-composite--x--disabled {
+                border: var-get($theme, 'disabled-indeterminate-color');
+
+                &::after {
+                    background: var-get($theme, 'disabled-indeterminate-color');
+                }
+            }
+        }
     }
 
     %cbx-composite-mark--x {

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -257,10 +257,6 @@
             @include e(textarea) {
                 @extend %form-group-textarea--cosy !optional;
             }
-
-            @include e(hint) {
-                @extend %form-group-hint--cosy !optional;
-            }
         }
 
         @include m(compact) {
@@ -285,10 +281,6 @@
             @include e(textarea) {
                 @extend %form-group-textarea--compact !optional;
             }
-
-            @include e(hint) {
-                @extend %form-group-hint--compact !optional;
-            }
         }
 
         @include m(box) {
@@ -614,6 +606,7 @@
             @include e(bundle) {
                 @extend %form-group-bundle--focus !optional;
 
+                &:focus-within,
                 &:hover {
                     @extend %form-group-bundle--fluent--focus !optional;
                 }
@@ -634,6 +627,7 @@
             @include e(bundle) {
                 @extend %form-group-bundle-success--fluent !optional;
 
+                &:focus-within,
                 &:hover {
                     @extend %form-group-bundle-success--fluent--hover !optional;
                 }
@@ -648,6 +642,7 @@
             @include e(bundle) {
                 @extend %form-group-bundle-error--fluent !optional;
 
+                &:focus-within,
                 &:hover {
                     @extend %form-group-bundle-error--fluent--hover !optional;
                 }
@@ -889,10 +884,6 @@
                 @extend %form-group-display--disabled-bootstrap !optional;
             }
 
-            @include e(label) {
-                @extend %bootstrap-label--disabled !optional;
-            }
-
             @include e(input) {
                 @extend %bootstrap-input--disabled !optional;
             }