Merge branch 'master' into skrastev/feat-7387

Author: ChronosSF

gulpfile.js

@@ -135,7 +135,9 @@ module.exports.copySchematics = (cb) => {
 };
 
 const typedocBuildTheme = (cb) => {
-    spawnSync(`typedoc`, [TYPEDOC.PROJECT_PATH], { stdio: 'inherit', shell: true });
+    spawnSync(`typedoc`, [TYPEDOC.PROJECT_PATH,
+    "--tsconfig",
+    "tsconfig.base.json"], { stdio: 'inherit', shell: true });
     cb();
 };
 typedocBuildTheme.displayName = 'typedoc-build:theme';
@@ -208,7 +210,9 @@ function typedocBuildDocsJA (cb) {
             TYPEDOC.TEMPLATE_STRINGS_PATH,
             '--warns',
             '--localize',
-            'jp'], { stdio: 'inherit', shell: true });
+            'jp',
+            "--tsconfig",
+            "tsconfig.base.json"], { stdio: 'inherit', shell: true });
 
         cb();
 }
@@ -217,7 +221,9 @@ function typedocBuildDocsEN (cb) {
         spawnSync('typedoc', [
             TYPEDOC.PROJECT_PATH,
             '--localize',
-            'en'], { stdio: 'inherit', shell: true});
+            'en',
+            "--tsconfig",
+            "tsconfig.base.json"], { stdio: 'inherit', shell: true});
 
         cb();
 }

package-lock.json

@@ -25,7 +25,7 @@
     "build:style": "gulp buildStyle",
     "build:migration": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json",
     "build:schematics": "gulp copySchematics && tsc --listEmittedFiles --project ./projects/igniteui-angular/schematics/tsconfig.json",
-    "build:docs": "sassdoc projects/igniteui-angular/src/lib/core/styles && gulp typedocBuildTheme",
+    "build:docs": "sassdoc projects/igniteui-angular/src/lib/core/styles && gulp typedoc-build:theme",
     "lint:lib": "ng lint && stylelint \"projects/igniteui-angular/src/lib/core/styles\"",
     "typedoc:dev": "gulp typedocServe",
     "typedoc-build:export": "gulp exportTypedocJson ",
@@ -93,7 +93,7 @@
     "gulp-util": "^3.0.8",
     "hammer-simulator": "0.0.1",
     "igniteui-sassdoc-theme": "^1.1.2",
-    "igniteui-typedoc-theme": "^1.3.5",
+    "igniteui-typedoc-theme": "^1.3.6",
     "jasmine": "~3.5.0",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.2",
@@ -116,7 +116,7 @@
     "themeleon": "^3.0.2",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
-    "typedoc": "^0.16.9",
+    "typedoc": "^0.17.7",
     "typedoc-plugin-localization": "^2.2.1",
     "typescript": "~3.9.3",
     "webpack-sources": "1.3.0"

package.json

@@ -1,5 +1,6 @@
 import { isIE } from '../core/utils';
 import { DatePart, DatePartInfo } from '../directives/date-time-editor/date-time-editor.common';
+import { formatDate, FormatWidth, getLocaleDateFormat } from '@angular/common';
 
 /**
  * This enum is used to keep the date validation result.
@@ -48,7 +49,7 @@ export abstract class DatePickerUtil {
 
 
     /**
-     *  TODO: Unit tests for all public methods.
+     *  TODO: (in issue #6483) Unit tests and docs for all public methods.
      */
 
 
@@ -147,6 +148,38 @@ export abstract class DatePickerUtil {
         return DatePickerUtil.getMask(parts);
     }
 
