Merge branch 'master' into dpetev/tree-grid-no-data

ddincheva · web-flow · commit f153fcde4252 · 2022-11-08T16:50:48.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "hammer-simulator": "0.0.1",
     "ig-typedoc-theme": "^4.1.0",
     "igniteui-sassdoc-theme": "^1.1.4",
-    "igniteui-theming": "^1.0.0-release",
+    "igniteui-theming": "^1.0.2",
     "igniteui-webcomponents": "^3.3.0",
     "jasmine": "^4.4.0",
     "jasmine-core": "~4.4.0",
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss b/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss
@@ -6,7 +6,7 @@
 
 /// The global component registry map.
 /// @type List
-$components: () !default;
+$components: (palette: 'palette', elevations: 'elevations') !default;
 
 /// Stores a list of dropped component themes.
 $dropped-themes: () !default;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
@@ -81,7 +81,6 @@
         align-items: center;
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background-color');
-        grid-row: 7;
         font-size: rem(12px);
         border-top: rem(1px) solid var-get($theme, 'border-color');
         z-index: 1;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss
@@ -10,7 +10,7 @@
 ////
 
 @mixin component {
-    @include b(igx-scrollbar) {
+    @include b(ig-scrollbar) {
         // Register the component in the component registry
         $this: bem--selector-to-string(&);
         @include register-component(
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
@@ -28,8 +28,8 @@
     $thumb-background: null,
     $track-background: null,
 ) {
-    $name: 'igx-scrollbar';
-    $selector: '.igx-scrollbar';
+    $name: 'ig-scrollbar';
+    $selector: '.ig-scrollbar';
     $scrollbar-schema: ();
 
     @if map.has-key($schema, $name) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -31,8 +31,14 @@
     $excluded: ();
     $scope: if(is-root(), ':root', '&');
 
-    @include palette($palette);
-    @include elevations($elevations);
+
+    @if not(list.index($exclude, 'palette')) {
+        @include palette($palette);
+    }
+
+    @if not(list.index($exclude, 'elevations')) {
+        @include elevations($elevations);
+    }
 
     @if $elevation == false {
         #{$scope} {
@@ -362,7 +368,7 @@
         ));
     }
 
-    @if is-used('igx-scrollbar', $exclude) {
+    @if is-used('ig-scrollbar', $exclude) {
         @include scrollbar(scrollbar-theme(
             $schema: $schema
         ));
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
@@ -118,7 +118,7 @@
 /// @property {Map} igx-radio [$dark-radio]
 /// @property {Map} igx-ripple [$dark-ripple]
 /// @property {Map} igx-query-builder [$dark-query-builder]
-/// @property {Map} igx-scrollbar [$dark-scrollbar]
+/// @property {Map} ig-scrollbar [$dark-scrollbar]
 /// @property {Map} shape-chart [$dark-shape-chart]
 /// @property {Map} igx-slider [$dark-slider]
 /// @property {Map} igx-snackbar [$dark-snackbar]
@@ -181,7 +181,7 @@ $dark-schema: (
     igx-radio: $dark-radio,
     igx-ripple: $dark-ripple,
     igx-query-builder: $dark-query-builder,
-    igx-scrollbar: $dark-scrollbar,
+    ig-scrollbar: $dark-scrollbar,
     shape-chart: $dark-shape-chart,
     igx-slider: $dark-slider,
     igx-snackbar: $dark-snackbar,
@@ -254,7 +254,7 @@ $dark-material-schema: $dark-schema;
 /// @property {Map} igx-radio [$dark-fluent-radio],
 /// @property {Map} igx-ripple [$dark-fluent-ripple],
 /// @property {Map} igx-query-builder [$dark-fluent-query-builder],
-/// @property {Map} igx-scrollbar [$dark-fluent-scrollbar],
+/// @property {Map} ig-scrollbar [$dark-fluent-scrollbar],
 /// @property {Map} shape-chart [$dark-fluent-shape-chart],
 /// @property {Map} igx-slider [$dark-fluent-slider],
 /// @property {Map} igx-snackbar [$dark-fluent-snackbar],
@@ -317,7 +317,7 @@ $dark-fluent-schema: (
     igx-radio: $dark-fluent-radio,
     igx-ripple: $dark-fluent-ripple,
     igx-query-builder: $dark-fluent-query-builder,
-    igx-scrollbar: $dark-fluent-scrollbar,
+    ig-scrollbar: $dark-fluent-scrollbar,
     shape-chart: $dark-fluent-shape-chart,
     igx-slider: $dark-fluent-slider,
     igx-snackbar: $dark-fluent-snackbar,
@@ -385,7 +385,7 @@ $dark-fluent-schema: (
 /// @property {Map} igx-radio [$dark-bootstrap-radio],
 /// @property {Map} igx-ripple [$dark-bootstrap-ripple],
 /// @property {Map} igx-query-builder [$dark-bootstrap-query-builder],
-/// @property {Map} igx-scrollbar [$dark-bootstrap-scrollbar],
+/// @property {Map} ig-scrollbar [$dark-bootstrap-scrollbar],
 /// @property {Map} shape-chart [$dark-bootstrap-shape-chart],
 /// @property {Map} igx-slider [$dark-bootstrap-slider],
 /// @property {Map} igx-snackbar [$dark-bootstrap-snackbar],
@@ -448,7 +448,7 @@ $dark-bootstrap-schema: (
     igx-radio: $dark-bootstrap-radio,
     igx-ripple: $dark-bootstrap-ripple,
     igx-query-builder: $dark-bootstrap-query-builder,
-    igx-scrollbar: $dark-bootstrap-scrollbar,
+    ig-scrollbar: $dark-bootstrap-scrollbar,
     shape-chart: $dark-bootstrap-shape-chart,
     igx-slider: $dark-bootstrap-slider,
     igx-snackbar: $dark-bootstrap-snackbar,
@@ -516,7 +516,7 @@ $dark-bootstrap-schema: (
 /// @property {Map} igx-radio [$dark-indigo-radio]
 /// @property {Map} igx-ripple [$dark-indigo-ripple]
 /// @property {Map} igx-query-builder [$dark-indigo-query-builder]
-/// @property {Map} igx-scrollbar [$dark-indigo-scrollbar]
+/// @property {Map} ig-scrollbar [$dark-indigo-scrollbar]
 /// @property {Map} shape-chart [$dark-indigo-shape-chart]
 /// @property {Map} igx-slider [$dark-indigo-slider]
 /// @property {Map} igx-snackbar [$dark-indigo-snackbar]
@@ -579,7 +579,7 @@ $dark-indigo-schema: (
     igx-radio: $dark-indigo-radio,
     igx-ripple: $dark-indigo-ripple,
     igx-query-builder: $dark-indigo-query-builder,
-    igx-scrollbar: $dark-indigo-scrollbar,
+    ig-scrollbar: $dark-indigo-scrollbar,
     shape-chart: $dark-indigo-shape-chart,
     igx-slider: $dark-indigo-slider,
     igx-snackbar: $dark-indigo-snackbar,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
@@ -118,7 +118,7 @@
 /// @property {Map} igx-query-builder [$light-query-builder]
 /// @property {Map} igx-radio [$light-radio]
 /// @property {Map} igx-ripple [$light-ripple]
-/// @property {Map} igx-scrollbar [$light-scrollbar]
+/// @property {Map} ig-scrollbar [$light-scrollbar]
 /// @property {Map} shape-chart [$light-shape-chart]
 /// @property {Map} igx-slider [$light-slider]
 /// @property {Map} igx-snackbar [$light-snackbar]
@@ -182,7 +182,7 @@ $light-schema: (
     igx-radio: $light-radio,
     igx-ripple: $light-ripple,
     shape-chart: $light-shape-chart,
-    igx-scrollbar: $light-scrollbar,
+    ig-scrollbar: $light-scrollbar,
     igx-slider: $light-slider,
     igx-snackbar: $light-snackbar,
     sparkline: $light-sparkline,
@@ -256,7 +256,7 @@ $light-fluent-schema: (
     igx-ripple: $fluent-ripple,
     shape-chart: $fluent-shape-chart,
     igx-query-builder: $fluent-query-builder,
-    igx-scrollbar: $fluent-scrollbar,
+    ig-scrollbar: $fluent-scrollbar,
     igx-slider: $fluent-slider,
     igx-snackbar: $fluent-snackbar,
     sparkline: $fluent-sparkline,
@@ -325,7 +325,7 @@ $light-bootstrap-schema: (
     igx-ripple: $bootstrap-ripple,
     igx-query-builder: $bootstrap-query-builder,
     shape-chart: $bootstrap-shape-chart,
-    igx-scrollbar: $bootstrap-scrollbar,
+    ig-scrollbar: $bootstrap-scrollbar,
     igx-slider: $bootstrap-slider,
     igx-snackbar: $bootstrap-snackbar,
     sparkline: $bootstrap-sparkline,
@@ -394,7 +394,7 @@ $light-indigo-schema: (
     shape-chart: $indigo-shape-chart,
     igx-ripple: $indigo-ripple,
     igx-query-builder: $indigo-query-builder,
-    igx-scrollbar: $indigo-scrollbar,
+    ig-scrollbar: $indigo-scrollbar,
     igx-slider: $indigo-slider,
     igx-snackbar: $indigo-snackbar,
     sparkline: $indigo-sparkline,
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
@@ -4,6 +4,7 @@
 ////
 
 @use 'sass:map';
+@use 'sass:list';
 @use 'material';
 @use 'bootstrap';
 @use 'fluent';
@@ -19,7 +20,12 @@
 /// @access public
 /// @param {String} $font-family [$material-typeface] - The font family to be used across all typographic elements.
 /// @param {Map} $type-scale [$material-type-scale] - A type scale map as produced by type-scale.
-@mixin typography($font-family: presets.$material-typeface, $type-scale: presets.$material-type-scale) {
+/// @param {Map} $exclude [null] - A list of typography styles to be excluded.
+@mixin typography(
+    $font-family: presets.$material-typeface,
+    $type-scale: presets.$material-type-scale,
+    $exclude: null
+) {
     $variant: map.get(map.get($type-scale, '_meta'), 'variant');
 
     @if is-root() {
@@ -28,7 +34,9 @@
             font-size: theming.$browser-context;
             line-height: theming.rem(27px);
 
-            @include charts.typography($type-scale);
+            @if not(list.index($exclude, 'charts')) {
+                @include charts.typography($type-scale);
+            }
 
             @if ($variant == 'material' or $variant == null) {
                 @include material.typography();
@@ -48,5 +56,7 @@
         }
     }
 
-    @include theming.typography($font-family, $type-scale);
+    @if not(list.index($exclude, 'global')) {
+        @include theming.typography($font-family, $type-scale);
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts
@@ -895,6 +895,21 @@ describe('IgxSimpleCombo', () => {
             expect(combo.selection.length).toEqual(0);
         });
 
+        it('should not clear selection on tab/blur after filtering and selecting a value', () => {
+            UIInteractions.simulateTyping('con', input);
+            expect(combo.comboInput.value).toEqual('con');
+            fixture.detectChanges();
+
+            UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+            expect(combo.selection.length).toEqual(1);
+            expect(combo.value).toEqual('Wisconsin');
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            fixture.detectChanges();
+            expect(combo.selection.length).toEqual(1);
+            expect(combo.value).toEqual('Wisconsin');
+        });
+
         it('should display the AddItem button when allowCustomValues is true and there is a partial match', fakeAsync(() => {
             fixture.componentInstance.allowCustomValues = true;
             fixture.detectChanges();
@@ -1118,7 +1133,7 @@ describe('IgxSimpleCombo', () => {
 
             item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
             fixture.detectChanges();
-            expect(combo.value).toBe(null);
+            expect(combo.value).toBe('');
 
             combo.open();
             fixture.detectChanges();
@@ -1145,7 +1160,7 @@ describe('IgxSimpleCombo', () => {
 
             item5.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
             fixture.detectChanges();
-            expect(combo.value).toBe(undefined);
+            expect(combo.value).toBe('');
         });
 
         it('should select falsy values except "undefined"', () => {
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts
@@ -439,7 +439,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             argsSelection = Array.isArray(argsSelection) ? argsSelection : [argsSelection];
             this.selectionService.select_items(this.id, argsSelection, true);
             if (this._updateInput) {
-                this.comboInput.value = this._internalFilter = this._value = displayText !== args.displayText
+                this.comboInput.value = this._internalFilter = this._value = this.searchValue = displayText !== args.displayText
                     ? args.displayText
                     : this.createDisplayText(argsSelection, [args.oldSelection]);
             }
@@ -457,7 +457,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
 
         if (this.displayKey !== null && this.displayKey !== undefined
             && newSelection.length > 0) {
-            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0];
+            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0]?.toString() || '';
         }
 
         return newSelection[0]?.toString() || '';
diff --git a/src/index.html b/src/index.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"></head>
-<body class="ig-typography igx-scrollbar default-theme">
+<body class="ig-typography ig-scrollbar">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -1,9 +1,9 @@
 @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *;
 
-$palette: $light-bootstrap-palette;
-$schema: $light-bootstrap-schema;
-$typeface: $bootstrap-typeface;
-$type-scale: $bootstrap-type-scale;
+$palette: $light-material-palette;
+$schema: $light-material-schema;
+$typeface: $material-typeface;
+$type-scale: $material-type-scale;
 
 $background-color: contrast-color($palette, 'gray', 900);
 $foreground-color: color($palette, 'gray', 900);
