igniteui-angular 21.0.3 → 21.1.0-alpha.1

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

@@ -1,5 +1,5 @@
 import * as i2 from 'igniteui-angular/core';
-import { HammerGesturesManager, DateTimeUtil, DatePart, PickerHeaderOrientation, PlatformUtil, PickerInteractionMode, getCurrentResourceStrings, TimePickerResourceStringsEN, AutoPositionStrategy, AbsoluteScrollStrategy, isDate, isEqual, IgxPickerActionsDirective, IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular/core';
+import { HammerGesturesManager, I18N_FORMATTER, DateTimeUtil, DatePart, GridColumnDataType, PickerHeaderOrientation, PlatformUtil, PickerInteractionMode, getCurrentResourceStrings, TimePickerResourceStringsEN, AutoPositionStrategy, AbsoluteScrollStrategy, isDate, isEqual, IgxPickerActionsDirective, IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular/core';
 import { DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ElementRef, HostListener, HostBinding, Input, Directive, Pipe, Injector, ChangeDetectorRef, EventEmitter, booleanAttribute, ViewChild, ContentChild, Output, Component, NgModule } from '@angular/core';
@@ -258,6 +258,7 @@ class IgxTimeItemDirective {
     constructor() {
         this.timePicker = inject(IGX_TIME_PICKER_COMPONENT);
         this.itemList = inject(IgxItemListDirective);
+        this._i18nFormatter = inject(I18N_FORMATTER);
     }
     get defaultCSS() {
         return true;
@@ -271,7 +272,7 @@ class IgxTimeItemDirective {
     get isSelectedTime() {
         const currentValue = this.value.length < 2 ? `0${this.value}` : this.value;
         const dateType = this.itemList.type;
-        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat);
+        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat, this._i18nFormatter);
         switch (dateType) {
             case 'hourList':
                 const hourPart = inputDateParts.find(element => element.type === 'hours');
@@ -289,7 +290,7 @@ class IgxTimeItemDirective {
     }
     get minValue() {
         const dateType = this.itemList.type;
-        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat);
+        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat, this._i18nFormatter);
         switch (dateType) {
             case 'hourList':
                 return this.getHourPart(this.timePicker.minDropdownValue);
@@ -316,7 +317,7 @@ class IgxTimeItemDirective {
     }
     get maxValue() {
         const dateType = this.itemList.type;
-        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat);
+        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat, this._i18nFormatter);
         switch (dateType) {
             case 'hourList':
                 return this.getHourPart(this.timePicker.maxDropdownValue);
@@ -366,7 +367,7 @@ class IgxTimeItemDirective {
         }
     }
     getHourPart(date) {
-        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat);
+        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat, this._i18nFormatter);
         const hourPart = inputDateParts.find(element => element.type === 'hours');
         const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1 || element.format === 'tt');
         const hour = DateTimeUtil.getPartValue(date, hourPart, hourPart.format.length);
@@ -604,6 +605,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 
 let NEXT_ID = 0;
 class IgxTimePickerComponent extends PickerBaseDirective {
+    /**
+     * The format used when editable input is not focused. Defaults to the `inputFormat` if not set.
+     *
+     * @remarks
+     * Uses Angular's `DatePipe`.
+     *
+     * @example
+     * ```html
+     * <igx-time-picker displayFormat="mm:ss"></igx-time-picker>
+     * ```
+     *
+     */
+    set displayFormat(value) {
+        super.displayFormat = value;
+    }
+    ;
+    get displayFormat() {
+        return this._displayFormat ?? this.inputFormat ?? DateTimeUtil.getDefaultInputFormat(this.locale, this.i18nFormatter, GridColumnDataType.Time);
+    }
+    ;
+    /**
+     * The expected user input format and placeholder.
+     *
+     * @remarks
+     * Default is `hh:mm tt`
+     *
+     * @example
+     * ```html
+     * <igx-time-picker inputFormat="HH:mm"></igx-time-picker>
+     * ```
+     */
+    set inputFormat(value) {
+        super.inputFormat = value;
+    }
+    get inputFormat() {
+        return super.inputFormat;
+    }
     /**
      * The minimum value the picker will accept.
      *
@@ -796,7 +834,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
      * An accessor that returns the resource strings.
      */
     get resourceStrings() {
-        return this._resourceStrings;
+        return this._resourceStrings || this._defaultResourceStrings;
     }
     /**
      * Overrides the default text of the **OK** button.
@@ -929,7 +967,8 @@ class IgxTimePickerComponent extends PickerBaseDirective {
         this.secondsItems = [];
         /** @hidden @internal */
         this.ampmItems = [];
-        this._resourceStrings = getCurrentResourceStrings(TimePickerResourceStringsEN);
+        this._resourceStrings = null;
+        this._defaultResourceStrings = getCurrentResourceStrings(TimePickerResourceStringsEN);
         this._okButtonLabel = null;
         this._cancelButtonLabel = null;
         this._itemsDelta = { hours: 1, minutes: 1, seconds: 1, fractionalSeconds: 1 };
@@ -977,7 +1016,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
     }
     /** @hidden @internal */
     getPartValue(value, type) {
-        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.appliedFormat);
+        const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.appliedFormat, this.i18nFormatter);
         const part = inputDateParts.find(element => element.type === type);
         return DateTimeUtil.getPartValue(value, part, part.format?.length);
     }
@@ -1364,6 +1403,9 @@ class IgxTimePickerComponent extends PickerBaseDirective {
             this._inputGroup.isRequired = this.required;
         }
     }
+    updateResources() {
+        this._defaultResourceStrings = getCurrentResourceStrings(TimePickerResourceStringsEN, false, this._locale);
+    }
     get isTouchedOrDirty() {
         return (this._ngControl.control.touched || this._ngControl.control.dirty);
     }