@acorex/components 7.1.0 → 7.1.1

package/fesm2022/acorex-components-time-box.mjs

@@ -11,329 +11,329 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { AXButtonModule } from '@acorex/components/button';
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXTimeBoxComponent extends AXBaseTextBoxMixin {
-    cdr;
-    input;
-    _minValue;
-    get minValue() {
-        return this._minValue;
-    }
-    set minValue(v) {
-        this._minValue = v;
-    }
-    _maxValue;
-    get maxValue() {
-        return this._maxValue;
-    }
-    set maxValue(v) {
-        this._maxValue = v;
-    }
-    formatChange = new EventEmitter();
-    _format = 'HH:mm';
-    get format() {
-        return this._format;
-    }
-    set format(v) {
-        this._setOption({
-            name: 'format',
-            value: v,
-        });
-    }
-    displayTextChange = new EventEmitter();
-    _displayText = '';
-    get displayText() {
-        return this._displayText;
-    }
-    set displayText(v) {
-        this._displayText = v;
-        this.displayTextChange.emit(v);
-    }
-    /**
-     *  @ignore
-     */
-    _maskObj;
-    _maskDirective;
-    /**
-     *  @ignore
-     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-    }
-    onViewInit() {
-        super.onViewInit();
-        this._updateMask();
-    }
-    _onValueChanged(oldValue, newValue) {
-        this._updateText();
-        this._maskDirective?.maskRef?.updateValue();
-        this._maskDirective?.maskRef?.updateControl();
-    }
-    _updateText() {
-        this.displayText = this.value
-            ? AXDateTime.convert(this.value).format(this.format)
-            : '';
-    }
-    _onOptionChanged(option) {
-        super._onOptionChanged(option);
-        this._updateMask();
-    }
-    focus() {
-        this.input.nativeElement.focus();
-    }
-    _updateMask() {
-        if (!this._maskObj) {
-            this._maskObj = IMask.createMask({
-                mask: this.format,
-                lazy: false,
-                autofix: true,
-                overwrite: true,
-                blocks: {
-                    HH: {
-                        mask: IMask.MaskedRange,
-                        from: 0,
-                        to: 23,
-                        maxLength: 2,
-                        placeholderChar: '0',
-                        autofix: 'pad',
-                    },
-                    mm: {
-                        mask: IMask.MaskedRange,
-                        from: 0,
-                        to: 59,
-                        maxLength: 2,
-                        placeholderChar: '0',
-                        autofix: 'pad',
-                    },
-                    ss: {
-                        mask: IMask.MaskedRange,
-                        from: 0,
-                        to: 59,
-                        maxLength: 2,
-                        placeholderChar: '0',
-                        autofix: 'pad',
-                    },
-                },
-            });
-        }
-        else {
-            this._maskObj.updateOptions({
-                mask: this.format,
-            });
-        }
-        this._maskDirective?.maskRef?.updateValue();
-        this._maskDirective?.maskRef?.updateControl();
-    }
-    _handleOnKeydownEvent(e) {
-        debugger;
-        const ignore = () => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        const nums = Array(10)
-            .fill(0)
-            .map((v, i) => i.toString());
-        const chars = [
-            'Backspace',
-            'ArrowDown',
-            'ArrowUp',
-            'ArrowRight',
-            'ArrowLeft',
-            'Tab',
-            'Enter',
-        ];
-        const input = e.target;
-        const key = e.key;
-        const valStr = input.value;
-        const sStart = input.selectionStart || 0;
-        const sEnd = input.selectionEnd || 0;
-        const dateVal = new AXDateTime(this.value);
-        //
-        const re = /[a-zA-Z0-9]+/gi;
-        const parts = Array.from(this.format.matchAll(re));
-        const word = valStr.substring(sStart, sEnd);
-        const part = parts.find((c) => c.index >= sStart);
-        const next = Array.from(valStr.substr(sEnd).matchAll(re));
-        const prev = Array.from(valStr.substring(0, sStart).matchAll(re));
-        //const part = parts[Array.from(valStr.matchAll(re)).findIndex(c => c[0] == word)];
-        //
-        const goNext = () => {
-            this._highlightPart(input, sEnd + (next[0]?.index || 0));
-        };
-        const goPrev = () => {
-            this._highlightPart(input, prev[prev.length - 1]?.index);
-        };
-        //
-        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-            ignore();
-            e.key === 'ArrowRight' ? goNext() : goPrev();
-        }
-        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            if (e.ctrlKey && e.key === 'ArrowDown') {
-                //this.open();
-            }
-            else {
-                const sign = e.key === 'ArrowUp' ? +1 : -1;
-                if (part) {
-                    switch (part[0]) {
-                        case 'hh':
-                        case 'h':
-                        case 'HH':
-                        case 'H':
-                            this.value = dateVal.add('hour', sign).date;
-                            break;
-                        case 'mm':
-                            this.value = dateVal.add('minute', sign).date;
-                            break;
-                        case 'ss':
-                        case 'SS':
-                            this.value = dateVal.add('second', sign).date;
-                            break;
-                    }
-                    setTimeout(() => {
-                        this._highlightPart(input, sStart);
-                    }, 10);
-                }
-            }
-            ignore();
-        }
-        else if (e.key == 'Backspace') {
-            // if (this.allowNull) {
-            //     this.value = null;
-            // }
-            // ignore();
-        }
-        else if (e.key == 'Tab') {
-            if (sEnd < valStr.length && !e.shiftKey) {
-                goNext();
-                ignore();
-            }
-            else if (sStart != 0 && e.shiftKey) {
-                goPrev();
-                ignore();
-            }
-        }
-        else {
-            // const keys = {
-            //     h: {
-            //         v: /^[0-9]$|^[1][0-2]$/,
-            //         p: '0'
-            //     },
-            //     H: {
-            //         v: /^[0-9]$|^1[0-9]$|2[0-3]$/,
-            //         p: '0'
-            //     },
-            //     m: {
-            //         v: /^[0-9]$|^[1-5][0-9]$/,
-            //         p: '0'
-            //     }
-            // }
-            // // const re = new RegExp(_.orderBy(Object.keys(keys), c => c.length, ['desc']).join("|"), "gi");
-            // // return format.replace(re, function (matched) {
-            // //   return keys[matched]();
-            // // });
-            // const t = keys[part[0]];
-            // if (!t.v.test(key)) {
-            //     ignore();
-            // }
-            // else {
-            //     this._updateText()
-            // }
-        }
-        // super._emitOnKeydownEvent(e);
-    }
-    _handleKeyUpEvent(e) {
-        // const input = (e.target as HTMLInputElement);
-        // setTimeout(() => {
-        //     this._highlightPart(input);
-        // }, 700);
-    }
-    _emitOnFocusEvent(e) {
-        const input = e.target;
-        this._highlightPart(input);
-        super._emitOnFocusEvent(e);
-    }
-    _handleOnInputClickEvent(e) {
-        const input = e.target;
-        this._highlightPart(input);
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    _highlightPart(input, pos) {
-        const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart || 0);
-        input.setSelectionRange(start, end);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", formatChange: "formatChange", displayTextChange: "displayTextChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input #input class=\"ax-input\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"false\"  \r\n    type=\"text\" \r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\" \r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [ngModel]=\"displayText\" \r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keyup)=\"_handleKeyUpEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\" \r\n    autocomplete=\"off\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\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"] }, { kind: "directive", type: i2.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-time-box', inputs: [
-                        'disabled',
-                        'readonly',
-                        'tabIndex',
-                        'size',
-                        'value',
-                        'placeholder', 'maxLength', 'allowNull', 'type', 'autoComplete', 'readonly', 'allowNull', 'value', 'name', 'checked',
-                    ], outputs: [
-                        'valueChange',
-                        'onValueChanged',
-                        'onBlur',
-                        'onFocus',
-                        'valueChange', 'onValueChanged',
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input #input class=\"ax-input\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"false\"  \r\n    type=\"text\" \r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\" \r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [ngModel]=\"displayText\" \r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keyup)=\"_handleKeyUpEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\" \r\n    autocomplete=\"off\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
-                type: ViewChild,
-                args: ['input']
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], formatChange: [{
-                type: Output
-            }], format: [{
-                type: Input
-            }], displayTextChange: [{
-                type: Output
-            }], displayText: [{
-                type: Input
-            }], _maskDirective: [{
-                type: ViewChild,
-                args: [IMaskDirective]
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXTimeBoxComponent extends AXBaseTextBoxMixin {
+    cdr;
+    input;
+    _minValue;
+    get minValue() {
+        return this._minValue;
+    }
+    set minValue(v) {
+        this._minValue = v;
+    }
+    _maxValue;
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(v) {
+        this._maxValue = v;
+    }
+    formatChange = new EventEmitter();
+    _format = 'HH:mm';
+    get format() {
+        return this._format;
+    }
+    set format(v) {
+        this._setOption({
+            name: 'format',
+            value: v,
+        });
+    }
+    displayTextChange = new EventEmitter();
+    _displayText = '';
+    get displayText() {
+        return this._displayText;
+    }
+    set displayText(v) {
+        this._displayText = v;
+        this.displayTextChange.emit(v);
+    }
+    /**
+     *  @ignore
+     */
+    _maskObj;
+    _maskDirective;
+    /**
+     *  @ignore
+     */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+    }
+    onViewInit() {
+        super.onViewInit();
+        this._updateMask();
+    }
+    _onValueChanged(oldValue, newValue) {
+        this._updateText();
+        this._maskDirective?.maskRef?.updateValue();
+        this._maskDirective?.maskRef?.updateControl();
+    }
+    _updateText() {
+        this.displayText = this.value
+            ? AXDateTime.convert(this.value).format(this.format)
+            : '';
+    }
+    _onOptionChanged(option) {
+        super._onOptionChanged(option);
+        this._updateMask();
+    }
+    focus() {
+        this.input.nativeElement.focus();
+    }
+    _updateMask() {
+        if (!this._maskObj) {
+            this._maskObj = IMask.createMask({
+                mask: this.format,
+                lazy: false,
+                autofix: true,
+                overwrite: true,
+                blocks: {
+                    HH: {
+                        mask: IMask.MaskedRange,
+                        from: 0,
+                        to: 23,
+                        maxLength: 2,
+                        placeholderChar: '0',
+                        autofix: 'pad',
+                    },
+                    mm: {
+                        mask: IMask.MaskedRange,
+                        from: 0,
+                        to: 59,
+                        maxLength: 2,
+                        placeholderChar: '0',
+                        autofix: 'pad',
+                    },
+                    ss: {
+                        mask: IMask.MaskedRange,
+                        from: 0,
+                        to: 59,
+                        maxLength: 2,
+                        placeholderChar: '0',
+                        autofix: 'pad',
+                    },
+                },
+            });
+        }
+        else {
+            this._maskObj.updateOptions({
+                mask: this.format,
+            });
+        }
+        this._maskDirective?.maskRef?.updateValue();
+        this._maskDirective?.maskRef?.updateControl();
+    }
+    _handleOnKeydownEvent(e) {
+        debugger;
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const nums = Array(10)
+            .fill(0)
+            .map((v, i) => i.toString());
+        const chars = [
+            'Backspace',
+            'ArrowDown',
+            'ArrowUp',
+            'ArrowRight',
+            'ArrowLeft',
+            'Tab',
+            'Enter',
+        ];
+        const input = e.target;
+        const key = e.key;
+        const valStr = input.value;
+        const sStart = input.selectionStart || 0;
+        const sEnd = input.selectionEnd || 0;
+        const dateVal = new AXDateTime(this.value);
+        //
+        const re = /[a-zA-Z0-9]+/gi;
+        const parts = Array.from(this.format.matchAll(re));
+        const word = valStr.substring(sStart, sEnd);
+        const part = parts.find((c) => c.index >= sStart);
+        const next = Array.from(valStr.substr(sEnd).matchAll(re));
+        const prev = Array.from(valStr.substring(0, sStart).matchAll(re));
+        //const part = parts[Array.from(valStr.matchAll(re)).findIndex(c => c[0] == word)];
+        //
+        const goNext = () => {
+            this._highlightPart(input, sEnd + (next[0]?.index || 0));
+        };
+        const goPrev = () => {
+            this._highlightPart(input, prev[prev.length - 1]?.index);
+        };
+        //
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            ignore();
+            e.key === 'ArrowRight' ? goNext() : goPrev();
+        }
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (e.ctrlKey && e.key === 'ArrowDown') {
+                //this.open();
+            }
+            else {
+                const sign = e.key === 'ArrowUp' ? +1 : -1;
+                if (part) {
+                    switch (part[0]) {
+                        case 'hh':
+                        case 'h':
+                        case 'HH':
+                        case 'H':
+                            this.value = dateVal.add('hour', sign).date;
+                            break;
+                        case 'mm':
+                            this.value = dateVal.add('minute', sign).date;
+                            break;
+                        case 'ss':
+                        case 'SS':
+                            this.value = dateVal.add('second', sign).date;
+                            break;
+                    }
+                    setTimeout(() => {
+                        this._highlightPart(input, sStart);
+                    }, 10);
+                }
+            }
+            ignore();
+        }
+        else if (e.key == 'Backspace') {
+            // if (this.allowNull) {
+            //     this.value = null;
+            // }
+            // ignore();
+        }
+        else if (e.key == 'Tab') {
+            if (sEnd < valStr.length && !e.shiftKey) {
+                goNext();
+                ignore();
+            }
+            else if (sStart != 0 && e.shiftKey) {
+                goPrev();
+                ignore();
+            }
+        }
+        else {
+            // const keys = {
+            //     h: {
+            //         v: /^[0-9]$|^[1][0-2]$/,
+            //         p: '0'
+            //     },
+            //     H: {
+            //         v: /^[0-9]$|^1[0-9]$|2[0-3]$/,
+            //         p: '0'
+            //     },
+            //     m: {
+            //         v: /^[0-9]$|^[1-5][0-9]$/,
+            //         p: '0'
+            //     }
+            // }
+            // // const re = new RegExp(_.orderBy(Object.keys(keys), c => c.length, ['desc']).join("|"), "gi");
+            // // return format.replace(re, function (matched) {
+            // //   return keys[matched]();
+            // // });
+            // const t = keys[part[0]];
+            // if (!t.v.test(key)) {
+            //     ignore();
+            // }
+            // else {
+            //     this._updateText()
+            // }
+        }
+        // super._emitOnKeydownEvent(e);
+    }
+    _handleKeyUpEvent(e) {
+        // const input = (e.target as HTMLInputElement);
+        // setTimeout(() => {
+        //     this._highlightPart(input);
+        // }, 700);
+    }
+    _emitOnFocusEvent(e) {
+        const input = e.target;
+        this._highlightPart(input);
+        super._emitOnFocusEvent(e);
+    }
+    _handleOnInputClickEvent(e) {
+        const input = e.target;
+        this._highlightPart(input);
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    _highlightPart(input, pos) {
+        const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart || 0);
+        input.setSelectionRange(start, end);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", formatChange: "formatChange", displayTextChange: "displayTextChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input #input class=\"ax-input\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"false\"  \r\n    type=\"text\" \r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\" \r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [ngModel]=\"displayText\" \r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keyup)=\"_handleKeyUpEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\" \r\n    autocomplete=\"off\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\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"] }, { kind: "directive", type: i2.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-time-box', inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'size',
+                        'value',
+                        'placeholder', 'maxLength', 'allowNull', 'type', 'autoComplete', 'readonly', 'allowNull', 'value', 'name', 'checked',
+                    ], outputs: [
+                        'valueChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'valueChange', 'onValueChanged',
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input #input class=\"ax-input\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"false\"  \r\n    type=\"text\" \r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\" \r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [ngModel]=\"displayText\" \r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keyup)=\"_handleKeyUpEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\" \r\n    autocomplete=\"off\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input']
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], formatChange: [{
+                type: Output
+            }], format: [{
+                type: Input
+            }], displayTextChange: [{
+                type: Output
+            }], displayText: [{
+                type: Input
+            }], _maskDirective: [{
+                type: ViewChild,
+                args: [IMaskDirective]
             }] } });
 
-const COMPONENT = [AXTimeBoxComponent];
-const MODULES = [
-    CommonModule,
-    FormsModule,
-    AXButtonModule,
-    IMaskModule
-];
-class AXTimeBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
-            FormsModule,
-            AXButtonModule,
-            IMaskModule], exports: [AXTimeBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, imports: [MODULES] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
+const COMPONENT = [AXTimeBoxComponent];
+const MODULES = [
+    CommonModule,
+    FormsModule,
+    AXButtonModule,
+    IMaskModule
+];
+class AXTimeBoxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
+            FormsModule,
+            AXButtonModule,
+            IMaskModule], exports: [AXTimeBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, imports: [MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXTimeBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXTimeBoxComponent, AXTimeBoxModule };