update input

src/app/domains/pos/modules/shop/components/order/order-section-dialog.component.html

@@ -0,0 +1,3 @@
+<shared-light-bottomsheet [(visible)]="visible" [closable]="true" header="جزییات صورت‌حساب‌">
+  <pos-order-section (onAddMoreGoods)="closeInvoiceBottomSheet()" (onSubmit)="submitOrder()" />
+</shared-light-bottomsheet>

src/app/domains/pos/modules/shop/components/order/order-section-dialog.component.ts

@@ -0,0 +1,21 @@
+import { AbstractDialog } from '@/shared/abstractClasses/abstract-dialog';
+import { SharedLightBottomsheetComponent } from '@/shared/components';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { PosOrderSectionComponent } from './order-section.component';
+
+@Component({
+  selector: 'pos-order-section-dialog',
+  templateUrl: 'order-section-dialog.component.html',
+  imports: [SharedLightBottomsheetComponent, PosOrderSectionComponent],
+})
+export class PosOrderSectionDialogComponent extends AbstractDialog {
+  @Output() onCloseInvoiceBottomSheet = new EventEmitter();
+  @Output() onSubmitOrder = new EventEmitter();
+
+  closeInvoiceBottomSheet = () => {
+    this.onCloseInvoiceBottomSheet.emit();
+  };
+  submitOrder = () => {
+    this.onSubmitOrder.emit();
+  };
+}

src/app/domains/pos/modules/shop/views/root.component.html

@@ -33,10 +33,12 @@
       </div>
     </button>
   }
-  <shared-light-bottomsheet [(visible)]="showInvoiceBottomSheet" [closable]="true" header="جزییات صورت‌حساب‌">
+  @if (showInvoiceBottomSheet()) {
-    <pos-order-section (onAddMoreGoods)="closeInvoiceBottomSheet()" (onSubmit)="submitOrder()" />
+    <pos-order-section-dialog
-  </shared-light-bottomsheet>
+      [(visible)]="showInvoiceBottomSheet"
-
+      (onAddMoreGoods)="closeInvoiceBottomSheet()"
+      (onSubmit)="submitOrder()" />
+  }
   @if (isVisiblePaymentForm()) {
     <pos-payment-form-dialog [(visible)]="isVisiblePaymentForm" (onSubmit)="submitPayment($event)" />
   }

src/app/domains/pos/modules/shop/views/root.component.ts

@@ -2,11 +2,11 @@
 import { Maybe } from '@/core';
 import { PosInfoStore } from '@/domains/pos/store/pos.store';
 import { AbstractIsMobileComponent } from '@/shared/abstractClasses/abstract-is-mobile';
-import { SharedLightBottomsheetComponent } from '@/shared/components/dialog/light-bottomsheet.component';
 import { PageLoadingComponent } from '@/shared/components/page-loading.component';
 import { PriceMaskDirective } from '@/shared/directives';
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { ButtonDirective } from 'primeng/button';
+import { PosOrderSectionDialogComponent } from '../components/order/order-section-dialog.component';
 import { PosOrderSectionComponent } from '../components/order/order-section.component';
 import { PosOrderSubmittedDialogComponent } from '../components/order/order-submitted-dialog.component';
 import { PosPaymentFormDialogComponent } from '../components/payment/form-dialog.component';
@@ -25,10 +25,10 @@ import { PosLandingStore } from '../store/main.store';
     PosOrderSectionComponent,
     PageLoadingComponent,
     PriceMaskDirective,
-    SharedLightBottomsheetComponent,
     ButtonDirective,
     PosOrderSubmittedDialogComponent,
     PosPaymentFormDialogComponent,
