feat(CohortDateRange): add uid and support custom ID

ISSUES CLOSED: #1815
GetTerminus · Dec 16, 2019 · ec02d89 · ec02d89
1 parent 5af8868
commit ec02d89
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/terminus-ui/cohort-date-range/src/cohort-date-range.component.spec.ts b/terminus-ui/cohort-date-range/src/cohort-date-range.component.spec.ts
@@ -56,6 +56,25 @@ describe(`TsCohortDateRangeComponent`, () => {
     cohortInstance = cohortDebugElement.componentInstance;
   }
 
+  describe(`id`, () => {
+
+    test(`should allow custom ID and fall back to UID`, () => {
+      setupComponent(testComponents.Basic);
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
+      instance.id = 'foo';
+      fixture.detectChanges();
+
+      expect(document.getElementById('foo')).toBeTruthy();
+      expect(instance.id).toEqual('foo');
+      instance.id = undefined as any;
+      fixture.detectChanges();
+      expect(document.getElementById('foo')).toBeFalsy();
+      expect(instance.id).toEqual(expect.stringContaining('ts-cohort-date-range-'));
+    });
+
+  });
+
   describe(`allowCustomDates`, () => {
     beforeEach(() => {
       setupComponent(testComponents.Basic);

diff --git a/terminus-ui/cohort-date-range/src/cohort-date-range.component.ts b/terminus-ui/cohort-date-range/src/cohort-date-range.component.ts
@@ -52,6 +52,9 @@ export class TsCohortDateRangeChanged {
   ) { }
 }
 
+// Unique ID for each instance
+let nextUniqueId = 0;
+
 /**
  * This is the cohort-date-range UI Component
  *
@@ -60,6 +63,7 @@ export class TsCohortDateRangeChanged {
  * <ts-cohort-date-range
  *              [allowCustomDates]="true"
  *              [cohorts]="myCohorts"
+ *              id="myID"
  *              (cohortDateRangeChange)="myFunc($event)"
  * ></ts-cohort-date-range>
  *
@@ -74,6 +78,7 @@ export class TsCohortDateRangeChanged {
     '[class.ts-cohort-date-range--disabled]': 'isDisabled',
     '[attr.disabled]': 'isDisabled',
     '[attr.aria-disabled]': 'isDisabled',
+    '[id]': 'id',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -105,6 +110,11 @@ export class TsCohortDateRangeComponent implements OnInit, OnDestroy {
     }),
   });
 
+  /**
+   * Define the default component ID
+   */
+  public readonly uid = `ts-cohort-date-range-${nextUniqueId++}`;
+
   /**
    * Get reference of dateRange from formGroup
    *
@@ -134,6 +144,18 @@ export class TsCohortDateRangeComponent implements OnInit, OnDestroy {
   @Input()
   public cohorts!: ReadonlyArray<TsDateCohort>;
 
+  /**
+   * Define an ID for the component
+   */
+  @Input()
+  public set id(value: string) {
+    this._id = value || this.uid;
+  }
+  public get id(): string {
+    return this._id;
+  }
+  protected _id: string = this.uid;
+
   /**
    * Disable the component
    */