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;