RED-5875: Material upgrade - slider

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html

@@ -56,26 +56,26 @@
             <div class="flex">
                 <div class="alignment-buttons">
                     <div
-                        *ngFor="let alignment of watermarkHorizontalAlignments"
-                        class="alignment"
-                        [class.active]="currentAlignment.horizontal === alignment"
-                        [ngClass]="'horizontal-' + alignment.toLowerCase()"
-                        [matTooltip]="translations.HORIZONTAL[alignment] | translate"
-                        [matTooltipPosition]="'above'"
                         (click)="alignHorizontally(alignment)"
+                        *ngFor="let alignment of watermarkHorizontalAlignments"
+                        [class.active]="currentAlignment.horizontal === alignment"
+                        [matTooltipPosition]="'above'"
+                        [matTooltip]="translations.HORIZONTAL[alignment] | translate"
+                        [ngClass]="'horizontal-' + alignment.toLowerCase()"
+                        class="alignment"
                     >
                         <mat-icon [svgIcon]="'red:align-horizontal-' + alignment.toLowerCase()"></mat-icon>
                     </div>
                 </div>
                 <div class="alignment-buttons">
                     <div
-                        *ngFor="let alignment of watermarkVerticalAlignments"
-                        class="alignment"
-                        [class.active]="currentAlignment.vertical === alignment"
-                        [ngClass]="'vertical-' + alignment.toLowerCase()"
-                        [matTooltip]="translations.VERTICAL[alignment] | translate"
-                        [matTooltipPosition]="'above'"
                         (click)="alignVertically(alignment)"
+                        *ngFor="let alignment of watermarkVerticalAlignments"
+                        [class.active]="currentAlignment.vertical === alignment"
+                        [matTooltipPosition]="'above'"
+                        [matTooltip]="translations.VERTICAL[alignment] | translate"
+                        [ngClass]="'vertical-' + alignment.toLowerCase()"
+                        class="alignment"
                     >
                         <mat-icon [svgIcon]="'red:align-vertical-' + alignment.toLowerCase()"></mat-icon>
                     </div>
@@ -83,14 +83,18 @@
             </div>
         </div>
 
-        <div class="iqser-input-group">
+        <div class="iqser-input-group w-150">
             <label [translate]="'watermark-screen.form.font-size'" class="all-caps-label"></label>
-            <mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
+            <mat-slider (change)="configChanged()" color="primary" max="50" min="5">
+                <input formControlName="fontSize" matSliderThumb />
+            </mat-slider>
         </div>
 
-        <div class="iqser-input-group">
+        <div class="iqser-input-group w-150">
             <label [translate]="'watermark-screen.form.opacity'" class="all-caps-label"></label>
-            <mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
+            <mat-slider (change)="configChanged()" color="primary" min="1">
+                <input formControlName="opacity" matSliderThumb />
+            </mat-slider>
         </div>
 
         <div class="iqser-input-group w-150">

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts

@@ -84,15 +84,15 @@ export class WatermarkScreenComponent implements OnInit {
     readonly orientationOptions = ['DIAGONAL', 'HORIZONTAL', 'VERTICAL'];
     instance: WebViewerInstance;
     readonly loaded$: Observable<boolean>;
+    readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS);
+    readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS);
+    currentAlignment: WatermarkAlignment;
     @ViewChild('viewer', { static: true }) private readonly _viewer: ElementRef<HTMLDivElement>;
     private readonly _convertPath = inject(BASE_HREF_FN);
     readonly #loaded$ = new BehaviorSubject(false);
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly #watermarkId = Number(getParam(WATERMARK_ID));
     #watermark: Partial<IWatermark> = {};
-    readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS);
-    readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS);
-    currentAlignment: WatermarkAlignment;
 
     constructor(
         private readonly _http: HttpClient,

apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts

@@ -23,7 +23,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { PaginatorComponent } from './paginator/paginator.component';
 import { MatIconModule } from '@angular/material/icon';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacySliderModule } from '@angular/material/legacy-slider';
+import { MatSliderModule } from '@angular/material/slider';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -67,7 +67,7 @@ const routes: IqserRoutes = [
         MatIconModule,
         IconButtonComponent,
         ReactiveFormsModule,
-        MatLegacySliderModule,
+        MatSliderModule,
         ColorPickerModule,
         MatLegacySlideToggleModule,
         CircleButtonComponent,

apps/red-ui/src/app/modules/mat-config/mat-config.module.ts

@@ -3,7 +3,6 @@ import { MatNativeDateModule } from '@angular/material/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -24,7 +23,6 @@ const matImports = [
     MatToolbarModule,
     MatButtonModule,
     MatSlideToggleModule,
-    MatSliderModule,
     MatMenuModule,
     MatTooltipModule,
     MatButtonToggleModule,

libs/common-ui

@@ -1 +1 @@
-Subproject commit e884d8a513c8dd2df3564b3021bfa0d46bfe74d1
+Subproject commit 2ec18cc91db5548d086e0fc59a3351f6d373d5a3