+
+ `,
+ preserveWhitespaces: false,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ host: {
+ '[class.ant-card-loading-content]': 'true'
+ }
+})
+export class NzCardLoadingComponent {
+ listOfLoading: string[][] = [
+ ['ant-col-22'],
+ ['ant-col-8', 'ant-col-15'],
+ ['ant-col-6', 'ant-col-18'],
+ ['ant-col-13', 'ant-col-9'],
+ ['ant-col-4', 'ant-col-3', 'ant-col-16'],
+ ['ant-col-8', 'ant-col-6', 'ant-col-8']
+ ];
+ constructor() {}
+}
diff --git a/components/card/card-meta.component.ts b/components/card/card-meta.component.ts
new file mode 100755
index 00000000000..3e74da29ac1
--- /dev/null
+++ b/components/card/card-meta.component.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'nz-card-meta',
+ exportAs: 'nzCardMeta',
+ preserveWhitespaces: false,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+
+ `,
+ host: {
+ '[class.ant-card-meta]': 'true'
+ }
+})
+export class NzCardMetaComponent {
+ @Input() nzTitle: string | TemplateRef
+
+
+
+
+
+
+
+
+
+
+
+ {{ nzTitle }}
+
+
+ {{ nzExtra }}
+
+
+
+
+
+
+
+
+
+ -
+
-
+
+
+
-
diff --git a/components/card/nz-card-loading.component.ts b/components/card/nz-card-loading.component.ts
deleted file mode 100644
index bd5e7e2135a..00000000000
--- a/components/card/nz-card-loading.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @license
- * Copyright Alibaba.com All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
-
-import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'nz-card-loading',
- exportAs: 'nzCardLoading',
- templateUrl: './nz-card-loading.component.html',
- preserveWhitespaces: false,
- changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation: ViewEncapsulation.None,
- styles: [
- `
- nz-card-loading {
- display: block;
- }
- `
- ]
-})
-export class NzCardLoadingComponent {
- constructor(elementRef: ElementRef, renderer: Renderer2) {
- renderer.addClass(elementRef.nativeElement, 'ant-card-loading-content');
- }
-}
diff --git a/components/card/nz-card-meta.component.html b/components/card/nz-card-meta.component.html
deleted file mode 100755
index b2e1d07edd7..00000000000
--- a/components/card/nz-card-meta.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
diff --git a/components/card/nz-card-meta.component.ts b/components/card/nz-card-meta.component.ts
deleted file mode 100755
index 1f6dfe9b8b7..00000000000
--- a/components/card/nz-card-meta.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright Alibaba.com All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
-
-import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer2, TemplateRef, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'nz-card-meta',
- exportAs: 'nzCardMeta',
- preserveWhitespaces: false,
- changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation: ViewEncapsulation.None,
- templateUrl: './nz-card-meta.component.html',
- styles: [
- `
- nz-card-meta {
- display: block;
- }
- `
- ]
-})
-export class NzCardMetaComponent {
- @Input() nzTitle: string | TemplateRef
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ nzTitle }}
-
-
- {{ nzExtra }}
-
-
-
-
-
-
-
--
-
-
-
-
-
+
+
+
+
+
+ {{ nzHeader }}
+
+
+ {{ nzExtra }}
+
+
+
+ `,
+
host: {
+ '[class.ant-collapse-item]': 'true',
'[class.ant-collapse-no-arrow]': '!nzShowArrow',
'[class.ant-collapse-item-active]': 'nzActive',
'[class.ant-collapse-item-disabled]': 'nzDisabled'
@@ -56,7 +68,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
@Input() nzHeader: string | TemplateRef
+
+
-
-
-
-
-
- {{ nzHeader }}
-
-
- {{ nzExtra }}
-
-
-
diff --git a/components/collapse/nz-collapse.component.html b/components/collapse/nz-collapse.component.html
deleted file mode 100644
index a0a0d99ea94..00000000000
--- a/components/collapse/nz-collapse.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
-
diff --git a/components/collapse/public-api.ts b/components/collapse/public-api.ts
index 518faea2c5b..705887f3425 100644
--- a/components/collapse/public-api.ts
+++ b/components/collapse/public-api.ts
@@ -6,6 +6,6 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-collapse-panel.component';
-export * from './nz-collapse.component';
-export * from './nz-collapse.module';
+export * from './collapse-panel.component';
+export * from './collapse.component';
+export * from './collapse.module';
diff --git a/components/collapse/style/entry.less b/components/collapse/style/entry.less
index 06547c43acd..96cebe33bff 100644
--- a/components/collapse/style/entry.less
+++ b/components/collapse/style/entry.less
@@ -1 +1,2 @@
@import './index.less';
+@import './patch.less';
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
index d96f6138259..4354572e50b 100644
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@@ -33,6 +33,7 @@
line-height: 22px;
cursor: pointer;
transition: all 0.3s;
+ .clearfix;
.@{collapse-prefix-cls}-rtl & {
padding: @collapse-header-padding;
diff --git a/components/collapse/style/patch.less b/components/collapse/style/patch.less
new file mode 100644
index 00000000000..1798a5aecac
--- /dev/null
+++ b/components/collapse/style/patch.less
@@ -0,0 +1,6 @@
+nz-collapse {
+ display: block;
+}
+nz-collapse-panel {
+ display: block;
+}
diff --git a/components/comment/nz-comment.module.ts b/components/comment/nz-comment.module.ts
index 529c6f2544f..f0a89f29934 100644
--- a/components/comment/nz-comment.module.ts
+++ b/components/comment/nz-comment.module.ts
@@ -9,7 +9,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import {
NzCommentActionComponent,
@@ -22,7 +22,7 @@ import { NzCommentComponent } from './nz-comment.component';
const NZ_COMMENT_CELLS = [NzCommentAvatarDirective, NzCommentContentDirective, NzCommentActionComponent, NzCommentActionHostDirective];
@NgModule({
- imports: [CommonModule, NzAddOnModule],
+ imports: [CommonModule, NzOutletModule],
exports: [NzCommentComponent, ...NZ_COMMENT_CELLS],
declarations: [NzCommentComponent, ...NZ_COMMENT_CELLS]
})
diff --git a/components/core/addon/classlist_add.ts b/components/core/addon/classlist_add.ts
deleted file mode 100644
index 2e8b5c71736..00000000000
--- a/components/core/addon/classlist_add.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @license
- * Copyright Alibaba.com All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
-
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-
-@Directive({
- selector: '[nzClassListAdd]',
- exportAs: 'nzClassListAdd'
-})
-export class NzClassListAddDirective {
- classList: string[] = [];
-
- @Input()
- set nzClassListAdd(list: string[]) {
- this.classList.forEach(name => {
- this.renderer.removeClass(this.elementRef.nativeElement, name);
- });
- list.forEach(name => {
- this.renderer.addClass(this.elementRef.nativeElement, name);
- });
- this.classList = list;
- }
-
- constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
-}
diff --git a/components/core/addon/string_template_outlet.ts b/components/core/addon/string_template_outlet.ts
deleted file mode 100644
index 8f4bf45a039..00000000000
--- a/components/core/addon/string_template_outlet.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * @license
- * Copyright Alibaba.com All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
-
-import { Directive, EmbeddedViewRef, Input, OnChanges, SimpleChange, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
-
-@Directive({
- selector: '[nzStringTemplateOutlet]',
- exportAs: 'nzStringTemplateOutlet'
-})
-export class NzStringTemplateOutletDirective implements OnChanges {
- private isTemplate: boolean;
- // tslint:disable-next-line:no-any
- private inputTemplate: TemplateRef
- Context Menu
+ Right Click on here
-
@@ -30,14 +30,11 @@ import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dro
styles: [
`
.context-area {
- background: rgb(190, 200, 200);
- padding: 32px;
+ background: #f7f7f7;
+ color: #777;
text-align: center;
- }
-
- .context-intro {
- color: #fff;
- font-size: 14px;
+ height: 200px;
+ line-height: 200px;
}
`
]
diff --git a/components/dropdown/demo/placement.ts b/components/dropdown/demo/placement.ts
index b3d952953c8..f12ac9d587c 100644
--- a/components/dropdown/demo/placement.ts
+++ b/components/dropdown/demo/placement.ts
@@ -1,5 +1,4 @@
import { Component } from '@angular/core';
-import { NzPlacementType } from 'ng-zorro-antd/dropdown';
@Component({
selector: 'nz-demo-dropdown-placement',
@@ -27,5 +26,5 @@ import { NzPlacementType } from 'ng-zorro-antd/dropdown';
]
})
export class NzDemoDropdownPlacementComponent {
- listOfPosition: NzPlacementType[] = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'];
+ listOfPosition: string[] = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'];
}
diff --git a/components/dropdown/doc/index.en-US.md b/components/dropdown/doc/index.en-US.md
index 35dc505515d..905e21ff3fb 100755
--- a/components/dropdown/doc/index.en-US.md
+++ b/components/dropdown/doc/index.en-US.md
@@ -58,5 +58,5 @@ Create dropdown with contextmenu, the detail can be found in the example above
| Property | Description | Arguments | Return Value |
| --- | --- | --- | --- |
-| create | create dropdown | `($event:MouseEvent, menu:NzDropdownMenuComponent)` | - |
-| close | close dropdown | - | - |
\ No newline at end of file
+| create | create dropdown | `($event:MouseEvent | {x:number, y:number}, menu:NzDropdownMenuComponent)` | - |
+| close | close dropdown | - | - |
diff --git a/components/dropdown/doc/index.zh-CN.md b/components/dropdown/doc/index.zh-CN.md
index c5a6b120900..5ddc50953eb 100755
--- a/components/dropdown/doc/index.zh-CN.md
+++ b/components/dropdown/doc/index.zh-CN.md
@@ -59,5 +59,5 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
| 方法/属性 | 说明 | 参数 | 返回 |
| --- | --- | --- | --- |
-| create | 创建右键菜单 | `($event:MouseEvent, menu:NzDropdownMenuComponent)` | - |
-| close | 关闭右键菜单 | - | - |
\ No newline at end of file
+| create | 创建右键菜单 | `($event:MouseEvent | {x:number, y:number}, menu:NzDropdownMenuComponent)` | - |
+| close | 关闭右键菜单 | - | - |
diff --git a/components/dropdown/dropdown-a.directive.ts b/components/dropdown/dropdown-a.directive.ts
new file mode 100644
index 00000000000..dbedc0b9885
--- /dev/null
+++ b/components/dropdown/dropdown-a.directive.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Directive } from '@angular/core';
+
+@Directive({
+ selector: 'a[nz-dropdown]',
+ host: {
+ '[class.ant-dropdown-link]': 'true'
+ }
+})
+export class NzDropDownADirective {}
diff --git a/components/dropdown/nz-dropdown-button.directive.ts b/components/dropdown/dropdown-button.directive.ts
similarity index 100%
rename from components/dropdown/nz-dropdown-button.directive.ts
rename to components/dropdown/dropdown-button.directive.ts
diff --git a/components/dropdown/nz-dropdown-menu.component.ts b/components/dropdown/dropdown-menu.component.ts
similarity index 53%
rename from components/dropdown/nz-dropdown-menu.component.ts
rename to components/dropdown/dropdown-menu.component.ts
index e27429da099..4b5ce0aebcb 100644
--- a/components/dropdown/nz-dropdown-menu.component.ts
+++ b/components/dropdown/dropdown-menu.component.ts
@@ -13,72 +13,66 @@ import {
Component,
ElementRef,
Host,
- Injector,
Optional,
Renderer2,
- Self,
TemplateRef,
ViewChild,
ViewContainerRef,
ViewEncapsulation
} from '@angular/core';
-import { NzDropdownHigherOrderServiceToken, NzMenuBaseService, NzNoAnimationDirective, slideMotion } from 'ng-zorro-antd/core';
-
-import { Subject } from 'rxjs';
-import { NzMenuDropdownService } from './nz-menu-dropdown.service';
+import { NzNoAnimationDirective, slideMotion } from 'ng-zorro-antd/core';
+import { IndexableObject, NzSafeAny } from 'ng-zorro-antd/core/types';
+import { MenuService, NzIsMenuInsideDropDownToken } from 'ng-zorro-antd/menu';
+import { BehaviorSubject } from 'rxjs';
export type NzPlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
-export function dropdownMenuServiceFactory(injector: Injector): NzMenuBaseService {
- return injector.get(NzMenuDropdownService);
-}
-
@Component({
selector: `nz-dropdown-menu`,
- templateUrl: './nz-dropdown-menu.component.html',
exportAs: `nzDropdownMenu`,
animations: [slideMotion],
providers: [
- NzMenuDropdownService,
+ MenuService,
+ /** menu is inside dropdown-menu component **/
{
- provide: NzDropdownHigherOrderServiceToken,
- useFactory: dropdownMenuServiceFactory,
- deps: [[new Self(), Injector]]
+ provide: NzIsMenuInsideDropDownToken,
+ useValue: true
}
],
- styles: [
- `
- :root .ant-dropdown.nz-dropdown {
- top: 0;
- left: 0;
- position: relative;
- width: 100%;
- margin-top: 4px;
- margin-bottom: 4px;
- }
- `
- ],
+ template: `
+
-
- Tom diff --git a/components/layout/demo/responsive.ts b/components/layout/demo/responsive.ts index 2de8f705893..0c7064d7087 100644 --- a/components/layout/demo/responsive.ts +++ b/components/layout/demo/responsive.ts @@ -4,9 +4,9 @@ import { Component } from '@angular/core'; selector: 'nz-demo-layout-responsive', template: `
-
nav 1
@@ -69,6 +69,4 @@ import { Component } from '@angular/core';
`
]
})
-export class NzDemoLayoutResponsiveComponent {
- isCollapsed = false;
-}
+export class NzDemoLayoutResponsiveComponent {}
diff --git a/components/layout/demo/side.ts b/components/layout/demo/side.ts
index b788b0ef9bf..464fc5a7fb1 100644
--- a/components/layout/demo/side.ts
+++ b/components/layout/demo/side.ts
@@ -4,9 +4,9 @@ import { Component } from '@angular/core';
selector: 'nz-demo-layout-side',
template: `
- + - -
+
-
- Tom @@ -74,6 +74,4 @@ import { Component } from '@angular/core'; ` ] }) -export class NzDemoLayoutSideComponent { - isCollapsed = false; -} +export class NzDemoLayoutSideComponent {} diff --git a/components/layout/demo/top-side.ts b/components/layout/demo/top-side.ts index c0c760391f9..9cdc0a95d51 100644 --- a/components/layout/demo/top-side.ts +++ b/components/layout/demo/top-side.ts @@ -6,7 +6,7 @@ import { Component } from '@angular/core';
-
-
- + - -
+
- +
- Navigation One diff --git a/components/menu/demo/vertical.ts b/components/menu/demo/vertical.ts index b7bca47b379..41db05bdc49 100644 --- a/components/menu/demo/vertical.ts +++ b/components/menu/demo/vertical.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-menu-vertical', template: ` -
-
- @@ -40,7 +40,14 @@ import { Component } from '@angular/core';
- +
- Navigation One @@ -712,3 +704,211 @@ export class NzTestNgIfMenuComponent { ` }) export class NzTestSubMenuSelectedComponent {} + +@Component({ + template: ` +
- + + Navigation One + +
-
+
-
+
- Option 5 +
- Option 6 +
-
+
-
+
- Option 7 +
- Option 8 +
+
+ -
+
-
+
- Option 9 +
- Option 10 +
- Option 11 +
+ -
+
-
+
-
+
-
+
- Option 1 +
- Option 2 +
+ -
+
-
+
- Option 3 +
- Option 4 +
+
+ -
+
-
+
-
+
- Option 5 +
- Option 6 +
-
+
-
+
- Option 7 +
- Option 8 +
+
+ -
+
-
+
- Option 9 +
- Option 10 +
- Option 11 +
+ -
+
-
+
-
+
-
+
- Option 1 +
- Option 2 +
+ -
+
-
+
- Option 3 +
- Option 4 +
+
+ -
+
-
+
-
+
- Option 5 +
- Option 6 +
-
+
-
+
- Option 7 +
- Option 8 +
+
+ -
+
-
+
- Option 9 +
- Option 10 +
- Option 11 +
+ -
+
-
+
-
+
-
+
- Option 1 +
- Option 2 +
+ -
+
-
+
- Option 3 +
- Option 4 +
+
+ -
+
-
+
-
+
- Option 5 +
- Option 6 +
-
+
-
+
- Option 7 +
- Option 8 +
+
+ -
+
-
+
- Option 9 +
- Option 10 +
- Option 11 +
+ -
-
-
- - - - / - {{ lastIndex }} - -
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
- - - ••• -- -
-
-
-
-
-
- -
-
-
- -
-
-
-
- -
+
+
+
+
+ `,
+ host: {
+ '[class.ant-pagination]': 'true',
+ '[class.ant-pagination-disabled]': 'disabled',
+ '[class.mini]': `nzSize === 'small'`
+ }
+})
+export class NzPaginationDefaultComponent implements OnChanges {
+ @Input() nzSize: 'default' | 'small' = 'default';
+ @Input() itemRender: TemplateRef - + + / + {{ lastIndex }} + + + `, + host: { + '[class.ant-pagination]': 'true', + '[class.ant-pagination-simple]': 'true', + '[class.ant-pagination-disabled]': 'disabled' + } +}) +export class NzPaginationSimpleComponent implements OnChanges { + @Input() itemRender: TemplateRef
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+ ![]()
+
+
+
+
+
-
- ![]()
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ `,
providers: [
{
provide: NG_VALUE_ACCESSOR,
@@ -44,6 +85,7 @@ import { InputBoolean, isNotNil, NzSizeLDSType } from 'ng-zorro-antd/core';
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
+ '[class.ant-input-number]': 'true',
'[class.ant-input-number-focused]': 'isFocused',
'[class.ant-input-number-lg]': `nzSize === 'large'`,
'[class.ant-input-number-sm]': `nzSize === 'small'`,
@@ -52,47 +94,39 @@ import { InputBoolean, isNotNil, NzSizeLDSType } from 'ng-zorro-antd/core';
})
export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
private autoStepTimer: number;
- public actualValue: string | number;
- private value: string | number;
+ private parsedValue: string | number;
+ private value: number;
displayValue: string | number;
isFocused = false;
disabledUp = false;
disabledDown = false;
- onChange: (value: number) => void = () => null;
- onTouched: () => void = () => null;
+ onChange: OnChangeType = () => {};
+ onTouched: OnTouchedType = () => {};
@Output() readonly nzBlur = new EventEmitter();
@Output() readonly nzFocus = new EventEmitter();
@ViewChild('inputElement', { static: true }) inputElement: ElementRef
-
-
-
-
-
-
-
-
-
-
diff --git a/components/input-number/public-api.ts b/components/input-number/public-api.ts
index 8b1e9f0e31a..00c4bf9c337 100644
--- a/components/input-number/public-api.ts
+++ b/components/input-number/public-api.ts
@@ -6,5 +6,5 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-input-number.component';
-export * from './nz-input-number.module';
+export * from './input-number.component';
+export * from './input-number.module';
diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx
deleted file mode 100755
index 3a3ab0de59a..00000000000
--- a/components/input-number/style/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import '../../style/index.less';
-import './index.less';
diff --git a/components/input/nz-autosize.directive.ts b/components/input/autosize.directive.ts
similarity index 80%
rename from components/input/nz-autosize.directive.ts
rename to components/input/autosize.directive.ts
index e52e46d98f0..d7bdc7bd451 100644
--- a/components/input/nz-autosize.directive.ts
+++ b/components/input/autosize.directive.ts
@@ -8,20 +8,15 @@
import { Platform } from '@angular/cdk/platform';
import { AfterViewInit, Directive, DoCheck, ElementRef, Input, NgZone, OnDestroy } from '@angular/core';
+import { NzDomEventService } from 'ng-zorro-antd/core';
import { Subject } from 'rxjs';
import { finalize, takeUntil } from 'rxjs/operators';
-import { NzDomEventService } from 'ng-zorro-antd/core';
-
export interface AutoSizeType {
minRows?: number;
maxRows?: number;
}
-export function isAutoSizeType(value: string | boolean | AutoSizeType): value is AutoSizeType {
- return typeof value !== 'string' && typeof value !== 'boolean' && (!!value.maxRows || !!value.minRows);
-}
-
@Directive({
selector: 'textarea[nzAutosize]',
exportAs: 'nzAutosize',
@@ -40,26 +35,27 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
private previousMinRows: number | undefined;
private minRows: number | undefined;
private maxRows: number | undefined;
+ private maxHeight: number | null = null;
+ private minHeight: number | null = null;
private destroy$ = new Subject();
private inputGap = 10;
@Input()
set nzAutosize(value: string | boolean | AutoSizeType) {
+ const isAutoSizeType = (data: string | boolean | AutoSizeType): data is AutoSizeType => {
+ return typeof data !== 'string' && typeof data !== 'boolean' && (!!data.maxRows || !!data.minRows);
+ };
if (typeof value === 'string') {
this.autosize = true;
} else if (isAutoSizeType(value)) {
this.autosize = value;
this.minRows = value.minRows;
this.maxRows = value.maxRows;
- this.setMaxHeight();
- this.setMinHeight();
+ this.maxHeight = this.setMaxHeight();
+ this.minHeight = this.setMinHeight();
}
}
- get nzAutosize(): string | boolean | AutoSizeType {
- return this.autosize;
- }
-
resizeToFitContent(force: boolean = false): void {
this.cacheTextareaLineHeight();
@@ -83,13 +79,18 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
// Long placeholders that are wider than the textarea width may lead to a bigger scrollHeight
// value. To ensure that the scrollHeight is not bigger than the content, the placeholders
// need to be removed temporarily.
- textarea.classList.add('cdk-textarea-autosize-measuring');
+ textarea.classList.add('nz-textarea-autosize-measuring');
textarea.placeholder = '';
- const height = Math.round((textarea.scrollHeight - this.inputGap) / this.cachedLineHeight) * this.cachedLineHeight + this.inputGap;
-
+ let height = Math.round((textarea.scrollHeight - this.inputGap) / this.cachedLineHeight) * this.cachedLineHeight + this.inputGap;
+ if (this.maxHeight !== null && height > this.maxHeight) {
+ height = this.maxHeight!;
+ }
+ if (this.minHeight !== null && height < this.minHeight) {
+ height = this.minHeight!;
+ }
// Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
textarea.style.height = `${height}px`;
- textarea.classList.remove('cdk-textarea-autosize-measuring');
+ textarea.classList.remove('nz-textarea-autosize-measuring');
textarea.placeholder = placeholderText;
// On Firefox resizing the textarea will prevent it from scrolling to the caret position.
@@ -144,28 +145,29 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
textareaClone.style.overflow = 'hidden';
this.el.parentNode!.appendChild(textareaClone);
- this.cachedLineHeight = textareaClone.clientHeight - this.inputGap - 1;
+ this.cachedLineHeight = textareaClone.clientHeight - this.inputGap;
this.el.parentNode!.removeChild(textareaClone);
// Min and max heights have to be re-calculated if the cached line height changes
- this.setMinHeight();
- this.setMaxHeight();
+ this.maxHeight = this.setMaxHeight();
+ this.minHeight = this.setMinHeight();
}
- setMinHeight(): void {
- const minHeight = this.minRows && this.cachedLineHeight ? `${this.minRows * this.cachedLineHeight + this.inputGap}px` : null;
+ setMinHeight(): number | null {
+ const minHeight = this.minRows && this.cachedLineHeight ? this.minRows * this.cachedLineHeight + this.inputGap : null;
- if (minHeight) {
- this.el.style.minHeight = minHeight;
+ if (minHeight !== null) {
+ this.el.style.minHeight = `${minHeight}px`;
}
+ return minHeight;
}
- setMaxHeight(): void {
- const maxHeight = this.maxRows && this.cachedLineHeight ? `${this.maxRows * this.cachedLineHeight + this.inputGap}px` : null;
-
- if (maxHeight) {
- this.el.style.maxHeight = maxHeight;
+ setMaxHeight(): number | null {
+ const maxHeight = this.maxRows && this.cachedLineHeight ? this.maxRows * this.cachedLineHeight + this.inputGap : null;
+ if (maxHeight !== null) {
+ this.el.style.maxHeight = `${maxHeight}px`;
}
+ return maxHeight;
}
noopInputHandler(): void {
@@ -180,7 +182,7 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
) {}
ngAfterViewInit(): void {
- if (this.nzAutosize && this.platform.isBrowser) {
+ if (this.autosize && this.platform.isBrowser) {
this.resizeToFitContent();
this.nzDomEventService
.registerResizeListener()
@@ -198,7 +200,7 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
}
ngDoCheck(): void {
- if (this.nzAutosize && this.platform.isBrowser) {
+ if (this.autosize && this.platform.isBrowser) {
this.resizeToFitContent();
}
}
diff --git a/components/input/nz-autosize.spec.ts b/components/input/autosize.spec.ts
similarity index 98%
rename from components/input/nz-autosize.spec.ts
rename to components/input/autosize.spec.ts
index 4ab82e27a3e..f836af047a7 100644
--- a/components/input/nz-autosize.spec.ts
+++ b/components/input/autosize.spec.ts
@@ -3,8 +3,8 @@ import { async, ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angul
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { dispatchFakeEvent, MockNgZone } from 'ng-zorro-antd/core';
-import { NzAutosizeDirective } from './nz-autosize.directive';
-import { NzInputModule } from './nz-input.module';
+import { NzAutosizeDirective } from './autosize.directive';
+import { NzInputModule } from './input.module';
describe('autoresize', () => {
let zone: MockNgZone;
diff --git a/components/input/demo/addon.ts b/components/input/demo/addon.ts
index a591b756907..ba0ac3fd2f3 100644
--- a/components/input/demo/addon.ts
+++ b/components/input/demo/addon.ts
@@ -3,36 +3,43 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-input-addon',
template: `
-
+
-
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`
})
export class NzDemoRadioRadiobuttonComponent {
diff --git a/components/radio/demo/radiogroup-more.ts b/components/radio/demo/radiogroup-more.ts
index cba0b56c035..a54f3bd1aee 100644
--- a/components/radio/demo/radiogroup-more.ts
+++ b/components/radio/demo/radiogroup-more.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
`,
@@ -18,6 +18,10 @@ import { Component } from '@angular/core';
[nz-radio] {
display: block;
}
+ input {
+ width: 100px;
+ margin-left: 10px;
+ }
`
]
})
diff --git a/components/radio/demo/radiogroup-options.ts b/components/radio/demo/radiogroup-options.ts
index 46004bbb1ea..bf66bc99028 100644
--- a/components/radio/demo/radiogroup-options.ts
+++ b/components/radio/demo/radiogroup-options.ts
@@ -3,17 +3,15 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-radiogroup-options',
template: `
-
+
+
+
+
+
+
+
+
`
})
export class NzDemoRadioRadiogroupOptionsComponent {
diff --git a/components/radio/demo/size.ts b/components/radio/demo/size.ts
index d33adc6f66b..70e97aeee07 100644
--- a/components/radio/demo/size.ts
+++ b/components/radio/demo/size.ts
@@ -3,30 +3,28 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-size',
template: `
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`
})
export class NzDemoRadioSizeComponent {
diff --git a/components/radio/demo/solid.ts b/components/radio/demo/solid.ts
index c20e94ce2fd..5bf6a359ac4 100644
--- a/components/radio/demo/solid.ts
+++ b/components/radio/demo/solid.ts
@@ -3,14 +3,12 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-solid',
template: `
-
+
+
+
+
+
`
})
export class NzDemoRadioSolidComponent {
diff --git a/components/radio/doc/index.en-US.md b/components/radio/doc/index.en-US.md
index 5672b3f92dd..62431adcbd3 100644
--- a/components/radio/doc/index.en-US.md
+++ b/components/radio/doc/index.en-US.md
@@ -24,7 +24,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
| `[nzDisabled]` | Disable radio | `boolean` | `false` |
| `[ngModel]` | Specifies whether the radio is selected, double binding | `boolean` | `false` |
-| `[nzValue]` | use with `nz-radio-group` | `string` | - |
+| `[nzValue]` | use with `nz-radio-group` | `any` | - |
| `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter` | - |
### nz-radio-group
@@ -33,7 +33,7 @@ radio group，wrap a group of `nz-radio`。
| Property | Description | Type | Default |
| -------- | ----------- | ---- | -------- | ------- |
-| `[ngModel]` | current selected `nz-radio` value, double binding | `string` | - |
+| `[ngModel]` | current selected `nz-radio` value, double binding | `any` | - |
| `[nzName]` | The `name` property of all `input[type="radio"]` children | `string` | - |
| `[nzDisabled]` | Disable all radio buttons | `boolean` | `false` |
| `[nzSize]` | Size, only on radio style | `'large' \| 'small' \| 'default'` | `'default'` |
diff --git a/components/radio/doc/index.zh-CN.md b/components/radio/doc/index.zh-CN.md
index ce8a0464667..f00436742e6 100644
--- a/components/radio/doc/index.zh-CN.md
+++ b/components/radio/doc/index.zh-CN.md
@@ -25,7 +25,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
| `[nzDisabled]` | 设定 disable 状态 | `boolean` | `false` |
| `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` |
-| `[nzValue]` | 设置 value，与 `nz-radio-group` 配合使用 | `string` | - |
+| `[nzValue]` | 设置 value，与 `nz-radio-group` 配合使用 | `any` | - |
| `(ngModelChange)` | 选中变化时回调 | `EventEmitter` | - |
@@ -35,7 +35,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
-| `[ngModel]` | 指定选中的 `nz-radio` 的 value 值 | `string` | - |
+| `[ngModel]` | 指定选中的 `nz-radio` 的 value 值 | `any` | - |
| `[nzName]` | `nz-radio-group` 下所有 `input[type="radio"]` 的 `name` 属性 | `string` | - |
| `[nzDisabled]` | 设定所有 `nz-radio` disable 状态 | `boolean` | `false` |
| `[nzSize]` | 大小，只对按钮样式生效 | `'large' \| 'small' \| 'default'` | `'default'` |
diff --git a/components/radio/nz-radio-button.component.html b/components/radio/nz-radio-button.component.html
deleted file mode 100644
index 8499dc2269a..00000000000
--- a/components/radio/nz-radio-button.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-;
- @Input() @InputBoolean() nzDisabled: boolean;
- @Input() nzButtonStyle: NzRadioButtonStyle = 'outline';
- @Input() nzSize: NzSizeLDSType = 'default';
- @Input() nzName: string;
-
- updateChildrenStatus(): void {
- if (this.radios) {
- Promise.resolve().then(() => {
- this.radios.forEach(radio => {
- radio.checked = radio.nzValue === this.value;
- if (isNotNil(this.nzDisabled)) {
- radio.nzDisabled = this.nzDisabled;
- }
- if (this.nzName) {
- radio.name = this.nzName;
- }
- radio.markForCheck();
- });
- });
- }
- }
-
- constructor(private cdr: ChangeDetectorRef, renderer: Renderer2, elementRef: ElementRef) {
- renderer.addClass(elementRef.nativeElement, 'ant-radio-group');
- }
-
- ngAfterContentInit(): void {
- this.radios.changes.pipe(startWith(null), takeUntil(this.destroy$)).subscribe(() => {
- this.updateChildrenStatus();
- if (this.selectSubscription) {
- this.selectSubscription.unsubscribe();
- }
- this.selectSubscription = merge(...this.radios.map(radio => radio.select$))
- .pipe(takeUntil(this.destroy$))
- .subscribe(radio => {
- if (this.value !== radio.nzValue) {
- this.value = radio.nzValue;
- this.updateChildrenStatus();
- this.onChange(this.value);
- }
- });
- if (this.touchedSubscription) {
- this.touchedSubscription.unsubscribe();
- }
- this.touchedSubscription = merge(...this.radios.map(radio => radio.touched$))
- .pipe(takeUntil(this.destroy$))
- .subscribe(() => {
- Promise.resolve().then(() => this.onTouched());
- });
- });
- }
-
- ngOnChanges(changes: SimpleChanges): void {
- if (changes.nzDisabled || changes.nzName) {
- this.updateChildrenStatus();
- }
- }
-
- ngOnDestroy(): void {
- this.destroy$.next();
- this.destroy$.complete();
- }
-
- /* tslint:disable-next-line:no-any */
- writeValue(value: any): void {
- this.value = value;
- this.updateChildrenStatus();
- this.cdr.markForCheck();
- }
-
- registerOnChange(fn: (_: string) => void): void {
- this.onChange = fn;
- }
-
- registerOnTouched(fn: () => void): void {
- this.onTouched = fn;
- }
-
- setDisabledState(isDisabled: boolean): void {
- this.nzDisabled = isDisabled;
- this.cdr.markForCheck();
- }
-}
diff --git a/components/radio/nz-radio.component.html b/components/radio/nz-radio.component.html
deleted file mode 100644
index e7543343281..00000000000
--- a/components/radio/nz-radio.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-();
- touched$ = new Subject();
- checked = false;
- name: string;
- isNgModel = false;
- onChange: (_: boolean) => void = () => null;
- onTouched: () => void = () => null;
- @ViewChild('inputElement', { static: false }) inputElement: ElementRef;
- /* tslint:disable-next-line:no-any */
- @Input() nzValue: any;
- @Input() @InputBoolean() nzDisabled = false;
- @Input() @InputBoolean() nzAutoFocus = false;
-
- updateAutoFocus(): void {
- if (this.inputElement) {
- if (this.nzAutoFocus) {
- this.renderer.setAttribute(this.inputElement.nativeElement, 'autofocus', 'autofocus');
- } else {
- this.renderer.removeAttribute(this.inputElement.nativeElement, 'autofocus');
- }
- }
- }
-
- @HostListener('click', ['$event'])
- onClick(event: MouseEvent): void {
- // Prevent label click triggered twice.
- event.stopPropagation();
- event.preventDefault();
- if (!this.nzDisabled && !this.checked) {
- this.select$.next(this);
- if (this.isNgModel) {
- this.checked = true;
- this.onChange(true);
- }
- }
- }
-
- focus(): void {
- this.focusMonitor.focusVia(this.inputElement, 'keyboard');
- }
-
- blur(): void {
- this.inputElement.nativeElement.blur();
- }
-
- markForCheck(): void {
- this.cdr.markForCheck();
- }
-
- /* tslint:disable-next-line:no-any */
- constructor(
- private elementRef: ElementRef,
- private renderer: Renderer2,
- private cdr: ChangeDetectorRef,
- private focusMonitor: FocusMonitor
- ) {
- this.renderer.addClass(elementRef.nativeElement, 'ant-radio-wrapper');
- }
-
- setDisabledState(isDisabled: boolean): void {
- this.nzDisabled = isDisabled;
- this.cdr.markForCheck();
- }
-
- writeValue(value: boolean): void {
- this.checked = value;
- this.cdr.markForCheck();
- }
-
- registerOnChange(fn: (_: boolean) => {}): void {
- this.isNgModel = true;
- this.onChange = fn;
- }
-
- registerOnTouched(fn: () => {}): void {
- this.onTouched = fn;
- }
-
- ngAfterViewInit(): void {
- this.focusMonitor.monitor(this.elementRef, true).subscribe(focusOrigin => {
- if (!focusOrigin) {
- Promise.resolve().then(() => this.onTouched());
- this.touched$.next();
- }
- });
- this.updateAutoFocus();
- }
-
- ngOnChanges(changes: SimpleChanges): void {
- if (changes.nzAutoFocus) {
- this.updateAutoFocus();
- }
- }
-
- ngOnDestroy(): void {
- this.focusMonitor.stopMonitoring(this.elementRef);
- }
-}
diff --git a/components/radio/public-api.ts b/components/radio/public-api.ts
index 02f330ab358..5db84f74d2a 100644
--- a/components/radio/public-api.ts
+++ b/components/radio/public-api.ts
@@ -6,7 +6,8 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-radio-button.component';
-export * from './nz-radio-group.component';
-export * from './nz-radio.component';
-export * from './nz-radio.module';
+export * from './radio-button.directive';
+export * from './radio-group.component';
+export * from './radio.component';
+export * from './radio.service';
+export * from './radio.module';
diff --git a/components/core/dropdown/public-api.ts b/components/radio/radio-button.directive.ts
similarity index 64%
rename from components/core/dropdown/public-api.ts
rename to components/radio/radio-button.directive.ts
index 47dd339dc60..f2ecebea403 100644
--- a/components/core/dropdown/public-api.ts
+++ b/components/radio/radio-button.directive.ts
@@ -6,5 +6,9 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-menu-base.service';
-export * from './nz-dropdown-service.resolver';
+import { Directive } from '@angular/core';
+
+@Directive({
+ selector: '[nz-radio-button]'
+})
+export class NzRadioButtonDirective {}
diff --git a/components/radio/radio-group.component.ts b/components/radio/radio-group.component.ts
new file mode 100644
index 00000000000..71ddb7e75ef
--- /dev/null
+++ b/components/radio/radio-group.component.ts
@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ forwardRef,
+ Input,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ SimpleChanges,
+ ViewEncapsulation
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InputBoolean, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core';
+import { NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';
+import { Subject } from 'rxjs';
+import { NzRadioService } from './radio.service';
+
+export type NzRadioButtonStyle = 'outline' | 'solid';
+
+@Component({
+ selector: 'nz-radio-group',
+ exportAs: 'nzRadioGroup',
+ preserveWhitespaces: false,
+ template: `
+ ();
+ isChecked = false;
+ name: string | null = null;
+ isRadioButton = !!this.nzRadioButtonDirective;
+ onChange: OnChangeType = () => {};
+ onTouched: OnTouchedType = () => {};
+ @ViewChild('inputElement', { static: false }) inputElement: ElementRef;
+ @Input() nzValue: NzSafeAny | null = null;
+ @Input() @InputBoolean() nzDisabled = false;
+ @Input() @InputBoolean() nzAutoFocus = false;
+
+ onHostClick(event: MouseEvent): void {
+ /** prevent label click triggered twice. **/
+ event.stopPropagation();
+ event.preventDefault();
+ this.focus();
+ if (!this.nzDisabled && !this.isChecked) {
+ if (this.nzRadioService) {
+ this.nzRadioService.select(this.nzValue);
+ }
+ if (this.isNgModel) {
+ this.isChecked = true;
+ this.onChange(true);
+ }
+ }
+ }
+
+ focus(): void {
+ this.focusMonitor.focusVia(this.inputElement, 'keyboard');
+ }
+
+ blur(): void {
+ this.inputElement.nativeElement.blur();
+ }
+
+ constructor(
+ private elementRef: ElementRef,
+ private cdr: ChangeDetectorRef,
+ private focusMonitor: FocusMonitor,
+ @Optional() private nzRadioService: NzRadioService,
+ @Optional() private nzRadioButtonDirective: NzRadioButtonDirective
+ ) {}
+
+ setDisabledState(disabled: boolean): void {
+ this.nzDisabled = disabled;
+ this.cdr.markForCheck();
+ }
+
+ writeValue(value: boolean): void {
+ this.isChecked = value;
+ this.cdr.markForCheck();
+ }
+
+ registerOnChange(fn: OnChangeType): void {
+ this.isNgModel = true;
+ this.onChange = fn;
+ }
+
+ registerOnTouched(fn: OnTouchedType): void {
+ this.onTouched = fn;
+ }
+
+ ngOnInit(): void {
+ if (this.nzRadioService) {
+ this.nzRadioService.name$.pipe(takeUntil(this.destroy$)).subscribe(name => {
+ this.name = name;
+ this.cdr.markForCheck();
+ });
+ this.nzRadioService.disabled$.pipe(takeUntil(this.destroy$)).subscribe(disabled => {
+ this.nzDisabled = disabled;
+ this.cdr.markForCheck();
+ });
+ this.nzRadioService.selected$.pipe(takeUntil(this.destroy$)).subscribe(value => {
+ this.isChecked = this.nzValue === value;
+ this.cdr.markForCheck();
+ });
+ }
+ this.focusMonitor.monitor(this.elementRef, true).subscribe(focusOrigin => {
+ if (!focusOrigin) {
+ Promise.resolve().then(() => this.onTouched());
+ if (this.nzRadioService) {
+ this.nzRadioService.touch();
+ }
+ }
+ });
+ }
+
+ ngAfterViewInit(): void {
+ if (this.nzAutoFocus) {
+ this.focus();
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ this.focusMonitor.stopMonitoring(this.elementRef);
+ }
+}
diff --git a/components/radio/nz-radio.module.ts b/components/radio/radio.module.ts
similarity index 60%
rename from components/radio/nz-radio.module.ts
rename to components/radio/radio.module.ts
index 0eae375da12..edcc090a52d 100644
--- a/components/radio/nz-radio.module.ts
+++ b/components/radio/radio.module.ts
@@ -10,13 +10,13 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { NzRadioButtonComponent } from './nz-radio-button.component';
-import { NzRadioGroupComponent } from './nz-radio-group.component';
-import { NzRadioComponent } from './nz-radio.component';
+import { NzRadioButtonDirective } from './radio-button.directive';
+import { NzRadioGroupComponent } from './radio-group.component';
+import { NzRadioComponent } from './radio.component';
@NgModule({
imports: [CommonModule, FormsModule],
- exports: [NzRadioComponent, NzRadioButtonComponent, NzRadioGroupComponent],
- declarations: [NzRadioComponent, NzRadioButtonComponent, NzRadioGroupComponent]
+ exports: [NzRadioComponent, NzRadioButtonDirective, NzRadioGroupComponent],
+ declarations: [NzRadioComponent, NzRadioButtonDirective, NzRadioGroupComponent]
})
export class NzRadioModule {}
diff --git a/components/radio/radio.service.ts b/components/radio/radio.service.ts
new file mode 100644
index 00000000000..f9746a54e46
--- /dev/null
+++ b/components/radio/radio.service.ts
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+import { Injectable } from '@angular/core';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { ReplaySubject, Subject } from 'rxjs';
+
+@Injectable()
+export class NzRadioService {
+ selected$ = new ReplaySubject(1);
+ touched$ = new Subject();
+ disabled$ = new ReplaySubject(1);
+ name$ = new ReplaySubject(1);
+ touch(): void {
+ this.touched$.next();
+ }
+ select(value: NzSafeAny): void {
+ this.selected$.next(value);
+ }
+ setDisabled(value: boolean): void {
+ this.disabled$.next(value);
+ }
+ setName(value: string): void {
+ this.name$.next(value);
+ }
+}
diff --git a/components/radio/nz-radio.spec.ts b/components/radio/radio.spec.ts
similarity index 97%
rename from components/radio/nz-radio.spec.ts
rename to components/radio/radio.spec.ts
index 0211df5e036..08053724c19 100644
--- a/components/radio/nz-radio.spec.ts
+++ b/components/radio/radio.spec.ts
@@ -3,10 +3,9 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
-import { NzRadioButtonComponent } from './nz-radio-button.component';
-import { NzRadioGroupComponent } from './nz-radio-group.component';
-import { NzRadioComponent } from './nz-radio.component';
-import { NzRadioModule } from './nz-radio.module';
+import { NzRadioGroupComponent } from './radio-group.component';
+import { NzRadioComponent } from './radio.component';
+import { NzRadioModule } from './radio.module';
describe('radio', () => {
beforeEach(fakeAsync(() => {
@@ -100,7 +99,7 @@ describe('radio', () => {
beforeEach(() => {
fixture = TestBed.createComponent(NzTestRadioButtonComponent);
fixture.detectChanges();
- radio = fixture.debugElement.query(By.directive(NzRadioButtonComponent));
+ radio = fixture.debugElement.query(By.directive(NzRadioComponent));
});
it('should className correct', () => {
fixture.detectChanges();
@@ -120,7 +119,7 @@ describe('radio', () => {
fixture = TestBed.createComponent(NzTestRadioGroupComponent);
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
- radios = fixture.debugElement.queryAll(By.directive(NzRadioButtonComponent));
+ radios = fixture.debugElement.queryAll(By.directive(NzRadioComponent));
radioGroup = fixture.debugElement.query(By.directive(NzRadioGroupComponent));
});
it('should className correct', () => {
@@ -177,7 +176,7 @@ describe('radio', () => {
fixture = TestBed.createComponent(NzTestRadioGroupDisabledComponent);
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
- radios = fixture.debugElement.queryAll(By.directive(NzRadioButtonComponent));
+ radios = fixture.debugElement.queryAll(By.directive(NzRadioComponent));
});
it('should group disable work', fakeAsync(() => {
testComponent.disabled = true;
@@ -269,7 +268,7 @@ describe('radio', () => {
flush();
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
- radios = fixture.debugElement.queryAll(By.directive(NzRadioButtonComponent));
+ radios = fixture.debugElement.queryAll(By.directive(NzRadioComponent));
}));
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
flush();
diff --git a/components/radio/style/entry.less b/components/radio/style/entry.less
index 06547c43acd..96cebe33bff 100644
--- a/components/radio/style/entry.less
+++ b/components/radio/style/entry.less
@@ -1 +1,2 @@
@import './index.less';
+@import './patch.less';
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
index b966eeb026d..152cea85087 100644
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -16,6 +16,14 @@
&-rtl {
direction: rtl;
}
+
+ .@{ant-prefix}-badge-count {
+ z-index: 1;
+ }
+
+ > .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
+ border-left: none;
+ }
}
// 一般状态
@@ -209,6 +217,7 @@ span.@{radio-prefix-cls} + * {
content: '';
}
}
+
&:first-child {
border-left: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
diff --git a/components/radio/style/patch.less b/components/radio/style/patch.less
new file mode 100644
index 00000000000..230ff736bb6
--- /dev/null
+++ b/components/radio/style/patch.less
@@ -0,0 +1,5 @@
+.ant-radio + span {
+ &:empty {
+ display: none;
+ }
+}
diff --git a/components/result/nz-result.module.ts b/components/result/nz-result.module.ts
index 5631ca84f3f..4ac3754b77a 100644
--- a/components/result/nz-result.module.ts
+++ b/components/result/nz-result.module.ts
@@ -9,13 +9,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzResultNotFoundComponent } from './partial/not-found';
-import { NzResultServerErrorComponent } from './partial/server-error.component';
-import { NzResultUnauthorizedComponent } from './partial/unauthorized';
-
import {
NzResultContentDirective,
NzResultExtraDirective,
@@ -25,6 +21,10 @@ import {
} from './nz-result-cells';
import { NzResultComponent } from './nz-result.component';
+import { NzResultNotFoundComponent } from './partial/not-found';
+import { NzResultServerErrorComponent } from './partial/server-error.component';
+import { NzResultUnauthorizedComponent } from './partial/unauthorized';
+
const partial = [NzResultNotFoundComponent, NzResultServerErrorComponent, NzResultUnauthorizedComponent];
const cellDirectives = [
@@ -36,7 +36,7 @@ const cellDirectives = [
];
@NgModule({
- imports: [CommonModule, NzAddOnModule, NzIconModule],
+ imports: [CommonModule, NzOutletModule, NzIconModule],
declarations: [NzResultComponent, ...cellDirectives, ...partial],
exports: [NzResultComponent, ...cellDirectives]
})
diff --git a/components/select/nz-select.component.html b/components/select/nz-select.component.html
index 51648c767ec..964431a6e7c 100644
--- a/components/select/nz-select.component.html
+++ b/components/select/nz-select.component.html
@@ -37,12 +37,11 @@
[cdkConnectedOverlayOpen]="open"
>
-
+
+
-
+
+
+
+
+
-
`
})
diff --git a/components/radio/demo/radiobutton.ts b/components/radio/demo/radiobutton.ts
index ef89afc8a86..d04c5511331 100644
--- a/components/radio/demo/radiobutton.ts
+++ b/components/radio/demo/radiobutton.ts
@@ -3,30 +3,28 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-radiobutton',
template: `
-
+
- `
+ `,
+ styles: [
+ `
+ div {
+ margin-bottom: 16px;
+ }
+ `
+ ]
})
export class NzDemoInputAddonComponent {
inputValue: string = 'my site';
diff --git a/components/input/demo/allow-clear.ts b/components/input/demo/allow-clear.ts
index 57f7ece7491..9655b2a20d9 100644
--- a/components/input/demo/allow-clear.ts
+++ b/components/input/demo/allow-clear.ts
@@ -3,22 +3,30 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-input-allow-clear',
template: `
- +
+
-
-
+
+
- `
+ `,
+ styles: [
+ `
+ textarea + textarea {
+ margin-top: 24px;
+ }
+ `
+ ]
})
-export class NzDemoInputAutosizeTextareaComponent {
- value: string;
-}
+export class NzDemoInputAutosizeTextareaComponent {}
diff --git a/components/input/demo/group.ts b/components/input/demo/group.ts
index faefe6404da..e14ae84ef30 100644
--- a/components/input/demo/group.ts
+++ b/components/input/demo/group.ts
@@ -4,11 +4,13 @@ import { Component } from '@angular/core';
selector: 'nz-demo-input-group',
template: `
-
-
-
-
+
diff --git a/components/input/demo/presuffix.ts b/components/input/demo/presuffix.ts index f1cac453a21..d51e0ee03d9 100644 --- a/components/input/demo/presuffix.ts +++ b/components/input/demo/presuffix.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core';
diff --git a/components/input/demo/tooltip.ts b/components/input/demo/tooltip.ts
index 8281c5893da..ad49da59e6e 100644
--- a/components/input/demo/tooltip.ts
+++ b/components/input/demo/tooltip.ts
@@ -10,10 +10,10 @@ import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/co
nz-input
nz-tooltip
nzTooltipTrigger="focus"
- nzPlacement="topLeft"
+ nzTooltipPlacement="topLeft"
nzOverlayClassName="numeric-input"
[ngModel]="value"
- [nzTitle]="title"
+ [nzTooltipTitle]="title"
placeholder="Input a number"
(ngModelChange)="onChange($event)"
(blur)="onBlur()"
diff --git a/components/input/input-group-slot.component.ts b/components/input/input-group-slot.component.ts
new file mode 100644
index 00000000000..8297c8e5e1a
--- /dev/null
+++ b/components/input/input-group-slot.component.ts
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: '[nz-input-group-slot]',
+ preserveWhitespaces: false,
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+
+ {{ template }}
+ `,
+ host: {
+ '[class.ant-input-group-addon]': `type === 'addon'`,
+ '[class.ant-input-prefix]': `type === 'prefix'`,
+ '[class.ant-input-suffix]': `type === 'suffix'`
+ }
+})
+export class NzInputGroupSlotComponent {
+ @Input() icon: string | null = null;
+ @Input() type: 'addon' | 'prefix' | 'suffix' | null = null;
+ @Input() template: string | TemplateRef | null = null;
+}
diff --git a/components/input/input-group.component.ts b/components/input/input-group.component.ts
new file mode 100644
index 00000000000..a452484857a
--- /dev/null
+++ b/components/input/input-group.component.ts
@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import {
+ AfterContentInit,
+ ChangeDetectionStrategy,
+ Component,
+ ContentChildren,
+ Input,
+ OnChanges,
+ QueryList,
+ SimpleChanges,
+ TemplateRef,
+ ViewEncapsulation
+} from '@angular/core';
+import { InputBoolean, NgClassType, NzSizeLDSType } from 'ng-zorro-antd/core';
+import { NzInputDirective } from './input.directive';
+
+@Component({
+ selector: 'nz-input-group',
+ exportAs: 'nzInputGroup',
+ preserveWhitespaces: false,
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ host: {
+ '[class.ant-input-group-compact]': `nzCompact`,
+ '[class.ant-input-search-enter-button]': `nzSearch`,
+ '[class.ant-input-search]': `nzSearch`,
+ '[class.ant-input-search-sm]': `nzSearch && isSmall`,
+ '[class.ant-input-search-large]': `nzSearch && isLarge`,
+ '[class.ant-input-group-wrapper]': `isAddOn`,
+ '[class.ant-input-group-wrapper-lg]': `isAddOn && isLarge`,
+ '[class.ant-input-group-wrapper-sm]': `isAddOn && isSmall`,
+ '[class.ant-input-affix-wrapper]': `isAffix && !isAddOn`,
+ '[class.ant-input-affix-wrapper-lg]': `isAffix && !isAddOn && isLarge`,
+ '[class.ant-input-affix-wrapper-sm]': `isAffix && !isAddOn && isSmall`,
+ '[class.ant-input-group]': `!isAffix && !isAddOn`,
+ '[class.ant-input-group-lg]': `!isAffix && !isAddOn && isLarge`,
+ '[class.ant-input-group-sm]': `!isAffix && !isAddOn && isSmall`
+ }
+})
+export class NzInputGroupComponent implements AfterContentInit, OnChanges {
+ @ContentChildren(NzInputDirective) listOfNzInputDirective: QueryList;
+ @Input() nzAddOnBeforeIcon: NgClassType;
+ @Input() nzAddOnAfterIcon: NgClassType;
+ @Input() nzPrefixIcon: NgClassType;
+ @Input() nzSuffixIcon: NgClassType;
+ @Input() nzAddOnBefore: string | TemplateRef;
+ @Input() nzAddOnAfter: string | TemplateRef;
+ @Input() nzPrefix: string | TemplateRef;
+ @Input() nzSuffix: string | TemplateRef;
+ @Input() nzSize: NzSizeLDSType;
+ @Input() @InputBoolean() nzSearch = false;
+ @Input() @InputBoolean() nzCompact = false;
+ isLarge = false;
+ isSmall = false;
+ isAffix = false;
+ isAddOn = false;
+
+ updateChildrenInputSize(): void {
+ if (this.listOfNzInputDirective) {
+ this.listOfNzInputDirective.forEach(item => (item.nzSize = this.nzSize));
+ }
+ }
+
+ ngAfterContentInit(): void {
+ this.updateChildrenInputSize();
+ }
+ ngOnChanges(changes: SimpleChanges): void {
+ const {
+ nzSize,
+ nzSuffix,
+ nzPrefix,
+ nzPrefixIcon,
+ nzSuffixIcon,
+ nzAddOnAfter,
+ nzAddOnBefore,
+ nzAddOnAfterIcon,
+ nzAddOnBeforeIcon
+ } = changes;
+ if (nzSize) {
+ this.updateChildrenInputSize();
+ this.isLarge = this.nzSize === 'large';
+ this.isSmall = this.nzSize === 'small';
+ }
+ if (nzSuffix || nzPrefix || nzPrefixIcon || nzSuffixIcon) {
+ this.isAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);
+ }
+ if (nzAddOnAfter || nzAddOnBefore || nzAddOnAfterIcon || nzAddOnBeforeIcon) {
+ this.isAddOn = !!(this.nzAddOnAfter || this.nzAddOnBefore || this.nzAddOnAfterIcon || this.nzAddOnBeforeIcon);
+ }
+ }
+}
diff --git a/components/input/nz-input-group.spec.ts b/components/input/input-group.spec.ts
similarity index 98%
rename from components/input/nz-input-group.spec.ts
rename to components/input/input-group.spec.ts
index dac47193fd4..e02ae986178 100644
--- a/components/input/nz-input-group.spec.ts
+++ b/components/input/input-group.spec.ts
@@ -3,8 +3,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
-import { NzInputGroupComponent } from './nz-input-group.component';
-import { NzInputModule } from './nz-input.module';
+import { NzInputGroupComponent } from './input-group.component';
+import { NzInputModule } from './input.module';
describe('input-group', () => {
beforeEach(async(() => {
@@ -183,7 +183,7 @@ describe('input-group', () => {
expect(inputGroupElement.classList).toContain('ant-input-search');
testComponent.size = 'large';
fixture.detectChanges();
- expect(inputGroupElement.classList).toContain('ant-input-search-lg');
+ expect(inputGroupElement.classList).toContain('ant-input-search-large');
testComponent.size = 'small';
fixture.detectChanges();
expect(inputGroupElement.classList).toContain('ant-input-search-sm');
diff --git a/components/input/nz-input.directive.ts b/components/input/input.directive.ts
similarity index 94%
rename from components/input/nz-input.directive.ts
rename to components/input/input.directive.ts
index c75dcf49d03..453af2c7a69 100644
--- a/components/input/nz-input.directive.ts
+++ b/components/input/input.directive.ts
@@ -10,7 +10,7 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
import { InputBoolean, NzSizeLDSType } from 'ng-zorro-antd/core';
@Directive({
- selector: '[nz-input]',
+ selector: 'input[nz-input],textarea[nz-input]',
exportAs: 'nzInput',
host: {
'[class.ant-input-disabled]': 'disabled',
diff --git a/components/input/nz-input.module.ts b/components/input/input.module.ts
similarity index 59%
rename from components/input/nz-input.module.ts
rename to components/input/input.module.ts
index 98c5fe7d719..05807139f39 100644
--- a/components/input/nz-input.module.ts
+++ b/components/input/input.module.ts
@@ -6,20 +6,20 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
+import { PlatformModule } from '@angular/cdk/platform';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
-
-import { PlatformModule } from '@angular/cdk/platform';
-import { NzAutosizeDirective } from './nz-autosize.directive';
-import { NzInputGroupComponent } from './nz-input-group.component';
-import { NzInputDirective } from './nz-input.directive';
+import { NzAutosizeDirective } from './autosize.directive';
+import { NzInputGroupSlotComponent } from './input-group-slot.component';
+import { NzInputGroupComponent } from './input-group.component';
+import { NzInputDirective } from './input.directive';
@NgModule({
- declarations: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective],
+ declarations: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupSlotComponent],
exports: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective],
- imports: [CommonModule, NzIconModule, PlatformModule, NzAddOnModule]
+ imports: [CommonModule, NzIconModule, PlatformModule, NzOutletModule]
})
export class NzInputModule {}
diff --git a/components/input/nz-input.spec.ts b/components/input/input.spec.ts
similarity index 97%
rename from components/input/nz-input.spec.ts
rename to components/input/input.spec.ts
index 966743578f9..7e93628d6b2 100644
--- a/components/input/nz-input.spec.ts
+++ b/components/input/input.spec.ts
@@ -3,8 +3,8 @@ import { async, ComponentFixture, fakeAsync, flush, TestBed } from '@angular/cor
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
-import { NzInputDirective } from './nz-input.directive';
-import { NzInputModule } from './nz-input.module';
+import { NzInputDirective } from './input.directive';
+import { NzInputModule } from './input.module';
describe('input', () => {
beforeEach(async(() => {
diff --git a/components/input/nz-input-group.component.html b/components/input/nz-input-group.component.html
deleted file mode 100644
index 3582718043f..00000000000
--- a/components/input/nz-input-group.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
- {{ nzAddOnBefore }}
-
-
-
-
- {{ nzAddOnAfter }}
-
-
-
-
-
-
-
-
- {{ nzPrefix }}
-
- {{ nzSuffix }}
-
-
-
-
-
-
diff --git a/components/input/nz-input-group.component.ts b/components/input/nz-input-group.component.ts
deleted file mode 100644
index 3a12a399e1e..00000000000
--- a/components/input/nz-input-group.component.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * @license
- * Copyright Alibaba.com All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
-
-import {
- AfterContentInit,
- ChangeDetectionStrategy,
- Component,
- ContentChildren,
- Input,
- QueryList,
- TemplateRef,
- ViewEncapsulation
-} from '@angular/core';
-import { InputBoolean, NgClassType, NzSizeLDSType } from 'ng-zorro-antd/core';
-import { NzInputDirective } from './nz-input.directive';
-
-@Component({
- selector: 'nz-input-group',
- exportAs: 'nzInputGroup',
- preserveWhitespaces: false,
- encapsulation: ViewEncapsulation.None,
- changeDetection: ChangeDetectionStrategy.OnPush,
- templateUrl: './nz-input-group.component.html',
- host: {
- '[class.ant-input-group-compact]': 'nzCompact',
- '[class.ant-input-search-enter-button]': 'nzSearch',
- '[class.ant-input-search]': 'nzSearch',
- '[class.ant-input-search-sm]': 'isSmallSearch',
- '[class.ant-input-affix-wrapper]': 'isAffixWrapper',
- '[class.ant-input-group-wrapper]': 'isAddOn',
- '[class.ant-input-group]': 'isGroup',
- '[class.ant-input-group-lg]': 'isLargeGroup',
- '[class.ant-input-group-wrapper-lg]': 'isLargeGroupWrapper',
- '[class.ant-input-affix-wrapper-lg]': 'isLargeAffix',
- '[class.ant-input-search-lg]': 'isLargeSearch',
- '[class.ant-input-group-sm]': 'isSmallGroup',
- '[class.ant-input-affix-wrapper-sm]': 'isSmallAffix',
- '[class.ant-input-group-wrapper-sm]': 'isSmallGroupWrapper'
- }
-})
-export class NzInputGroupComponent implements AfterContentInit {
- @ContentChildren(NzInputDirective) listOfNzInputDirective: QueryList;
- private _size: NzSizeLDSType = 'default';
- @Input() nzAddOnBeforeIcon: NgClassType;
- @Input() nzAddOnAfterIcon: NgClassType;
- @Input() nzPrefixIcon: NgClassType;
- @Input() nzSuffixIcon: NgClassType;
- @Input() nzAddOnBefore: string | TemplateRef;
- @Input() nzAddOnAfter: string | TemplateRef;
- @Input() nzPrefix: string | TemplateRef;
- @Input() nzSuffix: string | TemplateRef;
- @Input() @InputBoolean() nzSearch = false;
- @Input() @InputBoolean() nzCompact = false;
-
- @Input() set nzSize(value: NzSizeLDSType) {
- this._size = value;
- this.updateChildrenInputSize();
- }
-
- get nzSize(): NzSizeLDSType {
- return this._size;
- }
-
- get isLarge(): boolean {
- return this.nzSize === 'large';
- }
-
- get isSmall(): boolean {
- return this.nzSize === 'small';
- }
-
- get isAffix(): boolean {
- return !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);
- }
-
- get isAddOn(): boolean {
- return !!(this.nzAddOnAfter || this.nzAddOnBefore || this.nzAddOnAfterIcon || this.nzAddOnBeforeIcon);
- }
-
- get isAffixWrapper(): boolean {
- return this.isAffix && !this.isAddOn;
- }
-
- get isGroup(): boolean {
- return !this.isAffix && !this.isAddOn;
- }
-
- get isLargeGroup(): boolean {
- return this.isGroup && this.isLarge;
- }
-
- get isLargeGroupWrapper(): boolean {
- return this.isAddOn && this.isLarge;
- }
-
- get isLargeAffix(): boolean {
- return this.isAffixWrapper && this.isLarge;
- }
-
- get isLargeSearch(): boolean {
- return this.nzSearch && this.isLarge;
- }
-
- get isSmallGroup(): boolean {
- return this.isGroup && this.isSmall;
- }
-
- get isSmallAffix(): boolean {
- return this.isAffixWrapper && this.isSmall;
- }
-
- get isSmallGroupWrapper(): boolean {
- return this.isAddOn && this.isSmall;
- }
-
- get isSmallSearch(): boolean {
- return this.nzSearch && this.isSmall;
- }
-
- updateChildrenInputSize(): void {
- if (this.listOfNzInputDirective) {
- this.listOfNzInputDirective.forEach(item => (item.nzSize = this.nzSize));
- }
- }
-
- ngAfterContentInit(): void {
- this.updateChildrenInputSize();
- }
-}
diff --git a/components/input/public-api.ts b/components/input/public-api.ts
index 3f22e7c07d7..92c6d7d19cd 100644
--- a/components/input/public-api.ts
+++ b/components/input/public-api.ts
@@ -6,8 +6,9 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-input-group.component';
-export * from './nz-input.module';
-export * from './nz-input-group.component';
-export * from './nz-input.directive';
-export * from './nz-autosize.directive';
+export * from './input-group.component';
+export * from './input.module';
+export * from './input-group.component';
+export * from './input-group-slot.component';
+export * from './input.directive';
+export * from './autosize.directive';
diff --git a/components/input/style/affix.less b/components/input/style/affix.less
new file mode 100644
index 00000000000..0c0578bd205
--- /dev/null
+++ b/components/input/style/affix.less
@@ -0,0 +1,50 @@
+@import './index';
+@import './mixin';
+
+@input-affix-margin: 4px;
+
+.@{ant-prefix}-input {
+ &-affix-wrapper {
+ .input();
+ display: inline-flex;
+
+ > .@{ant-prefix}-input {
+ padding: 0;
+ border: none;
+ outline: none;
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ .@{ant-prefix}-input-clear-icon {
+ margin: 0 @input-affix-margin;
+ vertical-align: -1px;
+ }
+ }
+
+ &-prefix,
+ &-suffix {
+ flex: none;
+ }
+
+ &-prefix {
+ margin-right: @input-affix-margin;
+ }
+
+ &-suffix {
+ margin-left: @input-affix-margin;
+ }
+
+ // ======================== RTL ========================
+ &-affix-wrapper-rtl {
+ .@{ant-prefix}-input-prefix {
+ margin: 0 0 0 @input-affix-margin;
+ }
+
+ .@{ant-prefix}-input-suffix {
+ margin: 0 @input-affix-margin 0 0;
+ }
+ }
+}
diff --git a/components/input/style/entry.less b/components/input/style/entry.less
index 8d6c97e9eb9..96cebe33bff 100644
--- a/components/input/style/entry.less
+++ b/components/input/style/entry.less
@@ -1,3 +1,2 @@
@import './index.less';
-// style dependencies
-@import '../../button/style/index.less';
+@import './patch.less';
diff --git a/components/input/style/index.less b/components/input/style/index.less
index cac078d00dd..8665dedc698 100644
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@@ -1,6 +1,7 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
+@import './affix';
// Input styles
.@{ant-prefix}-input {
@@ -26,17 +27,6 @@
}
}
-// Input with affix: prefix or suffix
-.@{ant-prefix}-input-affix-wrapper {
- .reset-component;
- .input-affix-wrapper(~'@{ant-prefix}-input');
-
- // https://github.com/ant-design/ant-design/issues/6144
- .@{ant-prefix}-input {
- min-height: 100%; // use min-height, assume that no smaller height to override
- }
-}
-
.@{ant-prefix}-input-password-icon {
color: @text-color-secondary;
cursor: pointer;
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index a9e995beeaf..f968b6d0095 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -3,18 +3,15 @@
@input-rtl-cls: ~'@{ant-prefix}-input-rtl';
-@input-affix-width: 19px;
@input-affix-with-clear-btn-width: 38px;
// size mixins for input
.input-lg() {
- height: @input-height-lg;
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
font-size: @font-size-lg;
}
.input-sm() {
- height: @input-height-sm;
padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
}
@@ -64,7 +61,6 @@
position: relative;
display: inline-block;
width: 100%;
- height: @input-height-base;
padding: @input-padding-vertical-base @input-padding-horizontal-base;
color: @input-color;
font-size: @font-size-base;
@@ -80,7 +76,8 @@
.hover();
}
- &:focus {
+ &:focus,
+ &-focused {
.active();
}
@@ -309,9 +306,7 @@
}
.@{inputClass}-affix-wrapper {
- display: table-cell;
- float: left;
- width: 100%;
+ border-radius: 0;
}
&&-compact {
@@ -423,101 +418,6 @@
}
}
-.input-affix-wrapper(@inputClass) {
- position: relative;
- display: inline-block;
- width: 100%;
- text-align: start;
-
- &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
- .hover();
- }
-
- .@{inputClass} {
- position: relative;
- text-align: inherit;
- }
-
- // Should not break align of icon & text
- // https://github.com/ant-design/ant-design/issues/18087
- // https://github.com/ant-design/ant-design/issues/17414
- // https://github.com/ant-design/ant-design/pull/17684
- // https://codesandbox.io/embed/pensive-paper-di2wk
- // https://codesandbox.io/embed/nifty-benz-gb7ml
- .@{inputClass}-prefix,
- .@{inputClass}-suffix {
- position: absolute;
- top: 50%;
- z-index: 2;
- display: flex;
- align-items: center;
- color: @input-icon-color;
- line-height: 0;
- transform: translateY(-50%);
-
- :not(.anticon) {
- line-height: @line-height-base;
- }
- }
-
- .@{inputClass}-disabled ~ .@{inputClass}-suffix {
- .anticon {
- color: @disabled-color;
- cursor: not-allowed;
- }
- }
-
- .@{inputClass}-prefix {
- left: @input-padding-horizontal-base + 1px;
-
- .@{inputClass}-affix-wrapper-rtl& {
- right: @input-padding-horizontal-base + 1px;
- left: auto;
- }
- }
-
- .@{inputClass}-suffix {
- right: @input-padding-horizontal-base + 1px;
-
- .@{inputClass}-affix-wrapper-rtl& {
- right: auto;
- left: @input-padding-horizontal-base + 1px;
- }
- }
-
- .@{inputClass}:not(:first-child) {
- padding-left: @input-padding-horizontal-base + @input-affix-width;
- }
-
- .@{inputClass}:not(:last-child) {
- padding-right: @input-padding-horizontal-base + @input-affix-width;
- }
-
- // Needed to change priority of classes in rtl direction (last-child comes before first-child)
- .@{inputClass}-affix-wrapper-rtl& .@{inputClass}:not(:last-child) {
- padding-right: @input-padding-horizontal-base;
- padding-left: @input-padding-horizontal-base + @input-affix-width;
- }
-
- .@{inputClass}-affix-wrapper-rtl& .@{inputClass}:not(:first-child) {
- padding-right: @input-padding-horizontal-base + @input-affix-width;
- padding-left: @input-padding-horizontal-base;
- }
-
- &.@{inputClass}-affix-wrapper-input-with-clear-btn .@{inputClass}:not(:last-child) {
- padding-right: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
-
- .@{inputClass}-affix-wrapper-rtl& {
- padding-right: @input-padding-horizontal-base;
- padding-left: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
- }
- }
-
- &.@{inputClass}-affix-wrapper-textarea-with-clear-btn .@{inputClass} {
- padding-right: 22px;
- }
-}
-
.clear-icon() {
color: @disabled-color;
font-size: @font-size-sm;
diff --git a/components/input/style/patch.less b/components/input/style/patch.less
new file mode 100644
index 00000000000..a0d7ee21662
--- /dev/null
+++ b/components/input/style/patch.less
@@ -0,0 +1,8 @@
+textarea.nz-textarea-autosize-measuring {
+ height: auto !important;
+ overflow: hidden !important;
+ // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
+ // measurement. We just have to account for it later and subtract it off the final result.
+ padding: 2px 0 !important;
+ box-sizing: content-box !important;
+}
diff --git a/components/layout/demo/custom-trigger.ts b/components/layout/demo/custom-trigger.ts
index 24259bc9de5..c0feef9d481 100644
--- a/components/layout/demo/custom-trigger.ts
+++ b/components/layout/demo/custom-trigger.ts
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
-
`,
@@ -57,11 +62,15 @@ import { finalize, takeUntil } from 'rxjs/operators';
'[class.ant-layout-sider-light]': `nzTheme === 'light'`,
'[class.ant-layout-sider-dark]': `nzTheme === 'dark'`,
'[class.ant-layout-sider-collapsed]': `nzCollapsed`,
- '[style]': 'hostStyleMap'
+ '[style.flex]': 'flexSetting',
+ '[style.maxWidth]': 'widthSetting',
+ '[style.minWidth]': 'widthSetting',
+ '[style.width]': 'widthSetting'
}
})
-export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, AfterContentInit {
private destroy$ = new Subject();
+ @ContentChild(NzMenuDirective) nzMenuDirective: NzMenuDirective | null = null;
@Output() readonly nzCollapsedChange = new EventEmitter();
@Input() nzWidth: string | number = 200;
@Input() nzTheme: 'light' | 'dark' = 'dark';
@@ -73,22 +82,12 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
@Input() @InputBoolean() nzCollapsible = false;
@Input() @InputBoolean() nzCollapsed = false;
matchBreakPoint = false;
- hostStyleMap: IndexableObject = {};
+ flexSetting: string | null = null;
+ widthSetting: string | null = null;
updateStyleMap(): void {
- let widthSetting: string;
- if (this.nzCollapsed) {
- widthSetting = `${this.nzCollapsedWidth}px`;
- } else {
- widthSetting = toCssPixel(this.nzWidth);
- }
- const flexSetting = `0 0 ${widthSetting}`;
- this.hostStyleMap = {
- flex: flexSetting,
- maxWidth: widthSetting,
- minWidth: widthSetting,
- width: widthSetting
- };
+ this.widthSetting = this.nzCollapsed ? `${this.nzCollapsedWidth}px` : toCssPixel(this.nzWidth);
+ this.flexSetting = `0 0 ${this.widthSetting}`;
this.cdr.markForCheck();
}
@@ -96,20 +95,31 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
if (this.nzBreakpoint) {
this.matchBreakPoint = this.mediaMatcher.matchMedia(siderResponsiveMap[this.nzBreakpoint]).matches;
this.setCollapsed(this.matchBreakPoint);
+ this.cdr.markForCheck();
+ }
+ }
+
+ updateMenuInlineCollapsed(): void {
+ if (this.nzMenuDirective && this.nzMenuDirective.nzMode === 'inline' && this.nzCollapsedWidth !== 0) {
+ this.nzMenuDirective.setInlineCollapsed(this.nzCollapsed);
}
- this.cdr.markForCheck();
}
setCollapsed(collapsed: boolean): void {
- this.nzCollapsed = collapsed;
- this.nzCollapsedChange.emit(collapsed);
- this.cdr.markForCheck();
+ if (collapsed !== this.nzCollapsed) {
+ this.nzCollapsed = collapsed;
+ this.nzCollapsedChange.emit(collapsed);
+ this.updateMenuInlineCollapsed();
+ this.updateStyleMap();
+ this.cdr.markForCheck();
+ }
}
constructor(
private mediaMatcher: MediaMatcher,
private platform: Platform,
private cdr: ChangeDetectorRef,
+ private ngZone: NgZone,
private nzDomEventService: NzDomEventService
) {}
@@ -117,20 +127,32 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
this.updateStyleMap();
}
- ngOnChanges(): void {
- this.updateStyleMap();
+ ngOnChanges(changes: SimpleChanges): void {
+ const { nzCollapsed, nzCollapsedWidth, nzWidth } = changes;
+ if (nzCollapsed || nzCollapsedWidth || nzWidth) {
+ this.updateStyleMap();
+ }
+ if (nzCollapsed) {
+ this.updateMenuInlineCollapsed();
+ }
+ }
+
+ ngAfterContentInit(): void {
+ this.updateMenuInlineCollapsed();
}
ngAfterViewInit(): void {
if (this.platform.isBrowser) {
- Promise.resolve().then(() => this.updateBreakpointMatch());
- this.nzDomEventService
- .registerResizeListener()
- .pipe(
- takeUntil(this.destroy$),
- finalize(() => this.nzDomEventService.unregisterResizeListener())
- )
- .subscribe(() => this.updateBreakpointMatch());
+ merge(
+ this.nzDomEventService.registerResizeListener().pipe(finalize(() => this.nzDomEventService.unregisterResizeListener())),
+ of(true).pipe(delay(0))
+ )
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ this.ngZone.run(() => {
+ this.updateBreakpointMatch();
+ });
+ });
}
}
diff --git a/components/layout/style/index.less b/components/layout/style/index.less
index b7a9082dde6..f186662ae8f 100644
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@@ -32,6 +32,7 @@
&-header {
height: @layout-header-height;
padding: @layout-header-padding;
+ color: @layout-header-color;
line-height: @layout-header-height;
background: @layout-header-background;
}
diff --git a/components/list/nz-list.module.ts b/components/list/nz-list.module.ts
index 8e6edecd3de..0189aee244b 100644
--- a/components/list/nz-list.module.ts
+++ b/components/list/nz-list.module.ts
@@ -10,7 +10,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzSpinModule } from 'ng-zorro-antd/spin';
@@ -20,7 +20,7 @@ import { NzListItemComponent } from './nz-list-item.component';
import { NzListComponent } from './nz-list.component';
@NgModule({
- imports: [CommonModule, NzSpinModule, NzGridModule, NzAvatarModule, NzAddOnModule, NzEmptyModule],
+ imports: [CommonModule, NzSpinModule, NzGridModule, NzAvatarModule, NzOutletModule, NzEmptyModule],
declarations: [NzListComponent, NzListItemComponent, NzListItemMetaComponent],
exports: [NzListComponent, NzListItemComponent, NzListItemMetaComponent]
})
diff --git a/components/list/style/index.less b/components/list/style/index.less
index 6da354048ec..07ebc1c8515 100644
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@@ -66,6 +66,7 @@
&-item {
display: flex;
align-items: center;
+ justify-content: space-between;
padding: @list-item-padding;
&-content {
diff --git a/components/menu/demo/inline-collapsed.ts b/components/menu/demo/inline-collapsed.ts
index e002c478f0d..a8ecf8f911f 100644
--- a/components/menu/demo/inline-collapsed.ts
+++ b/components/menu/demo/inline-collapsed.ts
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
+
+
+
+
+
+
diff --git a/components/input/demo/presuffix.ts b/components/input/demo/presuffix.ts index f1cac453a21..d51e0ee03d9 100644 --- a/components/input/demo/presuffix.ts +++ b/components/input/demo/presuffix.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core';
-
+
-
-
-
+
+ {{ nzTitle }}
+
+ -
-
+
+
+ `,
+ styles: [
+ `
+ .wrapper {
+ width: 240px;
+ }
+
+ button {
+ margin-bottom: 12px;
+ }
+ `
+ ]
+})
+export class NzTestMenuInlineCollapsedComponent {
+ isCollapsed = false;
+
+ toggleCollapsed(): void {
+ this.isCollapsed = !this.isCollapsed;
+ }
+}
+
+@Component({
+ template: `
+ -
+
-
+
-
+
-
+
-
- {{ nzTitle }}
-
-
-
-
-
-
+
+ `,
+ host: {
+ '[class.ant-menu-submenu]': 'true',
+ '[class.ant-menu-submenu-popup]': 'true',
+ '[class.ant-menu-light]': "theme === 'light'",
+ '[class.ant-menu-dark]': "theme === 'dark'",
+ '[class.ant-menu-submenu-placement-bottom]': "mode === 'horizontal'",
+ '[class.ant-menu-submenu-placement-right]': "mode === 'vertical' && position === 'right'",
+ '[class.ant-menu-submenu-placement-left]': "mode === 'vertical' && position === 'left'",
+ '[@slideMotion]': 'expandState',
+ '[@zoomBigMotion]': 'expandState',
+ '(mouseenter)': 'setMouseState(true)',
+ '(mouseleave)': 'setMouseState(false)'
+ }
+})
+export class NzSubmenuNoneInlineChildComponent implements OnInit, OnChanges {
+ @Input() menuClass: string | null = null;
+ @Input() theme: NzMenuThemeType = 'light';
+ @Input() templateOutlet: TemplateRef
+
+
+ -
-
+
+
+
+
+ •••
+
+
+ -
-
-
+ +
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+
+
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+
+
-
-
-
-
-
-
-
+
+
- `
+ `,
+ styles: [
+ `
+ i {
+ font-size: 24px;
+ }
+ `
+ ]
})
export class NzDemoSpinCustomIndicatorComponent {}
diff --git a/components/spin/demo/delay-and-debounce.ts b/components/spin/demo/delay-and-debounce.ts
index fb016b929cc..e29ebc632a1 100644
--- a/components/spin/demo/delay-and-debounce.ts
+++ b/components/spin/demo/delay-and-debounce.ts
@@ -7,7 +7,8 @@ import { Component } from '@angular/core';
-
+
+
-
+
Loading state：
diff --git a/components/spin/demo/nested.ts b/components/spin/demo/nested.ts
index f9f90a5ad1b..365a46e4a06 100644
--- a/components/spin/demo/nested.ts
+++ b/components/spin/demo/nested.ts
@@ -7,7 +7,8 @@ import { Component } from '@angular/core';
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+ ;
@Input() nzSize: NzSizeLDSType = 'default';
- @Input() nzTip: string;
+ @Input() nzTip: string | null = null;
@Input() @InputNumber() nzDelay = 0;
@Input() @InputBoolean() nzSimple = false;
@Input() @InputBoolean() nzSpinning = true;
- loading = true;
private destroy$ = new Subject();
private spinning$ = new BehaviorSubject(this.nzSpinning);
- private loading$: Observable = this.spinning$.pipe(debounceTime(this.nzDelay));
- private loading_: Subscription | null;
-
- subscribeLoading(): void {
- this.unsubscribeLoading();
- this.loading_ = this.loading$.subscribe(data => {
- this.loading = data;
- this.cdr.markForCheck();
- });
- }
-
- unsubscribeLoading(): void {
- if (this.loading_) {
- this.loading_.unsubscribe();
- this.loading_ = null;
- }
- }
+ private delay$ = new BehaviorSubject(this.nzDelay);
+ isLoading = true;
constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {}
ngOnInit(): void {
- this.subscribeLoading();
-
+ const loading$ = this.spinning$.pipe(
+ flatMap(() => this.delay$),
+ flatMap(delay => {
+ if (delay === 0) {
+ return this.spinning$;
+ } else {
+ return this.spinning$.pipe(debounceTime(delay));
+ }
+ }),
+ takeUntil(this.destroy$)
+ );
+ loading$.subscribe(loading => {
+ this.isLoading = loading;
+ this.cdr.markForCheck();
+ });
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
.pipe(takeUntil(this.destroy$))
@@ -83,21 +95,17 @@ export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
}
ngOnChanges(changes: SimpleChanges): void {
- if (changes.nzSpinning) {
- if (changes.nzSpinning.isFirstChange()) {
- this.loading = this.nzSpinning;
- }
+ const { nzSpinning, nzDelay } = changes;
+ if (nzSpinning) {
this.spinning$.next(this.nzSpinning);
}
- if (changes.nzDelay) {
- this.loading$ = this.spinning$.pipe(debounceTime(this.nzDelay));
- this.subscribeLoading();
+ if (nzDelay) {
+ this.delay$.next(this.nzDelay);
}
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
- this.unsubscribeLoading();
}
}
diff --git a/components/spin/nz-spin.module.ts b/components/spin/spin.module.ts
similarity index 90%
rename from components/spin/nz-spin.module.ts
rename to components/spin/spin.module.ts
index 25e72235431..ab4ba30507c 100644
--- a/components/spin/nz-spin.module.ts
+++ b/components/spin/spin.module.ts
@@ -10,7 +10,7 @@ import { ObserversModule } from '@angular/cdk/observers';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzSpinComponent } from './nz-spin.component';
+import { NzSpinComponent } from './spin.component';
@NgModule({
exports: [NzSpinComponent],
diff --git a/components/spin/nz-spin.spec.ts b/components/spin/spin.spec.ts
similarity index 97%
rename from components/spin/nz-spin.spec.ts
rename to components/spin/spin.spec.ts
index ac306bbfabd..6c74d2d9ebd 100644
--- a/components/spin/nz-spin.spec.ts
+++ b/components/spin/spin.spec.ts
@@ -1,12 +1,10 @@
import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-
-import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
-
import { NzConfigService } from 'ng-zorro-antd/core';
-import { NzSpinComponent } from './nz-spin.component';
-import { NzSpinModule } from './nz-spin.module';
+import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
+import { NzSpinComponent } from './spin.component';
+import { NzSpinModule } from './spin.module';
describe('spin', () => {
beforeEach(fakeAsync(() => {
diff --git a/components/spin/style/entry.less b/components/spin/style/entry.less
index 06547c43acd..96cebe33bff 100644
--- a/components/spin/style/entry.less
+++ b/components/spin/style/entry.less
@@ -1 +1,2 @@
@import './index.less';
+@import './patch.less';
diff --git a/components/spin/style/patch.less b/components/spin/style/patch.less
new file mode 100644
index 00000000000..dc84833ebcd
--- /dev/null
+++ b/components/spin/style/patch.less
@@ -0,0 +1,3 @@
+nz-spin {
+ display: block;
+}
diff --git a/components/statistic/nz-countdown.component.ts b/components/statistic/countdown.component.ts
similarity index 83%
rename from components/statistic/nz-countdown.component.ts
rename to components/statistic/countdown.component.ts
index 14a437b86e4..a31b6c703cf 100644
--- a/components/statistic/nz-countdown.component.ts
+++ b/components/statistic/countdown.component.ts
@@ -23,18 +23,30 @@ import {
} from '@angular/core';
import { interval, Subscription } from 'rxjs';
-import { REFRESH_INTERVAL } from './nz-statistic-definitions';
-import { NzStatisticComponent } from './nz-statistic.component';
+import { NzStatisticComponent } from './statistic.component';
+
+const REFRESH_INTERVAL = 1000 / 30;
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-countdown',
exportAs: 'nzCountdown',
- templateUrl: './nz-countdown.component.html'
+ template: `
+
+
+
+ {{ diff | nzTimeRange: nzFormat }}
+ `
})
export class NzCountdownComponent extends NzStatisticComponent implements OnInit, OnChanges, OnDestroy {
- /** @override */
@Input() nzFormat: string = 'HH:mm:ss';
@Output() readonly nzCountdownFinish = new EventEmitter();
@@ -47,7 +59,6 @@ export class NzCountdownComponent extends NzStatisticComponent implements OnInit
super();
}
- /** @override */
ngOnChanges(changes: SimpleChanges): void {
if (changes.nzValue) {
this.target = Number(changes.nzValue.currentValue);
diff --git a/components/statistic/nz-countdown.spec.ts b/components/statistic/countdown.spec.ts
similarity index 83%
rename from components/statistic/nz-countdown.spec.ts
rename to components/statistic/countdown.spec.ts
index 788446d1c52..aa4b3d11174 100644
--- a/components/statistic/nz-countdown.spec.ts
+++ b/components/statistic/countdown.spec.ts
@@ -1,65 +1,25 @@
-import { CommonModule } from '@angular/common';
import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { NzCountdownComponent } from './nz-countdown.component';
-import { NzStatisticModule } from './nz-statistic.module';
-@Component({
- template: `
-
-
-
- {{ diff }}
-
- `
-})
-export class NzTestCountdownComponent {
- @ViewChild(NzCountdownComponent, { static: true }) countdown: NzCountdownComponent;
- @ViewChild('tpl', { static: true }) tpl: TemplateRef;
+import { ɵComponentBed as ComponentBed, ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core';
- format: string;
- value: number;
- template: TemplateRef;
- finished = 0;
-
- resetTimerWithFormat(format: string): void {
- this.format = format;
- this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
- }
-
- resetWithTemplate(): void {
- this.template = this.tpl;
- this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
- }
-
- onFinish(): void {
- this.finished += 1;
- }
-}
+import { NzCountdownComponent } from './countdown.component';
+import { NzStatisticModule } from './statistic.module';
describe('nz-countdown', () => {
+ let testBed: ComponentBed;
let fixture: ComponentFixture;
let testComponent: NzTestCountdownComponent;
let countdownEl: DebugElement;
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [CommonModule, NzStatisticModule],
- declarations: [NzTestCountdownComponent]
- }).compileComponents();
- });
-
describe('basic', () => {
beforeEach(() => {
- fixture = TestBed.createComponent(NzTestCountdownComponent);
- testComponent = fixture.debugElement.componentInstance;
+ testBed = createComponentBed(NzTestCountdownComponent, {
+ imports: [NzStatisticModule]
+ });
+ fixture = testBed.fixture;
+ testComponent = testBed.component;
countdownEl = fixture.debugElement.query(By.directive(NzCountdownComponent));
});
@@ -105,3 +65,42 @@ describe('nz-countdown', () => {
}));
});
});
+
+@Component({
+ template: `
+
+
+
+ {{ diff }}
+
+ `
+})
+export class NzTestCountdownComponent {
+ @ViewChild(NzCountdownComponent, { static: true }) countdown: NzCountdownComponent;
+ @ViewChild('tpl', { static: true }) tpl: TemplateRef;
+
+ format: string;
+ value: number;
+ template: TemplateRef;
+ finished = 0;
+
+ resetTimerWithFormat(format: string): void {
+ this.format = format;
+ this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
+ }
+
+ resetWithTemplate(): void {
+ this.template = this.tpl;
+ this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
+ }
+
+ onFinish(): void {
+ this.finished += 1;
+ }
+}
diff --git a/components/statistic/nz-countdown.component.html b/components/statistic/nz-countdown.component.html
deleted file mode 100644
index e752e6819bb..00000000000
--- a/components/statistic/nz-countdown.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-{{ diff | nzTimeRange: nzFormat }}
diff --git a/components/statistic/nz-statistic-number.component.html b/components/statistic/nz-statistic-number.component.html
deleted file mode 100644
index d79445e33e3..00000000000
--- a/components/statistic/nz-statistic-number.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
- {{ displayInt }}
- {{
- displayDecimal
- }}
-
diff --git a/components/statistic/nz-statistic.component.html b/components/statistic/nz-statistic.component.html
deleted file mode 100644
index 99302436325..00000000000
--- a/components/statistic/nz-statistic.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
+
+
+ {{ displayInt }}
+ {{ displayDecimal }}
+
+
+ `
})
export class NzStatisticNumberComponent implements OnChanges {
@Input() nzValue: NzStatisticValueType;
diff --git a/components/statistic/nz-statistic-number.spec.ts b/components/statistic/statistic-number.spec.ts
similarity index 72%
rename from components/statistic/nz-statistic-number.spec.ts
rename to components/statistic/statistic-number.spec.ts
index a2e06b3ed9f..4605e024721 100644
--- a/components/statistic/nz-statistic-number.spec.ts
+++ b/components/statistic/statistic-number.spec.ts
@@ -1,32 +1,31 @@
-import { CommonModule } from '@angular/common';
import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { NzStatisticNumberComponent } from './nz-statistic-number.component';
-import { NzStatisticModule } from './nz-statistic.module';
+
+import { ɵComponentBed as ComponentBed, ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core';
+
+import { NzStatisticNumberComponent } from './statistic-number.component';
+import { NzStatisticModule } from './statistic.module';
describe('nz-number', () => {
+ let testBed: ComponentBed;
let fixture: ComponentFixture;
let testComponent: NzTestNumberComponent;
let numberEl: DebugElement;
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [CommonModule, NzStatisticModule],
- declarations: [NzTestNumberComponent]
- }).compileComponents();
- });
-
describe('basic', () => {
beforeEach(() => {
- fixture = TestBed.createComponent(NzTestNumberComponent);
- testComponent = fixture.debugElement.componentInstance;
+ testBed = createComponentBed(NzTestNumberComponent, {
+ imports: [NzStatisticModule]
+ });
+ fixture = testBed.fixture;
+ testComponent = testBed.component;
numberEl = fixture.debugElement.query(By.directive(NzStatisticNumberComponent));
});
it('should have correct class', () => {
fixture.detectChanges();
- expect(numberEl.nativeElement.classList.contains('ant-statistic-content-value')).toBeTruthy();
+ expect(numberEl.nativeElement.firstElementChild!.classList.contains('ant-statistic-content-value')).toBeTruthy();
});
it('should render number', () => {
diff --git a/components/statistic/nz-statistic.component.ts b/components/statistic/statistic.component.ts
similarity index 51%
rename from components/statistic/nz-statistic.component.ts
rename to components/statistic/statistic.component.ts
index c9348139c51..35db6340a6d 100644
--- a/components/statistic/nz-statistic.component.ts
+++ b/components/statistic/statistic.component.ts
@@ -7,18 +7,29 @@
*/
import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { NzStatisticValueType } from './nz-statistic-definitions';
+import { NzStatisticValueType } from './typings';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-statistic',
exportAs: 'nzStatistic',
- templateUrl: './nz-statistic.component.html',
- host: {
- class: 'ant-statistic'
- },
- styles: ['nz-statistic { display: block; }']
+ template: `
+ ;
diff --git a/components/statistic/nz-statistic.module.ts b/components/statistic/statistic.module.ts
similarity index 63%
rename from components/statistic/nz-statistic.module.ts
rename to components/statistic/statistic.module.ts
index 7045fa14474..eeedd68b68d 100644
--- a/components/statistic/nz-statistic.module.ts
+++ b/components/statistic/statistic.module.ts
@@ -8,14 +8,14 @@
import { PlatformModule } from '@angular/cdk/platform';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule, NzPipesModule } from 'ng-zorro-antd/core';
+import { NzOutletModule, NzPipesModule } from 'ng-zorro-antd/core';
-import { NzCountdownComponent } from './nz-countdown.component';
-import { NzStatisticNumberComponent } from './nz-statistic-number.component';
-import { NzStatisticComponent } from './nz-statistic.component';
+import { NzCountdownComponent } from './countdown.component';
+import { NzStatisticNumberComponent } from './statistic-number.component';
+import { NzStatisticComponent } from './statistic.component';
@NgModule({
- imports: [CommonModule, PlatformModule, NzAddOnModule, NzPipesModule],
+ imports: [CommonModule, PlatformModule, NzOutletModule, NzPipesModule],
declarations: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent],
exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent]
})
diff --git a/components/statistic/nz-statistic.spec.ts b/components/statistic/statistic.spec.ts
similarity index 71%
rename from components/statistic/nz-statistic.spec.ts
rename to components/statistic/statistic.spec.ts
index 8b080b7f8cd..02b73517231 100644
--- a/components/statistic/nz-statistic.spec.ts
+++ b/components/statistic/statistic.spec.ts
@@ -1,26 +1,25 @@
-import { CommonModule } from '@angular/common';
import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { NzStatisticComponent } from './nz-statistic.component';
-import { NzStatisticModule } from './nz-statistic.module';
+
+import { ɵComponentBed as ComponentBed, ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core';
+
+import { NzStatisticComponent } from './statistic.component';
+import { NzStatisticModule } from './statistic.module';
describe('nz-statistic', () => {
+ let testBed: ComponentBed;
let fixture: ComponentFixture;
let testComponent: NzTestStatisticComponent;
let statisticEl: DebugElement;
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [CommonModule, NzStatisticModule],
- declarations: [NzTestStatisticComponent]
- }).compileComponents();
- });
-
describe('basic', () => {
beforeEach(() => {
- fixture = TestBed.createComponent(NzTestStatisticComponent);
- testComponent = fixture.debugElement.componentInstance;
+ testBed = createComponentBed(NzTestStatisticComponent, {
+ imports: [NzStatisticModule]
+ });
+ fixture = testBed.fixture;
+ testComponent = testBed.component;
statisticEl = fixture.debugElement.query(By.directive(NzStatisticComponent));
});
diff --git a/components/statistic/nz-statistic-definitions.ts b/components/statistic/typings.ts
similarity index 86%
rename from components/statistic/nz-statistic-definitions.ts
rename to components/statistic/typings.ts
index 9d7ea5f4467..cbd56cffc24 100644
--- a/components/statistic/nz-statistic-definitions.ts
+++ b/components/statistic/typings.ts
@@ -7,5 +7,3 @@
*/
export type NzStatisticValueType = number | string;
-
-export const REFRESH_INTERVAL = 1000 / 30;
diff --git a/components/steps/nz-steps.module.ts b/components/steps/nz-steps.module.ts
index 9ba8c075f4a..f29e305d7e5 100644
--- a/components/steps/nz-steps.module.ts
+++ b/components/steps/nz-steps.module.ts
@@ -9,14 +9,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzStepComponent } from './nz-step.component';
import { NzStepsComponent } from './nz-steps.component';
@NgModule({
- imports: [CommonModule, NzIconModule, NzAddOnModule],
+ imports: [CommonModule, NzIconModule, NzOutletModule],
exports: [NzStepsComponent, NzStepComponent],
declarations: [NzStepsComponent, NzStepComponent]
})
diff --git a/components/steps/style/label-placement.less b/components/steps/style/label-placement.less
index 9d816e586e8..f8cbb6fd62a 100644
--- a/components/steps/style/label-placement.less
+++ b/components/steps/style/label-placement.less
@@ -31,7 +31,7 @@
&.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
.@{steps-prefix-cls}-item {
&-icon {
- margin-left: 40px;
+ margin-left: 47px;
}
}
}
diff --git a/components/style/mixins/clearfix.less b/components/style/mixins/clearfix.less
index 7999a3e92fa..d61f6c7b662 100644
--- a/components/style/mixins/clearfix.less
+++ b/components/style/mixins/clearfix.less
@@ -1,13 +1,9 @@
// mixins for clearfix
// ------------------------
.clearfix() {
- zoom: 1;
- &::before,
- &::after {
- display: table;
- content: '';
- }
&::after {
+ display: block;
clear: both;
+ content: '';
}
}
diff --git a/components/style/mixins/compatibility.less b/components/style/mixins/compatibility.less
index 33812652db5..c4789504442 100644
--- a/components/style/mixins/compatibility.less
+++ b/components/style/mixins/compatibility.less
@@ -3,6 +3,10 @@
// Placeholder text
.placeholder(@color: @input-placeholder-color) {
// Firefox
+ &::-moz-placeholder {
+ opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+ }
+
&::placeholder {
color: @color;
}
diff --git a/components/style/patch.less b/components/style/patch.less
index ab729331500..d884e22c745 100644
--- a/components/style/patch.less
+++ b/components/style/patch.less
@@ -65,15 +65,6 @@
}
}
-textarea.cdk-textarea-autosize-measuring {
- height: auto !important;
- overflow: hidden !important;
- // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
- // measurement. We just have to account for it later and subtract it off the final result.
- padding: 2px 0 !important;
- box-sizing: content-box !important;
-}
-
.nz-animate-disabled {
// drawer
&.ant-drawer {
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index f058bc2dc43..84c258f5376 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -71,6 +71,7 @@
// https://github.com/ant-design/ant-design/issues/20210
@line-height-base: 1.5715;
@border-radius-base: 2px;
+@border-radius-sm: @border-radius-base;
// vertical paddings
@padding-lg: 24px; // containers
@@ -177,11 +178,11 @@
@btn-default-ghost-bg: transparent;
@btn-default-ghost-border: @component-background;
-@btn-padding-base: 0 @padding-md - 1px;
@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-base;
-@btn-padding-lg: @btn-padding-base;
-@btn-padding-sm: 0 @padding-xs - 1px;
+@btn-padding-horizontal-base: @padding-md - 1px;
+@btn-padding-horizontal-lg: @btn-padding-horizontal-base;
+@btn-padding-horizontal-sm: @padding-xs - 1px;
@btn-height-base: 32px;
@btn-height-lg: 40px;
@@ -271,10 +272,11 @@
// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #001529;
-@layout-footer-background: @layout-body-background;
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
+@layout-header-color: @text-color;
@layout-footer-padding: 24px 50px;
+@layout-footer-background: @layout-body-background;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-background: #002140;
@@ -326,6 +328,7 @@
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 8px;
@form-vertical-label-margin: 0;
+@form-item-label-font-size: @font-size-base;
@form-item-label-colon-margin-right: 8px;
@form-item-label-colon-margin-left: 2px;
@form-error-input-bg: @input-bg;
@@ -339,9 +342,13 @@
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg: @input-padding-horizontal;
-@input-padding-vertical-base: 4px;
-@input-padding-vertical-sm: 1px;
-@input-padding-vertical-lg: 6px;
+@input-padding-vertical-base: round(
+ (@input-height-base - @font-size-base * @line-height-base) / 2 * 10
+ ) / 10 - @border-width-base;
+@input-padding-vertical-sm: round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) /
+ 10 - @border-width-base;
+@input-padding-vertical-lg: round((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10) /
+ 10 - @border-width-base;
@input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color;
@input-icon-color: @input-color;
@@ -597,9 +604,9 @@
@tabs-bar-margin: 0 0 16px 0;
@tabs-horizontal-margin: 0 32px 0 0;
@tabs-horizontal-margin-rtl: 0 0 0 32px;
-@tabs-horizontal-padding: 12px 16px;
-@tabs-horizontal-padding-lg: 16px;
-@tabs-horizontal-padding-sm: 8px 16px;
+@tabs-horizontal-padding: 12px 0;
+@tabs-horizontal-padding-lg: 16px 0;
+@tabs-horizontal-padding-sm: 8px 0;
@tabs-vertical-padding: 8px 24px;
@tabs-vertical-margin: 0 0 16px 0;
@tabs-scrolling-size: 32px;
@@ -779,6 +786,7 @@
@timeline-dot-border-width: 2px;
@timeline-dot-color: @primary-color;
@timeline-dot-bg: @component-background;
+@timeline-item-padding-bottom: 20px;
// Typography
// ---
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
index 5821c90f3da..6ff7fa5a5fd 100755
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@@ -13,9 +13,3 @@ title:
The most basic usage.
-
-
diff --git a/components/switch/demo/disabled.ts b/components/switch/demo/disabled.ts
index 2df457408c7..0c997c50976 100755
--- a/components/switch/demo/disabled.ts
+++ b/components/switch/demo/disabled.ts
@@ -5,15 +5,9 @@ import { Component } from '@angular/core';
template: `
+
- `, - styles: [ - ` - nz-switch { - margin-bottom: 8px; - } - ` - ] + ` }) export class NzDemoSwitchDisabledComponent { switchValue = false; diff --git a/components/switch/demo/loading.ts b/components/switch/demo/loading.ts index e08c197f42c..304fc86d6d8 100755 --- a/components/switch/demo/loading.ts +++ b/components/switch/demo/loading.ts @@ -5,14 +5,8 @@ import { Component } from '@angular/core'; template: `
+
+
+
+
;
- @Input() nzUnCheckedChildren: string | TemplateRef;
+ @Input() nzCheckedChildren: string | TemplateRef | null = null;
+ @Input() nzUnCheckedChildren: string | TemplateRef | null = null;
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzSizeDSType;
- hostClick(e: MouseEvent): void {
+ onHostClick(e: MouseEvent): void {
e.preventDefault();
if (!this.nzDisabled && !this.nzLoading && !this.nzControl) {
- this.updateValue(!this.checked);
+ this.updateValue(!this.isChecked);
}
}
updateValue(value: boolean): void {
- if (this.checked !== value) {
- this.checked = value;
- this.onChange(this.checked);
+ if (this.isChecked !== value) {
+ this.isChecked = value;
+ this.onChange(this.isChecked);
}
}
@@ -87,7 +106,7 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O
this.updateValue(true);
e.preventDefault();
} else if (e.keyCode === SPACE || e.keyCode === ENTER) {
- this.updateValue(!this.checked);
+ this.updateValue(!this.isChecked);
e.preventDefault();
}
}
@@ -106,11 +125,7 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O
ngAfterViewInit(): void {
this.focusMonitor.monitor(this.switchElement.nativeElement, true).subscribe(focusOrigin => {
if (!focusOrigin) {
- // When a focused element becomes disabled, the browser *immediately* fires a blur event.
- // Angular does not expect events to be raised during change detection, so any state change
- // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
- // See https://github.com/angular/angular/issues/17793. To work around this, we defer
- // telling the form control it has been touched until the next tick.
+ /** https://github.com/angular/angular/issues/17793 **/
Promise.resolve().then(() => this.onTouched());
}
});
@@ -121,20 +136,20 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O
}
writeValue(value: boolean): void {
- this.checked = value;
+ this.isChecked = value;
this.cdr.markForCheck();
}
- registerOnChange(fn: (_: boolean) => void): void {
+ registerOnChange(fn: OnChangeType): void {
this.onChange = fn;
}
- registerOnTouched(fn: () => void): void {
+ registerOnTouched(fn: OnTouchedType): void {
this.onTouched = fn;
}
- setDisabledState(isDisabled: boolean): void {
- this.nzDisabled = isDisabled;
+ setDisabledState(disabled: boolean): void {
+ this.nzDisabled = disabled;
this.cdr.markForCheck();
}
}
diff --git a/components/switch/nz-switch.module.ts b/components/switch/switch.module.ts
similarity index 71%
rename from components/switch/nz-switch.module.ts
rename to components/switch/switch.module.ts
index 4d7b7face75..c51bcfc435e 100644
--- a/components/switch/nz-switch.module.ts
+++ b/components/switch/switch.module.ts
@@ -9,14 +9,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule, NzWaveModule } from 'ng-zorro-antd/core';
+import { NzOutletModule, NzWaveModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzSwitchComponent } from './nz-switch.component';
+import { NzSwitchComponent } from './switch.component';
@NgModule({
exports: [NzSwitchComponent],
declarations: [NzSwitchComponent],
- imports: [CommonModule, NzWaveModule, NzIconModule, NzAddOnModule]
+ imports: [CommonModule, NzWaveModule, NzIconModule, NzOutletModule]
})
export class NzSwitchModule {}
diff --git a/components/switch/nz-switch.spec.ts b/components/switch/switch.spec.ts
similarity index 97%
rename from components/switch/nz-switch.spec.ts
rename to components/switch/switch.spec.ts
index 85b67a4f557..359e5291025 100644
--- a/components/switch/nz-switch.spec.ts
+++ b/components/switch/switch.spec.ts
@@ -3,12 +3,10 @@ import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
-
import { dispatchKeyboardEvent } from 'ng-zorro-antd/core';
import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
-
-import { NzSwitchComponent } from './nz-switch.component';
-import { NzSwitchModule } from './nz-switch.module';
+import { NzSwitchComponent } from './switch.component';
+import { NzSwitchModule } from './switch.module';
describe('switch', () => {
beforeEach(fakeAsync(() => {
@@ -177,16 +175,12 @@ describe('switch', () => {
fixture.detectChanges();
flush();
fixture.detectChanges();
- expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild.firstElementChild!.classList).toContain(
- 'anticon-close'
- );
+ expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild!.classList).toContain('anticon-close');
switchElement.nativeElement.click();
fixture.detectChanges();
flush();
fixture.detectChanges();
- expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild.firstElementChild!.classList).toContain(
- 'anticon-check'
- );
+ expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild!.classList).toContain('anticon-check');
}));
});
describe('switch form', () => {
diff --git a/components/table/nz-table.module.ts b/components/table/nz-table.module.ts
index a29792c5f0a..56951cf1d3d 100644
--- a/components/table/nz-table.module.ts
+++ b/components/table/nz-table.module.ts
@@ -11,7 +11,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzI18nModule } from 'ng-zorro-antd/i18n';
@@ -43,7 +43,7 @@ import { NzVirtualScrollDirective } from './nz-virtual-scroll.directive';
imports: [
NzMenuModule,
FormsModule,
- NzAddOnModule,
+ NzOutletModule,
NzRadioModule,
NzCheckboxModule,
NzDropDownModule,
diff --git a/components/table/nz-th.component.html b/components/table/nz-th.component.html
index 5e322765659..dfb1ee07a51 100644
--- a/components/table/nz-th.component.html
+++ b/components/table/nz-th.component.html
@@ -73,6 +73,7 @@
[nzDropdownMenu]="filterMenu"
[class.ant-table-filter-selected]="hasFilterValue"
[class.ant-table-filter-open]="filterVisible"
+ [nzVisible]="filterVisible"
(nzVisibleChange)="dropDownVisibleChange($event)"
>
diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts
index 3798693f4de..64a0cb6c0a4 100644
--- a/components/table/nz-th.component.ts
+++ b/components/table/nz-th.component.ts
@@ -17,15 +17,13 @@ import {
OnInit,
Output,
SimpleChanges,
- ViewChild,
ViewEncapsulation
} from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
import { InputBoolean, isNotNil } from 'ng-zorro-antd/core';
-import { NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
import { NzI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
/* tslint:disable-next-line:no-any */
export type NzThFilterType = Array<{ text: string; value: any; byDefault?: boolean }>;
@@ -69,7 +67,6 @@ export class NzThComponent implements OnChanges, OnInit, OnDestroy {
nzWidthChange$ = new Subject();
private destroy$ = new Subject();
private hasDefaultFilter = false;
- @ViewChild(NzDropdownMenuComponent, { static: false }) nzDropdownMenuComponent: NzDropdownMenuComponent;
/* tslint:disable-next-line:no-any */
@Input() nzSelections: Array<{ text: string; onSelect(...args: any[]): any }> = [];
@Input() nzChecked = false;
@@ -158,8 +155,8 @@ export class NzThComponent implements OnChanges, OnInit, OnDestroy {
}
hideDropDown(): void {
- this.nzDropdownMenuComponent.setVisibleStateWhen(false);
this.filterVisible = false;
+ this.search();
}
dropDownVisibleChange(value: boolean): void {
diff --git a/components/tabs/nz-tabs.module.ts b/components/tabs/nz-tabs.module.ts
index c1c579863da..b2f09f611ef 100644
--- a/components/tabs/nz-tabs.module.ts
+++ b/components/tabs/nz-tabs.module.ts
@@ -9,7 +9,7 @@ import { ObserversModule } from '@angular/cdk/observers';
import { PlatformModule } from '@angular/cdk/platform';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzTabBodyComponent } from './nz-tab-body.component';
@@ -42,6 +42,6 @@ import { NzTabSetComponent } from './nz-tabset.component';
NzTabBodyComponent,
NzTabLinkDirective
],
- imports: [CommonModule, ObserversModule, NzIconModule, NzAddOnModule, PlatformModule]
+ imports: [CommonModule, ObserversModule, NzIconModule, NzOutletModule, PlatformModule]
})
export class NzTabsModule {}
diff --git a/components/time-picker/nz-time-picker-panel.component.ts b/components/time-picker/nz-time-picker-panel.component.ts
index 1bd6a044756..107f80b9a8c 100644
--- a/components/time-picker/nz-time-picker-panel.component.ts
+++ b/components/time-picker/nz-time-picker-panel.component.ts
@@ -99,7 +99,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
@Input()
set nzDisabledHours(value: () => number[]) {
this._disabledHours = value;
- if (this._disabledHours) {
+ if (!!this._disabledHours) {
this.buildHours();
}
}
@@ -284,7 +284,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
this.time.setHours(hour.index, hour.disabled);
this.scrollToSelected(this.hourListElement.nativeElement, hour.index, 120, 'hour');
- if (this._disabledMinutes) {
+ if (!!this._disabledMinutes) {
this.buildMinutes();
}
if (this._disabledSeconds || this._disabledMinutes) {
@@ -295,7 +295,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
selectMinute(minute: { index: number; disabled: boolean }): void {
this.time.setMinutes(minute.index, minute.disabled);
this.scrollToSelected(this.minuteListElement.nativeElement, minute.index, 120, 'minute');
- if (this._disabledSeconds) {
+ if (!!this._disabledSeconds) {
this.buildSeconds();
}
}
@@ -307,13 +307,13 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
select12Hours(value: { index: number; value: string }): void {
this.time.selected12Hours = value.value;
- if (this._disabledHours) {
+ if (!!this._disabledHours) {
this.buildHours();
}
- if (this._disabledMinutes) {
+ if (!!this._disabledMinutes) {
this.buildMinutes();
}
- if (this._disabledSeconds) {
+ if (!!this._disabledSeconds) {
this.buildSeconds();
}
this.scrollToSelected(this.use12HoursListElement.nativeElement, value.index, 120, '12-hour');
diff --git a/components/timeline/nz-timeline.module.ts b/components/timeline/nz-timeline.module.ts
index bbc7bb3a8bc..1a956385b2c 100644
--- a/components/timeline/nz-timeline.module.ts
+++ b/components/timeline/nz-timeline.module.ts
@@ -8,7 +8,7 @@
import { PlatformModule } from '@angular/cdk/platform';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzTimelineItemComponent } from './nz-timeline-item.component';
@@ -17,6 +17,6 @@ import { NzTimelineComponent } from './nz-timeline.component';
@NgModule({
declarations: [NzTimelineItemComponent, NzTimelineComponent],
exports: [NzTimelineItemComponent, NzTimelineComponent],
- imports: [CommonModule, PlatformModule, NzIconModule, NzAddOnModule]
+ imports: [CommonModule, PlatformModule, NzIconModule, NzOutletModule]
})
export class NzTimelineModule {}
diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less
index bcf74e90fed..808095403ac 100644
--- a/components/timeline/style/index.less
+++ b/components/timeline/style/index.less
@@ -17,7 +17,7 @@
&-item {
position: relative;
margin: 0;
- padding: 0 0 20px;
+ padding-bottom: @timeline-item-padding-bottom;
font-size: @font-size-base;
list-style: none;
@@ -168,8 +168,7 @@
text-align: right;
.@{timeline-prefix-cls}-rtl& {
- width: 100%;
- margin-right: 12px;
+ text-align: left;
}
}
}
@@ -195,6 +194,7 @@
.@{timeline-prefix-cls}-rtl& {
width: 100%;
margin-right: 18px;
+ text-align: right;
}
}
}
diff --git a/components/tooltip/nz-tooltip.module.ts b/components/tooltip/nz-tooltip.module.ts
index 616a2900725..45daee70c3c 100644
--- a/components/tooltip/nz-tooltip.module.ts
+++ b/components/tooltip/nz-tooltip.module.ts
@@ -10,8 +10,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule, NzNoAnimationModule, NzOverlayModule } from 'ng-zorro-antd/core';
-
+import { NzNoAnimationModule, NzOutletModule, NzOverlayModule } from 'ng-zorro-antd/core';
// NOTE: the `t` is not uppercase in directives. Change this would however introduce breaking change.
import { NzToolTipComponent } from './nz-tooltip.component';
import { NzTooltipDirective } from './nz-tooltip.directive';
@@ -19,7 +18,7 @@ import { NzTooltipDirective } from './nz-tooltip.directive';
@NgModule({
declarations: [NzToolTipComponent, NzTooltipDirective],
exports: [NzToolTipComponent, NzTooltipDirective],
- imports: [CommonModule, OverlayModule, NzAddOnModule, NzOverlayModule, NzNoAnimationModule],
+ imports: [CommonModule, OverlayModule, NzOutletModule, NzOverlayModule, NzNoAnimationModule],
entryComponents: [NzToolTipComponent]
})
export class NzToolTipModule {}
diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less
index cb2d3b05fa8..958c8d7793d 100644
--- a/components/transfer/style/index.less
+++ b/components/transfer/style/index.less
@@ -39,7 +39,8 @@
}
&-search {
- padding: 0 24px 0 @control-padding-horizontal-sm;
+ padding-right: 24px;
+ padding-left: @control-padding-horizontal-sm;
&-action {
position: absolute;
top: 12px;
diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
index 7cc8ff54002..bbff0e74c54 100755
--- a/components/tree-select/doc/index.en-US.md
+++ b/components/tree-select/doc/index.en-US.md
@@ -29,6 +29,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
| `[nzNotFoundContent]` | Specify content to show when no result matches. | `string` | - |
| `[nzDropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | `boolean` | `true` | ✅ |
| `[nzDropdownStyle]` | To set the style of the dropdown menu | `object` | - |
+| `[nzDropdownClassName]` | classname of dropdown menu | `string` | - |
| `[nzMultiple]` | Support multiple or not, will be `true` when enable `nzCheckable`. | `boolean` | `false` |
| `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | ✅ |
| `[nzSize]` | To set the size of the select input | `'large' \| 'small' \| 'default'` | `'default'` | ✅ |
diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
index 97ce9e50365..3f582c72539 100755
--- a/components/tree-select/doc/index.zh-CN.md
+++ b/components/tree-select/doc/index.zh-CN.md
@@ -29,6 +29,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string` | - |
| `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | ✅ |
| `[nzDropdownStyle]` | 下拉菜单的样式 | `{ [key: string]: string; }` | - |
+| `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - |
| `[nzMultiple]` | 支持多选（当设置 nzCheckable 时自动变为true） | `boolean` | `false` |
| `[nzHideUnMatched]` | 搜索隐藏未匹配的节点 | `boolean` | `false` | ✅ |
| `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` | ✅ |
diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html
index 8829453908e..68bfbf94b4a 100644
--- a/components/tree-select/nz-tree-select.component.html
+++ b/components/tree-select/nz-tree-select.component.html
@@ -25,7 +25,7 @@
(positionChange)="onPositionChange($event)"
>
+
Loading state：
diff --git a/components/spin/nz-spin.component.html b/components/spin/nz-spin.component.html
deleted file mode 100644
index 91431bc5199..00000000000
--- a/components/spin/nz-spin.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-{{ nzTip }}
-
-
diff --git a/components/spin/public-api.ts b/components/spin/public-api.ts
index 32e456e07b3..20a5f3233d6 100644
--- a/components/spin/public-api.ts
+++ b/components/spin/public-api.ts
@@ -6,5 +6,5 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-spin.component';
-export * from './nz-spin.module';
+export * from './spin.component';
+export * from './spin.module';
diff --git a/components/spin/nz-spin.component.ts b/components/spin/spin.component.ts
similarity index 51%
rename from components/spin/nz-spin.component.ts
rename to components/spin/spin.component.ts
index b010e4d9610..f3305e8a63d 100644
--- a/components/spin/nz-spin.component.ts
+++ b/components/spin/spin.component.ts
@@ -7,7 +7,6 @@
*/
import {
- ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
@@ -18,10 +17,10 @@ import {
TemplateRef,
ViewEncapsulation
} from '@angular/core';
-import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
import { InputBoolean, InputNumber, NzConfigService, NzSizeLDSType, WithConfig } from 'ng-zorro-antd/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { debounceTime, flatMap, takeUntil } from 'rxjs/operators';
const NZ_CONFIG_COMPONENT_NAME = 'spin';
@@ -30,52 +29,65 @@ const NZ_CONFIG_COMPONENT_NAME = 'spin';
exportAs: 'nzSpin',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
- changeDetection: ChangeDetectionStrategy.OnPush,
- templateUrl: './nz-spin.component.html',
+ template: `
+
+
+
+
+ {{ nzTip }}
+
+
+ `,
host: {
'[class.ant-spin-nested-loading]': '!nzSimple'
- },
- styles: [
- `
- nz-spin {
- display: block;
- }
- `
- ]
+ }
})
export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzIndicator: TemplateRef
- {{ nzTitle }}
-
-
-
- {{ nzPrefix }}
-
-
-
-
- {{ nzSuffix }}
-
-
diff --git a/components/statistic/public-api.ts b/components/statistic/public-api.ts
index eee4106067c..15fd1a3bdc2 100644
--- a/components/statistic/public-api.ts
+++ b/components/statistic/public-api.ts
@@ -6,7 +6,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-countdown.component';
-export * from './nz-statistic.component';
-export * from './nz-statistic.module';
-export * from './nz-statistic-number.component';
+export * from './countdown.component';
+export * from './statistic.component';
+export * from './statistic.module';
+export * from './statistic-number.component';
diff --git a/components/statistic/nz-statistic-number.component.ts b/components/statistic/statistic-number.component.ts
similarity index 71%
rename from components/statistic/nz-statistic-number.component.ts
rename to components/statistic/statistic-number.component.ts
index 81f54a00c34..13fd825f3da 100644
--- a/components/statistic/nz-statistic-number.component.ts
+++ b/components/statistic/statistic-number.component.ts
@@ -8,7 +8,7 @@
import { getLocaleNumberSymbol, NumberSymbol } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { NzStatisticValueType } from './nz-statistic-definitions';
+import { NzStatisticValueType } from './typings';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -16,11 +16,16 @@ import { NzStatisticValueType } from './nz-statistic-definitions';
preserveWhitespaces: false,
selector: 'nz-statistic-number',
exportAs: 'nzStatisticNumber',
- templateUrl: './nz-statistic-number.component.html',
- host: {
- class: 'ant-statistic-content-value'
- },
- styles: ['nz-number { display: inline }']
+ template: `
+
+
+
+ `
})
export class NzStatisticComponent {
@Input() nzPrefix: string | TemplateRef
+ {{ nzTitle }}
+
+
+
+ {{ nzPrefix }}
+
+
+
+ {{ nzSuffix }}
+
+
+ +
- `, - styles: [ - ` - nz-switch { - margin-bottom: 8px; - } - ` - ] + ` }) export class NzDemoSwitchDisabledComponent { switchValue = false; diff --git a/components/switch/demo/loading.ts b/components/switch/demo/loading.ts index e08c197f42c..304fc86d6d8 100755 --- a/components/switch/demo/loading.ts +++ b/components/switch/demo/loading.ts @@ -5,14 +5,8 @@ import { Component } from '@angular/core'; template: `
+
+
+
+
{
const targetElement = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement;
expect(targetElement.style.height).toBe('120px');
}));
+ it('should dropdown classname work', fakeAsync(() => {
+ treeSelect.nativeElement.click();
+ fixture.detectChanges();
+ expect(treeSelectComponent.nzOpen).toBe(true);
+ flush();
+ const targetElement = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement;
+ expect(targetElement.classList).toContain('class1');
+ expect(targetElement.classList).toContain('class2');
+ }));
it('should click option close dropdown', fakeAsync(() => {
treeSelect.nativeElement.click();
fixture.detectChanges();
@@ -548,6 +557,7 @@ describe('tree-select component', () => {
[nzMultiple]="multiple"
[nzMaxTagCount]="maxTagCount"
[nzDropdownStyle]="{ height: '120px' }"
+ nzDropdownClassName="class1 class2"
>
`
diff --git a/components/tree/nz-tree.module.ts b/components/tree/nz-tree.module.ts
index af93818e6ce..bc5f12ab92d 100644
--- a/components/tree/nz-tree.module.ts
+++ b/components/tree/nz-tree.module.ts
@@ -9,14 +9,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule, NzHighlightModule, NzNoAnimationModule } from 'ng-zorro-antd/core';
+import { NzHighlightModule, NzNoAnimationModule, NzOutletModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzTreeNodeComponent } from './nz-tree-node.component';
import { NzTreeComponent } from './nz-tree.component';
@NgModule({
- imports: [CommonModule, NzAddOnModule, NzIconModule, NzNoAnimationModule, NzHighlightModule],
+ imports: [CommonModule, NzOutletModule, NzIconModule, NzNoAnimationModule, NzHighlightModule],
declarations: [NzTreeComponent, NzTreeNodeComponent],
exports: [NzTreeComponent, NzTreeNodeComponent]
})
diff --git a/package.json b/package.json
index ef4f694b725..f7038fce112 100644
--- a/package.json
+++ b/package.json
@@ -26,33 +26,33 @@
"integration": "npm run build:lib && bash ./integration-test.sh"
},
"dependencies": {
- "@angular/cdk": "^9.0.0-rc.7",
- "@ant-design/icons-angular": "^9.0.0-rc.5",
+ "@angular/cdk": "^9.0.0",
+ "@ant-design/icons-angular": "^9.0.0",
"date-fns": "^1.30.1"
},
"devDependencies": {
"tslib": "^1.10.0",
- "@angular-devkit/build-angular": "~0.900.0-rc.8",
- "@angular-devkit/build-ng-packagr": "~0.900.0-rc.8",
- "@angular-devkit/core": "~9.0.0-rc.4",
- "@angular-devkit/schematics": "~9.0.0-rc.8",
- "@angular/animations": "~9.0.0-rc.8",
- "@angular/cli": "~9.0.0-rc.8",
- "@angular/common": "~9.0.0-rc.8",
- "@angular/compiler": "~9.0.0-rc.8",
- "@angular/compiler-cli": "~9.0.0-rc.8",
- "@angular/core": "~9.0.0-rc.8",
- "@angular/forms": "~9.0.0-rc.8",
- "@angular/language-service": "~9.0.0-rc.8",
- "@angular/platform-browser": "~9.0.0-rc.8",
- "@angular/platform-browser-dynamic": "~9.0.0-rc.8",
- "@angular/platform-server": "~9.0.0-rc.8",
- "@angular/router": "~9.0.0-rc.8",
- "@angular/service-worker": "~9.0.0-rc.8",
+ "@angular-devkit/build-angular": "~0.900.0",
+ "@angular-devkit/build-ng-packagr": "~0.900.0",
+ "@angular-devkit/core": "^9.0.0",
+ "@angular-devkit/schematics": "^9.0.0",
+ "@angular/animations": "^9.0.0",
+ "@angular/cli": "^9.0.0",
+ "@angular/common": "^9.0.0",
+ "@angular/compiler": "^9.0.0",
+ "@angular/compiler-cli": "^9.0.0",
+ "@angular/core": "^9.0.0",
+ "@angular/forms": "^9.0.0",
+ "@angular/language-service": "^9.0.0",
+ "@angular/platform-browser": "^9.0.0",
+ "@angular/platform-browser-dynamic": "^9.0.0",
+ "@angular/platform-server": "^9.0.0",
+ "@angular/router": "^9.0.0",
+ "@angular/service-worker": "^9.0.0",
"@commitlint/cli": "^8.1.0",
"@commitlint/config-angular": "^8.1.0",
"@nguniversal/module-map-ngfactory-loader": "~9.0.0-next.6",
- "@schematics/angular": "~9.0.0-rc.8",
+ "@schematics/angular": "^9.0.1",
"@stackblitz/sdk": "^1.3.0",
"@types/fs-extra": "^8.0.0",
"@types/gulp": "^4.0.6",
@@ -62,7 +62,6 @@
"@types/node": "^12.11.1",
"@types/parse5": "^5.0.2",
"antd-theme-generator": "^1.1.7",
- "bundlesize": "^0.18.0",
"chalk": "^2.4.2",
"classlist.js": "^1.1.20150312",
"clean-css": "~4.2.1",
@@ -90,7 +89,7 @@
"marked": "^0.7.0",
"minimist": "^1.2.0",
"monaco-editor": "^0.17.1",
- "ng-packagr": "9.0.0-rc.4",
+ "ng-packagr": "9.0.0",
"ngx-color": "^4.0.0",
"node-prismjs": "^0.1.2",
"parse5": "^5.1.1",
@@ -107,7 +106,7 @@
"sitemap": "^4.1.1",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
- "typescript": "~3.6.4",
+ "typescript": "~3.7.4",
"yaml-front-matter": "^4.0.0",
"zone.js": "~0.10.2"
},
diff --git a/scripts/site/_site/doc/app/app.component.ts b/scripts/site/_site/doc/app/app.component.ts
index 1fb7578914a..7978082393e 100644
--- a/scripts/site/_site/doc/app/app.component.ts
+++ b/scripts/site/_site/doc/app/app.component.ts
@@ -1,16 +1,6 @@
import { Platform } from '@angular/cdk/platform';
import { DOCUMENT } from '@angular/common';
-import {
- AfterViewInit,
- Component,
- ElementRef,
- HostListener,
- Inject,
- NgZone,
- OnInit,
- Renderer2,
- ViewChild
-} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostListener, Inject, NgZone, OnInit, Renderer2, ViewChild } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { NavigationEnd, Router } from '@angular/router';
import { en_US, NzI18nService, zh_CN } from 'ng-zorro-antd/i18n';
@@ -33,7 +23,7 @@ interface DocPageMeta {
}
@Component({
- selector : 'app-root',
+ selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, AfterViewInit {
@@ -58,7 +48,7 @@ export class AppComponent implements OnInit, AfterViewInit {
}
language = 'zh';
- oldVersionList = [ '0.5.x', '0.6.x', '0.7.x', '1.8.x', '7.5.x' ];
+ oldVersionList = ['0.5.x', '0.6.x', '0.7.x', '1.8.x', '7.5.x'];
currentVersion = VERSION.full;
@ViewChild('searchInput', { static: false }) searchInput: ElementRef;
@@ -82,8 +72,7 @@ export class AppComponent implements OnInit, AfterViewInit {
private renderer: Renderer2,
// tslint:disable-next-line:no-any
@Inject(DOCUMENT) private document: any
- ) {
- }
+ ) {}
navigateToPage(url: string): void {
if (url) {
@@ -114,7 +103,7 @@ export class AppComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
this.routerList.components.forEach(group => {
- this.componentList = this.componentList.concat([ ...group.children ]);
+ this.componentList = this.componentList.concat([...group.children]);
});
this.router.events.subscribe(event => {
@@ -135,14 +124,14 @@ export class AppComponent implements OnInit, AfterViewInit {
}
this.isExperimental = this.router.url.search('experimental') !== -1;
this.language = this.router.url
- .split('/')[this.router.url.split('/').length - 1]
- .split('#')[0]
+ .split('/')
+ [this.router.url.split('/').length - 1].split('#')[0]
.split('?')[0];
this.appService.language$.next(this.language);
this.nzI18nService.setLocale(this.language === 'en' ? en_US : zh_CN);
this.updateDocMetaAndLocale();
if (this.docsearch) {
- this.docsearch!.algoliaOptions = { hitsPerPage: 5, facetFilters: [ `tags:${this.language}` ] };
+ this.docsearch!.algoliaOptions = { hitsPerPage: 5, facetFilters: [`tags:${this.language}`] };
}
if (environment.production && this.platform.isBrowser) {
@@ -175,7 +164,8 @@ export class AppComponent implements OnInit, AfterViewInit {
updateDocMetaAndLocale(): void {
if (this.platform.isBrowser) {
const isEn = this.language === 'en';
- const enDescription = 'An enterprise-class UI design language and Angular-based implementation with a set of high-quality Angular components, one of best Angular UI library for enterprises';
+ const enDescription =
+ 'An enterprise-class UI design language and Angular-based implementation with a set of high-quality Angular components, one of best Angular UI library for enterprises';
const zhDescription = 'Ant Design 的 Angular 实现，开发和服务于企业级后台产品，开箱即用的高质量 Angular 组件。';
const descriptionContent = isEn ? enDescription : zhDescription;
this.meta.updateTag({
@@ -202,11 +192,11 @@ export class AppComponent implements OnInit, AfterViewInit {
initDocsearch() {
this.loadScript('https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js').then(() => {
this.docsearch = docsearch({
- appId : 'BH4D9OD16A',
- apiKey : '9f7d9d6527ff52ec484e90bb1f256971',
- indexName : 'ng_zorro',
- inputSelector : '#search-box input',
- algoliaOptions: { hitsPerPage: 5, facetFilters: [ `tags:${this.language}` ] },
+ appId: 'BH4D9OD16A',
+ apiKey: '9f7d9d6527ff52ec484e90bb1f256971',
+ indexName: 'ng_zorro',
+ inputSelector: '#search-box input',
+ algoliaOptions: { hitsPerPage: 5, facetFilters: [`tags:${this.language}`] },
transformData(hits: any) {
// tslint:disable-line:no-any
hits.forEach((hit: any) => {
@@ -216,12 +206,12 @@ export class AppComponent implements OnInit, AfterViewInit {
});
return hits;
},
- debug : false
+ debug: false
});
});
}
- @HostListener('document:keyup.s', [ '$event' ])
+ @HostListener('document:keyup.s', ['$event'])
onKeyUp(event: KeyboardEvent) {
if (this.useDocsearch && this.searchInput && this.searchInput.nativeElement && event.target === document.body) {
this.searchInput.nativeElement.focus();
@@ -233,13 +223,13 @@ export class AppComponent implements OnInit, AfterViewInit {
initColor() {
if (!this.platform.isBrowser) {
- return
+ return;
}
const node = document.createElement('link');
node.rel = 'stylesheet/less';
node.type = 'text/css';
node.href = '/assets/color.less';
- document.getElementsByTagName('head')[ 0 ].appendChild(node);
+ document.getElementsByTagName('head')[0].appendChild(node);
}
lessLoaded = false;
@@ -316,7 +306,7 @@ export class AppComponent implements OnInit, AfterViewInit {
const hasLanguage = pathname.match(/(en|zh)(\/?)$/);
if (language === 'zh-cn' && !hasLanguage) {
this.nzI18nService.setLocale(zh_CN);
- this.router.navigate([ 'docs', 'introduce', 'zh' ]);
+ this.router.navigate(['docs', 'introduce', 'zh']);
}
}
}