+    PosOrderSectionDialogComponent,
   ],
 })
 export class PosShopComponent extends AbstractIsMobileComponent {

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

@@ -97,13 +97,15 @@ export class AmountPercentageInputComponent {
   private lastValidAmount = 0;
   private lastValidPercentage = 0;
 
-  private toEnglishDigits(value: string): string {
+  private toEnglishDigits(value: Maybe<string | number>): string {
-    return value
+    const normalizedValue = value === null || value === undefined ? '' : String(value);
+
+    return normalizedValue
       .replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776))
       .replace(/[٠-٩]/g, (digit) => String(digit.charCodeAt(0) - 1632));
   }
 
-  private sanitizeNumericValue(value: string, allowDecimal: boolean): string {
+  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, '');
@@ -114,15 +116,25 @@ export class AmountPercentageInputComponent {
     return decimalParts.length ? `${integerPart}.${mergedDecimals}` : integerPart;
   }
 
-  private parseValue(value: Maybe<string>) {
+  private normalizeLeadingZeros(value: string, allowDecimal: boolean): string {
-    const cleanedValue = this.sanitizeNumericValue(
+    if (!value) return value;
-      value || '',
+    if (!allowDecimal) return value.replace(/^0+(?=\d)/, '');
-      this.selectedType.value === 'percentage'
-    );
 
-    console.log('cleaned', cleanedValue);
+    if (value.includes('.')) {
+      const [integerPart = '0', decimalPart = ''] = value.split('.');
+      const normalizedInteger = integerPart.replace(/^0+(?=\d)/, '') || '0';
+      return `${normalizedInteger}.${decimalPart}`;
+    }
 
-    return Number.isFinite(cleanedValue) ? Number(cleanedValue) : 0;
+    return value.replace(/^0+(?=\d)/, '');
+  }
+
+  private makeCleanValue(value: Maybe<string>) {
+    const allowDecimal = this.selectedType.value === 'percentage';
+    const cleanedValue = this.sanitizeNumericValue(value || '', allowDecimal);
+    const normalizedValue = this.normalizeLeadingZeros(cleanedValue, allowDecimal);
+
+    return !Number.isNaN(normalizedValue) ? normalizedValue : '0';
   }
 
   private getRangeLabel(value: number, isPercentageType: boolean) {
@@ -157,7 +169,7 @@ export class AmountPercentageInputComponent {
     inputEl.value = value ? value.toLocaleString('en-US') : '0';
   }
 
-  private resetPercentageInputView(value: number) {
+  private resetPercentageInputView(value: string) {
     const inputEl = this.percentageInput?.nativeElement;
     if (!inputEl) return;
     inputEl.value = `${value}`;
@@ -178,26 +190,28 @@ export class AmountPercentageInputComponent {
 
   private syncFromPercentage(rawValue: Maybe<any>) {
     const { min, max } = this.getPercentageRange();
-    const percentageValue = this.parseValue(rawValue);
+    const percentageValue = this.makeCleanValue(rawValue);
-    if (!this.isInRange(percentageValue, min, max)) {
+
-      this.showOutOfRangeToast(percentageValue, true, min, max);
+    if (!this.isInRange(Number(percentageValue), min, max)) {
+      this.showOutOfRangeToast(Number(percentageValue), true, min, max);
       this.percentageControl.setValue(this.lastValidPercentage);
-      this.resetPercentageInputView(this.lastValidPercentage);
+      this.resetPercentageInputView(this.lastValidPercentage.toString());
       return;
     }
 
-    this.lastValidPercentage = percentageValue;
+    this.lastValidPercentage = Number(percentageValue);
-    const amountValue = (this.baseAmount * percentageValue) / 100;
+    const amountValue = (this.baseAmount * Number(percentageValue)) / 100;
     this.lastValidAmount = Number.isFinite(amountValue) ? amountValue : 0;
 
     this.percentageControl.setValue(this.lastValidPercentage, { emitEvent: false });
     this.amountControl.setValue(this.lastValidAmount, { emitEvent: false });
     this.preparedLabel.set(this.prepareLabel(true));
+    this.resetPercentageInputView(percentageValue);
   }
 
   private syncFromAmount(rawValue: Maybe<any>) {
     const { min, max } = this.getAmountRange();
-    const amountValue = this.parseValue(rawValue);
+    const amountValue = Number(this.makeCleanValue(rawValue));
     if (!this.isInRange(amountValue, min, max)) {
       this.showOutOfRangeToast(amountValue, false, min, max);
       this.amountControl.setValue(this.lastValidAmount);
@@ -209,7 +223,7 @@ export class AmountPercentageInputComponent {
     const percentageValue = this.baseAmount
       ? ((amountValue / this.baseAmount) * 100).toFixed(2)
       : '0';
-    this.lastValidPercentage = this.parseValue(percentageValue);
+    this.lastValidPercentage = Number(this.makeCleanValue(percentageValue));
 
     this.amountControl.setValue(this.lastValidAmount, { emitEvent: false });
     this.percentageControl.setValue(percentageValue, { emitEvent: false });
@@ -244,8 +258,8 @@ export class AmountPercentageInputComponent {
       }
     });
 
-    this.lastValidAmount = this.parseValue(this.amountControl.value);
+    this.lastValidAmount = Number(this.makeCleanValue(this.amountControl.value));
-    this.lastValidPercentage = this.parseValue(this.percentageControl.value);
+    this.lastValidPercentage = Number(this.makeCleanValue(this.percentageControl.value));
     if (isPercentageType) {
       this.syncFromPercentage(this.percentageControl.value);
     } else {

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

@@ -268,6 +268,7 @@ export class InputComponent {
 
   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;
@@ -289,6 +290,7 @@ export class InputComponent {
       value = this.enforceMaxLength(value);
 
       let numericValue = this.parseNumericValue(value);
+
       const range = this.isOutOfRange(numericValue);
       if (value !== '' && (range.min || range.max)) {
         this.notifyRangeError(range);

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

@@ -62,8 +62,6 @@ export class PriceInputComponent {
   }
 
   onInput(event: InputNumberInputEvent) {
-    console.log('event', event);
-
     const eventValue = Number(event.value ?? 0);
     const min = this.min ?? undefined;
     const max = this.max ?? undefined;

src/app/shared/components/pageDataList/page-data-list.component.ts

@@ -181,8 +181,6 @@ export class PageDataListComponent<I = any> {
   };
 
   onPage = ($event: any) => {
-    console.log('$event', $event);
-
     this.onChangePage.emit($event);
   };