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.
187 lines • 7.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;
};
import { property } from 'lit/decorators.js';
import { addThemingController } from '../../theming/theming-controller.js';
import { convertToDate, isValidDate } from '../calendar/helpers.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 { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
import { createFormValueState } from '../common/mixins/forms/form-value.js';
import { equal } from '../common/util.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 IgcValidationContainerComponent from '../validation-container/validation-container.js';
import { DatePart, DEFAULT_DATE_PARTS_SPIN_DELTAS, } from './date-part.js';
import { IgcDateTimeInputBaseComponent } from './date-time-input.base.js';
import { createDatePart, DateParts, DateTimeMaskParser, } from './datetime-mask-parser.js';
import { dateTimeInputValidators } from './validators.js';
export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDateTimeInputBaseComponent) {
constructor() {
super(...arguments);
this._themes = addThemingController(this, all);
this._parser = new DateTimeMaskParser();
this._formValue = createFormValueState(this, {
initialValue: null,
transformers: FormValueDateTimeTransformers,
});
this._oldValue = null;
}
static { this.tagName = 'igc-date-time-input'; }
static { this.styles = [styles, shared]; }
static register() {
registerComponent(IgcDateTimeInputComponent, IgcValidationContainerComponent);
}
get __validators() {
return dateTimeInputValidators;
}
get _datePartDeltas() {
return { ...DEFAULT_DATE_PARTS_SPIN_DELTAS, ...this.spinDelta };
}
set value(value) {
this._formValue.setValueAndFormState(value);
this._updateMaskDisplay();
}
get value() {
return this._formValue.value;
}
async _handleFocus() {
this._focused = true;
if (this.readOnly) {
return;
}
this._oldValue = this.value;
if (!this.value) {
this._maskedValue = this._parser.emptyMask;
await this.updateComplete;
this.select();
}
else if (this.displayFormat !== this.inputFormat) {
this._updateMaskDisplay();
}
}
_handleBlur() {
this._focused = false;
if (!(this._isMaskComplete() || this._isEmptyMask)) {
const parsedDate = this._parser.parseDate(this._maskedValue);
if (parsedDate) {
this.value = parsedDate;
}
else {
this.clear();
}
}
else {
this._updateMaskDisplay();
}
if (!this.readOnly && !equal(this._oldValue, this.value)) {
this.emitEvent('igcChange', { detail: this.value });
}
super._handleBlur();
}
_calculatePartNavigationPosition(inputValue, direction) {
const cursorPos = this._maskSelection.start;
const dateParts = this._parser.dateParts;
if (direction === 0) {
const part = dateParts.findLast((part) => part.type === DateParts.Literal && part.end < cursorPos);
return part?.end ?? 0;
}
const part = dateParts.find((part) => part.type === DateParts.Literal && part.start > cursorPos);
return part?.start ?? inputValue.length;
}
_getDatePartAtCursor() {
return this._parser.getDatePartForCursor(this._inputSelection.start)
?.type;
}
_getDefaultDatePart() {
return (this._parser.getPartByType(DateParts.Date)?.type ??
this._parser.getPartByType(DateParts.Hours)?.type ??
this._parser.getFirstDatePart()?.type);
}
_buildMaskedValue() {
return isValidDate(this.value)
? this._parser.formatDate(this.value)
: this._maskedValue || this._parser.emptyMask;
}
_buildDisplayValue() {
return isValidDate(this.value)
? formatDisplayDate(this.value, this.locale, this.displayFormat)
: '';
}
_commitSpunValue(value) {
this.value = value;
}
_setCurrentDateTime() {
this.value = new Date();
this._emitInputEvent();
}
_emitInputEvent() {
this._setTouchedState();
this.emitEvent('igcInput', { detail: this.value?.toISOString() });
}
_calculateSpunValue(datePart, delta, isDecrement) {
const effectiveDelta = delta || this._datePartDeltas[datePart] || 1;
const spinAmount = isDecrement
? -Math.abs(effectiveDelta)
: Math.abs(effectiveDelta);
return this._spinDatePart(datePart, spinAmount);
}
_spinDatePart(datePart, delta) {
if (!isValidDate(this.value)) {
return new Date();
}
const newDate = new Date(this.value.getTime());
const partType = datePart;
let part = this._parser.getPartByType(partType);
if (!part) {
part = createDatePart(partType, { start: 0, end: 0, format: '' });
}
let amPmValue;
if (datePart === DatePart.AmPm) {
const formatPart = this._parser.getPartByType(DateParts.AmPm);
if (formatPart) {
amPmValue = this._maskedValue.substring(formatPart.start, formatPart.end);
}
}
part.spin(delta, {
date: newDate,
spinLoop: this.spinLoop,
amPmValue,
originalDate: this.value,
});
return newDate;
}
_syncValueFromMask() {
if (!this._isMaskComplete()) {
this.value = null;
return;
}
const parsedDate = this._parser.parseDate(this._maskedValue);
this.value = isValidDate(parsedDate) ? parsedDate : 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.hasDateParts();
}
hasTimeParts() {
return this._parser.hasTimeParts();
}
}
__decorate([
property({ converter: convertToDate })
], IgcDateTimeInputComponent.prototype, "value", null);
//# sourceMappingURL=date-time-input.js.map