feat(datepicker) (#85)

.circleci/config.yml

@@ -66,6 +66,12 @@ jobs:
             - attach_workspace: *attach_options
             - run: npm run build:cdk
 
+    build_mosaic-moment-adapter:
+        <<: *job_defaults
+        steps:
+            - attach_workspace: *attach_options
+            - run: npm run build:mosaic-moment-adapter
+
     test_unit:
         <<: *job_defaults
         steps:
@@ -115,18 +121,23 @@ workflows:
             - build_cdk:
                   requires:
                       - install
+            - build_mosaic-moment-adapter:
+                  requires:
+                      - install
             - build_mosaic:
                   requires:
                       - install
             - test_unit:
                   requires:
                       - build_cdk
                       - build_mosaic
+                      - build_mosaic-moment-adapter
             - snapshot_publish:
                   requires:
                       - test_unit
                       - build_cdk
                       - build_mosaic
+                      - build_mosaic-moment-adapter
                   filters:
                       branches:
                           only:

package.json

@@ -22,9 +22,9 @@
         "@angular/elements": "^7.2.1",
         "@angular/forms": "^7.2.1",
         "@angular/platform-browser": "^7.2.1",
-        "@ptsecurity/mosaic-icons": "2.6.0",
+        "@ptsecurity/mosaic-icons": "2.7.1",
         "@webcomponents/custom-elements": "^1.2.1",
-        "core-js": "^2.6.2",
+        "core-js": "^2.6.0",
         "rxjs": "^6.3.3",
         "systemjs": "0.19.43",
         "tslib": "^1.9.3",
@@ -97,6 +97,8 @@
         "lint-staged": "^7.3.0",
         "madge": "^3.3.0",
         "magic-string": "^0.22.5",
+        "messageformat": "2.0.5",
+        "moment": "2.24.0",
         "node-sass": "^4.11.0",
         "postcss-loader": "^3.0.0",
         "raw-loader": "^0.5.1",
@@ -132,6 +134,7 @@
         "test:unit": "gulp ci:test",
         "valid:lic": "gulp validate-licenses",
         "build:cdk": "gulp cdk:build-release",
+        "build:mosaic-moment-adapter": "gulp mosaic-moment-adapter:build-release",
         "build:lib": "gulp mosaic:build-release",
         "build:docs": "gulp docs",
         "changelog": "gulp changelog",
@@ -150,6 +153,7 @@
         "server-dev:cdk-vscroll-custom-strategy": "npm run server-dev -- --env.component cdk-virtual-scroll-custom-strategy",
         "server-dev:cdk-vscroll-data-source": "npm run server-dev -- --env.component cdk-virtual-scroll-data-source",
         "server-dev:checkbox": "npm run server-dev -- --env.component checkbox",
+        "server-dev:datepicker": "npm run server-dev -- --env.component datepicker",
         "server-dev:dropdown": "npm run server-dev -- --env.component dropdown",
         "server-dev:icon": "npm run server-dev -- --env.component icon",
         "server-dev:input": "npm run server-dev -- --env.component input",

src/cdk/datetime/date-adapter.ts

@@ -0,0 +1,278 @@
+import { inject, InjectionToken, LOCALE_ID } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+
+/** InjectionToken for datepicker that can be used to override default locale code. */
+export const MC_DATE_LOCALE = new InjectionToken<string>('MC_DATE_LOCALE', {
+    providedIn: 'root',
+    factory: MC_DATE_LOCALE_FACTORY
+});
+
+/** @docs-private */
+// tslint:disable-next-line:naming-convention
+export function MC_DATE_LOCALE_FACTORY(): string {
+    return inject(LOCALE_ID);
+}
+
+/** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */
+// tslint:disable-next-line:naming-convention
+export abstract class DateAdapter<D> {
+    /** The locale to use for all dates. */
+    protected locale: any;
+
+    /** A stream that emits when the locale changes. */
+    get localeChanges(): Observable<void> {
+        return this._localeChanges;
+    }
+
+    // tslint:disable-next-line:naming-convention
+    protected _localeChanges = new Subject<void>();
+
+    /**
+     * Gets the year component of the given date.
+     * @param date The date to extract the year from.
+     * @returns The year component.
+     */
+    abstract getYear(date: D): number;
+
+    /**
+     * Gets the month component of the given date.
+     * @param date The date to extract the month from.
+     * @returns The month component (0-indexed, 0 = January).
+     */
+    abstract getMonth(date: D): number;
+
+    /**
+     * Gets the date of the month component of the given date.
+     * @param date The date to extract the date of the month from.
+     * @returns The month component (1-indexed, 1 = first of month).
+     */
+    abstract getDate(date: D): number;
+
+    /**
+     * Gets the day of the week component of the given date.
+     * @param date The date to extract the day of the week from.
+     * @returns The month component (0-indexed, 0 = Sunday).
+     */
+    abstract getDayOfWeek(date: D): number;
+
+    /**
+     * Gets a list of names for the months.
+     * @param style The naming style (e.g. long = 'January', short = 'Jan', narrow = 'J').
+     * @returns An ordered list of all month names, starting with January.
+     */
+    abstract getMonthNames(style: 'long' | 'short' | 'narrow'): string[];
+
+    /**
+     * Gets a list of names for the dates of the month.
+     * @returns An ordered list of all date of the month names, starting with '1'.
+     */
+    abstract getDateNames(): string[];
+
+    /**
+     * Gets a list of names for the days of the week.
+     * @param style The naming style (e.g. long = 'Sunday', short = 'Sun', narrow = 'S').
+     * @returns An ordered list of all weekday names, starting with Sunday.
+     */
+    abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];
+
+    /**
+     * Gets the name for the year of the given date.
+     * @param date The date to get the year name for.
+     * @returns The name of the given year (e.g. '2017').
+     */
+    abstract getYearName(date: D): string;
+
+    /**
+     * Gets the first day of the week.
+     * @returns The first day of the week (0-indexed, 0 = Sunday).
+     */
+    abstract getFirstDayOfWeek(): number;
+
+    /**
+     * Gets the number of days in the month of the given date.
+     * @param date The date whose month should be checked.
+     * @returns The number of days in the month of the given date.
+     */
+    abstract getNumDaysInMonth(date: D): number;
+
+    /**
+     * Clones the given date.
+     * @param date The date to clone
+     * @returns A new date equal to the given date.
+     */
+    abstract clone(date: D): D;
+
+    /**
+     * Creates a date with the given year, month, and date. Does not allow over/under-flow of the
+     * month and date.
+     * @param year The full year of the date. (e.g. 89 means the year 89, not the year 1989).
+     * @param month The month of the date (0-indexed, 0 = January). Must be an integer 0 - 11.
+     * @param date The date of month of the date. Must be an integer 1 - length of the given month.
+     * @returns The new date, or null if invalid.
+     */
+    abstract createDate(year: number, month: number, date: number): D;
+
+    /**
+     * Gets today's date.
+     * @returns Today's date.
+     */
+    abstract today(): D;
+
+    /**
+     * Parses a date from a user-provided value.
+     * @param value The value to parse.
+     * @param parseFormat The expected format of the value being parsed
+     *     (type is implementation-dependent).
+     * @returns The parsed date.
+     */
+    abstract parse(value: any, parseFormat: any): D | null;
+
+    /**
+     * Formats a date as a string according to the given format.
+     * @param date The value to format.
+     * @param displayFormat The format to use to display the date as a string.
+     * @returns The formatted date string.
+     */
+    abstract format(date: D, displayFormat: any): string;
+
+    /**
+     * Adds the given number of years to the date. Years are counted as if flipping 12 pages on the
+     * calendar for each year and then finding the closest date in the new month. For example when
+     * adding 1 year to Feb 29, 2016, the resulting date will be Feb 28, 2017.
+     * @param date The date to add years to.
+     * @param years The number of years to add (may be negative).
+     * @returns A new date equal to the given one with the specified number of years added.
+     */
+    abstract addCalendarYears(date: D, years: number): D;
+
+    /**
+     * Adds the given number of months to the date. Months are counted as if flipping a page on the
+     * calendar for each month and then finding the closest date in the new month. For example when
+     * adding 1 month to Jan 31, 2017, the resulting date will be Feb 28, 2017.
+     * @param date The date to add months to.
+     * @param months The number of months to add (may be negative).
+     * @returns A new date equal to the given one with the specified number of months added.
+     */
+    abstract addCalendarMonths(date: D, months: number): D;
+
+    /**
+     * Adds the given number of days to the date. Days are counted as if moving one cell on the
+     * calendar for each day.
+     * @param date The date to add days to.
+     * @param days The number of days to add (may be negative).
+     * @returns A new date equal to the given one with the specified number of days added.
+     */
+    abstract addCalendarDays(date: D, days: number): D;
+
+    /**
+     * Gets the RFC 3339 compatible string (https://tools.ietf.org/html/rfc3339) for the given date.
+     * This method is used to generate date strings that are compatible with native HTML attributes
+     * such as the `min` or `max` attribute of an `<input>`.
+     * @param date The date to get the ISO date string for.
+     * @returns The ISO date string date string.
+     */
+    abstract toIso8601(date: D): string;
+
+    /**
+     * Checks whether the given object is considered a date instance by this DateAdapter.
+     * @param obj The object to check
+     * @returns Whether the object is a date instance.
+     */
+    abstract isDateInstance(obj: any): boolean;
+
+    /**
+     * Checks whether the given date is valid.
+     * @param date The date to check.
+     * @returns Whether the date is valid.
+     */
+    abstract isValid(date: D): boolean;
+
+    /**
+     * Gets date instance that is not valid.
+     * @returns An invalid date.
+     */
+    abstract invalid(): D;
+
+    /**
+     * Attempts to deserialize a value to a valid date object. This is different from parsing in that
+     * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
+     * string). The default implementation does not allow any deserialization, it simply checks that
+     * the given value is already a valid date object or null. The `<mat-datepicker>` will call this
+     * method on all of it's `@Input()` properties that accept dates. It is therefore possible to
+     * support passing values from your backend directly to these properties by overriding this method
+     * to also deserialize the format used by your backend.
+     * @param value The value to be deserialized into a date object.
+     * @returns The deserialized date object, either a valid date, null if the value can be
+     *     deserialized into a null date (e.g. the empty string), or an invalid date.
+     */
+    deserialize(value: any): D | null {
+        if (value == null || this.isDateInstance(value) && this.isValid(value)) {
+            return value;
+        }
+
+        return this.invalid();
+    }
+
+    /**
+     * Sets the locale used for all dates.
+     * @param locale The new locale.
+     */
+    setLocale(locale: any) {
+        this.locale = locale;
+        this._localeChanges.next();
+    }
+
+    /**
+     * Compares two dates.
+     * @param first The first date to compare.
+     * @param second The second date to compare.
+     * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,
+     *     a number greater than 0 if the first date is later.
+     */
+    compareDate(first: D, second: D): number {
+        return this.getYear(first) - this.getYear(second) ||
+            this.getMonth(first) - this.getMonth(second) ||
+            this.getDate(first) - this.getDate(second);
+    }
+
+    /**
+     * Checks if two dates are equal.
+     * @param first The first date to check.
+     * @param second The second date to check.
+     * @returns Whether the two dates are equal.
+     *     Null dates are considered equal to other null dates.
+     */
+    sameDate(first: D | null, second: D | null): boolean {
+        if (first && second) {
+            const firstValid = this.isValid(first);
+            const secondValid = this.isValid(second);
+            if (firstValid && secondValid) {
+                return !this.compareDate(first, second);
+            }
+
+            return firstValid === secondValid;
+        }
+
+        return first === second;
+    }
+
+    /**
+     * Clamp the given date between min and max dates.
+     * @param date The date to clamp.
+     * @param min The minimum value to allow. If null or omitted no min is enforced.
+     * @param max The maximum value to allow. If null or omitted no max is enforced.
+     * @returns `min` if `date` is less than `min`, `max` if date is greater than `max`,
+     *     otherwise `date`.
+     */
+    clampDate(date: D, min?: D | null, max?: D | null): D {
+        if (min && this.compareDate(date, min) < 0) {
+            return min;
+        }
+        if (max && this.compareDate(date, max) > 0) {
+            return max;
+        }
+
+        return date;
+    }
+}

src/cdk/datetime/date-formats.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+
+
+// tslint:disable-next-line:naming-convention
+export interface McDateFormats {
+    parse: {
+        dateInput: any;
+    };
+    display: {
+        dateInput: any;
+        monthYearLabel: any;
+        dateA11yLabel: any;
+        monthYearA11yLabel: any;
+    };
+}
+
+export const MC_DATE_FORMATS = new InjectionToken<McDateFormats>('mc-date-formats');

src/cdk/datetime/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/cdk/datetime/public-api.ts

@@ -0,0 +1,2 @@
+export * from './date-formats';
+export * from './date-adapter';

src/cdk/datetime/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../tsconfig.build",
+    "files": [
+        "public-api.ts"
+    ],
+    "angularCompilerOptions": {
+        "strictMetadataEmit": true,
+        "flatModuleOutFile": "index.js",
+        "flatModuleId": "@ptsecurity/cdk/datetime",
+        "skipTemplateCodegen": true,
+        "fullTemplateTypeCheck": true
+    }
+}

src/cdk/version.ts

@@ -1,4 +1,3 @@
-
 import { Version } from '@angular/core';
 
 /** Current version of the Component Development Kit. */