feat(input-group): add read-only styles

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/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;
             }

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

@@ -280,6 +280,91 @@
         }
     }
 
+    %form-group-display--readonly:not(%form-group-display--file) {
+        igx-prefix,
+        [igxPrefix],
+        igx-suffix,
+        [igxSuffix] {
+            color: var-get($theme, 'disabled-text-color');
+
+            @if $variant == 'fluent' {
+                background: transparent;
+            }
+
+            @if $variant == 'bootstrap' {
+                background: var-get($theme, 'border-disabled-background');
+            }
+        }
+
+        @if $variant == 'bootstrap' {
+            %form-group-input {
+                background: var-get($theme, 'border-disabled-background');
+            }
+        }
+
+        %form-group-bundle--hover::after {
+            @if $variant == 'material' {
+                border-block-end-color: var-get($theme, 'idle-bottom-line-color');
+            }
+        }
+
+        @if $variant == 'indigo' {
+            %form-group-bundle--hover:not(:focus-within) {
+                background: unset;
+
+                &::after {
+                    border-block-end-color: var-get($theme, 'disabled-text-color');
+                }
+            }
+        }
+
+        &%igx-input-group-fluent:not(:focus-within) {
+            %form-group-bundle--hover::before {
+                box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
+            }
+        }
+
+        &%form-group-display--box:not(%form-group-display--disabled) {
+            %form-group-bundle {
+                background: var-get($theme, 'box-background-focus');
+            }
+        }
+
+        &%form-group-display--border:not(%form-group-display--disabled) {
+            %form-group-bundle:hover:not(:focus-within) {
+                %form-group-bundle-start,
+                %igx-input-group__filler,
+                %form-group-bundle-end {
+                    border-color: var-get($theme, 'border-color');
+                }
+
+                %igx-input-group__notch {
+                    border-block-start-color: var-get($theme, 'border-color');
+                    border-block-end-color: var-get($theme, 'border-color');
+                }
+            }
+        }
+
+        &%form-group-display--search {
+            %form-group-bundle-search--hover:not(:focus-within) {
+                box-shadow: var-get($theme, 'search-resting-shadow');
+            }
+        }
+
+        &:hover {
+            %form-group-input--hover {
+                cursor: default;
+                color: var-get($theme, 'filled-text-color');
+
+                &:not(:focus-within) {
+                    &::placeholder {
+                        color: var-get($theme, 'placeholder-color');
+                    }
+                }
+            }
+        }
+    }
+
     %form-group-display--disabled {
         pointer-events: none;
         user-select: none;
@@ -355,8 +440,6 @@
     }
 
     %form-group-bundle--hover {
-        //cursor: pointer;
-
         &::after {
             border-block-end-width: rem(1px);
             border-block-end-color: var-get($theme, 'hover-bottom-line-color');
@@ -390,13 +473,6 @@
         caret-color: initial;
     }
 
-    %form-group-bundle--error {
-        &::after {
-            border-block-end-color: var-get($theme, 'error-secondary-color');
-        }
-        caret-color: initial;
-    }
-
     %form-group-bundle--disabled {
         cursor: default;
 
@@ -606,8 +682,7 @@
     %bootstrap-file-focused,
     %bootstrap-file-valid,
     %bootstrap-file-warning,
-    %bootstrap-file-invalid
-    {
+    %bootstrap-file-invalid {
         %form-group-bundle {
             border-radius: var-get($theme, 'box-border-radius');
             transition: box-shadow .15s ease-out, border .15s ease-out;
@@ -900,22 +975,16 @@
         }
 
         &:hover {
-            %form-group-bundle-start {
-                border-color: var-get($theme, 'hover-border-color');
-            }
-
-            %igx-input-group__filler {
+            %form-group-bundle-start,
+            %igx-input-group__filler,
+            %form-group-bundle-end {
                 border-color: var-get($theme, 'hover-border-color');
             }
 
             %igx-input-group__notch {
                 border-block-start-color: var-get($theme, 'hover-border-color');
                 border-block-end-color: var-get($theme, 'hover-border-color');
             }
-
-            %form-group-bundle-end {
-                border-color: var-get($theme, 'hover-border-color');
-            }
         }
     }
 
@@ -1236,10 +1305,6 @@
         color: var-get($theme, 'success-secondary-color');
     }
 
-    %form-group-label--error {
-        color: var-get($theme, 'error-secondary-color');
-    }
-
     %form-group-label--required {
         &::after {
             content: '#{$required-symbol}';
@@ -1511,11 +1576,8 @@
         }
     }
 
-    %form-group-line--error {
-        background: var-get($theme, 'error-secondary-color');
-    }
-
-    %form-group-border--error {
+    %form-group-border--error:not(%form-group-display--readonly),
+    %form-group-border--error%form-group-display--file {
         %form-group-bundle-start {
             border-inline-start-color: var-get($theme, 'error-secondary-color');
             border-block-start-color: var-get($theme, 'error-secondary-color');
@@ -1605,10 +1667,6 @@
         %form-group-helper--warning {
             color: var-get($theme, 'warning-secondary-color');
         }
-
-        %form-group-helper--error {
-            color: var-get($theme, 'error-secondary-color');
-        }
     }
 
     %form-group-helper-item {
@@ -1766,6 +1824,15 @@
             background: var(--igx-input-group-input-suffix-background, transparent);
             color: var(--igx-input-group-input-suffix-color, var(--ig-primary-500));
         }
+
+        &%form-group-display--readonly {
+            igx-prefix,
+            [igxPrefix],
+            igx-suffix,
+            [igxSuffix] {
+                color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500));
+            }
+        }
     }
 
     %igx-input-group-fluent-search--focused {
@@ -1778,6 +1845,13 @@
         [igxSuffix] {
             color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
         }
+
+        &%form-group-display--readonly {
+            igx-suffix,
+            [igxSuffix] {
+                color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
+            }
+        }
     }
 
     // Bundle
@@ -1855,14 +1929,6 @@
         }
     }
 
