From 2080629a2705b26463f52d3ce84b672375eda2e0 Mon Sep 17 00:00:00 2001 From: VTHINKXIE Date: Mon, 29 Oct 2018 11:49:04 +0800 Subject: [PATCH] refactor(module:all): support Angular 7.0 (#2372) * refactor(module:all): refactor component to support onPush & SSR * refactor(module:badge): refactor badge * refactor(module:button & card): refactor * test(module:button): fix test case * fix(module:avatar): fix avatar * fix(module:tree): fix tree tslint * fix(module:tree): fix tree module * fix(module:all): fix tslint config * refactor(module:all): upgrade to angular 7.0 * fix(module:all): fix typescript error * fix(module:build): fix build less options * fix(module:integration): fix webpack test * build: rm unused package * build: fix build & ci * test(module:spin): fix test error * docs: update readme --- README-zh_CN.md | 2 +- README.md | 2 +- components/affix/nz-affix.component.ts | 173 +++++++-------- components/alert/nz-alert.component.html | 9 +- components/alert/nz-alert.component.ts | 71 +++--- components/anchor/nz-anchor.component.ts | 4 +- .../nz-autocomplete-option.component.ts | 2 +- .../nz-autocomplete-trigger.directive.ts | 202 +++++++++--------- .../nz-autocomplete.component.ts | 2 +- components/avatar/nz-avatar.component.ts | 57 +++-- components/back-top/nz-back-top.component.ts | 2 +- components/badge/demo/basic.ts | 3 + components/badge/demo/change.ts | 1 + components/badge/demo/dot.ts | 1 + components/badge/doc/index.en-US.md | 1 + components/badge/doc/index.zh-CN.md | 1 + components/badge/nz-badge.component.html | 30 ++- components/badge/nz-badge.component.ts | 90 +++----- .../button/nz-button-group.component.html | 4 +- .../button/nz-button-group.component.ts | 44 ++-- components/button/nz-button.component.ts | 72 +++---- components/button/nz-button.spec.ts | 8 +- .../calendar/nz-calendar-header.component.ts | 6 +- components/calendar/nz-calendar.component.ts | 4 +- components/card/nz-card-loading.component.ts | 12 +- components/card/nz-card-meta.component.ts | 14 +- components/card/nz-card.component.html | 2 +- components/card/nz-card.component.ts | 58 +---- components/carousel/nz-carousel.component.ts | 4 +- components/cascader/nz-cascader.component.ts | 10 +- .../checkbox/nz-checkbox-wrapper.component.ts | 2 +- components/checkbox/nz-checkbox.component.ts | 2 +- .../collapse/nz-collapse-panel.component.ts | 2 +- components/core/animation/animation.ts | 16 ++ components/core/polyfill/match-media.ts | 13 +- components/core/polyfill/request-animation.ts | 18 +- components/core/types/common-wrap.ts | 2 +- components/core/types/ng-class.ts | 2 + components/core/types/size.ts | 2 + components/core/util/dom.ts | 23 ++ .../core/util/throttleByAnimationFrame.ts | 8 +- .../date-picker/abstract-picker.component.ts | 2 +- .../date-range-picker.component.ts | 4 +- .../lib/popups/date-range-popup.component.ts | 7 +- components/date-picker/picker.component.ts | 4 +- components/drawer/nz-drawer.component.ts | 4 +- .../dropdown/nz-dropdown-button.component.ts | 2 +- components/dropdown/nz-dropdown.component.ts | 2 +- components/grid/nz-row.component.ts | 20 +- .../input-number/nz-input-number.component.ts | 3 +- components/input/nz-input-group.component.ts | 19 +- components/layout/nz-sider.component.ts | 2 +- components/list/demo/infinite-load.ts | 44 ++-- components/list/interface.ts | 2 - components/list/nz-list.component.ts | 5 +- components/mention/mention.component.ts | 10 +- components/menu/nz-menu.directive.ts | 2 +- components/menu/nz-submenu.component.ts | 2 +- components/modal/nz-modal.component.ts | 10 +- components/package.json | 16 +- .../pagination/nz-pagination.component.ts | 4 +- .../popconfirm/nz-popconfirm.component.ts | 4 +- .../popconfirm/nz-popconfirm.directive.ts | 4 +- components/radio/nz-radio-group.component.ts | 8 +- components/rate/nz-rate.component.ts | 8 +- .../select/nz-option-container.component.ts | 8 +- .../select/nz-select-top-control.component.ts | 4 +- components/select/nz-select.component.ts | 6 +- components/slider/nz-slider.component.ts | 6 +- components/spin/nz-spin.component.html | 10 +- components/steps/nz-step.component.ts | 10 +- components/steps/nz-steps.component.ts | 8 +- components/switch/nz-switch.component.ts | 9 +- components/table/nz-table.component.ts | 12 +- components/table/nz-td.component.ts | 4 +- components/table/nz-th.component.ts | 8 +- components/table/nz-thead.component.ts | 2 +- components/tabs/nz-tab.component.ts | 6 +- components/tabs/nz-tabs-nav.component.ts | 4 +- components/tabs/nz-tabset.component.ts | 6 +- components/tag/nz-tag.component.ts | 6 +- .../nz-time-picker-panel.component.ts | 2 +- .../time-picker/nz-time-picker.component.ts | 2 +- components/tooltip/nz-tooltip.component.ts | 2 +- components/tooltip/nz-tooltip.directive.ts | 2 +- .../transfer/nz-transfer-list.component.ts | 6 +- .../transfer/nz-transfer-search.component.ts | 4 +- components/transfer/nz-transfer.component.ts | 6 +- .../tree-select/nz-tree-select.component.ts | 12 +- components/tree/nz-tree-node.component.ts | 34 +-- components/tree/nz-tree.component.ts | 36 ++-- components/tsconfig.lib.json | 2 + components/upload/demo/avatar.ts | 4 +- components/upload/nz-upload.component.ts | 4 +- docs/introduce.en-US.md | 2 +- docs/introduce.zh-CN.md | 2 +- integration/webpack/package.json | 13 +- integration/webpack/webpack.config.js | 8 +- package.json | 89 ++++---- scripts/build/generate-less.js | 4 +- .../share/nz-codebox/nz-codebox.component.ts | 28 +-- .../site/_site/src/app/share/share.module.ts | 6 +- tslint.json | 8 +- 103 files changed, 764 insertions(+), 790 deletions(-) create mode 100644 components/core/animation/animation.ts create mode 100644 components/core/types/ng-class.ts create mode 100644 components/core/types/size.ts create mode 100644 components/core/util/dom.ts diff --git a/README-zh_CN.md b/README-zh_CN.md index 36ea86457a9..5cec495763e 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -38,7 +38,7 @@ Ant Design 的 Angular 实现，开发和服务于企业级后台产品。 ## 🖥 支持环境 -- Angular `^6.0.0` +- Angular `^7.0.0` - 现代浏览器，以及 Internet Explorer 11+ （使用 [polyfills](https://angular.io/guide/browser-support)） - [Electron](http://electron.atom.io/) diff --git a/README.md b/README.md index 254d204de23..5e35a3cfeaf 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ English | [简体中文](README-zh_CN.md) ## 🖥 Environment Support -* Angular `^6.0.0` +* Angular `^7.0.0` * Modern browsers and Internet Explorer 11+ (with [polyfills](https://angular.io/guide/browser-support)) * [Electron](http://electron.atom.io/) diff --git a/components/affix/nz-affix.component.ts b/components/affix/nz-affix.component.ts index 3c2f67d2aed..c17e378f605 100644 --- a/components/affix/nz-affix.component.ts +++ b/components/affix/nz-affix.component.ts @@ -29,23 +29,6 @@ import { throttleByAnimationFrameDecorator } from '../core/util/throttleByAnimat }) export class NzAffixComponent implements OnInit, OnDestroy { - private timeout: any; - private events = [ - 'resize', - 'scroll', - 'touchstart', - 'touchmove', - 'touchend', - 'pageshow', - 'load' - ]; - private affixStyle: any; - private placeholderStyle: any; - - @ViewChild('wrap') private wrap: ElementRef; - - private _target: Element | Window = window; - @Input() set nzTarget(value: Element | Window) { this.clearEventListeners(); @@ -54,8 +37,6 @@ export class NzAffixComponent implements OnInit, OnDestroy { this.updatePosition({}); } - private _offsetTop: number; - @Input() set nzOffsetTop(value: number) { if (typeof value === 'undefined') { @@ -68,8 +49,6 @@ export class NzAffixComponent implements OnInit, OnDestroy { return this._offsetTop; } - private _offsetBottom: number; - @Input() set nzOffsetBottom(value: number) { if (typeof value === 'undefined') { @@ -78,11 +57,33 @@ export class NzAffixComponent implements OnInit, OnDestroy { this._offsetBottom = toNumber(value, null); } - @Output() nzChange: EventEmitter = new EventEmitter(); + @Output() + readonly nzChange: EventEmitter = new EventEmitter(); constructor(private scrollSrv: NzScrollService, private _el: ElementRef, private cd: ChangeDetectorRef) { } + private timeout: any; + private events = [ + 'resize', + 'scroll', + 'touchstart', + 'touchmove', + 'touchend', + 'pageshow', + 'load' + ]; + private affixStyle: any; + private placeholderStyle: any; + + @ViewChild('wrap') private wrap: ElementRef; + + private _target: Element | Window = window; + + private _offsetTop: number; + + private _offsetBottom: number; + ngOnInit(): void { this.timeout = setTimeout(() => { this.setTargetEventListeners(); @@ -90,31 +91,12 @@ export class NzAffixComponent implements OnInit, OnDestroy { }); } - private setTargetEventListeners(): void { - this.clearEventListeners(); - this.events.forEach((eventName: string) => { - this._target.addEventListener(eventName, this.updatePosition, false); - }); - } - - private clearEventListeners(): void { - this.events.forEach(eventName => { - this._target.removeEventListener(eventName, this.updatePosition, false); - }); - } - ngOnDestroy(): void { this.clearEventListeners(); clearTimeout(this.timeout); (this.updatePosition as any).cancel(); } - private getTargetRect(target: Element | Window | null): ClientRect { - return target !== window ? - (target as HTMLElement).getBoundingClientRect() : - { top: 0, left: 0, bottom: 0 } as ClientRect; - } - getOffset(element: Element, target: Element | Window | null): { top: number; left: number; @@ -139,51 +121,6 @@ export class NzAffixComponent implements OnInit, OnDestroy { }; } - private genStyle(affixStyle: {}): string { - if (affixStyle == null) { - return ''; - } - return Object.keys(affixStyle).map(key => { - const val = affixStyle[ key ]; - return `${key}:${typeof val === 'string' ? val : val + 'px'}`; - }).join(';'); - } - - private setAffixStyle(e: any, affixStyle: {}): void { - const originalAffixStyle = this.affixStyle; - const isWindow = this._target === window; - if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) { - return; - } - if (shallowEqual(originalAffixStyle, affixStyle)) { - return; - } - - const fixed = !!affixStyle; - const wrapEl = this.wrap.nativeElement as HTMLElement; - wrapEl.style.cssText = this.genStyle(affixStyle); - this.affixStyle = affixStyle; - const cls = 'ant-affix'; - if (fixed) { - wrapEl.classList.add(cls); - } else { - wrapEl.classList.remove(cls); - } - - if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) { - this.nzChange.emit(fixed); - } - } - - private setPlaceholderStyle(placeholderStyle: {}): void { - const originalPlaceholderStyle = this.placeholderStyle; - if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) { - return; - } - (this._el.nativeElement as HTMLElement).style.cssText = this.genStyle(placeholderStyle); - this.placeholderStyle = placeholderStyle; - } - @throttleByAnimationFrameDecorator() updatePosition(e: any): void { const targetNode = this._target; @@ -251,4 +188,68 @@ export class NzAffixComponent implements OnInit, OnDestroy { } } + private setTargetEventListeners(): void { + this.clearEventListeners(); + this.events.forEach((eventName: string) => { + this._target.addEventListener(eventName, this.updatePosition, false); + }); + } + + private clearEventListeners(): void { + this.events.forEach(eventName => { + this._target.removeEventListener(eventName, this.updatePosition, false); + }); + } + + private getTargetRect(target: Element | Window | null): ClientRect { + return target !== window ? + (target as HTMLElement).getBoundingClientRect() : + { top: 0, left: 0, bottom: 0 } as ClientRect; + } + + private genStyle(affixStyle: {}): string { + if (affixStyle == null) { + return ''; + } + return Object.keys(affixStyle).map(key => { + const val = affixStyle[ key ]; + return `${key}:${typeof val === 'string' ? val : val + 'px'}`; + }).join(';'); + } + + private setAffixStyle(e: any, affixStyle: {}): void { + const originalAffixStyle = this.affixStyle; + const isWindow = this._target === window; + if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) { + return; + } + if (shallowEqual(originalAffixStyle, affixStyle)) { + return; + } + + const fixed = !!affixStyle; + const wrapEl = this.wrap.nativeElement as HTMLElement; + wrapEl.style.cssText = this.genStyle(affixStyle); + this.affixStyle = affixStyle; + const cls = 'ant-affix'; + if (fixed) { + wrapEl.classList.add(cls); + } else { + wrapEl.classList.remove(cls); + } + + if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) { + this.nzChange.emit(fixed); + } + } + + private setPlaceholderStyle(placeholderStyle: {}): void { + const originalPlaceholderStyle = this.placeholderStyle; + if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) { + return; + } + (this._el.nativeElement as HTMLElement).style.cssText = this.genStyle(placeholderStyle); + this.placeholderStyle = placeholderStyle; + } + } diff --git a/components/alert/nz-alert.component.html b/components/alert/nz-alert.component.html index c1cd2bc78c3..cfb3a2c88a1 100644 --- a/components/alert/nz-alert.component.html +++ b/components/alert/nz-alert.component.html @@ -2,7 +2,7 @@ - + @@ -17,10 +17,9 @@ - + diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts index 5c9b135e9cb..795f38bf925 100644 --- a/components/alert/nz-alert.component.ts +++ b/components/alert/nz-alert.component.ts @@ -1,4 +1,5 @@ import { + ChangeDetectionStrategy, Component, EventEmitter, Input, @@ -6,32 +7,23 @@ import { Output, TemplateRef } from '@angular/core'; - -// tslint:disable-next-line:no-any -export type NgClassType = string | string[] | Set | { [ klass: string ]: any; }; - import { fadeAnimation } from '../core/animation/fade-animations'; +import { NgClassType } from '../core/types/ng-class'; import { toBoolean } from '../core/util/convert'; @Component({ selector : 'nz-alert', animations : [ fadeAnimation ], - preserveWhitespaces: false, templateUrl : './nz-alert.component.html', + changeDetection : ChangeDetectionStrategy.OnPush, + preserveWhitespaces: false, styles : [ - `:host { + `:host { display: block; }` ] }) export class NzAlertComponent implements OnInit { - private _banner = false; - private _closeable = false; - private _showIcon = false; - private _type = 'info'; - private _description: string | TemplateRef; - private _message: string | TemplateRef; - private _closeText: string | TemplateRef; display = true; isTypeSet = false; isShowIconSet = false; @@ -39,10 +31,20 @@ export class NzAlertComponent implements OnInit { isDescriptionString: boolean; isMessageString: boolean; isCloseTextString: boolean; - outerClassMap; - iconType; - @Output() nzOnClose: EventEmitter = new EventEmitter(); - @Input() nzIconType: NgClassType; + outerClassMap: NgClassType; + iconType: string; + iconTheme: string; + @Output() + readonly nzOnClose: EventEmitter = new EventEmitter(); + @Input() + nzIconType: NgClassType; + private _banner = false; + private _closeable = false; + private _showIcon = false; + private _type = 'info'; + private _description: string | TemplateRef; + private _message: string | TemplateRef; + private _closeText: string | TemplateRef; @Input() set nzDescription(value: string | TemplateRef) { @@ -145,22 +147,25 @@ export class NzAlertComponent implements OnInit { } updateIconClassMap(): void { - const iconType = { - 'close-circle-o' : this.nzDescription && this.nzType === 'error', - 'check-circle-o' : this.nzDescription && this.nzType === 'success', - 'info-circle-o' : this.nzDescription && this.nzType === 'info', - 'exclamation-circle-o' : this.nzDescription && this.nzType === 'warning', - 'close-circle-fill' : (!this.nzDescription) && this.nzType === 'error', - 'check-circle-fill' : (!this.nzDescription) && this.nzType === 'success', - 'info-circle-fill' : (!this.nzDescription) && this.nzType === 'info', - 'exclamation-circle-fill': (!this.nzDescription) && this.nzType === 'warning' - }; - - Object.keys(iconType).forEach(key => { - if (iconType[ key ]) { - this.iconType = key; - } - }); + switch (this.nzType) { + case 'error': + this.iconType = 'close-circle'; + break; + case 'success': + this.iconType = 'check-circle'; + break; + case 'info': + this.iconType = 'info-circle'; + break; + case 'warning': + this.iconType = 'exclamation-circle'; + break; + } + if (this.nzDescription) { + this.iconTheme = 'outline'; + } else { + this.iconTheme = `fill`; + } } ngOnInit(): void { diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts index 8a69009bef3..bb70e975572 100644 --- a/components/anchor/nz-anchor.component.ts +++ b/components/anchor/nz-anchor.component.ts @@ -98,9 +98,9 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit { this.registerScrollEvent(); } - @Output() nzClick: EventEmitter = new EventEmitter(); + @Output() readonly nzClick: EventEmitter = new EventEmitter(); - @Output() nzScroll: EventEmitter = new EventEmitter(); + @Output() readonly nzScroll: EventEmitter = new EventEmitter(); // endregion diff --git a/components/auto-complete/nz-autocomplete-option.component.ts b/components/auto-complete/nz-autocomplete-option.component.ts index 01d487f0554..8765711e000 100644 --- a/components/auto-complete/nz-autocomplete-option.component.ts +++ b/components/auto-complete/nz-autocomplete-option.component.ts @@ -50,7 +50,7 @@ export class NzAutocompleteOptionComponent { this.disabled = toBoolean(value); } - @Output() selectionChange = new EventEmitter(); + @Output() readonly selectionChange = new EventEmitter(); constructor(private changeDetectorRef: ChangeDetectorRef, private element: ElementRef) { } diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts index 8f1a83ad4a4..e5b29df62d1 100644 --- a/components/auto-complete/nz-autocomplete-trigger.directive.ts +++ b/components/auto-complete/nz-autocomplete-trigger.directive.ts @@ -56,23 +56,6 @@ export function getNzAutocompleteMissingPanelError(): Error { }) export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnDestroy { - private overlayRef: OverlayRef | null; - private portal: TemplatePortal<{}>; - private positionStrategy: FlexibleConnectedPositionStrategy; - private previousValue: string | number | null; - private selectionChangeSubscription: Subscription; - private optionsChangeSubscription: Subscription; - private overlayBackdropClickSubscription: Subscription; - private overlayPositionChangeSubscription: Subscription; - - _onChange: (value: {}) => void = () => {}; - _onTouched = () => {}; - - panelOpen: boolean = false; - - /** 用于绑定 nzAutocomplete 组件 */ - @Input() nzAutocomplete: NzAutocompleteComponent; - /** * 当前被激活的 Option */ @@ -82,12 +65,29 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD } } + panelOpen: boolean = false; + + /** 用于绑定 nzAutocomplete 组件 */ + @Input() nzAutocomplete: NzAutocompleteComponent; + constructor(private _element: ElementRef, private _overlay: Overlay, private _viewContainerRef: ViewContainerRef, // tslint:disable-next-line:no-any @Optional() @Inject(DOCUMENT) private _document: any) { } + private overlayRef: OverlayRef | null; + private portal: TemplatePortal<{}>; + private positionStrategy: FlexibleConnectedPositionStrategy; + private previousValue: string | number | null; + private selectionChangeSubscription: Subscription; + private optionsChangeSubscription: Subscription; + private overlayBackdropClickSubscription: Subscription; + private overlayPositionChangeSubscription: Subscription; + + _onChange: (value: {}) => void = () => {}; + _onTouched = () => {}; + openPanel(): void { this.attachOverlay(); } @@ -106,6 +106,87 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD } } + handleKeydown(event: KeyboardEvent): void { + const keyCode = event.keyCode; + const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW; + + if (keyCode === ESCAPE) { + event.preventDefault(); + } + + if (this.panelOpen && (keyCode === ESCAPE || keyCode === TAB)) { + // 通过 tab / ESC 关闭，重置输入标签 value + if (this.activeOption.getLabel() !== this.previousValue) { + this.setTriggerValue(this.previousValue); + } + this.closePanel(); + } else if (this.panelOpen && keyCode === ENTER) { + event.preventDefault(); + if (this.nzAutocomplete.showPanel && this.activeOption) { + this.activeOption.selectViaInteraction(); + } + } else if (this.panelOpen && isArrowKey && this.nzAutocomplete.showPanel) { + event.stopPropagation(); + if (keyCode === UP_ARROW) { + this.nzAutocomplete.setPreviousItemActive(); + } else { + this.nzAutocomplete.setNextItemActive(); + } + if (this.activeOption) { + this.activeOption.scrollIntoViewIfNeeded(); + } + this.doBackfill(); + } + } + + handleInput(event: KeyboardEvent): void { + const target = event.target as HTMLInputElement; + let value: number | string | null = target.value; + if (target.type === 'number') { + value = value === '' ? null : parseFloat(value); + } + if (this.canOpen() && document.activeElement === event.target && + this.previousValue !== value) { + this.previousValue = value; + this._onChange(value); + this.openPanel(); + } + } + + handleFocus(): void { + if (this.canOpen()) { + this.previousValue = this._element.nativeElement.value; + this.openPanel(); + } + } + + handleBlur(): void { + this._onTouched(); + } + + // tslint:disable-next-line:no-any + writeValue(value: any): void { + this.setTriggerValue(value); + } + + registerOnChange(fn: (value: {}) => {}): void { + this._onChange = fn; + } + + registerOnTouched(fn: () => {}): void { + this._onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + const element: HTMLInputElement = this._element.nativeElement; + element.disabled = isDisabled; + this.closePanel(); + } + + ngOnDestroy(): void { + this.destroyPanel(); + } + /** * 订阅数据源改变事件 */ @@ -133,9 +214,9 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD * 并关闭弹窗 */ private subscribeOverlayBackdropClick(): Subscription { - return merge( - fromEvent(this._document, 'click'), - fromEvent(this._document, 'touchend') + return merge( + fromEvent(this._document, 'click'), + fromEvent(this._document, 'touchend') ) .subscribe((event: MouseEvent | TouchEvent) => { const clickTarget = event.target as HTMLElement; @@ -240,39 +321,6 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD } } - handleKeydown(event: KeyboardEvent): void { - const keyCode = event.keyCode; - const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW; - - if (keyCode === ESCAPE) { - event.preventDefault(); - } - - if (this.panelOpen && (keyCode === ESCAPE || keyCode === TAB)) { - // 通过 tab / ESC 关闭，重置输入标签 value - if (this.activeOption.getLabel() !== this.previousValue) { - this.setTriggerValue(this.previousValue); - } - this.closePanel(); - } else if (this.panelOpen && keyCode === ENTER) { - event.preventDefault(); - if (this.nzAutocomplete.showPanel && this.activeOption) { - this.activeOption.selectViaInteraction(); - } - } else if (this.panelOpen && isArrowKey && this.nzAutocomplete.showPanel) { - event.stopPropagation(); - if (keyCode === UP_ARROW) { - this.nzAutocomplete.setPreviousItemActive(); - } else { - this.nzAutocomplete.setNextItemActive(); - } - if (this.activeOption) { - this.activeOption.scrollIntoViewIfNeeded(); - } - this.doBackfill(); - } - } - private setValueAndClose(option: NzAutocompleteOptionComponent): void { const value = option.nzValue; this.setTriggerValue(option.getLabel()); @@ -292,56 +340,8 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD } } - handleInput(event: KeyboardEvent): void { - const target = event.target as HTMLInputElement; - let value: number | string | null = target.value; - if (target.type === 'number') { - value = value === '' ? null : parseFloat(value); - } - if (this.canOpen() && document.activeElement === event.target && - this.previousValue !== value) { - this.previousValue = value; - this._onChange(value); - this.openPanel(); - } - } - - handleFocus(): void { - if (this.canOpen()) { - this.previousValue = this._element.nativeElement.value; - this.openPanel(); - } - } - - handleBlur(): void { - this._onTouched(); - } - private canOpen(): boolean { const element: HTMLInputElement = this._element.nativeElement; return !element.readOnly && !element.disabled; } - - // tslint:disable-next-line:no-any - writeValue(value: any): void { - this.setTriggerValue(value); - } - - registerOnChange(fn: (value: {}) => {}): void { - this._onChange = fn; - } - - registerOnTouched(fn: () => {}): void { - this._onTouched = fn; - } - - setDisabledState(isDisabled: boolean): void { - const element: HTMLInputElement = this._element.nativeElement; - element.disabled = isDisabled; - this.closePanel(); - } - - ngOnDestroy(): void { - this.destroyPanel(); - } } diff --git a/components/auto-complete/nz-autocomplete.component.ts b/components/auto-complete/nz-autocomplete.component.ts index 6e65e098ea2..b6449e5c439 100644 --- a/components/auto-complete/nz-autocomplete.component.ts +++ b/components/auto-complete/nz-autocomplete.component.ts @@ -120,7 +120,7 @@ export class NzAutocompleteComponent implements AfterViewInit { _dataSource: AutocompleteDataSource; /** 选择时发出的事件 */ - @Output() selectionChange: EventEmitter = new EventEmitter(); + @Output() readonly selectionChange: EventEmitter = new EventEmitter(); /** 用于组件内部监听 options 的选择变化 */ readonly optionSelectionChanges: Observable = defer(() => { diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts index af415622325..9e2ce0948fc 100644 --- a/components/avatar/nz-avatar.component.ts +++ b/components/avatar/nz-avatar.component.ts @@ -5,15 +5,14 @@ import { ElementRef, Input, OnChanges, - SimpleChanges, TemplateRef, + SimpleChanges, ViewChild } from '@angular/core'; import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; -import { StepNgClassType } from '../steps'; +import { NzSizeLDSType } from '../core/types/size'; export type NzAvatarShape = 'square' | 'circle'; -export type NzAvatarSize = 'small' | 'large' | 'default'; @Component({ selector : 'nz-avatar', @@ -23,10 +22,18 @@ export type NzAvatarSize = 'small' | 'large' | 'default'; changeDetection : ChangeDetectionStrategy.OnPush }) export class NzAvatarComponent implements OnChanges { - private el: HTMLElement = this.elementRef.nativeElement; - private prefixCls = 'ant-avatar'; - private sizeMap = { large: 'lg', small: 'sm' }; - private _icon: string; + + @Input() + set nzIcon(value: string) { + if (value) { + this.oldAPIIcon = value.indexOf('anticon') > -1; + } + this._icon = value; + } + + get nzIcon(): string { + return this._icon; + } oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0. hasText: boolean = false; hasSrc: boolean = true; @@ -37,23 +44,18 @@ export class NzAvatarComponent implements OnChanges { @Input() nzShape: NzAvatarShape = 'circle'; - @Input() nzSize: NzAvatarSize = 'default'; + @Input() nzSize: NzSizeLDSType = 'default'; @Input() nzText: string; @Input() nzSrc: string; - @Input() - set nzIcon(value: string) { - if (value) { - this.oldAPIIcon = value.indexOf('anticon') > -1; - } - this._icon = value; - } - - get nzIcon(): string { - return this._icon; + constructor(private elementRef: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) { } + private el: HTMLElement = this.elementRef.nativeElement; + private prefixCls = 'ant-avatar'; + private sizeMap = { large: 'lg', small: 'sm' }; + private _icon: string; setClass(): this { const classMap = { @@ -80,6 +82,14 @@ export class NzAvatarComponent implements OnChanges { this.setClass().notifyCalc(); } + ngOnChanges(changes: SimpleChanges): void { + this.hasText = !this.nzSrc && !!this.nzText; + this.hasIcon = !this.nzSrc && !!this.nzIcon; + this.hasSrc = !!this.nzSrc; + + this.setClass().notifyCalc(); + } + private calcStringSize(): void { if (!this.hasText) { return; @@ -108,15 +118,4 @@ export class NzAvatarComponent implements OnChanges { }); return this; } - - constructor(private elementRef: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) { - } - - ngOnChanges(changes: SimpleChanges): void { - this.hasText = !this.nzSrc && !!this.nzText; - this.hasIcon = !this.nzSrc && !!this.nzIcon; - this.hasSrc = !!this.nzSrc; - - this.setClass().notifyCalc(); - } } diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts index ddd29b98fa7..fbe56a269a8 100644 --- a/components/back-top/nz-back-top.component.ts +++ b/components/back-top/nz-back-top.component.ts @@ -67,7 +67,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy { this.registerScrollEvent(); } - @Output() nzClick: EventEmitter = new EventEmitter(); + @Output() readonly nzClick: EventEmitter = new EventEmitter(); constructor(private scrollSrv: NzScrollService, private cd: ChangeDetectorRef) { } diff --git a/components/badge/demo/basic.ts b/components/badge/demo/basic.ts index 8250b39586d..77d04afa50b 100644 --- a/components/badge/demo/basic.ts +++ b/components/badge/demo/basic.ts @@ -6,6 +6,9 @@ import { Component } from '@angular/core'; + + + ` }) export class NzDemoBadgeBasicComponent { diff --git a/components/badge/demo/change.ts b/components/badge/demo/change.ts index e4c81deeeb5..6925057433a 100644 --- a/components/badge/demo/change.ts +++ b/components/badge/demo/change.ts @@ -32,6 +32,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; border-radius: 4px; background: #eee; display: inline-block; + vertical-align: middle; } ` ] }) diff --git a/components/badge/demo/dot.ts b/components/badge/demo/dot.ts index 70c994f8123..45271c42d61 100644 --- a/components/badge/demo/dot.ts +++ b/components/badge/demo/dot.ts @@ -4,6 +4,7 @@ import { Component } from '@angular/core'; selector: 'nz-demo-badge-dot', template: ` + Link something `, styles : [ diff --git a/components/badge/doc/index.en-US.md b/components/badge/doc/index.en-US.md index 02ac62433f4..575a1b0cec9 100644 --- a/components/badge/doc/index.en-US.md +++ b/components/badge/doc/index.en-US.md @@ -28,6 +28,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca | -------- | ----------- | ---- | ------- | | `[nzCount]` | Number to show in badge | number | | | `[nzDot]` | Whether to display a red dot instead of `count` | boolean | `false` | +| `[nzShowDot]` | Whether to display the red dot | boolean | true | | `[nzOverflowCount]` | Max count to show | number | 99 | | `[nzShowZero]` | Whether to show badge when `count` is zero | boolean | `false` | | `[nzStatus]` | Set `nz-badge` as a status dot | `success` ｜ `processing` ｜ `default` ｜ `error` ｜ `warning` | `''` | diff --git a/components/badge/doc/index.zh-CN.md b/components/badge/doc/index.zh-CN.md index fd6f91d8d09..e41139c424a 100644 --- a/components/badge/doc/index.zh-CN.md +++ b/components/badge/doc/index.zh-CN.md @@ -29,6 +29,7 @@ title: Badge | --- | --- | --- | --- | | `[nzCount]` | 展示的数字，大于 nzOverflowCount 时显示为 `${nzOverflowCount}+`，为 0 时隐藏 | number | | | `[nzDot]` | 不展示数字，只有一个小红点 | boolean | false | +| `[nzShowDot]` | 是否展示小红点 | boolean | true | | `[nzOverflowCount]` | 展示封顶的数字值 | number | 99 | | `[nzShowZero]` | 当数值为 0 时，是否展示 Badge | boolean | false | | `[nzStatus]` | 设置 `nz-badge` 为状态点 | Enum{ 'success', 'processing', 'default', 'error', 'warning' } | '' | diff --git a/components/badge/nz-badge.component.html b/components/badge/nz-badge.component.html index e69ada4c69d..b8987ef8231 100644 --- a/components/badge/nz-badge.component.html +++ b/components/badge/nz-badge.component.html @@ -1,27 +1,21 @@ {{ nzText }} - - - - -

{{ p }}

- - - - {{ nzOverflowCount }}+ + + + +

{{ p }}

+ + + + {{ nzOverflowCount }}+ \ No newline at end of file diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts index e97f8d36b60..c8af6f0f0de 100644 --- a/components/badge/nz-badge.component.ts +++ b/components/badge/nz-badge.component.ts @@ -1,38 +1,43 @@ +import { animate, style, transition, trigger } from '@angular/animations'; import { AfterViewInit, + ChangeDetectionStrategy, Component, ElementRef, Input, - NgZone, OnInit, Renderer2, ViewChild } from '@angular/core'; -import { - animate, - style, - transition, - trigger -} from '@angular/animations'; - +import { AnimationCurves } from '../core/animation/animation'; import { isEmpty } from '../core/util/check'; -import { toBoolean } from '../core/util/convert'; +import { InputBoolean } from '../core/util/convert'; + +const ANIMATION_TRANSITION_IN = `0.3s ${AnimationCurves.EASE_IN_BACK}`; +const ANIMATION_TRANSITION_OUT = `0.3s ${AnimationCurves.EASE_IN_BACK}`; export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | 'warning'; @Component({ selector : 'nz-badge', preserveWhitespaces: false, + changeDetection : ChangeDetectionStrategy.OnPush, animations : [ - trigger('enterLeave', [ - transition('void => *', [ - style({ opacity: 0 }), - animate('0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46)') + trigger('zoomAnimation', [ + transition(':enter', [ + style({ opacity: 0, transform: 'scale(0) translateX(50%)' }), + animate(ANIMATION_TRANSITION_IN, style({ + opacity : 1, + transform: 'scale(1) translateX(50%)' + })) ]), - transition('* => void', [ - style({ opacity: 1 }), - animate('0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46)') + transition(':leave', [ + style({ opacity: 1, transform: 'scale(1) translateX(50%)' }), + animate(ANIMATION_TRANSITION_OUT, style({ + opacity : 0, + transform: 'scale(0) translateX(50%)' + })) ]) ]) ], @@ -40,54 +45,21 @@ export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | host : { '[class.ant-badge]' : 'true', '[class.ant-badge-status]': 'nzStatus' - }, - styles : [ - ` - :host:not(.ant-badge-not-a-wrapper) .ant-badge-count { - position: absolute; - transform: translateX(50%); - right: 0; - } - - :host .ant-badge-dot { - position: absolute; - transform: translateX(50%); - right: 0; - } - ` - ] + } }) export class NzBadgeComponent implements OnInit, AfterViewInit { - private _showDot = false; - private _showZero = false; - private _count: number; maxNumberArray = []; countArray = []; countSingleArray = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; @ViewChild('contentElement') contentElement: ElementRef; + @Input() @InputBoolean() nzShowZero = false; + @Input() @InputBoolean() nzShowDot = true; + @Input() @InputBoolean() nzDot = false; @Input() nzOverflowCount = 99; @Input() nzText: string; @Input() nzStyle: { [ key: string ]: string }; @Input() nzStatus: NzBadgeStatusType; - @Input() - set nzShowZero(value: boolean) { - this._showZero = toBoolean(value); - } - - get nzShowZero(): boolean { - return this._showZero; - } - - @Input() - set nzDot(value: boolean) { - this._showDot = toBoolean(value); - } - - get nzDot(): boolean { - return this._showDot; - } - @Input() set nzCount(value: number) { if (value < 0) { @@ -103,9 +75,15 @@ export class NzBadgeComponent implements OnInit, AfterViewInit { } get showSup(): boolean { - return this.nzDot || this.nzCount > 0 || ((this.nzCount === 0) && this.nzShowZero); + return (this.nzShowDot && this.nzDot) || this.nzCount > 0 || ((this.nzCount === 0) && this.nzShowZero); + } + + constructor(private renderer: Renderer2, private elementRef: ElementRef) { + } + private _count: number; + checkContent(): void { if (isEmpty(this.contentElement.nativeElement)) { this.renderer.addClass(this.elementRef.nativeElement, 'ant-badge-not-a-wrapper'); @@ -114,10 +92,6 @@ export class NzBadgeComponent implements OnInit, AfterViewInit { } } - constructor(private zone: NgZone, private renderer: Renderer2, private elementRef: ElementRef) { - - } - ngOnInit(): void { this.maxNumberArray = this.nzOverflowCount.toString().split(''); } diff --git a/components/button/nz-button-group.component.html b/components/button/nz-button-group.component.html index 1ebb74706ce..6dbc7430638 100644 --- a/components/button/nz-button-group.component.html +++ b/components/button/nz-button-group.component.html @@ -1,3 +1 @@ -
- -
\ No newline at end of file + diff --git a/components/button/nz-button-group.component.ts b/components/button/nz-button-group.component.ts index d94b72a593d..b019d49feb6 100644 --- a/components/button/nz-button-group.component.ts +++ b/components/button/nz-button-group.component.ts @@ -1,32 +1,42 @@ -import { Component, ElementRef, Input, ViewChild } from '@angular/core'; - -export type NzButtonGroupSize = 'small' | 'large' | 'default' ; +import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'; +import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; +import { NzSizeLDSType } from '../core/types/size'; @Component({ selector : 'nz-button-group', + changeDetection : ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, + providers : [ NzUpdateHostClassService ], templateUrl : './nz-button-group.component.html' }) -export class NzButtonGroupComponent { - private _size: NzButtonGroupSize; - private prefixCls = 'ant-btn-group'; - private sizeMap = { large: 'lg', small: 'sm' }; - classMap = { - [ this.prefixCls ] : true, - [ `${this.prefixCls}-${this.sizeMap[ this.nzSize ]}` ]: this.sizeMap[ this.nzSize ] - }; - @ViewChild('groupWrapper') groupWrapper: ElementRef; +export class NzButtonGroupComponent implements OnInit { @Input() - get nzSize(): NzButtonGroupSize { + get nzSize(): NzSizeLDSType { return this._size; } - set nzSize(value: NzButtonGroupSize) { + set nzSize(value: NzSizeLDSType) { this._size = value; - this.classMap = { - [ this.prefixCls ] : true, - [ `${this.prefixCls}-${this.sizeMap[ this.nzSize ]}` ]: this.sizeMap[ this.nzSize ] + this.setClassMap(); + } + + constructor(private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef) { + } + + private _size: NzSizeLDSType; + private prefixCls = 'ant-btn-group'; + + setClassMap(): void { + const classMap = { + [ this.prefixCls ] : true, + [ `${this.prefixCls}-lg` ]: this.nzSize === 'large', + [ `${this.prefixCls}-sm` ]: this.nzSize === 'small' }; + this.nzUpdateHostClassService.updateHostClass(this.elementRef.nativeElement, classMap); + } + + ngOnInit(): void { + this.setClassMap(); } } diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts index d21c96c145a..d2d96c372fb 100644 --- a/components/button/nz-button.component.ts +++ b/components/button/nz-button.component.ts @@ -1,5 +1,6 @@ import { AfterContentInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, @@ -15,36 +16,28 @@ import { } from '@angular/core'; import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; -import { filterNotEmptyNode, isEmpty } from '../core/util/check'; +import { NzSizeLDSType } from '../core/types/size'; +import { isEmpty } from '../core/util/check'; import { toBoolean } from '../core/util/convert'; +import { findFirstNotEmptyNode, findLastNotEmptyNode } from '../core/util/dom'; import { NzWaveDirective } from '../core/wave/nz-wave.directive'; import { NzIconDirective } from '../icon/nz-icon.directive'; export type NzButtonType = 'primary' | 'dashed' | 'danger'; export type NzButtonShape = 'circle' | null ; -export type NzButtonSize = 'small' | 'large' | 'default' ; @Component({ selector : '[nz-button]', providers : [ NzUpdateHostClassService ], preserveWhitespaces: false, + changeDetection : ChangeDetectionStrategy.OnPush, templateUrl : './nz-button.component.html' }) export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { - private _ghost = false; - private _search = false; - private _type: NzButtonType; - private _shape: NzButtonShape; - private _size: NzButtonSize; - private _loading = false; - private _block = false; - private el: HTMLElement = this.elementRef.nativeElement; - private iconElement: HTMLElement; - private iconOnly = false; - private prefixCls = 'ant-btn'; - private sizeMap = { large: 'lg', small: 'sm' }; + readonly el: HTMLElement = this.elementRef.nativeElement; @ViewChild('contentElement') contentElement: ElementRef; @ContentChildren(NzIconDirective, { read: ElementRef }) listOfIconElement: QueryList; + @HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(this.ngZone, this.elementRef); @Input() set nzBlock(value: boolean) { @@ -97,12 +90,12 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { } @Input() - set nzSize(value: NzButtonSize) { + set nzSize(value: NzSizeLDSType) { this._size = value; this.setClassMap(); } - get nzSize(): NzButtonSize { + get nzSize(): NzSizeLDSType { return this._size; } @@ -117,7 +110,20 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { return this._loading; } - @HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(this.ngZone, this.elementRef); + constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private ngZone: NgZone) { + } + + private _ghost = false; + private _search = false; + private _type: NzButtonType; + private _shape: NzButtonShape; + private _size: NzSizeLDSType; + private _loading = false; + private _block = false; + private iconElement: HTMLElement; + private iconOnly = false; + private prefixCls = 'ant-btn'; + private sizeMap = { large: 'lg', small: 'sm' }; updateIconDisplay(value: boolean): void { if (this.iconElement) { @@ -128,6 +134,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289 */ setClassMap(): void { const classMap = { + [ `${this.prefixCls}` ] : true, [ `${this.prefixCls}-${this.nzType}` ] : this.nzType, [ `${this.prefixCls}-${this.nzShape}` ] : this.nzShape, [ `${this.prefixCls}-${this.sizeMap[ this.nzSize ]}` ]: this.sizeMap[ this.nzSize ], @@ -161,8 +168,8 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { moveIcon(): void { if (this.listOfIconElement && this.listOfIconElement.length) { - const firstChildElement = this.findFirstNotEmptyNode(this.contentElement.nativeElement); - const lastChildElement = this.findLastNotEmptyNode(this.contentElement.nativeElement); + const firstChildElement = findFirstNotEmptyNode(this.contentElement.nativeElement); + const lastChildElement = findLastNotEmptyNode(this.contentElement.nativeElement); if (firstChildElement && (firstChildElement === this.listOfIconElement.first.nativeElement)) { this.renderer.insertBefore(this.el, firstChildElement, this.contentElement.nativeElement); this.iconElement = firstChildElement as HTMLElement; @@ -172,37 +179,12 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { } } - findFirstNotEmptyNode(element: HTMLElement): Node { - const children = element.childNodes; - for (let i = 0; i < children.length; i++) { - const node = children.item(i); - if (filterNotEmptyNode(node)) { - return node; - } - } - return null; - } - - findLastNotEmptyNode(element: HTMLElement): Node { - const children = element.childNodes; - for (let i = children.length - 1; i >= 0; i--) { - const node = children.item(i); - if (filterNotEmptyNode(node)) { - return node; - } - } - return null; - } - - constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private ngZone: NgZone) { - } - ngAfterContentInit(): void { this.checkContent(); } ngOnInit(): void { - this.renderer.addClass(this.el, this.prefixCls); + this.setClassMap(); this.nzWave.ngOnInit(); } diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts index c8498f96b7b..20d92d054b0 100644 --- a/components/button/nz-button.spec.ts +++ b/components/button/nz-button.spec.ts @@ -60,7 +60,7 @@ describe('button', () => { it('should have correct style', () => { fixture.detectChanges(); - expect(buttonGroup.nativeElement.firstElementChild.classList.contains('ant-btn-group')).toBe(true); + expect(buttonGroup.nativeElement.classList.contains('ant-btn-group')).toBe(true); }); it('should have no white space', () => { fixture.detectChanges(); @@ -220,15 +220,15 @@ describe('button', () => { it('should have correct style', () => { fixture.detectChanges(); expect(buttons.every(button => button.nativeElement.classList.contains('ant-btn-lg'))).toBe(true); - expect(buttonGroup.nativeElement.firstElementChild.classList.contains('ant-btn-group-lg')).toBe(true); + expect(buttonGroup.nativeElement.classList.contains('ant-btn-group-lg')).toBe(true); testComponent.size = 'default'; fixture.detectChanges(); expect(buttons.every(button => button.nativeElement.classList.contains('ant-btn-lg'))).toBe(false); - expect(buttonGroup.nativeElement.firstElementChild.classList.contains('ant-btn-group-lg')).toBe(false); + expect(buttonGroup.nativeElement.classList.contains('ant-btn-group-lg')).toBe(false); testComponent.size = 'small'; fixture.detectChanges(); expect(buttons.every(button => button.nativeElement.classList.contains('ant-btn-sm'))).toBe(true); - expect(buttonGroup.nativeElement.firstElementChild.classList.contains('ant-btn-group-sm')).toBe(true); + expect(buttonGroup.nativeElement.classList.contains('ant-btn-group-sm')).toBe(true); }); }); describe('icon', () => { diff --git a/components/calendar/nz-calendar-header.component.ts b/components/calendar/nz-calendar-header.component.ts index 314a0332279..d5e3a87fd27 100644 --- a/components/calendar/nz-calendar-header.component.ts +++ b/components/calendar/nz-calendar-header.component.ts @@ -12,7 +12,7 @@ import { NzI18nService as I18n } from '../i18n/nz-i18n.service'; }) export class NzCalendarHeaderComponent implements OnInit { @Input() mode: 'month' | 'year' = 'month'; - @Output() modeChange: EventEmitter<'month' | 'year'> = new EventEmitter(); + @Output() readonly modeChange: EventEmitter<'month' | 'year'> = new EventEmitter(); @Input() fullscreen: boolean = true; @@ -26,8 +26,8 @@ export class NzCalendarHeaderComponent implements OnInit { return this._activeDate; } - @Output() yearChange: EventEmitter = new EventEmitter(); - @Output() monthChange: EventEmitter = new EventEmitter(); + @Output() readonly yearChange: EventEmitter = new EventEmitter(); + @Output() readonly monthChange: EventEmitter = new EventEmitter(); _activeDate = new Date(); yearOffset: number = 10; diff --git a/components/calendar/nz-calendar.component.ts b/components/calendar/nz-calendar.component.ts index 21d5827ab2c..0fa7ccbe7b4 100644 --- a/components/calendar/nz-calendar.component.ts +++ b/components/calendar/nz-calendar.component.ts @@ -28,10 +28,10 @@ import { NzDateCellDirective as DateCell, NzDateFullCellDirective as DateFullCel }) export class NzCalendarComponent implements ControlValueAccessor, OnInit { @Input() nzMode: 'month'|'year' = 'month'; - @Output() nzModeChange: EventEmitter<'month'|'year'> = new EventEmitter(); + @Output() readonly nzModeChange: EventEmitter<'month'|'year'> = new EventEmitter(); @Input() set nzValue(value: Date) { this.updateDate(value, false); } - @Output() nzValueChange: EventEmitter = new EventEmitter(); + @Output() readonly nzValueChange: EventEmitter = new EventEmitter(); @Input() set nzDateCell(value: TemplateRef<{$implicit: Date}>) { this.dateCell = value; } diff --git a/components/card/nz-card-loading.component.ts b/components/card/nz-card-loading.component.ts index 0ff7c62dbe5..076278dcf4d 100644 --- a/components/card/nz-card-loading.component.ts +++ b/components/card/nz-card-loading.component.ts @@ -1,12 +1,14 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector : 'nz-card-loading', - templateUrl: './nz-card-loading.component.html', - host : { + selector : 'nz-card-loading', + templateUrl : './nz-card-loading.component.html', + preserveWhitespaces: false, + changeDetection : ChangeDetectionStrategy.OnPush, + host : { '[class.ant-card-loading-content]': 'true' }, - styles : [ ` + styles : [ ` :host { display: block; } diff --git a/components/card/nz-card-meta.component.ts b/components/card/nz-card-meta.component.ts index 6562f0abb49..8303d8c6ca7 100755 --- a/components/card/nz-card-meta.component.ts +++ b/components/card/nz-card-meta.component.ts @@ -1,12 +1,9 @@ -import { - Component, - Input, - TemplateRef -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core'; @Component({ selector : 'nz-card-meta', preserveWhitespaces: false, + changeDetection : ChangeDetectionStrategy.OnPush, templateUrl : './nz-card-meta.component.html', styles : [ ` :host { @@ -20,9 +17,6 @@ import { export class NzCardMetaComponent { isDescriptionString: boolean; isTitleString: boolean; - private _title: string | TemplateRef; - private _description: string | TemplateRef; - @Input() nzAvatar: TemplateRef; @Input() set nzTitle(value: string | TemplateRef) { @@ -43,4 +37,8 @@ export class NzCardMetaComponent { get nzDescription(): string | TemplateRef { return this._description; } + + @Input() nzAvatar: TemplateRef; + private _title: string | TemplateRef; + private _description: string | TemplateRef; } diff --git a/components/card/nz-card.component.html b/components/card/nz-card.component.html index 4c4bdf5ac8c..642416b5382 100755 --- a/components/card/nz-card.component.html +++ b/components/card/nz-card.component.html @@ -27,7 +27,7 @@
    -
  • +
\ No newline at end of file diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts index fed41712bd5..43b20cbf8ce 100755 --- a/components/card/nz-card.component.ts +++ b/components/card/nz-card.component.ts @@ -1,23 +1,15 @@ -import { - Component, - ContentChild, - HostBinding, - Input, - TemplateRef -} from '@angular/core'; - -import { toBoolean } from '../core/util/convert'; - +import { ChangeDetectionStrategy, Component, ContentChild, HostBinding, Input, TemplateRef } from '@angular/core'; +import { InputBoolean } from '../core/util/convert'; import { NzCardTabComponent } from './nz-card-tab.component'; @Component({ selector : 'nz-card', preserveWhitespaces: false, + changeDetection : ChangeDetectionStrategy.OnPush, templateUrl : './nz-card.component.html', styles : [ ` :host { display: block; - position: relative; } ` ], host : { @@ -26,18 +18,16 @@ import { NzCardTabComponent } from './nz-card-tab.component'; } }) export class NzCardComponent { - private _bordered = true; - private _loading = false; - private _hoverable = false; - private _title: string | TemplateRef; - private _extra: string | TemplateRef; - isTitleString: boolean; - isExtraString: boolean; - @ContentChild(NzCardTabComponent) tab: NzCardTabComponent; + @Input() @InputBoolean() @HostBinding('class.ant-card-bordered') nzBordered = true; + @Input() @InputBoolean() nzLoading = false; + @Input() @InputBoolean() @HostBinding('class.ant-card-hoverable') nzHoverable = false; @Input() nzBodyStyle: { [ key: string ]: string }; @Input() nzCover: TemplateRef; @Input() nzActions: Array> = []; @Input() nzType: string; + @ContentChild(NzCardTabComponent) tab: NzCardTabComponent; + isTitleString: boolean; + isExtraString: boolean; @Input() set nzTitle(value: string | TemplateRef) { @@ -69,32 +59,6 @@ export class NzCardComponent { return !!this.tab; } - @Input() - @HostBinding('class.ant-card-bordered') - set nzBordered(value: boolean) { - this._bordered = toBoolean(value); - } - - get nzBordered(): boolean { - return this._bordered; - } - - @Input() - set nzLoading(value: boolean) { - this._loading = toBoolean(value); - } - - get nzLoading(): boolean { - return this._loading; - } - - @Input() - @HostBinding('class.ant-card-hoverable') - set nzHoverable(value: boolean) { - this._hoverable = toBoolean(value); - } - - get nzHoverable(): boolean { - return this._hoverable; - } + private _title: string | TemplateRef; + private _extra: string | TemplateRef; } diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts index 7658f01aa7f..8143b2c4a8f 100755 --- a/components/carousel/nz-carousel.component.ts +++ b/components/carousel/nz-carousel.component.ts @@ -70,8 +70,8 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte @ContentChildren(NzCarouselContentDirective) slideContents: QueryList; @ViewChild('slickList') slickList: ElementRef; @ViewChild('slickTrack') slickTrack: ElementRef; - @Output() nzAfterChange: EventEmitter = new EventEmitter(); - @Output() nzBeforeChange: EventEmitter<{ from: number; to: number }> = new EventEmitter(); + @Output() readonly nzAfterChange: EventEmitter = new EventEmitter(); + @Output() readonly nzBeforeChange: EventEmitter<{ from: number; to: number }> = new EventEmitter(); @Input() nzEnableSwipe = true; @HostListener('window:resize', [ '$event' ]) diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts index 64b8964e5d9..d755dccab11 100644 --- a/components/cascader/nz-cascader.component.ts +++ b/components/cascader/nz-cascader.component.ts @@ -393,24 +393,24 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces @Input() nzLoadData: (node: CascaderOption, index?: number) => PromiseLike; /** Event: emit on popup show or hide */ - @Output() nzVisibleChange = new EventEmitter(); + @Output() readonly nzVisibleChange = new EventEmitter(); /** Event: emit on values changed */ - @Output() nzChange = new EventEmitter(); + @Output() readonly nzChange = new EventEmitter(); /** Event: emit on values and selection changed */ - @Output() nzSelectionChange = new EventEmitter(); + @Output() readonly nzSelectionChange = new EventEmitter(); /** * Event: emit on option selected, event data：{option: any, index: number} */ - @Output() nzSelect = new EventEmitter<{ + @Output() readonly nzSelect = new EventEmitter<{ option: CascaderOption, index: number }>(); /** Event: emit on the clear button clicked */ - @Output() nzClear = new EventEmitter(); + @Output() readonly nzClear = new EventEmitter(); @ViewChild('input') input: ElementRef; /** 浮层菜单 */ diff --git a/components/checkbox/nz-checkbox-wrapper.component.ts b/components/checkbox/nz-checkbox-wrapper.component.ts index a1b0dff366e..b39557a9aa3 100644 --- a/components/checkbox/nz-checkbox-wrapper.component.ts +++ b/components/checkbox/nz-checkbox-wrapper.component.ts @@ -11,7 +11,7 @@ import { NzCheckboxComponent } from './nz-checkbox.component'; } }) export class NzCheckboxWrapperComponent { - @Output() nzOnChange = new EventEmitter(); + @Output() readonly nzOnChange = new EventEmitter(); private checkboxList: NzCheckboxComponent[] = []; addCheckbox(value: NzCheckboxComponent): void { diff --git a/components/checkbox/nz-checkbox.component.ts b/components/checkbox/nz-checkbox.component.ts index c5fb0d53149..933cc1d520b 100644 --- a/components/checkbox/nz-checkbox.component.ts +++ b/components/checkbox/nz-checkbox.component.ts @@ -47,7 +47,7 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan private inputElement: ElementRef; @ViewChild('contentElement') contentElement: ElementRef; classMap = {}; - @Output() nzCheckedChange = new EventEmitter(); + @Output() readonly nzCheckedChange = new EventEmitter(); @Input() nzValue: string; @Input() diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts index 8d5f248ac18..8c9a98af263 100644 --- a/components/collapse/nz-collapse-panel.component.ts +++ b/components/collapse/nz-collapse-panel.component.ts @@ -58,7 +58,7 @@ export class NzCollapsePanelComponent implements OnDestroy, OnInit { private _header: string | TemplateRef; isHeaderString: boolean; private el: HTMLElement = this.elementRef.nativeElement; - @Output() nzActiveChange = new EventEmitter(); + @Output() readonly nzActiveChange = new EventEmitter(); @Input() set nzShowArrow(value: boolean) { this._showArrow = toBoolean(value); diff --git a/components/core/animation/animation.ts b/components/core/animation/animation.ts new file mode 100644 index 00000000000..19badc08627 --- /dev/null +++ b/components/core/animation/animation.ts @@ -0,0 +1,16 @@ +export class AnimationCurves { + static EASE_BASE_OUT = 'cubic-bezier(0.7, 0.3, 0.1, 1)'; + static EASE_BASE_IN = 'cubic-bezier(0.9, 0, 0.3, 0.7)'; + static EASE_OUT = 'cubic-bezier(0.215, 0.61, 0.355, 1)'; + static EASE_IN = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'; + static EASE_IN_OUT = 'cubic-bezier(0.645, 0.045, 0.355, 1)'; + static EASE_OUT_BACK = 'cubic-bezier(0.12, 0.4, 0.29, 1.46)'; + static EASE_IN_BACK = 'cubic-bezier(0.71, -0.46, 0.88, 0.6)'; + static EASE_IN_OUT_BACK = 'cubic-bezier(0.71, -0.46, 0.29, 1.46)'; + static EASE_OUT_CIRC = 'cubic-bezier(0.08, 0.82, 0.17, 1)'; + static EASE_IN_CIRC = 'cubic-bezier(0.6, 0.04, 0.98, 0.34)'; + static EASE_IN_OUT_CIRC = 'cubic-bezier(0.78, 0.14, 0.15, 0.86)'; + static EASE_OUT_QUINT = 'cubic-bezier(0.23, 1, 0.32, 1)'; + static EASE_IN_QUINT = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)'; + static EASE_IN_OUT_QUINT = 'cubic-bezier(0.86, 0, 0.07, 1)'; +} diff --git a/components/core/polyfill/match-media.ts b/components/core/polyfill/match-media.ts index 2fa32a89c09..34db0472319 100644 --- a/components/core/polyfill/match-media.ts +++ b/components/core/polyfill/match-media.ts @@ -7,12 +7,19 @@ function matchMediaFunc(): (mediaQuery: string) => MediaQueryList { } else { const matchMediaPolyfill = (mediaQuery: string): MediaQueryList => { return { - media : mediaQuery, - matches: false, + media : mediaQuery, + onchange : () => { + }, + addEventListener : () => { + }, + removeEventListener: () => { + }, + dispatchEvent : () => false, + matches : false, addListener(): void { }, removeListener(): void { - }, + } }; }; return matchMediaPolyfill; diff --git a/components/core/polyfill/request-animation.ts b/components/core/polyfill/request-animation.ts index a28bfe3444a..021fd07384a 100644 --- a/components/core/polyfill/request-animation.ts +++ b/components/core/polyfill/request-animation.ts @@ -1,12 +1,14 @@ // tslint:disable:no-any typedef no-invalid-this -const availablePrefixs = ['moz', 'ms', 'webkit']; +const availablePrefixs = [ 'moz', 'ms', 'webkit' ]; function requestAnimationFramePolyfill(): typeof requestAnimationFrame { let lastTime = 0; return function (callback: FrameRequestCallback): number { const currTime = new Date().getTime(); const timeToCall = Math.max(0, 16 - (currTime - lastTime)); - const id = window.setTimeout(() => { callback(currTime + timeToCall); }, timeToCall); + const id = window.setTimeout(() => { + callback(currTime + timeToCall); + }, timeToCall); lastTime = currTime + timeToCall; return id; }; @@ -21,10 +23,10 @@ function getRequestAnimationFrame(): typeof requestAnimationFrame { return window.requestAnimationFrame.bind(window); } - const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0]; + const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[ 0 ]; return prefix - ? window[`${prefix}RequestAnimationFrame`] + ? window[ `${prefix}RequestAnimationFrame` ] : requestAnimationFramePolyfill(); } @@ -36,13 +38,13 @@ export function cancelRequestAnimationFrame(id: number): any { return window.cancelAnimationFrame(id); } const prefix = availablePrefixs.filter(key => - `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window, - )[0]; + `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window + )[ 0 ]; return prefix ? ( - (window as any)[`${prefix}CancelAnimationFrame`] || - (window as any)[`${prefix}CancelRequestAnimationFrame`] + (window as any)[ `${prefix}CancelAnimationFrame` ] || + (window as any)[ `${prefix}CancelRequestAnimationFrame` ] ).call(this, id) : clearTimeout(id); } diff --git a/components/core/types/common-wrap.ts b/components/core/types/common-wrap.ts index 7619f594845..f620db9929b 100644 --- a/components/core/types/common-wrap.ts +++ b/components/core/types/common-wrap.ts @@ -1,2 +1,2 @@ // Define a property that can also returned by called function -export type FunctionProp = T | ((...args: any[]) => T) ; // tslint:disable-line:no-any +export type FunctionProp = (...args: any[]) => T ; // tslint:disable-line:no-any diff --git a/components/core/types/ng-class.ts b/components/core/types/ng-class.ts new file mode 100644 index 00000000000..63f9f6733f9 --- /dev/null +++ b/components/core/types/ng-class.ts @@ -0,0 +1,2 @@ +// tslint:disable-next-line:no-any +export type NgClassType = string | string[] | Set | { [ klass: string ]: any; }; diff --git a/components/core/types/size.ts b/components/core/types/size.ts new file mode 100644 index 00000000000..e1e0cc133b3 --- /dev/null +++ b/components/core/types/size.ts @@ -0,0 +1,2 @@ +export type NzSizeLDSType = 'large' | 'default' | 'small'; +export type NzSizeDSType = 'default' | 'small'; diff --git a/components/core/util/dom.ts b/components/core/util/dom.ts new file mode 100644 index 00000000000..e2e5c6f8f42 --- /dev/null +++ b/components/core/util/dom.ts @@ -0,0 +1,23 @@ +import { filterNotEmptyNode } from './check'; + +export function findFirstNotEmptyNode(element: HTMLElement): Node { + const children = element.childNodes; + for (let i = 0; i < children.length; i++) { + const node = children.item(i); + if (filterNotEmptyNode(node)) { + return node; + } + } + return null; +} + +export function findLastNotEmptyNode(element: HTMLElement): Node { + const children = element.childNodes; + for (let i = children.length - 1; i >= 0; i--) { + const node = children.item(i); + if (filterNotEmptyNode(node)) { + return node; + } + } + return null; +} \ No newline at end of file diff --git a/components/core/util/throttleByAnimationFrame.ts b/components/core/util/throttleByAnimationFrame.ts index 27545dc3326..e61c17ccae4 100644 --- a/components/core/util/throttleByAnimationFrame.ts +++ b/components/core/util/throttleByAnimationFrame.ts @@ -22,7 +22,7 @@ export default function throttleByAnimationFrame(fn: any) { } export function throttleByAnimationFrameDecorator() { - return function(target: any, key: string, descriptor: any) { + return function (target: any, key: string, descriptor: any) { const fn = descriptor.value; let definingProperty = false; return { @@ -35,13 +35,13 @@ export function throttleByAnimationFrameDecorator() { const boundFn = throttleByAnimationFrame(fn.bind(this)); definingProperty = true; Object.defineProperty(this, key, { - value: boundFn, + value : boundFn, configurable: true, - writable: true, + writable : true }); definingProperty = false; return boundFn; - }, + } }; }; } diff --git a/components/date-picker/abstract-picker.component.ts b/components/date-picker/abstract-picker.component.ts index f798798c56b..fc64cf8c9ef 100644 --- a/components/date-picker/abstract-picker.component.ts +++ b/components/date-picker/abstract-picker.component.ts @@ -37,7 +37,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe @Input() nzDropdownClassName: string; @Input() nzSize: 'large' | 'small'; @Input() nzStyle: object; - @Output() nzOnOpenChange = new EventEmitter(); + @Output() readonly nzOnOpenChange = new EventEmitter(); @Input() nzFormat: string; diff --git a/components/date-picker/date-range-picker.component.ts b/components/date-picker/date-range-picker.component.ts index b9a33cab892..a0aa38ff9a0 100644 --- a/components/date-picker/date-range-picker.component.ts +++ b/components/date-picker/date-range-picker.component.ts @@ -21,7 +21,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements @Input() @InputBoolean() nzShowToday: boolean = true; @Input() nzMode: PanelMode | PanelMode[]; @Input() nzRanges: FunctionProp; - @Output() nzOnPanelChange = new EventEmitter(); + @Output() readonly nzOnPanelChange = new EventEmitter(); private _showTime: object | boolean; @Input() get nzShowTime(): object | boolean { return this._showTime; } @@ -29,7 +29,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements this._showTime = typeof value === 'object' ? value : toBoolean(value); } - @Output() nzOnOk = new EventEmitter(); + @Output() readonly nzOnOk = new EventEmitter(); get realShowToday(): boolean { // Range not support nzShowToday currently return !this.isRange && this.nzShowToday; diff --git a/components/date-picker/lib/popups/date-range-popup.component.ts b/components/date-picker/lib/popups/date-range-popup.component.ts index 19d796f48f6..00d3600d708 100644 --- a/components/date-picker/lib/popups/date-range-popup.component.ts +++ b/components/date-picker/lib/popups/date-range-popup.component.ts @@ -1,7 +1,6 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef } from '@angular/core'; import { FunctionProp } from '../../../core/types/common-wrap'; -import { valueFunctionProp } from '../../../core/util/convert'; import { NzCalendarI18nInterface } from '../../../i18n/nz-i18n.interface'; import { DisabledDateFn, @@ -237,11 +236,11 @@ export class DateRangePopupComponent implements OnInit, OnChanges { return this.selectedValue && !!this.selectedValue[ 1 ] && !!this.selectedValue[ 0 ]; } - disabledStartTime = (value: Date): DisabledTimeConfig => { + disabledStartTime = (value: Date | Date[]): DisabledTimeConfig => { return this.disabledTime && this.disabledTime(value, 'start'); } - disabledEndTime = (value: Date): DisabledTimeConfig => { + disabledEndTime = (value: Date | Date[]): DisabledTimeConfig => { return this.disabledTime && this.disabledTime(value, 'end'); } @@ -286,7 +285,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges { } onClickPresetRange(val: Date[]): void { - const value = valueFunctionProp(val); + const value = val; this.setValue([ new CandyDate(value[ 0 ]), new CandyDate(value[ 1 ]) ]); this.resultOk.emit(); } diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts index 25567778e54..47008e47d4a 100644 --- a/components/date-picker/picker.component.ts +++ b/components/date-picker/picker.component.ts @@ -43,9 +43,9 @@ export class NzPickerComponent implements OnInit, AfterViewInit { @Input() style: object; @Input() value: CandyDate | CandyDate[]; - @Output() valueChange = new EventEmitter(); + @Output() readonly valueChange = new EventEmitter(); - @Output() openChange = new EventEmitter(); // Emitted when overlay's open state change + @Output() readonly openChange = new EventEmitter(); // Emitted when overlay's open state change @ViewChild('origin') origin: CdkOverlayOrigin; @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay; diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts index b0392fdd223..4470239c5c8 100644 --- a/components/drawer/nz-drawer.component.ts +++ b/components/drawer/nz-drawer.component.ts @@ -127,8 +127,8 @@ export class NzDrawerComponent extends NzDrawerRef return this.isOpen; } - @Output() nzOnViewInit = new EventEmitter(); - @Output() nzOnClose = new EventEmitter(); + @Output() readonly nzOnViewInit = new EventEmitter(); + @Output() readonly nzOnClose = new EventEmitter(); nzAfterOpen = new Subject(); nzAfterClose = new Subject(); diff --git a/components/dropdown/nz-dropdown-button.component.ts b/components/dropdown/nz-dropdown-button.component.ts index a9f41a54e36..d607d58ee5e 100644 --- a/components/dropdown/nz-dropdown-button.component.ts +++ b/components/dropdown/nz-dropdown-button.component.ts @@ -44,7 +44,7 @@ export class NzDropDownButtonComponent extends NzDropDownComponent implements On @Input() nzSize = 'default'; @Input() nzType = 'default'; @ViewChild('content') content; - @Output() nzClick = new EventEmitter(); + @Output() readonly nzClick = new EventEmitter(); @ViewChild(NzDropDownDirective) nzOrigin; onVisibleChange = (visible: boolean) => { diff --git a/components/dropdown/nz-dropdown.component.ts b/components/dropdown/nz-dropdown.component.ts index 6b621bb29f2..331bdd5e664 100644 --- a/components/dropdown/nz-dropdown.component.ts +++ b/components/dropdown/nz-dropdown.component.ts @@ -62,7 +62,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit { @ContentChild(NzDropDownDirective) nzOrigin: NzDropDownDirective; @ContentChild(NzMenuDirective) nzMenu: NzMenuDirective; @Input() nzTrigger: 'click' | 'hover' = 'hover'; - @Output() nzVisibleChange: EventEmitter = new EventEmitter(); + @Output() readonly nzVisibleChange: EventEmitter = new EventEmitter(); @ViewChild(CdkConnectedOverlay) cdkOverlay: CdkConnectedOverlay; @Input() diff --git a/components/grid/nz-row.component.ts b/components/grid/nz-row.component.ts index 8c24d94ecec..697e63d61e0 100644 --- a/components/grid/nz-row.component.ts +++ b/components/grid/nz-row.component.ts @@ -13,17 +13,18 @@ import { NzUpdateHostClassService } from '../core/services/update-host-class.ser export type NzJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between'; export type NzAlign = 'top' | 'middle' | 'bottom'; export type NzType = 'flex' | null; -export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; - -export interface BreakpointMap { - xs?: string; - sm?: string; - md?: string; - lg?: string; - xl?: string; - xxl?: string; + +export enum Breakpoint { + 'xxl', + 'xl', + 'lg', + 'md', + 'sm', + 'xs' } +export type BreakpointMap = { [index in keyof typeof Breakpoint]: string }; + const responsiveMap: BreakpointMap = { xs : '(max-width: 575px)', sm : '(min-width: 576px)', @@ -116,6 +117,7 @@ export class NzRowComponent implements OnInit { } watchMedia(): void { + // @ts-ignore Object.keys(responsiveMap).map((screen: Breakpoint) => { const matchBelow = matchMedia(responsiveMap[ screen ]).matches; if (matchBelow) { diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts index 22983a04636..66faf9eb599 100644 --- a/components/input-number/nz-input-number.component.ts +++ b/components/input-number/nz-input-number.component.ts @@ -9,6 +9,7 @@ import { ViewChild } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { NzSizeLDSType } from '../core/types/size'; import { isNotNil } from '../core/util/check'; import { toBoolean } from '../core/util/convert'; @@ -46,7 +47,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn onChange: (value: number) => void = () => null; onTouched: () => void = () => null; @ViewChild('inputElement') inputElement: ElementRef; - @Input() nzSize: 'small' | 'default' | 'large' = 'default'; + @Input() nzSize: NzSizeLDSType = 'default'; @Input() nzMin: number = -Infinity; @Input() nzMax: number = Infinity; @Input() nzParser = (value) => value; diff --git a/components/input/nz-input-group.component.ts b/components/input/nz-input-group.component.ts index 3262ccda137..3649f40c86a 100644 --- a/components/input/nz-input-group.component.ts +++ b/components/input/nz-input-group.component.ts @@ -8,12 +8,11 @@ import { QueryList, TemplateRef } from '@angular/core'; +import { NgClassType } from '../core/types/ng-class'; +import { NzSizeLDSType } from '../core/types/size'; import { toBoolean } from '../core/util/convert'; import { NzInputDirective } from './nz-input.directive'; -// tslint:disable-next-line:no-any -export type TInputGroupIconClass = string | string[] | Set | { [ klass: string ]: any; }; -export type NzInputGroupSizeType = 'large' | 'default' | 'small'; @Component({ selector : 'nz-input-group', @@ -26,7 +25,7 @@ export class NzInputGroupComponent implements AfterContentInit { private _addOnAfter: string | TemplateRef = ''; private _prefix: string | TemplateRef = ''; private _suffix: string | TemplateRef = ''; - private _size: NzInputGroupSizeType = 'default'; + private _size: NzSizeLDSType = 'default'; private _compact = false; private _search = false; isAddOnBeforeString: boolean; @@ -34,17 +33,17 @@ export class NzInputGroupComponent implements AfterContentInit { isPrefixString: boolean; isSuffixString: boolean; @ContentChildren(NzInputDirective) nzInputDirectiveQueryList: QueryList; - @Input() nzAddOnBeforeIcon: TInputGroupIconClass; - @Input() nzAddOnAfterIcon: TInputGroupIconClass; - @Input() nzPrefixIcon: TInputGroupIconClass; - @Input() nzSuffixIcon: TInputGroupIconClass; + @Input() nzAddOnBeforeIcon: NgClassType; + @Input() nzAddOnAfterIcon: NgClassType; + @Input() nzPrefixIcon: NgClassType; + @Input() nzSuffixIcon: NgClassType; - @Input() set nzSize(value: NzInputGroupSizeType) { + @Input() set nzSize(value: NzSizeLDSType) { this._size = value; this.updateChildrenInputSize(); } - get nzSize(): NzInputGroupSizeType { + get nzSize(): NzSizeLDSType { return this._size; } diff --git a/components/layout/nz-sider.component.ts b/components/layout/nz-sider.component.ts index 4bba5dc4cf5..9ab50dcdaa3 100644 --- a/components/layout/nz-sider.component.ts +++ b/components/layout/nz-sider.component.ts @@ -84,7 +84,7 @@ export class NzSiderComponent implements OnInit, AfterViewInit { return this._collapsed; } - @Output() nzCollapsedChange = new EventEmitter(); + @Output() readonly nzCollapsedChange = new EventEmitter(); @HostBinding('class.ant-layout-sider-zero-width') get setZeroClass(): boolean { diff --git a/components/list/demo/infinite-load.ts b/components/list/demo/infinite-load.ts index f6c04ef0da3..cd07abdffef 100644 --- a/components/list/demo/infinite-load.ts +++ b/components/list/demo/infinite-load.ts @@ -8,28 +8,28 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email, @Component({ selector: 'nz-demo-list-infinite-load', template: ` -
- - - - - - {{item.name.last}} - - - - - - -
+ + + + + + + + + + + + + + + + + + + + + + `, styles: [ ` :host ::ng-deep .demo-infinite-container { diff --git a/components/list/interface.ts b/components/list/interface.ts index 5e351f82a68..2b33a970099 100644 --- a/components/list/interface.ts +++ b/components/list/interface.ts @@ -13,5 +13,3 @@ export interface NzListGrid { xl?: ColumnCount; xxl?: ColumnCount; } - -export type ListSize = 'small' | 'default' | 'large'; diff --git a/components/list/nz-list.component.ts b/components/list/nz-list.component.ts index fb6c6de4929..6f1d0718840 100644 --- a/components/list/nz-list.component.ts +++ b/components/list/nz-list.component.ts @@ -12,10 +12,11 @@ import { import { Subscription } from 'rxjs'; import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; +import { NzSizeLDSType } from '../core/types/size'; import { InputBoolean } from '../core/util/convert'; import { NzI18nService } from '../i18n/nz-i18n.service'; -import { ListSize, NzListGrid } from './interface'; +import { NzListGrid } from './interface'; @Component({ selector : 'nz-list', @@ -88,7 +89,7 @@ export class NzListComponent implements OnInit, OnChanges, OnDestroy { @Input() nzPagination: TemplateRef; - @Input() nzSize: ListSize = 'default'; + @Input() nzSize: NzSizeLDSType = 'default'; @Input() @InputBoolean() nzSplit = true; diff --git a/components/mention/mention.component.ts b/components/mention/mention.component.ts index 9f9afd58311..b2770d789fb 100644 --- a/components/mention/mention.component.ts +++ b/components/mention/mention.component.ts @@ -57,8 +57,8 @@ export interface MentionOnSearchTypes { export class NzMentionComponent implements OnDestroy, AfterContentInit { - @Output() nzOnSelect: EventEmitter = new EventEmitter(); - @Output() nzOnSearchChange: EventEmitter = new EventEmitter(); + @Output() readonly nzOnSelect: EventEmitter = new EventEmitter(); + @Output() readonly nzOnSearchChange: EventEmitter = new EventEmitter(); @Input() nzValueWith: (value: any) => string = value => value; // tslint:disable-line:no-any @Input() nzPrefix: string | string[] = '@'; @@ -298,9 +298,9 @@ export class NzMentionComponent implements OnDestroy, AfterContentInit { } private subscribeOverlayBackdropClick(): Subscription { - return merge( - fromEvent(this.document, 'click'), - fromEvent(this.document, 'touchend') + return merge( + fromEvent(this.document, 'click'), + fromEvent(this.document, 'touchend') ) .subscribe((event: MouseEvent | TouchEvent) => { const clickTarget = event.target as HTMLElement; diff --git a/components/menu/nz-menu.directive.ts b/components/menu/nz-menu.directive.ts index 2343720d235..39b3e486acd 100644 --- a/components/menu/nz-menu.directive.ts +++ b/components/menu/nz-menu.directive.ts @@ -37,7 +37,7 @@ export class NzMenuDirective implements AfterContentInit { @Input() nzTheme: 'light' | 'dark' = 'light'; @Input() nzInlineIndent = 24; @Input() nzMode: NzMode = 'vertical'; - @Output() nzClick = new EventEmitter(); + @Output() readonly nzClick = new EventEmitter(); @Input() set nzInDropDown(value: boolean) { diff --git a/components/menu/nz-submenu.component.ts b/components/menu/nz-submenu.component.ts index dd99f6ff27f..4904ec7c4b8 100644 --- a/components/menu/nz-submenu.component.ts +++ b/components/menu/nz-submenu.component.ts @@ -101,7 +101,7 @@ export class NzSubMenuComponent implements OnInit, OnDestroy { level = 1; triggerWidth = null; @ContentChildren(NzSubMenuComponent, { descendants: true }) subMenus: QueryList; - @Output() nzOpenChange: EventEmitter = new EventEmitter(); + @Output() readonly nzOpenChange: EventEmitter = new EventEmitter(); @ViewChild(CdkConnectedOverlay) cdkOverlay: CdkConnectedOverlay; @ViewChild('trigger') trigger: ElementRef; diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts index 16792830a0c..18e82921150 100644 --- a/components/modal/nz-modal.component.ts +++ b/components/modal/nz-modal.component.ts @@ -61,7 +61,7 @@ export class NzModalComponent extends NzModalRef impleme @Input() nzGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) = () => this.overlay.create(); // [STATIC] @Input() @InputBoolean() nzVisible: boolean = false; - @Output() nzVisibleChange = new EventEmitter(); + @Output() readonly nzVisibleChange = new EventEmitter(); @Input() nzZIndex: number = 1000; @Input() nzWidth: number | string = 520; @@ -76,8 +76,8 @@ export class NzModalComponent extends NzModalRef impleme @Input() nzMaskStyle: object; @Input() nzBodyStyle: object; - @Output() nzAfterOpen = new EventEmitter(); // Trigger when modal open(visible) after animations - @Output() nzAfterClose = new EventEmitter(); // Trigger when modal leave-animation over + @Output() readonly nzAfterOpen = new EventEmitter(); // Trigger when modal open(visible) after animations + @Output() readonly nzAfterClose = new EventEmitter(); // Trigger when modal leave-animation over get afterOpen(): Observable { // Observable alias for nzAfterOpen return this.nzAfterOpen.asObservable(); } @@ -95,7 +95,7 @@ export class NzModalComponent extends NzModalRef impleme @Input() nzOkType = 'primary'; @Input() @InputBoolean() nzOkLoading: boolean = false; - @Input() @Output() nzOnOk: EventEmitter | OnClickCallback = new EventEmitter(); + @Input() @Output() readonly nzOnOk: EventEmitter | OnClickCallback = new EventEmitter(); @ViewChild('autoFocusButtonOk', { read: ElementRef }) autoFocusButtonOk: ElementRef; // Only aim to focus the ok button that needs to be auto focused @Input() nzCancelText: string; @@ -104,7 +104,7 @@ export class NzModalComponent extends NzModalRef impleme } @Input() @InputBoolean() nzCancelLoading: boolean = false; - @Input() @Output() nzOnCancel: EventEmitter | OnClickCallback = new EventEmitter(); + @Input() @Output() readonly nzOnCancel: EventEmitter | OnClickCallback = new EventEmitter(); @ViewChild('modalContainer') modalContainer: ElementRef; @ViewChild('bodyContainer', { read: ViewContainerRef }) bodyContainer: ViewContainerRef; diff --git a/components/package.json b/components/package.json index c4cd1c11c47..7fd6b2930f1 100644 --- a/components/package.json +++ b/components/package.json @@ -22,16 +22,16 @@ }, "dependencies": { "date-fns": "^1.29.0", - "@angular/cdk": "^6.0.0", - "@ant-design/icons-angular": "^1.0.1" + "@angular/cdk": "^7.0.0", + "@ant-design/icons-angular": "2.0.0-beta.1" }, "peerDependencies": { - "@angular/animations": "^6.0.0", - "@angular/cdk": "^6.0.0", - "@angular/common": "^6.0.0", - "@angular/core": "^6.0.0", - "@angular/forms": "^6.0.0", + "@angular/animations": "^7.0.0", + "@angular/cdk": "^7.0.0", + "@angular/common": "^7.0.0", + "@angular/core": "^7.0.0", + "@angular/forms": "^7.0.0", "tslib": "^1.9.0", - "typescript": "~2.9.2" + "typescript": "~3.1.1" } } diff --git a/components/pagination/nz-pagination.component.ts b/components/pagination/nz-pagination.component.ts index 307b6aba9e2..bf5b6b710c4 100644 --- a/components/pagination/nz-pagination.component.ts +++ b/components/pagination/nz-pagination.component.ts @@ -39,8 +39,8 @@ export class NzPaginationComponent implements OnInit, OnDestroy { @Input() nzShowTotal: TemplateRef<{ $implicit: number, range: [ number, number ] }>; @Input() nzInTable = false; @Input() nzSize: string; - @Output() nzPageSizeChange: EventEmitter = new EventEmitter(); - @Output() nzPageIndexChange: EventEmitter = new EventEmitter(); + @Output() readonly nzPageSizeChange: EventEmitter = new EventEmitter(); + @Output() readonly nzPageIndexChange: EventEmitter = new EventEmitter(); @Input() set nzItemRender(value: TemplateRef<{ $implicit: 'page' | 'prev' | 'next', page: number }>) { diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts index 7880282538c..c36ba3feed9 100644 --- a/components/popconfirm/nz-popconfirm.component.ts +++ b/components/popconfirm/nz-popconfirm.component.ts @@ -25,8 +25,8 @@ export class NzPopconfirmComponent extends NzToolTipComponent { _prefix = 'ant-popover-placement'; _trigger = 'click'; _hasBackdrop = true; - @Output() nzOnCancel: EventEmitter = new EventEmitter(); - @Output() nzOnConfirm: EventEmitter = new EventEmitter(); + @Output() readonly nzOnCancel: EventEmitter = new EventEmitter(); + @Output() readonly nzOnConfirm: EventEmitter = new EventEmitter(); @Input() nzOkText: string; @Input() nzOkType: string = 'primary'; diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts index af897f088d0..94ce7bfdfbf 100644 --- a/components/popconfirm/nz-popconfirm.directive.ts +++ b/components/popconfirm/nz-popconfirm.directive.ts @@ -32,8 +32,8 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit, _okType: string = 'primary'; _cancelText: string; - @Output() nzOnCancel: EventEmitter = new EventEmitter(); - @Output() nzOnConfirm: EventEmitter = new EventEmitter(); + @Output() readonly nzOnCancel: EventEmitter = new EventEmitter(); + @Output() readonly nzOnConfirm: EventEmitter = new EventEmitter(); @Input() set nzOkText(value: string) { diff --git a/components/radio/nz-radio-group.component.ts b/components/radio/nz-radio-group.component.ts index 35a6949bed0..53eb00cf874 100644 --- a/components/radio/nz-radio-group.component.ts +++ b/components/radio/nz-radio-group.component.ts @@ -7,10 +7,10 @@ import { Input } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { NzSizeLDSType } from '../core/types/size'; import { isNotNil } from '../core/util/check'; import { toBoolean } from '../core/util/convert'; -export type NzRadioGroupSizeType = 'large' | 'default' | 'small'; export type NzRadioButtonStyle = 'outline' | 'solid'; import { NzRadioButtonComponent } from './nz-radio-button.component'; @@ -32,7 +32,7 @@ import { NzRadioComponent } from './nz-radio.component'; ] }) export class NzRadioGroupComponent implements AfterContentInit, ControlValueAccessor { - private _size: NzRadioGroupSizeType = 'default'; + private _size: NzSizeLDSType = 'default'; private _name: string; private _disabled: boolean; el: HTMLElement = this.elementRef.nativeElement; @@ -45,11 +45,11 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce radios: Array = []; @Input() - set nzSize(value: NzRadioGroupSizeType) { + set nzSize(value: NzSizeLDSType) { this._size = value; } - get nzSize(): NzRadioGroupSizeType { + get nzSize(): NzSizeLDSType { return this._size; } diff --git a/components/rate/nz-rate.component.ts b/components/rate/nz-rate.component.ts index b6e8ec28e04..a3a3dd1c7b2 100644 --- a/components/rate/nz-rate.component.ts +++ b/components/rate/nz-rate.component.ts @@ -35,10 +35,10 @@ export class NzRateComponent implements OnInit, ControlValueAccessor, AfterViewI private _value = 0; private _autoFocus = false; @Input() nzCharacter: TemplateRef; - @Output() nzOnBlur = new EventEmitter(); - @Output() nzOnFocus = new EventEmitter(); - @Output() nzOnKeyDown = new EventEmitter(); - @Output() nzOnHoverChange = new EventEmitter(); + @Output() readonly nzOnBlur = new EventEmitter(); + @Output() readonly nzOnFocus = new EventEmitter(); + @Output() readonly nzOnKeyDown = new EventEmitter(); + @Output() readonly nzOnHoverChange = new EventEmitter(); @ViewChild('ulElement') private ulElement: ElementRef; prefixCls = 'ant-rate'; isInit = false; diff --git a/components/select/nz-option-container.component.ts b/components/select/nz-option-container.component.ts index 65a2421ea6a..484f7eb563f 100644 --- a/components/select/nz-option-container.component.ts +++ b/components/select/nz-option-container.component.ts @@ -38,10 +38,10 @@ export class NzOptionContainerComponent implements AfterContentInit, OnDestroy { @Input() listOfNzOptionComponent: QueryList; @Input() listOfNzOptionGroupComponent: QueryList; // tslint:disable-next-line:no-any - @Output() nzListOfSelectedValueChange = new EventEmitter(); - @Output() nzListOfTemplateOptionChange = new EventEmitter(); - @Output() nzClickOption = new EventEmitter(); - @Output() nzScrollToBottom = new EventEmitter(); + @Output() readonly nzListOfSelectedValueChange = new EventEmitter(); + @Output() readonly nzListOfTemplateOptionChange = new EventEmitter(); + @Output() readonly nzClickOption = new EventEmitter(); + @Output() readonly nzScrollToBottom = new EventEmitter(); @Input() nzMode = 'default'; @Input() nzServerSearch = false; @Input() nzFilterOption: TFilterOption = defaultFilterOption; diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts index 1497533991b..28fb0302fd9 100644 --- a/components/select/nz-select-top-control.component.ts +++ b/components/select/nz-select-top-control.component.ts @@ -40,8 +40,8 @@ export class NzSelectTopControlComponent { isComposing = false; @ViewChild('inputElement') inputElement: ElementRef; // tslint:disable-next-line:no-any - @Output() nzListOfSelectedValueChange = new EventEmitter(); - @Output() nzOnSearch = new EventEmitter<{ value: string, emit: boolean }>(); + @Output() readonly nzListOfSelectedValueChange = new EventEmitter(); + @Output() readonly nzOnSearch = new EventEmitter<{ value: string, emit: boolean }>(); @Input() nzMode = 'default'; @Input() nzShowSearch = false; @Input() nzDisabled = false; diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts index 4911f2a8df6..6efe4776eff 100644 --- a/components/select/nz-select.component.ts +++ b/components/select/nz-select.component.ts @@ -140,9 +140,9 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie /** should move to nz-option-container when https://github.com/angular/angular/issues/20810 resolved **/ @ContentChildren(NzOptionComponent) listOfNzOptionComponent: QueryList; @ContentChildren(NzOptionGroupComponent) listOfNzOptionGroupComponent: QueryList; - @Output() nzOnSearch = new EventEmitter(); - @Output() nzScrollToBottom = new EventEmitter(); - @Output() nzOpenChange = new EventEmitter(); + @Output() readonly nzOnSearch = new EventEmitter(); + @Output() readonly nzScrollToBottom = new EventEmitter(); + @Output() readonly nzOpenChange = new EventEmitter(); @Input() nzSize = 'default'; @Input() nzServerSearch = false; @Input() nzMode: 'default' | 'multiple' | 'tags' = 'default'; diff --git a/components/slider/nz-slider.component.ts b/components/slider/nz-slider.component.ts index e814ef48d2e..f55eb2fdc0b 100644 --- a/components/slider/nz-slider.component.ts +++ b/components/slider/nz-slider.component.ts @@ -74,7 +74,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange @Input() nzMax = 100; @Input() nzDefaultValue: SliderValue = null; @Input() nzTipFormatter: (value: number) => string; - @Output() nzOnAfterChange = new EventEmitter(); + @Output() readonly nzOnAfterChange = new EventEmitter(); @Input() set nzVertical(value: boolean) { @@ -376,7 +376,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange source.startPlucked$ = fromEvent(sliderDOM, start).pipe( filter(filterFunc), tap(this.utils.pauseEvent), - pluck(...pluckKey), + pluck(...pluckKey), map((position: number) => this.findClosestValue(position)) ); // end @@ -385,7 +385,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange source.moveResolved$ = fromEvent(document, move).pipe( filter(filterFunc), tap(this.utils.pauseEvent), - pluck(...pluckKey), + pluck(...pluckKey), distinctUntilChanged(), map((position: number) => this.findClosestValue(position)), distinctUntilChanged(), diff --git a/components/spin/nz-spin.component.html b/components/spin/nz-spin.component.html index bd9c121a08c..98eeb9f9c53 100644 --- a/components/spin/nz-spin.component.html +++ b/components/spin/nz-spin.component.html @@ -1,26 +1,26 @@ + [class.ant-spin-dot-spin]="(resultSpinning$|async) === true">
-
+
- +
{{ nzTip }}
diff --git a/components/steps/nz-step.component.ts b/components/steps/nz-step.component.ts index af4f5925011..c555a3a606b 100644 --- a/components/steps/nz-step.component.ts +++ b/components/steps/nz-step.component.ts @@ -7,9 +7,7 @@ import { } from '@angular/core'; import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; - -// tslint:disable-next-line:no-any -export type StepNgClassType = string | string[] | Set | { [ klass: string ]: any; }; +import { NgClassType } from '../core/types/ng-class'; @Component({ selector : 'nz-step', @@ -21,7 +19,7 @@ export class NzStepComponent { private _status = 'wait'; private _currentIndex = 0; private _description: string | TemplateRef; - private _icon: StepNgClassType | TemplateRef; + private _icon: NgClassType | TemplateRef; private _title: string | TemplateRef; private el: HTMLElement = this.elementRef.nativeElement; oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0. @@ -48,7 +46,7 @@ export class NzStepComponent { } @Input() - set nzIcon(value: StepNgClassType | TemplateRef) { + set nzIcon(value: NgClassType | TemplateRef) { if (!(value instanceof TemplateRef)) { this.isIconString = true; if (typeof value === 'string') { @@ -63,7 +61,7 @@ export class NzStepComponent { this._icon = value; } - get nzIcon(): StepNgClassType | TemplateRef { + get nzIcon(): NgClassType | TemplateRef { return this._icon; } diff --git a/components/steps/nz-steps.component.ts b/components/steps/nz-steps.component.ts index f0b4d566116..1df1af168b6 100644 --- a/components/steps/nz-steps.component.ts +++ b/components/steps/nz-steps.component.ts @@ -11,6 +11,7 @@ import { import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { NzSizeDSType } from '../core/types/size'; import { toBoolean } from '../core/util/convert'; @@ -18,7 +19,6 @@ import { NzStepComponent } from './nz-step.component'; export type NzDirectionType = 'horizontal' | 'vertical'; export type NzStatusType = 'wait' | 'process' | 'finish' | 'error'; -export type NzSizeType = 'default' | 'small'; @Component({ selector : 'nz-steps', @@ -28,7 +28,7 @@ export type NzSizeType = 'default' | 'small'; export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit { private _status: NzStatusType = 'process'; private _current = 0; - private _size: NzSizeType = 'default'; + private _size: NzSizeDSType = 'default'; private _direction: NzDirectionType = 'horizontal'; private _startIndex = 0; private unsubscribe$ = new Subject(); @@ -38,12 +38,12 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit { customProcessDotTemplate: TemplateRef<{ $implicit: TemplateRef, status: string, index: number }>; @ContentChildren(NzStepComponent) steps: QueryList; - @Input() set nzSize(value: NzSizeType) { + @Input() set nzSize(value: NzSizeDSType) { this._size = value; this.updateClassMap(); } - get nzSize(): NzSizeType { + get nzSize(): NzSizeDSType { return this._size; } diff --git a/components/switch/nz-switch.component.ts b/components/switch/nz-switch.component.ts index 2b19ca5572f..f79fa264713 100644 --- a/components/switch/nz-switch.component.ts +++ b/components/switch/nz-switch.component.ts @@ -9,11 +9,10 @@ import { ViewChild } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { NzSizeDSType } from '../core/types/size'; import { toBoolean } from '../core/util/convert'; -export type NzSwitchSizeType = 'default' | 'small'; - @Component({ selector : 'nz-switch', preserveWhitespaces: false, @@ -33,7 +32,7 @@ export type NzSwitchSizeType = 'default' | 'small'; }) export class NzSwitchComponent implements OnInit, ControlValueAccessor { private _disabled = false; - private _size: NzSwitchSizeType; + private _size: NzSizeDSType; private _loading = false; private _control = false; private _checkedChildren: string | TemplateRef; @@ -78,12 +77,12 @@ export class NzSwitchComponent implements OnInit, ControlValueAccessor { } @Input() - set nzSize(value: NzSwitchSizeType) { + set nzSize(value: NzSizeDSType) { this._size = value; this.setClassMap(); } - get nzSize(): NzSwitchSizeType { + get nzSize(): NzSizeDSType { return this._size; } diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts index 51b1466ba4a..87ede96015f 100644 --- a/components/table/nz-table.component.ts +++ b/components/table/nz-table.component.ts @@ -72,12 +72,12 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild('tableMainElement') tableMainElement: ElementRef; @ContentChildren(NzThComponent, { descendants: true }) listOfNzThComponent: QueryList; - @Output() nzPageSizeChange: EventEmitter = new EventEmitter(); - @Output() nzPageIndexChange: EventEmitter = new EventEmitter(); + @Output() readonly nzPageSizeChange: EventEmitter = new EventEmitter(); + @Output() readonly nzPageIndexChange: EventEmitter = new EventEmitter(); @Input() nzShowTotal: TemplateRef<{ $implicit: number, range: [ number, number ] }>; /* tslint:disable-next-line:no-any */ - @Output() nzCurrentPageDataChange: EventEmitter = new EventEmitter(); + @Output() readonly nzCurrentPageDataChange: EventEmitter = new EventEmitter(); @Input() nzSize: string = 'default'; /** page size changer select values */ @Input() nzPageSizeOptions = [ 10, 20, 30, 40, 50 ]; @@ -360,9 +360,9 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy { && this.tableHeaderElement.nativeElement && this.tableBodyElement && this.tableBodyElement.nativeElement) { - merge( - fromEvent(this.tableHeaderElement.nativeElement, 'scroll'), - fromEvent(this.tableBodyElement.nativeElement, 'scroll') + merge( + fromEvent(this.tableHeaderElement.nativeElement, 'scroll'), + fromEvent(this.tableBodyElement.nativeElement, 'scroll') ).pipe(takeUntil(this.unsubscribe$)).subscribe((data: MouseEvent) => { this.syncScrollTable(data); }); diff --git a/components/table/nz-td.component.ts b/components/table/nz-td.component.ts index a4245cdfde6..0ab3bc58a5c 100644 --- a/components/table/nz-td.component.ts +++ b/components/table/nz-td.component.ts @@ -25,8 +25,8 @@ export class NzTdComponent { @Input() nzChecked = false; @Input() nzDisabled = false; @Input() nzIndeterminate = false; - @Output() nzCheckedChange = new EventEmitter(); - @Output() nzExpandChange = new EventEmitter(); + @Output() readonly nzCheckedChange = new EventEmitter(); + @Output() readonly nzExpandChange = new EventEmitter(); @Input() set nzIndentSize(value: number) { diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts index 4b4090372fe..5f0a35d2358 100644 --- a/components/table/nz-th.component.ts +++ b/components/table/nz-th.component.ts @@ -53,11 +53,11 @@ export class NzThComponent { @Input() nzSortKey: string; @Input() nzFilterMultiple = true; @Input() nzWidth: string; - @Output() nzCheckedChange = new EventEmitter(); - @Output() nzSortChange = new EventEmitter(); - @Output() nzSortChangeWithKey = new EventEmitter<{ key: string, value: string }>(); + @Output() readonly nzCheckedChange = new EventEmitter(); + @Output() readonly nzSortChange = new EventEmitter(); + @Output() readonly nzSortChangeWithKey = new EventEmitter<{ key: string, value: string }>(); /* tslint:disable-next-line:no-any */ - @Output() nzFilterChange = new EventEmitter(); + @Output() readonly nzFilterChange = new EventEmitter(); @HostBinding('class.ant-table-column-has-actions') get hasActionsClass(): boolean { diff --git a/components/table/nz-thead.component.ts b/components/table/nz-thead.component.ts index 6ecb0a676c0..84c2348f843 100644 --- a/components/table/nz-thead.component.ts +++ b/components/table/nz-thead.component.ts @@ -32,7 +32,7 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy { @ViewChild('contentTemplate') template: TemplateRef; @ContentChildren(NzThComponent, { descendants: true }) listOfNzThComponent: QueryList; - @Output() nzSortChange = new EventEmitter<{ key: string, value: string }>(); + @Output() readonly nzSortChange = new EventEmitter<{ key: string, value: string }>(); @Input() set nzSingleSort(value: boolean) { diff --git a/components/tabs/nz-tab.component.ts b/components/tabs/nz-tab.component.ts index 78fb21d2e50..f9ccef6db72 100644 --- a/components/tabs/nz-tab.component.ts +++ b/components/tabs/nz-tab.component.ts @@ -37,9 +37,9 @@ export class NzTabComponent implements OnDestroy, OnInit { return this._disabled; } - @Output() nzClick = new EventEmitter(); - @Output() nzSelect = new EventEmitter(); - @Output() nzDeselect = new EventEmitter(); + @Output() readonly nzClick = new EventEmitter(); + @Output() readonly nzSelect = new EventEmitter(); + @Output() readonly nzDeselect = new EventEmitter(); @ViewChild(TemplateRef) content: TemplateRef; @Input() diff --git a/components/tabs/nz-tabs-nav.component.ts b/components/tabs/nz-tabs-nav.component.ts index bce07a4b914..018721a079c 100644 --- a/components/tabs/nz-tabs-nav.component.ts +++ b/components/tabs/nz-tabs-nav.component.ts @@ -53,8 +53,8 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit @ViewChild(NzTabsInkBarDirective) nzTabsInkBarDirective: NzTabsInkBarDirective; @ViewChild('navContainerElement') navContainerElement: ElementRef; @ViewChild('navListElement') navListElement: ElementRef; - @Output() nzOnNextClick = new EventEmitter(); - @Output() nzOnPrevClick = new EventEmitter(); + @Output() readonly nzOnNextClick = new EventEmitter(); + @Output() readonly nzOnPrevClick = new EventEmitter(); @Input() nzTabBarExtraContent: TemplateRef; @Input() diff --git a/components/tabs/nz-tabset.component.ts b/components/tabs/nz-tabset.component.ts index 00a496c76d1..24a4185f7be 100644 --- a/components/tabs/nz-tabset.component.ts +++ b/components/tabs/nz-tabset.component.ts @@ -75,8 +75,8 @@ export class NzTabSetComponent implements AfterContentChecked, OnInit, AfterView @Input() nzHideAll = false; @Input() nzTabBarGutter: number; @Input() nzTabBarStyle: { [ key: string ]: string }; - @Output() nzOnNextClick = new EventEmitter(); - @Output() nzOnPrevClick = new EventEmitter(); + @Output() readonly nzOnNextClick = new EventEmitter(); + @Output() readonly nzOnPrevClick = new EventEmitter(); @Input() set nzAnimated(value: NzAnimatedInterface | boolean) { @@ -104,7 +104,7 @@ export class NzTabSetComponent implements AfterContentChecked, OnInit, AfterView return this.nzSelectChange.pipe(map(event => event.index)); } - @Output() nzSelectChange: EventEmitter = new EventEmitter(true); + @Output() readonly nzSelectChange: EventEmitter = new EventEmitter(true); @Input() set nzSize(value: string) { this._size = value; diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts index 54578e8d88d..072c5a58366 100644 --- a/components/tag/nz-tag.component.ts +++ b/components/tag/nz-tag.component.ts @@ -46,9 +46,9 @@ export class NzTagComponent implements OnInit, AfterViewInit { classMap; closed = false; @ViewChild('wrapperElement') wrapperElement: ElementRef; - @Output() nzAfterClose = new EventEmitter(); - @Output() nzOnClose = new EventEmitter(); - @Output() nzCheckedChange = new EventEmitter(); + @Output() readonly nzAfterClose = new EventEmitter(); + @Output() readonly nzOnClose = new EventEmitter(); + @Output() readonly nzCheckedChange = new EventEmitter(); @Input() set nzMode(value: TagType) { diff --git a/components/time-picker/nz-time-picker-panel.component.ts b/components/time-picker/nz-time-picker-panel.component.ts index 8f249038642..98e4f8435c4 100644 --- a/components/time-picker/nz-time-picker-panel.component.ts +++ b/components/time-picker/nz-time-picker-panel.component.ts @@ -64,7 +64,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit, @Input() nzHideDisabledOptions = false; @Input() nzClearText: string; @Input() nzPlaceHolder: string; - @Output() timeClear = new EventEmitter(); + @Output() readonly timeClear = new EventEmitter(); @Input() set nzAllowEmpty(value: boolean) { diff --git a/components/time-picker/nz-time-picker.component.ts b/components/time-picker/nz-time-picker.component.ts index f805bfb276f..c412f4db16d 100644 --- a/components/time-picker/nz-time-picker.component.ts +++ b/components/time-picker/nz-time-picker.component.ts @@ -94,7 +94,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte @Input() nzDisabledSeconds: (hour: number, minute: number) => number[]; @Input() nzFormat = 'HH:mm:ss'; @Input() nzOpen = false; - @Output() nzOpenChange = new EventEmitter(); + @Output() readonly nzOpenChange = new EventEmitter(); @Input() set nzHideDisabledOptions(value: boolean) { diff --git a/components/tooltip/nz-tooltip.component.ts b/components/tooltip/nz-tooltip.component.ts index 8b3014a07c0..5b51582941e 100644 --- a/components/tooltip/nz-tooltip.component.ts +++ b/components/tooltip/nz-tooltip.component.ts @@ -50,7 +50,7 @@ export class NzToolTipComponent { visible$: Observable = this.visibleSource.asObservable(); @ContentChild('nzTemplate') _title: string | TemplateRef; @ViewChild('overlay') overlay: CdkConnectedOverlay; - @Output() nzVisibleChange: EventEmitter = new EventEmitter(); + @Output() readonly nzVisibleChange: EventEmitter = new EventEmitter(); @Input() nzOverlayClassName = ''; @Input() nzOverlayStyle: { [ key: string ]: string } = {}; diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts index 31110ade915..c1f08468d5a 100644 --- a/components/tooltip/nz-tooltip.directive.ts +++ b/components/tooltip/nz-tooltip.directive.ts @@ -42,7 +42,7 @@ export class NzTooltipDirective implements AfterViewInit, OnInit, OnDestroy { _trigger: string; _placement: string; factory: ComponentFactory = this.resolver.resolveComponentFactory(NzToolTipComponent); - @Output() nzVisibleChange = new EventEmitter(); + @Output() readonly nzVisibleChange = new EventEmitter(); @Input('nz-tooltip') set nzTitle(title: string | TemplateRef) { diff --git a/components/transfer/nz-transfer-list.component.ts b/components/transfer/nz-transfer-list.component.ts index 0e452bfa419..a955ead2c31 100644 --- a/components/transfer/nz-transfer-list.component.ts +++ b/components/transfer/nz-transfer-list.component.ts @@ -56,9 +56,9 @@ export class NzTransferListComponent implements OnChanges, OnInit, DoCheck { @Input() footer: TemplateRef; // events - @Output() handleSelectAll: EventEmitter = new EventEmitter(); - @Output() handleSelect: EventEmitter = new EventEmitter(); - @Output() filterChange: EventEmitter<{ direction: string, value: string }> = new EventEmitter(); + @Output() readonly handleSelectAll: EventEmitter = new EventEmitter(); + @Output() readonly handleSelect: EventEmitter = new EventEmitter(); + @Output() readonly filterChange: EventEmitter<{ direction: string, value: string }> = new EventEmitter(); // endregion diff --git a/components/transfer/nz-transfer-search.component.ts b/components/transfer/nz-transfer-search.component.ts index b35e10d9b6f..37e21f65258 100644 --- a/components/transfer/nz-transfer-search.component.ts +++ b/components/transfer/nz-transfer-search.component.ts @@ -12,8 +12,8 @@ export class NzTransferSearchComponent { @Input() placeholder: string; @Input() value: string; - @Output() valueChanged = new EventEmitter(); - @Output() valueClear = new EventEmitter(); + @Output() readonly valueChanged = new EventEmitter(); + @Output() readonly valueClear = new EventEmitter(); // endregion diff --git a/components/transfer/nz-transfer.component.ts b/components/transfer/nz-transfer.component.ts index 388e3a9042b..bc8d028ae61 100644 --- a/components/transfer/nz-transfer.component.ts +++ b/components/transfer/nz-transfer.component.ts @@ -63,9 +63,9 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { @Input() nzNotFoundContent: string; // events - @Output() nzChange: EventEmitter = new EventEmitter(); - @Output() nzSearchChange: EventEmitter = new EventEmitter(); - @Output() nzSelectChange: EventEmitter = new EventEmitter(); + @Output() readonly nzChange: EventEmitter = new EventEmitter(); + @Output() readonly nzSearchChange: EventEmitter = new EventEmitter(); + @Output() readonly nzSelectChange: EventEmitter = new EventEmitter(); // endregion diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts index d29d25be97d..b10ac22f36b 100644 --- a/components/tree-select/nz-tree-select.component.ts +++ b/components/tree-select/nz-tree-select.component.ts @@ -109,12 +109,12 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte @Input() nzDropdownStyle: { [ key: string ]: string; }; @Input() nzDefaultExpandedKeys: string[] = []; @Input() nzDisplayWith: (node: NzTreeNode) => string = (node: NzTreeNode) => node.title; - @Output() nzOpenChange = new EventEmitter(); - @Output() nzCleared = new EventEmitter(); - @Output() nzRemoved = new EventEmitter(); - @Output() nzExpandChange = new EventEmitter(); - @Output() nzTreeClick = new EventEmitter(); - @Output() nzTreeCheckBoxChange = new EventEmitter(); + @Output() readonly nzOpenChange = new EventEmitter(); + @Output() readonly nzCleared = new EventEmitter(); + @Output() readonly nzRemoved = new EventEmitter(); + @Output() readonly nzExpandChange = new EventEmitter(); + @Output() readonly nzTreeClick = new EventEmitter(); + @Output() readonly nzTreeCheckBoxChange = new EventEmitter(); @Input() set nzNodes(value: NzTreeNode[]) { diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts index fc22606ff07..3a12503d239 100644 --- a/components/tree/nz-tree-node.component.ts +++ b/components/tree/nz-tree-node.component.ts @@ -135,17 +135,17 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy { } // Output - @Output() clickNode: EventEmitter = new EventEmitter(); - @Output() dblClick: EventEmitter = new EventEmitter(); - @Output() contextMenu: EventEmitter = new EventEmitter(); - @Output() clickCheckBox: EventEmitter = new EventEmitter(); - @Output() clickExpand: EventEmitter = new EventEmitter(); - @Output() nzDragStart: EventEmitter = new EventEmitter(); - @Output() nzDragEnter: EventEmitter = new EventEmitter(); - @Output() nzDragOver: EventEmitter = new EventEmitter(); - @Output() nzDragLeave: EventEmitter = new EventEmitter(); - @Output() nzDrop: EventEmitter = new EventEmitter(); - @Output() nzDragEnd: EventEmitter = new EventEmitter(); + @Output() readonly clickNode: EventEmitter = new EventEmitter(); + @Output() readonly dblClick: EventEmitter = new EventEmitter(); + @Output() readonly contextMenu: EventEmitter = new EventEmitter(); + @Output() readonly clickCheckBox: EventEmitter = new EventEmitter(); + @Output() readonly clickExpand: EventEmitter = new EventEmitter(); + @Output() readonly nzDragStart: EventEmitter = new EventEmitter(); + @Output() readonly nzDragEnter: EventEmitter = new EventEmitter(); + @Output() readonly nzDragOver: EventEmitter = new EventEmitter(); + @Output() readonly nzDragLeave: EventEmitter = new EventEmitter(); + @Output() readonly nzDrop: EventEmitter = new EventEmitter(); + @Output() readonly nzDragEnd: EventEmitter = new EventEmitter(); // default var prefixCls = 'ant-tree'; @@ -412,12 +412,12 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy { this.ngZone.runOutsideAngular(() => { if (this.nzDraggable) { this.destory$ = new Subject(); - fromEvent(this.elRef.nativeElement, 'dragstart').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragStart(e)); - fromEvent(this.elRef.nativeElement, 'dragenter').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragEnter(e)); - fromEvent(this.elRef.nativeElement, 'dragover').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragOver(e)); - fromEvent(this.elRef.nativeElement, 'dragleave').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragLeave(e)); - fromEvent(this.elRef.nativeElement, 'drop').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragDrop(e)); - fromEvent(this.elRef.nativeElement, 'dragend').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragEnd(e)); + fromEvent(this.elRef.nativeElement, 'dragstart').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragStart(e)); + fromEvent(this.elRef.nativeElement, 'dragenter').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragEnter(e)); + fromEvent(this.elRef.nativeElement, 'dragover').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragOver(e)); + fromEvent(this.elRef.nativeElement, 'dragleave').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragLeave(e)); + fromEvent(this.elRef.nativeElement, 'drop').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragDrop(e)); + fromEvent(this.elRef.nativeElement, 'dragend').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragEnd(e)); } else { this.destory$.next(); this.destory$.complete(); diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts index 87b40e79b47..7217b119458 100644 --- a/components/tree/nz-tree.component.ts +++ b/components/tree/nz-tree.component.ts @@ -126,35 +126,33 @@ export class NzTreeComponent implements OnInit, OnChanges, OnDestroy { } // model bind - @Output() nzExpandedKeysChange: EventEmitter = new EventEmitter(); - @Output() nzSelectedKeysChange: EventEmitter = new EventEmitter(); - @Output() nzCheckedKeysChange: EventEmitter = new EventEmitter(); + @Output() readonly nzExpandedKeysChange: EventEmitter = new EventEmitter(); + @Output() readonly nzSelectedKeysChange: EventEmitter = new EventEmitter(); + @Output() readonly nzCheckedKeysChange: EventEmitter = new EventEmitter(); - @Output() nzSearchValueChange: EventEmitter = new EventEmitter(); + @Output() readonly nzSearchValueChange: EventEmitter = new EventEmitter(); /** * @deprecated use * nzSearchValueChange instead */ - @Output() nzOnSearchNode: EventEmitter = new EventEmitter(); + @Output() readonly nzOnSearchNode: EventEmitter = new EventEmitter(); - @Output() nzClick: EventEmitter = new EventEmitter(); - @Output() nzDblClick: EventEmitter = new EventEmitter(); - @Output() nzContextMenu: EventEmitter = new EventEmitter(); - @Output() nzCheckBoxChange: EventEmitter = new EventEmitter(); - @Output() nzExpandChange: EventEmitter = new EventEmitter(); - - @Output() nzOnDragStart: EventEmitter = new EventEmitter(); - @Output() nzOnDragEnter: EventEmitter = new EventEmitter(); - @Output() nzOnDragOver: EventEmitter = new EventEmitter(); - @Output() nzOnDragLeave: EventEmitter = new EventEmitter(); - @Output() nzOnDrop: EventEmitter = new EventEmitter(); - @Output() nzOnDragEnd: EventEmitter = new EventEmitter(); + @Output() readonly nzClick: EventEmitter = new EventEmitter(); + @Output() readonly nzDblClick: EventEmitter = new EventEmitter(); + @Output() readonly nzContextMenu: EventEmitter = new EventEmitter(); + @Output() readonly nzCheckBoxChange: EventEmitter = new EventEmitter(); + @Output() readonly nzExpandChange: EventEmitter = new EventEmitter(); + @Output() readonly nzOnDragStart: EventEmitter = new EventEmitter(); + @Output() readonly nzOnDragEnter: EventEmitter = new EventEmitter(); + @Output() readonly nzOnDragOver: EventEmitter = new EventEmitter(); + @Output() readonly nzOnDragLeave: EventEmitter = new EventEmitter(); + @Output() readonly nzOnDrop: EventEmitter = new EventEmitter(); + @Output() readonly nzOnDragEnd: EventEmitter = new EventEmitter(); // tslint:disable-next-line:no-any @ContentChild('nzTreeTemplate') nzTreeTemplate: TemplateRef; _searchValue = null; - // tslint:disable-next-line:no-any - nzDefaultSubject = new ReplaySubject(6); + nzDefaultSubject = new ReplaySubject< { type: string, keys: string[] }>(6); nzDefaultSubscription: Subscription; nzNodes: NzTreeNode[] = []; prefixCls = 'ant-tree'; diff --git a/components/tsconfig.lib.json b/components/tsconfig.lib.json index ca6c65fea13..27678977a5d 100644 --- a/components/tsconfig.lib.json +++ b/components/tsconfig.lib.json @@ -12,6 +12,8 @@ "experimentalDecorators": true, "declaration": true, "outDir": "../release", + "alwaysStrict": true, + "strictFunctionTypes": true, "lib": ["es2015", "dom"] }, "angularCompilerOptions": { diff --git a/components/upload/demo/avatar.ts b/components/upload/demo/avatar.ts index 650b5084bc2..0d5515f4cf6 100644 --- a/components/upload/demo/avatar.ts +++ b/components/upload/demo/avatar.ts @@ -53,9 +53,9 @@ export class NzDemoUploadAvatarComponent { return isJPG && isLt2M; } - private getBase64(img: File, callback: (img: {}) => void): void { + private getBase64(img: File, callback: (img: string) => void): void { const reader = new FileReader(); - reader.addEventListener('load', () => callback(reader.result)); + reader.addEventListener('load', () => callback(reader.result.toString())); reader.readAsDataURL(img); } diff --git a/components/upload/nz-upload.component.ts b/components/upload/nz-upload.component.ts index ac660c5ac6c..9ec2d665f6f 100644 --- a/components/upload/nz-upload.component.ts +++ b/components/upload/nz-upload.component.ts @@ -74,7 +74,7 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy { @Input() nzData: {} | ((file: UploadFile) => {}); @Input() nzFilter: UploadFilter[] = []; @Input() nzFileList: UploadFile[] = []; - @Output() nzFileListChange: EventEmitter = new EventEmitter(); + @Output() readonly nzFileListChange: EventEmitter = new EventEmitter(); private _disabled = false; @@ -139,7 +139,7 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy { @Input() nzRemove: (file: UploadFile) => boolean | Observable; @Input() nzPreview: (file: UploadFile) => void; - @Output() nzChange: EventEmitter = new EventEmitter(); + @Output() readonly nzChange: EventEmitter = new EventEmitter(); _btnOptions: ZipButtonOptions; diff --git a/docs/introduce.en-US.md b/docs/introduce.en-US.md index 05b2df849de..af19287f287 100755 --- a/docs/introduce.en-US.md +++ b/docs/introduce.en-US.md @@ -39,7 +39,7 @@ Modern browsers and Internet Explorer 11+ (with [polyfills](https://angular.io/g ## Angular Support -Now Supports Angular `^6.0.0`. +Now Supports Angular `^7.0.0`. ## Design Specification diff --git a/docs/introduce.zh-CN.md b/docs/introduce.zh-CN.md index e22d4d90ba3..1cb92924004 100755 --- a/docs/introduce.zh-CN.md +++ b/docs/introduce.zh-CN.md @@ -40,7 +40,7 @@ title: Ant Design of Angular ## 支持 Angular 版本 -目前支持 Angular `^6.0.0` 版本。 +目前支持 Angular `^7.0.0` 版本。 ## 设计规范 diff --git a/integration/webpack/package.json b/integration/webpack/package.json index 6781c8f165e..274f76ff4ae 100644 --- a/integration/webpack/package.json +++ b/integration/webpack/package.json @@ -31,14 +31,15 @@ "zone.js": "file:lib/zone.js" }, "devDependencies": { - "@angular-devkit/build-optimizer": "0.6.8", + "@angular-devkit/build-optimizer": "~0.10.0", "@angular/cli": "file:lib/@angular/cli", "@angular/compiler-cli": "file:lib/@angular/compiler-cli", - "@ngtools/webpack": "^1.6.2", - "html-webpack-plugin": "^2.30.1", + "@ngtools/webpack": "~7.0.0", + "html-webpack-plugin": "^3.2.0", "typescript": "file:lib/typescript", - "uglifyjs-webpack-plugin": "^0.4.6", - "webpack": "^3.5.6", - "webpack-dev-server": "^2.7.1" + "uglifyjs-webpack-plugin": "^2.0.1", + "webpack": "^4.23.1", + "webpack-cli": "^3.1.2", + "webpack-dev-server": "^3.1.10" } } diff --git a/integration/webpack/webpack.config.js b/integration/webpack/webpack.config.js index 39a4592048c..0000ac80ae8 100644 --- a/integration/webpack/webpack.config.js +++ b/integration/webpack/webpack.config.js @@ -2,7 +2,6 @@ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const UglifyJSPlugin = require('uglifyjs-webpack-plugin') const { AngularCompilerPlugin } = require('@ngtools/webpack') -const { PurifyPlugin } = require('@angular-devkit/build-optimizer') function packageSort(packages) { return function sort(left, right) { @@ -22,6 +21,7 @@ function packageSort(packages) { } module.exports = { + mode: 'production', entry: { main: './src/main.ts', polyfills: './src/polyfills.ts', @@ -33,8 +33,8 @@ module.exports = { module: { rules: [ { - test: /\.ts$/, - loader: '@ngtools/webpack', + test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, + loader: '@ngtools/webpack' }, { test: /\.js$/, @@ -52,8 +52,8 @@ module.exports = { new AngularCompilerPlugin({ tsConfigPath: path.resolve(__dirname, 'src/tsconfig.app.json'), entryModule: path.resolve(__dirname, 'src/app/app.module#AppModule'), + sourceMap: true }), - new PurifyPlugin(), new UglifyJSPlugin(), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src/index.html'), diff --git a/package.json b/package.json index 6a977240195..e3a80423275 100644 --- a/package.json +++ b/package.json @@ -33,79 +33,70 @@ "pre-release": "npm run site:init && bash ./scripts/build/replace-publish.sh && npm run generate && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod && npm run helper" }, "dependencies": { - "@angular/cdk": "^6.0.0", - "@ant-design/icons-angular": "^1.0.1", + "@angular/cdk": "^7.0.0", + "@ant-design/icons-angular": "2.0.0-beta.1", "date-fns": "^1.29.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^0.6.0", - "@angular-devkit/build-ng-packagr": "^0.6.8", - "@angular-devkit/core": "^0.6.0", - "@angular-devkit/schematics": "^0.6.0", - "@angular/animations": "^6.0.0", - "@angular/cli": "~6.2.1", - "@angular/common": "^6.0.0", - "@angular/compiler": "^6.0.0", - "@angular/compiler-cli": "^6.1.0", - "@angular/core": "^6.0.0", - "@angular/forms": "^6.0.0", - "@angular/http": "^6.0.0", - "@angular/language-service": "^6.1.0", - "@angular/platform-browser": "^6.0.0", - "@angular/platform-browser-dynamic": "^6.0.0", - "@angular/router": "^6.0.0", - "@schematics/angular": "^0.6.0", + "@angular/animations": "~7.0.0", + "@angular/common": "~7.0.0", + "@angular/compiler": "~7.0.0", + "@angular/core": "~7.0.0", + "@angular/forms": "~7.0.0", + "@angular/http": "~7.0.0", + "@angular/platform-browser": "~7.0.0", + "@angular/platform-browser-dynamic": "~7.0.0", + "@angular/router": "~7.0.0", + "core-js": "^2.5.4", + "rxjs": "~6.3.3", + "zone.js": "~0.8.26", + "@angular-devkit/build-angular": "~0.10.0", + "@angular/cli": "~7.0.2", + "@angular/compiler-cli": "~7.0.0", + "@angular/language-service": "~7.0.0", + "@angular-devkit/build-ng-packagr": "~0.10.0", + "@angular-devkit/core": "~7.0.0", + "@angular-devkit/schematics": "~7.0.0", + "@types/node": "~10.12.0", + "@types/jasmine": "~2.8.8", + "@types/jasminewd2": "~2.0.3", + "codelyzer": "~4.5.0", + "jasmine-core": "~2.99.1", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~3.0.0", + "karma-chrome-launcher": "~2.2.0", + "karma-coverage-istanbul-reporter": "~2.0.1", + "karma-jasmine": "~1.1.2", + "karma-jasmine-html-reporter": "^0.2.2", + "protractor": "~5.4.0", + "ts-node": "~7.0.0", + "tslint": "~5.11.0", + "typescript": "~3.1.1", + "@schematics/angular": "~7.0.0", "@stackblitz/sdk": "^1.1.1", "@types/fs-extra": "^5.0.4", "@types/hammerjs": "^2.0.35", - "@types/jasmine": "~2.8.8", - "@types/jasminewd2": "~2.0.3", - "@types/node": "~8.9.4", "antd-theme-generator": "^1.0.7", "chalk": "^2.4.1", "classlist.js": "^1.1.20150312", "clean-css": "~4.1.11", "codecov": "^3.0.0", - "codelyzer": "~4.3.0", "conventional-changelog-cli": "^2.0.1", - "core-js": "^2.5.4", "fs-extra": "^6.0.1", "hammerjs": "^2.0.8", "husky": "^1.0.1", - "jasmine-core": "~2.99.1", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~1.7.1", - "karma-chrome-launcher": "~2.2.0", - "karma-cli": "~1.0.1", - "karma-coverage-istanbul-reporter": "~1.4.2", - "karma-jasmine": "~1.1.1", - "karma-jasmine-html-reporter": "^0.2.2", - "less": "^2.7.3", "less-plugin-clean-css": "^1.5.1", - "marked": "^0.3.6", + "marked": "^0.5.1", "ng-packagr": "^4.0.0", - "ngx-color": "^1.5.2", - "ngx-infinite-scroll": "^6.0.0", + "ngx-color": "^2.0.5", "node-prismjs": "^0.1.1", - "parse5": "^4.0.0", "prismjs": "^1.10.0", - "protractor": "~5.4.0", "readline-sync": "^1.4.9", "remark": "^8.0.0", - "rollup": "^0.49.2", - "rollup-plugin-node-resolve": "^3.0.0", - "rollup-plugin-replace": "^2.0.0", - "rollup-plugin-sourcemaps": "^0.4.2", - "rollup-plugin-uglify": "^2.0.1", - "rxjs": "~6.2.2", - "ts-node": "~7.0.0", "tsickle": "^0.30.0", "tslib": "^1.9.0", - "tslint": "~5.11.0", - "typescript": "~2.9.2", "webpack-bundle-analyzer": "^3.0.2", - "yaml-front-matter": "^3.4.0", - "zone.js": "^0.8.26" + "yaml-front-matter": "^4.0.0" }, "husky": { "hooks": { diff --git a/scripts/build/generate-less.js b/scripts/build/generate-less.js index 072e8b0b381..b23fa0ebb85 100644 --- a/scripts/build/generate-less.js +++ b/scripts/build/generate-less.js @@ -11,8 +11,8 @@ function compileLess(content, savePath, min) { plugins.push(cleanCSSPlugin); } return less.render - .call(less, content, { plugins }) - .then(({ css }) => { + .call(less, content, {plugins: plugins, javascriptEnabled: true}) + .then(({css}) => { fs.writeFileSync(savePath, css); resolve(); }) diff --git a/scripts/site/_site/src/app/share/nz-codebox/nz-codebox.component.ts b/scripts/site/_site/src/app/share/nz-codebox/nz-codebox.component.ts index 182d4fdc30a..12782c0e6b2 100644 --- a/scripts/site/_site/src/app/share/nz-codebox/nz-codebox.component.ts +++ b/scripts/site/_site/src/app/share/nz-codebox/nz-codebox.component.ts @@ -386,22 +386,22 @@ export class AppModule { } description : 'Created with <3 by the StackBlitz SDK!', template : 'angular-cli', dependencies: { - 'rxjs' : '^6.0.0', - '@angular/cdk' : '^6.0.0', - '@angular/core' : '^6.0.0', - '@angular/forms' : '^6.0.0', - '@angular/http' : '^6.0.0', - '@angular/language-service' : '^6.0.0', - '@angular/platform-browser' : '^6.0.0', - '@angular/platform-browser-dynamic': '^6.0.0', - '@angular/common' : '^6.0.0', - '@angular/router' : '^6.0.0', - '@angular/animations' : '^6.0.0', - '@ant-design/icons-angular' : '^1.0.1', + 'rxjs' : '^7.0.0', + '@angular/cdk' : '^7.0.0', + '@angular/core' : '^7.0.0', + '@angular/forms' : '^7.0.0', + '@angular/http' : '^7.0.0', + '@angular/language-service' : '^7.0.0', + '@angular/platform-browser' : '^7.0.0', + '@angular/platform-browser-dynamic': '^7.0.0', + '@angular/common' : '^7.0.0', + '@angular/router' : '^7.0.0', + '@angular/animations' : '^7.0.0', + '@ant-design/icons-angular' : '^2.0.0-beta.1', 'date-fns' : '^1.29.0', 'tslib' : '^1.9.3', - 'typescript' : '~2.9.2', - 'ng-zorro-antd' : '^1.8.0' + 'typescript' : '~3.1.1', + 'ng-zorro-antd' : '^7.0.0' }, tags : [ 'stackblitz', 'sdk' ] }); diff --git a/scripts/site/_site/src/app/share/share.module.ts b/scripts/site/_site/src/app/share/share.module.ts index 42bb58d89be..3e5dd8da070 100644 --- a/scripts/site/_site/src/app/share/share.module.ts +++ b/scripts/site/_site/src/app/share/share.module.ts @@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router'; import { NgZorroAntdModule } from 'ng-zorro-antd'; -import { InfiniteScrollModule } from 'ngx-infinite-scroll'; +// import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { ColorSketchModule } from 'ngx-color/sketch'; import { NzCodeBoxModule } from './nz-codebox/nz-codebox.module'; @@ -35,8 +35,8 @@ import { NzNavBottomModule } from './nz-nav-bottom/nz-nav-bottom.module'; NzHighlightModule, NzNavBottomModule, // third libs - InfiniteScrollModule, - ColorSketchModule, + // InfiniteScrollModule, + ColorSketchModule ] }) export class ShareModule { } diff --git a/tslint.json b/tslint.json index 12856ac6ee0..844db3b3981 100644 --- a/tslint.json +++ b/tslint.json @@ -6,10 +6,9 @@ "banana-in-box": true, "templates-no-negated-async": true, "no-life-cycle-call": false, - "prefer-output-readonly": false, + "prefer-output-readonly": true, "no-conflicting-life-cycle-hooks": false, "enforce-component-selector": false, - "prefer-inline-decorator": true, "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": false, @@ -22,7 +21,7 @@ "no-forward-ref": false, "use-life-cycle-interface": true, "contextual-life-cycle": true, - "trackBy-function": true, + "trackBy-function": false, "use-pipe-transform-interface": true, "component-class-suffix": true, "directive-class-suffix": true, @@ -129,6 +128,7 @@ "timeEnd", "trace" ], + "no-duplicate-variable": true, "no-conditional-assignment": true, "no-construct": true, "no-debugger": true, @@ -168,7 +168,6 @@ "no-use-before-declare": true, "no-var-keyword": true, "number-literal-format": true, - "object-literal-sort-keys": false, "object-literal-key-quotes": [ true, "consistent" @@ -241,6 +240,7 @@ "use-isnan": true, "variable-name": [ true, + "ban-keywords", "allow-leading-underscore" ], "whitespace": [