ngx-vector-components 3.4.0 → 3.4.1

package/fesm2020/ngx-vector-components.mjs

@@ -26,7 +26,7 @@ import { FileUploadModule } from 'primeng/fileupload';
 import * as i2$5 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import * as i1$5 from 'primeng/inputnumber';
-import { InputNumberModule } from 'primeng/inputnumber';
+import { InputNumber, InputNumberModule } from 'primeng/inputnumber';
 import * as i6 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i2$7 from 'primeng/inputtextarea';
@@ -1562,25 +1562,12 @@ class CurrencyFieldComponent {
         this.rounded = false;
         this.isBankingField = false;
         this.inputClassName = '';
-        this.lastInvertedIndexTyped = 0;
-        this.subscription = new Subscription();
     }
-    set control(_control) {
-        this._control = _control;
-        if (this.control.value) {
-            this.lastInvertedIndexTyped = `${this.control.value}`.length;
-        }
-        this.subscription.add(this.control.valueChanges.subscribe((value) => {
-            if (value) {
-                this.lastInvertedIndexTyped = `${value}`.length;
-            }
-        }));
-    }
-    get control() {
-        return this._control;
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+    ngAfterViewInit() {
+        const inputElement = this.inputElement?.el.nativeElement.querySelector('input');
+        inputElement.addEventListener('select', () => {
+            inputElement.selectionStart = inputElement.selectionEnd;
+        }, false);
     }
     getInputNgClass() {
         return { outlined: this.outlined, rounded: this.rounded, [this.inputClassName]: !!this.inputClassName };
@@ -1591,61 +1578,30 @@ class CurrencyFieldComponent {
         target?.setSelectionRange(selectionIndex, selectionIndex);
     }
     inputNextChar($event) {
-        this.focusLastIndex($event);
         const target = $event.target;
+        const valueTyped = $event.key;
+        let newValue = target.value.replace('R$ ', '').replace(/[\.,]/g, '');
         const isDeleteOrBackspace = ['Delete', 'Backspace'].includes($event.key);
         if (isDeleteOrBackspace) {
-            this.lastInvertedIndexTyped--;
-            target.value = target.value.substr(0, target.value.length - 1);
-            if (target.value === '') {
-                this.lastInvertedIndexTyped = 0;
-                target.value = '0,00';
-                return;
-            }
-        }
-        let valueTyped = $event.key;
-        if (!isNaN(+valueTyped) || isDeleteOrBackspace) {
-            if (target.value === '0,00' && +valueTyped === 0) {
-                return;
-            }
-            if (isDeleteOrBackspace) {
-                valueTyped = '';
-            }
-            let i = 0;
-            const reversedPreviousValue = StringUtil.revertString(target.value.replace(/[^0-9]/g, ''));
-            const newValue = StringUtil.revertString(StringUtil.revertString(this.lastInvertedIndexTyped >= 3 ? `${target.value}${valueTyped}`.replace(/[0-9]/g, '#') : '#,##').replace(/#/g, () => {
-                let returnValue = '0';
-                if (isDeleteOrBackspace) {
-                    returnValue = reversedPreviousValue[i];
-                }
-                else {
-                    if (i === 0) {
-                        returnValue = `${valueTyped}`;
-                    }
-                    else {
-                        returnValue = reversedPreviousValue[i - 1] || '0';
-                    }
-                }
-                i++;
-                return returnValue;
-            }));
-            const newValueOnlyNumbers = newValue.replace(/[^0-9]/g, '');
-            target.value = Number(`${newValueOnlyNumbers.substring(0, newValueOnlyNumbers.length - 2)}.${newValueOnlyNumbers.substr(newValueOnlyNumbers.length - 2)}`).toLocaleString('pt-BR', {
-                currency: 'BRL',
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-            });
-            if (!isNaN(+valueTyped)) {
-                this.lastInvertedIndexTyped++;
-            }
+            newValue = newValue.substring(0, newValue.length - 1).padStart(3, '0');
         }
+        else if (!isNaN(+valueTyped)) {
+            newValue += valueTyped;
+            newValue = `${+newValue}`.padStart(3, '0');
+        }
+        target.value = `R$ ${Number(`${newValue.substring(0, newValue.length - 2)}.${newValue.substring(newValue.length - 2, newValue.length)}`).toLocaleString('pt-BR', {
+            currency: 'BRL',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        })}`;
+        this.focusLastIndex($event);
     }
     clearValue() {
         this.control.setValue(0);
     }
 }
 CurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: { minValue: "minValue", maxValue: "maxValue", placeholder: "placeholder", control: "control", outlined: "outlined", rounded: "rounded", label: "label", isBankingField: "isBankingField", inputClassName: "inputClassName" }, ngImport: i0, template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\r\n  <div class=\"inner-container\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"input\">\r\n      <span *ngIf=\"!outlined\">R$ </span>\r\n      <div class=\"value-input\">\r\n        <p-inputNumber\r\n          class=\"currency-input\"\r\n          [ngClass]=\"getInputNgClass()\"\r\n          [formControl]=\"control\"\r\n          mode=\"decimal\"\r\n          [minFractionDigits]=\"2\"\r\n          [maxFractionDigits]=\"2\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [prefix]=\"outlined ? 'R$ ' : ''\"\r\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\r\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\r\n        ></p-inputNumber>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\r\n</div>\r\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"], components: [{ type: i1$5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: { minValue: "minValue", maxValue: "maxValue", placeholder: "placeholder", control: "control", outlined: "outlined", rounded: "rounded", label: "label", isBankingField: "isBankingField", inputClassName: "inputClassName" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputNumber, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\r\n  <div class=\"inner-container\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"input\">\r\n      <span *ngIf=\"!outlined\">R$ </span>\r\n      <div class=\"value-input\">\r\n        <p-inputNumber\r\n          class=\"currency-input\"\r\n          [ngClass]=\"getInputNgClass()\"\r\n          [formControl]=\"control\"\r\n          mode=\"decimal\"\r\n          [minFractionDigits]=\"2\"\r\n          [maxFractionDigits]=\"2\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [prefix]=\"outlined ? 'R$ ' : ''\"\r\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\r\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\r\n        ></p-inputNumber>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\r\n</div>\r\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"], components: [{ type: i1$5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-currency-field', template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\r\n  <div class=\"inner-container\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"input\">\r\n      <span *ngIf=\"!outlined\">R$ </span>\r\n      <div class=\"value-input\">\r\n        <p-inputNumber\r\n          class=\"currency-input\"\r\n          [ngClass]=\"getInputNgClass()\"\r\n          [formControl]=\"control\"\r\n          mode=\"decimal\"\r\n          [minFractionDigits]=\"2\"\r\n          [maxFractionDigits]=\"2\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [prefix]=\"outlined ? 'R$ ' : ''\"\r\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\r\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\r\n        ></p-inputNumber>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\r\n</div>\r\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"] }]
@@ -1667,6 +1623,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], inputClassName: [{
                 type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: [InputNumber]
             }] } });
 
 class TextFieldComponent {