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 { 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 } 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 { FormValueDateRangeTransformers } from '../common/mixins/forms/form-transformers.js';
import { createFormValueState } 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;
    }
    set value(value) {
        this._formValue.setValueAndFormState(convertToDateRange(value));
        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._validate();
    }
    get min() {
        return this._min;
    }
    set max(value) {
        this._max = convertToDate(value);
        this._setDateConstraints();
        this._validate();
    }
    get max() {
        return this._max;
    }
    set disabledDates(dates) {
        this._disabledDates = dates;
        this._setDateConstraints();
        this._validate();
    }
    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._themes = addThemingController(this, all);
        this._formValue = createFormValueState(this, {
            initialValue: { start: null, end: null },
            transformers: FormValueDateRangeTransformers,
        });
        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, '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;
    }
    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();
        this._setTouchedState();
        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();
        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);
        this._setCalendarRangeValues();
        this.value = { start, end };
        this.emitEvent('igcChange', { detail: this.value });
    }
    _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) {
        if (findElementFromEventPath('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 });
    }
    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();
    }
    _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._pristine ? this.checkValidity() : true;
            input.reportValidity = () => !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) {
        const isIndigo = this._themes.theme === 'indigo';
        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=${isIndigo ? 'outlined' : 'flat'}
              >${this.resourceStrings.cancel}</igc-button
            >
            <igc-button
              slot="footer"
              @click=${this._dialogDone}
              variant=${isIndigo ? '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;
        return html `${cache(!this.useTwoInputs
            ? this._renderSingleInput(id)
            : this._renderInputs(`${id}-start`, `${id}-end`))}`;
    }
};
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([
    blazorAdditionalDependencies('IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent, IgcChipComponent, IgcInputComponent'),
    shadowOptions({ delegatesFocus: true })
], IgcDateRangePickerComponent);
export default IgcDateRangePickerComponent;
//# sourceMappingURL=date-range-picker.js.map