fix(components/lookup): add required label asterisk for template driv…

…en forms (#2694)

apps/playground/src/app/components/lookup/lookup/lookup.component.html

@@ -37,6 +37,7 @@
       [disabled]="disabled"
     >
       <sky-lookup
+        required
         formControlName="friends2"
         idProperty="id"
         [data]="people"
@@ -105,8 +106,11 @@
 
   <div class="app-screenshot" id="lookup-single-visual">
     <form novalidate [formGroup]="bestFriendsForm">
-      <sky-input-box class="sky-margin-stacked-lg" [disabled]="disabled">
-        <label class="sky-control-label"> Who is your best friend? </label>
+      <sky-input-box
+        class="sky-margin-stacked-lg"
+        [disabled]="disabled"
+        labelText="Who is your best friend?"
+      >
         <sky-lookup
           formControlName="bestFriend"
           idProperty="id"

apps/playground/src/app/components/lookup/lookup/lookup.component.ts

@@ -9,6 +9,7 @@ import {
   UntypedFormBuilder,
   UntypedFormControl,
   UntypedFormGroup,
+  Validators,
 } from '@angular/forms';
 import {
   SkyAutocompleteSearchAsyncArgs,
@@ -177,7 +178,7 @@ export class LookupComponent implements OnInit {
     });
 
     this.bestFriendsForm = this.formBuilder.group({
-      bestFriend: new UntypedFormControl(this.bestFriend),
+      bestFriend: new UntypedFormControl(this.bestFriend, Validators.required),
       bestFriendAsync: undefined,
     });
   }

libs/components/forms/src/lib/modules/input-box/fixtures/input-box.component.fixture.html

@@ -172,6 +172,22 @@
   </sky-input-box>
 </div>
 
+<div class="easy-input-host-service">
+  <sky-input-box
+    labelText="Input using host service"
+    [hintText]="easyModeHintText"
+  >
+    <sky-input-box-host-service-fixture>
+      <input
+        #hostServiceInput="skyId"
+        class="sky-form-control"
+        skyId
+        type="text"
+      />
+    </sky-input-box-host-service-fixture>
+  </sky-input-box>
+</div>
+
 <div class="input-box-has-errors">
   <sky-input-box class="sky-margin-stacked-lg" [hasErrors]="hasErrors">
     <label class="sky-control-label" [for]="hasErrorsInput.id">

libs/components/forms/src/lib/modules/input-box/input-box-host.service.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { SkyInputBoxPopulateArgs } from './input-box-populate-args';
 import { SkyInputBoxComponent } from './input-box.component';
@@ -9,8 +9,11 @@ import { SkyInputBoxComponent } from './input-box.component';
  * @internal
  */
 @Injectable()
