diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html
index b345abc9..cf02c036 100644
--- a/projects/demo-app/src/app/app.component.html
+++ b/projects/demo-app/src/app/app.component.html
@@ -44,6 +44,12 @@
hug/ngx-components Demo
Timpe Picker
+
+
+ dashboard
+ Layout
+
+
diff --git a/projects/demo-app/src/app/app.routes.ts b/projects/demo-app/src/app/app.routes.ts
index 82ffcdc5..aa794470 100644
--- a/projects/demo-app/src/app/app.routes.ts
+++ b/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' }
];
diff --git a/projects/demo-app/src/app/layout/layout-demo.component.html b/projects/demo-app/src/app/layout/layout-demo.component.html
new file mode 100644
index 00000000..4cd16226
--- /dev/null
+++ b/projects/demo-app/src/app/layout/layout-demo.component.html
@@ -0,0 +1,44 @@
+
+
+ Accès dossier patient
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Layout right
+
+
+
+
+ Info box
+ Info box primary
+ Info box accent
+
+
+ Layout content
+
diff --git a/projects/demo-app/src/app/layout/layout-demo.component.scss b/projects/demo-app/src/app/layout/layout-demo.component.scss
new file mode 100644
index 00000000..ef65ed05
--- /dev/null
+++ b/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);
+ }
+ }
+}
diff --git a/projects/demo-app/src/app/layout/layout-demo.component.ts b/projects/demo-app/src/app/layout/layout-demo.component.ts
new file mode 100644
index 00000000..999098a4
--- /dev/null
+++ b/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'
+ });
+ }
+}
diff --git a/projects/layout/src/layout.component.ts b/projects/layout/src/layout.component.ts
index 63706e41..6c9790cd 100644
--- a/projects/layout/src/layout.component.ts
+++ b/projects/layout/src/layout.component.ts
@@ -56,8 +56,6 @@ export class NgxLayoutComponent {
protected mediaService = inject(NgxMediaService);
protected sidenavService = inject(NgxSidenavService);
- private _withEditorToolbar = true;
-
public get layoutToolbar(): TemplateRef | undefined {
return this.layoutToolbarExternal ?? this.layoutToolbarContent;
}
@@ -80,15 +78,6 @@ export class NgxLayoutComponent {
return value;
}
- @Input()
- public set withEditorToolbar(value: BooleanInput) {
- this._withEditorToolbar = coerceBooleanProperty(value);
- }
-
- public get withEditorToolbar(): BooleanInput {
- return this._withEditorToolbar;
- }
-
private _withSidenav = false;
@Input()
@@ -101,6 +90,7 @@ export class NgxLayoutComponent {
}
private _keepFilterButtonDisplayed = true;
+
@Input()
public set keepFilterButtonDisplayed(value: BooleanInput) {
this._keepFilterButtonDisplayed = coerceBooleanProperty(value);
@@ -111,6 +101,7 @@ export class NgxLayoutComponent {
}
private _withCloseButton = false;
+
@Input()
public set withCloseButton(value: BooleanInput) {
this._withCloseButton = coerceBooleanProperty(value);
@@ -131,17 +122,6 @@ export class NgxLayoutComponent {
return this._withBackButton;
}
- private _displayEditorToolbar = true;
-
- @Input()
- public set displayEditorToolbar(value: BooleanInput) {
- this._displayEditorToolbar = coerceBooleanProperty(value);
- }
-
- public get displayEditorToolbar(): BooleanInput {
- return this._displayEditorToolbar;
- }
-
public closeSideFilter(): void {
void this.sideFilter?.close();
}
diff --git a/projects/search-container/src/search-container.component.html b/projects/search-container/src/search-container.component.html
index b798eabb..b7db22d9 100644
--- a/projects/search-container/src/search-container.component.html
+++ b/projects/search-container/src/search-container.component.html
@@ -1,10 +1,10 @@
- arrow_back
+ arrow_back
- search
+ search
diff --git a/projects/search-container/src/search-container.component.scss b/projects/search-container/src/search-container.component.scss
index b50f9fdb..07fc120b 100644
--- a/projects/search-container/src/search-container.component.scss
+++ b/projects/search-container/src/search-container.component.scss
@@ -50,7 +50,7 @@ ngx-search-container {
&.active {
display: flex;
align-items: center;
- position: fixed;
+ position: absolute;
top: 0;
left: 0;
width: 100vw;
@@ -61,5 +61,10 @@ ngx-search-container {
.mat-icon {
padding: 0.5rem;
}
+
+ .icon-close-search,
+ .icon-open-search {
+ cursor: pointer;
+ }
}
}
diff --git a/projects/search-container/src/search-container.component.ts b/projects/search-container/src/search-container.component.ts
index 1d71bea6..c2a306db 100644
--- a/projects/search-container/src/search-container.component.ts
+++ b/projects/search-container/src/search-container.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
import { NgControl } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
@@ -34,6 +34,7 @@ export class NgxSearchInputDirective {
imports: [
AsyncPipe,
NgIf,
+ NgTemplateOutlet,
MatIconModule,
MatTooltipModule
]
@@ -46,6 +47,12 @@ export class NgxSearchContainerComponent extends NgxDestroy implements AfterCont
@Input()
public clearTooltip = 'Effacer la recherche';
+ @Input()
+ public openSearchTooltip = 'Ouvrir la recherche';
+
+ @Input()
+ public closeSearchTooltip = 'Quitter la recherche';
+
@ContentChild('mobileSearch')
public mobileSearch: TemplateRef | undefined;
@@ -58,10 +65,10 @@ export class NgxSearchContainerComponent extends NgxDestroy implements AfterCont
@ContentChild(NgxSearchInputDirective)
public set searchInput(searchInput: NgxSearchInputDirective) {
if (!searchInput) {
- throw new Error('You need to add the attribute ngx-search-input to the SearchContainerComponent');
+ throw new Error('You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');
}
if (!searchInput.ngControl) {
- throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');
+ throw new Error('You need to add the attribute ngModel to the NgxSearchContainerComponent');
}
this._searchInput = searchInput;
}