UNPKG

ng-zorro-antd

Version:

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

563 lines (555 loc) 16.4 kB
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