some ui fix and debug input field, separate price field

src/app/shared/components/amountPercentageInput/amount-percentage-input.component.html

@@ -3,10 +3,9 @@
   [name]="name"
   [control]="selectedType.value === 'amount' ? amountControl : percentageControl"
   [showLabel]="!!label"
-  [showErrors]="showErrors"
->
+  [showErrors]="showErrors">
   <ng-template #labelView>
-    <div class="flex gap-1 items-center justify-between">
+    <div class="flex items-center justify-between gap-1">
       <uikit-label [name]="name">
         {{ preparedLabel() }}
       </uikit-label>
@@ -17,7 +16,7 @@
   </ng-template>
 
   <p-inputgroup>
-    @if (selectedType.value === "amount") {
+    @if (selectedType.value === 'amount') {
       <p-inputnumber
         #amountInput
         [attr.id]="name"
@@ -25,11 +24,11 @@
         [attr.name]="name"
         [attr.placeholder]="placeholder"
         [attr.autocomplete]="autocomplete"
+        [attr.inputmode]="'numeric'"
         [inputStyle]="{ direction: 'ltr' }"
         [inputStyleClass]="` w-full hasSuffix text-left ${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`"
         [required]="required"
-        [invalid]="amountControl.invalid && (amountControl.touched || amountControl.dirty)"
-      />
+        [invalid]="amountControl.invalid && (amountControl.touched || amountControl.dirty)" />
     } @else {
       <input
         #percentageInput
@@ -39,7 +38,6 @@
         [attr.name]="name"
         [attr.placeholder]="placeholder"
         [attr.inputmode]="'numeric'"
-        [attr.type]="'number'"
         dir="ltr"
         [attr.autocomplete]="autocomplete"
         [classList]="
@@ -49,8 +47,7 @@
           ].join(' ')
         "
         [required]="required"
-        [invalid]="percentageControl.invalid && (percentageControl.touched || percentageControl.dirty)"
-      />
+        [invalid]="percentageControl.invalid && (percentageControl.touched || percentageControl.dirty)" />
     }
 
     <p-inputgroup-addon class="py-0!">
@@ -60,8 +57,7 @@
         tabindex="-1"
         optionValue="value"
         size="small"
