ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
568 lines (560 loc) • 17.2 kB
JavaScript
import { Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ElementRef, Renderer2, ChangeDetectorRef, ViewChild, Input, HostListener, ContentChildren, NgModule } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { __decorate, __metadata } from 'tslib';
import { Subject, merge } from 'rxjs';
import { InputBoolean, isNotNil } from 'ng-zorro-antd/core';
import { startWith, takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzRadioComponent {
/* tslint:disable-next-line:no-any */
/**
* @param {?} elementRef
* @param {?} renderer
* @param {?} cdr
* @param {?} focusMonitor
*/
constructor(elementRef, renderer, cdr, focusMonitor) {
this.elementRef = elementRef;
this.renderer = renderer;
this.cdr = cdr;
this.focusMonitor = focusMonitor;
this.select$ = new Subject();
this.touched$ = new Subject();
this.checked = false;
this.isNgModel = false;
this.onChange = (/**
* @return {?}
*/
() => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
this.nzDisabled = false;
this.nzAutoFocus = false;
this.renderer.addClass(elementRef.nativeElement, 'ant-radio-wrapper');
}
/**
* @return {?}
*/
updateAutoFocus() {
if (this.inputElement) {
if (this.nzAutoFocus) {
this.renderer.setAttribute(this.inputElement.nativeElement, 'autofocus', 'autofocus');
}
else {
this.renderer.removeAttribute(this.inputElement.nativeElement, 'autofocus');
}
}
}
/**
* @param {?} event
* @return {?}
*/
onClick(event) {
// Prevent label click triggered twice.
event.stopPropagation();
event.preventDefault();
if (!this.nzDisabled && !this.checked) {
this.select$.next(this);
if (this.isNgModel) {
this.checked = true;
this.onChange(true);
}
}
}
/**
* @return {?}
*/
focus() {
this.focusMonitor.focusVia(this.inputElement, 'keyboard');
}
/**
* @return {?}
*/
blur() {
this.inputElement.nativeElement.blur();
}
/**
* @return {?}
*/
markForCheck() {
this.cdr.markForCheck();
}
/**
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
this.nzDisabled = isDisabled;
this.cdr.markForCheck();
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.checked = value;
this.cdr.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.isNgModel = true;
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.focusMonitor.monitor(this.elementRef, true).subscribe((/**
* @param {?} focusOrigin
* @return {?}
*/
focusOrigin => {
if (!focusOrigin) {
Promise.resolve().then((/**
* @return {?}
*/
() => this.onTouched()));
this.touched$.next();
}
}));
this.updateAutoFocus();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.nzAutoFocus) {
this.updateAutoFocus();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.focusMonitor.stopMonitoring(this.elementRef);
}
}
NzRadioComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-radio]',
exportAs: 'nzRadio',
preserveWhitespaces: false,
template: "<span class=\"ant-radio\" [class.ant-radio-checked]=\"checked\" [class.ant-radio-disabled]=\"nzDisabled\">\n <input #inputElement type=\"radio\" class=\"ant-radio-input\" [disabled]=\"nzDisabled\" [checked]=\"checked\" [attr.name]=\"name\">\n <span class=\"ant-radio-inner\"></span>\n</span>\n<span><ng-content></ng-content></span>",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NzRadioComponent)),
multi: true
}
],
host: {
'[class.ant-radio-wrapper-checked]': 'checked',
'[class.ant-radio-wrapper-disabled]': 'nzDisabled'
}
}] }
];
/** @nocollapse */
NzRadioComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: ChangeDetectorRef },
{ type: FocusMonitor }
];
NzRadioComponent.propDecorators = {
inputElement: [{ type: ViewChild, args: ['inputElement', { static: false },] }],
nzValue: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzAutoFocus: [{ type: Input }],
onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzRadioComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzRadioComponent.prototype, "nzAutoFocus", void 0);
if (false) {
/** @type {?} */
NzRadioComponent.prototype.select$;
/** @type {?} */
NzRadioComponent.prototype.touched$;
/** @type {?} */
NzRadioComponent.prototype.checked;
/** @type {?} */
NzRadioComponent.prototype.name;
/** @type {?} */
NzRadioComponent.prototype.isNgModel;
/** @type {?} */
NzRadioComponent.prototype.onChange;
/** @type {?} */
NzRadioComponent.prototype.onTouched;
/** @type {?} */
NzRadioComponent.prototype.inputElement;
/** @type {?} */
NzRadioComponent.prototype.nzValue;
/** @type {?} */
NzRadioComponent.prototype.nzDisabled;
/** @type {?} */
NzRadioComponent.prototype.nzAutoFocus;
/**
* @type {?}
* @private
*/
NzRadioComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzRadioComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
NzRadioComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzRadioComponent.prototype.focusMonitor;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzRadioButtonComponent extends NzRadioComponent {
/* tslint:disable-next-line:no-any */
/**
* @param {?} elementRef
* @param {?} renderer
* @param {?} cdr
* @param {?} focusMonitor
*/
constructor(elementRef, renderer, cdr, focusMonitor) {
super(elementRef, renderer, cdr, focusMonitor);
renderer.removeClass(elementRef.nativeElement, 'ant-radio-wrapper');
renderer.addClass(elementRef.nativeElement, 'ant-radio-button-wrapper');
}
}
NzRadioButtonComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-radio-button]',
exportAs: 'nzRadioButton',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NzRadioComponent)),
multi: true
},
{
provide: NzRadioComponent,
useExisting: forwardRef((/**
* @return {?}
*/
() => NzRadioButtonComponent))
}
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
template: "<span class=\"ant-radio-button\" [class.ant-radio-button-checked]=\"checked\" [class.ant-radio-button-disabled]=\"nzDisabled\">\n <input type=\"radio\" #inputElement class=\"ant-radio-button-input\" [disabled]=\"nzDisabled\" [checked]=\"checked\" [attr.name]=\"name\">\n <span class=\"ant-radio-button-inner\"></span>\n</span>\n<span><ng-content></ng-content></span>",
host: {
'[class.ant-radio-button-wrapper-checked]': 'checked',
'[class.ant-radio-button-wrapper-disabled]': 'nzDisabled'
}
}] }
];
/** @nocollapse */
NzRadioButtonComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: ChangeDetectorRef },
{ type: FocusMonitor }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzRadioGroupComponent {
/**
* @param {?} cdr
* @param {?} renderer
* @param {?} elementRef
*/
constructor(cdr, renderer, elementRef) {
this.cdr = cdr;
this.destroy$ = new Subject();
this.onChange = (/**
* @return {?}
*/
() => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
this.nzButtonStyle = 'outline';
this.nzSize = 'default';
renderer.addClass(elementRef.nativeElement, 'ant-radio-group');
}
/**
* @return {?}
*/
updateChildrenStatus() {
if (this.radios) {
Promise.resolve().then((/**
* @return {?}
*/
() => {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
radio => {
radio.checked = radio.nzValue === this.value;
if (isNotNil(this.nzDisabled)) {
radio.nzDisabled = this.nzDisabled;
}
if (this.nzName) {
radio.name = this.nzName;
}
radio.markForCheck();
}));
}));
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.radios.changes
.pipe(startWith(null), takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
() => {
this.updateChildrenStatus();
if (this.selectSubscription) {
this.selectSubscription.unsubscribe();
}
this.selectSubscription = merge(...this.radios.map((/**
* @param {?} radio
* @return {?}
*/
radio => radio.select$)))
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @param {?} radio
* @return {?}
*/
radio => {
if (this.value !== radio.nzValue) {
this.value = radio.nzValue;
this.updateChildrenStatus();
this.onChange(this.value);
}
}));
if (this.touchedSubscription) {
this.touchedSubscription.unsubscribe();
}
this.touchedSubscription = merge(...this.radios.map((/**
* @param {?} radio
* @return {?}
*/
radio => radio.touched$)))
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
() => {
Promise.resolve().then((/**
* @return {?}
*/
() => this.onTouched()));
}));
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.nzDisabled || changes.nzName) {
this.updateChildrenStatus();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
/* tslint:disable-next-line:no-any */
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.value = value;
this.updateChildrenStatus();
this.cdr.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
this.nzDisabled = 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: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => 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'`
}
}] }
];
/** @nocollapse */
NzRadioGroupComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: Renderer2 },
{ type: ElementRef }
];
NzRadioGroupComponent.propDecorators = {
radios: [{ type: ContentChildren, args: [forwardRef((/**
* @return {?}
*/
() => NzRadioComponent)), { descendants: true },] }],
nzDisabled: [{ type: Input }],
nzButtonStyle: [{ type: Input }],
nzSize: [{ type: Input }],
nzName: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzRadioGroupComponent.prototype, "nzDisabled", void 0);
if (false) {
/**
* @type {?}
* @private
*/
NzRadioGroupComponent.prototype.value;
/**
* @type {?}
* @private
*/
NzRadioGroupComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzRadioGroupComponent.prototype.selectSubscription;
/**
* @type {?}
* @private
*/
NzRadioGroupComponent.prototype.touchedSubscription;
/** @type {?} */
NzRadioGroupComponent.prototype.onChange;
/** @type {?} */
NzRadioGroupComponent.prototype.onTouched;
/** @type {?} */
NzRadioGroupComponent.prototype.radios;
/** @type {?} */
NzRadioGroupComponent.prototype.nzDisabled;
/** @type {?} */
NzRadioGroupComponent.prototype.nzButtonStyle;
/** @type {?} */
NzRadioGroupComponent.prototype.nzSize;
/** @type {?} */
NzRadioGroupComponent.prototype.nzName;
/**
* @type {?}
* @private
*/
NzRadioGroupComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzRadioModule {
}
NzRadioModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
exports: [NzRadioComponent, NzRadioButtonComponent, NzRadioGroupComponent],
declarations: [NzRadioComponent, NzRadioButtonComponent, NzRadioGroupComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzRadioButtonComponent, NzRadioComponent, NzRadioGroupComponent, NzRadioModule };
//# sourceMappingURL=ng-zorro-antd-radio.js.map