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 @@
-
-
+
+
{{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)"
>
-
-
+
+
+
+
{{option.name}}
+
{{option.description}}
+
-
{{option.name}}
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;
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;