From 45622e7fd65f0e9115c5317774d1aefc2ab21090 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan.percic.ext@knecon.com>
Date: Wed, 30 Aug 2023 09:59:56 +0300
Subject: [PATCH] update color for disabled options

---
 .../details-radio.component.scss              |  1 +
 .../details-radio/details-radio.component.ts  | 25 ++++++++-----------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/lib/inputs/details-radio/details-radio.component.scss b/src/lib/inputs/details-radio/details-radio.component.scss
index 81a88b4..f9945fb 100644
--- a/src/lib/inputs/details-radio/details-radio.component.scss
+++ b/src/lib/inputs/details-radio/details-radio.component.scss
@@ -12,6 +12,7 @@ label {
     }
 
     &.disabled {
+        color: var(--iqser-grey-3);
         cursor: not-allowed;
 
         .icon-option {
diff --git a/src/lib/inputs/details-radio/details-radio.component.ts b/src/lib/inputs/details-radio/details-radio.component.ts
index 12dc9f7..adff6b6 100644
--- a/src/lib/inputs/details-radio/details-radio.component.ts
+++ b/src/lib/inputs/details-radio/details-radio.component.ts
@@ -1,17 +1,17 @@
-import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
-import { DetailsRadioOption } from './details-radio-option';
-import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { FormFieldComponent } from '../form-field/form-field-component.directive';
 import { NgClass, NgForOf, NgIf } from '@angular/common';
-import { RoundCheckboxComponent } from '../round-checkbox/round-checkbox.component';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
+import { booleanAttribute, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 import { ReplaceNbspPipe } from '../../pipes/replace-nbsp.pipe';
+import { FormFieldComponent } from '../form-field/form-field-component.directive';
+import { RoundCheckboxComponent } from '../round-checkbox/round-checkbox.component';
+import { DetailsRadioOption } from './details-radio-option';
 
 @Component({
-    selector: 'iqser-details-radio [options]',
+    selector: 'iqser-details-radio',
     templateUrl: './details-radio.component.html',
     styleUrls: ['./details-radio.component.scss'],
     standalone: true,
@@ -42,15 +42,10 @@ import { ReplaceNbspPipe } from '../../pipes/replace-nbsp.pipe';
     ],
 })
 export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
-    @Input() options: DetailsRadioOption<I>[] = [];
-    @Input() displayInRow = false;
+    @Input({ required: true }) options: DetailsRadioOption<I>[] = [];
+    @Input({ transform: booleanAttribute }) displayInRow = false;
 
     @Output() readonly extraOptionChanged: EventEmitter<DetailsRadioOption<I>> = new EventEmitter();
-    readonly #translateService = inject(TranslateService);
-
-    constructor() {
-        super();
-    }
 
     toggleOption(option: DetailsRadioOption<I>): void {
         if (option.value !== this._value?.value && !option.disabled) {