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

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

@@ -286,6 +286,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;
@@ -361,8 +446,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');
@@ -396,13 +479,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;
 
@@ -612,8 +688,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;
@@ -906,22 +981,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');
-            }
         }
     }
 
@@ -1242,10 +1311,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}';
@@ -1517,11 +1582,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');
@@ -1611,10 +1673,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 {
@@ -1861,14 +1919,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 {
@@ -1898,6 +1948,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);
@@ -2266,14 +2358,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');
+    %form-group-display:not(%form-group-display--file) {
+        %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');
-
-            + %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');
+                }
             }
         }
     }

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -14,7 +14,9 @@
         </igx-prefix>
     }
 
-    <input class="igx-date-picker__input-date" [displayValuePipe]="formatter ? displayValue : null" igxInput
+    <input class="igx-date-picker__input-date"
+        [igxReadOnlyInput]="readOnly"
+        [displayValuePipe]="formatter ? displayValue : null" igxInput
         [igxDateTimeEditor]="inputFormat" [displayFormat]="displayFormat"
         [minValue]="minValue" [maxValue]="maxValue" [spinDelta]="spinDelta" [spinLoop]="spinLoop"
         [disabled]="disabled" [placeholder]="placeholder" [readonly]="!isDropdown || readOnly"

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -66,6 +66,7 @@ import { IgxTextSelectionDirective } from '../directives/text-selection/text-sel
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
 import { PickerCalendarOrientation } from '../date-common/types';
+import { IgxReadOnlyInputDirective } from '../directives/input/read-only-input.directive';
 
 let NEXT_ID = 0;
 
@@ -94,6 +95,7 @@ let NEXT_ID = 0;
         IgxPrefixDirective,
         IgxIconComponent,
         IgxInputDirective,
+        IgxReadOnlyInputDirective,
         IgxDateTimeEditorDirective,
         IgxTextSelectionDirective,
         IgxSuffixDirective
@@ -579,7 +581,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
      * ```
      */
     public open(settings?: OverlaySettings): void {
-        if (!this.collapsed || this.disabled) {
+        if (!this.collapsed || this.disabled || this.readOnly) {
             return;
         }
 
@@ -677,7 +679,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
      * ```
      */
     public clear(): void {
-        if (!this.disabled) {
+        if (!this.disabled || !this.readOnly) {
             this._calendar?.deselectDate();
             this.dateTimeEditor.clear();
         }