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; }