igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

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

@@ -7,33 +7,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var IgcDateRangePickerComponent_1;
 import { CalendarResourceStringsEN, DateRangePickerResourceStringsEN, getDateFormatter, } from 'igniteui-i18n-core';
 import { html, nothing } from 'lit';
-import { property, query, queryAll, queryAssignedElements, } from 'lit/decorators.js';
+import { property, query, queryAll, state } 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';
-import { addThemingController } from '../../theming/theming-controller.js';
-import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
-import { convertToDate, convertToDateRange, createDateConstraints, } from '../calendar/helpers.js';
-import { CalendarDay } from '../calendar/model.js';
-import { addKeybindings, altKey, arrowDown, arrowUp, escapeKey, } from '../common/controllers/key-bindings.js';
-import { addRootClickController } from '../common/controllers/root-click.js';
-import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
-import { shadowOptions } from '../common/decorators/shadow-options.js';
-import { watch } from '../common/decorators/watch.js';
-import { registerComponent } from '../common/definitions/register.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';
-import { FormValueDateRangeTransformers } from '../common/mixins/forms/form-transformers.js';
-import { createFormValueState } from '../common/mixins/forms/form-value.js';
-import { addSafeEventListener, asNumber, clamp, equal, getElementFromPath, isEmpty, } from '../common/util.js';
+import { addAriaProjector } from '#internals/controllers/aria-projection.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { convertToDateRange } from '#internals/date/converters.js';
+import { CalendarDay } from '#internals/date/model.js';
+import { blazorAdditionalDependencies } from '#internals/decorators/blazorAdditionalDependencies.js';
+import { shadowOptions } from '#internals/decorators/shadow-options.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addI18nController, getDateTimeFormat, getDefaultDateTimeFormat, } from '#internals/i18n/i18n-controller.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { FormValueDateRangeTransformers } from '#internals/mixins/forms/form-transformers.js';
+import { createFormValueState } from '#internals/mixins/forms/form-value.js';
+import { firstOf, isEmpty, lastOf } from '#internals/utils/arrays.js';
+import { bindIf } from '#internals/utils/lit.js';
+import { asNumber, clamp } from '#internals/utils/math.js';
+import { createIdGenerator } from '#internals/utils/strings.js';
+import { addThemingController } from '#theming/theming-controller.js';
+import { IgcDatePickerBaseComponent, pickerDependencies, } from '../date-picker/date-picker.base.js';
 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 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';
@@ -41,153 +36,162 @@ import IgcPredefinedRangesAreaComponent from './predefined-ranges-area.js';
 import { styles as shared } from './themes/shared/date-range-picker.common.css.js';
 import { all } from './themes/themes.js';
 import { dateRangeValidators, isCompleteDateRange } from './validators.js';
-let nextId = 1;
-let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcComboBoxBaseLikeComponent)) {
+const nextId = createIdGenerator('date-range-picker');
+const Slots = setSlots('prefix', 'prefix-start', 'prefix-end', 'suffix', 'suffix-start', 'suffix-end', 'helper-text', 'bad-input', 'value-missing', 'range-overflow', 'range-underflow', 'custom-error', 'invalid', 'title', 'header-date', 'clear-icon', 'clear-icon-start', 'clear-icon-end', 'calendar-icon', 'calendar-icon-start', 'calendar-icon-end', 'calendar-icon-open', 'calendar-icon-open-start', 'calendar-icon-open-end', 'actions', 'separator');
+let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends EventEmitterMixin(IgcDatePickerBaseComponent) {
     static { IgcDateRangePickerComponent_1 = this; }
     static { this.tagName = 'igc-date-range-picker'; }
     static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcDateRangePickerComponent_1, IgcDateRangeInputComponent, IgcCalendarComponent, IgcDateTimeInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent, IgcPredefinedRangesAreaComponent);
+        registerComponent(IgcDateRangePickerComponent_1, IgcDateRangeInputComponent, IgcDateTimeInputComponent, IgcPredefinedRangesAreaComponent, ...pickerDependencies);
     }
     get __validators() {
         return dateRangeValidators;
     }
