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/components/dialog/light-bottomsheet.component.html

@@ -1,20 +1,21 @@
 <div class="light-bottomsheet-mask" (click)="onMaskClick()"></div>
 
-<section
-  class="light-bottomsheet-panel"
-  role="dialog"
-  aria-modal="true"
-  [attr.aria-hidden]="!visible"
-  [ngStyle]="style || { 'max-height': mobileDrawerHeight, height: 'auto' }"
->
+<section class="light-bottomsheet-panel" [ngStyle]="style || { 'max-height': mobileDrawerHeight, height: 'auto' }">
   <div class="light-bottomsheet-content">
     @if (header || closable) {
       <header class="light-bottomsheet-header">
-        <h3 class="light-bottomsheet-title">{{ header }}</h3>
+        <span class="text-xl font-bold">{{ header }}</span>
         @if (closable) {
-          <button type="button" class="light-bottomsheet-close" (click)="onVisibilityChange(false)" aria-label="Close">
-            ×
-          </button>
+          <p-button
+            type="button"
+            icon="pi pi-times"
+            text
+            size="small"
+            class="light-bottomsheet-close"
+            (click)="onVisibilityChange(false)"
+            aria-label="Close"
+          >
+          </p-button>
         }
       </header>
     }