@experteam-mx/ngx-input-number/fesm2022/experteam-mx-ngx-input-number.mjs

Angular input number for Experteam apps

import * as i0 from '@angular/core';
import { Injectable, InjectionToken, Optional, Inject, Component, ViewChild, Input, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i3 from 'angular-imask';
import { IMaskDirective, IMaskModule } from 'angular-imask';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

let inputConfigs$1 = class inputConfigs {
    groupSeparator;
    radixPoint;
};
class typesProvider {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: typesProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: typesProvider, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: typesProvider, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });
class defaultTypesProvider extends typesProvider {
    get config() {
        // return default config
        return {
            groupSeparator: ',',
            radixPoint: '.'
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: defaultTypesProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: defaultTypesProvider, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: defaultTypesProvider, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });
let inputConfigsHelp$1 = class inputConfigsHelp {
    config;
};

const INPUT_CONFIG_TOKEN = new InjectionToken('INPUT_CONFIG');

class inputConfigs {
    groupSeparator;
    radixPoint;
    lblKeyInvalid;
    max;
    decimals;
    negative;
}
class inputConfigsHelp {
    config;
}

class NgxInputNumberService {
    config;
    changeEvent = new BehaviorSubject(false);
    groupSeparator = ',';
    radixPoint = '.';
    lblKeyInvalid = 'Please enter a valid amount';
    negative = true;
    max = 999999999999999999999999999999999;
    decimals = 2;
    constructor(config) {
        this.config = config;
        if (config != null) {
            this.groupSeparator = config.groupSeparator;
            this.radixPoint = config.radixPoint;
            this.lblKeyInvalid = config.lblKeyInvalid;
            this.negative = config.negative;
            this.max = config.max;
            this.decimals = config.decimals;
        }
    }
    onChangeParams(config) {
        if (config.groupSeparator) {
            this.groupSeparator = config.groupSeparator;
        }
        if (config.radixPoint) {
            this.radixPoint = config.radixPoint;
        }
        if (config.lblKeyInvalid) {
            this.lblKeyInvalid = config.lblKeyInvalid;
        }
        if (config.negative !== undefined) {
            this.negative = config.negative;
        }
        if (config.max) {
            this.max = config.max;
        }
        if (config.decimals) {
            this.decimals = config.decimals;
        }
        this.changeEvent.next(true);
    }
    getChangeEvent() {
        return this.changeEvent;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberService, deps: [{ token: INPUT_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: inputConfigs, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [INPUT_CONFIG_TOKEN]
                }] }] });

