Update support to be for typedoc 24 (#254)

package.json

@@ -34,6 +34,7 @@
     "@skyux/colorpicker": "9.0.0-alpha.0",
     "@skyux/config": "9.0.0-alpha.0",
     "@skyux/core": "9.0.0-alpha.0",
+    "@skyux/datetime": "9.0.0-alpha.0",
     "@skyux/errors": "9.0.0-alpha.0",
     "@skyux/forms": "9.0.0-alpha.0",
     "@skyux/http": "9.0.0-alpha.0",
@@ -52,6 +53,7 @@
     "@stackblitz/sdk": "1.8.0",
     "lodash.orderby": "4.6.0",
     "marked": "4.1.0",
+    "moment": "2.29.4",
     "rxjs": "7.8.1",
     "tslib": "2.6.1",
     "zone.js": "0.13.1"

projects/docs-tools-showcase/src/app/home/home.component.html

@@ -1,35 +1,103 @@
 <sky-docs-demo-page
-  moduleName="SkyColorpickerModule"
-  moduleSourceCodePath="projects/colorpicker/src/modules/colorpicker/"
-  pageTitle="Colorpicker"
+  moduleName="SkyDatepickerModule"
+  moduleSourceCodePath="projects/datetime/src/modules/datepicker/"
+  pageTitle="Datepicker"
 >
   <sky-docs-demo-page-summary>
-    Colorpickers create SKY UX-themed inputs for users select colors.
+    The datepicker module provides an input and calendar for users to select
+    dates or fuzzy dates.
   </sky-docs-demo-page-summary>
 
-  <sky-docs-demo>
-    <sky-colorpicker #colorPicker>
-      <input
-        name="favoriteColor"
-        type="text"
-        [skyColorpickerInput]="colorPicker"
-        [(ngModel)]="model.favoriteColor"
-      />
-    </sky-colorpicker>
+  <sky-docs-demo [heading]="'Standard datepicker demo'">
+    <sky-docs-demo-control-panel
+      (selectionChange)="onDemoSelectionChange($event)"
+    >
+      <sky-docs-demo-control-panel-section>
+        <sky-docs-demo-control-panel-checkbox
+          label="Include date range validator (01/01/2020 - 01/31/2020)"
+          propertyName="standardValidation"
+          [checked]="false"
+        >
+        </sky-docs-demo-control-panel-checkbox>
+        <sky-docs-demo-control-panel-checkbox
+          label="Show custom dates"
+          propertyName="customDates"
+          [checked]="false"
+        >
+        </sky-docs-demo-control-panel-checkbox>
+      </sky-docs-demo-control-panel-section>
+    </sky-docs-demo-control-panel>
+
+    <div style="width: 400px">
+      <form novalidate [formGroup]="standardForm">
+        <sky-input-box>
+          <label class="sky-control-label" [for]="dateOfBirth.id">
+            Date of birth
+          </label>
+          <sky-datepicker
+            (calendarDateRangeChange)="onCalendarDateRangeChange($event)"
+          >
+            <input
+              formControlName="myDate"
+              skyDatepickerInput
+              skyId
+              type="text"
+              [maxDate]="standardMaxDate!"
+              [minDate]="standardMinDate!"
+              #dateOfBirth="skyId"
+            />
+          </sky-datepicker>
+        </sky-input-box>
+      </form>
+    </div>
   </sky-docs-demo>
+  <sky-docs-demo [heading]="'Fuzzy datepicker demo'">
+    <sky-docs-demo-control-panel
+      (selectionChange)="onDemoSelectionChange($event)"
+    >
+      <sky-docs-demo-control-panel-section>
+        <sky-docs-demo-control-panel-checkbox
+          label="Include date range validator (01/01/2020 - 01/31/2020)"
+          propertyName="fuzzyValidation"
+          [checked]="false"
+        >
+        </sky-docs-demo-control-panel-checkbox>
+        <sky-docs-demo-control-panel-checkbox
+          label="Require year"
+          propertyName="fuzzyYearRequired"
+          [checked]="false"
+        >
+        </sky-docs-demo-control-panel-checkbox>
+        <sky-docs-demo-control-panel-checkbox
+          label="Allow future dates"
+          propertyName="fuzzyFutureDates"
+          [checked]="true"
+        >
+        </sky-docs-demo-control-panel-checkbox>
+      </sky-docs-demo-control-panel-section>
+    </sky-docs-demo-control-panel>
 
-  <sky-docs-code-examples
-    [packageDependencies]="{
-      '@skyux/colorpicker': '*'
-    }"
-  >
-    <sky-docs-code-example
-      heading="Basic colorpicker"
-      sourceCodePath="/projects/colorpicker/documentation/code-examples/colorpicker/basic"
-    ></sky-docs-code-example>
-    <sky-docs-code-example
-      heading="Interact with a colorpicker programmatically"
-      sourceCodePath="/projects/colorpicker/documentation/code-examples/colorpicker/programmatic"
-    ></sky-docs-code-example>
-  </sky-docs-code-examples>
+    <div style="width: 400px">
+      <form novalidate [formGroup]="fuzzyForm">
+        <sky-input-box>
+          <label class="sky-control-label" [for]="dateOfBirthFuzzy.id">
+            Date of birth
+          </label>
+          <sky-datepicker>
+            <input
+              formControlName="myDate"
+              skyFuzzyDatepickerInput
+              skyId
+              type="text"
+              [futureDisabled]="fuzzyFutureDisabled"
+              [maxDate]="fuzzyMaxDate!"
+              [minDate]="fuzzyMinDate!"
+              [yearRequired]="fuzzyYearRequired"
+              #dateOfBirthFuzzy="skyId"
+            />
+          </sky-datepicker>
+        </sky-input-box>
+      </form>
+    </div>
+  </sky-docs-demo>
 </sky-docs-demo-page>