-export class SkyInputBoxHostService {
+export class SkyInputBoxHostService implements OnDestroy {
   #host: SkyInputBoxComponent | undefined;
+  #requiredSubject = new BehaviorSubject<boolean>(false);
+
+  public required = this.#requiredSubject.asObservable();
 
   public get controlId(): string {
     return this.#host?.controlId ?? '';
@@ -35,6 +38,10 @@ export class SkyInputBoxHostService {
     this.#ariaDescribedBy = host.ariaDescribedBy.asObservable();
   }
 
+  public ngOnDestroy(): void {
+    this.#requiredSubject.complete();
+  }
+
   public populate(args: SkyInputBoxPopulateArgs): void {
     if (!this.#host) {
       throw new Error(
@@ -74,4 +81,13 @@ export class SkyInputBoxHostService {
 
     this.#host.setHintTextScreenReaderOnly(hide);
   }
+
+  /**
+   * Set required so that input box displays the label correctly. When the input is supplied by the consumer it is a content
+   * child that input box can read required from and this is unnecessary. When the input is supplied internally by the
+   * component the input box does not have a ref to it, so the component needs to inform the input box of its required state.
+   */
+  public setRequired(required: boolean): void {
+    this.#requiredSubject.next(required);
+  }
 }

libs/components/forms/src/lib/modules/input-box/input-box.component.spec.ts

@@ -816,6 +816,28 @@ describe('Input box component', () => {
       expect(els.characterCountEl).not.toExist();
     });
 
+    it('should set required if set by the child via host service', () => {
+      const fixture = TestBed.createComponent(InputBoxFixtureComponent);
+      const hostServiceInputBox = fixture.debugElement
+        .query(By.css('.easy-input-host-service sky-input-box'))
+        .injector.get(SkyInputBoxHostService);
+
+      fixture.detectChanges();
+
+      let requiredLabel = fixture.nativeElement.querySelector(
+        '.easy-input-host-service .sky-control-label-required',
+      );
+      expect(requiredLabel).not.toExist();
+
+      hostServiceInputBox.setRequired(true);
+      fixture.detectChanges();
+
+      requiredLabel = fixture.nativeElement.querySelector(
+        '.easy-input-host-service .sky-control-label-required',
+      );
+      expect(requiredLabel).toExist();
+    });
+
     it('should add hint text', () => {
       const fixture = TestBed.createComponent(InputBoxFixtureComponent);
       fixture.detectChanges();

libs/components/forms/src/lib/modules/input-box/input-box.component.ts

@@ -31,7 +31,7 @@ import {
 } from '@angular/forms';
 import { SkyContentInfoProvider, SkyIdService } from '@skyux/core';
 
-import { ReplaySubject } from 'rxjs';
+import { ReplaySubject, Subject, takeUntil } from 'rxjs';
 
 import { SKY_FORM_ERRORS_ENABLED } from '../form-error/form-errors-enabled-token';
 
@@ -196,6 +196,8 @@ export class SkyInputBoxComponent
   public readonly hintTextId = this.#idSvc.generateId();
   public readonly ariaDescribedBy = new ReplaySubject<string | undefined>(1);
 
+  #requiredByFormField: boolean | undefined;
+
   @HostBinding('class')
   public cssClass = '';
 
@@ -233,7 +235,9 @@ export class SkyInputBoxComponent
 
   protected get required(): boolean {
     return (
-      this.#hasRequiredValidator() || this.inputRef?.nativeElement.required
+      this.#hasRequiredValidator() ||
+      this.inputRef?.nativeElement.required ||
+      this.#requiredByFormField
     );
   }
 
@@ -245,9 +249,17 @@ export class SkyInputBoxComponent
 
   #previousInputRef: ElementRef | undefined;
   #previousMaxLengthValidator: ValidatorFn | undefined;
+  #ngUnsubscribe = new Subject<void>();
 
   public ngOnInit(): void {
     this.#inputBoxHostSvc.init(this);
+
+    this.#inputBoxHostSvc.required
+      .pipe(takeUntil(this.#ngUnsubscribe))
+      .subscribe((required) => {
+        this.#requiredByFormField = required;
+        this.#changeRef.markForCheck();
+      });
   }
 
   public ngAfterContentChecked(): void {
@@ -263,6 +275,8 @@ export class SkyInputBoxComponent
 
   public ngOnDestroy(): void {
     this.ariaDescribedBy.complete();
+    this.#ngUnsubscribe.next();
+    this.#ngUnsubscribe.complete();
   }
 
   public formControlFocusIn(): void {

libs/components/lookup/src/lib/modules/lookup/fixtures/lookup-input-box.component.fixture.html

@@ -11,6 +11,7 @@
       [autocompleteAttribute]="autocompleteAttribute"
       [data]="data"
       [enableShowMore]="enableShowMore"
+      [required]="required"
       [selectMode]="selectMode"
     />
   </sky-input-box>

libs/components/lookup/src/lib/modules/lookup/fixtures/lookup-input-box.component.fixture.ts

@@ -32,6 +32,8 @@ export class SkyLookupInputBoxTestComponent {
 
   public form: UntypedFormGroup;
 
+  public required = false;
+
   public selectMode: SkyLookupSelectModeType | undefined;
 
   constructor(formBuilder: UntypedFormBuilder) {

libs/components/lookup/src/lib/modules/lookup/lookup.component.spec.ts

@@ -7481,6 +7481,23 @@ describe('Lookup component', function () {
       expect(lookupComponent.isInputFocused).toEqual(false);
     });
 
+    it('should add or remove the required label class if `required` is set on lookup element', async function () {
+      component.required = true;
+      fixture.detectChanges();
+
+      let requiredLabel = fixture.nativeElement.querySelector(
+        '.sky-control-label-required',
+      );
+      expect(requiredLabel).toExist();
+
+      component.required = false;
+      fixture.detectChanges();
+      requiredLabel = fixture.nativeElement.querySelector(
+        '.sky-control-label-required',
+      );
+      expect(requiredLabel).not.toExist();
+    });
+
     describe('aria-describedby attribute', () => {
       it('should be set when hint text is specified and select mode is single', () => {
         validateDescribedBy('single');

libs/components/lookup/src/lib/modules/lookup/lookup.component.ts

@@ -14,6 +14,7 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
+  booleanAttribute,
   inject,
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
@@ -124,6 +125,20 @@ export class SkyLookupComponent
     return this.#_disabled;
   }
 
+  /**
+   * Whether the lookup field is required.
+   * @default false
+   */
+  @Input({ transform: booleanAttribute })
+  public set required(value: boolean) {
+    this.#_required = value;
+    this.inputBoxHostSvc?.setRequired(value);
+  }
+
+  public get required(): boolean {
+    return this.#_required;
+  }
+
   /**
    * Whether to enable users to open a picker where they can view all options.
    * @default false
@@ -306,6 +321,7 @@ export class SkyLookupComponent
   #ngUnsubscribe = new Subject<void>();
   #openNativePicker: SkyModalInstance | undefined;
   #openSelectionModal: SkySelectionModalInstance | undefined;
+  #_required = false;
 
   #_autocompleteInputDirective: SkyAutocompleteInputDirective | undefined;
   #_data: any[] | undefined;
@@ -352,6 +368,8 @@ export class SkyLookupComponent
           ? undefined
           : this.searchIconTemplateRef,
       });
+
+      this.inputBoxHostSvc?.setRequired(this.required);
     } else {
       this.controlId = this.#idService.generateId();
     }