igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
802 lines • 31.3 kB
JavaScript
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,
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();
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