Skip to content
Snippets Groups Projects
Commit 342d6f44 authored by jojohoch's avatar jojohoch
Browse files

Replace Flex layout module with classes in RadioButtonGroupComponent

- Reformat styles
parent 1bdfcb9f
No related branches found
No related tags found
No related merge requests found
......@@ -20,7 +20,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[innerHTML]="elementModel.label | safeResourceHTML">
</label>
<mat-radio-group aria-labelledby="radio-group-label"
[fxLayout]="elementModel.alignment"
[class.fx-column-start-stretch]="elementModel.alignment === 'column'"
[class.fx-row-start-stretch]="elementModel.alignment === 'row'"
[formControl]="elementFormControl"
[value]="elementModel.value"
[style.margin-top.px]="elementModel.label !== '' ? 10 : 0">
......@@ -39,16 +40,46 @@ import { FormElementComponent } from '../../directives/form-element-component.di
</mat-radio-group>
</div>
`,
styles: [
':host ::ng-deep .mat-radio-label {white-space: normal;}',
':host ::ng-deep .mat-radio-label .mat-radio-label-content {padding-left: 10px;}',
'mat-radio-button {margin-bottom: 6px; margin-right: 15px;}',
'.error-message {font-size: 75%; line-height: 100%;}',
':host ::ng-deep .strike .mat-radio-label {text-decoration: line-through;}',
':host ::ng-deep .mat-radio-label {align-items: baseline;}',
':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-container {top: 4px;}',
'.radio-button-label {pointer-events: none;}'
]
styles: [`
:host ::ng-deep .mat-radio-label {
white-space: normal;
}
:host ::ng-deep .mat-radio-label .mat-radio-label-content {
padding-left: 10px;
}
mat-radio-button {
margin-bottom: 6px; margin-right: 15px;
}
.error-message {
font-size: 75%; line-height: 100%;
}
:host ::ng-deep .strike .mat-radio-label {
text-decoration: line-through;
}
:host ::ng-deep .mat-radio-label {
align-items: baseline;
}
:host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-container {
top: 4px;
}
.radio-button-label {
pointer-events: none;
}
.fx-row-start-stretch {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: start;
align-items: stretch;
}
.fx-column-start-stretch {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
}
`]
})
export class RadioButtonGroupComponent extends FormElementComponent {
@Input() elementModel!: RadioButtonGroupElement;
......
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