+    public static formatDate(value: number | Date, format: string, locale: string, timezone?: string): string {
+        let formattedDate: string;
+        try {
+            formattedDate = formatDate(value, format, locale, timezone);
+        } catch {
+            this.logMissingLocaleSettings(locale);
+            const formatter = new Intl.DateTimeFormat(locale);
+            formattedDate = formatter.format(value);
+        }
+
+        return formattedDate;
+    }
+
+    public static getLocaleDateFormat(locale: string, displayFormat?: string): string {
+        const formatKeys = Object.keys(FormatWidth) as (keyof FormatWidth)[];
+        const targetKey = formatKeys.find(k => k.toLowerCase() === displayFormat?.toLowerCase().replace('date', ''));
+        if (!targetKey) {
+            // if displayFormat is not shortDate, longDate, etc.
+            // or if it is not set by the user
+            return displayFormat;
+        }
+        let format: string;
+        try {
+            format = getLocaleDateFormat(locale, FormatWidth[targetKey]);
+        } catch {
+            this.logMissingLocaleSettings(locale);
+            format = DatePickerUtil.getDefaultInputFormat(locale);
+        }
+
+        return format;
+    }
+
     public static isDateOrTimeChar(char: string): boolean {
         return DATE_CHARS.indexOf(char) !== -1 || TIME_CHARS.indexOf(char) !== -1;
     }
@@ -303,6 +336,11 @@ export abstract class DatePickerUtil {
         return _value.getTime() < _minValue.getTime();
     }
 
+    private static logMissingLocaleSettings(locale: string): void {
+        console.warn(`Missing locale data for the locale ${locale}. Please refer to https://angular.io/guide/i18n#i18n-pipes`);
+        console.warn('Using default browser locale settings.');
+    }
+
     private static ensureLeadingZero(part: DatePartInfo) {
         switch (part.type) {
             case DatePart.Date:

projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts

@@ -1,9 +1,9 @@
 import { Component, ContentChild, Pipe, PipeTransform, Output, EventEmitter, HostListener, Directive } from '@angular/core';
-import { formatDate } from '@angular/common';
 import { NgControl } from '@angular/forms';
 import { IgxInputDirective, IgxInputState } from '../input-group/public_api';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxInputGroupBase } from '../input-group/input-group.common';
+import { DatePickerUtil } from '../date-picker/date-picker.utils';
 import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 
 /**
@@ -17,14 +17,17 @@ export interface DateRange {
 /** @hidden @internal */
 @Pipe({ name: 'dateRange' })
 export class DateRangePickerFormatPipe implements PipeTransform {
-    public transform(values: DateRange, inputFormat?: string, locale?: string): string {
-        if (!values) {
+    public transform(values: DateRange, appliedFormat?: string,
+        locale?: string, formatter?: (_: DateRange) => string): string {
+        if (!values || !values.start && !values.end) {
             return '';
         }
+        if (formatter) {
+            return formatter(values);
+        }
         const { start, end } = values;
-        // TODO: move default locale from IgxDateTimeEditorDirective to its commons file/use displayFormat
-        const startDate = inputFormat ? formatDate(start, inputFormat, locale || 'en') : start?.toLocaleDateString();
-        const endDate = inputFormat ? formatDate(end, inputFormat, locale || 'en') : end?.toLocaleDateString();
+        const startDate = appliedFormat ? DatePickerUtil.formatDate(start, appliedFormat, locale || 'en') : start?.toLocaleDateString();
+        const endDate = appliedFormat ? DatePickerUtil.formatDate(end, appliedFormat, locale || 'en') : end?.toLocaleDateString();
         let formatted;
         if (start) {
             formatted = `${startDate} - `;
@@ -33,7 +36,6 @@ export class DateRangePickerFormatPipe implements PipeTransform {
             }
         }
 
-        // TODO: no need to set format twice
         return formatted ? formatted : '';
     }
 }

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts

@@ -43,12 +43,12 @@
 <ng-template #defTemplate>
     <igx-input-group (click)="open()">
         <input #singleInput igxInput type="text" readonly
-            [placeholder]="this.value ? '' : appliedFormat"
+            [placeholder]="this.value ? '' : singleInputFormat"
             role="combobox"
             aria-haspopup="grid"
             [attr.aria-expanded]="!toggle.collapsed"
             [attr.aria-labelledby]="this.label?.id"
-            [value]="this.value | dateRange: this.inputFormat : this.locale"
+            [value]="this.value | dateRange: this.appliedFormat : this.locale : this.formatter"
         />
 
         <igx-prefix *ngIf="!this.toggleComponents.length">