feat(demo-app): add layout demo

projects/demo-app/src/app/app.component.html

@@ -44,6 +44,12 @@ <h1 class="demo-app-name">hug/ngx-components Demo</h1>
                     <span mat-line>Timpe Picker</span>
                 </mat-list-item>
             </mat-nav-list>
+            <mat-nav-list>
+                <mat-list-item title="Layout" routerLink="/layout" routerLinkActive="active">
+                    <mat-icon mat-list-icon>dashboard</mat-icon>
+                    <span mat-line>Layout</span>
+                </mat-list-item>
+            </mat-nav-list>
         </mat-sidenav>
 
         <mat-sidenav-content>

projects/demo-app/src/app/app.routes.ts

@@ -8,5 +8,6 @@ export const appRoutes: Routes = [
     { path: 'snackbar', loadComponent: () => import('./snackbar/snackbar-demo.component').then(m => m.SnackbarDemoComponent), data: { title: 'Snackbar' } },
     { path: 'splitter', loadComponent: () => import('./splitter/splitter-demo.component').then(m => m.SplitterDemoComponent), data: { title: 'Splitter' } },
     { path: 'time-picker', loadComponent: () => import('./time-picker/time-picker-demo.component').then(m => m.TimePickerDemoComponent), data: { title: 'Time Picker' } },
+    { path: 'layout', loadComponent: () => import('./layout/layout-demo.component').then(m => m.LayoutDemoComponent), data: { title: 'Layout' } },
     { path: '**', redirectTo: 'message-box', pathMatch: 'prefix' }
 ];

projects/demo-app/src/app/layout/layout-demo.component.html

@@ -0,0 +1,44 @@
+<ngx-layout toolbarColor="primary" [withBackButton]="withBackButton" backButtonLabel="Back button label" [withCloseButton]="withCloseButton" (backButtonClicked)="log('Back button clicked', $event)" (closeButtonClicked)="log('Close button clicked', $event)" (sideFilterOpened)="log('Side filter opened')" (sideFilterClosed)="log('Side filter closed')">
+    <ng-template #layoutToolbar>
+        <span toolbar-title>Accès dossier patient</span>
+        <ngx-search-container>
+            <input type="text" [(ngModel)]="search" (ngModelChange)="log('Search changed', $event)" placeholder="Search" autocomplete="off" ngx-search-input />
+        </ngx-search-container>
+
+        <button type="button" mat-icon-button matTooltip="Help" (click)="log('Help button clicked', $event)">
+            <mat-icon>help_outline</mat-icon>
+        </button>
+    </ng-template>
+
+    <!-- Primary action -->
+    <ng-template #layoutPrimaryAction>
+        <button type="button" mat-fab matTooltip="Add" (click)="log('Add button clicked', $event)">
+            <mat-icon>add</mat-icon>
+        </button>
+    </ng-template>
+
+    <!-- Actions panel -->
+    <ng-template #layoutActions>
+        <button type="button" mat-icon-button matTooltip="Refresh" (click)="log('Refresh button clicked', $event)">
+            <mat-icon>refresh</mat-icon>
+        </button>
+
+        <button type="button" mat-icon-button matTooltip="Favorite" (click)="log('Favorite button clicked', $event)">
+            <mat-icon>favorite</mat-icon>
+        </button>
+    </ng-template>
+
+    <!-- Right panel -->
+    <ng-template #layoutRight>
+        <div class="layout-right-container">Layout right</div>
+    </ng-template>
+
+    <!-- Info boxes panel -->
+    <ng-template #layoutInfoBoxes>
+        <span class="info-box">Info box</span>
+        <span class="info-box primary">Info box primary</span>
+        <span class="info-box accent">Info box accent</span>
+    </ng-template>
+
+    <div class="content-container">Layout content</div>
+</ngx-layout>

projects/demo-app/src/app/layout/layout-demo.component.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+
+:host {
+    ngx-layout {
+        .content-container {
+            display: flex;
+            flex: 1 1 auto;
+            padding: 1rem;
+            background: mat.get-color-from-palette(mat.$green-palette, 100);
+        }
+
+        .layout-right-container {
+            display: flex;
+            flex: 1 1 auto;
+            background: mat.get-color-from-palette(mat.$red-palette, 100);
+        }
+    }
+}

projects/demo-app/src/app/layout/layout-demo.component.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgxLayoutComponent } from '@hug/ngx-layout';
+import { NgxSearchContainerComponent, NgxSearchInputDirective } from '@hug/ngx-search-container';
+import { NgxStatusService } from '@hug/ngx-status';
+
+@Component({
+    selector: 'app-layout-demo',
+    templateUrl: './layout-demo.component.html',
+    styleUrls: ['./layout-demo.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        NgxSearchContainerComponent,
+        NgxSearchInputDirective,
+        NgxLayoutComponent
+    ]
+})
+export class LayoutDemoComponent {
+
+    protected withBackButton = true;
+    protected withCloseButton = true;
+    protected search: string | undefined;
+
+    public constructor(
+        private ngxStatusService: NgxStatusService
+    ) {
+    }
+
+    protected log(msg: string, event?: Event): void {
+        console.log(msg, event);
+        this.ngxStatusService.showStatus({
+            title: msg,
+            type: 'info'
+        });
+    }
+}