Merge branch 'master' into skrastev/fix-16082-master

Author: kdinev

angular.json

@@ -307,8 +307,8 @@
                 {
                   "type": "bundle",
                   "name": "styles",
-                  "maximumWarning": "480kb",
-                  "maximumError": "490kb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "550kb"
                 },
                 {
                   "type": "anyComponentStyle",

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

@@ -9,7 +9,7 @@
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
     <input igxInput #comboInput name="comboInput" type="text" [value]="displayValue" readonly
-        [attr.placeholder]="placeholder" [disabled]="disabled"
+        [attr.placeholder]="placeholder" [disabled]="disabled" [igxReadOnlyInput]="false"
         role="combobox" aria-haspopup="listbox"
         [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
         [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"

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

@@ -25,6 +25,7 @@ import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navig
 import { IgxIconComponent } from '../icon/icon.component';
 import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
 import { IgxInputDirective } from '../directives/input/input.directive';
+import { IgxReadOnlyInputDirective } from '../directives/input/read-only-input.directive';
 
 /** Event emitted when an igx-combo's selection is changing */
 export interface IComboSelectionChangingEventArgs extends IBaseCancelableEventArgs {
@@ -115,6 +116,7 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
         IgxComboAddItemComponent,
         IgxButtonDirective,
         IgxRippleDirective,
+        IgxReadOnlyInputDirective,
         IgxComboFilteringPipe,
         IgxComboGroupingPipe
     ]

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

@@ -182,19 +182,11 @@
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
             background: var-get($theme, 'toggle-button-background-focus');
-
-            &:focus {
-                color: color($color: 'secondary');
-            }
         }
 
         %igx-combo__clear-button {
             color: var-get($theme, 'clear-button-foreground-focus');
             background: var-get($theme, 'clear-button-background-focus');
-
-            &:focus {
-                color: color($color: 'secondary');
-            }
         }
     }
 
@@ -225,13 +217,29 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        @if $variant != 'fluent' {
+        @if $variant == 'material' {
             %igx-combo__toggle-button {
                 background: var-get($theme, 'toggle-button-background-focus--border');
             }
         }
     }
 
+    %form-group-bundle:not(%form-group-bundle--disabled) {
+        %igx-combo__clear-button:focus-visible,
+        %igx-combo__toggle-button:focus-visible {
+            color: color($color: 'secondary');
+            background: var-get($theme, 'toggle-button-background');
+        }
+    }
+
+    //.igx-input-group:not(.igx-input-group--box) {
+    //    %igx-combo__toggle-button:focus {
+    //        @if $variant == 'material' {
+    //            background: var-get($theme, 'toggle-button-background-focus--border');
+    //        }
+    //    }
+    //}
+
     .igx-input-group--disabled {
         %igx-combo__toggle-button {
             background: var-get($theme, 'toggle-button-background-disabled') !important;

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -42,11 +42,11 @@
         }
 
         @include e(notch) {
-            @extend  %igx-input-group__notch !optional;
+            @extend %igx-input-group__notch !optional;
         }
 
         @include e(filler) {
-            @extend  %igx-input-group__filler !optional;
+            @extend %igx-input-group__filler !optional;
         }
 
         @include e(input) {
@@ -111,20 +111,24 @@
             @extend %suffixed !optional;
         }
 
+        @include m(readonly) {
+            @extend %form-group-display--readonly !optional;
+        }
+
         // Textarea modifier
         @include m(textarea-group) {
             @extend %textarea-group !optional;
 
             @include e(bundle-main) {
-                @extend  %form-group-textarea-group-bundle-main !optional;
+                @extend %form-group-textarea-group-bundle-main !optional;
             }
 
             @include e(bundle) {
-                @extend  %form-group-textarea-group-bundle !optional;
+                @extend %form-group-textarea-group-bundle !optional;
             }
 
             @include e(label) {
-                @extend  %form-group-textarea-label !optional;
+                @extend %form-group-textarea-label !optional;
             }
         }
 
@@ -282,6 +286,8 @@
         }
 
         @include m(invalid) {
+            @extend %form-group-display--invalid !optional;
+
             @include e(label) {
                 @extend %form-group-label--error !optional;
             }