feat: messageBoxDialog angular15

DSI-HUG · Jul 29, 2024 · 7ab3e59 · 7ab3e59
1 parent 4372736
commit 7ab3e59
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 53 deletions.
diff --git a/projects/core/src/services/dialog.service.ts b/projects/core/src/services/dialog.service.ts
@@ -1,8 +1,8 @@
 import { Type } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { Observable, ReplaySubject, switchMap, take, throttleTime } from 'rxjs';
 
 import { NgxAbstractLazyModule, NgxLazyLoaderService } from './lazy-loader.service';
+import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material/dialog';
 
 export abstract class NgxDialogService<ReturnType, DataType> {
     protected openDialogSub$ = new ReplaySubject<MatDialogConfig<DataType>>(1);

diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html
@@ -9,57 +9,57 @@ <h1 class="demo-app-name">hug/ngx-components Demo</h1>
     <mat-sidenav-container class="demo-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
         <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" opened="true">
             <mat-nav-list>
-                <mat-list-item title="Date Picker" routerLink="/date-picker" routerLinkActive="active">
-                    <mat-icon mat-list-icon>date_range</mat-icon>
-                    <span mat-line>Date Picker</span>
+                <mat-list-item title="Date Picker" routerLink="/date-picker" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>date_range</mat-icon>
+                    <span matListItemLine>Date Picker</span>
                 </mat-list-item>
             </mat-nav-list>
             <mat-nav-list>
-                <mat-list-item title="Message Box" routerLink="/message-box" routerLinkActive="active">
-                    <mat-icon mat-list-icon>message</mat-icon>
-                    <span mat-line>Message Box</span>
+                <mat-list-item title="Message Box" routerLink="/message-box" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>message</mat-icon>
+                    <span matListItemLine>Message Box</span>
                 </mat-list-item>
             </mat-nav-list>
             <mat-nav-list>
-                <mat-list-item title="Numeric Stepper" routerLink="/numeric-stepper" routerLinkActive="active">
-                    <mat-icon mat-list-icon>filter_9_plus</mat-icon>
-                    <span mat-line>Numeric Stepper</span>
+                <mat-list-item title="Numeric Stepper" routerLink="/numeric-stepper" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>filter_9_plus</mat-icon>
+                    <span matListItemLine>Numeric Stepper</span>
                 </mat-list-item>
             </mat-nav-list>
             <mat-nav-list>
-                <mat-list-item title="Overlay" routerLink="/overlay" routerLinkActive="active">
-                    <mat-icon mat-list-icon>menu</mat-icon>
-                    <span mat-line>Overlay</span>
+                <mat-list-item title="Overlay" routerLink="/overlay" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>menu</mat-icon>
+                    <span matListItemLine>Overlay</span>
                 </mat-list-item>
             </mat-nav-list>
             <mat-nav-list>
-                <mat-list-item title="Snackbar" routerLink="/snackbar" routerLinkActive="active">
-                    <mat-icon mat-list-icon>home</mat-icon>
-                    <span mat-line>Snackbar</span>
+                <mat-list-item title="Snackbar" routerLink="/snackbar" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>home</mat-icon>
+                    <span matListItemLine>Snackbar</span>
                 </mat-list-item>
             </mat-nav-list>
             <mat-nav-list>
-                <mat-list-item title="Splitter" routerLink="/splitter" routerLinkActive="active">
-                    <mat-icon mat-list-icon>call_split</mat-icon>
-                    <span mat-line>Splitter</span>
+                <mat-list-item title="Splitter" routerLink="/splitter" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>call_split</mat-icon>
+                    <span matListItemLine>Splitter</span>
                 </mat-list-item>
             </mat-nav-list>
             <mat-nav-list>
-                <mat-list-item title="Time Picker" routerLink="/time-picker" routerLinkActive="active">
-                    <mat-icon mat-list-icon>access_time</mat-icon>
-                    <span mat-line>Time Picker</span>
+                <mat-list-item title="Time Picker" routerLink="/time-picker" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>access_time</mat-icon>
+                    <span matListItemLine>Time 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 title="Layout" routerLink="/layout" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>dashboard</mat-icon>
+                    <span matListItemLine>Layout</span>
                 </mat-list-item>
             </mat-nav-list>
             <mat-nav-list>
-                <mat-list-item title="List Loader" routerLink="/list-loader" routerLinkActive="active">
-                    <mat-icon mat-list-icon>list</mat-icon>
-                    <span mat-line>List Loader</span>
+                <mat-list-item title="List Loader" routerLink="/list-loader" [routerLinkActive]="['filled-icon']">
+                    <mat-icon matListItemIcon>list</mat-icon>
+                    <span matListItemLine>List Loader</span>
                 </mat-list-item>
             </mat-nav-list>
         </mat-sidenav>

diff --git a/projects/demo-app/src/app/app.component.ts b/projects/demo-app/src/app/app.component.ts
@@ -1,13 +1,12 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { NgFor, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
-
+import {MatListModule} from '@angular/material/list';
 
 @Component({
     selector: 'app-root',

diff --git a/projects/demo-app/src/main.ts b/projects/demo-app/src/main.ts
@@ -1,14 +1,14 @@
 import { Dialog, DIALOG_SCROLL_STRATEGY_PROVIDER } from '@angular/cdk/dialog';
 import { Overlay } from '@angular/cdk/overlay';
 import { enableProdMode } from '@angular/core';
-import { MAT_LEGACY_DIALOG_SCROLL_STRATEGY_PROVIDER as MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
 
 import { AppComponent } from './app/app.component';
 import { appRoutes } from './app/app.routes';
 import { environment } from './environments/environment';
+import { MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER } from '@angular/material/dialog';
 
 if (environment.production) {
     enableProdMode();

diff --git a/projects/demo-app/src/styles.scss b/projects/demo-app/src/styles.scss
@@ -74,3 +74,11 @@ body {
         flex-direction: row;
     }
 }
+
+.filled-icon {
+    font-variation-settings:
+        'FILL' 1,
+        'wght' 700,
+        'GRAD' 0,
+        'opsz' 24;
+}
diff --git a/projects/message-box-dialog/src/_message-box-dialog-theme.scss b/projects/message-box-dialog/src/_message-box-dialog-theme.scss
@@ -7,7 +7,7 @@
         .cdk-overlay-pane {
             &.warning {
                 ngx-message-box-dialog {
-                    .mat-toolbar {
+                    mat-toolbar {
                         background-color: mat.get-color-from-palette(mat.$orange-palette, 500);
                     }
 
@@ -19,7 +19,7 @@
 
             &.error {
                 ngx-message-box-dialog {
-                    .mat-toolbar {
+                    mat-toolbar {
                         background-color: mat.get-color-from-palette($warn);
                     }
 

diff --git a/projects/message-box-dialog/src/message-box-dialog.component.html b/projects/message-box-dialog/src/message-box-dialog.component.html
@@ -1,18 +1,23 @@
-<mat-toolbar class="dialog-toolbar" color="primary">
-    <span class="dialog-title" data-cy="confirmation-dialog-title">{{ dialogParams.title }}</span>
-    <mat-icon class="dialog-action" mat-dialog-close="cancel">close</mat-icon>
-</mat-toolbar>
+<div class="mat-dialog-title">
+    <mat-toolbar class="dialog-toolbar" color="primary">
+        <span>{{ dialogParams.title }}</span>
+        <span class="toolbar-spacer"></span>
+        <button mat-icon-button mat-dialog-close="cancel">
+            <mat-icon>close</mat-icon>
+        </button>
+    </mat-toolbar>
+</div>
 
-<div class="dialog-container">
+<mat-dialog-content class="dialog-container">
     <div [innerHTML]="dialogParams.text"></div>
-</div>
+</mat-dialog-content>
 
-<div class="dialog-buttons">
+<mat-dialog-actions align="end">
     <button type="button" id="cancelbtn" mat-button mat-dialog-close="cancel" *ngIf="hasControl('CANCEL')" color="primary" data-cy="cancel">Annuler</button>
     <button type="button" mat-button mat-dialog-close="ignore" *ngIf="hasControl('IGNORE')" color="primary" data-cy="ignore">Ignorer</button>
     <button type="button" mat-stroked-button default mat-dialog-close="retry" *ngIf="hasControl('RETRY')" color="primary" data-cy="retry">Recommencer</button>
-    <button type="button" id="okbtn" mat-stroked-button mat-dialog-close="ok" *ngIf="hasControl('OK')" color="primary" data-cy="ok">Ok</button>
+    <button type="button" id="okbtn" mat-stroked-button mat-dialog-close="ok" *ngIf="hasControl('OK')" color="primary" data-cy="ok" cdkFocusInitial>Ok</button>
     <button type="button" mat-stroked-button mat-dialog-close="yes" *ngIf="hasControl('YES')" color="primary" data-cy="yes">Oui</button>
     <button type="button" mat-stroked-button mat-dialog-close="no" *ngIf="hasControl('NO')" color="primary" data-cy="no">Non</button>
     <button type="button" mat-stroked-button mat-dialog-close="continue" *ngIf="hasControl('CONTINUE')" color="primary" data-cy="continue">Continuer</button>
-</div>
+</mat-dialog-actions>
diff --git a/projects/message-box-dialog/src/message-box-dialog.component.scss b/projects/message-box-dialog/src/message-box-dialog.component.scss
@@ -7,4 +7,17 @@ ngx-message-box-dialog {
         max-height: 80vh;
         margin: 1rem 1rem 0.5rem 1rem;
     }
+    .dialog-toolbar {
+        > .toolbar-spacer {
+            flex: 1 1 auto;
+        }
+        > button {
+            > mat-icon.mat-icon {
+                font-size: 1rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
 }
diff --git a/projects/message-box-dialog/src/message-box-dialog.component.ts b/projects/message-box-dialog/src/message-box-dialog.component.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
 
 import { NgxMessageBoxDialogButtons, NgxMessageBoxDialogData } from './message-box-dialog.model';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
     selector: 'ngx-message-box-dialog',
@@ -11,9 +11,8 @@ import { NgxMessageBoxDialogButtons, NgxMessageBoxDialogData } from './message-b
     encapsulation: ViewEncapsulation.None
 })
 export class NgxMessageBoxDialogComponent {
-    public constructor(
-        @Inject(MAT_DIALOG_DATA) protected dialogParams: NgxMessageBoxDialogData
-    ) { }
+
+    protected dialogParams = inject<NgxMessageBoxDialogData>(MAT_DIALOG_DATA);
 
     protected hasControl(key: 'OK' | 'CANCEL' | 'IGNORE' | 'RETRY' | 'YES' | 'NO' | 'CONTINUE'): boolean {
         // eslint-disable-next-line no-bitwise

diff --git a/projects/message-box-dialog/src/message-box-dialog.module.ts b/projects/message-box-dialog/src/message-box-dialog.module.ts
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { NgxAbstractLazyModule } from '@hug/ngx-core';
 
 import { NgxMessageBoxDialogComponent } from './message-box-dialog.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
     declarations: [NgxMessageBoxDialogComponent],

diff --git a/projects/message-box-dialog/src/message-box-dialog.service.ts b/projects/message-box-dialog/src/message-box-dialog.service.ts
@@ -1,9 +1,9 @@
 import { Injectable, Type } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
 import { NgxAbstractLazyModule, NgxDialogService, NgxLazyLoaderService } from '@hug/ngx-core';
 import { Observable, take } from 'rxjs';
 
 import { NgxMessageBoxDialogButtons, NgxMessageBoxDialogData, NgxMessageBoxDialogResponse } from './message-box-dialog.model';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 
 @Injectable({
     providedIn: 'root'

diff --git a/projects/message-box/src/message-box.component.ts b/projects/message-box/src/message-box.component.ts
@@ -1,11 +1,11 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 
 import { NgxMessageBoxAction, NgxMessageBoxType } from './message-box.model';
-import { MatCardModule } from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,