-
Left
-
Middle
-
Right
+
+ Left
+ Middle
+ Right
+
+
+ Left
+ Middle
+ Right
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
index 81e3e57c5d..fe90963506 100644
--- a/demo/src/ng-api-doc.ts
+++ b/demo/src/ng-api-doc.ts
@@ -186,6 +186,16 @@ export const ngdoc: any = {
"properties": [],
"methods": []
},
+ "ButtonRadioGroupDirective": {
+ "fileName": "src/buttons/button-radio-group.directive.ts",
+ "className": "ButtonRadioGroupDirective",
+ "description": "
A group of radio buttons.\nA value of a selected button is bound to a variable specified via ngModel.
\n",
+ "selector": "[btnRadioGroup]",
+ "inputs": [],
+ "outputs": [],
+ "properties": [],
+ "methods": []
+ },
"ButtonRadioDirective": {
"fileName": "src/buttons/button-radio.directive.ts",
"className": "ButtonRadioDirective",
@@ -197,6 +207,11 @@ export const ngdoc: any = {
"type": "any",
"description": "
Radio button value, will be set to ngModel
\n"
},
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "description": "
If true — radio button is disabled
\n"
+ },
{
"name": "uncheckable",
"type": "boolean",
@@ -622,12 +637,6 @@ export const ngdoc: any = {
"type": "string",
"description": "
CSS class which will be applied to datepicker container,\nusually used to set color theme
\n"
},
- {
- "name": "locale",
- "defaultValue": "en",
- "type": "string",
- "description": "
Allows to globally set default locale of datepicker,\nsee documentation on how to enable custom locales
\n"
- },
{
"name": "maxDate",
"type": "Date",
@@ -760,6 +769,13 @@ export const ngdoc: any = {
}
]
},
+ "BsLocaleService": {
+ "fileName": "src/datepicker/bs-locale.service.ts",
+ "className": "BsLocaleService",
+ "description": "",
+ "methods": [],
+ "properties": []
+ },
"DatePickerInnerComponent": {
"fileName": "src/datepicker/datepicker-inner.component.ts",
"className": "DatePickerInnerComponent",
diff --git a/src/buttons/button-radio-group.directive.ts b/src/buttons/button-radio-group.directive.ts
new file mode 100644
index 0000000000..e980e8b52a
--- /dev/null
+++ b/src/buttons/button-radio-group.directive.ts
@@ -0,0 +1,46 @@
+// tslint:disable:no-use-before-declare
+import { ChangeDetectorRef, Directive, ElementRef, forwardRef, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => ButtonRadioGroupDirective),
+ multi: true
+};
+
+/**
+ * A group of radio buttons.
+ * A value of a selected button is bound to a variable specified via ngModel.
+ */
+@Directive({
+ selector: '[btnRadioGroup]',
+ providers: [RADIO_CONTROL_VALUE_ACCESSOR]
+})
+export class ButtonRadioGroupDirective implements ControlValueAccessor {
+ onChange: any = Function.prototype;
+ onTouched: any = Function.prototype;
+
+ get value(): any {
+ return this._value;
+ }
+ set value(value: any) {
+ this._value = value;
+ }
+
+ private _value: any;
+
+ constructor(private el: ElementRef, private cdr: ChangeDetectorRef) {}
+
+ writeValue(value: any): void {
+ this._value = value;
+ this.cdr.markForCheck();
+ }
+
+ registerOnChange(fn: any): void {
+ this.onChange = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+}
diff --git a/src/buttons/button-radio.directive.ts b/src/buttons/button-radio.directive.ts
index 45a86c7415..e3370ff848 100644
--- a/src/buttons/button-radio.directive.ts
+++ b/src/buttons/button-radio.directive.ts
@@ -1,9 +1,10 @@
// tslint:disable:no-use-before-declare
import {
- ChangeDetectorRef, Directive, ElementRef, forwardRef, HostBinding,
- HostListener, Input, OnInit
+ ChangeDetectorRef, Directive, ElementRef, forwardRef, HostBinding, HostListener, Input, OnInit,
+ Optional, Renderer2
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ButtonRadioGroupDirective } from './button-radio-group.directive';
export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
@@ -22,41 +23,56 @@ export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
onChange: any = Function.prototype;
onTouched: any = Function.prototype;
+ private _value: any;
+ private _disabled: boolean;
/** Radio button value, will be set to `ngModel` */
@Input() btnRadio: any;
/** If `true` — radio button can be unchecked */
@Input() uncheckable: boolean;
/** Current value of radio component or group */
- @Input() value: any;
+ @Input() get value(): any {
+ return this.group ? this.group.value : this._value;
+ }
+
+ set value(value: any) {
+ if (this.group) {
+ this.group.value = value;
+
+ return;
+ }
+ this._value = value;
+ }
+ /** If `true` — radio button is disabled */
+ @Input() get disabled(): boolean {
+ return this._disabled;
+ }
+
+ set disabled(disabled: boolean) {
+ this._disabled = disabled;
+ this.setDisabledState(disabled);
+ }
@HostBinding('class.active')
get isActive(): boolean {
return this.btnRadio === this.value;
}
- constructor(private el: ElementRef, private cdr: ChangeDetectorRef) {
- }
+ constructor(
+ private el: ElementRef,
+ private cdr: ChangeDetectorRef,
+ @Optional() private group: ButtonRadioGroupDirective,
+ private renderer: Renderer2
+ ) {}
@HostListener('click')
onClick(): void {
- if (this.el.nativeElement.attributes.disabled) {
- return;
- }
-
- if (this.uncheckable && this.btnRadio === this.value) {
- this.value = undefined;
- this.onTouched();
- this.onChange(this.value);
-
+ if (this.el.nativeElement.attributes.disabled || !this.uncheckable && this.btnRadio === this.value) {
return;
}
- if (this.btnRadio !== this.value) {
- this.value = this.btnRadio;
- this.onTouched();
- this.onChange(this.value);
- }
+ this.value = this.uncheckable && this.btnRadio === this.value ? undefined : this.btnRadio;
+ this._onChange(this.value);
}
ngOnInit(): void {
@@ -67,6 +83,17 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
this.onTouched();
}
+ _onChange(value: any): void {
+ if (this.group) {
+ this.group.onTouched();
+ this.group.onChange(value);
+
+ return;
+ }
+ this.onTouched();
+ this.onChange(value);
+ }
+
// ControlValueAccessor
// model -> view
writeValue(value: any): void {
@@ -81,4 +108,13 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
+
+ setDisabledState(disabled: boolean): void {
+ if (disabled) {
+ this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
+
+ return;
+ }
+ this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+ }
}
diff --git a/src/buttons/buttons.module.ts b/src/buttons/buttons.module.ts
index a99b14e4c2..9b2a17d0d3 100644
--- a/src/buttons/buttons.module.ts
+++ b/src/buttons/buttons.module.ts
@@ -2,10 +2,11 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
import { ButtonCheckboxDirective } from './button-checkbox.directive';
import { ButtonRadioDirective } from './button-radio.directive';
+import { ButtonRadioGroupDirective } from './button-radio-group.directive';
@NgModule({
- declarations: [ButtonCheckboxDirective, ButtonRadioDirective],
- exports: [ButtonCheckboxDirective, ButtonRadioDirective]
+ declarations: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective],
+ exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective]
})
export class ButtonsModule {
static forRoot(): ModuleWithProviders {
diff --git a/src/buttons/index.ts b/src/buttons/index.ts
index 44cabb64e6..3a59cf2eb7 100644
--- a/src/buttons/index.ts
+++ b/src/buttons/index.ts
@@ -1,3 +1,4 @@
export { ButtonCheckboxDirective } from './button-checkbox.directive';
+export { ButtonRadioGroupDirective } from './button-radio-group.directive';
export { ButtonRadioDirective } from './button-radio.directive';
export { ButtonsModule } from './buttons.module';