feat(layout): enhance topbar with customizable templates and full-page support

- Updated app.layout.component.html to include start, center, and end templates for the topbar.
- Modified app.layout.component.ts to manage new template references and added isFullPage getter.
- Refactored app.topbar.component.html to utilize new templates and improved layout structure.
- Enhanced app.topbar.component.ts to accept new input properties for templates.
- Updated layout.service.ts to manage full-page state and new topbar slots.
- Added new payment bridge services for POS functionality.
- Introduced greater validator for form validation.
- Improved dialog component to support mobile drawer and responsive design.
- Updated styles for better mobile support and layout adjustments.
- Added new main menu sidebar for POS with dynamic content.

src/app/layout/service/layout.service.ts

@@ -21,6 +21,7 @@ interface LayoutState {
   staticMenuMobileActive?: boolean;
   menuHoverActive?: boolean;
   isFixedContentSize?: boolean;
+  isFullPage?: boolean;
 }
 
 interface MenuChangeEvent {
@@ -47,6 +48,7 @@ export class LayoutService {
     staticMenuMobileActive: false,
     menuHoverActive: false,
     isFixedContentSize: true,
+    isFullPage: false,
   };
 
   layoutConfig = signal<layoutConfig>(this._config);
@@ -90,6 +92,7 @@ export class LayoutService {
   isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay');
 
   isFixedContentSize = computed(() => this.layoutState().isFixedContentSize);
+  isFullPage = computed(() => this.layoutState().isFullPage);
 
   transitionComplete = signal<boolean>(false);
 
@@ -144,6 +147,13 @@ export class LayoutService {
     }));
   }
 
+  changeIsFullPage(status: boolean) {
+    this.layoutState.update((prev) => ({
+      ...prev,
+      isFullPage: status,
+    }));
+  }
+
   toggleDarkMode(config?: layoutConfig): void {
     const _config = config || this.layoutConfig();
     localStorage.setItem('isDarkTheme', JSON.stringify(_config.darkTheme));
@@ -221,8 +231,28 @@ export class LayoutService {
 
   private headerSlot = new BehaviorSubject<TemplateRef<any> | null>(null);
   headerSlot$ = this.headerSlot.asObservable();
+  private topbarStartSlot = new BehaviorSubject<TemplateRef<any> | null>(null);
+  topbarStartSlot$ = this.topbarStartSlot.asObservable();
+  private topbarCenterSlot = new BehaviorSubject<TemplateRef<any> | null>(null);
+  topbarCenterSlot$ = this.topbarCenterSlot.asObservable();
+  private topbarEndSlot = new BehaviorSubject<TemplateRef<any> | null>(null);
+  topbarEndSlot$ = this.topbarEndSlot.asObservable();
 
   setHeaderSlot(tpl: TemplateRef<any> | null) {
+    // Backward-compatible alias for topbar end slot.
+    this.setTopbarEndSlot(tpl);
     this.headerSlot.next(tpl);
   }
+
+  setTopbarStartSlot(tpl: TemplateRef<any> | null) {
+    this.topbarStartSlot.next(tpl);
+  }
+
+  setTopbarCenterSlot(tpl: TemplateRef<any> | null) {
+    this.topbarCenterSlot.next(tpl);
+  }
+
+  setTopbarEndSlot(tpl: TemplateRef<any> | null) {
+    this.topbarEndSlot.next(tpl);
+  }
 }