-    get _isDropDown() {
-        return this.mode === 'dropdown';
+    get _editors() {
+        return this.useTwoInputs ? Array.from(this._inputs) : [this._input];
+    }
+    get _startEditor() {
+        return firstOf(this._editors);
     }
     get _firstDefinedInRange() {
         return this.value?.start ?? this.value?.end ?? null;
     }
-    set value(value) {
-        this._formValue.setValueAndFormState(convertToDateRange(value));
-        this._setCalendarRangeValues();
+    get _value() {
+        return this.value;
     }
-    get value() {
-        return this._formValue.value;
+    set _value(value) {
+        this.value = value;
     }
-    set locale(value) {
-        this._i18nController.locale = value;
+    get _hasValue() {
+        return this._firstDefinedInRange !== null;
     }
-    get locale() {
-        return this._i18nController.locale;
+    get _calendarSelection() {
+        return 'range';
     }
-    set resourceStrings(value) {
-        this._i18nController.resourceStrings = value;
+    get _calendarValues() {
+        return this._calendarRange;
     }
-    get resourceStrings() {
-        return this._i18nController.resourceStrings;
+    get _defaultActiveDate() {
+        return this._firstDefinedInRange;
     }
-    set placeholder(value) {
-        this._placeholder = value;
+    get _selectDateLabel() {
+        return this.resourceStrings.calendar_select_date;
     }
-    get placeholder() {
-        const rangePlaceholder = `${this.inputFormat} - ${this.inputFormat}`;
-        return this._placeholder ?? rangePlaceholder;
+    get _defaultDisplayFormat() {
+        return this._inputFormat ?? this._localeDisplayFormat;
     }
-    set displayFormat(value) {
-        this._displayFormat = value;
+    get _defaultInputFormat() {
+        return this._defaultMask;
     }
-    get displayFormat() {
-        return (this._displayFormat ?? this._inputFormat ?? this._defaultDisplayFormat);
+    get _projectionTarget() {
+        return this._input ?? this._inputs?.[0] ?? null;
     }
-    set inputFormat(value) {
-        this._inputFormat = value;
+    _focusInput() {
+        this._startEditor.focus();
     }
-    get inputFormat() {
-        return this._inputFormat ?? this._defaultMask;
+    _focusAndSelectInput() {
+        this.useTwoInputs ? this._inputs[0].select() : this._input.focus();
     }
-    set min(value) {
-        this._min = convertToDate(value);
-        this._setDateConstraints();
-        this._validate();
+    _canCloseOnSelect() {
+        return this._calendar.values.length > 1;
     }
-    get min() {
-        return this._min;
+    _handleDismiss() {
+        if (!this._isDropDown) {
+            this._revertValue();
+        }
     }
-    set max(value) {
-        this._max = convertToDate(value);
-        this._setDateConstraints();
-        this._validate();
+    _syncCalendarOnToggle() {
+        this._setCalendarActiveDateAndViewIndex();
     }
-    get max() {
-        return this._max;
+    _clearEditors() {
+        for (const editor of this._editors) {
+            editor?.clear();
+        }
     }
-    set disabledDates(dates) {
-        this._disabledDates = dates;
-        this._setDateConstraints();
-        this._validate();
+    _onDialogClosing() {
+        this._emitChangeIfDirty();
     }
-    get disabledDates() {
-        return this._disabledDates;
+    _commitsCalendarSelection() {
+        return this._isDropDown;
     }
-    get visibleMonths() {
-        return this._visibleMonths;
+    _valueFromCalendarSelection(dates) {
+        return isEmpty(dates)
+            ? { start: null, end: null }
+            : { start: firstOf(dates), end: lastOf(dates) };
+    }
+    set value(value) {
+        this._formValue.setValueAndFormState(convertToDateRange(value));
+        this._setCalendarRangeValues();
+    }
+    get value() {
+        return this._formValue.value;
     }
     set visibleMonths(value) {
         this._visibleMonths = clamp(asNumber(value, 2), 1, 2);
     }
-    set activeDate(value) {
-        this._activeDate = convertToDate(value);
+    get visibleMonths() {
+        return this._visibleMonths;
+    }
+    set resourceStrings(value) {
+        this._i18nController.resourceStrings = value;
+    }
+    get resourceStrings() {
+        return this._i18nController.resourceStrings;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
     }
-    get activeDate() {
-        return this._activeDate ?? this._calendar?.activeDate;
+    get placeholder() {
+        const rangePlaceholder = `${this.inputFormat} - ${this.inputFormat}`;
+        return this._placeholder ?? rangePlaceholder;
     }
     constructor() {
         super();
-        this._inputId = `date-range-picker-${nextId++}`;
+        this._inputId = nextId();
         this._themes = addThemingController(this, all);
-        this._formValue = createFormValueState(this, {
-            initialValue: { start: null, end: null },
-            transformers: FormValueDateRangeTransformers,
-        });
-        this._rootClickController = addRootClickController(this, {
-            onHide: this._handleClosing,
+        this._slots = addSlotController(this, {
+            slots: Slots,
         });
         this._i18nController = addI18nController(this, {
             defaultEN: Object.assign({}, DateRangePickerResourceStringsEN, CalendarResourceStringsEN),
             resourceMapName: 'date-range-picker',
             onResourceChange: this._updateDefaultMask,
         });
-        this._activeDate = null;
-        this._min = null;
-        this._max = null;
-        this._disabledDates = [];
-        this._dateConstraints = [];
-        this._oldValue = null;
+        this._formValue = createFormValueState(this, {
+            initialValue: { start: null, end: null },
+            transformers: FormValueDateRangeTransformers,
+        });
         this._visibleMonths = 2;
+        this._calendarRange = null;
         this.customRanges = [];
-        this.mode = 'dropdown';
         this.useTwoInputs = false;
         this.usePredefinedRanges = false;
-        this.readOnly = false;
-        this.nonEditable = false;
-        this.outlined = false;
         this.labelStart = '';
         this.labelEnd = '';
         this.placeholderStart = '';
         this.placeholderEnd = '';
-        this.prompt = '_';
-        this.headerOrientation = 'horizontal';
-        this.orientation = 'horizontal';
-        this.hideHeader = false;
-        this.showWeekNumbers = false;
-        this.hideOutsideDays = false;
-        this.weekStart = 'sunday';
-        addSafeEventListener(this, 'focusout', this._handleFocusOut);
-        addKeybindings(this, {
-            skip: () => this.disabled || this.readOnly,
-        })
-            .set([altKey, arrowDown], this._handleAnchorClick)
-            .set([altKey, arrowUp], this._onEscapeKey)
-            .set(escapeKey, this._onEscapeKey);
-    }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        root.addEventListener('slotchange', () => this.requestUpdate());
-        return root;
+        addAriaProjector(this, {
+            target: () => this._inputs[1] ?? null,
+            state: () => ({ hasPopup: 'dialog' }),
+        });
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('locale')) {
+            this._updateDefaultMask();
+        }
+        if (changedProperties.has('mode') && !this._isDropDown) {
+            this.keepOpenOnSelect = true;
+        }
+        if (changedProperties.has('useTwoInputs')) {
+            this._syncEditors();
+        }
+        else if (changedProperties.has('mode')) {
+            this._syncCalendarRange();
+        }
     }
     firstUpdated() {
-        this._setCalendarRangeValues();
         this._delegateInputsValidity();
     }
     formResetCallback() {
@@ -195,75 +199,20 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         this._setCalendarRangeValues();
     }
     hasDateParts() {
-        return this.useTwoInputs
-            ? this._inputs[0].hasDateParts()
-            : this._input.hasDateParts();
+        return this._startEditor.hasDateParts();
     }
     hasTimeParts() {
-        return this.useTwoInputs
-            ? this._inputs[0].hasTimeParts()
-            : this._input.hasTimeParts();
-    }
-    clear() {
-        this._oldValue = this.value;
-        this.value = null;
-        if (this.useTwoInputs) {
-            this._inputs[0]?.clear();
-            this._inputs[1]?.clear();
-        }
-        else {
-            this._input.value = null;
-            this._input?.clear();
-        }
+        return this._startEditor.hasTimeParts();
     }
     select(value) {
         this._select(value);
     }
-    _openChange() {
-        this._rootClickController.update();
-        if (this.open) {
-            this._oldValue = this.value;
-        }
-    }
-    _updateDefaultMask() {
-        this._defaultMask = getDefaultDateTimeFormat(this.locale);
-        this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
-    }
-    async _updateDateRange() {
-        await this._calendar?.updateComplete;
-        this._setCalendarRangeValues();
-        this._delegateInputsValidity();
-    }
-    async _modeChanged() {
-        if (!this._isDropDown) {
-            this.keepOpenOnSelect = true;
-        }
-        await this._calendar?.updateComplete;
-        this._setCalendarRangeValues();
-    }
-    _handleClosing() {
-        this._hide(true);
-    }
-    _handleDialogClosing(event) {
-        event.stopPropagation();
-        if (!equal(this.value, this._oldValue)) {
-            this.emitEvent('igcChange', { detail: this.value });
-            this._oldValue = this.value;
-        }
-        this._hide(true);
-    }
-    _handleDialogClosed(event) {
-        event.stopPropagation();
-    }
     _dialogCancel() {
         this._revertValue();
         this._hide(true);
     }
     _dialogDone() {
-        if (!equal(this.value, this._oldValue)) {
-            this.emitEvent('igcChange', { detail: this.value });
-            this._oldValue = this.value;
-        }
+        this._emitChangeIfDirty();
         this._hide(true);
     }
     _handleInput(event) {
@@ -273,24 +222,19 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             return;
         }
         const input = event.target;
-        const newValue = input.value ? CalendarDay.from(input.value).native : null;
-        this.value = this._getUpdatedDateRange(input, newValue);
+        const draft = input._uncommittedValue;
+        const newValue = draft ? CalendarDay.from(draft).native : null;
+        const range = this._getUpdatedDateRange(input, newValue);
+        this._setCalendarRangeValues(range);
         this._calendar.activeDate =
-            newValue ?? this._firstDefinedInRange ?? this._calendar.activeDate;
-        this.emitEvent('igcInput', { detail: this.value });
+            newValue ?? range.start ?? range.end ?? this._calendar.activeDate;
+        this.emitEvent('igcInput', { detail: range });
     }
     _handleInputChange(event) {
         event.stopPropagation();
         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) ?? {
-            start: null,
-            end: null,
-        };
-        this._setCalendarRangeValues();
-        this.value = { start, end };
-        this.emitEvent('igcChange', { detail: this.value });
+        this._commitRange(this._getUpdatedDateRange(input, newValue));
     }
     async _handleDateRangeInput(event) {
         event.stopPropagation();
@@ -299,68 +243,26 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             return;
         }
         const input = event.target;
-        const newValue = input.value;
-        this.value = newValue;
-        this._calendar.activeDate = newValue?.start;
-        this.emitEvent('igcInput', { detail: this.value });
+        const draft = input._uncommittedValue;
+        this._setCalendarRangeValues(draft);
+        this._calendar.activeDate = draft?.start;
+        this.emitEvent('igcInput', { detail: draft });
     }
     _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 });
-    }
-    _handleFocusOut({ relatedTarget }) {
-        if (!this.contains(relatedTarget)) {
-            this._handleBlur();
-        }
+        this._commitRange(event.target.value);
     }
-    _handleInputClick(event) {
-        if (getElementFromPath('input', event)) {
-            this._handleAnchorClick();
-        }
-    }
-    async _onEscapeKey() {
-        if (await this._hide(true)) {
-            if (!this._isDropDown) {
-                this._revertValue();
-            }
-            this.useTwoInputs ? this._inputs[0].focus() : this._input.focus();
-        }
-    }
-    async _handleAnchorClick() {
-        super._handleAnchorClick();
-        this._setCalendarActiveDateAndViewIndex();
-        await this.updateComplete;
-        this._calendar[focusActiveDate]({ preventScroll: true });
+    _updateDefaultMask() {
+        this._defaultMask = getDefaultDateTimeFormat(this.locale);
+        this._localeDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
     }
-    async _handleCalendarChangeEvent(event) {
-        event.stopPropagation();
-        this._setTouchedState();
-        if (this.readOnly) {
-            await this._calendar.updateComplete;
-            const dateRange = [this.value?.start, this.value?.end];
-            this._calendar.values = dateRange?.map((d) => d ?? '');
-            return;
-        }
-        const rangeValues = event.target.values;
-        this.value = {
-            start: rangeValues[0],
-            end: rangeValues[rangeValues.length - 1],
-        };
-        if (this._isDropDown) {
-            this.emitEvent('igcChange', { detail: this.value });
-        }
-        this._shouldCloseCalendarDropdown();
+    async _syncCalendarRange() {
+        await this._calendar?.updateComplete;
+        this._setCalendarRangeValues();
     }
-    _handleCalendarIconSlotPointerDown(event) {
-        event.preventDefault();
+    async _syncEditors() {
+        await this._syncCalendarRange();
+        this._delegateInputsValidity();
     }
     _revertValue() {
         this.value = this._oldValue;
@@ -372,37 +274,38 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         this._calendar[activeDaysViewIndex] = 0;
     }
     _getUpdatedDateRange(input, newValue) {
-        const { start = null, end = null } = this.value ?? {};
-        return input === this._inputs[0]
-            ? { start: newValue, end }
-            : { start, end: newValue };
+        const [startInput, endInput] = this._inputs;
+        return input === startInput
+            ? { start: newValue, end: endInput?._uncommittedValue ?? null }
+            : { start: startInput?._uncommittedValue ?? null, end: newValue };
     }
     _delegateInputsValidity() {
-        const inputs = this.useTwoInputs ? this._inputs : [this._input];
-        inputs.forEach((input) => {
+        for (const input of this._editors) {
             input.checkValidity = () => !this._pristine ? this.checkValidity() : true;
             input.reportValidity = () => !this._pristine ? this.reportValidity() : true;
-        });
-    }
-    _setDateConstraints() {
-        this._dateConstraints =
-            createDateConstraints(this.min, this.max, this.disabledDates) ?? [];
-    }
-    _setCalendarRangeValues() {
-        if (!this._calendar) {
-            return;
         }
-        if (isCompleteDateRange(this.value)) {
-            this._calendar.values =
-                CalendarDay.compare(this.value.start, this.value.end) === 0
-                    ? [this.value.start]
-                    : [this.value.start, this.value.end];
-            this._calendar.activeDate = this._firstDefinedInRange;
+    }
+    _setCalendarRangeValues(range = this.value) {
+        if (isCompleteDateRange(range)) {
+            this._calendarRange =
+                CalendarDay.compare(range.start, range.end) === 0
+                    ? [range.start]
+                    : [range.start, range.end];
+            if (this._calendar) {
+                this._calendar.activeDate = range.start;
+            }
             return;
         }
-        this._calendar.values = this._firstDefinedInRange
-            ? [this._firstDefinedInRange]
-            : null;
+        const first = range?.start ?? range?.end ?? null;
+        this._calendarRange = first ? [first] : null;
+    }
+    _commitRange(range) {
+        const { start, end } = (range && this._swapDates(range)) ?? {
+            start: null,
+            end: null,
+        };
+        this.value = { start, end };
+        this.emitEvent('igcChange', { detail: this.value });
     }
     _swapDates(range) {
         return isCompleteDateRange(range) &&
@@ -410,13 +313,6 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             ? { start: range.end, end: range.start }
             : range;
     }
-    async _shouldCloseCalendarDropdown() {
-        if (!this.keepOpenOnSelect &&
-            this._calendar.values.length > 1 &&
-            (await this._hide(true))) {
-            return this.useTwoInputs ? this._inputs[0].select() : this._input.focus();
-        }
-    }
     _select(value, emitEvent = false) {
         this.value = value;
         this._calendar.activeDate =
@@ -427,88 +323,8 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             this._hide(true);
         }
     }
-    _renderClearIcon(picker = DateRangePosition.Start) {
-        const clearIcon = this.useTwoInputs ? `clear-icon-${picker}` : 'clear-icon';
-        return this._firstDefinedInRange
-            ? html `
-          <span
-            slot="suffix"
-            part=${clearIcon}
-            @click=${this.readOnly ? nothing : this.clear}
-          >
-            <slot name=${clearIcon}>
-              <igc-icon
-                name="input_clear"
-                collection="default"
-                aria-hidden="true"
-              ></igc-icon>
-            </slot>
-          </span>
-        `
-            : nothing;
-    }
-    _renderCalendarIcon(picker = DateRangePosition.Start) {
-        const defaultIcon = html `
-      <igc-icon name="today" collection="default" aria-hidden="true"></igc-icon>
-    `;
-        const state = this.open ? 'calendar-icon-open' : 'calendar-icon';
-        const calendarIcon = this.useTwoInputs ? `${state}-${picker}` : state;
-        return html `
-      <span
-        slot="prefix"
-        part=${calendarIcon}
-        @pointerdown=${this._handleCalendarIconSlotPointerDown}
-        @click=${this.readOnly ? nothing : this._handleAnchorClick}
-      >
-        <slot name=${calendarIcon}>${defaultIcon}</slot>
-      </span>
-    `;
-    }
-    _renderCalendarSlots() {
-        if (this._isDropDown) {
-            return nothing;
-        }
-        const hasHeaderDate = isEmpty(this._headerDateSlotItems)
-            ? ''
-            : 'header-date';
-        return html `
-      <slot name="title" slot="title">
-        ${this.resourceStrings.calendar_select_date}
-      </slot>
-      <slot name="header-date" slot=${hasHeaderDate}></slot>
-    `;
-    }
-    _renderCalendar(id) {
-        const hideHeader = this._isDropDown ? true : this.hideHeader;
-        return html `
-      <igc-calendar
-        aria-labelledby=${id}
-        role="dialog"
-        selection="range"
-        .inert=${!this.open || this.disabled}
-        ?show-week-numbers=${this.showWeekNumbers}
-        ?hide-outside-days=${this.hideOutsideDays}
-        ?hide-header=${hideHeader}
-        .activeDate=${this.activeDate ?? this._firstDefinedInRange}
-        .headerOrientation=${this.headerOrientation}
-        .orientation=${this.orientation}
-        .visibleMonths=${this._visibleMonths}
-        .disabledDates=${this._dateConstraints}
-        .specialDates=${this.specialDates}
-        .weekStart=${this.weekStart}
-        @igcChange=${this._handleCalendarChangeEvent}
-        exportparts="header, header-title, header-date, content: calendar-content, navigation, months-navigation,
-          years-navigation, years-range, navigation-buttons, navigation-button, days-view-container,
-          days-view, months-view, years-view, days-row, label: calendar-label, week-number, week-number-inner, date,
-          date-inner, first, last, inactive, hidden, weekend, range, special, disabled, single, preview,
-          month, month-inner, year, year-inner, selected, current"
-      >
-        ${this._renderCalendarSlots()}
-      </igc-calendar>
-    `;
-    }
     _renderActions() {
-        const hasActions = !isEmpty(this._actions);
+        const hasActions = this._slots.hasAssignedElements('actions');
         const slot = this._isDropDown || hasActions ? undefined : 'footer';
         return html `
       <div part="actions" ?hidden=${!hasActions} slot=${ifDefined(slot)}>
@@ -530,71 +346,44 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         `
             : nothing;
     }
-    _renderPicker(id) {
-        const isIndigo = this._themes.theme === 'indigo';
+    _renderPickerContent(id) {
         return this._isDropDown
-            ? html `
-          <igc-popover ?open=${this.open} anchor=${id} flip shift>
-            <igc-focus-trap ?disabled=${!this.open || this.disabled}>
-              ${this._renderCalendar(id)} ${this._renderPredefinedRanges()}
-              ${this._renderActions()}
-            </igc-focus-trap>
-          </igc-popover>
-        `
-            : html `
-          <igc-dialog
-            aria-label=${ifDefined(this.resourceStrings.calendar_select_date)}
-            role="dialog"
-            ?open=${this.open}
-            ?close-on-outside-click=${!this.keepOpenOnOutsideClick}
-            hide-default-action
-            @igcClosing=${this._handleDialogClosing}
-            @igcClosed=${this._handleDialogClosed}
-            exportparts="base: dialog-base, title, footer, overlay"
-          >
-            ${this._renderCalendar(id)} ${this._renderActions()}
-            ${this._renderPredefinedRanges()}
-            <igc-button
-              slot="footer"
-              @click=${this._dialogCancel}
-              variant=${isIndigo ? 'outlined' : 'flat'}
-              >${this.resourceStrings
-                .date_range_picker_cancel_button}</igc-button
-            >
-            <igc-button
-              slot="footer"
-              @click=${this._dialogDone}
-              variant=${isIndigo ? 'contained' : 'flat'}
-              >${this.resourceStrings.date_range_picker_done_button}</igc-button
-            >
-          </igc-dialog>
-        `;
-    }
-    _renderHelperText() {
-        return IgcValidationContainerComponent.create(this);
+            ? html `${this._renderCalendar(id)} ${this._renderPredefinedRanges()}
+        ${this._renderActions()}`
+            : html `${this._renderCalendar(id)} ${this._renderActions()}
+        ${this._renderPredefinedRanges()}`;
+    }
+    _renderDialogFooter() {
+        const isIndigo = this._themes.theme === 'indigo';
+        return html `
+      <igc-button
+        slot="footer"
+        @click=${this._dialogCancel}
+        variant=${isIndigo ? 'outlined' : 'flat'}
+        >${this.resourceStrings.date_range_picker_cancel_button}</igc-button
+      >
+      <igc-button
+        slot="footer"
+        @click=${this._dialogDone}
+        variant=${isIndigo ? 'contained' : 'flat'}
+        >${this.resourceStrings.date_range_picker_done_button}</igc-button
+      >
+    `;
     }
     _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 isStart = picker === DateRangePosition.Start;
+        const placeholder = isStart ? this.placeholderStart : this.placeholderEnd;
+        const label = isStart ? this.labelStart : this.labelEnd;
         const format = getDateTimeFormat(this._displayFormat);
-        const value = picker === 'start' ? this.value?.start : this.value?.end;
-        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';
+        const value = isStart ? this.value?.start : this.value?.end;
+        const hasClickHandler = !(this._isDropDown || this.readOnly);
         return html `
       <igc-date-time-input
         id=${id}
-        aria-haspopup="dialog"
         input-format=${ifDefined(this._inputFormat)}
         display-format=${ifDefined(format)}
         ?disabled=${this.disabled}
-        ?readonly=${readOnly}
+        ?readonly=${this._isEditorReadOnly}
         .value=${value ?? null}
         .locale=${live(this.locale)}
         .prompt=${this.prompt}
@@ -607,15 +396,10 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         @igcChange=${this._handleInputChange}
         @igcInput=${this._handleInput}
         @keydown=${this._handleEnterKeydown}
-        @click=${this._isDropDown || this.readOnly
-            ? nothing
-            : this._handleInputClick}
+        @click=${bindIf(hasClickHandler, this._handleInputClick)}
         exportparts="input, label, prefix, suffix"
       >
-        ${this._renderCalendarIcon(picker)}
-        <slot name=${`prefix-${picker}`} slot=${ifDefined(prefix)}></slot>
-        ${this._renderClearIcon(picker)}
-        <slot name=${`suffix-${picker}`} slot=${ifDefined(suffix)}></slot>
+        ${this._renderEditorSlots(`-${picker}`)}
       </igc-date-time-input>
     `;
     }
@@ -634,18 +418,15 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
     `;
     }
     _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';
+        const format = getDateTimeFormat(this.displayFormat) ?? this._localeDisplayFormat;
+        const hasClickHandler = !(this._isDropDown || this.readOnly);
         return html `
       <igc-date-range-input
         id=${id}
         .value=${live(this.value)}
         .placeholder=${this.placeholder}
-        aria-haspopup="dialog"
         label=${this.label}
-        ?readonly=${readOnly}
+        ?readonly=${this._isEditorReadOnly}
         ?required=${this.required}
         .outlined=${this.outlined}
         ?invalid=${live(this.invalid)}
@@ -657,15 +438,10 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
         @igcInput=${this._handleDateRangeInput}
         @igcChange=${this._handleDateRangeInputChange}
         @keydown=${this._handleEnterKeydown}
-        @click=${this._isDropDown || this.readOnly
-            ? nothing
-            : this._handleInputClick}
+        @click=${bindIf(hasClickHandler, this._handleInputClick)}
         exportparts="input, label, prefix, suffix"
       >
-        ${this._renderCalendarIcon()}
-        <slot name="prefix" slot=${ifDefined(prefix)}></slot>
-        ${this._renderClearIcon()}
-        <slot name="suffix" slot=${ifDefined(suffix)}></slot>
+        ${this._renderEditorSlots()}
       </igc-date-range-input>
       ${this._renderHelperText()} ${this._renderPicker(id)}
     `;
@@ -677,48 +453,24 @@ let IgcDateRangePickerComponent = class IgcDateRangePickerComponent extends Form
             : this._renderInputs(`${id}-start`, `${id}-end`))}`;
     }
 };
+__decorate([
+    state()
+], IgcDateRangePickerComponent.prototype, "_calendarRange", void 0);
 __decorate([
     queryAll(IgcDateTimeInputComponent.tagName)
 ], IgcDateRangePickerComponent.prototype, "_inputs", void 0);
 __decorate([
     query(IgcDateRangeInputComponent.tagName)
 ], IgcDateRangePickerComponent.prototype, "_input", void 0);
-__decorate([
-    query(IgcCalendarComponent.tagName)
-], IgcDateRangePickerComponent.prototype, "_calendar", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'prefix' })
-], IgcDateRangePickerComponent.prototype, "_prefixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'prefix-start' })
-], IgcDateRangePickerComponent.prototype, "_startPrefixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'prefix-end' })
-], IgcDateRangePickerComponent.prototype, "_endPrefixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'suffix' })
-], IgcDateRangePickerComponent.prototype, "_suffixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'suffix-start' })
-], IgcDateRangePickerComponent.prototype, "_startSuffixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'suffix-end' })
-], IgcDateRangePickerComponent.prototype, "_endSuffixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'actions' })
-], IgcDateRangePickerComponent.prototype, "_actions", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'header-date' })
-], IgcDateRangePickerComponent.prototype, "_headerDateSlotItems", void 0);
 __decorate([
     property({ converter: convertToDateRange })
 ], IgcDateRangePickerComponent.prototype, "value", null);
+__decorate([
+    property({ type: Number, attribute: 'visible-months' })
+], IgcDateRangePickerComponent.prototype, "visibleMonths", null);
 __decorate([
     property({ attribute: false })
 ], IgcDateRangePickerComponent.prototype, "customRanges", void 0);
-__decorate([
-    property()
-], IgcDateRangePickerComponent.prototype, "mode", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'use-two-inputs' })
 ], IgcDateRangePickerComponent.prototype, "useTwoInputs", void 0);
@@ -729,24 +481,9 @@ __decorate([
         attribute: 'use-predefined-ranges',
     })
 ], IgcDateRangePickerComponent.prototype, "usePredefinedRanges", void 0);
-__decorate([
-    property()
-], IgcDateRangePickerComponent.prototype, "locale", null);
 __decorate([
     property({ attribute: false })
 ], IgcDateRangePickerComponent.prototype, "resourceStrings", null);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'readonly' })
