debug input

src/app/domains/pos/modules/landing/components/payloads/gold/form.component.html

@@ -13,6 +13,8 @@
       name="wages"
       label="اجرت"
     />
+
+    {{ initialValues?.payload?.profit }}
     <app-amount-percentage-input
       [percentageControl]="form.controls.payload.controls.commission_percentage"
       [amountControl]="form.controls.payload.controls.commission"

src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts

@@ -31,16 +31,16 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
   IPosOrderItem<IGoldPayload>,
   IPosOrderItem<IGoldPayload>
 > {
-  override defaultValues: Partial<IPosOrderItem<IGoldPayload>> = {
-    unit_price: 200_000_000,
-    quantity: 2,
-    payload: {
-      // commission: 10_000,
-      // wages: 10_000,
-      // profit: 10_000,
-      karat: 'KARAT_18' as TGoldKarat,
-    } as any,
-  };
+  // override defaultValues: Partial<IPosOrderItem<IGoldPayload>> = {
+  //   unit_price: 200_000_000,
+  //   quantity: 2,
+  //   payload: {
+  //     // commission: 10_000,
+  //     // wages: 10_000,
+  //     // profit: 10_000,
+  //     karat: 'KARAT_18' as TGoldKarat,
+  //   } as any,
+  // };
 
   @Output() onSubmitForm = new EventEmitter<IGoldPayload>();
   @Output() onChangeTotalAmount = new EventEmitter<number>();

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

@@ -19,6 +19,7 @@
   <p-inputgroup>
     @if (selectedType.value === "amount") {
       <p-inputnumber
+        #amountInput
         [attr.id]="name"
         [formControl]="amountControl"
         [attr.name]="name"
@@ -31,6 +32,7 @@
       />
     } @else {
       <input
+        #percentageInput
         pInputText
         [attr.id]="name"
         [formControl]="percentageControl"

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

@@ -8,18 +8,20 @@ import {
   Component,
   ContentChild,
   DestroyRef,
+  ElementRef,
   EventEmitter,
   inject,
   Input,
   Output,
   signal,
   TemplateRef,
+  ViewChild,
 } 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';
-import { InputNumberModule } from 'primeng/inputnumber';
+import { InputNumber, InputNumberModule } from 'primeng/inputnumber';
 import { InputText } from 'primeng/inputtext';
 import { Select } from 'primeng/select';
 
@@ -70,6 +72,8 @@ export class AmountPercentageInputComponent {
   @Output() blur = new EventEmitter<void>();
 
   @ContentChild('labelSuffix', { static: false }) labelSuffix!: TemplateRef<any> | null;
+  @ViewChild('amountInput') amountInput?: InputNumber;
+  @ViewChild('percentageInput') percentageInput?: ElementRef<HTMLInputElement>;
 
   private readonly toastService = inject(ToastService);
 
@@ -107,7 +111,12 @@ export class AmountPercentageInputComponent {
     return value >= min && value <= max;
   }
 
-  private showOutOfRangeToast(value: number, isPercentageType: boolean, min = 0, max = Number.MAX_SAFE_INTEGER) {
+  private showOutOfRangeToast(
+    value: number,
+    isPercentageType: boolean,
+    min = 0,
+    max = Number.MAX_SAFE_INTEGER,
+  ) {
     if (value < min) {
       this.toastService.warn({
         text: `مقدار ${this.label} باید بیشتر از ${this.getRangeLabel(min, isPercentageType)} باشد.`,
@@ -120,6 +129,18 @@ export class AmountPercentageInputComponent {
     }
   }
 
+  private resetAmountInputView(value: number) {
+    const inputEl = this.amountInput?.input?.nativeElement;
+    if (!inputEl) return;
+    inputEl.value = value ? value.toLocaleString('en-US') : '0';
+  }
+
+  private resetPercentageInputView(value: number) {
+    const inputEl = this.percentageInput?.nativeElement;
+    if (!inputEl) return;
+    inputEl.value = `${value}`;
+  }
+
   private getAmountRange() {
     const min = this.minAmount ?? 0;
     const maxFromInput = this.maxAmount;
@@ -138,7 +159,8 @@ export class AmountPercentageInputComponent {
     const percentageValue = this.parseValue(rawValue);
     if (!this.isInRange(percentageValue, min, max)) {
       this.showOutOfRangeToast(percentageValue, true, min, max);
-      this.percentageControl.setValue(this.lastValidPercentage, { emitEvent: false });
+      this.percentageControl.setValue(this.lastValidPercentage);
+      this.resetPercentageInputView(this.lastValidPercentage);
       return;
     }
 
@@ -146,8 +168,8 @@ export class AmountPercentageInputComponent {
     const amountValue = (this.baseAmount * percentageValue) / 100;
     this.lastValidAmount = Number.isFinite(amountValue) ? amountValue : 0;
 
-    this.percentageControl.setValue(this.lastValidPercentage, { emitEvent: false });
-    this.amountControl.setValue(this.lastValidAmount, { emitEvent: false });
+    this.percentageControl.setValue(this.lastValidPercentage);
+    this.amountControl.setValue(this.lastValidAmount);
     this.preparedLabel.set(this.prepareLabel(true));
   }
 
@@ -156,7 +178,8 @@ export class AmountPercentageInputComponent {
     const amountValue = this.parseValue(rawValue);
     if (!this.isInRange(amountValue, min, max)) {
       this.showOutOfRangeToast(amountValue, false, min, max);
-      this.amountControl.setValue(this.lastValidAmount, { emitEvent: false });
+      this.amountControl.setValue(this.lastValidAmount);
+      this.resetAmountInputView(this.lastValidAmount);
       return;
     }
 
@@ -166,8 +189,8 @@ export class AmountPercentageInputComponent {
       : '0';
     this.lastValidPercentage = this.parseValue(percentageValue);
 
-    this.amountControl.setValue(this.lastValidAmount, { emitEvent: false });
-    this.percentageControl.setValue(percentageValue, { emitEvent: false });
+    this.amountControl.setValue(this.lastValidAmount);
+    this.percentageControl.setValue(percentageValue);
     this.preparedLabel.set(this.prepareLabel(false));
   }
 
@@ -179,7 +202,7 @@ export class AmountPercentageInputComponent {
   }
 
   ngOnInit() {
-    const isPercentageType = this.defaultType === 'percentage';
+    const isPercentageType = this.amountControl.value ? false : true;
 
     this.selectedType.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
       this.preparedLabel.set(this.prepareLabel(value === 'percentage'));
@@ -199,7 +222,6 @@ export class AmountPercentageInputComponent {
       }
     });
 
-    this.selectedType.setValue(isPercentageType ? 'percentage' : 'amount', { emitEvent: false });
     this.lastValidAmount = this.parseValue(this.amountControl.value);
     this.lastValidPercentage = this.parseValue(this.percentageControl.value);
     if (isPercentageType) {
@@ -207,10 +229,11 @@ export class AmountPercentageInputComponent {
     } else {
       this.syncFromAmount(this.amountControl.value);
     }
+    this.selectedType.setValue(isPercentageType ? 'percentage' : 'amount');
   }
 
   ngOnChanges() {
-    const isPercentageType = this.selectedType.value === 'percentage';
+    const isPercentageType = this.amountControl.value ? false : true;
     if (isPercentageType) {
       this.syncFromPercentage(this.percentageControl.value);
     } else {

src/app/shared/components/dialog/light-bottomsheet.component.ts

@@ -57,7 +57,7 @@ import { Button } from 'primeng/button';
         flex-direction: column;
         flex: 1;
         min-height: 0;
-        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+        // padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
         -webkit-overflow-scrolling: touch;
         overscroll-behavior: contain;
       }
@@ -133,6 +133,8 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
 
   private originalParent: Node | null = null;
   private readonly defaultDrawerZIndex = 1102;
+  private previousBodyOverflow = '';
+  private previousBodyTouchAction = '';
 
   constructor(
     private readonly elementRef: ElementRef<HTMLElement>,
@@ -145,15 +147,20 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
     this.originalParent = host.parentNode;
     this.renderer.appendChild(this.document.body, host);
     this.syncZIndex();
+    this.toggleBodyScrollLock(this.visible);
   }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['visible'] && this.visible) {
       this.syncZIndex();
     }
+    if (changes['visible']) {
+      this.toggleBodyScrollLock(this.visible);
+    }
   }
 
   ngOnDestroy() {
+    this.toggleBodyScrollLock(false);
     this.removeDrawer();
   }
 
@@ -167,6 +174,7 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
   onVisibilityChange(nextValue: boolean) {
     this.visible = nextValue;
     this.visibleChange.emit(nextValue);
+    this.toggleBodyScrollLock(nextValue);
     if (nextValue) {
       this.syncZIndex();
     }
@@ -181,6 +189,28 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
     }
   }
 
+  private toggleBodyScrollLock(locked: boolean) {
+    const body = this.document.body;
+    if (!body) return;
+
+    if (locked) {
+      if (!this.previousBodyOverflow) {
+        this.previousBodyOverflow = body.style.overflow || '';
+      }
+      if (!this.previousBodyTouchAction) {
+        this.previousBodyTouchAction = body.style.touchAction || '';
+      }
+      this.renderer.setStyle(body, 'overflow', 'hidden');
+      this.renderer.setStyle(body, 'touch-action', 'none');
+      return;
+    }
+
+    this.renderer.setStyle(body, 'overflow', this.previousBodyOverflow);
+    this.renderer.setStyle(body, 'touch-action', this.previousBodyTouchAction);
+    this.previousBodyOverflow = '';
+    this.previousBodyTouchAction = '';
+  }
+
   private syncZIndex() {
     const host = this.elementRef.nativeElement;
     const siblingDrawers = Array.from(