ngx-bootstrap
Version:
Angular Bootstrap
389 lines (382 loc) • 12.5 kB
JavaScript
import { forwardRef, Directive, Input, HostBinding, HostListener, ElementRef, ChangeDetectorRef, Renderer2, Optional, Inject, ContentChildren, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
// TODO: config: activeClass - Class to apply to the checked buttons
const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ButtonCheckboxDirective),
multi: true
};
/**
* Add checkbox functionality to any element
*/
class ButtonCheckboxDirective {
constructor() {
/** Truthy value, will be set to ngModel */
this.btnCheckboxTrue = true;
/** Falsy value, will be set to ngModel */
this.btnCheckboxFalse = false;
this.state = false;
this.isDisabled = false;
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
}
// view -> model
onClick() {
if (this.isDisabled) {
return;
}
this.toggle(!this.state);
this.onChange(this.value);
}
ngOnInit() {
this.toggle(this.trueValue === this.value);
}
get trueValue() {
return typeof this.btnCheckboxTrue !== 'undefined'
? this.btnCheckboxTrue
: true;
}
get falseValue() {
return typeof this.btnCheckboxFalse !== 'undefined'
? this.btnCheckboxFalse
: false;
}
toggle(state) {
this.state = state;
this.value = this.state ? this.trueValue : this.falseValue;
}
// ControlValueAccessor
// model -> view
writeValue(value) {
this.state = this.trueValue === value;
this.value = value ? this.trueValue : this.falseValue;
}
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
}
ButtonCheckboxDirective.decorators = [
{ type: Directive, args: [{
selector: '[btnCheckbox]',
providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR]
},] }
];
ButtonCheckboxDirective.propDecorators = {
btnCheckboxTrue: [{ type: Input }],
btnCheckboxFalse: [{ type: Input }],
state: [{ type: HostBinding, args: ['class.active',] }, { type: HostBinding, args: ['attr.aria-pressed',] }],
onClick: [{ type: HostListener, args: ['click',] }]
};
const RADIO_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ButtonRadioDirective),
multi: true
};
/**
* Create radio buttons or groups of buttons.
* A value of a selected button is bound to a variable specified via ngModel.
*/
class ButtonRadioDirective {
constructor(el, cdr, renderer, group) {
this.el = el;
this.cdr = cdr;
this.renderer = renderer;
this.group = group;
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
/** If `true` — radio button can be unchecked */
this.uncheckable = false;
this.role = 'radio';
this._disabled = false;
this._hasFocus = false;
}
/** Current value of radio component or group */
get value() {
return this.group ? this.group.value : this._value;
}
set value(value) {
if (this.group) {
this.group.value = value;
return;
}
this._value = value;
this._onChange(value);
}
/** If `true` — radio button is disabled */
get disabled() {
return this._disabled;
}
set disabled(disabled) {
this.setDisabledState(disabled);
}
get controlOrGroupDisabled() {
return this.disabled || (this.group && this.group.disabled) ? true : undefined;
}
get hasDisabledClass() {
// Although the radio is disabled the active radio should still stand out.
// The disabled class will prevent this so don't add it on the active radio
return this.controlOrGroupDisabled && !this.isActive;
}
get isActive() {
return this.btnRadio === this.value;
}
get tabindex() {
if (this.controlOrGroupDisabled) {
// Disabled radio buttons should not receive focus
return undefined;
}
else if (this.isActive || this.group == null) {
return 0;
}
else {
return -1;
}
}
get hasFocus() {
return this._hasFocus;
}
toggleIfAllowed() {
if (!this.canToggle()) {
return;
}
if (this.uncheckable && this.btnRadio === this.value) {
this.value = undefined;
}
else {
this.value = this.btnRadio;
}
}
onSpacePressed(event) {
this.toggleIfAllowed();
event.preventDefault();
}
focus() {
this.el.nativeElement.focus();
}
onFocus() {
this._hasFocus = true;
}
onBlur() {
this._hasFocus = false;
this.onTouched();
}
canToggle() {
return !this.controlOrGroupDisabled && (this.uncheckable || this.btnRadio !== this.value);
}
ngOnChanges(changes) {
if ('uncheckable' in changes) {
this.uncheckable = this.uncheckable !== false && typeof this.uncheckable !== 'undefined';
}
}
_onChange(value) {
if (this.group) {
this.group.value = value;
return;
}
this.onTouched();
this.onChange(value);
}
// ControlValueAccessor
// model -> view
writeValue(value) {
this.value = value;
this.cdr.markForCheck();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(disabled) {
this._disabled = disabled;
if (disabled) {
this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
return;
}
this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
}
}
ButtonRadioDirective.decorators = [
{ type: Directive, args: [{
selector: '[btnRadio]',
providers: [RADIO_CONTROL_VALUE_ACCESSOR]
},] }
];
ButtonRadioDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: Renderer2 },
{ type: ButtonRadioGroupDirective, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => ButtonRadioGroupDirective),] }] }
];
ButtonRadioDirective.propDecorators = {
btnRadio: [{ type: Input }],
uncheckable: [{ type: Input }],
value: [{ type: Input }],
disabled: [{ type: Input }],
controlOrGroupDisabled: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
hasDisabledClass: [{ type: HostBinding, args: ['class.disabled',] }],
isActive: [{ type: HostBinding, args: ['class.active',] }, { type: HostBinding, args: ['attr.aria-checked',] }],
role: [{ type: HostBinding, args: ['attr.role',] }],
tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }],
toggleIfAllowed: [{ type: HostListener, args: ['click',] }],
onSpacePressed: [{ type: HostListener, args: ['keydown.space', ['$event'],] }],
onFocus: [{ type: HostListener, args: ['focus',] }],
onBlur: [{ type: HostListener, args: ['blur',] }]
};
const RADIO_CONTROL_VALUE_ACCESSOR$1 = {
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.
*/
class ButtonRadioGroupDirective {
constructor(cdr) {
this.cdr = cdr;
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
this.role = 'radiogroup';
this._disabled = false;
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.onChange(value);
}
get disabled() {
return this._disabled;
}
get tabindex() {
if (this._disabled) {
return null;
}
else {
return 0;
}
}
writeValue(value) {
this._value = value;
this.cdr.markForCheck();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(disabled) {
if (this.radioButtons) {
this._disabled = disabled;
this.radioButtons.forEach(buttons => {
buttons.setDisabledState(disabled);
});
this.cdr.markForCheck();
}
}
onFocus() {
if (this._disabled) {
return;
}
const activeRadio = this.getActiveOrFocusedRadio();
if (activeRadio) {
activeRadio.focus();
return;
}
if (this.radioButtons) {
const firstEnabled = this.radioButtons.find(r => !r.disabled);
if (firstEnabled) {
firstEnabled.focus();
}
}
}
onBlur() {
if (this.onTouched) {
this.onTouched();
}
}
selectNext(event) {
this.selectInDirection('next');
event.preventDefault();
}
selectPrevious(event) {
this.selectInDirection('previous');
event.preventDefault();
}
selectInDirection(direction) {
if (this._disabled) {
return;
}
function nextIndex(currentIndex, buttonRadioDirectives) {
const step = direction === 'next' ? 1 : -1;
let calcIndex = (currentIndex + step) % buttonRadioDirectives.length;
if (calcIndex < 0) {
calcIndex = buttonRadioDirectives.length - 1;
}
return calcIndex;
}
const activeRadio = this.getActiveOrFocusedRadio();
if (activeRadio && this.radioButtons) {
const buttonRadioDirectives = this.radioButtons.toArray();
const currentActiveIndex = buttonRadioDirectives.indexOf(activeRadio);
for (let i = nextIndex(currentActiveIndex, buttonRadioDirectives); i !== currentActiveIndex; i = nextIndex(i, buttonRadioDirectives)) {
if (buttonRadioDirectives[i].canToggle()) {
buttonRadioDirectives[i].toggleIfAllowed();
buttonRadioDirectives[i].focus();
break;
}
}
}
}
getActiveOrFocusedRadio() {
if (!this.radioButtons) {
return void 0;
}
return this.radioButtons.find(button => button.isActive)
|| this.radioButtons.find(button => button.hasFocus);
}
}
ButtonRadioGroupDirective.decorators = [
{ type: Directive, args: [{
selector: '[btnRadioGroup]',
providers: [RADIO_CONTROL_VALUE_ACCESSOR$1]
},] }
];
ButtonRadioGroupDirective.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
ButtonRadioGroupDirective.propDecorators = {
role: [{ type: HostBinding, args: ['attr.role',] }],
radioButtons: [{ type: ContentChildren, args: [forwardRef(() => ButtonRadioDirective),] }],
tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }],
onFocus: [{ type: HostListener, args: ['focus',] }],
onBlur: [{ type: HostListener, args: ['blur',] }],
selectNext: [{ type: HostListener, args: ['keydown.ArrowRight', ['$event'],] }, { type: HostListener, args: ['keydown.ArrowDown', ['$event'],] }],
selectPrevious: [{ type: HostListener, args: ['keydown.ArrowLeft', ['$event'],] }, { type: HostListener, args: ['keydown.ArrowUp', ['$event'],] }]
};
class ButtonsModule {
static forRoot() {
return { ngModule: ButtonsModule, providers: [] };
}
}
ButtonsModule.decorators = [
{ type: NgModule, args: [{
declarations: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective],
exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective, ButtonsModule, CHECKBOX_CONTROL_VALUE_ACCESSOR as ɵa, RADIO_CONTROL_VALUE_ACCESSOR$1 as ɵb, RADIO_CONTROL_VALUE_ACCESSOR as ɵc };
//# sourceMappingURL=ngx-bootstrap-buttons.js.map