-    %form-group-bundle-error--fluent,
-    %form-group-bundle-error--fluent--hover,
-    %form-group-bundle-error--fluent--focus {
-        &::before {
-            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
-        }
-    }
-
     %form-group-bundle-success--fluent,
     %form-group-bundle-success--fluent--hover,
     %form-group-bundle-success--fluent--focus {
@@ -1892,6 +1958,48 @@
         }
     }
 
+    %form-group-display--invalid:not(%form-group-display--readonly), 
+    %form-group-display--invalid%form-group-display--file {
+        @if $variant != 'indigo' {
+            %form-group-label--error,
+            %form-group-helper--error {
+                color: var-get($theme, 'error-secondary-color');
+            }
+        }
+
+        %form-group-line--error {
+            background: var-get($theme, 'error-secondary-color');
+        }
+
+        %form-group-bundle--error {
+            &::after {
+                border-block-end-color: var-get($theme, 'error-secondary-color');
+            }
+
+            caret-color: initial;
+        }
+
+        &%form-group-display--bootstrap {
+            %bootstrap-input--error {
+                border: rem(1px) solid var-get($theme, 'error-secondary-color');
+
+                &:focus {
+                    box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+                }
+            }
+        }
+
+        &%igx-input-group-fluent {
+            %form-group-bundle-error--fluent,
+            %form-group-bundle-error--fluent--hover,
+            %form-group-bundle-error--fluent--focus {
+                &::before {
+                    box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
+                }
+            }
+        }
+    }
+
     // Native input
     %fluent-input {
         font-size: rem(14px);
@@ -2255,14 +2363,16 @@
         box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
     }
 
-    %bootstrap-input--error {
-        border: rem(1px) solid var-get($theme, 'error-secondary-color');
-
-        &:focus {
-            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+    %form-group-display:not(%form-group-display--file) {
+        %bootstrap-input--error {
+            border: rem(1px) solid var-get($theme, 'error-secondary-color');
 
-            + %bootstrap-file-input {
+            &:focus {
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+
+                + %bootstrap-file-input {
+                    box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+                }
             }
         }
     }