class NgxInputNumberComponent {
    _ChangeDetectorRef;
    _NgxInputNumberService;
    inputElement;
    iMaskDir;
    control;
    negative;
    autofocus = false;
    decimals;
    max;
    idForLabel = '';
    tabIndex;
    addClass = 'form-control-sm';
    groupSeparator;
    radixPoint;
    lblKeyInvalid;
    lblKeyInvalidRender;
    imask;
    placeholder = '0';
    resetControl = false;
    prevValue = '';
    validateError = false;
    constructor(_ChangeDetectorRef, _NgxInputNumberService) {
        this._ChangeDetectorRef = _ChangeDetectorRef;
        this._NgxInputNumberService = _NgxInputNumberService;
    }
    ngAfterViewInit() {
        this.iMaskDir.maskRef?.updateValue();
        if (this.autofocus) {
            setTimeout(() => {
                this.inputElement.nativeElement.focus();
            });
        }
    }
    render() {
        this.control.setValue(String(this.control.value).replace('.', this._NgxInputNumberService.radixPoint));
        this._ChangeDetectorRef.detectChanges();
        this.lblKeyInvalidRender = this._NgxInputNumberService.lblKeyInvalid;
        this.imask = {
            mask: Number,
            scale: this._NgxInputNumberService.decimals,
            thousandsSeparator: this._NgxInputNumberService.groupSeparator,
            padFractionalZeros: true,
            normalizeZeros: true,
            radix: this._NgxInputNumberService.radixPoint,
            max: this._NgxInputNumberService.max,
            min: this._NgxInputNumberService.negative ? -999999999999999999999999999999999 : 0,
            format: (x) => {
                if (typeof x !== 'string' && x === null && !this.resetControl) {
                    this.resetControl = true;
                    this.inputElement.nativeElement.value = null;
                    this.iMaskDir.maskRef?.updateValue();
                    setTimeout(() => {
                        this.iMaskDir.maskRef?.updateControl();
                        this.control.setValue(null);
                        this.resetControl = false;
                    });
                    return null;
                }
                return String(x);
            }
        };
        if (this.lblKeyInvalid !== undefined) {
            this.lblKeyInvalidRender = this.lblKeyInvalid;
        }
        if (this.negative !== undefined) {
            this.imask.min = this.negative ? -999999999999999999999999999999999 : 0;
        }
        if (this.max !== undefined) {
            this.imask.max = this.max;
        }
        if (this.groupSeparator !== undefined) {
            this.imask.thousandsSeparator = this.groupSeparator;
        }
        if (this.radixPoint !== undefined) {
            this.imask.radix = this.radixPoint;
        }
        if (this.decimals !== undefined) {
            this.imask.scale = this.decimals;
        }
        setTimeout(() => {
            if (this.inputElement.nativeElement.value == '' && (this.control.value === null || this.control.value === '' || this.control.value === 0)) {
                this.control.setValue('');
            }
        });
    }
    ngOnInit() {
        this._NgxInputNumberService.getChangeEvent().subscribe((configs) => {
            if (configs) {
                this.render();
            }
        });
    }
    ngOnChanges() {
        this.render();
    }
    onKeydown(e) {
        this.prevValue = e.target.value;
    }
    onBlur() {
        this.validateError = false;
    }
    onFocus() {
        setTimeout(() => {
            this.validateError = true;
        }, 1000);
    }
    onKeyup(e) {
        if (!this.validateError)
            return;
        let scapeKeys = [
            'ArrowLeft',
            'ArrowRight',
            'ArrowUp',
            'ArrowDown',
            'Escape',
            'Backspace',
            'Delete',
            '.',
            ',',
            '-',
            'Tab',
        ];
        if (e.target.value == ''
            &&
                !scapeKeys.includes(e.key)) {
            this.control.setValue('');
        }
        if (!scapeKeys.includes(e.key)
            &&
                this.prevValue === e.target.value
            &&
                e.key != this.prevValue) {
            this.inputElement.nativeElement.classList.add('key-invalid');
            setTimeout(() => {
                this.inputElement.nativeElement.classList.remove('key-invalid');
            }, 1000);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NgxInputNumberService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NgxInputNumberComponent, selector: "app-input-number", inputs: { control: "control", negative: "negative", autofocus: "autofocus", decimals: "decimals", max: "max", idForLabel: "idForLabel", tabIndex: "tabIndex", addClass: "addClass", groupSeparator: "groupSeparator", radixPoint: "radixPoint", lblKeyInvalid: "lblKeyInvalid" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "iMaskDir", first: true, predicate: IMaskDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"position-relative\">\r\n    <input\r\n        #inputElement\r\n        type=\"text\"\r\n        class=\"text-end form-control {{ addClass }}\"\r\n        [class.is-invalid]=\"control.touched && control.invalid\"\r\n        [formControl]=\"control\"\r\n        [tabindex]=\"tabIndex\"\r\n        [id]=\"idForLabel\"\r\n        [imask]=\"imask\"\r\n        [unmask]=\"'typed'\"\r\n        (keyup)=\"onKeyup($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        (blur)=\"onBlur()\"\r\n        (focus)=\"onFocus()\"\r\n    >\r\n    <label class=\"lbl-key-invalid position-absolute top-100 end-0 p-2 d-none\" [innerHTML]=\"lblKeyInvalidRender\"></label>\r\n</div>\r\n", styles: ["input.key-invalid{border-color:#dc3545!important;box-shadow:0 0 0 .25rem #dc354540!important}input.key-invalid+.lbl-key-invalid{background-color:#dc3545;color:#fff;display:block!important;z-index:1}\n"], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-input-number', template: "<div class=\"position-relative\">\r\n    <input\r\n        #inputElement\r\n        type=\"text\"\r\n        class=\"text-end form-control {{ addClass }}\"\r\n        [class.is-invalid]=\"control.touched && control.invalid\"\r\n        [formControl]=\"control\"\r\n        [tabindex]=\"tabIndex\"\r\n        [id]=\"idForLabel\"\r\n        [imask]=\"imask\"\r\n        [unmask]=\"'typed'\"\r\n        (keyup)=\"onKeyup($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        (blur)=\"onBlur()\"\r\n        (focus)=\"onFocus()\"\r\n    >\r\n    <label class=\"lbl-key-invalid position-absolute top-100 end-0 p-2 d-none\" [innerHTML]=\"lblKeyInvalidRender\"></label>\r\n</div>\r\n", styles: ["input.key-invalid{border-color:#dc3545!important;box-shadow:0 0 0 .25rem #dc354540!important}input.key-invalid+.lbl-key-invalid{background-color:#dc3545;color:#fff;display:block!important;z-index:1}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: NgxInputNumberService }], propDecorators: { inputElement: [{
                type: ViewChild,
                args: ['inputElement']
            }], iMaskDir: [{
                type: ViewChild,
                args: [IMaskDirective, { static: false }]
            }], control: [{
                type: Input
            }], negative: [{
                type: Input
            }], autofocus: [{
                type: Input
            }], decimals: [{
                type: Input
            }], max: [{
                type: Input
            }], idForLabel: [{
                type: Input
            }], tabIndex: [{
                type: Input
            }], addClass: [{
                type: Input
            }], groupSeparator: [{
                type: Input
            }], radixPoint: [{
                type: Input
            }], lblKeyInvalid: [{
                type: Input
            }] } });

class NgxInputNumberModule {
    static forRoot(config = {}) {
        return {
            ngModule: NgxInputNumberModule,
            providers: [
                config.config || {
                    provide: typesProvider,
                    useClass: defaultTypesProvider
                }
            ],
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberModule, declarations: [NgxInputNumberComponent], imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            IMaskModule], exports: [NgxInputNumberComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberModule, imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            IMaskModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgxInputNumberModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NgxInputNumberComponent
                    ],
                    imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        IMaskModule
                    ],
                    exports: [
                        NgxInputNumberComponent
                    ],
                    providers: []
                }]
        }] });

/*
 * Public API Surface of ngx-input-number
 */
// export * from 'ngx-mask';

/**
 * Generated bundle index. Do not edit.
 */

export { NgxInputNumberComponent, NgxInputNumberModule, NgxInputNumberService, defaultTypesProvider, inputConfigs$1 as inputConfigs, inputConfigsHelp$1 as inputConfigsHelp, typesProvider };
//# sourceMappingURL=experteam-mx-ngx-input-number.mjs.map