refactor(input-group): add input read only directive

Adds the ability to apply and  override the read-only state of an input
group via a CSS class.

Author: simeonoff

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

@@ -68,6 +68,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/readOnlyInput.directive';
 
 let NEXT_ID = 0;
 
@@ -96,6 +97,7 @@ let NEXT_ID = 0;
         IgxPrefixDirective,
         IgxIconComponent,
         IgxInputDirective,
+        IgxReadOnlyInputDirective,
         IgxDateTimeEditorDirective,
         IgxTextSelectionDirective,
         IgxSuffixDirective

projects/igniteui-angular/src/lib/directives/input/readOnlyInput.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, effect, inject, input } from '@angular/core';
+import { IgxInputGroupComponent } from '../../input-group/input-group.component';
+
+@Directive({
+    selector: '[igxReadOnlyInput]',
+    exportAs: 'igxReadOnlyInput',
+    standalone: true
+})
+export class IgxReadOnlyInputDirective {
+    public igxReadOnlyInput = input<boolean>(false);
+
+    private _inputGroup: IgxInputGroupComponent | null = inject(
+        IgxInputGroupComponent,
+        {
+            optional: true
+        }
+    );
+
+    constructor() {
+        effect(() => {
+            if (this._inputGroup) {
+                this._inputGroup.readOnly = this.igxReadOnlyInput();
+            }
+        });
+    }
+}

projects/igniteui-angular/src/lib/input-group/input-group.component.ts

@@ -126,6 +126,18 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh
     private _filled = false;
     private _theme: IgxTheme;
     private _resourceStrings = getCurrentResourceStrings(InputResourceStringsEN);
+    private _readOnly: undefined | boolean;
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-input-group--readonly')
+    public get readOnly(): boolean {
+        return this._readOnly ?? (this.input?.nativeElement.readOnly || false);
+    }
+
+    /** @hidden @internal */
+    public set readOnly(value: boolean) {
+        this._readOnly = value;
+    }
 
     /** @hidden */
     @HostBinding('class.igx-input-group--valid')