UNPKG

ngx-bootstrap

Version:
454 lines (447 loc) 17.4 kB
import * as i0 from '@angular/core'; import { forwardRef, HostListener, HostBinding, Input, Directive, 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; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: ButtonCheckboxDirective, isStandalone: true, selector: "[btnCheckbox]", inputs: { btnCheckboxTrue: "btnCheckboxTrue", btnCheckboxFalse: "btnCheckboxFalse" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.state", "attr.aria-pressed": "this.state" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonCheckboxDirective, decorators: [{ type: Directive, args: [{ selector: '[btnCheckbox]', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], standalone: true }] }], 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$1 = { 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 { /** 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; } 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; } 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'); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonRadioDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: forwardRef(() => ButtonRadioGroupDirective), optional: true }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: ButtonRadioDirective, isStandalone: true, selector: "[btnRadio]", inputs: { btnRadio: "btnRadio", uncheckable: "uncheckable", value: "value", disabled: "disabled" }, host: { listeners: { "click": "toggleIfAllowed()", "keydown.space": "onSpacePressed($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-disabled": "this.controlOrGroupDisabled", "class.disabled": "this.hasDisabledClass", "class.active": "this.isActive", "attr.aria-checked": "this.isActive", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [RADIO_CONTROL_VALUE_ACCESSOR$1], usesOnChanges: true, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonRadioDirective, decorators: [{ type: Directive, args: [{ selector: '[btnRadio]', providers: [RADIO_CONTROL_VALUE_ACCESSOR$1], standalone: true }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ButtonRadioGroupDirective, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => ButtonRadioGroupDirective)] }] }], 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 = { 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); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonRadioGroupDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: ButtonRadioGroupDirective, isStandalone: true, selector: "[btnRadioGroup]", host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "keydown.ArrowRight": "selectNext($event)", "keydown.ArrowDown": "selectNext($event)", "keydown.ArrowLeft": "selectPrevious($event)", "keydown.ArrowUp": "selectPrevious($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [RADIO_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "radioButtons", predicate: i0.forwardRef(() => ButtonRadioDirective) }], ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonRadioGroupDirective, decorators: [{ type: Directive, args: [{ selector: '[btnRadioGroup]', providers: [RADIO_CONTROL_VALUE_ACCESSOR], standalone: true }] }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], 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 { // @deprecated method not required anymore, will be deleted in v19.0.0 static forRoot() { return { ngModule: ButtonsModule, providers: [] }; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: ButtonsModule, imports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective], exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonsModule }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ButtonsModule, decorators: [{ type: NgModule, args: [{ imports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective], exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective] }] }] }); /** * Generated bundle index. Do not edit. */ export { ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective, ButtonsModule }; //# sourceMappingURL=ngx-bootstrap-buttons.mjs.map