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 77c003399b1838a996dd92ff2fc54098a27d92f0..5da46782a085db4e9d5cb816704f50e55c89646d 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 @@ -5,9 +5,10 @@ import { FormElementComponent } from '../../form-element-component.directive'; @Component({ selector: 'app-radio-group-images', template: ` - <div class="mat-form-field" - [style.width.%]="100" + <div [style.width.%]="100" [style.height.%]="100" + [style.display]="'grid'" + [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)" [style.background-color]="elementModel.backgroundColor" [style.color]="elementModel.fontColor" [style.font-family]="elementModel.font" @@ -15,35 +16,43 @@ import { FormElementComponent } from '../../form-element-component.directive'; [style.font-weight]="elementModel.bold ? 'bold' : ''" [style.font-style]="elementModel.italic ? 'italic' : ''" [style.text-decoration]="elementModel.underline ? 'underline' : ''"> - <label id="radio-group-label" class="white-space-break" + <label id="radio-group-label" class="label" + [style.grid-column-start]="1" + [style.grid-column-end]="2 + elementModel.columns.length" + [style.grid-row-start]="1" + [style.grid-row-end]="2" [innerHTML]="elementModel.label"> </label> - <mat-radio-group aria-labelledby="radio-group-label" [formControl]="elementFormControl" - class="grid-layout" [style.display]="'grid'" - [value]="elementModel.value" - [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"> - <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"> - </label> + <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]="2" + [style.grid-row-end]="3" + (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> + <mat-radio-group aria-labelledby="radio-group-label" + [formControl]="elementFormControl" + [style.display]="'grid'" + [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)" + [style.grid-column-start]="1" + [style.grid-column-end]="2 + elementModel.columns.length" + [style.grid-row-start]="3" + [style.grid-row-end]="4" + [value]="elementModel.value"> <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" [style.grid-column-end]="2 + i" - [style.grid-row-start]="2" - [style.grid-row-end]="3"> + [style.grid-row-start]="1" + [style.grid-row-end]="2"> </mat-radio-button> </mat-radio-group> <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched" @@ -53,9 +62,9 @@ import { FormElementComponent } from '../../form-element-component.directive'; </div> `, styles: [ - '.grid-layout .columns {text-align: center; margin: 0 5px;}', - '.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)}', + '.columns {text-align: center; margin: 0 5px;}', + // '.grid-layout .columns img {height: 100%; object-fit: none; cursor: pointer;}', + '::ng-deep app-radio-group-images mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}', 'mat-radio-group {margin-top: 10px}', '.error-message { font-size: 75% }', '.grid-layout mat-radio-button {margin-top: 15px}'