[player] User directive to disable slider when it is set to readonly

Using the html property "disabled" results in a warning message in the
player when reactive forms are used at the same time.

projects/common/components/input-elements/slider.component.ts

@@ -73,7 +73,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
            [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
            [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
         <mat-slider [class]="elementModel.barStyle ? 'bar-style' : ''"
-                    [disabled]="elementModel.readOnly"
+                    [isDisabled]="elementModel.readOnly"
                     [thumbLabel]="elementModel.thumbLabel"
                     [formControl]="elementFormControl"
                     [style.width.%]="100"

projects/common/directives/is-disabled.directive.ts

+import {
+  Directive, Input, OnChanges, SimpleChanges
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  selector: '[isDisabled]'
+})
+export class IsDisabledDirective implements OnChanges {
+  @Input() isDisabled!: boolean;
+
+  constructor(private ngControl : NgControl) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.isDisabled && this.ngControl) {
+      const action = changes.isDisabled.currentValue ? 'disable' : 'enable';
+      this.ngControl?.control?.[action]();
+    }
+  }
+}

projects/common/shared.module.ts

@@ -65,6 +65,7 @@ import { StyleMarksPipe } from './pipes/styleMarks.pipe';
 import { TextMarkingButtonComponent } from './components/text/text-marking-bar/text-marking-button.component';
 import { CompoundChildOverlayComponent } from './components/compound-elements/cloze/compound-child-overlay.component';
 import { MarkListPipe } from './pipes/mark-list.pipe';
+import { IsDisabledDirective } from './directives/is-disabled.directive';
 
 @NgModule({
   imports: [
@@ -120,7 +121,8 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
     StyleMarksPipe,
     TextMarkingButtonComponent,
     CompoundChildOverlayComponent,
-    MarkListPipe
+    MarkListPipe,
+    IsDisabledDirective
   ],
   exports: [
     CommonModule,