-        class="border-none! shadow-none! w-full!"
-      />
+        class="w-full! border-none! shadow-none!" />
     </p-inputgroup-addon>
   </p-inputgroup>
   @if (hint) {

src/app/shared/components/amountPercentageInput/amount-percentage-input.component.ts

@@ -97,10 +97,32 @@ export class AmountPercentageInputComponent {
   private lastValidAmount = 0;
   private lastValidPercentage = 0;
 
-  private parseValue(value: Maybe<any>) {
-    const normalized = `${value ?? ''}`.replace(/,/g, '');
-    const parsed = parseFloat(normalized);
-    return Number.isFinite(parsed) ? parsed : 0;
+  private toEnglishDigits(value: string): string {
+    return value
+      .replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776))
+      .replace(/[٠-٩]/g, (digit) => String(digit.charCodeAt(0) - 1632));
+  }
+
+  private sanitizeNumericValue(value: string, allowDecimal: boolean): string {
+    const normalized = this.toEnglishDigits(value).replace(/,/g, '');
+
+    const cleaned = normalized.replace(allowDecimal ? /[^0-9.]/g : /[^0-9]/g, '');
+    if (!allowDecimal) return cleaned;
+
+    const [integerPart = '', ...decimalParts] = cleaned.split('.');
+    const mergedDecimals = decimalParts.join('');
+    return decimalParts.length ? `${integerPart}.${mergedDecimals}` : integerPart;
+  }
+
+  private parseValue(value: Maybe<string>) {
+    const cleanedValue = this.sanitizeNumericValue(
+      value || '',
+      this.selectedType.value === 'percentage'
+    );
+
+    console.log('cleaned', cleanedValue);
+
+    return Number.isFinite(cleanedValue) ? Number(cleanedValue) : 0;
   }
 
   private getRangeLabel(value: number, isPercentageType: boolean) {
@@ -115,7 +137,7 @@ export class AmountPercentageInputComponent {
     value: number,
     isPercentageType: boolean,
     min = 0,
-    max = Number.MAX_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER
   ) {
     if (value < min) {
       this.toastService.warn({

src/app/shared/components/fields/cash.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { InputComponent } from '../input/input.component';
-
-@Component({
-  selector: 'field-cash',
-  template: `<app-input label="نقدی" [control]="control" [name]="name" type="price" />`,
-  imports: [ReactiveFormsModule, InputComponent],
-})
-export class CashComponent {
-  @Input({ required: true }) control = new FormControl<string>('');
-  @Input() name = 'cash';
-}

src/app/shared/components/fields/index.ts

@@ -1,6 +1,5 @@
 export * from './address.component';
 export * from './branch_code.component';
-export * from './cash.component';
 export * from './code.component';
 export * from './company_name.component';
 export * from './description.component';
@@ -28,10 +27,7 @@ export * from './quantity.component';
 export * from './registration_code.component';
 export * from './registration_number.component';
 export * from './serial_number.component';
-export * from './set_off.component';
 export * from './sku.component';
 export * from './sku_type.component';
-export * from './terminal.component';
-export * from './unit_price.component';
 export * from './username.component';
 export * from './vat.component';

src/app/shared/components/fields/set_off.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { InputComponent } from '../input/input.component';
-
-@Component({
-  selector: 'field-set-off',
-  template: `<app-input label="تهاتر" [control]="control" [name]="name" type="price" />`,
-  imports: [ReactiveFormsModule, InputComponent],
-})
-export class SetOffComponent {
-  @Input({ required: true }) control = new FormControl<string>('');
-  @Input() name = 'set_off';
-}

src/app/shared/components/fields/terminal.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { InputComponent } from '../input/input.component';
-
-@Component({
-  selector: 'field-terminal',
-  template: `<app-input label="پرداخت با پوز" [control]="control" [name]="name" type="price" />`,
-  imports: [ReactiveFormsModule, InputComponent],
-})
-export class TerminalComponent {
-  @Input({ required: true }) control = new FormControl<string>('');
-  @Input() name = 'terminal';
-}

src/app/shared/components/fields/unit_price.component.ts

@@ -1,20 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { InputComponent } from '../input/input.component';
-
-@Component({
-  selector: 'field-unit-price',
-  template: `<app-input
-    label="مبلغ واحد"
-    [control]="control"
-    [name]="name"
-    [hint]="hint"
-    type="price"
-  />`,
-  imports: [ReactiveFormsModule, InputComponent],
-})
-export class UnitPriceComponent {
-  @Input({ required: true }) control = new FormControl<string>('');
-  @Input() name = 'unit_price';
-  @Input() hint = '';
-}

src/app/shared/components/formFooterActions/form-footer-actions.component.html

@@ -1,5 +1,5 @@
 <div class="flex justify-end gap-2">
-  <button pButton [label]="cancelLabel" severity="secondary" (click)="cancel()"></button>
+  <button pButton [label]="cancelLabel" severity="secondary" type="button" (click)="cancel()"></button>
   <button
     pButton
     [label]="submitLabel"

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

@@ -17,48 +17,28 @@
     <p-toggleSwitch [attr.disabled]="disabled" [formControl]="control" />
   } @else {
     <p-inputgroup>
-      <!-- [minlength]="minlength || null" -->
-      @if (type === 'price') {
-        <p-inputnumber
-          [attr.id]="name"
-          [formControl]="control"
-          [maxlength]="preparedMaxLength || null"
-          [attr.name]="name"
-          [attr.placeholder]="preparedPlaceholder"
-          [attr.type]="htmlType"
-          [attr.autocomplete]="autocomplete"
-          [attr.disabled]="disabled"
-          [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)" -->
-      } @else {
-        <input
-          pInputText
-          [attr.id]="name"
-          [formControl]="control"
-          [attr.name]="name"
-          [attr.placeholder]="preparedPlaceholder"
-          [attr.inputmode]="inputMode"
-          [attr.maxlength]="preparedMaxLength || null"
-          [attr.type]="htmlType"
-          [attr.disabled]="disabled"
-          [attr.autocomplete]="autocomplete"
-          [classList]="
-            [
-              inputClass,
-              'w-full',
-              `${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`,
-              suffixTemp || preparedSuffix() ? 'hasSuffix' : '',
-            ].join(' ')
-          "
-          [required]="isRequired"
-          [invalid]="control.invalid && (control.touched || control.dirty)"
-          (onBlur)="blur.emit()"
-          (input)="onInput($event)" />
-      }
+      <input
+        pInputText
+        [attr.id]="name"
+        [formControl]="control"
+        [attr.name]="name"
+        [attr.placeholder]="preparedPlaceholder"
+        [attr.inputmode]="inputMode"
+        [attr.maxlength]="preparedMaxLength || null"
+        [attr.disabled]="disabled"
+        [attr.autocomplete]="autocomplete"
+        [classList]="
+          [
+            inputClass,
+            'w-full',
+            `${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`,
+            suffixTemp || preparedSuffix() ? 'hasSuffix' : '',
+          ].join(' ')
+        "
+        [required]="isRequired"
+        [invalid]="control.invalid && (control.touched || control.dirty)"
+        (onBlur)="blur.emit()"
+        (input)="onInput($event)" />
       @if (suffixTemp) {
         <ng-container [ngTemplateOutlet]="suffixTemp" />
       } @else if (preparedSuffix()) {

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

@@ -17,7 +17,7 @@ import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddon } from 'primeng/inputgroupaddon';
 import { InputMaskModule } from 'primeng/inputmask';
-import { InputNumberInputEvent, InputNumberModule } from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
 import { KeyFilterModule } from 'primeng/keyfilter';
 import { ToggleSwitch } from 'primeng/toggleswitch';
@@ -51,8 +51,7 @@ export class InputComponent {
     | 'email'
     | 'checkbox'
     | 'switch'
-    | 'number'
-    | 'price' = 'simple';
+    | 'number' = 'simple';
   @Input() control!: FormControl<Maybe<any>>;
   @Input() name!: string;
   @Input() label: string = '';
@@ -80,17 +79,8 @@ export class InputComponent {
 
   private readonly toastService = inject(ToastService);
 
-  // onInput(ev: Event) {
-  //   const v = (ev.target as HTMLInputElement).value;
-
-  //   const newLocal = v || v == '0';
-  //   // this.valueChange.emit(this.type === 'price' && newLocal ? parseFloat(v) : v);
-  // }
-
   preparedSuffix = computed(() => {
-    if (this.type === 'price') {
-      return 'ریال';
-    } else return this.suffix;
+    return this.suffix;
   });
 
   get preparedPlaceholder(): string | null {
@@ -106,30 +96,34 @@ export class InputComponent {
         return 'شماره تلفن';
       case 'email':
         return 'آدرس ایمیل خود را وارد کنید';
-      case 'price':
-        return 'مبلغ';
       default:
         return '';
     }
   }
 
-  get inputMode(): string | null {
+  get inputMode(): string {
     switch (this.type) {
-      case 'price':
-        return 'decimal';
       case 'number':
-      case 'mobile':
-      case 'phone':
+        return 'decimal';
       case 'postalCode':
       case 'nationalId':
         return 'numeric';
+      case 'mobile':
+      case 'phone':
+        return 'tel';
+      case 'email':
+        return 'email';
+      case 'checkbox':
+        return 'checkbox';
+      case 'switch':
+        return 'radio';
       default:
         return 'text';
     }
   }
 
   get isNumeric(): boolean {
-    return this.inputMode === 'numeric';
+    return ['number', 'decimal'].includes(this.inputMode);
   }
 
   get preparedMaxLength(): number | null {
@@ -153,7 +147,6 @@ export class InputComponent {
     switch (this.type) {
       case 'mobile':
       case 'phone':
-      case 'price':
       case 'number':
         inputClass.push('ltrInput');
         break;
@@ -174,14 +167,12 @@ export class InputComponent {
     switch (this.type) {
       case 'email':
         return 'email';
-      case 'mobile':
-      case 'phone':
-      case 'postalCode':
-      case 'nationalId':
-        return 'number';
-      case 'price':
+      // case 'mobile':
+      // case 'phone':
+      // case 'postalCode':
+      // case 'nationalId':
       case 'number':
-        return 'text';
+        return 'number';
       case 'checkbox':
         return 'checkbox';
       case 'switch':
@@ -195,10 +186,6 @@ export class InputComponent {
     return this.required || this.control.hasValidator(Validators.required);
   }
 
-  onPriceInput($event: InputNumberInputEvent) {
-    this.onInput($event.originalEvent, true);
-  }
-
   private toEnglishDigits(value: string): string {
     return value
       .replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776))
@@ -207,6 +194,7 @@ export class InputComponent {
 
   private sanitizeNumericValue(value: string, allowDecimal: boolean): string {
     const normalized = this.toEnglishDigits(value).replace(/,/g, '');
+
     const cleaned = normalized.replace(allowDecimal ? /[^0-9.]/g : /[^0-9]/g, '');
     if (!allowDecimal) return cleaned;
 
@@ -245,76 +233,82 @@ export class InputComponent {
     return value.replace(/^0+(?=\d)/, '');
   }
 
-  onInput($event: Event, isPriceFormat?: boolean) {
-    if (this.type !== 'price' && this.type !== 'number') {
-      return;
+  private enforceMaxLength(value: string): string {
+    if (!this.preparedMaxLength || value.length <= this.preparedMaxLength) return value;
+    return value.slice(0, this.preparedMaxLength);
+  }
+
+  private parseNumericValue(value: string): number {
+    return Number.isNaN(parseFloat(value)) ? 0 : parseFloat(value);
+  }
+
+  private isOutOfRange(numericValue: number): { min: boolean; max: boolean } {
+    return {
+      min: !!((this.min || this.min === 0) && numericValue < this.min),
+      max: !!((this.max || this.max === 0) && numericValue > this.max),
+    };
+  }
+
+  private notifyRangeError(range: { min: boolean; max: boolean }) {
+    if (range.max) {
+      this.toastService.warn({
+        text: `مقدار ${this.label} نمی‌تواند بیشتر از ${this.max} باشد.`,
+      });
     }
+    if (range.min) {
+      this.toastService.warn({
+        text: `مقدار ${this.label} نمی‌تواند کمتر از ${this.min} باشد.`,
+      });
+    }
+  }
+
+  private isIdentifierField(): boolean {
+    return ['mobile', 'phone', 'postalCode', 'nationalId'].includes(this.type);
+  }
+
+  private writeControlAndViewValue(target: HTMLInputElement, value: string, numericValue: number) {
+    const isIdentifierField = this.isIdentifierField();
+    const controlValue = isIdentifierField ? value : value === '' ? '' : numericValue;
+    this.control.setValue(controlValue);
+    target.value = value;
+  }
+
+  onInput($event: Event) {
     const target = $event.target as HTMLInputElement | null;
     if (!target) return;
 
     let value = target.value ?? '';
-    const allowDecimal = this.type === 'price' || this.type === 'number';
+    const allowDecimal = this.type === 'number';
+    const isNumericMode = this.isNumeric;
 
-    if (this.inputMode === 'numeric' || this.inputMode === 'decimal' || isPriceFormat) {
+    if (isNumericMode) {
       value = this.sanitizeNumericValue(value, allowDecimal);
       value = this.applyFixed(value);
       value = this.normalizeLeadingZeros(value, allowDecimal);
-    }
 
-    if (this.preparedMaxLength && value.length > this.preparedMaxLength) {
-      value = value.slice(0, this.preparedMaxLength);
-    }
+      value = this.enforceMaxLength(value);
 
-    let numericValue = Number.isNaN(parseFloat(value)) ? 0 : parseFloat(value);
-    const minValidator = (this.min || this.min === 0) && numericValue < this.min!;
-    const maxValidator = (this.max || this.max === 0) && numericValue > this.max!;
-    if (
-      (this.inputMode === 'numeric' || this.inputMode === 'decimal') &&
-      value !== '' &&
-      (minValidator || maxValidator)
-    ) {
-      if (maxValidator) {
-        this.toastService.warn({
-          text: `مقدار ${this.label} نمی‌تواند بیشتر از ${this.max} باشد.`,
-        });
+      let numericValue = this.parseNumericValue(value);
+      const range = this.isOutOfRange(numericValue);
+      if (value !== '' && (range.min || range.max)) {
+        this.notifyRangeError(range);
+        value = this.lastValidNumericValue;
+        numericValue = this.parseNumericValue(value);
+        this.writeControlAndViewValue(target, value, numericValue);
+        return;
+      } else {
+        this.lastValidNumericValue = value;
       }
-      if (minValidator) {
-        this.toastService.warn({
-          text: `مقدار ${this.label} نمی‌تواند کمتر از ${this.min} باشد.`,
-        });
+
+      this.writeControlAndViewValue(target, value, numericValue);
+      if (this.valueChange.observed) {
+        this.valueChange.emit(this.isIdentifierField() ? value : numericValue);
       }
-      value = this.lastValidNumericValue;
-      numericValue = Number.isNaN(parseFloat(value)) ? 0 : parseFloat(value);
-
-      // const isIdentifierField = ['mobile', 'phone', 'postalCode', 'nationalId'].includes(this.type);
-      const isIdentifierField = !this.numericValue;
-      const restoredControlValue = isIdentifierField ? value : value === '' ? '' : numericValue;
-
-      this.control.setValue(restoredControlValue);
-      target.value = isPriceFormat && value !== '' ? numericValue.toLocaleString('en-US') : value;
-      return;
-    } else if (this.inputMode === 'numeric' || this.inputMode === 'decimal') {
-      this.lastValidNumericValue = value;
-    }
-
-    const isIdentifierField = ['mobile', 'phone', 'postalCode', 'nationalId'].includes(this.type);
-    const controlValue = isIdentifierField ? value : value === '' ? '' : numericValue;
-
-    this.control.setValue(controlValue);
-
-    const viewValue = isPriceFormat && value !== '' ? numericValue.toLocaleString('en-US') : value;
-
-    target.value = viewValue;
-    if (
-      (this.inputMode === 'numeric' || this.inputMode === 'decimal') &&
-      this.valueChange.observed
-    ) {
-      this.valueChange.emit(isIdentifierField ? value : numericValue);
     }
   }
 
   ngOnInit() {
-    const allowDecimal = this.type === 'price' || this.type === 'number';
+    const allowDecimal = this.type === 'number';
     const initial = this.sanitizeNumericValue(`${this.control?.value ?? ''}`, allowDecimal);
     this.lastValidNumericValue = initial;
   }

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

@@ -0,0 +1,28 @@
+<uikit-field [label]="label" [name]="name" [control]="control" [showLabel]="!!label" [showErrors]="showErrors">
+  <p-inputgroup>
+    <p-inputnumber
+      [attr.id]="name"
+      [formControl]="control"
+      [attr.name]="name"
+      [attr.placeholder]="preparedPlaceholder"
+      [attr.type]="'text'"
+      [attr.autocomplete]="autocomplete"
+      [attr.disabled]="disabled"
+      [class]="`ltrInput rtlPlaceholder hasSuffix w-full ${sizeClass}`"
+      inputStyleClass="hasSuffix"
+      [required]="isRequired"
+      [invalid]="control.invalid && (control.touched || control.dirty)"
+      (onInput)="onInput($event)"
+      (onBlur)="blur.emit()" />
+    @if (suffixTemp) {
+      <ng-container [ngTemplateOutlet]="suffixTemp" />
+    } @else {
+      <p-inputgroup-addon [ngClass]="{ 'border-red-400!': (control.touched || control.dirty) && control.invalid }">
+        ریال
+      </p-inputgroup-addon>
+    }
+  </p-inputgroup>
+  @if (hint) {
+    <small [attr.id]="name + '-help'" class="text-muted-color">{{ hint }}</small>
+  }
+</uikit-field>

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

@@ -0,0 +1,107 @@
+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,
+  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 { InputNumberInputEvent, InputNumberModule } from 'primeng/inputnumber';
+
+@Component({
+  selector: 'app-price-input',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    InputGroupModule,
+    InputGroupAddon,
+    InputNumberModule,
+    UikitFieldComponent,
+    CommonModule,
+  ],
+  templateUrl: './price-input.component.html',
+})
+export class PriceInputComponent {
+  @Input() control!: FormControl<Maybe<any>>;
+  @Input() name!: string;
+  @Input() label = '';
+  @Input() placeholder?: string;
+  @Input() disabled = false;
+  @Input() size?: 'small' | 'large';
+  @Input() autocomplete: string = 'off';
+  @Input() showErrors = true;
+  @Input() hint?: string;
+  @Input() min?: number = 0;
+  @Input() max?: number;
+  @Input() required = false;
+  @Output() inputEvent = new EventEmitter<InputNumberInputEvent>();
+  @Output() blur = new EventEmitter<void>();
+
+  @ContentChild('suffixTemp', { static: true }) suffixTemp!: TemplateRef<any> | null;
+
+  private readonly toastService = inject(ToastService);
+
+  get preparedPlaceholder(): string {
+    return this.placeholder || 'مبلغ';
+  }
+
+  get isRequired(): boolean {
+    return this.required || this.control.hasValidator(Validators.required);
+  }
+
+  get sizeClass(): string {
+    return this.size === 'large' ? 'p-inputtext-lg' : this.size === 'small' ? 'p-inputtext-sm' : '';
+  }
+
+  onInput(event: InputNumberInputEvent) {
+    console.log('event', event);
+
+    const eventValue = Number(event.value ?? 0);
+    const min = this.min ?? undefined;
+    const max = this.max ?? undefined;
+
+    const minValidator = min !== undefined && eventValue < min;
+    const maxValidator = max !== undefined && eventValue > max;
+
+    if (maxValidator) {
+      this.toastService.warn({
+        text: `مقدار ${this.label} نمی‌تواند بیشتر از ${this.max!.toLocaleString('en-US')} باشد.`,
+      });
+    }
+    if (minValidator) {
+      this.toastService.warn({
+        text: `مقدار ${this.label} نمی‌تواند کمتر از ${this.min!.toLocaleString('en-US')} باشد.`,
+      });
+    }
+
+    if (minValidator || maxValidator) {
+      const normalizedValue = parseFloat(
+        eventValue.toString().slice(0, eventValue.toString().length - 1) || '0'
+      );
+
+      this.control.setValue(normalizedValue);
+      // @ts-ignore
+      event.originalEvent.target.value = normalizedValue
+        ? normalizedValue.toLocaleString('en-US')
+        : normalizedValue;
+    } else {
+      // @ts-ignore
+      event.originalEvent.target.value = eventValue
+        ? eventValue.toLocaleString('en-US')
+        : eventValue;
+    }
+
+    this.inputEvent.emit({
+      ...event,
+      value: eventValue,
+    });
+  }
+}

src/app/shared/components/posPayment/gold-form.component.html

@@ -1,6 +1,6 @@
 <div class="form-group">
   <form [formGroup]="form">
-    <app-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" type="price" />
+    <app-price-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" />
     <app-input [control]="form.controls.quantity" name="quantity" label="مقدار" type="number" suffix="گرم" />
     <app-enum-select [control]="form.controls.payload.controls.karat" type="goldKarat" name="karat" />
 

src/app/shared/components/posPayment/gold-form.component.ts

@@ -17,6 +17,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ButtonDirective } from 'primeng/button';
 import { SelectButton, SelectButtonChangeEvent } from 'primeng/selectbutton';
+import { PriceInputComponent } from '../input/price-input.component';
 import goldAmountCalculationUtil from './gold-amount-calculation.util';
 
 @Component({
@@ -31,6 +32,7 @@ import goldAmountCalculationUtil from './gold-amount-calculation.util';
     AmountPercentageInputComponent,
     ButtonDirective,
     CalculatedAmountCardComponent,
+    PriceInputComponent,
   ],
 })
 export class SharedGoldPayloadFormComponent extends AbstractForm<

src/app/shared/components/posPayment/standard-form.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="form" (submit)="submit()">
-  <app-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" type="price" />
+  <app-price-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" />
   <app-input
     [control]="form.controls.quantity"
     name="quantity"

src/app/shared/components/posPayment/standard-form.component.ts

@@ -12,6 +12,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { ButtonDirective } from 'primeng/button';
 import { IPosOrderItem } from '../../../domains/pos/modules/shop/models';
+import { PriceInputComponent } from '../input/price-input.component';
 
 @Component({
   selector: 'shared-standard-payload-form',
@@ -22,6 +23,7 @@ import { IPosOrderItem } from '../../../domains/pos/modules/shop/models';
     AmountPercentageInputComponent,
     ButtonDirective,
     CalculatedAmountCardComponent,
+    PriceInputComponent,
   ],
 })
 export class SharedStandardPayloadFormComponent extends AbstractForm<

src/app/shared/components/seasonPicker/season-picker-dialog.component.html

@@ -17,19 +17,12 @@
       <button
         pButton
         type="button"
+        size="large"
         [label]="seasonItem.label"
         [severity]="seasonItem.severity"
         outlined
-        (click)="selectedSeasonDraft.set(seasonItem.key)"></button>
+        (click)="selectSeason(seasonItem)"></button>
     }
     <!-- [disabled]="selectedYear <= selectedYearDraft() && selectedSeason <= selectedSeasonDraft()" -->
   </div>
-
-  <div class="mt-4">
-    <app-form-footer-actions
-      submitLabel="تایید"
-      cancelLabel="انصراف"
-      (onCancel)="visibleChange.emit(false)"
-      (onSubmit)="onSubmit()" />
-  </div>
 </shared-light-bottomsheet>

src/app/shared/components/seasonPicker/season-picker-dialog.component.ts

@@ -5,7 +5,6 @@ import { Component, computed, EventEmitter, Input, Output, signal } from '@angul
 import { FormsModule } from '@angular/forms';
 import { ButtonDirective, ButtonSeverity } from 'primeng/button';
 import { SharedLightBottomsheetComponent } from '../dialog/light-bottomsheet.component';
-import { FormFooterActionsComponent } from '../formFooterActions/form-footer-actions.component';
 
 type SeasonKey = 0 | 1 | 2 | 3;
 
@@ -22,7 +21,6 @@ interface SeasonItem {
     CommonModule,
     FormsModule,
     SharedLightBottomsheetComponent,
-    FormFooterActionsComponent,
     ButtonDirective,
     UikitLabelComponent,
   ],
@@ -40,10 +38,11 @@ export class SeasonPickerDialogComponent extends AbstractDialog {
 
   isSeasonDisabled = computed(() => this.selectedYear >= this.selectedYearDraft());
 
-  onSubmit(): void {
+  selectSeason(season: SeasonItem) {
+    this.selectedSeasonDraft.set(season.key);
     this.submit.emit({
       year: this.selectedYearDraft(),
-      season: this.selectedSeasonDraft(),
+      season: season.key,
     });
     this.close();
   }