optimize pos gold form

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

@@ -6,6 +6,7 @@ import { CommonModule } from '@angular/common';
 import {
   Component,
   ContentChild,
+  DestroyRef,
   EventEmitter,
   inject,
   Input,
@@ -13,6 +14,7 @@ import {
   signal,
   TemplateRef,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { InputGroup } from 'primeng/inputgroup';
 import { InputGroupAddon } from 'primeng/inputgroupaddon';
@@ -42,6 +44,7 @@ interface IAmountPercentageInputSelect {
   ],
 })
 export class AmountPercentageInputComponent {
+  private readonly destroyRef = inject(DestroyRef);
   @Input() defaultType: TAmountPercentageInput = 'percentage';
   @Input({ required: true }) percentageControl!: FormControl<Maybe<any>>;
   @Input({ required: true }) amountControl!: FormControl<Maybe<any>>;
@@ -146,17 +149,17 @@ export class AmountPercentageInputComponent {
     if (isPercentageType) {
       const amountValue = (this.baseAmount * newValue) / 100;
       newValueToSet = newValue + '';
-      this.amountControl.setValue(isNaN(amountValue) ? 0 : amountValue);
+      this.amountControl.setValue(isNaN(amountValue) ? 0 : amountValue, { emitEvent: false });
       if (notValid) {
-        this.percentageControl.setValue(newValue);
+        this.percentageControl.setValue(newValue, { emitEvent: false });
       }
     } else {
       const percentageValue = ((newValue / this.baseAmount) * 100).toFixed(2);
       newValueToSet = newValue + '';
-      this.percentageControl.setValue(percentageValue);
+      this.percentageControl.setValue(percentageValue, { emitEvent: false });
       this.preparedLabel.set(`${this.label} (${percentageValue} درصد)`);
       if (notValid) {
-        this.amountControl.setValue(newValue);
+        this.amountControl.setValue(newValue, { emitEvent: false });
       }
     }
     this.preparedLabel.set(this.prepareLabel(isPercentageType));
@@ -177,7 +180,7 @@ export class AmountPercentageInputComponent {
       isPercentageType ? this.percentageControl.value : this.amountControl.value,
     );
 
-    this.selectedType.valueChanges.subscribe((value) => {
+    this.selectedType.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
       this.preparedLabel.set(this.prepareLabel(value === 'percentage'));
     });
   }
@@ -187,9 +190,5 @@ export class AmountPercentageInputComponent {
     this.modifyControlsData(
       isPercentageType ? this.percentageControl.value : this.amountControl.value,
     );
-
-    this.selectedType.valueChanges.subscribe((value) => {
-      this.preparedLabel.set(this.prepareLabel(value === 'percentage'));
-    });
   }
 }