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.
282 lines • 10.8 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 { getDateFormatter } from 'igniteui-i18n-core';
import { LitElement } from 'lit';
import { eventOptions, property, query, state } from 'lit/decorators.js';
import { cache } from 'lit/directives/cache.js';
import { convertToDate } from '../calendar/helpers.js';
import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, ctrlKey, } from '../common/controllers/key-bindings.js';
import { addSlotController, setSlots } from '../common/controllers/slot.js';
import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
import { shadowOptions } from '../common/decorators/shadow-options.js';
import { addI18nController, getDefaultDateTimeFormat, } from '../common/i18n/i18n-controller.js';
import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
import { MaskBehaviorMixin, } from '../common/mixins/mask-behavior.js';
import { nextInputId, renderInputShell, } from '../common/templates/input-shell.js';
import { renderMaskedNativeInput } from '../common/templates/masked-input.js';
import { dateTimeInputValidators } from './validators.js';
const Slots = setSlots('prefix', 'suffix', 'helper-text', 'value-missing', 'range-overflow', 'range-underflow', 'custom-error', 'invalid');
let IgcDateTimeInputBaseComponent = class IgcDateTimeInputBaseComponent extends MaskBehaviorMixin(FormAssociatedRequiredMixin(LitElement)) {
get _resolvedLabelElements() {
return this._labelElements ?? this._internals.labels;
}
get __validators() {
return dateTimeInputValidators;
}
get _targetDatePart() {
return this._focused
? this._getDatePartAtCursor()
: this._getDefaultDatePart();
}
get inputFormat() {
return this._inputFormat || this._parser.mask;
}
set inputFormat(val) {
if (val) {
this._applyMask(val);
this._inputFormat = val;
this._updateMaskDisplay();
}
}
set min(value) {
this._min = convertToDate(value);
this._validate();
}
get min() {
return this._min;
}
set max(value) {
this._max = convertToDate(value);
this._validate();
}
get max() {
return this._max;
}
set displayFormat(value) {
this._displayFormat = value;
}
get displayFormat() {
return (this._displayFormat ?? this._inputFormat ?? this._defaultDisplayFormat);
}
set locale(value) {
this._i18nController.locale = value;
}
get locale() {
return this._i18nController.locale;
}
constructor() {
super();
this._slots = addSlotController(this, { slots: Slots });
this._inputId = nextInputId();
this._labelElements = null;
this._i18nController = addI18nController(this, {
defaultEN: {},
onResourceChange: this._handleResourceChange,
});
this._min = null;
this._max = null;
this._defaultDisplayFormat = '';
this.outlined = false;
this.spinLoop = true;
addKeybindings(this, {
skip: () => this.readOnly,
bindingDefaults: { repeat: true },
})
.set([ctrlKey, ';'], this._setCurrentDateTime)
.set(arrowUp, this._keyboardSpin.bind(this, 'up'))
.set(arrowDown, this._keyboardSpin.bind(this, 'down'))
.set([ctrlKey, arrowLeft], this._navigateParts.bind(this, 0))
.set([ctrlKey, arrowRight], this._navigateParts.bind(this, 1));
}
update(props) {
if (props.has('displayFormat')) {
this._updateDefaultDisplayFormat();
}
if (props.has('locale')) {
this._initializeDefaultMask();
}
if (props.has('displayFormat') || props.has('locale')) {
this._updateMaskDisplay();
}
super.update(props);
}
_handleResourceChange() {
this._initializeDefaultMask();
this._updateMaskDisplay();
}
_handleDragLeave() {
if (!this._focused) {
this._updateMaskDisplay();
}
}
_handleDragEnter() {
if (!this._focused) {
this._maskedValue = this._buildMaskedValue();
}
}
async _handleWheel(event) {
if (!this._focused || this.readOnly)
return;
event.preventDefault();
event.stopPropagation();
const { start, end } = this._inputSelection;
event.deltaY > 0 ? this.stepDown() : this.stepUp();
this._emitInputEvent();
await this.updateComplete;
this.setSelectionRange(start, end);
}
_navigateParts(direction) {
const position = this._calculatePartNavigationPosition(this._input?.value ?? '', direction);
this.setSelectionRange(position, position);
}
async _keyboardSpin(direction) {
direction === 'up' ? this.stepUp() : this.stepDown();
this._emitInputEvent();
await this.updateComplete;
this.setSelectionRange(this._maskSelection.start, this._maskSelection.end);
}
_performStep(datePart, delta, isDecrement) {
const part = datePart || this._targetDatePart;
if (!part)
return;
const { start, end } = this._inputSelection;
const newValue = this._calculateSpunValue(part, delta, isDecrement);
this._commitSpunValue(newValue);
this.updateComplete.then(() => this._input?.setSelectionRange(start, end));
}
_updateMaskDisplay() {
this._maskedValue = this._focused
? this._buildMaskedValue()
: this._buildDisplayValue();
}
_isMaskComplete() {
return !this._maskedValue.includes(this.prompt);
}
_applyMask(formatString) {
const previous = this._parser.mask;
this._parser.mask = formatString;
if (!this.placeholder || previous === this.placeholder) {
this.placeholder = this._parser.mask;
}
}
_updateDefaultDisplayFormat() {
this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
}
_initializeDefaultMask() {
this._updateDefaultDisplayFormat();
if (!this._inputFormat) {
this._applyMask(getDefaultDateTimeFormat(this.locale));
}
}
_resolvePartNames(base) {
return {
[base]: true,
prefixed: this._slots.hasAssignedElements('prefix', {
selector: '[slot="prefix"]:not([hidden])',
}),
suffixed: this._slots.hasAssignedElements('suffix', {
selector: '[slot="suffix"]:not([hidden])',
}),
filled: !this._isEmptyMask,
};
}
select() {
this._input?.select();
}
focus(options) {
this._input?.focus(options);
}
blur() {
this._input?.blur();
}
stepUp(datePart, delta) {
this._performStep(datePart, delta, false);
}
stepDown(datePart, delta) {
this._performStep(datePart, delta, true);
}
_renderInput() {
const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
const hasHelperText = this._slots.hasAssignedElements('helper-text');
return renderMaskedNativeInput({
id: this._inputId,
partNames: this._resolvePartNames('input'),
name: this.name,
value: this._maskedValue,
placeholder: this.placeholder || this._parser.emptyMask,
readOnly: this.readOnly,
disabled: this.disabled,
tabindex: hasNegativeTabIndex ? -1 : undefined,
ariaDescribedBy: hasHelperText ? 'helper-text' : undefined,
ariaLabelledByElements: this._resolvedLabelElements,
onInput: this._handleInput,
onFocus: this._handleFocus,
onBlur: this._handleBlur,
onClick: this._handleClick,
onSetMaskSelection: this._setMaskSelection,
onCompositionStart: this._handleCompositionStart,
onCompositionEnd: this._handleCompositionEnd,
onWheel: this._handleWheel,
onDragEnter: this._handleDragEnter,
onDragLeave: this._handleDragLeave,
});
}
render() {
return cache(renderInputShell(this, {
theme: this._themes.theme,
label: this.label,
labelId: this._inputId,
containerParts: this._resolvePartNames('container'),
renderInput: this._renderInput,
}));
}
};
__decorate([
query('input')
], IgcDateTimeInputBaseComponent.prototype, "_input", void 0);
__decorate([
state()
], IgcDateTimeInputBaseComponent.prototype, "_labelElements", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], IgcDateTimeInputBaseComponent.prototype, "outlined", void 0);
__decorate([
property()
], IgcDateTimeInputBaseComponent.prototype, "placeholder", void 0);
__decorate([
property()
], IgcDateTimeInputBaseComponent.prototype, "label", void 0);
__decorate([
property({ attribute: 'input-format' })
], IgcDateTimeInputBaseComponent.prototype, "inputFormat", null);
__decorate([
property({ converter: convertToDate })
], IgcDateTimeInputBaseComponent.prototype, "min", null);
__decorate([
property({ converter: convertToDate })
], IgcDateTimeInputBaseComponent.prototype, "max", null);
__decorate([
property({ attribute: 'display-format' })
], IgcDateTimeInputBaseComponent.prototype, "displayFormat", null);
__decorate([
property({ attribute: false })
], IgcDateTimeInputBaseComponent.prototype, "spinDelta", void 0);
__decorate([
property({ type: Boolean, attribute: 'spin-loop' })
], IgcDateTimeInputBaseComponent.prototype, "spinLoop", void 0);
__decorate([
property()
], IgcDateTimeInputBaseComponent.prototype, "locale", null);
__decorate([
eventOptions({ passive: false })
], IgcDateTimeInputBaseComponent.prototype, "_handleWheel", null);
IgcDateTimeInputBaseComponent = __decorate([
blazorDeepImport,
shadowOptions({ delegatesFocus: true })
], IgcDateTimeInputBaseComponent);
export { IgcDateTimeInputBaseComponent };
//# sourceMappingURL=date-time-input.base.js.map