igniteui-webcomponents 4.3.0 → 4.4.0

package/components/date-time-input/date-time-input.d.ts

@@ -2,6 +2,7 @@ import { DatePartDeltas, DatePart } from './date-util.js';
 import { IgcMaskInputBaseComponent, MaskRange } from '../mask-input/mask-input-base.js';
 import { IgcInputEventMap } from '../input/input-base.js';
 import { AbstractConstructor } from '../common/mixins/constructor.js';
+import { Validator } from '../common/validators.js';
 export interface IgcDateTimeInputEventMap extends Omit<IgcInputEventMap, 'igcChange'> {
     igcChange: CustomEvent<Date | null>;
 }
@@ -30,6 +31,7 @@ declare const IgcDateTimeInputComponent_base: AbstractConstructor<import("../com
  */
 export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent_base {
     static readonly tagName = "igc-date-time-input";
+    protected validators: Validator<this>[];
     protected _defaultMask: string;
     protected _value: Date | null;
     private _oldValue;
@@ -48,16 +50,35 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
      */
     get value(): Date | null;
     set value(val: Date | null);
+    protected updateFormValue(): void;
+    /**
+     * The minimum value required for the input to remain valid.
+     * @attr
+     */
+    min: Date;
+    /**
+     * The maximum value required for the input to remain valid.
+     * @attr
+     */
+    max: Date;
     /**
      * The minimum value required for the input to remain valid.
      * @attr min-value
+     *
+     * @deprecated - since v4.4.0
+     * Use the `min` property instead.
      */
-    minValue: Date | null;
+    get minValue(): Date;
+    set minValue(value: Date);
     /**
      * The maximum value required for the input to remain valid.
      * @attr max-value
+     *
+     * @deprecated - since v4.4.0
+     * Use the `max` property instead.
      */
-    maxValue: Date | null;
+    get maxValue(): Date;
+    set maxValue(value: Date);
     /**
      * Format to display the value in when not editing.
      * Defaults to the input format if not set.
@@ -82,18 +103,12 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
     protected setDefaultMask(): void;
     protected setDisplayFormat(): void;
     protected promptChange(): void;
-    protected handleInvalidState(): void;
-    protected validate(): {} | null;
+    protected constraintChange(): void;
     private get hasDateParts();
     private get hasTimeParts();
     private get targetDatePart();
     private get datePartDeltas();
-    constructor();
     connectedCallback(): void;
-    /** Checks for validity of the control and shows the browser message if it's invalid. */
-    reportValidity(): boolean;
-    /** Check for validity of the control */
-    checkValidity(): boolean;
     /** Increments a date/time portion. */
     stepUp(datePart?: DatePart, delta?: number): void;
     /** Decrements a date/time portion. */
@@ -116,9 +131,13 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
     private isComplete;
     private updateValue;
     private getNewPosition;
-    protected handleFocus(): void;
+    protected handleFocus(): Promise<void>;
     protected handleBlur(): void;
-    protected handleKeydown(e: KeyboardEvent): void;
+    protected handleHorizontalArrows(event: KeyboardEvent): void;
+    protected handleVerticalArrows(event: KeyboardEvent): Promise<void>;
+    protected handleSemicolon(event: KeyboardEvent): void;
+    protected keyMap: Map<string, ((event: KeyboardEvent) => void) | ((event: KeyboardEvent) => Promise<void>) | ((event: KeyboardEvent) => void)>;
+    protected handleKeydown(e: KeyboardEvent): Promise<void>;
     protected renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/date-time-input/date-time-input.js

@@ -12,9 +12,57 @@ import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
 import { watch } from '../common/decorators/watch.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { IgcMaskInputBaseComponent, } from '../mask-input/mask-input-base.js';
-import { partNameMap } from '../common/util.js';
+import { format, partNameMap } from '../common/util.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import messages from '../common/localization/validation-en.js';
+const converter = {
+    fromAttribute: (value) => !value ? null : DateTimeUtil.parseIsoDate(value),
+    toAttribute: (value) => value.toISOString(),
+};
 class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseComponent) {
+    constructor() {
+        super(...arguments);
+        this.validators = [
+            {
+                key: 'valueMissing',
+                message: messages.required,
+                isValid: () => (this.required ? !!this.value : true),
+            },
+            {
+                key: 'rangeUnderflow',
+                message: () => format(messages.min, `${this.min}`),
+                isValid: () => this.min
+                    ? !DateTimeUtil.lessThanMinValue(this.value || new Date(), this.min, this.hasTimeParts, this.hasDateParts)
+                    : true,
+            },
+            {
+                key: 'rangeOverflow',
+                message: () => format(messages.max, `${this.max}`),
+                isValid: () => this.max
+                    ? !DateTimeUtil.greaterThanMaxValue(this.value || new Date(), this.max, this.hasTimeParts, this.hasDateParts)
+                    : true,
+            },
+        ];
+        this._value = null;
+        this._oldValue = null;
+        this._datePartDeltas = {
+            date: 1,
+            month: 1,
+            year: 1,
+            hours: 1,
+            minutes: 1,
+            seconds: 1,
+        };
+        this.spinLoop = true;
+        this.locale = 'en';
+        this.keyMap = new Map(Object.entries({
+            ArrowLeft: this.handleHorizontalArrows,
+            ArrowRight: this.handleHorizontalArrows,
+            ArrowUp: this.handleVerticalArrows,
+            ArrowDown: this.handleVerticalArrows,
+            ';': this.handleSemicolon,
+        }));
+    }
     get inputFormat() {
         return this._inputFormat || this._defaultMask;
     }
@@ -34,7 +82,26 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
                 : DateTimeUtil.parseIsoDate(val)
             : null;
         this.updateMask();
-        this.validate();
+        this.updateFormValue();
+        this.updateValidity();
+        this.setInvalidState();
+    }
+    updateFormValue() {
+        this._value
+            ? this.setFormValue(this._value.toISOString())
+            : this.setFormValue(null);
+    }
+    get minValue() {
+        return this.min;
+    }
+    set minValue(value) {
+        this.min = value;
+    }
+    get maxValue() {
+        return this.max;
+    }
+    set maxValue(value) {
+        this.max = value;
     }
     setDefaultMask() {
         if (!this._inputFormat) {
@@ -60,24 +127,8 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
             this.parser.prompt = this.prompt;
         }
     }
-    handleInvalidState() {
-        this.updateComplete.then(() => (this.invalid = !this.input.checkValidity()));
-    }
-    validate() {
-        if (!this.value) {
-            return null;
-        }
-        let errors = {};
-        if (this.minValue || this.maxValue) {
-            errors = DateTimeUtil.validateMinMax(this.value, this.minValue, this.maxValue, this.hasTimeParts, this.hasDateParts);
-            if (Object.keys(errors).length > 0) {
-                this.invalid = true;
-            }
-            else {
-                this.invalid = false;
-            }
-        }
-        return errors;
+    constraintChange() {
+        this.updateValidity();
     }
     get hasDateParts() {
         const parts = this._inputDateParts ||
@@ -96,7 +147,7 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
     get targetDatePart() {
         var _a;
         let result;
-        if (this.hasFocus) {
+        if (this.focused) {
             const partType = (_a = this._inputDateParts.find((p) => p.start <= this.inputSelection.start &&
                 this.inputSelection.start <= p.end &&
                 p.type !== DateParts.Literal)) === null || _a === void 0 ? void 0 : _a.type;
@@ -120,73 +171,45 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
     get datePartDeltas() {
         return Object.assign({}, this._datePartDeltas, this.spinDelta);
     }
-    constructor() {
-        super();
-        this._oldValue = null;
-        this._datePartDeltas = {
-            date: 1,
-            month: 1,
-            year: 1,
-            hours: 1,
-            minutes: 1,
-            seconds: 1,
-        };
-        this.spinLoop = true;
-        this.locale = 'en';
-        this.addEventListener('wheel', this.onWheel);
-    }
     connectedCallback() {
         super.connectedCallback();
         this.updateDefaultMask();
         this.setMask(this.inputFormat);
+        this.updateValidity();
         if (this.value) {
             this.updateMask();
         }
     }
-    reportValidity() {
-        const state = this._value
-            ? Object.keys(this.validate()).length === 0
-            : this.input.reportValidity();
-        this.invalid = !state;
-        return state;
-    }
-    checkValidity() {
-        if (this.disabled) {
-            return this.input.checkValidity();
-        }
-        if (!this._value) {
-            return !this.required;
-        }
-        return (this.input.checkValidity() && Object.keys(this.validate()).length === 0);
-    }
     stepUp(datePart, delta) {
         const targetPart = datePart || this.targetDatePart;
         if (!targetPart) {
             return;
         }
+        const { start, end } = this.inputSelection;
         const newValue = this.trySpinValue(targetPart, delta);
         this.value = newValue;
-        this.handleInput();
+        this.updateComplete.then(() => this.input.setSelectionRange(start, end));
     }
     stepDown(datePart, delta) {
         const targetPart = datePart || this.targetDatePart;
         if (!targetPart) {
             return;
         }
+        const { start, end } = this.inputSelection;
         const newValue = this.trySpinValue(targetPart, delta, true);
         this.value = newValue;
-        this.handleInput();
+        this.updateComplete.then(() => this.input.setSelectionRange(start, end));
     }
     clear() {
         this.maskedValue = '';
         this.value = null;
     }
     updateMask() {
-        if (this.hasFocus) {
+        if (this.focused) {
             this.maskedValue = this.getMaskedValue();
         }
         else {
-            if (!this.value || !DateTimeUtil.isValidDate(this.value)) {
+            if (!DateTimeUtil.isValidDate(this.value)) {
                 this.maskedValue = '';
                 return;
             }
@@ -204,30 +227,28 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
     }
     handleChange() {
         this.emitEvent('igcChange', { detail: this.value });
-        this.invalid = !this.checkValidity();
     }
     handleInput() {
         var _a;
         this.emitEvent('igcInput', { detail: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
     }
     handleDragLeave() {
-        if (!this.hasFocus) {
+        if (!this.focused) {
             this.updateMask();
         }
     }
     handleDragEnter() {
-        if (!this.hasFocus) {
+        if (!this.focused) {
             this.maskedValue = this.getMaskedValue();
         }
     }
     async updateInput(string, range) {
-        var _a;
         const { value, end } = this.parser.replace(this.maskedValue, string, range.start, range.end);
         this.maskedValue = value;
         this.updateValue();
         this.requestUpdate();
         if (range.start !== this.inputFormat.length) {
-            this.emitEvent('igcInput', { detail: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+            this.handleInput();
         }
         await this.updateComplete;
         this.input.setSelectionRange(end, end);
@@ -274,20 +295,17 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
         }
         return newDate;
     }
-    onWheel(event) {
-        if (!this.hasFocus) {
+    async onWheel(event) {
+        if (!this.focused || this.readonly) {
             return;
         }
-        this.selection = this.inputSelection;
         event.preventDefault();
         event.stopPropagation();
-        if (event.deltaY > 0) {
-            this.stepDown();
-        }
-        else {
-            this.stepUp();
-        }
-        this.updateComplete.then(() => this.setSelectionRange(this.selection.start, this.selection.end));
+        const { start, end } = this.inputSelection;
+        event.deltaY > 0 ? this.stepDown() : this.stepUp();
+        this.handleInput();
+        await this.updateComplete;
+        this.setSelectionRange(start, end);
     }
     updateDefaultMask() {
         this._defaultMask = DateTimeUtil.getDefaultMask(this.locale);
@@ -363,14 +381,22 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
             return cursorPos;
         }
     }
-    handleFocus() {
-        this.hasFocus = true;
-        this._oldValue = this.value;
+    async handleFocus() {
+        this.focused = true;
         this.updateMask();
-        this.emitEvent('igcFocus');
+        super.handleFocus();
+        if (this.readOnly) {
+            return;
+        }
+        this._oldValue = this.value;
+        if (!this._value) {
+            this.maskedValue = this.emptyMask;
+            await this.updateComplete;
+            this.select();
+        }
     }
     handleBlur() {
-        this.hasFocus = false;
+        this.focused = false;
         if (!this.isComplete() && this.maskedValue !== this.emptyMask) {
             const parse = this.parseDate(this.maskedValue);
             if (parse) {
@@ -387,34 +413,35 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
         if (this._oldValue !== this.value) {
             this.handleChange();
         }
-        this.emitEvent('igcBlur');
+        this.checkValidity();
+        super.handleBlur();
     }
-    handleKeydown(e) {
-        super.handleKeydown(e);
-        const key = e.key;
-        switch (key) {
-            case 'ArrowLeft':
-            case 'ArrowRight':
-                if (e.ctrlKey) {
-                    e.preventDefault();
-                    const value = e.target.value;
-                    const dir = key === 'ArrowRight' ? 1 : 0;
-                    const pos = this.getNewPosition(value, dir);
-                    this.setSelectionRange(pos, pos);
-                }
-                break;
-            case 'ArrowUp':
-            case 'ArrowDown':
-                e.preventDefault();
-                key === 'ArrowUp' ? this.stepUp() : this.stepDown();
-                this.updateComplete.then(() => this.setSelectionRange(this.selection.start, this.selection.end));
-                break;
-            case ';':
-                if (e.ctrlKey) {
-                    this.value = new Date();
-                }
-                break;
+    handleHorizontalArrows(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
         }
+        const position = this.getNewPosition(this.input.value, event.key === 'ArrowRight' ? 1 : 0);
+        this.setSelectionRange(position, position);
+    }
+    async handleVerticalArrows(event) {
+        event.preventDefault();
+        event.key === 'ArrowUp' ? this.stepUp() : this.stepDown();
+        this.handleInput();
+        await this.updateComplete;
+        this.setSelectionRange(this.selection.start, this.selection.end);
+    }
+    handleSemicolon(event) {
+        if (event.ctrlKey) {
+            this.value = new Date();
+        }
+    }
+    async handleKeydown(e) {
+        var _a;
+        if (this.readOnly) {
+            return;
+        }
+        super.handleKeydown(e);
+        (_a = this.keyMap.get(e.key)) === null || _a === void 0 ? void 0 : _a.call(this, e);
     }
     renderInput() {
         return html `
@@ -424,15 +451,16 @@ class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseCompon
         name=${ifDefined(this.name)}
         .value=${live(this.maskedValue)}
         .placeholder=${live(this.placeholder || this.emptyMask)}
-        ?readonly=${this.readonly}
+        ?readonly=${this.readOnly}
         ?disabled=${this.disabled}
-        ?required=${this.required}
-        @invalid="${this.handleInvalid}"
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
         @input=${super.handleInput}
+        @wheel=${this.onWheel}
         @keydown=${this.handleKeydown}
+        @click=${this.handleClick}
         @cut=${this.handleCut}
+        @change=${this.handleChange}
         @compositionstart=${this.handleCompositionStart}
         @compositionend=${this.handleCompositionEnd}
         @dragenter=${this.handleDragEnter}
@@ -447,32 +475,21 @@ __decorate([
     property({ attribute: 'input-format' })
 ], IgcDateTimeInputComponent.prototype, "inputFormat", null);
 __decorate([
-    property({
-        converter: {
-            fromAttribute: (value) => !value ? null : DateTimeUtil.parseIsoDate(value),
-            toAttribute: (value) => value.toISOString(),
-        },
-    }),
+    property({ converter: converter }),
     blazorTwoWayBind('igcChange', 'detail')
 ], IgcDateTimeInputComponent.prototype, "value", null);
 __decorate([
-    property({
-        attribute: 'min-value',
-        converter: {
-            fromAttribute: (value) => !value ? null : DateTimeUtil.parseIsoDate(value),
-            toAttribute: (value) => value.toISOString(),
-        },
-    })
-], IgcDateTimeInputComponent.prototype, "minValue", void 0);
+    property({ converter: converter })
+], IgcDateTimeInputComponent.prototype, "min", void 0);
+__decorate([
+    property({ converter: converter })
+], IgcDateTimeInputComponent.prototype, "max", void 0);
 __decorate([
-    property({
-        attribute: 'max-value',
-        converter: {
-            fromAttribute: (value) => !value ? null : DateTimeUtil.parseIsoDate(value),
-            toAttribute: (value) => value.toISOString(),
-        },
-    })
-], IgcDateTimeInputComponent.prototype, "maxValue", void 0);
+    property({ attribute: 'min-value', converter: converter })
+], IgcDateTimeInputComponent.prototype, "minValue", null);
+__decorate([
+    property({ attribute: 'max-value', converter: converter })
+], IgcDateTimeInputComponent.prototype, "maxValue", null);
 __decorate([
     property({ attribute: 'display-format' })
 ], IgcDateTimeInputComponent.prototype, "displayFormat", void 0);
@@ -495,13 +512,8 @@ __decorate([
     watch('prompt', { waitUntilFirstUpdate: true })
 ], IgcDateTimeInputComponent.prototype, "promptChange", null);
 __decorate([
-    watch('required', { waitUntilFirstUpdate: true }),
-    watch('disabled', { waitUntilFirstUpdate: true }),
-    watch('value', { waitUntilFirstUpdate: true })
-], IgcDateTimeInputComponent.prototype, "handleInvalidState", null);
-__decorate([
-    watch('maxValue'),
-    watch('minValue')
-], IgcDateTimeInputComponent.prototype, "validate", null);
+    watch('min', { waitUntilFirstUpdate: true }),
+    watch('max', { waitUntilFirstUpdate: true })
+], IgcDateTimeInputComponent.prototype, "constraintChange", null);
 export default IgcDateTimeInputComponent;
 //# sourceMappingURL=date-time-input.js.map