ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
563 lines (555 loc) • 16.4 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { FocusMonitor } from '@angular/cdk/a11y';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Renderer2, ElementRef, Output, forwardRef, Optional, ChangeDetectorRef, ViewChild, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { isEmpty, InputBoolean } from 'ng-zorro-antd/core';
import { ObserversModule } from '@angular/cdk/observers';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzCheckboxWrapperComponent {
/**
* @param {?} renderer
* @param {?} elementRef
*/
constructor(renderer, elementRef) {
this.nzOnChange = new EventEmitter();
this.checkboxList = [];
renderer.addClass(elementRef.nativeElement, 'ant-checkbox-group');
}
/**
* @param {?} value
* @return {?}
*/
addCheckbox(value) {
this.checkboxList.push(value);
}
/**
* @param {?} value
* @return {?}
*/
removeCheckbox(value) {
this.checkboxList.splice(this.checkboxList.indexOf(value), 1);
}
/**
* @return {?}
*/
outputValue() {
/** @type {?} */
const checkedList = this.checkboxList.filter((/**
* @param {?} item
* @return {?}
*/
item => item.nzChecked));
return checkedList.map((/**
* @param {?} item
* @return {?}
*/
item => item.nzValue));
}
/**
* @return {?}
*/
onChange() {
this.nzOnChange.emit(this.outputValue());
}
}
NzCheckboxWrapperComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-checkbox-wrapper',
exportAs: 'nzCheckboxWrapper',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "<ng-content></ng-content>"
}] }
];
/** @nocollapse */
NzCheckboxWrapperComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
NzCheckboxWrapperComponent.propDecorators = {
nzOnChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
NzCheckboxWrapperComponent.prototype.nzOnChange;
/**
* @type {?}
* @private
*/
NzCheckboxWrapperComponent.prototype.checkboxList;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzCheckboxComponent {
/**
* @param {?} elementRef
* @param {?} renderer
* @param {?} nzCheckboxWrapperComponent
* @param {?} cdr
* @param {?} focusMonitor
*/
constructor(elementRef, renderer, nzCheckboxWrapperComponent, cdr, focusMonitor) {
this.elementRef = elementRef;
this.renderer = renderer;
this.nzCheckboxWrapperComponent = nzCheckboxWrapperComponent;
this.cdr = cdr;
this.focusMonitor = focusMonitor;
// tslint:disable-next-line:no-any
this.onChange = (/**
* @return {?}
*/
() => null);
// tslint:disable-next-line:no-any
this.onTouched = (/**
* @return {?}
*/
() => null);
this.nzCheckedChange = new EventEmitter();
this.nzAutoFocus = false;
this.nzDisabled = false;
this.nzIndeterminate = false;
this.nzChecked = false;
renderer.addClass(elementRef.nativeElement, 'ant-checkbox-wrapper');
}
/**
* @param {?} e
* @return {?}
*/
hostClick(e) {
e.preventDefault();
this.focus();
this.innerCheckedChange(!this.nzChecked);
}
/**
* @param {?} checked
* @return {?}
*/
innerCheckedChange(checked) {
if (!this.nzDisabled) {
this.nzChecked = checked;
this.onChange(this.nzChecked);
this.nzCheckedChange.emit(this.nzChecked);
if (this.nzCheckboxWrapperComponent) {
this.nzCheckboxWrapperComponent.onChange();
}
}
}
/**
* @return {?}
*/
updateAutoFocus() {
if (this.inputElement && this.nzAutoFocus) {
this.renderer.setAttribute(this.inputElement.nativeElement, 'autofocus', 'autofocus');
}
else {
this.renderer.removeAttribute(this.inputElement.nativeElement, 'autofocus');
}
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.nzChecked = value;
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();
}
/**
* @return {?}
*/
focus() {
this.focusMonitor.focusVia(this.inputElement, 'keyboard');
}
/**
* @return {?}
*/
blur() {
this.inputElement.nativeElement.blur();
}
/**
* @return {?}
*/
checkContent() {
if (isEmpty(this.contentElement.nativeElement)) {
this.renderer.setStyle(this.contentElement.nativeElement, 'display', 'none');
}
else {
this.renderer.removeStyle(this.contentElement.nativeElement, 'display');
}
}
/**
* @return {?}
*/
ngOnInit() {
this.focusMonitor.monitor(this.elementRef, true).subscribe((/**
* @param {?} focusOrigin
* @return {?}
*/
focusOrigin => {
if (!focusOrigin) {
Promise.resolve().then((/**
* @return {?}
*/
() => this.onTouched()));
}
}));
if (this.nzCheckboxWrapperComponent) {
this.nzCheckboxWrapperComponent.addCheckbox(this);
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.nzAutoFocus) {
this.updateAutoFocus();
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.updateAutoFocus();
this.checkContent();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.focusMonitor.stopMonitoring(this.elementRef);
if (this.nzCheckboxWrapperComponent) {
this.nzCheckboxWrapperComponent.removeCheckbox(this);
}
}
}
NzCheckboxComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-checkbox]',
exportAs: 'nzCheckbox',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "<span class=\"ant-checkbox\"\n [class.ant-checkbox-checked]=\"nzChecked && !nzIndeterminate\"\n [class.ant-checkbox-disabled]=\"nzDisabled\"\n [class.ant-checkbox-indeterminate]=\"nzIndeterminate\">\n <input #inputElement [checked]=\"nzChecked\" [ngModel]=\"nzChecked\" [disabled]=\"nzDisabled\" (ngModelChange)=\"innerCheckedChange($event)\" (click)=\"$event.stopPropagation();\" type=\"checkbox\" class=\"ant-checkbox-input\">\n <span class=\"ant-checkbox-inner\"></span>\n</span>\n<span #contentElement (cdkObserveContent)=\"checkContent()\"><ng-content></ng-content></span>",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NzCheckboxComponent)),
multi: true
}
],
host: {
'(click)': 'hostClick($event)'
}
}] }
];
/** @nocollapse */
NzCheckboxComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: NzCheckboxWrapperComponent, decorators: [{ type: Optional }] },
{ type: ChangeDetectorRef },
{ type: FocusMonitor }
];
NzCheckboxComponent.propDecorators = {
inputElement: [{ type: ViewChild, args: ['inputElement', { static: true },] }],
contentElement: [{ type: ViewChild, args: ['contentElement', { static: false },] }],
nzCheckedChange: [{ type: Output }],
nzValue: [{ type: Input }],
nzAutoFocus: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzIndeterminate: [{ type: Input }],
nzChecked: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCheckboxComponent.prototype, "nzAutoFocus", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCheckboxComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCheckboxComponent.prototype, "nzIndeterminate", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCheckboxComponent.prototype, "nzChecked", void 0);
if (false) {
/** @type {?} */
NzCheckboxComponent.prototype.onChange;
/** @type {?} */
NzCheckboxComponent.prototype.onTouched;
/**
* @type {?}
* @private
*/
NzCheckboxComponent.prototype.inputElement;
/**
* @type {?}
* @private
*/
NzCheckboxComponent.prototype.contentElement;
/** @type {?} */
NzCheckboxComponent.prototype.nzCheckedChange;
/** @type {?} */
NzCheckboxComponent.prototype.nzValue;
/** @type {?} */
NzCheckboxComponent.prototype.nzAutoFocus;
/** @type {?} */
NzCheckboxComponent.prototype.nzDisabled;
/** @type {?} */
NzCheckboxComponent.prototype.nzIndeterminate;
/** @type {?} */
NzCheckboxComponent.prototype.nzChecked;
/**
* @type {?}
* @private
*/
NzCheckboxComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzCheckboxComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
NzCheckboxComponent.prototype.nzCheckboxWrapperComponent;
/**
* @type {?}
* @private
*/
NzCheckboxComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzCheckboxComponent.prototype.focusMonitor;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function NzCheckBoxOptionInterface() { }
if (false) {
/** @type {?} */
NzCheckBoxOptionInterface.prototype.label;
/** @type {?} */
NzCheckBoxOptionInterface.prototype.value;
/** @type {?|undefined} */
NzCheckBoxOptionInterface.prototype.checked;
/** @type {?|undefined} */
NzCheckBoxOptionInterface.prototype.disabled;
}
class NzCheckboxGroupComponent {
/**
* @param {?} elementRef
* @param {?} focusMonitor
* @param {?} cdr
* @param {?} renderer
*/
constructor(elementRef, focusMonitor, cdr, renderer) {
this.elementRef = elementRef;
this.focusMonitor = focusMonitor;
this.cdr = cdr;
// tslint:disable-next-line:no-any
this.onChange = (/**
* @return {?}
*/
() => null);
// tslint:disable-next-line:no-any
this.onTouched = (/**
* @return {?}
*/
() => null);
this.options = [];
this.nzDisabled = false;
renderer.addClass(elementRef.nativeElement, 'ant-checkbox-group');
}
/**
* @return {?}
*/
onOptionChange() {
this.onChange(this.options);
}
/**
* @param {?} _index
* @param {?} option
* @return {?}
*/
trackByOption(_index, option) {
return option.value;
}
/**
* @return {?}
*/
ngOnInit() {
this.focusMonitor.monitor(this.elementRef, true).subscribe((/**
* @param {?} focusOrigin
* @return {?}
*/
focusOrigin => {
if (!focusOrigin) {
Promise.resolve().then((/**
* @return {?}
*/
() => this.onTouched()));
}
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
this.focusMonitor.stopMonitoring(this.elementRef);
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.options = value;
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();
}
}
NzCheckboxGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-checkbox-group',
exportAs: 'nzCheckboxGroup',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
template: "<label nz-checkbox\n class=\"ant-checkbox-group-item\"\n *ngFor=\"let option of options; trackBy:trackByOption\"\n [nzDisabled]=\"option.disabled || nzDisabled\"\n [(nzChecked)]=\"option.checked\"\n (nzCheckedChange)=\"onOptionChange()\">\n <span>{{ option.label }}</span>\n</label>",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NzCheckboxGroupComponent)),
multi: true
}
]
}] }
];
/** @nocollapse */
NzCheckboxGroupComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: FocusMonitor },
{ type: ChangeDetectorRef },
{ type: Renderer2 }
];
NzCheckboxGroupComponent.propDecorators = {
nzDisabled: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCheckboxGroupComponent.prototype, "nzDisabled", void 0);
if (false) {
/** @type {?} */
NzCheckboxGroupComponent.prototype.onChange;
/** @type {?} */
NzCheckboxGroupComponent.prototype.onTouched;
/** @type {?} */
NzCheckboxGroupComponent.prototype.options;
/** @type {?} */
NzCheckboxGroupComponent.prototype.nzDisabled;
/**
* @type {?}
* @private
*/
NzCheckboxGroupComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzCheckboxGroupComponent.prototype.focusMonitor;
/**
* @type {?}
* @private
*/
NzCheckboxGroupComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzCheckboxModule {
}
NzCheckboxModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule, ObserversModule],
declarations: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent],
exports: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent]
},] }
];
/**
* @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 { NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxModule, NzCheckboxWrapperComponent };
//# sourceMappingURL=ng-zorro-antd-checkbox.js.map