igniteui-angular 21.0.3 → 21.1.0-alpha.1

package/fesm2022/igniteui-angular-date-picker.mjs

@@ -1,5 +1,5 @@
 import * as i2 from 'igniteui-angular/core';
-import { PickerInteractionMode, PickerHeaderOrientation, IgxPickerToggleComponent, IgxPickerClearComponent, DateRangePickerResourceStringsEN, CalendarDay, DateTimeUtil, IgxOverlayService, PlatformUtil, PickerCalendarOrientation, getCurrentResourceStrings, DatePickerResourceStringsEN, AutoPositionStrategy, AbsoluteScrollStrategy, isDate, isDateInRanges, DateRangeType, IgxPickerActionsDirective, clamp, parseDate, calendarRange } from 'igniteui-angular/core';
+import { PickerInteractionMode, I18N_FORMATTER, PickerHeaderOrientation, DEFAULT_LOCALE, onResourceChangeHandle, IgxPickerToggleComponent, IgxPickerClearComponent, DateRangePickerResourceStringsEN, CalendarDay, DateTimeUtil, IgxOverlayService, PlatformUtil, PickerCalendarOrientation, getCurrentResourceStrings, DatePickerResourceStringsEN, AutoPositionStrategy, AbsoluteScrollStrategy, isDate, isDateInRanges, DateRangeType, IgxPickerActionsDirective, clamp, parseDate, calendarRange } from 'igniteui-angular/core';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, LOCALE_ID, EventEmitter, booleanAttribute, ViewChild, ContentChildren, Output, Input, Directive, ChangeDetectionStrategy, Component, HostListener, HostBinding, Injector, Renderer2, ChangeDetectorRef, ViewContainerRef, ContentChild, Pipe, TemplateRef, NgModule } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
@@ -12,10 +12,49 @@ import { takeUntil, filter } from 'rxjs/operators';
 import { IgxButtonDirective, IgxRippleDirective, IgxDividerDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { fadeOut, fadeIn } from 'igniteui-angular/animations';
-import { getLocaleFirstDayOfWeek, NgTemplateOutlet } from '@angular/common';
+import { getCurrentI18n } from 'igniteui-i18n-core';
+import { NgTemplateOutlet } from '@angular/common';
 import { IgxChipComponent } from 'igniteui-angular/chips';
 
 class PickerBaseDirective {
+    /**
+     * The editor's input mask.
+     *
+     * @remarks
+     * Also used as a placeholder when none is provided.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>
+     * ```
+     */
+    set inputFormat(value) {
+        this._inputFormat = value;
+    }
+    ;
+    get inputFormat() {
+        return this._inputFormat;
+    }
+    /**
+     * The format used to display the picker's value when it's not being edited.
+     *
+     * @remarks
+     * Uses Angular's DatePipe.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>
+     * ```
+     *
+     */
+    set displayFormat(value) {
+        this._displayFormat = value;
+    }
+    ;
+    get displayFormat() {
+        return this._displayFormat ?? this._inputFormat;
+    }
+    ;
     /**
      * @example
      * ```html
@@ -27,21 +66,15 @@ class PickerBaseDirective {
      * If not set, defaults to applciation's locale..
      */
     get locale() {
-        return this._locale;
+        return this._locale || this._defaultLocale;
     }
     /**
      * Sets the `locale` of the date-picker.
      * Expects a valid BCP 47 language tag.
      */
     set locale(value) {
-        this._locale = value;
-        // if value is invalid, set it back to _localeId
-        try {
-            getLocaleFirstDayOfWeek(this._locale);
-        }
-        catch (e) {
-            this._locale = this._localeId;
-        }
+        this._locale = this.i18nFormatter.verifyLocale(value);
+        this.updateResources();
     }
     /**
      * Gets the start day of the week.
@@ -49,7 +82,7 @@ class PickerBaseDirective {
      * If not set, defaults to the first day of the week for the application locale.
      */
     get weekStart() {
-        return this._weekStart ?? getLocaleFirstDayOfWeek(this._locale);
+        return this._weekStart ?? this.i18nFormatter.getLocaleFirstDayOfWeek(this.locale);
     }
     /**
      * Sets the start day of the week.
@@ -105,6 +138,7 @@ class PickerBaseDirective {
         this.element = inject(ElementRef);
         this._localeId = inject(LOCALE_ID);
         this._inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true });
+        this.i18nFormatter = inject(I18N_FORMATTER);
         /**
          * Sets the `placeholder` of the picker's input.
          *
@@ -191,7 +225,7 @@ class PickerBaseDirective {
         this.closed = new EventEmitter();
         this._collapsed = true;
         this._destroy$ = new Subject();
-        this.locale = this.locale || this._localeId;
+        this.initLocale();
     }
     /** @hidden @internal */
     ngAfterViewInit() {
@@ -225,6 +259,16 @@ class PickerBaseDirective {
         components.changes.pipe(takeUntil(this._destroy$))
             .subscribe(() => subscribeToClick(components));
     }
+    initLocale() {
+        this._defaultLocale = getCurrentI18n();
+        this._locale = this._localeId !== DEFAULT_LOCALE ? this._localeId : this._locale;
+        onResourceChangeHandle(this._destroy$, this.onResourceChange, this);
+    }
+    onResourceChange(args) {
+        this._defaultLocale = args.detail.newLocale;
+        this.updateResources();
+    }
+    updateResources() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PickerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: PickerBaseDirective, isStandalone: true, inputs: { inputFormat: "inputFormat", displayFormat: "displayFormat", placeholder: "placeholder", mode: "mode", headerOrientation: "headerOrientation", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], overlaySettings: "overlaySettings", disabled: ["disabled", "disabled", booleanAttribute], locale: "locale", weekStart: "weekStart", outlet: "outlet", type: "type", tabIndex: "tabIndex" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, queries: [{ propertyName: "toggleComponents", predicate: IgxPickerToggleComponent, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent, descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: IgxInputGroupComponent, descendants: true }], ngImport: i0 }); }
 }
