diff --git a/projects/common/element-components/compound-elements/radio-group-images.component.ts b/projects/common/element-components/compound-elements/radio-group-images.component.ts index 6ace0ae4cc5afc730e8def394bc9d92a57f19935..671c00ac501aab612b2568751df9d291d3783257 100644 --- a/projects/common/element-components/compound-elements/radio-group-images.component.ts +++ b/projects/common/element-components/compound-elements/radio-group-images.component.ts @@ -21,19 +21,22 @@ import { FormElementComponent } from '../../form-element-component.directive'; <mat-radio-group aria-labelledby="radio-group-label" [formControl]="elementFormControl" class="grid-layout" [style.display]="'grid'" [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"> - <div *ngFor="let option of elementModel.columns; let i = index" class="columns" - fxLayout="column" - [style.grid-column-start]="1 + i" - [style.grid-column-end]="2 + i" - [style.grid-row-start]="1" - [style.grid-row-end]="2"> + <label *ngFor="let option of elementModel.columns; let i = index" class="columns" + id="radio-group-label" + fxLayout="column" + [style.grid-column-start]="1 + i" + [style.grid-column-end]="2 + i" + [style.grid-row-start]="1" + [style.grid-row-end]="2" + (click)="selectOption(i)"> <img *ngIf="option.imgSrc && option.position === 'above'" [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder"> <div>{{option.text}}</div> <img *ngIf="option.imgSrc && option.position === 'below'" [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder"> - </div> + </label> <mat-radio-button *ngFor="let option of elementModel.columns; let i = index" + aria-labelledby="radio-group-label" [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'" [value]="i" [style.grid-column-start]="1 + i" @@ -46,7 +49,7 @@ import { FormElementComponent } from '../../form-element-component.directive'; `, styles: [ '.grid-layout .columns {text-align: center;}', - '.grid-layout .columns img {height: 100%; object-fit: none;}', + '.grid-layout .columns img {height: 100%; object-fit: none; cursor: pointer;}', '::ng-deep app-radio-group-images .grid-layout mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}', 'mat-radio-group {margin-top: 10px}', '.grid-layout mat-radio-button {margin-top: 15px}' @@ -54,4 +57,8 @@ import { FormElementComponent } from '../../form-element-component.directive'; }) export class RadioGroupImagesComponent extends FormElementComponent { elementModel!: RadioGroupImagesElement; + + selectOption(index: number): void { + this.elementFormControl.setValue(index); + } }