igniteui-webcomponents 6.0.1 → 6.1.1-alpha.0

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

@@ -0,0 +1,811 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var IgcDateRangePickerComponent_1;
+import { html, nothing } from 'lit';
+import { property, query, queryAll, queryAssignedElements, state, } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { getThemeController, themes } from '../../theming/theming-decorator.js';
+import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
+import { convertToDate, convertToDateRange } from '../calendar/helpers.js';
+import { CalendarDay } from '../calendar/model.js';
+import { DateRangeType, } from '../calendar/types.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 { IgcDateRangePickerResourceStringsEN } from '../common/i18n/date-range-picker.resources.js';
+import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
+import { createFormValueState, defaultDateRangeTransformers, } from '../common/mixins/forms/form-value.js';
+import { addSafeEventListener, asNumber, clamp, createCounter, equal, findElementFromEventPath, isEmpty, } from '../common/util.js';
+import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
+import { DateTimeUtil } from '../date-time-input/date-util.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 { 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';
+import { all } from './themes/themes.js';
+import { dateRangeValidators, isCompleteDateRange } from './validators.js';
+let IgcDateRangePickerComponent = IgcDateRangePickerComponent_1 = class IgcDateRangePickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
+    static register() {
+        registerComponent(IgcDateRangePickerComponent_1, IgcCalendarComponent, IgcDateTimeInputComponent, IgcInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent, IgcPredefinedRangesAreaComponent);
+    }
+    get __validators() {
+        return dateRangeValidators;
+    }
+    get _isDropDown() {
+        return this.mode === 'dropdown';
+    }
+    get _firstDefinedInRange() {
+        return this.value?.start ?? this.value?.end ?? null;
+    }
+    get _isIndigoTheme() {
+        return getThemeController(this)?.theme === 'indigo';
+    }
+    set value(value) {
+        const converted = convertToDateRange(value);
+        this._formValue.setValueAndFormState(converted);
+        this._validate();
+        this._setCalendarRangeValues();
+        this._updateMaskedRangeValue();
+    }
+    get value() {
+        return this._formValue.value;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+    }
+    get placeholder() {
+        const rangePlaceholder = `${this.inputFormat} - ${this.inputFormat}`;
+        return this._placeholder ?? rangePlaceholder;
+    }
+    set displayFormat(value) {
+        this._displayFormat = value;
+        this._updateMaskedRangeValue();
+    }
+    get displayFormat() {
+        return this._displayFormat ?? this.inputFormat;
+    }
+    set inputFormat(value) {
+        this._inputFormat = value;
+        this._updateMaskedRangeValue();
+    }
+    get inputFormat() {
+        return this._inputFormat ?? this._defaultMask;
+    }
+    set min(value) {
+        this._min = convertToDate(value);
+        this._setDateConstraints();
+        this._updateValidity();
+    }
+    get min() {
+        return this._min;
+    }
+    set max(value) {
+        this._max = convertToDate(value);
+        this._setDateConstraints();
+        this._updateValidity();
+    }
+    get max() {
+        return this._max;
+    }
+    set disabledDates(dates) {
+        this._disabledDates = dates;
+        this._setDateConstraints();
+        this._updateValidity();
+    }
+    get disabledDates() {
+        return this._disabledDates;
+    }
+    get visibleMonths() {
+        return this._visibleMonths;
+    }
+    set visibleMonths(value) {
+        this._visibleMonths = clamp(asNumber(value, 2), 1, 2);
+    }
+    set activeDate(value) {
+        this._activeDate = convertToDate(value);
+    }
+    get activeDate() {
+        return this._activeDate ?? this._calendar?.activeDate;
+    }
+    constructor() {
+        super();
+        this._inputId = `date-range-picker-${IgcDateRangePickerComponent_1._increment()}`;
+        this._formValue = createFormValueState(this, {
+            initialValue: {
+                start: null,
+                end: null,
+            },
+            transformers: defaultDateRangeTransformers,
+        });
+        this._rootClickController = addRootClickController(this, {
+            onHide: this._handleClosing,
+        });
+        this._activeDate = null;
+        this._min = null;
+        this._max = null;
+        this._disabledDates = [];
+        this._dateConstraints = [];
+        this._oldValue = null;
+        this._visibleMonths = 2;
+        this._maskedRangeValue = '';
+        this.customRanges = [];
+        this.mode = 'dropdown';
+        this.useTwoInputs = false;
+        this.usePredefinedRanges = false;
+        this.locale = 'en';
+        this.resourceStrings = IgcDateRangePickerResourceStringsEN;
+        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, 'focusin', this._handleFocusIn);
+        addSafeEventListener(this, 'focusout', this._handleFocusOut);
+        addKeybindings(this, {
+            skip: () => this.disabled || this.readOnly,
+            bindingDefaults: { preventDefault: true },
+        })
+            .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;
+    }
+    firstUpdated() {
+        this._setCalendarRangeValues();
+        this._delegateInputsValidity();
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        this._setCalendarRangeValues();
+        this._updateMaskedRangeValue();
+    }
+    clear() {
+        this._oldValue = this.value;
+        this.value = null;
+        if (this.useTwoInputs) {
+            this._inputs[0]?.clear();
+            this._inputs[1]?.clear();
+        }
+    }
+    select(value) {
+        this._select(value);
+    }
+    _openChange() {
+        this._rootClickController.update();
+        if (this.open) {
+            this._oldValue = this.value;
+        }
+    }
+    _updateDefaultMask() {
+        this._defaultMask = DateTimeUtil.getDefaultMask(this.locale);
+        this._updateMaskedRangeValue();
+    }
+    async _updateDateRange() {
+        await this._calendar?.updateComplete;
+        this._updateMaskedRangeValue();
+        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._hide(true);
+    }
+    _handleInputEvent(event) {
+        event.stopPropagation();
+        if (this.nonEditable) {
+            event.preventDefault();
+            return;
+        }
+        const input = event.target;
+        const newValue = input.value ? CalendarDay.from(input.value).native : null;
+        this.value = this._getUpdatedDateRange(input, newValue);
+        this._calendar.activeDate =
+            newValue ?? this._firstDefinedInRange ?? this._calendar.activeDate;
+        this.emitEvent('igcInput', { detail: this.value });
+    }
+    _handleInputChangeEvent(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);
+        this._setCalendarRangeValues();
+        this.value = { start, end };
+        this.emitEvent('igcChange', { detail: this.value });
+    }
+    _handleFocusIn() {
+        this._dirty = true;
+    }
+    _handleFocusOut({ relatedTarget }) {
+        if (!this.contains(relatedTarget)) {
+            this.checkValidity();
+            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) {
+        if (findElementFromEventPath('input', event)) {
+            this.handleAnchorClick();
+        }
+    }
+    async _onEscapeKey() {
+        if (await this._hide(true)) {
+            if (!this._isDropDown) {
+                this._revertValue();
+            }
+            this._inputs[0]?.focus();
+        }
+    }
+    async handleAnchorClick() {
+        super.handleAnchorClick();
+        this._setCalendarActiveDateAndViewIndex();
+        await this.updateComplete;
+        this._calendar[focusActiveDate]({ preventScroll: true });
+    }
+    async _handleCalendarChangeEvent(event) {
+        event.stopPropagation();
+        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();
+    }
+    _handleCalendarIconSlotPointerDown(event) {
+        event.preventDefault();
+    }
+    _revertValue() {
+        this.value = this._oldValue;
+    }
+    _setCalendarActiveDateAndViewIndex() {
+        const activeDaysViewIndex = 'activeDaysViewIndex';
+        this._calendar.activeDate =
+            this._firstDefinedInRange ?? this._calendar.activeDate;
+        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 };
+    }
+    _delegateInputsValidity() {
+        const inputs = this.useTwoInputs ? this._inputs : [this._input];
+        inputs.forEach((input) => {
+            input.checkValidity = () => this._dirty || !this._pristine ? this.checkValidity() : true;
+            input.reportValidity = () => this._dirty || !this._pristine ? this.reportValidity() : true;
+        });
+    }
+    _setDateConstraints() {
+        const dates = [];
+        if (this._min) {
+            dates.push({
+                type: DateRangeType.Before,
+                dateRange: [this._min],
+            });
+        }
+        if (this._max) {
+            dates.push({
+                type: DateRangeType.After,
+                dateRange: [this._max],
+            });
+        }
+        if (!isEmpty(this.disabledDates)) {
+            dates.push(...this.disabledDates);
+        }
+        this._dateConstraints = isEmpty(dates) ? [] : dates;
+    }
+    _updateMaskedRangeValue() {
+        if (this.useTwoInputs) {
+            return;
+        }
+        if (!isCompleteDateRange(this.value)) {
+            this._maskedRangeValue = '';
+            return;
+        }
+        const { formatDate, predefinedToDateDisplayFormat } = DateTimeUtil;
+        const { start, end } = this.value;
+        const format = predefinedToDateDisplayFormat(this._displayFormat) ??
+            this._displayFormat ??
+            this.inputFormat;
+        this._maskedRangeValue = format
+            ? `${formatDate(start, this.locale, format)} - ${formatDate(end, this.locale, format)}`
+            : `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
+    }
+    _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;
+            return;
+        }
+        this._calendar.values = this._firstDefinedInRange
+            ? [this._firstDefinedInRange]
+            : null;
+    }
+    _swapDates(range) {
+        return isCompleteDateRange(range) &&
+            CalendarDay.compare(range.start, range.end) >= 1
+            ? { 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 =
+            this._firstDefinedInRange ?? this._calendar.activeDate;
+        if (emitEvent) {
+            this.emitEvent('igcChange', { detail: this.value });
+            this._oldValue = this.value;
+            this._hide(true);
+        }
+    }
+    _renderClearIcon(picker = '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 = '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.selectDate}
+      </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 slot = this._isDropDown || hasActions ? undefined : 'footer';
+        return html `
+      <div part="actions" ?hidden=${!hasActions} slot=${ifDefined(slot)}>
+        <slot name="actions"></slot>
+      </div>
+    `;
+    }
+    _renderPredefinedRanges() {
+        const hasRanges = this.usePredefinedRanges || !isEmpty(this.customRanges);
+        return hasRanges
+            ? html `
+          <igc-predefined-ranges-area
+            .usePredefinedRanges=${this.usePredefinedRanges}
+            .customRanges=${this.customRanges}
+            .resourceStrings=${this.resourceStrings}
+            @igcRangeSelect=${({ detail }) => this._select(detail, this._isDropDown)}
+          >
+          </igc-predefined-ranges-area>
+        `
+            : nothing;
+    }
+    _renderPicker(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.selectDate)}
+            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=${this._isIndigoTheme ? 'outlined' : 'flat'}
+              >${this.resourceStrings.cancel}</igc-button
+            >
+            <igc-button
+              slot="footer"
+              @click=${this._dialogDone}
+              variant=${this._isIndigoTheme ? 'contained' : 'flat'}
+              >${this.resourceStrings.done}</igc-button
+            >
+          </igc-dialog>
+        `;
+    }
+    _renderHelperText() {
+        return IgcValidationContainerComponent.create(this);
+    }
+    _renderInput(id, picker = '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 = DateTimeUtil.predefinedToDateDisplayFormat(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 prefix = isEmpty(prefixes) ? undefined : 'prefix';
+        const suffix = isEmpty(suffixes) ? undefined : 'suffix';
+        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}
+        .value=${value ?? null}
+        .locale=${live(this.locale)}
+        .prompt=${this.prompt}
+        .outlined=${this.outlined}
+        .placeholder=${placeholder}
+        .min=${this._min}
+        .max=${this._max}
+        label=${label}
+        ?invalid=${live(this.invalid)}
+        @igcChange=${this._handleInputChangeEvent}
+        @igcInput=${this._handleInputEvent}
+        @click=${this._isDropDown || this.readOnly
+            ? nothing
+            : 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>
+      </igc-date-time-input>
+    `;
+    }
+    _renderInputs(idStart, idEnd) {
+        return html `
+      <div part="inputs">
+        ${this._renderInput(idStart, 'start')}
+        <div part="separator">
+          <slot name="separator"> ${this.resourceStrings.separator} </slot>
+        </div>
+        ${this._renderInput(idEnd, 'end')}
+      </div>
+      ${this._renderPicker(idStart)} ${this._renderHelperText()}
+    `;
+    }
+    _renderSingleInput(id) {
+        const prefix = isEmpty(this._prefixes) ? undefined : 'prefix';
+        const suffix = isEmpty(this._suffixes) ? undefined : 'suffix';
+        return html `
+      <igc-input
+        id=${id}
+        aria-haspopup="dialog"
+        .value=${this._maskedRangeValue}
+        label=${this.label}
+        placeholder=${this.placeholder}
+        ?readonly=${true}
+        ?required=${this.required}
+        .outlined=${this.outlined}
+        ?invalid=${live(this.invalid)}
+        .disabled=${this.disabled}
+        @click=${this._isDropDown || this.readOnly
+            ? nothing
+            : 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>
+      </igc-input>
+      ${this._renderHelperText()} ${this._renderPicker(id)}
+    `;
+    }
+    render() {
+        const id = this.id || this._inputId;
+        const idStart = `${id}-start`;
+        const idEnd = `${id}-end`;
+        if (!this.useTwoInputs) {
+            return this._renderSingleInput(id);
+        }
+        return this._renderInputs(idStart, idEnd);
+    }
+};
+IgcDateRangePickerComponent.tagName = 'igc-date-range-picker';
+IgcDateRangePickerComponent.styles = [styles, shared];
+IgcDateRangePickerComponent._increment = createCounter();
+__decorate([
+    state()
+], IgcDateRangePickerComponent.prototype, "_maskedRangeValue", void 0);
+__decorate([
+    queryAll(IgcDateTimeInputComponent.tagName)
+], IgcDateRangePickerComponent.prototype, "_inputs", void 0);
+__decorate([
+    query(IgcInputComponent.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({ 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);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'use-predefined-ranges',
+    })
+], IgcDateRangePickerComponent.prototype, "usePredefinedRanges", void 0);
+__decorate([
+    property()
+], IgcDateRangePickerComponent.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcDateRangePickerComponent.prototype, "resourceStrings", void 0);
+__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);
+__decorate([
+    property({ attribute: 'label-end' })
+], IgcDateRangePickerComponent.prototype, "labelEnd", void 0);
+__decorate([
+    property()
+], IgcDateRangePickerComponent.prototype, "placeholder", null);
+__decorate([
+    property({ attribute: 'placeholder-start' })
+], IgcDateRangePickerComponent.prototype, "placeholderStart", void 0);
+__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([
+    themes(all, { exposeController: true }),
+    blazorAdditionalDependencies('IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent, IgcChipComponent, IgcInputComponent'),
+    shadowOptions({ delegatesFocus: true })
+], IgcDateRangePickerComponent);
+export default IgcDateRangePickerComponent;
+//# sourceMappingURL=date-range-picker.js.map