igniteui-webcomponents 7.1.3 → 7.2.0

package/components/date-range-picker/date-range-picker.d.ts

@@ -1,9 +1,11 @@
+import { type ICalendarResourceStrings, type IDateRangePickerResourceStrings } from 'igniteui-i18n-core';
 import { nothing, type TemplateResult } from 'lit';
 import type { DateRangeDescriptor, WeekDays } from '../calendar/types.js';
-import { type IgcDateRangePickerResourceStrings } from '../common/i18n/EN/date-range-picker.resources.js';
+import type { IgcDateRangePickerResourceStrings } from '../common/i18n/EN/date-range-picker.resources.js';
 import { IgcComboBoxBaseLikeComponent } from '../common/mixins/combo-box.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import type { ContentOrientation, PickerMode } from '../types.js';
+import { DateRangePosition } from './date-range-mask-parser.js';
 export interface DateRangeValue {
     start: Date | null;
     end: Date | null;
@@ -20,6 +22,7 @@ export interface IgcDateRangePickerComponentEventMap {
     igcChange: CustomEvent<DateRangeValue | null>;
     igcInput: CustomEvent<DateRangeValue | null>;
 }
+export type DateRangePickerResourceStringsType = IDateRangePickerResourceStrings & ICalendarResourceStrings;
 declare const IgcDateRangePickerComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDateRangePickerComponentEventMap>> & AbstractConstructor<IgcComboBoxBaseLikeComponent>;
 /**
  * The igc-date-range-picker allows the user to select a range of dates.
@@ -121,13 +124,13 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     static register(): void;
     protected readonly _inputId: string;
     private readonly _themes;
-    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<DateRangeValue | null>;
+    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<import("../types.js").DateRangeValue | null>;
     protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
     /**
      * For now we use the core validation strings internally only, to avoid mixing with old resources by users.
      * To Do: Update resourceStrings type when the IgcDateRangePickerResourceStrings is changed to IDateRangePickerResourceStrings
      */
-    protected readonly _i18nController: import("../common/i18n/i18n-controller.js").I18nController<IgcDateRangePickerResourceStrings>;
+    protected readonly _i18nController: import("../common/i18n/i18n-controller.js").I18nController<IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType>;
     private _activeDate;
     private _min;
     private _max;
@@ -143,7 +146,6 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     protected get __validators(): import("../common/validators.js").Validator<IgcDateRangePickerComponent>[];
     private get _isDropDown();
     private get _firstDefinedInRange();
-    private _maskedRangeValue;
     private readonly _inputs;
     private readonly _input;
     private readonly _calendar;
@@ -187,8 +189,8 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     set locale(value: string);
     get locale(): string;
     /** The resource strings of the date range picker. */
-    set resourceStrings(value: IgcDateRangePickerResourceStrings);
-    get resourceStrings(): IgcDateRangePickerResourceStrings;
+    set resourceStrings(value: IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType);
+    get resourceStrings(): IgcDateRangePickerResourceStrings & DateRangePickerResourceStringsType;
     /**
      * Makes the control a readonly field.
      * @attr readonly
@@ -313,6 +315,10 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected firstUpdated(): void;
     protected formResetCallback(): void;
+    /** @internal */
+    hasDateParts(): boolean;
+    /** @internal */
+    hasTimeParts(): boolean;
     /** Clears the input parts of the component of any user input */
     clear(): void;
     /** Selects a date range value in the picker */
@@ -326,8 +332,10 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     protected _handleDialogClosed(event: Event): void;
     protected _dialogCancel(): void;
     protected _dialogDone(): void;
-    protected _handleInputEvent(event: CustomEvent<Date | null>): void;
-    protected _handleInputChangeEvent(event: CustomEvent<Date | null>): void;
+    protected _handleInput(event: CustomEvent<string>): void;
+    protected _handleInputChange(event: CustomEvent<Date | null>): void;
+    protected _handleDateRangeInput(event: CustomEvent<string>): Promise<void>;
+    protected _handleDateRangeInputChange(event: CustomEvent<DateRangeValue | null>): void;
     protected _handleFocusOut({ relatedTarget }: FocusEvent): void;
     protected _handleInputClick(event: Event): void;
     protected _onEscapeKey(): Promise<void>;
@@ -343,7 +351,6 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     private _getUpdatedDateRange;
     private _delegateInputsValidity;
     private _setDateConstraints;
-    private _updateMaskedRangeValue;
     private _setCalendarRangeValues;
     private _swapDates;
     private _shouldCloseCalendarDropdown;
@@ -356,7 +363,7 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     protected _renderPredefinedRanges(): typeof nothing | TemplateResult<1>;
     protected _renderPicker(id: string): TemplateResult<1>;
     private _renderHelperText;
-    protected _renderInput(id: string, picker?: DateRangePickerInput): TemplateResult<1>;
+    protected _renderInput(id: string, picker?: DateRangePosition): TemplateResult<1>;
     private _renderInputs;
     private _renderSingleInput;
     protected render(): TemplateResult<1>;
@@ -366,5 +373,4 @@ declare global {
         'igc-date-range-picker': IgcDateRangePickerComponent;
     }
 }
