From f1934abc2b259a6e89303e95fe70a54471d2401d Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Mon, 20 Jun 2022 15:36:18 +0300
Subject: [PATCH] RED-3721 - added possibility for details radio component to
 display options in row

---
 src/lib/inputs/details-radio/details-radio.component.html | 5 +++--
 src/lib/inputs/details-radio/details-radio.component.scss | 5 +++++
 src/lib/inputs/details-radio/details-radio.component.ts   | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/inputs/details-radio/details-radio.component.html b/src/lib/inputs/details-radio/details-radio.component.html
index 4f69ffb..7d05d18 100644
--- a/src/lib/inputs/details-radio/details-radio.component.html
+++ b/src/lib/inputs/details-radio/details-radio.component.html
@@ -1,9 +1,10 @@
-<div class="iqser-input-group">
+<div class="iqser-input-group" [class.row]="displayInRow">
     <div
         (click)="toggleOption(option)"
         *ngFor="let option of options"
         [class.active]="option.value === value?.value"
-        class="option mb-8 pointer"
+        class="option pointer"
+        [ngClass]="{'mb-8': !displayInRow, 'mr-8': displayInRow }"
     >
         <div class="flex-align-items-center mb-8">
             <iqser-round-checkbox [active]="option.value === value?.value" class="mr-6"></iqser-round-checkbox>
diff --git a/src/lib/inputs/details-radio/details-radio.component.scss b/src/lib/inputs/details-radio/details-radio.component.scss
index 181151c..b50616b 100644
--- a/src/lib/inputs/details-radio/details-radio.component.scss
+++ b/src/lib/inputs/details-radio/details-radio.component.scss
@@ -11,3 +11,8 @@ label {
         background-color: rgba(var(--iqser-primary-rgb), 0.1);
     }
 }
+
+.row {
+    display: flex;
+    flex-direction: row;
+}
diff --git a/src/lib/inputs/details-radio/details-radio.component.ts b/src/lib/inputs/details-radio/details-radio.component.ts
index f4c2a58..98501c9 100644
--- a/src/lib/inputs/details-radio/details-radio.component.ts
+++ b/src/lib/inputs/details-radio/details-radio.component.ts
@@ -23,6 +23,7 @@ import { FormFieldComponent } from '../form-field/form-field-component.directive
 })
 export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
     @Input() options: DetailsRadioOption<I>[] = [];
+    @Input() displayInRow?: boolean = false;
 
     toggleOption(option: DetailsRadioOption<I>): void {
         this.markAsTouched();