Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { Component } from '@angular/core';
import { RadioGroupImagesElement } from '../../models/compound-elements/radio-group-images';
import { FormElementComponent } from '../../form-element-component.directive';
@Component({
selector: 'app-radio-group-images',
template: `
<div class="mat-form-field"
[style.width.%]="100"
[style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
[style.font-size.px]="elementModel.fontSize"
[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"
[innerHTML]="elementModel.label">
</label>
<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">
<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-button *ngFor="let option of elementModel.columns; let i = index"
[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">
</mat-radio-button>
</mat-radio-group>
</div>
`,
styles: [
'.grid-layout .columns {text-align: center;}',
'.grid-layout .columns img {height: 100%; object-fit: none;}',
'::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}'
]
})
export class RadioGroupImagesComponent extends FormElementComponent {
elementModel!: RadioGroupImagesElement;
}