-type DateRangePickerInput = 'start' | 'end';
 export {};

package/components/date-range-picker/date-range-picker.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcDateRangePickerComponent_1;
-import { getDateFormatter } from 'igniteui-i18n-core';
+import { CalendarResourceStringsEN, DateRangePickerResourceStringsEN, getDateFormatter, } from 'igniteui-i18n-core';
 import { html, nothing } from 'lit';
-import { property, query, queryAll, queryAssignedElements, state, } from 'lit/decorators.js';
+import { property, query, queryAll, queryAssignedElements, } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -21,8 +21,7 @@ import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditio
 import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { IgcDateRangePickerResourceStringsEN, } from '../common/i18n/EN/date-range-picker.resources.js';
-import { addI18nController, formatDisplayDate, getDateTimeFormat, getDefaultDateTimeFormat, } from '../common/i18n/i18n-controller.js';
+import { addI18nController, getDateTimeFormat, getDefaultDateTimeFormat, } from '../common/i18n/i18n-controller.js';
 import { IgcComboBoxBaseLikeComponent } from '../common/mixins/combo-box.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
@@ -33,9 +32,10 @@ import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
 import IgcDialogComponent from '../dialog/dialog.js';
 import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
 import IgcIconComponent from '../icon/icon.js';
-import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
+import IgcDateRangeInputComponent from './date-range-input.js';
+import { DateRangePosition } from './date-range-mask-parser.js';
 import { styles } from './date-range-picker.base.css.js';
 import IgcPredefinedRangesAreaComponent from './predefined-ranges-area.js';
 import { styles as shared } from './themes/shared/date-range-picker.common.css.js';
@@ -47,7 +47,7 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     static { this.tagName = 'igc-date-range-picker'; }
     static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcDateRangePickerComponent_1, IgcCalendarComponent, IgcDateTimeInputComponent, IgcInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent, IgcPredefinedRangesAreaComponent);
+        registerComponent(IgcDateRangePickerComponent_1, IgcDateRangeInputComponent, IgcCalendarComponent, IgcDateTimeInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent, IgcPredefinedRangesAreaComponent);
     }
     get __validators() {
         return dateRangeValidators;
@@ -61,7 +61,6 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     set value(value) {
         this._formValue.setValueAndFormState(convertToDateRange(value));
         this._setCalendarRangeValues();
-        this._updateMaskedRangeValue();
     }
     get value() {
         return this._formValue.value;
@@ -87,14 +86,12 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     }
     set displayFormat(value) {
         this._displayFormat = value;
-        this._updateMaskedRangeValue();
     }
     get displayFormat() {
         return (this._displayFormat ?? this._inputFormat ?? this._defaultDisplayFormat);
     }
     set inputFormat(value) {
         this._inputFormat = value;
-        this._updateMaskedRangeValue();
     }
     get inputFormat() {
         return this._inputFormat ?? this._defaultMask;
@@ -147,7 +144,8 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             onHide: this._handleClosing,
         });
         this._i18nController = addI18nController(this, {
-            defaultEN: IgcDateRangePickerResourceStringsEN,
+            defaultEN: Object.assign({}, DateRangePickerResourceStringsEN, CalendarResourceStringsEN),
+            resourceMapName: 'date-range-picker',
             onResourceChange: this._updateDefaultMask,
         });
         this._activeDate = null;
