UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

361 lines (352 loc) 13 kB
import { Directive, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ChangeDetectorRef, ElementRef, Optional, Input, ViewChild, NgModule } from '@angular/core'; import { __decorate, __metadata } from 'tslib'; import { Directionality, BidiModule } from '@angular/cdk/bidi'; import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; import { InputBoolean } from 'ng-zorro-antd/core/util'; import { ReplaySubject, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FocusMonitor } from '@angular/cdk/a11y'; import { CommonModule } from '@angular/common'; /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzRadioButtonDirective { } NzRadioButtonDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-radio-button]' },] } ]; /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzRadioService { constructor() { this.selected$ = new ReplaySubject(1); this.touched$ = new Subject(); this.disabled$ = new ReplaySubject(1); this.name$ = new ReplaySubject(1); } touch() { this.touched$.next(); } select(value) { this.selected$.next(value); } setDisabled(value) { this.disabled$.next(value); } setName(value) { this.name$.next(value); } } NzRadioService.decorators = [ { type: Injectable } ]; /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzRadioGroupComponent { constructor(cdr, nzRadioService, elementRef, directionality) { this.cdr = cdr; this.nzRadioService = nzRadioService; this.elementRef = elementRef; this.directionality = directionality; this.value = null; this.destroy$ = new Subject(); this.onChange = () => { }; this.onTouched = () => { }; this.nzDisabled = false; this.nzButtonStyle = 'outline'; this.nzSize = 'default'; this.nzName = null; this.dir = 'ltr'; // TODO: move to host after View Engine deprecation this.elementRef.nativeElement.classList.add('ant-radio-group'); } ngOnInit() { var _a; this.nzRadioService.selected$.pipe(takeUntil(this.destroy$)).subscribe(value => { if (this.value !== value) { this.value = value; this.onChange(this.value); } }); this.nzRadioService.touched$.pipe(takeUntil(this.destroy$)).subscribe(() => { Promise.resolve().then(() => this.onTouched()); }); (_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => { this.dir = direction; this.cdr.detectChanges(); }); this.dir = this.directionality.value; } ngOnChanges(changes) { const { nzDisabled, nzName } = changes; if (nzDisabled) { this.nzRadioService.setDisabled(this.nzDisabled); } if (nzName) { this.nzRadioService.setName(this.nzName); } } ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } writeValue(value) { this.value = value; this.nzRadioService.select(value); this.cdr.markForCheck(); } registerOnChange(fn) { this.onChange = fn; } registerOnTouched(fn) { this.onTouched = fn; } setDisabledState(isDisabled) { this.nzDisabled = isDisabled; this.nzRadioService.setDisabled(isDisabled); this.cdr.markForCheck(); } } NzRadioGroupComponent.decorators = [ { type: Component, args: [{ selector: 'nz-radio-group', exportAs: 'nzRadioGroup', preserveWhitespaces: false, template: ` <ng-content></ng-content> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ NzRadioService, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzRadioGroupComponent), multi: true } ], host: { '[class.ant-radio-group-large]': `nzSize === 'large'`, '[class.ant-radio-group-small]': `nzSize === 'small'`, '[class.ant-radio-group-solid]': `nzButtonStyle === 'solid'`, '[class.ant-radio-group-rtl]': `dir === 'rtl'` } },] } ]; NzRadioGroupComponent.ctorParameters = () => [ { type: ChangeDetectorRef }, { type: NzRadioService }, { type: ElementRef }, { type: Directionality, decorators: [{ type: Optional }] } ]; NzRadioGroupComponent.propDecorators = { nzDisabled: [{ type: Input }], nzButtonStyle: [{ type: Input }], nzSize: [{ type: Input }], nzName: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzRadioGroupComponent.prototype, "nzDisabled", void 0); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzRadioComponent { constructor(elementRef, cdr, focusMonitor, directionality, nzRadioService, nzRadioButtonDirective) { this.elementRef = elementRef; this.cdr = cdr; this.focusMonitor = focusMonitor; this.directionality = directionality; this.nzRadioService = nzRadioService; this.nzRadioButtonDirective = nzRadioButtonDirective; this.isNgModel = false; this.destroy$ = new Subject(); this.isChecked = false; this.name = null; this.isRadioButton = !!this.nzRadioButtonDirective; this.onChange = () => { }; this.onTouched = () => { }; this.nzValue = null; this.nzDisabled = false; this.nzAutoFocus = false; this.dir = 'ltr'; } onHostClick(event) { /** prevent label click triggered twice. **/ event.stopPropagation(); event.preventDefault(); if (!this.nzDisabled && !this.isChecked) { if (this.nzRadioService) { this.nzRadioService.select(this.nzValue); } if (this.isNgModel) { this.isChecked = true; this.onChange(true); } } } focus() { this.focusMonitor.focusVia(this.inputElement, 'keyboard'); } blur() { this.inputElement.nativeElement.blur(); } setDisabledState(disabled) { this.nzDisabled = disabled; this.cdr.markForCheck(); } writeValue(value) { this.isChecked = value; this.cdr.markForCheck(); } registerOnChange(fn) { this.isNgModel = true; this.onChange = fn; } registerOnTouched(fn) { this.onTouched = fn; } ngOnInit() { var _a; if (this.nzRadioService) { this.nzRadioService.name$.pipe(takeUntil(this.destroy$)).subscribe(name => { this.name = name; this.cdr.markForCheck(); }); this.nzRadioService.disabled$.pipe(takeUntil(this.destroy$)).subscribe(disabled => { this.nzDisabled = disabled; this.cdr.markForCheck(); }); this.nzRadioService.selected$.pipe(takeUntil(this.destroy$)).subscribe(value => { this.isChecked = this.nzValue === value; this.cdr.markForCheck(); }); } this.focusMonitor.monitor(this.elementRef, true).subscribe(focusOrigin => { if (!focusOrigin) { Promise.resolve().then(() => this.onTouched()); if (this.nzRadioService) { this.nzRadioService.touch(); } } }); (_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => { this.dir = direction; this.cdr.detectChanges(); }); this.dir = this.directionality.value; } ngAfterViewInit() { if (this.nzAutoFocus) { this.focus(); } } ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); this.focusMonitor.stopMonitoring(this.elementRef); } } NzRadioComponent.decorators = [ { type: Component, args: [{ selector: '[nz-radio],[nz-radio-button]', exportAs: 'nzRadio', preserveWhitespaces: false, template: ` <span [class.ant-radio]="!isRadioButton" [class.ant-radio-checked]="isChecked && !isRadioButton" [class.ant-radio-disabled]="nzDisabled && !isRadioButton" [class.ant-radio-button]="isRadioButton" [class.ant-radio-button-checked]="isChecked && isRadioButton" [class.ant-radio-button-disabled]="nzDisabled && isRadioButton" > <input #inputElement type="radio" [attr.autofocus]="nzAutoFocus ? 'autofocus' : null" [class.ant-radio-input]="!isRadioButton" [class.ant-radio-button-input]="isRadioButton" [disabled]="nzDisabled" [checked]="isChecked" [attr.name]="name" /> <span [class.ant-radio-inner]="!isRadioButton" [class.ant-radio-button-inner]="isRadioButton"></span> </span> <span><ng-content></ng-content></span> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzRadioComponent), multi: true } ], host: { '[class.ant-radio-wrapper]': '!isRadioButton', '[class.ant-radio-button-wrapper]': 'isRadioButton', '[class.ant-radio-wrapper-checked]': 'isChecked && !isRadioButton', '[class.ant-radio-button-wrapper-checked]': 'isChecked && isRadioButton', '[class.ant-radio-wrapper-disabled]': 'nzDisabled && !isRadioButton', '[class.ant-radio-button-wrapper-disabled]': 'nzDisabled && isRadioButton', '[class.ant-radio-wrapper-rtl]': `!isRadioButton && dir === 'rtl'`, '[class.ant-radio-button-wrapper-rtl]': `isRadioButton && dir === 'rtl'`, '(click)': 'onHostClick($event)' } },] } ]; NzRadioComponent.ctorParameters = () => [ { type: ElementRef }, { type: ChangeDetectorRef }, { type: FocusMonitor }, { type: Directionality, decorators: [{ type: Optional }] }, { type: NzRadioService, decorators: [{ type: Optional }] }, { type: NzRadioButtonDirective, decorators: [{ type: Optional }] } ]; NzRadioComponent.propDecorators = { inputElement: [{ type: ViewChild, args: ['inputElement', { static: false },] }], nzValue: [{ type: Input }], nzDisabled: [{ type: Input }], nzAutoFocus: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzRadioComponent.prototype, "nzDisabled", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzRadioComponent.prototype, "nzAutoFocus", void 0); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzRadioModule { } NzRadioModule.decorators = [ { type: NgModule, args: [{ imports: [BidiModule, CommonModule, FormsModule], exports: [NzRadioComponent, NzRadioButtonDirective, NzRadioGroupComponent], declarations: [NzRadioComponent, NzRadioButtonDirective, NzRadioGroupComponent] },] } ]; /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** * Generated bundle index. Do not edit. */ export { NzRadioButtonDirective, NzRadioComponent, NzRadioGroupComponent, NzRadioModule, NzRadioService }; //# sourceMappingURL=ng-zorro-antd-radio.js.map