Skip to content

Commit 2b58849

Browse files
committed
feat(form-check): add reverse prop
1 parent a9e7047 commit 2b58849

File tree

1 file changed

+27
-3
lines changed

1 file changed

+27
-3
lines changed

projects/coreui-angular/src/lib/form/form-check/form-check.component.ts

+27-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { FormCheckLabelDirective } from './form-check-label.directive';
1212
export class FormCheckComponent implements AfterContentInit {
1313

1414
static ngAcceptInputType_inline: BooleanInput;
15+
static ngAcceptInputType_reverse: BooleanInput;
1516
static ngAcceptInputType_switch: BooleanInput;
1617

17-
private _inline = false;
1818
/**
1919
* Group checkboxes or radios on the same horizontal row.
2020
* @type boolean
@@ -24,17 +24,37 @@ export class FormCheckComponent implements AfterContentInit {
2424
set inline(value: boolean) {
2525
this._inline = coerceBooleanProperty(value);
2626
}
27+
2728
get inline(): boolean {
2829
return this._inline;
2930
}
3031

32+
private _inline = false;
33+
34+
/**
35+
* Put checkboxes or radios on the opposite side.
36+
* @type boolean
37+
* @default false
38+
* @since 4.4.7
39+
*/
40+
@Input()
41+
set reverse(value: boolean) {
42+
this._reverse = coerceBooleanProperty(value);
43+
}
44+
45+
get reverse(): boolean {
46+
return this._reverse;
47+
}
48+
49+
private _reverse: boolean = false;
50+
3151
/**
3252
* Size the component large or extra large. Works only with `[switch]="true"` [docs]
3353
* @type {'lg' | 'xl' | ''}
3454
*/
3555
@Input() sizing?: 'lg' | 'xl' | '' = '';
3656

37-
/**
57+
/**
3858
* Render a toggle switch on for checkbox.
3959
* @type boolean
4060
* @default false
@@ -43,9 +63,11 @@ export class FormCheckComponent implements AfterContentInit {
4363
set switch(value: boolean) {
4464
this._switch = coerceBooleanProperty(value);
4565
}
66+
4667
get switch(): boolean {
4768
return this._switch;
4869
}
70+
4971
private _switch = false;
5072

5173
@HostBinding('class')
@@ -55,11 +77,13 @@ export class FormCheckComponent implements AfterContentInit {
5577
'form-check': this.formCheckClass,
5678
'form-switch': this.switch,
5779
[`form-switch-${this.sizing}`]: this.switch && !!this.sizing,
58-
'form-check-inline': this.inline
80+
'form-check-inline': this.inline,
81+
'form-check-reverse': this.reverse
5982
};
6083
}
6184

6285
@ContentChild(FormCheckLabelDirective) formCheckLabel!: FormCheckLabelDirective;
86+
6387
private _formCheckClass = true;
6488
get formCheckClass() {
6589
return this._formCheckClass;

0 commit comments

Comments
 (0)