RED-7155 - updated details radio component to can disable a specific option if it's needed

src/assets/styles/common-dialogs.scss

@@ -37,6 +37,18 @@
         flex-direction: column;
         flex: 1;
         padding: 24px 32px 40px;
+
+
+        &.redaction {
+            .selected-text {
+                font-weight: bold;
+                padding-bottom: 8px;
+            }
+
+            iqser-details-radio {
+                padding-top: 20px;
+            }
+        }
     }
 
     .dialog-actions {

src/lib/inputs/details-radio/details-radio-option.ts

@@ -12,5 +12,7 @@ export interface DetailsRadioOption<I> {
     descriptionParams?: Record<string, string>;
     icon?: string;
     value: I;
+    disabled?: boolean;
+    tooltip?: string;
     extraOption?: ExtraOption;
 }

src/lib/inputs/details-radio/details-radio.component.html

@@ -3,6 +3,9 @@
         (click)="toggleOption(option)"
         *ngFor="let option of options"
         [class.active]="option.value === value?.value"
+        [class.disabled]="option.disabled"
+        [matTooltip]="option.tooltip || '' | translate"
+        [matTooltipPosition]="'above'"
         [id]="groupId(option)"
         [ngClass]="{ 'mb-8': !displayInRow, 'mr-8': displayInRow }"
         class="option pointer"

src/lib/inputs/details-radio/details-radio.component.scss

@@ -11,6 +11,14 @@ label {
         background-color: rgba(var(--iqser-primary-rgb), 0.1);
     }
 
+    &.disabled {
+        cursor: not-allowed;
+
+        .icon-option {
+            pointer-events: none;
+        }
+    }
+
     .icon-option {
         display: flex;
         gap: 20px;

src/lib/inputs/details-radio/details-radio.component.ts

@@ -7,6 +7,7 @@ import { RoundCheckboxComponent } from '../round-checkbox/round-checkbox.compone
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'iqser-details-radio [options]',
@@ -35,6 +36,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
         FormsModule,
         MatCheckboxModule,
         ReactiveFormsModule,
+        MatTooltipModule,
     ],
 })
 export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> implements OnInit {
@@ -52,7 +54,7 @@ export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOpt
     }
 
     toggleOption(option: DetailsRadioOption<I>): void {
-        if (option.value !== this._value?.value) {
+        if (option.value !== this._value?.value && !option.disabled) {
             this.markAsTouched();
             const currentlyChecked = this.value?.value === option.value;
             this._value = currentlyChecked ? undefined : option;