feat: refactor dialog components to use light-bottomsheet for improved UX

- Replaced SharedDialogComponent with SharedLightBottomsheetComponent in customer-dialog, order-submitted-dialog, payment form-dialog, and pre-invoice-dialog components.
- Updated styles and properties for light-bottomsheet to enhance responsiveness and usability.
- Modified payload form components to use measure units instead of unit types for better clarity.
- Adjusted form controls to use consistent naming conventions for amounts and percentages.
- Enhanced support for overlay options in select components to manage z-index dynamically.
- Improved support for RTL layouts in input groups and other components.

src/app/shared/apiEnum/select.component.html

@@ -7,6 +7,7 @@
     [formControl]="control"
     [showClear]="showClear"
     [name]="name || type"
+    [overlayOptions]="overlayOptions()"
     appendTo="body"
   />
 </uikit-field>

src/app/shared/apiEnum/select.component.ts

@@ -1,5 +1,6 @@
 import { UikitFieldComponent } from '@/uikit';
-import { Component, computed, inject, Input } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, computed, inject, Input } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { Select } from 'primeng/select';
 import { Observable } from 'rxjs';
@@ -19,6 +20,9 @@ export class EnumSelectComponent extends AbstractSelectComponent<string, IApiEnu
   @Input() customLabel?: string;
 
   private readonly service = inject(EnumsService);
+  constructor(@Inject(DOCUMENT) private readonly document: Document) {
+    super();
+  }
 
   label = computed(() => this.customLabel ?? apiEnumTranslates[this.type]);
 
@@ -29,4 +33,20 @@ export class EnumSelectComponent extends AbstractSelectComponent<string, IApiEnu
   ngOnInit() {
     this.getData();
   }
+
+  overlayOptions() {
+    return {
+      autoZIndex: true,
+      baseZIndex: this.overlayBaseZIndex(),
+    };
+  }
+
+  overlayBaseZIndex() {
+    const drawers = Array.from(this.document.body.querySelectorAll('.p-drawer,[data-pc-name="drawer"]')) as HTMLElement[];
+    const zIndexes = drawers
+      .map((drawer) => Number.parseInt(drawer.style.zIndex || '0', 10))
+      .filter((zIndex) => Number.isFinite(zIndex) && zIndex > 0);
+
+    return zIndexes.length ? Math.max(...zIndexes) + 2 : 1000;
+  }
 }