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

@@ -0,0 +1,33 @@
+<ng-template #dialogContent>
+  <ng-content></ng-content>
+</ng-template>
+
+@if (mobileDrawer && isMobile) {
+  <p-drawer
+    [header]="header"
+    [visible]="visible"
+    position="bottom"
+    [modal]="modal"
+    [closable]="closable"
+    [style]="{ 'max-height': mobileDrawerHeight, height: 'auto' }"
+    styleClass="shared-mobile-drawer"
+    (visibleChange)="onVisibilityChange($event)"
+    (onHide)="onHide.emit($event)"
+  >
+    <ng-container [ngTemplateOutlet]="dialogContent"></ng-container>
+  </p-drawer>
+} @else {
+  <p-dialog
+    [header]="header"
+    [visible]="visible"
+    [modal]="modal"
+    [style]="style"
+    [closable]="closable"
+    [draggable]="draggable"
+    [breakpoints]="breakpoints"
+    (visibleChange)="onVisibilityChange($event)"
+    (onHide)="onHide.emit($event)"
+  >
+    <ng-container [ngTemplateOutlet]="dialogContent"></ng-container>
+  </p-dialog>
+}

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

@@ -1,25 +1,25 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
 import { Dialog } from 'primeng/dialog';
+import { Drawer } from 'primeng/drawer';
 
 @Component({
   selector: 'shared-dialog',
-  template: `
-    <p-dialog
-      [header]="header"
-      [(visible)]="visible"
-      [modal]="modal"
-      [style]="style"
-      [closable]="closable"
-      [draggable]="draggable"
-      [breakpoints]="breakpoints"
-      (onHide)="onHide.emit($event)"
-    >
-      <ng-content />
-    </p-dialog>
-  `,
-  imports: [Dialog],
+  templateUrl: './dialog.component.html',
+  imports: [Dialog, Drawer, NgTemplateOutlet],
+  styles: [
+    `
+      :host ::ng-deep .shared-mobile-drawer.p-drawer-bottom {
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+      }
+      :host ::ng-deep .shared-mobile-drawer .p-drawer-content {
+        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+      }
+    `,
+  ],
 })
-export class SharedDialogComponent {
+export class SharedDialogComponent implements OnInit {
   @Input() header = '';
   @Input() visible = false;
   @Output() visibleChange = new EventEmitter<boolean>();
@@ -29,6 +29,29 @@ export class SharedDialogComponent {
   @Input() draggable = false;
   @Input() style: Record<string, string> | undefined;
   @Input() breakpoints: Record<string, string> | undefined;
+  @Input() mobileBreakpoint = 768;
+  @Input() mobileDrawer = true;
+  @Input() mobileDrawerHeight = '90svh';
 
   @Output() onHide = new EventEmitter<any>();
+
+  isMobile = false;
+
+  ngOnInit() {
+    this.updateViewportMode();
+  }
+
+  @HostListener('window:resize')
+  onResize() {
+    this.updateViewportMode();
+  }
+
+  onVisibilityChange(nextValue: boolean) {
+    this.visible = nextValue;
+    this.visibleChange.emit(nextValue);
+  }
+
+  private updateViewportMode() {
+    this.isMobile = typeof window !== 'undefined' && window.innerWidth <= this.mobileBreakpoint;
+  }
 }