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/layout/default/app.layout.component.ts

@@ -38,6 +38,11 @@ export class AppLayout {
     public renderer: Renderer2,
     public router: Router,
   ) {
+    this.layoutService.headerSlot$.subscribe((tpl) => (this.topBarMoreAction = tpl));
+    this.layoutService.topbarStartSlot$.subscribe((tpl) => (this.topBarStartAction = tpl));
+    this.layoutService.topbarCenterSlot$.subscribe((tpl) => (this.topBarCenterAction = tpl));
+    this.layoutService.topbarEndSlot$.subscribe((tpl) => (this.topBarEndAction = tpl));
+
     this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
       if (!this.menuOutsideClickListener) {
         this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
@@ -133,11 +138,6 @@ export class AppLayout {
   });
 
   ngOnInit() {
-    this.layoutService.headerSlot$.subscribe((tpl) => (this.topBarMoreAction = tpl));
-    this.layoutService.topbarStartSlot$.subscribe((tpl) => (this.topBarStartAction = tpl));
-    this.layoutService.topbarCenterSlot$.subscribe((tpl) => (this.topBarCenterAction = tpl));
-    this.layoutService.topbarEndSlot$.subscribe((tpl) => (this.topBarEndAction = tpl));
-
     if (window.location.pathname === '/') {
       if (!this.authService.currentAccount()) {
         this.router.navigateByUrl('auth');