@acorex/components 16.0.2 → 17.0.1

package/fesm2022/acorex-components-datetime-input.mjs

@@ -0,0 +1,578 @@
+import { MXInputBaseValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent } from '@acorex/components/common';
+import { AXCalendarService, AXDateTimeModule } from '@acorex/core/date-time';
+import { AXStringUtil } from '@acorex/core/utils';
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, Output, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+class AXDateTimeInputComponent extends MXInputBaseValueComponent {
+    constructor() {
+        super(...arguments);
+        this.calendarService = inject(AXCalendarService);
+        this._editingParts = {
+            year: {
+                key: 'year',
+                placeholder: 'yyyy',
+                placeholders: ['YY', 'yy', 'YYYY', 'yyyy'],
+                enabled: false,
+                default: 2023,
+                typedValue: null,
+                realValue: () => this.editingDateObj.format(this._editingParts.year.placeholder),
+            },
+            month: {
+                key: 'month',
+                placeholder: 'MM',
+                placeholders: ['MMM', 'MMMM', 'MM', 'M'],
+                enabled: false,
+                default: 1,
+                typedValue: null,
+                realValue: () => this.editingDateObj.format(this._editingParts.month.placeholder),
+            },
+            day: {
+                key: 'day',
+                placeholder: 'dd',
+                placeholders: ['dd', 'd', 'DDDD', 'DDD'],
+                enabled: false,
+                default: 1,
+                typedValue: null,
+                realValue: () => this.editingDateObj.format(this._editingParts.day.placeholder),
+            },
+            hour: {
+                key: 'hour',
+                placeholder: 'HH',
+                placeholders: ['HH', 'H', 'hh', 'h'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this.editingDateObj.format(this._editingParts.hour.placeholder),
+            },
+            minute: {
+                key: 'minute',
+                placeholder: 'mm',
+                placeholders: ['mm', 'm'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this.editingDateObj.format(this._editingParts.minute.placeholder),
+            },
+            second: {
+                key: 'second',
+                placeholder: 'ss',
+                placeholders: ['ss', 's'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this.editingDateObj.format(this._editingParts.second.placeholder),
+            },
+        };
+        this._inputChars = [];
+        this._type = this.calendarService.calendar.name();
+        this._activePart = 'hour';
+        this._editingDateObj = this.calendarService.now(this.type);
+        this.formatChange = new EventEmitter();
+        this.onClick = new EventEmitter();
+        this._format = this.calendarService.calendar.formats.dateTimeInput;
+    }
+    get type() {
+        return this._type || this.calendarService.calendar.name();
+    }
+    set type(v) {
+        this.setOption({
+            name: 'type',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get activePart() {
+        return this._activePart;
+    }
+    set activePart(v) {
+        this._activePart = v;
+        this._clearInputBuffer();
+    }
+    get editingDateObj() {
+        return this._editingDateObj;
+    }
+    get minValue() {
+        return this._minValue;
+    }
+    set minValue(v) {
+        this._minValue = v;
+    }
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(v) {
+        this._maxValue = v;
+    }
+    get format() {
+        return this._format;
+    }
+    set format(v) {
+        this.setOption({
+            name: 'format',
+            value: v,
+            afterCallback: (o, n) => {
+                Object.values(this._editingParts).forEach((e) => {
+                    e.enabled = false;
+                });
+                const formatParts = n.split(/[^a-zA-Z]+/);
+                formatParts.forEach((f) => {
+                    const found = Object.values(this._editingParts).find((c) => c.placeholders.some((d) => d == f));
+                    if (found) {
+                        found.enabled = true;
+                        found.placeholder = f;
+                    }
+                });
+            },
+        });
+    }
+    _getOrderedParts() {
+        // TODO: better spliter format
+        const formatParts = this.format.split(/[^a-zA-Z]+/);
+        const result = [];
+        formatParts.forEach((f) => {
+            const found = Object.values(this._editingParts).find((c) => c.placeholders.some((d) => d == f));
+            if (found && found.enabled)
+                result.push(found);
+        });
+        return result;
+    }
+    _clearInputBuffer() {
+        this._inputChars = [];
+    }
+    _updateText() {
+        let text = this.format;
+        //
+        Object.values(this._editingParts).forEach((part) => {
+            if (this.activePart == part.key) {
+                if (part.typedValue)
+                    text = text.replace(part.placeholder, part.typedValue);
+            }
+            else {
+                if (part.typedValue != part.placeholder && part.typedValue != null) {
+                    text = text.replace(part.placeholder, part.realValue());
+                }
+            }
+        });
+        this._editingText = text == this.format ? '' : text;
+        if (this.activePart) {
+            this._highlightActivePart();
+        }
+    }
+    internalSetValue(value) {
+        if (value) {
+            let editingDate = this.calendarService.create(value, this.type);
+            let applyChanges = false;
+            Object.values(this._editingParts).forEach((part) => {
+                if (!part.enabled) {
+                    editingDate = editingDate.set(part.key, part.default);
+                    applyChanges = true;
+                }
+            });
+            if (applyChanges) {
+                return editingDate.date;
+            }
+        }
+        return value;
+    }
+    internalValueChanged(value) {
+        if (value) {
+            this._editingDateObj = this.calendarService.create(value, this.type);
+        }
+        Object.values(this._editingParts).forEach((part) => {
+            if (value) {
+                if (part.typedValue != part.placeholder)
+                    part.typedValue = part.realValue();
+            }
+            else
+                part.typedValue = null;
+        });
+        this._updateText();
+    }
+    _handleOnKeydownEvent(e) {
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const input = e.target;
+        //
+        const orderedParts = this._getOrderedParts();
+        const part = this.activePart
+            ? this._editingParts[this.activePart]
+            : orderedParts[0];
+        const nextPart = part ? orderedParts[orderedParts.indexOf(part) + 1] : null;
+        const prevPart = part ? orderedParts[orderedParts.indexOf(part) - 1] : null;
+        //
+        const goNext = () => {
+            this._clearInputBuffer();
+            if (nextPart) {
+                this.activePart = nextPart.key;
+                this._highlightActivePart();
+            }
+        };
+        const goPrev = () => {
+            this._clearInputBuffer();
+            if (prevPart) {
+                this.activePart = prevPart.key;
+                this._highlightActivePart();
+            }
+        };
+        /***************  Handle Left and Right  **************/
+        if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {
+            ignore();
+            e.code === 'ArrowRight' ? goNext() : goPrev();
+        }
+        else if ((e.code === 'ArrowUp' || e.code === 'ArrowDown') && !e.ctrlKey) {
+            /***************  Handle Up and Down  **************/
+            if (this.disabled || this.readonly) {
+                ignore();
+                return;
+            }
+            else {
+                ignore();
+                const sign = e.code === 'ArrowUp' ? +1 : -1;
+                this.activePart = part.key;
+                let newVal = this.editingDateObj.add(part.key, sign);
+                this._editingParts[part.key].typedValue = newVal.format(this._editingParts[part.key].placeholder);
+                this._editingDateObj = newVal;
+                this._detectValueChanges();
+            }
+        }
+        else if (e.code == 'Backspace' || e.code == 'Delete') {
+            /***************  Handle Backspace  **************/
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (input.value) {
+                ignore();
+                this._editingParts[part.key].typedValue =
+                    this._editingParts[part.key].placeholder;
+                this._detectValueChanges();
+                goPrev();
+            }
+        }
+        else if (e.code == 'Tab' || e.code == 'Space') {
+            /***************  Handle Backspace  **************/
+            if (input.value) {
+                if (!e.shiftKey && nextPart) {
+                    ignore();
+                    goNext();
+                }
+                else if (e.shiftKey && prevPart) {
+                    ignore();
+                    goPrev();
+                }
+            }
+        }
+        else if (e.key?.trim() && !isNaN(Number(e.key))) {
+            ignore();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            let next = false;
+            const editing = this._editingParts[part.key];
+            //
+            switch (part.key) {
+                case 'year': {
+                    if (editing.placeholder.length == 2 && this._inputChars.length == 0) {
+                        this._inputChars.push(...this.calendarService
+                            .now(this.type)
+                            .format('yyyy')
+                            .substring(0, 2)
+                            .split(''));
+                    }
+                    if (this._inputChars.length < 4) {
+                        editing.typedValue = `${this._inputChars.join('')}${e.key}`;
+                        this._inputChars.push(e.key);
+                        if (this._inputChars.length > 3) {
+                            next = true;
+                        }
+                    }
+                    else {
+                        next = true;
+                    }
+                    editing.typedValue = ('0000' + editing.typedValue).slice(-4);
+                    const nv = parseInt(editing.typedValue);
+                    //if (nv > 0) {
+                    const newVal = this.editingDateObj.set('year', nv);
+                    this._editingDateObj = newVal;
+                    this._detectValueChanges();
+                    //}
+                    break;
+                }
+                case 'month': {
+                    if (this._inputChars.length == 0) {
+                        this._inputChars.push(e.key);
+                        editing.typedValue = `0${e.key}`;
+                        if (parseInt(e.key) > 1) {
+                            this._clearInputBuffer();
+                            next = true;
+                        }
+                    }
+                    else if (this._inputChars.length == 1) {
+                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
+                        if (newStr > 12) {
+                            editing.typedValue = `0${e.key}`;
+                        }
+                        else {
+                            editing.typedValue = newStr.toString();
+                        }
+                        this._clearInputBuffer();
+                        next = true;
+                    }
+                    editing.typedValue =
+                        editing.typedValue?.length === 1
+                            ? '0' + editing.typedValue
+                            : editing.typedValue;
+                    const nv = parseInt(editing.typedValue);
+                    if (nv > 0) {
+                        const newVal = this.editingDateObj.set(part.key, nv);
+                        this._editingDateObj = newVal;
+                        this._detectValueChanges();
+                    }
+                    break;
+                }
+                case 'day': {
+                    if (this._inputChars.length == 0) {
+                        this._inputChars.push(e.key);
+                        editing.typedValue = `0${e.key}`;
+                        if (parseInt(e.key) > 3) {
+                            this._clearInputBuffer();
+                            next = true;
+                        }
+                    }
+                    else if (this._inputChars.length == 1) {
+                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
+                        if (newStr > this._editingDateObj.month.totalDays) {
+                            editing.typedValue = `0${e.key}`;
+                        }
+                        else {
+                            editing.typedValue = newStr.toString();
+                        }
+                        this._clearInputBuffer();
+                        next = true;
+                    }
+                    editing.typedValue =
+                        editing.typedValue?.length === 1
+                            ? '0' + editing.typedValue
+                            : editing.typedValue;
+                    const nv = parseInt(editing.typedValue);
+                    if (nv > 0) {
+                        const newVal = this.editingDateObj.set(part.key, nv);
+                        this._editingDateObj = newVal;
+                        this._detectValueChanges();
+                    }
+                    break;
+                }
+                case 'hour': {
+                    if (this._inputChars.length == 0) {
+                        this._inputChars.push(e.key);
+                        editing.typedValue = `0${e.key}`;
+                        if (parseInt(e.key) > 2) {
+                            next = true;
+                        }
+                    }
+                    else if (this._inputChars.length == 1) {
+                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
+                        if (newStr > 23) {
+                            editing.typedValue = `0${e.key}`;
+                        }
+                        else {
+                            editing.typedValue = newStr.toString();
+                        }
+                        next = true;
+                    }
+                    editing.typedValue =
+                        editing.typedValue?.length === 1
+                            ? '0' + editing.typedValue
+                            : editing.typedValue;
+                    const newVal = this.editingDateObj.set('hour', parseInt(editing.typedValue));
+                    this._editingDateObj = newVal;
+                    this._detectValueChanges();
+                    break;
+                }
+                case 'minute':
+                case 'second':
+                    if (this._inputChars.length == 0) {
+                        this._inputChars.push(e.key);
+                        editing.typedValue = `0${e.key}`;
+                        if (parseInt(e.key) > 5) {
+                            this._clearInputBuffer();
+                            next = true;
+                        }
+                    }
+                    else if (this._inputChars.length == 1) {
+                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
+                        if (newStr > 59) {
+                            editing.typedValue = `0${e.key}`;
+                        }
+                        else {
+                            editing.typedValue = newStr.toString();
+                        }
+                        this._clearInputBuffer();
+                        next = true;
+                    }
+                    editing.typedValue =
+                        editing.typedValue?.length === 1
+                            ? '0' + editing.typedValue
+                            : editing.typedValue;
+                    const newVal = this.editingDateObj.set(part.key, parseInt(editing.typedValue));
+                    this._editingDateObj = newVal;
+                    this._detectValueChanges();
+                    break;
+                default:
+            }
+            if (next) {
+                goNext();
+                return;
+            }
+        }
+        /***************  Emit Event  **************/
+        super.emitOnKeydownEvent(e);
+    }
+    _handleKeyUpEvent(e) {
+        if (this.activePart) {
+            this._highlightActivePart();
+        }
+    }
+    _handleFocusEvent(e) {
+        //this._highlightActivePart();
+        super.emitOnFocusEvent(e);
+    }
+    _handleBlurEvent(e) {
+        super.emitOnBlurEvent(e);
+    }
+    _handleOnInputClickEvent(e) {
+        setTimeout(() => {
+            this._detectPartAtPosition();
+        }, 0);
+        this.onClick.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e,
+        });
+    }
+    _detectPartAtPosition() {
+        const input = this.input.nativeElement;
+        if (!input.value)
+            return;
+        const sStart = input.selectionEnd || 0;
+        const re = /[a-zA-Z0-9]+/gi;
+        const valueParts = Array.from(input.value.matchAll(re));
+        const orderedParts = this._getOrderedParts();
+        const index = valueParts.findIndex((c) => c.index <= sStart && c.index + c[0].length >= sStart);
+        this.activePart = orderedParts[index].key;
+        this._highlightActivePart();
+    }
+    _highlightActivePart() {
+        const input = this.input?.nativeElement;
+        if (!input || !input.value || !this.activePart)
+            return;
+        const orderedParts = this._getOrderedParts();
+        const index = orderedParts.findIndex((c) => c.key == this.activePart);
+        const re = /[a-zA-Z0-9]+/gi;
+        const valueParts = Array.from(input.value.matchAll(re));
+        const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, valueParts[index]?.index);
+        input.setSelectionRange(start, end);
+    }
+    _detectValueChanges() {
+        this.commitValue(this._editingDateObj.date, true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", type: "type", minValue: "minValue", maxValue: "maxValue", format: "format" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)", "keyup": "_handleKeyUpEvent($event)" }, classAttribute: "ax-editor-input" }, providers: [
+            { provide: AXComponent, useExisting: AXDateTimeInputComponent },
+            { provide: AXFocusableComponent, useExisting: AXDateTimeInputComponent },
+            { provide: AXValuableComponent, useExisting: AXDateTimeInputComponent },
+            { provide: AXClearableComponent, useExisting: AXDateTimeInputComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXDateTimeInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "input2", first: true, predicate: ["input2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #input id=\"input\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ax-input\"\n    type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"true\" [ngModel]=\"_editingText\"\n    (mouseup)=\"_handleOnInputClickEvent($event)\" (blur)=\"_handleBlurEvent($event)\" (focus)=\"_handleFocusEvent($event)\">\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDateTimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-datetime-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'placeholder',
+                        'value',
+                        'state',
+                        'name',
+                        'id',
+                    ], host: { class: 'ax-editor-input' }, outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'onClick',
+                        'readonlyChange',
+                        'disabledChange',
+                    ], providers: [
+                        { provide: AXComponent, useExisting: AXDateTimeInputComponent },
+                        { provide: AXFocusableComponent, useExisting: AXDateTimeInputComponent },
+                        { provide: AXValuableComponent, useExisting: AXDateTimeInputComponent },
+                        { provide: AXClearableComponent, useExisting: AXDateTimeInputComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXDateTimeInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<input #input id=\"input\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ax-input\"\n    type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"true\" [ngModel]=\"_editingText\"\n    (mouseup)=\"_handleOnInputClickEvent($event)\" (blur)=\"_handleBlurEvent($event)\" (focus)=\"_handleFocusEvent($event)\">\n<ng-content select=\"ax-validation-rule\">\n</ng-content>" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], input2: [{
+                type: ViewChild,
+                args: ['input2']
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], formatChange: [{
+                type: Output
+            }], onClick: [{
+                type: Output
+            }], format: [{
+                type: Input
+            }], _handleOnKeydownEvent: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], _handleKeyUpEvent: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+const COMPONENT = [AXDateTimeInputComponent];
+const MODULES = [CommonModule, FormsModule, AXDateTimeModule];
+class AXDateTimeInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDateTimeInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXDateTimeInputModule, declarations: [AXDateTimeInputComponent], imports: [CommonModule, FormsModule, AXDateTimeModule], exports: [AXDateTimeInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDateTimeInputModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDateTimeInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXDateTimeInputComponent, AXDateTimeInputModule };
+//# sourceMappingURL=acorex-components-datetime-input.mjs.map