From a3e28a07254e440e4882df331c227fe5d7a4ed35 Mon Sep 17 00:00:00 2001
From: Wouter Willems <wouter@klippa.com>
Date: Tue, 19 Mar 2024 11:25:39 +0100
Subject: [PATCH] add descriptions for radio buttons

---
 projects/demo/src/app/demo/demo.component.html  |  4 ++--
 projects/demo/src/app/demo/demo.component.ts    |  1 +
 projects/klippa/ngx-enhancy-forms/package.json  |  2 +-
 .../src/lib/elements/radio/radio.component.html | 11 ++++++++---
 .../src/lib/elements/radio/radio.component.scss | 17 +++++++++++++++--
 .../src/lib/elements/radio/radio.component.ts   |  1 +
 .../form-element/form-element.component.html    |  1 +
 .../form-element/form-element.component.scss    |  3 +++
 .../form/form-element/form-element.component.ts |  1 +
 9 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
index 6aea575..7daf431 100644
--- a/projects/demo/src/app/demo/demo.component.html
+++ b/projects/demo/src/app/demo/demo.component.html
@@ -61,8 +61,8 @@
 		</div>
 	</div>
 	<div>
-		<klp-form-element caption="radioButtons" spaceDistribution="34-66">
-			<klp-form-radio formControlName="radioOption" [options]="radioOptions">
+		<klp-form-element caption="radioButtons" spaceDistribution="34-66" verticalAlignment="top">
+			<klp-form-radio formControlName="radioOption" [options]="radioOptions" orientation="column">
 			</klp-form-radio>
 		</klp-form-element>
 		{{myForm.get('emails').value}}
diff --git a/projects/demo/src/app/demo/demo.component.ts b/projects/demo/src/app/demo/demo.component.ts
index 4f999e0..8451436 100644
--- a/projects/demo/src/app/demo/demo.component.ts
+++ b/projects/demo/src/app/demo/demo.component.ts
@@ -154,6 +154,7 @@ export class DemoComponent {
 		{
 			id: '1',
 			name: '1st option',
+			description: 'look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!'
 		},
 		{
 			id: '21',
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
index a00f638..16189ef 100644
--- a/projects/klippa/ngx-enhancy-forms/package.json
+++ b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.17.5",
+  "version": "14.17.6",
   "publishConfig": {
     "access": "public"
   },
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.html b/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.html
index 551ce4c..5d3e8f9 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.html
+++ b/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.html
@@ -4,10 +4,15 @@
 			[ngClass]="{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}"
 			(click)="setInnerValueAndNotify(option.id)"
 		>
-			<div class="selectedRadioBtnContainer" *ngIf="variant === 'classic'">
-				<div class="selected" *ngIf="innerValue === option.id"></div>
+			<div class="radioAndName">
+				<div class="selectedRadioBtnContainer" *ngIf="variant === 'classic'">
+					<div class="selected" *ngIf="innerValue === option.id"></div>
+				</div>
+				<div class="nameAndDescription">
+					<div>{{option.name}}</div>
+					<div class="description" *ngIf="option.description">{{option.description}}</div>
+				</div>
 			</div>
-			<div>{{option.name}}</div>
 		</button>
 	</ng-container>
 </div>
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.scss
index 650e45c..3222c85 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.scss
+++ b/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.scss
@@ -33,8 +33,6 @@
 }
 
 .optionContainer {
-	display: flex;
-	flex-direction: row;
 	margin-right: $spacing-tiny;
 	background: transparent;
 	border: none;
@@ -43,6 +41,7 @@
 	&.classic {
 		cursor: pointer;
 		.selectedRadioBtnContainer {
+			flex: 0 0 auto;
 			position: relative;
 			height: 20px;
 			width: 20px;
@@ -77,3 +76,17 @@
 		}
 	}
 }
+
+.radioAndName {
+	display: flex;
+	flex-direction: row;
+	gap: 0.2rem;
+}
+.nameAndDescription {
+	text-align: left;
+	line-height: 1.1rem;
+}
+.description {
+	margin-top: 0.2rem;
+	opacity: 0.6;
+}
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.ts
index 6f0896c..25561db 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.ts
+++ b/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.ts
@@ -10,6 +10,7 @@ export type RadioOptions = Array<RadioOption>;
 export type RadioOption = {
 	id: any;
 	name: string;
+	description?: string;
 };
 
 
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html
index 3228325..19e1432 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html
+++ b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html
@@ -4,6 +4,7 @@
 		hasCaption: caption || captionRef,
 		vertical: direction === 'vertical',
 		horizontal: direction === 'horizontal',
+		topAlignment: verticalAlignment === 'top',
 		reverseOrder: swapInputAndCaption,
 		hasErrors: getErrorToShow() && attachedControl.touched,
 		percentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss
index a4dd45f..e3fb481 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss
+++ b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss
@@ -28,6 +28,9 @@
 			margin-left: 0;
 		}
 	}
+	&.topAlignment .captionInputAndError {
+		align-items: flex-start;
+	}
 
 	&.d40-60 {
 		.errorAboveInputContainer {
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts
index fa166b0..6eec28e 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts
+++ b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts
@@ -42,6 +42,7 @@ export class FormElementComponent implements AfterViewInit {
 	@Input() public caption: string;
 	@Input() public direction: 'horizontal' | 'vertical' = 'horizontal';
 	@Input() public captionSpacing: 'percentages' | 'none' = 'percentages';
+	@Input() public verticalAlignment: 'center' | 'top' = 'center';
 	@Input() public spaceDistribution: '40-60' | '34-66' | '30-70' | 'fixedInputWidth' = '40-60';
 	@Input() public swapInputAndCaption = false;
 	@Input() public errorMessageAsTooltip = false;