projects/docs-tools-showcase/src/app/home/home.component.ts

@@ -1,6 +1,22 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
+import {
+  SkyDatepickerCalendarChange,
+  SkyDatepickerCustomDate,
+  SkyFuzzyDate,
+} from '@skyux/datetime';
+import { SkyDocsDemoControlPanelChange, SkyDocsToolsOptions } from 'docs-tools';
 
-import { SkyDocsToolsOptions } from 'projects/docs-tools/src/public-api';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'app-home',
@@ -12,13 +28,129 @@ import { SkyDocsToolsOptions } from 'projects/docs-tools/src/public-api';
       provide: SkyDocsToolsOptions,
       useValue: {
         gitRepoUrl: 'https://github.com/blackbaud/skyux',
-        packageName: '@skyux/colorpicker',
+        packageName: '@skyux/datetime',
       },
     },
   ],
 })
 export class HomeComponent {
-  public model: any = {
-    favoriteColor: 'rgb(0, 0, 225)',
-  };
+  public fuzzyForm: UntypedFormGroup;
+
+  public fuzzyMaxDate: SkyFuzzyDate | undefined = undefined;
+
+  public fuzzyMinDate: SkyFuzzyDate | undefined = undefined;
+
+  public fuzzyFutureDisabled: boolean = false;
+
+  public fuzzyYearRequired: boolean = false;
+
+  public showCustomDates: boolean = false;
+
+  public standardForm: UntypedFormGroup;
+
+  public standardMaxDate: Date | undefined = undefined;
+
+  public standardMinDate: Date | undefined = undefined;
+
+  constructor(
+    private changeRef: ChangeDetectorRef,
+    private formBuilder: UntypedFormBuilder
+  ) {
+    this.fuzzyForm = this.formBuilder.group({
+      myDate: new UntypedFormControl(new Date(1955, 10, 5)),
+    });
+    this.standardForm = this.formBuilder.group({
+      myDate: new UntypedFormControl(new Date(1955, 10, 5)),
+    });
+  }
+
+  public onDemoSelectionChange(change: SkyDocsDemoControlPanelChange): void {
+    if (change.standardValidation === true) {
+      this.standardMaxDate = new Date(2020, 0, 31);
+      this.standardMinDate = new Date(2020, 0, 1);
+    } else if (change.standardValidation === false) {
+      this.standardMaxDate = undefined;
+      this.standardMinDate = undefined;
+    }
+
+    if (change.customDates !== undefined) {
+      this.showCustomDates = change.customDates;
+    }
+
+    if (change.fuzzyValidation === true) {
+      this.fuzzyMaxDate = { day: 31, month: 1, year: 2020 };
+      this.fuzzyMinDate = { day: 1, month: 1, year: 2020 };
+    } else if (change.fuzzyValidation === false) {
+      this.fuzzyMaxDate = undefined;
+      this.fuzzyMinDate = undefined;
+    }
+
+    if (change.fuzzyFutureDates !== undefined) {
+      this.fuzzyFutureDisabled = !change.fuzzyFutureDates;
+    }
+
+    if (change.fuzzyYearRequired !== undefined) {
+      this.fuzzyYearRequired = change.fuzzyYearRequired;
+    }
+
+    this.changeRef.markForCheck();
+  }
+
+  public onCalendarDateRangeChange(event: SkyDatepickerCalendarChange): void {
+    if (event) {
+      if (this.showCustomDates) {
+        // Bind observable to `customDates` argument and simulate delay for async process to finish.
+        // Normally, `getCustomDates()` would be replaced by an async call to fetch data.
+        event.customDates = this.getCustomDates(event).pipe(delay(2000));
+      }
+    }
+  }
+
+  /**
+   * Generate fake custom dates based on the date range returned from the event.
+   * This is for demonstration purposes only.
+   */
+  private getCustomDates(
+    event: SkyDatepickerCalendarChange
+  ): Observable<SkyDatepickerCustomDate[]> {
+    const getNextDate = function (startDate: Date, daystoAdd: number): Date {
+      let newDate = new Date(startDate);
+      newDate.setDate(newDate.getDate() + daystoAdd);
+      return newDate;
+    };
+
+    const customDates: SkyDatepickerCustomDate[] = [];
+    customDates.push({
+      date: getNextDate(event.startDate, 8),
+      keyDate: true,
+      keyDateText: ['Homework due'],
+    });
+
+    customDates.push({
+      date: getNextDate(event.startDate, 10),
+      disabled: true,
+      keyDate: true,
+      keyDateText: ['Class cancelled'],
+    });
+
+    customDates.push({
+      date: getNextDate(event.startDate, 12),
+      keyDate: true,
+      keyDateText: ['Labs due'],
+    });
+
+    customDates.push({
+      date: getNextDate(event.startDate, 16),
+      keyDate: true,
+      keyDateText: ['Homework due'],
+    });
+
+    customDates.push({
+      date: getNextDate(event.startDate, 26),
+      keyDate: true,
+      keyDateText: ['Mid-term'],
+    });
+
+    return of(customDates);
+  }
 }