@@ -157,7 +155,6 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         this._dateConstraints = [];
         this._oldValue = null;
         this._visibleMonths = 2;
-        this._maskedRangeValue = '';
         this.customRanges = [];
         this.mode = 'dropdown';
         this.useTwoInputs = false;
@@ -196,7 +193,16 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     formResetCallback() {
         super.formResetCallback();
         this._setCalendarRangeValues();
-        this._updateMaskedRangeValue();
+    }
+    hasDateParts() {
+        return this.useTwoInputs
+            ? this._inputs[0].hasDateParts()
+            : this._input.hasDateParts();
+    }
+    hasTimeParts() {
+        return this.useTwoInputs
+            ? this._inputs[0].hasTimeParts()
+            : this._input.hasTimeParts();
     }
     clear() {
         this._oldValue = this.value;
@@ -205,6 +211,10 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             this._inputs[0]?.clear();
             this._inputs[1]?.clear();
         }
+        else {
+            this._input.value = null;
+            this._input?.clear();
+        }
     }
     select(value) {
         this._select(value);
@@ -218,11 +228,9 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     _updateDefaultMask() {
         this._defaultMask = getDefaultDateTimeFormat(this.locale);
         this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
-        this._updateMaskedRangeValue();
     }
     async _updateDateRange() {
         await this._calendar?.updateComplete;
-        this._updateMaskedRangeValue();
         this._setCalendarRangeValues();
         this._delegateInputsValidity();
     }
@@ -258,9 +266,8 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         }
         this._hide(true);
     }
