@koobiq/components 16.0.0-beta.6 → 16.0.0-beta.7

package/fesm2022/koobiq-components-input.mjs

@@ -1,17 +1,17 @@
 import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Optional, Self, Attribute, Input, InjectionToken, Inject, forwardRef, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, Directive, Attribute, Optional, Inject, Input, InjectionToken, Self, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { NG_VALIDATORS, Validators, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormsModule } from '@angular/forms';
 import * as i3 from '@koobiq/components/core';
-import { mixinErrorState, KbqCommonModule } from '@koobiq/components/core';
+import { KBQ_LOCALE_SERVICE, mixinErrorState, KbqCommonModule } from '@koobiq/components/core';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
-import { Subject } from 'rxjs';
-import { A, C, V, X, Z, F1, F12, ZERO, NINE, NUMPAD_ZERO, NUMPAD_NINE, NUMPAD_MINUS, DASH, FF_MINUS, DELETE, BACKSPACE, TAB, ESCAPE, ENTER, LEFT_ARROW, RIGHT_ARROW, HOME, END, UP_ARROW, DOWN_ARROW } from '@koobiq/cdk/keycodes';
+import { Subject, Subscription } from 'rxjs';
+import { A, C, V, X, Z, NUMPAD_MINUS, DASH, FF_MINUS, DELETE, BACKSPACE, TAB, ESCAPE, ENTER, LEFT_ARROW, RIGHT_ARROW, HOME, END, isFunctionKey, isNumberKey, isNumpadKey, UP_ARROW, DOWN_ARROW } from '@koobiq/cdk/keycodes';
 
 function getKbqInputUnsupportedTypeError(inputType) {
     return Error(`Input type "${inputType}" isn't supported by kbqInput.`);
@@ -42,19 +42,76 @@ function add(value1, value2) {
     const precision = Math.max(getPrecision(value1), getPrecision(value2));
     return (value1 * precision + value2 * precision) / precision;
 }
+const KBQ_NUMBER_INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => KbqNumberInput),
+    multi: true
+};
 class KbqNumberInput {
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const oldValue = this.value;
+        this._value = value;
+        if (oldValue !== value) {
+            this.setViewValue(this.formatNumber(value));
+            this.valueChange.emit(value);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        const element = this.nativeElement;
+        if (this._disabled !== newValue) {
+            this._disabled = newValue;
+            this.disabledChange.emit(newValue);
+        }
+        // We need to null check the `blur` method, because it's undefined during SSR.
+        if (newValue && element.blur) {
+            // Normally, native input elements automatically blur if they turn disabled. This behavior
+            // is problematic, because it would mean that it triggers another change detection cycle,
+            // which then causes a changed after checked error if the input element was focused before.
+            element.blur();
+        }
+    }
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    constructor(elementRef, ngControl, step, bigStep, min, max) {
+    get viewValue() {
+        return this.nativeElement.value;
+    }
+    get ngControl() {
+        return this.control;
+    }
+    constructor(elementRef, renderer, step, bigStep, min, max, localeService) {
         this.elementRef = elementRef;
-        this.ngControl = ngControl;
-        this.focused = false;
+        this.renderer = renderer;
+        this.localeService = localeService;
+        /** Emits when the value changes (either due to user input or programmatic change). */
+        this.valueChange = new EventEmitter();
+        /** Emits when the disabled state has changed */
+        this.disabledChange = new EventEmitter();
         this.stateChanges = new Subject();
+        this.withThousandSeparator = true;
+        this._disabled = false;
+        this.focused = false;
+        this.localeSubscription = Subscription.EMPTY;
+        // tslint:disable-next-line:no-empty
+        this.onTouched = () => { };
+        // tslint:disable-next-line:no-empty
+        this.cvaOnChange = () => { };
+        this.updateLocaleParams = (id) => {
+            this.numberLocaleConfig = this.localeService.locales[id].input.number;
+            this.setViewValue(this.formatNumber(this.value));
+        };
         this.step = isDigit(step) ? parseFloat(step) : SMALL_STEP;
         this.bigStep = isDigit(bigStep) ? parseFloat(bigStep) : BIG_STEP;
         this.min = isDigit(min) ? parseFloat(min) : -Infinity;
         this.max = isDigit(max) ? parseFloat(max) : Infinity;
+        setTimeout(() => this.nativeElement.type = 'text', 0);
         if ('valueAsNumber' in this.nativeElement) {
             Object.defineProperty(Object.getPrototypeOf(this.nativeElement), 'valueAsNumber', {
                 // tslint:disable-next-line:no-reserved-keywords
@@ -64,6 +121,38 @@ class KbqNumberInput {
                 }
             });
         }
+        this.allNumberLocaleConfigs = this.localeService.locales.items
+            .map((localeItem) => {
+            return { id: localeItem.id, config: this.localeService.locales[localeItem.id].input.number };
+        });
+        this.localeSubscription = this.localeService.changes.subscribe(this.updateLocaleParams);
+    }
+    ngOnDestroy() {
+        this.localeSubscription.unsubscribe();
+        this.valueChange.complete();
+        this.disabledChange.complete();
+    }
+    onContainerClick() {
+        this.focus();
+    }
+    focus() {
+        this.nativeElement.focus();
+    }
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value) {
+        this.value = value;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this.cvaOnChange = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
     focusChanged(isFocused) {
         if (isFocused !== this.focused) {
@@ -79,32 +168,39 @@ class KbqNumberInput {
         const isCtrlV = (e) => e.keyCode === V && (e.ctrlKey || e.metaKey);
         const isCtrlX = (e) => e.keyCode === X && (e.ctrlKey || e.metaKey);
         const isCtrlZ = (e) => e.keyCode === Z && (e.ctrlKey || e.metaKey);
-        const isFKey = (e) => e.keyCode >= F1 && e.keyCode <= F12;
-        const isNumber = (e) => (e.keyCode >= ZERO && e.keyCode <= NINE) ||
-            (e.keyCode >= NUMPAD_ZERO && e.keyCode <= NUMPAD_NINE);
-        const isPeriod = (e) => e.key === '.' || e.key === ',';
+        const isPeriod = (e) => this.numberLocaleConfig.groupSeparator.includes(e.key)
+            || [this.numberLocaleConfig.fractionSeparator, '.'].includes(e.key);
         const minuses = [NUMPAD_MINUS, DASH, FF_MINUS];
         const serviceKeys = [DELETE, BACKSPACE, TAB, ESCAPE, ENTER];
         const arrows = [LEFT_ARROW, RIGHT_ARROW];
         const allowedKeys = [HOME, END].concat(arrows).concat(serviceKeys).concat(minuses);
         if (minuses.includes(keyCode) &&
-            (this.nativeElement.valueAsNumber || this.min >= 0 || this.nativeElement.validity?.badInput)) {
+            (this.viewValue.includes(event.key) || this.min >= 0)) {
             event.preventDefault();
             return;
         }
+        if (isPeriod(event)) {
+            if (event.key === this.numberLocaleConfig.fractionSeparator &&
+                this.viewValue.indexOf(this.numberLocaleConfig.fractionSeparator) !== -1) {
+                event.preventDefault();
+                return;
+            }
+        }
         if (allowedKeys.indexOf(keyCode) !== -1 ||
-            isCtrlA(event) ||
-            isCtrlC(event) ||
-            isCtrlV(event) ||
-            isCtrlX(event) ||
-            isCtrlZ(event) ||
-            isFKey(event) ||
-            isPeriod(event)) {
+            [
+                isCtrlA,
+                isCtrlC,
+                isCtrlV,
+                isCtrlX,
+                isCtrlZ,
+                isFunctionKey,
+                isPeriod
+            ].some((fn) => fn(event))) {
             // let it happen, don't do anything
             return;
         }
         // Ensure that it is not a number and stop the keypress
-        if (event.shiftKey || !isNumber(event)) {
+        if (event.shiftKey || !isNumberKey(event) && !isNumpadKey(event)) {
             event.preventDefault();
             // process steps
             const step = event.shiftKey ? this.bigStep : this.step;
@@ -116,48 +212,153 @@ class KbqNumberInput {
             }
         }
     }
+    onInput(event) {
+        const currentValueLength = this.formatNumber(this.value)?.length || 0;
+        setTimeout(() => {
+            const fromPaste = event.inputType === 'insertFromPaste';
+            let formattedValue;
+            if (fromPaste) {
+                formattedValue = this.formatNumber(this.valueFromPaste);
+            }
+            else {
+                /*this.viewValue is raw and should be reformatted to localized number */
+                formattedValue = this.formatViewValue();
+                const offsetWhenSeparatorAdded = 2;
+                Promise.resolve().then(() => {
+                    if (Math.abs(this.viewValue.length - currentValueLength) === offsetWhenSeparatorAdded) {
+                        const cursorPosition = Math.max(0, (this.nativeElement.selectionStart || 0) + Math.sign(this.viewValue.length - currentValueLength));
+                        this.renderer.setProperty(this.nativeElement, 'selectionStart', cursorPosition);
+                        this.renderer.setProperty(this.nativeElement, 'selectionEnd', cursorPosition);
+                    }
+                });
+            }
+            this.setViewValue(formattedValue, !fromPaste);
+            this.viewToModelUpdate(formattedValue);
+        });
+    }
     onPaste(event) {
-        if (!isDigit(normalizeSplitter(event.clipboardData.getData('text')))) {
+        this.valueFromPaste = this.checkAndNormalizeLocalizedNumber(event.clipboardData?.getData('text'));
+        if (this.valueFromPaste === null) {
             event.preventDefault();
         }
     }
     stepUp(step) {
-        this.elementRef.nativeElement.focus();
-        const res = Math.max(Math.min(add(this.nativeElement.valueAsNumber || 0, step), this.max), this.min);
-        this.nativeElement.value = res.toString();
-        this.viewToModelUpdate(this.nativeElement.valueAsNumber);
+        this.nativeElement.focus();
+        const res = Math.max(Math.min(add(this.value || 0, step), this.max), this.min);
+        this.setViewValue(this.formatNumber(res));
+        this._value = res;
+        this.cvaOnChange(res);
+        this.valueChange.emit(res);
     }
     stepDown(step) {
-        this.elementRef.nativeElement.focus();
-        const res = Math.min(Math.max(add(this.nativeElement.valueAsNumber || 0, -step), this.min), this.max);
-        this.nativeElement.value = res.toString();
-        this.viewToModelUpdate(this.nativeElement.valueAsNumber);
+        this.nativeElement.focus();
+        const res = Math.min(Math.max(add(this.value || 0, -step), this.min), this.max);
+        this.setViewValue(this.formatNumber(res));
+        this._value = res;
+        this.cvaOnChange(res);
+        this.valueChange.emit(res);
     }
-    viewToModelUpdate(value) {
-        if (this.ngControl) {
-            this.ngControl.control.setValue(value);
+    setViewValue(value, savePosition = false) {
+        const cursorPosition = this.nativeElement.selectionStart;
+        this.renderer.setProperty(this.nativeElement, 'value', value);
+        if (savePosition) {
+            this.renderer.setProperty(this.nativeElement, 'selectionStart', cursorPosition);
+            this.renderer.setProperty(this.nativeElement, 'selectionEnd', cursorPosition);
+        }
+    }
+    viewToModelUpdate(newValue) {
+        const normalizedValue = newValue === null ? null : +this.normalizeNumber(newValue);
+        if (normalizedValue !== this.value) {
+            this._value = normalizedValue;
+            this.cvaOnChange(normalizedValue);
+            this.valueChange.emit(normalizedValue);
+        }
+        this.ngControl?.updateValueAndValidity({ emitEvent: false });
+    }
+    formatViewValue() {
+        if (this.viewValue === null || this.viewValue === '' || Number.isNaN(+this.normalizeNumber(this.viewValue))) {
+            return null;
         }
+        const separator = this.numberLocaleConfig.groupSeparator.includes(' ')
+            && this.numberLocaleConfig.fractionSeparator === ','
+            ? /[,.]/
+            : this.numberLocaleConfig.fractionSeparator;
+        const [intPart, fractionPart] = this.viewValue.split(separator)
+            .map((valuePart) => this.normalizeNumber(valuePart));
+        return this.createLocalizedNumberFromParts(+intPart, fractionPart);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNumberInput, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: 'step', attribute: true }, { token: 'big-step', attribute: true }, { token: 'min', attribute: true }, { token: 'max', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNumberInput, selector: "input[kbqInput][type=\"number\"]", inputs: { bigStep: "bigStep", step: "step", min: "min", max: "max" }, host: { listeners: { "blur": "focusChanged(false)", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" } }, exportAs: ["mcNumericalInput"], ngImport: i0 }); }
+    formatNumber(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const [intPart, fractionPart] = value.toString().split('.');
+        return this.createLocalizedNumberFromParts(+intPart, fractionPart);
+    }
+    createLocalizedNumberFromParts(intPart, fractionPart) {
+        const formatOptions = {
+            useGrouping: this.withThousandSeparator,
+            maximumFractionDigits: 20
+        };
+        if (this.withThousandSeparator && this.numberLocaleConfig.startFormattingFrom) {
+            formatOptions.useGrouping = intPart >= Math.pow(
+            // tslint:disable-next-line:no-magic-numbers
+            10, this.numberLocaleConfig.startFormattingFrom);
+        }
+        const localeId = this.localeService.id === 'es-LA' ? 'ru-RU' : this.localeService.id;
+        const formatter = new Intl.NumberFormat(localeId, formatOptions);
+        const formattedFractionPart = fractionPart?.split('')
+            .map((numChar) => formatter.format(+numChar)).join('');
+        return formattedFractionPart === undefined
+            ? formatter.format(intPart)
+            : `${formatter.format(intPart)}${this.numberLocaleConfig.fractionSeparator}${formattedFractionPart}`;
+    }
+    /**
+     * Method that returns a string representation of a number without localized separators
+     */
+    normalizeNumber(value, customConfig) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        const { groupSeparator, fractionSeparator } = customConfig || this.numberLocaleConfig;
+        const groupSeparatorRegexp = new RegExp(`[${groupSeparator.join('')}]`, 'g');
+        const fractionSeparatorRegexp = new RegExp(`\\${fractionSeparator}`, 'g');
+        return value.toString()
+            .replace(groupSeparatorRegexp, '')
+            .replace(fractionSeparatorRegexp, '.');
+    }
+    checkAndNormalizeLocalizedNumber(num) {
+        if (num === null || num === undefined) {
+            return null;
+        }
+        /* if some locale input config satisfies pasted number, try to normalise with selected locale config */
+        let numberOutput = null;
+        for (const { config } of this.allNumberLocaleConfigs) {
+            const normalized = +this.normalizeNumber(num, config);
+            if (!Number.isNaN(normalized)) {
+                numberOutput = normalized;
+                break;
+            }
+        }
+        return numberOutput;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNumberInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'step', attribute: true }, { token: 'big-step', attribute: true }, { token: 'min', attribute: true }, { token: 'max', attribute: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNumberInput, selector: "input[kbqInput][type=\"number\"]", inputs: { bigStep: "bigStep", step: "step", min: "min", max: "max", withThousandSeparator: "withThousandSeparator", startFormattingFrom: "startFormattingFrom", value: "value", disabled: "disabled" }, host: { listeners: { "blur": "focusChanged(false)", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR], exportAs: ["kbqNumericalInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNumberInput, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqInput][type="number"]`,
-                    exportAs: 'mcNumericalInput',
+                    exportAs: 'kbqNumericalInput',
+                    providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR],
                     host: {
                         '(blur)': 'focusChanged(false)',
                         '(focus)': 'focusChanged(true)',
                         '(paste)': 'onPaste($event)',
-                        '(keydown)': 'onKeyDown($event)'
+                        '(keydown)': 'onKeyDown($event)',
+                        '(input)': 'onInput($event)'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['step']
                 }] }, { type: undefined, decorators: [{
@@ -169,6 +370,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['max']
+                }] }, { type: i3.KbqLocaleService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_SERVICE]
                 }] }]; }, propDecorators: { bigStep: [{
                 type: Input
             }], step: [{
@@ -177,6 +383,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Input
             }], max: [{
                 type: Input
+            }], withThousandSeparator: [{
+                type: Input
+            }], startFormattingFrom: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 const KBQ_INPUT_VALUE_ACCESSOR = new InjectionToken('KBQ_INPUT_VALUE_ACCESSOR');
@@ -827,5 +1041,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BIG_STEP, KBQ_INPUT_VALUE_ACCESSOR, KbqInput, KbqInputBase, KbqInputMixinBase, KbqInputModule, KbqInputMono, KbqInputPassword, KbqNumberInput, MAX_VALIDATOR, MIN_VALIDATOR, MaxValidator, MinValidator, SMALL_STEP, add, getPrecision, isDigit, isFloat, isInt, normalizeSplitter };
+export { BIG_STEP, KBQ_INPUT_VALUE_ACCESSOR, KBQ_NUMBER_INPUT_VALUE_ACCESSOR, KbqInput, KbqInputBase, KbqInputMixinBase, KbqInputModule, KbqInputMono, KbqInputPassword, KbqNumberInput, MAX_VALIDATOR, MIN_VALIDATOR, MaxValidator, MinValidator, SMALL_STEP, add, getPrecision, isDigit, isFloat, isInt, normalizeSplitter };
 //# sourceMappingURL=koobiq-components-input.mjs.map