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.
528 lines • 19.9 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 IgcDatePickerComponent_1;
import { html, nothing } from 'lit';
import { property, query, queryAssignedElements } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { addThemingController } from '../../theming/theming-controller.js';
import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
import { convertToDate } from '../calendar/helpers.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 { IgcCalendarResourceStringEN, } from '../common/i18n/calendar.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 { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
import { createFormValueState } from '../common/mixins/forms/form-value.js';
import { addSafeEventListener, createCounter, 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 IgcPopoverComponent from '../popover/popover.js';
import IgcValidationContainerComponent from '../validation-container/validation-container.js';
import { styles } from './themes/date-picker.base.css.js';
import { styles as shared } from './themes/shared/date-picker.common.css.js';
import { all } from './themes/themes.js';
import { datePickerValidators } from './validators.js';
let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
static register() {
registerComponent(IgcDatePickerComponent_1, IgcCalendarComponent, IgcDateTimeInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent);
}
get __validators() {
return datePickerValidators;
}
get _isDropDown() {
return this.mode === 'dropdown';
}
set value(value) {
this._formValue.setValueAndFormState(value);
}
get value() {
return this._formValue.value;
}
set activeDate(value) {
this._activeDate = convertToDate(value);
}
get activeDate() {
return this._activeDate ?? this._calendar?.activeDate;
}
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;
}
set displayFormat(value) {
this._displayFormat = value;
}
get displayFormat() {
return this._displayFormat ?? this.inputFormat;
}
set inputFormat(value) {
this._inputFormat = value;
}
get inputFormat() {
return this._inputFormat ?? this._input?.inputFormat;
}
_openChange() {
this._rootClickController.update();
}
constructor() {
super();
this._inputId = `date-picker-${IgcDatePickerComponent_1._increment()}`;
this._themes = addThemingController(this, all);
this._activeDate = null;
this._min = null;
this._max = null;
this._formValue = createFormValueState(this, {
initialValue: null,
transformers: FormValueDateTimeTransformers,
});
this._rootClickController = addRootClickController(this, {
onHide: this._handleClosing,
});
this.open = false;
this.mode = 'dropdown';
this.nonEditable = false;
this.readOnly = false;
this.headerOrientation = 'horizontal';
this.orientation = 'horizontal';
this.hideHeader = false;
this.hideOutsideDays = false;
this.outlined = false;
this.visibleMonths = 1;
this.showWeekNumbers = false;
this.locale = 'en';
this.prompt = '_';
this.resourceStrings = IgcCalendarResourceStringEN;
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;
}
_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) ? undefined : dates;
}
async _shouldCloseCalendarDropdown() {
if (!this.keepOpenOnSelect && (await this._hide(true))) {
this._input.focus();
this._input.select();
}
}
async _onEscapeKey() {
if (await this._hide(true)) {
this._input.focus();
}
}
_handleFocusOut({ relatedTarget }) {
if (!this.contains(relatedTarget)) {
this._handleBlur();
}
}
_handlerCalendarIconSlotPointerDown(event) {
event.preventDefault();
}
_handleInputClick(event) {
if (findElementFromEventPath('input', event)) {
this.handleAnchorClick();
}
}
async handleAnchorClick() {
this._calendar.activeDate = this.value ?? this._calendar.activeDate;
super.handleAnchorClick();
await this.updateComplete;
this._calendar[focusActiveDate]();
}
_handleInputChangeEvent(event) {
event.stopPropagation();
this._setTouchedState();
this.value = event.target.value;
this.emitEvent('igcChange', { detail: this.value });
}
async _handleCalendarChangeEvent(event) {
event.stopPropagation();
this._setTouchedState();
if (this.readOnly) {
await this._calendar.updateComplete;
this._calendar.value = this.value;
return;
}
this.value = event.target.value;
this.emitEvent('igcChange', { detail: this.value });
this._shouldCloseCalendarDropdown();
}
_handleInputEvent(event) {
event.stopPropagation();
this._setTouchedState();
if (this.nonEditable) {
event.preventDefault();
return;
}
this.value = event.target.value;
this.emitEvent('igcInput', { detail: this.value });
}
_handleClosing() {
this._hide(true);
}
_handleDialogClosing(event) {
event.stopPropagation();
this._hide(true);
}
_handleDialogClosed(event) {
event.stopPropagation();
}
clear() {
this.value = null;
this._input?.clear();
}
stepUp(datePart, delta) {
this._input.stepUp(datePart, delta);
}
stepDown(datePart, delta) {
this._input.stepDown(datePart, delta);
}
select() {
this._input.select();
}
setSelectionRange(start, end, direction) {
this._input.setSelectionRange(start, end, direction);
}
setRangeText(replacement, start, end, mode) {
this._input.setRangeText(replacement, start, end, mode);
this.value = this._input.value;
}
_renderClearIcon() {
return this.value
? html `
<span
slot="suffix"
part="clear-icon"
@click=${this.readOnly ? nothing : this.clear}
>
<slot name="clear-icon">
<igc-icon
name="input_clear"
collection="default"
aria-hidden="true"
></igc-icon>
</slot>
</span>
`
: nothing;
}
_renderCalendarIcon() {
const defaultIcon = html `
<igc-icon name="today" collection="default" aria-hidden="true"></igc-icon>
`;
const state = this.open ? 'calendar-icon-open' : 'calendar-icon';
return html `
<span
slot="prefix"
part=${state}
@pointerdown=${this._handlerCalendarIconSlotPointerDown}
@click=${this.readOnly ? nothing : this.handleAnchorClick}
>
<slot name=${state}>${defaultIcon}</slot>
</span>
`;
}
_renderCalendarSlots() {
if (this._isDropDown) {
return nothing;
}
const hasHeaderDate = isEmpty(this._headerSlotItems) ? '' : '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"
.inert=${!this.open || this.disabled}
?show-week-numbers=${this.showWeekNumbers}
?hide-outside-days=${this.hideOutsideDays}
?hide-header=${hideHeader}
.activeDate=${this.activeDate ?? this.value}
.value=${this.value}
.headerOrientation=${this.headerOrientation}
.orientation=${this.orientation}
.visibleMonths=${this.visibleMonths}
.locale=${this.locale}
.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>
`;
}
_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._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()}
</igc-dialog>
`;
}
_renderLabel(id) {
const isDisabled = this._isDropDown || this.readOnly;
return this.label
? html `
<label
part="label"
for=${id}
@click=${isDisabled ? nothing : this.handleAnchorClick}
>
${this.label}
</label>
`
: nothing;
}
_renderHelperText() {
return IgcValidationContainerComponent.create(this);
}
_renderInput(id) {
const format = DateTimeUtil.predefinedToDateDisplayFormat(this._displayFormat);
const readOnly = !this._isDropDown || this.readOnly || this.nonEditable;
const prefix = isEmpty(this._prefixes) ? undefined : 'prefix';
const suffix = isEmpty(this._suffixes) ? undefined : 'suffix';
const isMaterial = this._themes.theme === 'material';
return html `
<igc-date-time-input
id=${id}
aria-haspopup="dialog"
label=${ifDefined(isMaterial ? this.label : undefined)}
input-format=${ifDefined(this._inputFormat)}
display-format=${ifDefined(format)}
?disabled=${this.disabled}
?readonly=${readOnly}
?required=${this.required}
.value=${this.value}
.locale=${this.locale}
.prompt=${this.prompt}
.outlined=${this.outlined}
.placeholder=${this.placeholder}
.min=${this.min}
.max=${this.max}
.invalid=${this.invalid}
@igcChange=${this._handleInputChangeEvent}
@igcInput=${this._handleInputEvent}
@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-date-time-input>
`;
}
render() {
const id = this.id || this._inputId;
const isMaterial = this._themes.theme === 'material';
return html `
${isMaterial ? nothing : this._renderLabel(id)} ${this._renderInput(id)}
${this._renderPicker(id)} ${this._renderHelperText()}
`;
}
};
IgcDatePickerComponent.tagName = 'igc-date-picker';
IgcDatePickerComponent.styles = [styles, shared];
IgcDatePickerComponent._increment = createCounter();
__decorate([
query(IgcDateTimeInputComponent.tagName)
], IgcDatePickerComponent.prototype, "_input", void 0);
__decorate([
query(IgcCalendarComponent.tagName)
], IgcDatePickerComponent.prototype, "_calendar", void 0);
__decorate([
queryAssignedElements({ slot: 'prefix' })
], IgcDatePickerComponent.prototype, "_prefixes", void 0);
__decorate([
queryAssignedElements({ slot: 'suffix' })
], IgcDatePickerComponent.prototype, "_suffixes", void 0);
__decorate([
queryAssignedElements({ slot: 'actions' })
], IgcDatePickerComponent.prototype, "_actions", void 0);
__decorate([
queryAssignedElements({ slot: 'header-date' })
], IgcDatePickerComponent.prototype, "_headerSlotItems", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], IgcDatePickerComponent.prototype, "open", void 0);
__decorate([
property()
], IgcDatePickerComponent.prototype, "label", void 0);
__decorate([
property()
], IgcDatePickerComponent.prototype, "mode", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'non-editable' })
], IgcDatePickerComponent.prototype, "nonEditable", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'readonly' })
], IgcDatePickerComponent.prototype, "readOnly", void 0);
__decorate([
property({ converter: convertToDate })
], IgcDatePickerComponent.prototype, "value", null);
__decorate([
property({ attribute: 'active-date', converter: convertToDate })
], IgcDatePickerComponent.prototype, "activeDate", null);
__decorate([
property({ converter: convertToDate })
], IgcDatePickerComponent.prototype, "min", null);
__decorate([
property({ converter: convertToDate })
], IgcDatePickerComponent.prototype, "max", null);
__decorate([
property({ attribute: 'header-orientation', reflect: true })
], IgcDatePickerComponent.prototype, "headerOrientation", void 0);
__decorate([
property()
], IgcDatePickerComponent.prototype, "orientation", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'hide-header' })
], IgcDatePickerComponent.prototype, "hideHeader", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'hide-outside-days' })
], IgcDatePickerComponent.prototype, "hideOutsideDays", void 0);
__decorate([
property({ attribute: false })
], IgcDatePickerComponent.prototype, "disabledDates", null);
__decorate([
property({ attribute: false })
], IgcDatePickerComponent.prototype, "specialDates", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], IgcDatePickerComponent.prototype, "outlined", void 0);
__decorate([
property()
], IgcDatePickerComponent.prototype, "placeholder", void 0);
__decorate([
property({ type: Number, attribute: 'visible-months' })
], IgcDatePickerComponent.prototype, "visibleMonths", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })
], IgcDatePickerComponent.prototype, "showWeekNumbers", void 0);
__decorate([
property({ attribute: 'display-format' })
], IgcDatePickerComponent.prototype, "displayFormat", null);
__decorate([
property({ attribute: 'input-format' })
], IgcDatePickerComponent.prototype, "inputFormat", null);
__decorate([
property()
], IgcDatePickerComponent.prototype, "locale", void 0);
__decorate([
property()
], IgcDatePickerComponent.prototype, "prompt", void 0);
__decorate([
property({ attribute: false })
], IgcDatePickerComponent.prototype, "resourceStrings", void 0);
__decorate([
property({ attribute: 'week-start' })
], IgcDatePickerComponent.prototype, "weekStart", void 0);
__decorate([
watch('open')
], IgcDatePickerComponent.prototype, "_openChange", null);
IgcDatePickerComponent = IgcDatePickerComponent_1 = __decorate([
blazorAdditionalDependencies('IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent'),
shadowOptions({ delegatesFocus: true })
], IgcDatePickerComponent);
export default IgcDatePickerComponent;
//# sourceMappingURL=date-picker.js.map