-    _handleInputEvent(event) {
+    _handleInput(event) {
         event.stopPropagation();
-        this._setTouchedState();
         if (this.nonEditable) {
             event.preventDefault();
             return;
@@ -272,13 +279,39 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             newValue ?? this._firstDefinedInRange ?? this._calendar.activeDate;
         this.emitEvent('igcInput', { detail: this.value });
     }
-    _handleInputChangeEvent(event) {
+    _handleInputChange(event) {
         event.stopPropagation();
-        this._setTouchedState();
         const input = event.target;
         const newValue = input.value ? CalendarDay.from(input.value).native : null;
         const updatedRange = this._getUpdatedDateRange(input, newValue);
-        const { start, end } = this._swapDates(updatedRange);
+        const { start, end } = this._swapDates(updatedRange) ?? {
+            start: null,
+            end: null,
+        };
+        this._setCalendarRangeValues();
+        this.value = { start, end };
+        this.emitEvent('igcChange', { detail: this.value });
+    }
+    async _handleDateRangeInput(event) {
+        event.stopPropagation();
+        if (this.nonEditable) {
+            event.preventDefault();
+            return;
+        }
+        const input = event.target;
+        const newValue = input.value;
+        this.value = newValue;
+        this._calendar.activeDate = newValue?.start;
+        this.emitEvent('igcInput', { detail: this.value });
+    }
+    _handleDateRangeInputChange(event) {
+        event.stopPropagation();
+        const input = event.target;
+        const newValue = input.value;
+        const { start, end } = this._swapDates(newValue) ?? {
+            start: null,
+            end: null,
+        };
         this._setCalendarRangeValues();
         this.value = { start, end };
         this.emitEvent('igcChange', { detail: this.value });
@@ -286,11 +319,6 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     _handleFocusOut({ relatedTarget }) {
         if (!this.contains(relatedTarget)) {
             this._handleBlur();
-            const isSameValue = equal(this.value, this._oldValue);
-            if (!(this.useTwoInputs || this.readOnly || isSameValue)) {
-                this.emitEvent('igcChange', { detail: this.value });
-                this._oldValue = this.value;
-            }
         }
     }
     _handleInputClick(event) {
@@ -360,20 +388,6 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         this._dateConstraints =
             createDateConstraints(this.min, this.max, this.disabledDates) ?? [];
     }
-    _updateMaskedRangeValue() {
-        if (this.useTwoInputs) {
-            return;
-        }
-        if (!isCompleteDateRange(this.value)) {
-            this._maskedRangeValue = '';
-            return;
-        }
-        const { start, end } = this.value;
-        const displayFormat = getDateTimeFormat(this.displayFormat);
-        const startValue = formatDisplayDate(start, this.locale, displayFormat);
-        const endValue = formatDisplayDate(end, this.locale, displayFormat);
-        this._maskedRangeValue = `${startValue} - ${endValue}`;
-    }
     _setCalendarRangeValues() {
         if (!this._calendar) {
             return;
@@ -413,7 +427,7 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             this._hide(true);
         }
     }
-    _renderClearIcon(picker = 'start') {
+    _renderClearIcon(picker = DateRangePosition.Start) {
         const clearIcon = this.useTwoInputs ? `clear-icon-${picker}` : 'clear-icon';
         return this._firstDefinedInRange
             ? html `
@@ -433,7 +447,7 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         `
             : nothing;
     }
-    _renderCalendarIcon(picker = 'start') {
+    _renderCalendarIcon(picker = DateRangePosition.Start) {
         const defaultIcon = html `
       <igc-icon name="today" collection="default" aria-hidden="true"></igc-icon>
     `;
@@ -459,7 +473,7 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             : 'header-date';
         return html `
       <slot name="title" slot="title">
-        ${this.resourceStrings.selectDate}
+        ${this.resourceStrings.calendar_select_date}
       </slot>
       <slot name="header-date" slot=${hasHeaderDate}></slot>
     `;
@@ -529,7 +543,7 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         `
             : html `
           <igc-dialog
-            aria-label=${ifDefined(this.resourceStrings.selectDate)}
+            aria-label=${ifDefined(this.resourceStrings.calendar_select_date)}
             role="dialog"
             ?open=${this.open}
             ?close-on-outside-click=${!this.keepOpenOnOutsideClick}
@@ -544,13 +558,14 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
               slot="footer"
               @click=${this._dialogCancel}
               variant=${isIndigo ? 'outlined' : 'flat'}
-              >${this.resourceStrings.cancel}</igc-button
+              >${this.resourceStrings
+                .date_range_picker_cancel_button}</igc-button
             >
             <igc-button
               slot="footer"
               @click=${this._dialogDone}
               variant=${isIndigo ? 'contained' : 'flat'}
-              >${this.resourceStrings.done}</igc-button
+              >${this.resourceStrings.date_range_picker_done_button}</igc-button
             >
           </igc-dialog>
         `;
@@ -558,14 +573,18 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     _renderHelperText() {
         return IgcValidationContainerComponent.create(this);
     }
-    _renderInput(id, picker = 'start') {
+    _renderInput(id, picker = DateRangePosition.Start) {
         const readOnly = !this._isDropDown || this.readOnly || this.nonEditable;
         const placeholder = picker === 'start' ? this.placeholderStart : this.placeholderEnd;
         const label = picker === 'start' ? this.labelStart : this.labelEnd;
         const format = getDateTimeFormat(this._displayFormat);
         const value = picker === 'start' ? this.value?.start : this.value?.end;
-        const prefixes = picker === 'start' ? this._startPrefixes : this._endPrefixes;
-        const suffixes = picker === 'start' ? this._startSuffixes : this._endSuffixes;
+        const prefixes = picker === DateRangePosition.Start
+            ? this._startPrefixes
+            : this._endPrefixes;
+        const suffixes = picker === DateRangePosition.Start
+            ? this._startSuffixes
+            : this._endSuffixes;
         const prefix = isEmpty(prefixes) ? undefined : 'prefix';
         const suffix = isEmpty(suffixes) ? undefined : 'suffix';
         return html `
@@ -585,8 +604,9 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         .max=${this._max}
         label=${label}
         ?invalid=${live(this.invalid)}
-        @igcChange=${this._handleInputChangeEvent}
-        @igcInput=${this._handleInputEvent}
+        @igcChange=${this._handleInputChange}
+        @igcInput=${this._handleInput}
+        @keydown=${this._handleEnterKeydown}
         @click=${this._isDropDown || this.readOnly
             ? nothing
             : this._handleInputClick}
@@ -602,30 +622,41 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     _renderInputs(idStart, idEnd) {
         return html `
       <div part="inputs">
-        ${this._renderInput(idStart, 'start')}
+        ${this._renderInput(idStart, DateRangePosition.Start)}
         <div part="separator">
-          <slot name="separator"> ${this.resourceStrings.separator} </slot>
+          <slot name="separator">
+            ${this.resourceStrings.date_range_picker_date_separator}
+          </slot>
         </div>
-        ${this._renderInput(idEnd, 'end')}
+        ${this._renderInput(idEnd, DateRangePosition.End)}
       </div>
       ${this._renderPicker(idStart)} ${this._renderHelperText()}
     `;
     }
     _renderSingleInput(id) {
+        const readOnly = !this._isDropDown || this.readOnly || this.nonEditable;
+        const format = getDateTimeFormat(this.displayFormat) ?? this._defaultDisplayFormat;
         const prefix = isEmpty(this._prefixes) ? undefined : 'prefix';
         const suffix = isEmpty(this._suffixes) ? undefined : 'suffix';
         return html `
-      <igc-input
+      <igc-date-range-input
         id=${id}
+        .value=${live(this.value)}
+        .placeholder=${this.placeholder}
         aria-haspopup="dialog"
-        .value=${this._maskedRangeValue}
         label=${this.label}
-        placeholder=${this.placeholder}
-        ?readonly=${true}
+        ?readonly=${readOnly}
         ?required=${this.required}
         .outlined=${this.outlined}
         ?invalid=${live(this.invalid)}
         .disabled=${this.disabled}
+        .inputFormat=${live(this.inputFormat)}
+        .displayFormat=${live(format)}
+        .locale=${live(this.locale)}
+        .prompt=${this.prompt}
+        @igcInput=${this._handleDateRangeInput}
+        @igcChange=${this._handleDateRangeInputChange}
+        @keydown=${this._handleEnterKeydown}
         @click=${this._isDropDown || this.readOnly
             ? nothing
             : this._handleInputClick}
@@ -635,7 +666,7 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         <slot name="prefix" slot=${ifDefined(prefix)}></slot>
         ${this._renderClearIcon()}
         <slot name="suffix" slot=${ifDefined(suffix)}></slot>
-      </igc-input>
+      </igc-date-range-input>
       ${this._renderHelperText()} ${this._renderPicker(id)}
     `;
     }
@@ -646,14 +677,11 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             : this._renderInputs(`${id}-start`, `${id}-end`))}`;
     }
 };
-__decorate([
-    state()
-], IgcDateRangePickerComponent.prototype, "_maskedRangeValue", void 0);
 __decorate([
     queryAll(IgcDateTimeInputComponent.tagName)
 ], IgcDateRangePickerComponent.prototype, "_inputs", void 0);
 __decorate([
-    query(IgcInputComponent.tagName)
+    query(IgcDateRangeInputComponent.tagName)
 ], IgcDateRangePickerComponent.prototype, "_input", void 0);
 __decorate([
     query(IgcCalendarComponent.tagName)