feat: adding options alignment in Radio Group (#918)

* feat: adding options alignment in Radio Group

* feat: changing radio group default

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/radio/radio-group.component.scss

@@ -8,6 +8,16 @@
 }
 
 .radio-group {
+  display: flex;
+
+  &.row {
+    flex-direction: row;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
   ::ng-deep .radio-button {
     line-height: 18px;
     padding-right: 10px;

projects/components/src/radio/radio-group.component.ts

@@ -11,6 +11,7 @@ import { RadioOption } from './radio-option';
     <ht-label class="title" [label]="this.title"></ht-label>
     <mat-radio-group
       class="radio-group"
+      [ngClass]="this.optionsDirection"
       [ngModel]="this.selected!.value"
       (change)="this.onRadioChange($event)"
       [disabled]="this.disabled"
@@ -39,6 +40,9 @@ export class RadioGroupComponent implements OnInit {
   @Input()
   public disabled: boolean | undefined;
 
+  @Input()
+  public optionsDirection: OptionsDirection = OptionsDirection.Column;
+
   @Output()
   public readonly selectedChange: EventEmitter<string> = new EventEmitter();
 
@@ -63,3 +67,8 @@ export class RadioGroupComponent implements OnInit {
     this.selectedChange.emit(event.value);
   }
 }
+
+export const enum OptionsDirection {
+  Row = 'row',
+  Column = 'column'
+}