Skip to content
Snippets Groups Projects
Commit 4eb7b469 authored by rhenck's avatar rhenck
Browse files

Add 'strikeOtherOptions' to radio button groups

This makes it so that other options appear with strikethrough when one 
is selected.
parent 124c885e
No related branches found
No related tags found
No related merge requests found
...@@ -25,6 +25,7 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element'; ...@@ -25,6 +25,7 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
[fxLayout]="elementModel.alignment" [fxLayout]="elementModel.alignment"
[formControl]="elementFormControl"> [formControl]="elementFormControl">
<mat-radio-button *ngFor="let option of elementModel.options; let i = index" <mat-radio-button *ngFor="let option of elementModel.options; let i = index"
[ngClass]="{ 'strike' : elementModel.strikeOtherOptions && elementModel.value !== i }"
[value]="i" [value]="i"
[style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'" [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
[style.line-height.%]="elementModel.lineHeight"> [style.line-height.%]="elementModel.lineHeight">
...@@ -43,7 +44,8 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element'; ...@@ -43,7 +44,8 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
'::ng-deep app-radio-button-group mat-radio-button {margin-bottom: 6px}', '::ng-deep app-radio-button-group mat-radio-button {margin-bottom: 6px}',
'::ng-deep app-radio-button-group mat-radio-button {margin-right: 15px}', '::ng-deep app-radio-button-group mat-radio-button {margin-right: 15px}',
'.white-space-break {white-space: normal}', '.white-space-break {white-space: normal}',
'.error-message { position: absolute; margin-top: 25px; font-size: 75% }' '.error-message { position: absolute; margin-top: 25px; font-size: 75% }',
'::ng-deep app-radio-button-group .strike .mat-radio-label {text-decoration: line-through}'
] ]
}) })
export class RadioButtonGroupComponent extends FormElementComponent { export class RadioButtonGroupComponent extends FormElementComponent {
......
...@@ -5,6 +5,7 @@ import { initFontElement, initSurfaceElement } from '../util/unit-interface-init ...@@ -5,6 +5,7 @@ import { initFontElement, initSurfaceElement } from '../util/unit-interface-init
export class RadioButtonGroupElement extends InputElement implements FontElement, SurfaceUIElement { export class RadioButtonGroupElement extends InputElement implements FontElement, SurfaceUIElement {
options: string[] = []; options: string[] = [];
alignment: 'row' | 'column' = 'column'; alignment: 'row' | 'column' = 'column';
strikeOtherOptions: boolean = false;
fontColor: string = 'black'; fontColor: string = 'black';
font: string = 'Roboto'; font: string = 'Roboto';
......
...@@ -48,6 +48,12 @@ ...@@ -48,6 +48,12 @@
Unterstreichung erlauben Unterstreichung erlauben
</mat-checkbox> </mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.strikeOtherOptions !== undefined"
[checked]="$any(combinedProperties.strikeOtherOptions)"
(change)="updateModel('strikeOtherOptions', $event.checked)">
Andere Optionen durchstreichen
</mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.allowUnset !== undefined" <mat-checkbox *ngIf="combinedProperties.allowUnset !== undefined"
[checked]="$any(combinedProperties.allowUnset)" [checked]="$any(combinedProperties.allowUnset)"
(change)="updateModel('allowUnset', $event.checked)"> (change)="updateModel('allowUnset', $event.checked)">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment