Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-3721 - added possibility for details radio component to display options in row

Browse Source
This commit is contained in:
Valentin Mihai 2022-06-20 15:36:18 +03:00
parent 47e1cac50a
commit f1934abc2b
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/inputs/details-radio/details-radio.component.html
View File

@ -1,9 +1,10 @@
<div class="iqser-input-group">
<div class="iqser-input-group" [class.row]="displayInRow">
<div
(click)="toggleOption(option)"
*ngFor="let option of options"
[class.active]="option.value === value?.value"
class="option mb-8 pointer"
class="option pointer"
[ngClass]="{'mb-8': !displayInRow, 'mr-8': displayInRow }"
>
<div class="flex-align-items-center mb-8">
<iqser-round-checkbox [active]="option.value === value?.value" class="mr-6"></iqser-round-checkbox>

5
src/lib/inputs/details-radio/details-radio.component.scss
View File

@ -11,3 +11,8 @@ label {
background-color: rgba(var(--iqser-primary-rgb), 0.1);
}
}
.row {
display: flex;
flex-direction: row;
}

1
src/lib/inputs/details-radio/details-radio.component.ts
View File

@ -23,6 +23,7 @@ import { FormFieldComponent } from '../form-field/form-field-component.directive
})
export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
@Input() options: DetailsRadioOption<I>[] = [];
@Input() displayInRow?: boolean = false;
toggleOption(option: DetailsRadioOption<I>): void {
this.markAsTouched();