-], IgcDateRangePickerComponent.prototype, "readOnly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'non-editable' })
-], IgcDateRangePickerComponent.prototype, "nonEditable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcDateRangePickerComponent.prototype, "outlined", void 0);
-__decorate([
-    property()
-], IgcDateRangePickerComponent.prototype, "label", void 0);
 __decorate([
     property({ attribute: 'label-start' })
 ], IgcDateRangePickerComponent.prototype, "labelStart", void 0);
@@ -762,63 +499,6 @@ __decorate([
 __decorate([
     property({ attribute: 'placeholder-end' })
 ], IgcDateRangePickerComponent.prototype, "placeholderEnd", void 0);
-__decorate([
-    property()
-], IgcDateRangePickerComponent.prototype, "prompt", void 0);
-__decorate([
-    property({ attribute: 'display-format' })
-], IgcDateRangePickerComponent.prototype, "displayFormat", null);
-__decorate([
-    property({ attribute: 'input-format' })
-], IgcDateRangePickerComponent.prototype, "inputFormat", null);
-__decorate([
-    property({ converter: convertToDate })
-], IgcDateRangePickerComponent.prototype, "min", null);
-__decorate([
-    property({ converter: convertToDate })
-], IgcDateRangePickerComponent.prototype, "max", null);
-__decorate([
-    property({ attribute: false })
-], IgcDateRangePickerComponent.prototype, "disabledDates", null);
-__decorate([
-    property({ type: Number, attribute: 'visible-months' })
-], IgcDateRangePickerComponent.prototype, "visibleMonths", null);
-__decorate([
-    property({ attribute: 'header-orientation', reflect: true })
-], IgcDateRangePickerComponent.prototype, "headerOrientation", void 0);
-__decorate([
-    property()
-], IgcDateRangePickerComponent.prototype, "orientation", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hide-header' })
-], IgcDateRangePickerComponent.prototype, "hideHeader", void 0);
-__decorate([
-    property({ attribute: 'active-date', converter: convertToDate })
-], IgcDateRangePickerComponent.prototype, "activeDate", null);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })
-], IgcDateRangePickerComponent.prototype, "showWeekNumbers", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hide-outside-days' })
-], IgcDateRangePickerComponent.prototype, "hideOutsideDays", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcDateRangePickerComponent.prototype, "specialDates", void 0);
-__decorate([
-    property({ attribute: 'week-start' })
-], IgcDateRangePickerComponent.prototype, "weekStart", void 0);
-__decorate([
-    watch('open')
-], IgcDateRangePickerComponent.prototype, "_openChange", null);
-__decorate([
-    watch('locale')
-], IgcDateRangePickerComponent.prototype, "_updateDefaultMask", null);
-__decorate([
-    watch('useTwoInputs')
-], IgcDateRangePickerComponent.prototype, "_updateDateRange", null);
-__decorate([
-    watch('mode')
-], IgcDateRangePickerComponent.prototype, "_modeChanged", null);
 IgcDateRangePickerComponent = IgcDateRangePickerComponent_1 = __decorate([
     blazorAdditionalDependencies('IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent, IgcChipComponent, IgcInputComponent'),
     shadowOptions({ delegatesFocus: true })