@@ -527,6 +571,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
         this._renderer = inject(Renderer2);
         this.platform = inject(PlatformUtil);
         this.cdr = inject(ChangeDetectorRef);
+        this._i18nFormatter = inject(I18N_FORMATTER);
         /**
          * Gets/Sets the number of month views displayed.
          *
@@ -638,7 +683,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
             this.updateValidity();
             this.inputGroup.isRequired = this.required;
         };
-        this.locale = this.locale || this._localeId;
+        this.initLocale();
     }
     /** @hidden @internal */
     get required() {
@@ -856,7 +901,6 @@ class IgxDatePickerComponent extends PickerBaseDirective {
     /** @hidden @internal */
     ngOnInit() {
         this._ngControl = this._injector.get(NgControl, null);
-        this.locale = this.locale || this._localeId;
     }
     /** @hidden @internal */
     ngAfterViewInit() {
@@ -1060,6 +1104,9 @@ class IgxDatePickerComponent extends PickerBaseDirective {
         componentInstance.calendarClose.pipe(takeUntil(this._destroy$)).subscribe(() => this.close());
         componentInstance.todaySelection.pipe(takeUntil(this._destroy$)).subscribe(() => this.selectToday());
     }
+    updateResources() {
+        this._resourceStrings = getCurrentResourceStrings(DatePickerResourceStringsEN, false, this._locale);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxDatePickerComponent, isStandalone: true, selector: "igx-date-picker", inputs: { hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], displayMonthsCount: "displayMonthsCount", orientation: "orientation", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", formatter: "formatter", todayButtonLabel: "todayButtonLabel", cancelButtonLabel: "cancelButtonLabel", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], spinDelta: "spinDelta", outlet: "outlet", id: "id", formatViews: "formatViews", disabledDates: "disabledDates", specialDates: "specialDates", calendarFormat: "calendarFormat", value: "value", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", readOnly: ["readOnly", "readOnly", booleanAttribute] }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
@@ -1183,6 +1230,9 @@ const IGX_DATE_PICKER_DIRECTIVES = [
 
 /** @hidden @internal */
 class DateRangePickerFormatPipe {
+    constructor() {
+        this.i18nFormatter = inject(I18N_FORMATTER);
+    }
     transform(values, appliedFormat, locale, formatter) {
         if (!values || !values.start && !values.end) {
             return '';
@@ -1197,8 +1247,8 @@ class DateRangePickerFormatPipe {
         if (!isDate(end)) {
             end = DateTimeUtil.parseIsoDate(end);
         }
-        const startDate = appliedFormat ? DateTimeUtil.formatDate(start, appliedFormat, locale || 'en') : start?.toLocaleDateString();
-        const endDate = appliedFormat ? DateTimeUtil.formatDate(end, appliedFormat, locale || 'en') : end?.toLocaleDateString();
+        const startDate = this.i18nFormatter.formatDate(start, appliedFormat, locale);
+        const endDate = this.i18nFormatter.formatDate(end, appliedFormat, locale);
         let formatted;
         if (start) {
             formatted = `${startDate} - `;
@@ -1460,6 +1510,40 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
         }
         return this._cancelButtonText;
     }
+    /**
+     * The format used when editable inputs are not focused.
+     *
+     * @remarks
+     * Uses Angular's DatePipe.
+     *
+     * @example
+     * ```html
+     * <igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker>
+     * ```
+     *
+     */
+    set displayFormat(value) {
+        super.displayFormat = value;
+    }
+    get displayFormat() {
+        return super.displayFormat;
+    }
+    /**
+     * The expected user input format and placeholder.
+     *
+     * @example
+     * ```html
+     * <igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker>
+     * ```
+     */
+    set inputFormat(value) {
+        super.inputFormat = value;
+    }
+    ;
+    get inputFormat() {
+        // We need to get default input format because igxDateRangePicker is not using igxDateTimeEditor, but a plain input ???
+        return this._inputFormat ?? DateTimeUtil.getDefaultInputFormat(this.locale, this.i18nFormatter);
+    }
     /**
      * The minimum value in a valid range.
      *
@@ -1528,7 +1612,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
      * An accessor that returns the resource strings.
      */
     get resourceStrings() {
-        return this._resourceStrings;
+        return this._resourceStrings || this._defaultResourceStrings;
     }
     /** @hidden @internal */
     get dateSeparator() {
@@ -1539,8 +1623,11 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     }
     /** @hidden @internal */
     get appliedFormat() {
-        return DateTimeUtil.getLocaleDateFormat(this.locale, this.displayFormat)
-            || DateTimeUtil.DEFAULT_INPUT_FORMAT;
+        // Resolve display format since it can be custom specified one like short, long, shortDate, longDate and etc.
+        const formatOptions = this.i18nFormatter.getFormatOptions(this.displayFormat);
+        return formatOptions
+            ? this.i18nFormatter.getLocaleDateTimeFormat(this.locale, false, formatOptions)
+            : this.displayFormat ?? this.inputFormat;
     }
     /**
      * Gets/Sets the date which is shown in the calendar picker and is highlighted.
@@ -1565,21 +1652,15 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
      * If not set, defaults to application's locale.
      */
     get locale() {
-        return this._locale;
+        return this._locale || this._defaultLocale;
     }
     /**
      * Sets the `locale` of the date-picker.
      * Expects a valid BCP 47 language tag.
      */
     set locale(value) {
-        this._locale = value;
-        // if value is invalid, set it back to _localeId
-        try {
-            getLocaleFirstDayOfWeek(this._locale);
-        }
-        catch (e) {
-            this._locale = this._localeId;
-        }
+        this._locale = this.i18nFormatter.verifyLocale(value);
+        this.updateResources();
         if (this.hasProjectedInputs) {
             this.updateInputLocale();
             this.updateDisplayFormat();
@@ -1725,7 +1806,8 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
         this.valueChange = new EventEmitter();
         /** @hidden @internal */
         this.cssClass = 'igx-date-range-picker';
-        this._resourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN);
+        this._resourceStrings = null;
+        this._defaultResourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN);
         this._doneButtonText = null;
         this._cancelButtonText = null;
         this._dateSeparator = null;
@@ -1762,7 +1844,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
             }
             this.setRequiredToInputs();
         };
-        this.locale = this.locale || this._localeId;
+        this.initLocale();
     }
     /** @hidden @internal */
     onKeyDown(event) {
@@ -1932,7 +2014,6 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     /** @hidden */
     ngOnInit() {
         this._ngControl = this._injector.get(NgControl, null);
-        this.locale = this.locale || this._localeId;
     }
     /** @hidden */
     ngAfterViewInit() {
@@ -2345,8 +2426,19 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
         this.projectedInputs.forEach(i => {
             const input = i;
             input.dateTimeEditor.locale = this.locale;
+            input.dateTimeEditor.updateMask();
         });
     }
+    onResourceChange(args) {
+        super.onResourceChange(args);
+        if (args.detail.oldLocale !== args.detail.newLocale && this.hasProjectedInputs) {
+            this.updateInputLocale();
+            this.updateDisplayFormat();
+        }
+    }
+    updateResources() {
+        this._defaultResourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN, false, this._locale);
+    }
     _initializeCalendarContainer(componentInstance) {
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;