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.
248 lines • 9.96 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;
};
import { property } from 'lit/decorators.js';
import { addThemingController } from '../../theming/theming-controller.js';
import { CalendarDay } from '../calendar/model.js';
import { registerComponent } from '../common/definitions/register.js';
import { formatDisplayDate } from '../common/i18n/i18n-controller.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { FormValueDateRangeTransformers } from '../common/mixins/forms/form-transformers.js';
import { createFormValueState } from '../common/mixins/forms/form-value.js';
import { equal } from '../common/util.js';
import { DatePartType, } from '../date-time-input/date-part.js';
import { IgcDateTimeInputBaseComponent } from '../date-time-input/date-time-input.base.js';
import { DateParts } from '../date-time-input/datetime-mask-parser.js';
import { styles } from '../input/themes/input.base.css.js';
import { styles as shared } from '../input/themes/shared/input.common.css.js';
import { all } from '../input/themes/themes.js';
import { DateRangeMaskParser, DateRangePosition, } from './date-range-mask-parser.js';
export default class IgcDateRangeInputComponent extends EventEmitterMixin(IgcDateTimeInputBaseComponent) {
constructor() {
super(...arguments);
this._formValue = createFormValueState(this, {
initialValue: { start: null, end: null },
transformers: FormValueDateRangeTransformers,
});
this._themes = addThemingController(this, all);
this._parser = new DateRangeMaskParser();
this._oldValue = null;
}
static { this.tagName = 'igc-date-range-input'; }
static { this.styles = [styles, shared]; }
static register() {
registerComponent(IgcDateRangeInputComponent);
}
get _datePartDeltas() {
return { date: 1, month: 1, year: 1 };
}
set value(value) {
this._formValue.setValueAndFormState(value);
this._updateMaskDisplay();
}
get value() {
return this._formValue.value;
}
connectedCallback() {
super.connectedCallback();
this._initializeDefaultMask();
this._updateMaskDisplay();
}
async _handleFocus() {
this._focused = true;
if (this.readOnly) {
return;
}
this._oldValue = this.value;
if (!this.value || (!this.value.start && !this.value.end)) {
this._maskedValue = this._parser.emptyMask;
await this.updateComplete;
this.select();
}
else if (this.displayFormat !== this.inputFormat) {
this._updateMaskDisplay();
}
}
_handleBlur() {
const isSameValue = equal(this._oldValue, this.value);
this._focused = false;
if (!(this._isMaskComplete() || this._isEmptyMask)) {
const parsed = this._parser.parseDateRange(this._maskedValue);
if (parsed && (parsed.start || parsed.end)) {
this.value = parsed;
}
else {
this.value = null;
this._maskedValue = '';
}
}
else {
this._updateMaskDisplay();
}
if (!(this.readOnly || isSameValue)) {
this.emitEvent('igcChange', { detail: this.value });
}
super._handleBlur();
}
_setCurrentDateTime() {
const today = CalendarDay.today.native;
this.value = { start: today, end: today };
this._emitInputEvent();
}
_calculatePartNavigationPosition(inputValue, direction) {
const cursorPos = this._maskSelection.start;
const rangeParts = this._parser.rangeParts;
const currentPart = rangeParts.find((p) => p.type !== DateParts.Literal &&
cursorPos >= p.start &&
cursorPos <= p.end);
const isStartOrEndPart = currentPart &&
(currentPart.position === DateRangePosition.Start ||
currentPart.position === DateRangePosition.End);
if (direction === 0) {
if (isStartOrEndPart && cursorPos !== currentPart.start) {
return currentPart.start;
}
const prevPart = [...rangeParts]
.reverse()
.find((p) => p.type !== DateParts.Literal && p.end < cursorPos);
return prevPart?.start ?? 0;
}
if (isStartOrEndPart && cursorPos !== currentPart.end) {
return currentPart.end;
}
const nextPart = rangeParts.find((p) => p.type !== DateParts.Literal && p.start > cursorPos);
return nextPart?.end ?? inputValue.length;
}
_updateMaskDisplay() {
if (this._focused) {
if (this.value?.start || this.value?.end) {
this._maskedValue = this._buildMaskedValue();
}
else if (!this._maskedValue) {
this._maskedValue = this._parser.emptyMask;
}
return;
}
this._maskedValue = this._buildDisplayValue();
}
_performStep(datePart, delta, isDecrement) {
if (!this.value?.start && !this.value?.end) {
const today = CalendarDay.today.native;
this.value = { start: today, end: today };
const { start, end } = this._inputSelection;
this.updateComplete.then(() => this._input?.setSelectionRange(start, end));
return;
}
super._performStep(datePart, delta, isDecrement);
}
_commitSpunValue(value) {
this.value = value;
}
_buildDisplayValue() {
if (!this.value?.start && !this.value?.end) {
return '';
}
const { start, end } = this.value;
const startStr = start
? formatDisplayDate(start, this.locale, this.displayFormat)
: '';
const endStr = end
? formatDisplayDate(end, this.locale, this.displayFormat)
: '';
return startStr && endStr
? `${startStr}${this._parser.separator}${endStr}`
: startStr || endStr;
}
_calculateSpunValue(datePart, delta, isDecrement) {
const range = datePart;
const part = this._parser.getPartByTypeAndPosition(range.part, range.position);
const today = CalendarDay.today.native;
const defaultValue = { start: today, end: today };
if (!part) {
return this.value || defaultValue;
}
const effectiveDelta = delta ?? this._datePartDeltas[range.part] ?? 1;
const spinAmount = effectiveDelta * (isDecrement ? -1 : 1);
const amPmValue = part.type === DatePartType.AmPm
? this._maskedValue.substring(part.start, part.end)
: undefined;
return this._parser.spinDateRangePart(part, spinAmount, this.value, this.spinLoop, amPmValue);
}
_getDatePartAtCursor() {
const cursorPos = this._inputSelection.start;
let part = this._parser.getDateRangePartForCursor(cursorPos);
if (part?.type === DatePartType.Literal) {
const nextPart = this._parser.rangeParts.find((p) => p.start >= cursorPos && p.type !== DatePartType.Literal);
if (nextPart) {
part = nextPart;
}
else {
part = this._parser.rangeParts.findLast((p) => p.end <= cursorPos && p.type !== DatePartType.Literal);
}
}
if (part && part.type !== DatePartType.Literal) {
return {
part: part.type,
position: part.position,
};
}
return undefined;
}
_getDefaultDatePart() {
const firstPart = this._parser.getFirstDatePartForPosition(DateRangePosition.Start);
if (firstPart) {
return {
part: firstPart.type,
position: DateRangePosition.Start,
};
}
return undefined;
}
_buildMaskedValue() {
return this._parser.formatDateRange(this.value);
}
_applyMask(string) {
const previous = this._parser.mask;
this._parser.mask = string;
this._defaultMask = string;
this._parser.prompt = this.prompt;
if (!this.placeholder || previous === this.placeholder) {
this.placeholder = this._parser.mask;
}
}
_syncValueFromMask() {
if (!this._isMaskComplete()) {
this.value = null;
return;
}
const parsed = this._parser.parseDateRange(this._maskedValue);
this.value = parsed?.start || parsed?.end ? parsed : null;
}
stepUp(datePart, delta) {
super.stepUp(datePart, delta);
}
stepDown(datePart, delta) {
super.stepDown(datePart, delta);
}
clear() {
this._maskedValue = '';
this.value = null;
}
hasDateParts() {
return this._parser.rangeParts.some((p) => p.type === DatePartType.Date ||
p.type === DatePartType.Month ||
p.type === DatePartType.Year);
}
hasTimeParts() {
return this._parser.rangeParts.some((p) => p.type === DatePartType.Hours ||
p.type === DatePartType.Minutes ||
p.type === DatePartType.Seconds);
}
}
__decorate([
property({ attribute: false })
], IgcDateRangeInputComponent.prototype, "value", null);
//# sourceMappingURL=date-range-input.js.map