update pos consumer

src/app/shared/components/input/input.component.html

@@ -16,6 +16,7 @@
           [class]="` w-full ${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`"
           [required]="isRequired"
           [invalid]="control.invalid && (control.touched || control.dirty)"
+          (onInput)="onPriceInput($event)"
           (onBlur)="blur.emit()"
         />
         <!-- (input)="onInput($event)" -->
@@ -39,7 +40,9 @@
           (input)="onInput($event)"
         />
       }
-      @if (preparedSuffix()) {
+      @if (suffixTemp) {
+        <ng-container [ngTemplateOutlet]="suffixTemp" />
+      } @else if (preparedSuffix()) {
         <p-inputgroup-addon>{{ preparedSuffix() }}</p-inputgroup-addon>
       }
     </p-inputgroup>

src/app/shared/components/input/input.component.ts

@@ -2,12 +2,21 @@ import { Maybe } from '@/core';
 import { ToastService } from '@/core/services/toast.service';
 import { UikitFieldComponent } from '@/uikit/uikit-field.component';
 import { CommonModule } from '@angular/common';
-import { Component, computed, EventEmitter, inject, Input, Output } from '@angular/core';
+import {
+  Component,
+  computed,
+  ContentChild,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddon } from 'primeng/inputgroupaddon';
 import { InputMaskModule } from 'primeng/inputmask';
-import { InputNumberModule } from 'primeng/inputnumber';
+import { InputNumberInputEvent, InputNumberModule } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
 import { KeyFilterModule } from 'primeng/keyfilter';
 import { ToggleSwitch } from 'primeng/toggleswitch';
@@ -33,6 +42,7 @@ export class InputComponent {
   @Input() type:
     | 'simple'
     | 'postalCode'
+    | 'nationalId'
     | 'mobile'
     | 'phone'
     | 'email'
@@ -58,6 +68,8 @@ export class InputComponent {
   @Output() valueChange = new EventEmitter<string | number>();
   @Output() blur = new EventEmitter<void>();
 
+  @ContentChild('suffixTemp', { static: true }) suffixTemp!: TemplateRef<any> | null;
+
   private readonly toastService = inject(ToastService);
 
   // onInput(ev: Event) {
@@ -80,6 +92,8 @@ export class InputComponent {
         return '09xxxxxxxx';
       case 'postalCode':
         return 'کد پستی (۱۰ رقم)';
+      case 'nationalId':
+        return 'کد ملی (۱۰ رقم)';
       case 'phone':
         return 'شماره تلفن';
       case 'email':
@@ -96,6 +110,7 @@ export class InputComponent {
       case 'mobile':
       case 'phone':
       case 'postalCode':
+      case 'nationalId':
       case 'price':
       case 'number':
         return 'numeric';
@@ -113,6 +128,7 @@ export class InputComponent {
       case 'mobile':
         return 11;
       case 'postalCode':
+      case 'nationalId':
         return 10;
       case 'phone':
         return 11;
@@ -132,6 +148,7 @@ export class InputComponent {
         break;
       case 'email':
       case 'postalCode':
+      case 'nationalId':
         inputClass.push('ltrInput', 'rtlPlaceholder');
         break;
     }
@@ -150,6 +167,7 @@ export class InputComponent {
       case 'phone':
       case 'price':
       case 'postalCode':
+      case 'nationalId':
       case 'number':
         return 'number';
       case 'checkbox':
@@ -165,11 +183,22 @@ export class InputComponent {
     return this.required || this.control.hasValidator(Validators.required);
   }
 
-  onInput($event: Event) {
+  onPriceInput($event: InputNumberInputEvent) {
+    console.log($event);
+
+    this.onInput($event.originalEvent, true);
+  }
+  onInput($event: Event, isPriceFormat?: boolean) {
     // @ts-ignore
-    const value = $event.target.value as string;
-    if (this.type === 'number') {
+    let value = $event.target.value as string;
+
+    if (isPriceFormat) {
+      value = value.replace(/,/g, '');
+    }
+
+    if (this.inputMode === 'numeric') {
       let newValue = parseFloat(value);
+      //   console.log(value, newValue);
 
       const minValidator = (this.min || this.min === 0) && parseFloat(value) < this.min!;
       const maxValidator = (this.max || this.max === 0) && parseFloat(value) > this.max;
@@ -187,10 +216,20 @@ export class InputComponent {
         }
 
         newValue = parseFloat(value.slice(0, value.length - 1));
-        // @ts-ignore
-        $event.target.value = newValue;
+        if (newValue < 0 || isNaN(newValue)) {
+          newValue = 0;
+        }
+
+        if (isPriceFormat) {
+          // @ts-ignore
+          $event.target.value = newValue.toLocaleString('en-US');
+        } else {
+          // @ts-ignore
+          $event.target.value = newValue;
+        }
+
+        this.control.setValue(newValue);
       }
-      this.control.setValue(newValue);
     }
 
     if (this.preparedMaxLength && this.preparedMaxLength < value.length) {