fix(components/forms): allow character count indicator and limit to be set in either order (#826)

Author: Blackbaud-PaulCrowder

libs/components/forms/src/lib/modules/character-counter/character-counter.component.spec.ts

@@ -35,6 +35,7 @@ describe('Character Counter component', () => {
     let nativeElement: HTMLElement;
     let characterCountComponent: SkyCharacterCounterIndicatorComponent;
     let characterCountLabel: HTMLLabelElement;
+    let characterCountLabelLastName: HTMLLabelElement;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(CharacterCountTestComponent);
@@ -43,10 +44,13 @@ describe('Character Counter component', () => {
 
       fixture.detectChanges();
 
-      characterCountComponent =
-        component.inputDirective!.skyCharacterCounterIndicator!;
+      characterCountComponent = component.inputDirective
+        ?.skyCharacterCounterIndicator as SkyCharacterCounterIndicatorComponent;
       characterCountLabel = nativeElement.querySelector(
-        '.sky-character-count-label'
+        '.input-count-example-wrapper .sky-character-count-label'
+      ) as HTMLLabelElement;
+      characterCountLabelLastName = nativeElement.querySelector(
+        '.input-count-example-wrapper-last-name .sky-character-count-label'
       ) as HTMLLabelElement;
     });
 
@@ -146,6 +150,11 @@ describe('Character Counter component', () => {
       expect(characterCountComponent.characterCountLimit).toEqual(0);
     }));
 
+    it('should allow character limit and indicator to be set in any order', () => {
+      expect(characterCountComponent.characterCount).toBe(4);
+      expect(characterCountLabelLastName.innerText.trim()).toBe('4/5');
+    });
+
     it('should pass accessibility', async () => {
       fixture.detectChanges();
       await fixture.whenStable();

libs/components/forms/src/lib/modules/character-counter/character-counter.directive.ts

@@ -31,9 +31,17 @@ export class SkyCharacterCounterInputDirective implements Validator {
    * `textarea` element.
    */
   @Input()
-  public skyCharacterCounterIndicator:
+  public get skyCharacterCounterIndicator():
     | SkyCharacterCounterIndicatorComponent
-    | undefined;
+    | undefined {
+    return this.#_skyCharacterCounterIndicator;
+  }
+  public set skyCharacterCounterIndicator(
+    value: SkyCharacterCounterIndicatorComponent | undefined
+  ) {
+    this.#_skyCharacterCounterIndicator = value;
+    this.#updateIndicatorLimit();
+  }
 
   /**
    * Specifies the maximum number of characters allowed in the input field. Place this directive
@@ -43,10 +51,13 @@ export class SkyCharacterCounterInputDirective implements Validator {
   @Input()
   public set skyCharacterCounterLimit(value: number | undefined) {
     this.#skyCharacterCounterLimitOrDefault = value ?? 0;
-    this.#updateIndicatorLimit(this.#skyCharacterCounterLimitOrDefault);
-    this.#validatorChange();
+    this.#updateIndicatorLimit();
   }
 
+  #_skyCharacterCounterIndicator:
+    | SkyCharacterCounterIndicatorComponent
+    | undefined;
+
   #skyCharacterCounterLimitOrDefault = 0;
 
   public validate(control: AbstractControl): ValidationErrors | null {
@@ -82,12 +93,15 @@ export class SkyCharacterCounterInputDirective implements Validator {
     }
   }
 
-  #updateIndicatorLimit(limit: number): void {
+  #updateIndicatorLimit(): void {
     if (this.skyCharacterCounterIndicator) {
-      this.skyCharacterCounterIndicator.characterCountLimit = limit;
+      this.skyCharacterCounterIndicator.characterCountLimit =
+        this.#skyCharacterCounterLimitOrDefault;
     }
+
+    this.#validatorChange();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  #validatorChange = () => {};
+  #validatorChange = (): void => {};
 }

libs/components/forms/src/lib/modules/character-counter/fixtures/character-count.component.fixture.html

@@ -1,6 +1,6 @@
 <div>
   <form [formGroup]="testForm">
-    <div style="display: flex">
+    <div style="display: flex" class="input-count-example-wrapper">
       <label
         for="input-count-example"
         class="sky-control-label"
@@ -26,5 +26,32 @@
     <div *ngIf="firstName.errors?.skyCharacterCounter" class="sky-error-label">
       Limit First name to {{maxCharacterCount}} characters.
     </div>
+
+    <div style="display: flex" class="input-count-example-wrapper-last-name">
+      <label
+        for="input-count-example-last-name"
+        class="sky-control-label"
+        style="flex-grow: 1"
+      >
+        Last name
+      </label>
+
+      <sky-character-counter-indicator #indicatorLastName>
+      </sky-character-counter-indicator>
+    </div>
+
+    <input
+      aria-label="Input"
+      class="sky-form-control"
+      formControlName="lastName"
+      type="text"
+      skyCharacterCounter
+      [skyCharacterCounterLimit]="maxCharacterCountLastName"
+      [skyCharacterCounterIndicator]="indicatorLastName"
+    />
+
+    <div *ngIf="lastName.errors?.skyCharacterCounter" class="sky-error-label">
+      Limit Last name to {{maxCharacterCount}} characters.
+    </div>
   </form>
 </div>

libs/components/forms/src/lib/modules/character-counter/fixtures/character-count.component.fixture.ts

@@ -21,7 +21,9 @@ export class CharacterCountTestComponent {
   public testForm: UntypedFormGroup;
   public firstName: UntypedFormControl;
   public firstNameLabel = 'Field label';
+  public lastName: UntypedFormControl;
   public maxCharacterCount: number | undefined = 5;
+  public maxCharacterCountLastName: number | undefined = 5;
 
   @ViewChild(SkyCharacterCounterInputDirective)
   public inputDirective: SkyCharacterCounterInputDirective | undefined;
@@ -37,14 +39,17 @@ export class CharacterCountTestComponent {
     this.#changeDetector = changeDetector;
 
     this.firstName = this.#formBuilder.control('test');
+    this.lastName = this.#formBuilder.control('last');
 
     this.testForm = this.#formBuilder.group({
       firstName: this.firstName,
+      lastName: this.lastName,
     });
   }
 
   public setCharacterCountLimit(limit: number | undefined): void {
     this.maxCharacterCount = limit;
+    this.maxCharacterCountLastName = limit;
     this.#changeDetector.markForCheck();
   }
 }