From 74338022a2e51eb0ce25696fcb4c319f10ee67cd Mon Sep 17 00:00:00 2001
From: wangyaju <wyj19881215@163.com>
Date: Tue, 25 Jan 2022 11:39:13 +0800
Subject: [PATCH] chore(release): release 13.0.0 (#176)

* chore(release): release 13.0.0
---
 .browserslistrc                               |  2 +-
 .eslintignore                                 | 14 +++
 .eslintrc.js                                  |  1 +
 .gitignore                                    |  1 +
 README.md                                     |  4 +-
 README_zh_CN.md                               |  4 +-
 angular.json                                  |  7 +-
 .../accordion-item-hreflink.component.ts      |  6 +-
 .../accordion-item-routerlink.component.ts    |  6 +-
 devui/accordion/accordion-item.component.ts   |  6 +-
 devui/accordion/accordion-list-token.ts       |  3 +
 devui/accordion/accordion-list.component.html | 10 ++
 devui/accordion/accordion-list.component.ts   | 98 ++++++++++++-------
 devui/accordion/accordion-menu-token.ts       |  3 +
 devui/accordion/accordion-menu.component.html | 10 --
 devui/accordion/accordion-menu.component.ts   | 20 ++--
 devui/accordion/accordion-token.ts            |  3 +
 devui/accordion/accordion.component.scss      |  4 -
 devui/accordion/accordion.component.ts        |  5 +
 .../breadcrumb-item.component.ts              |  6 +-
 devui/breadcrumb/breadcrumb.component.ts      |  4 +
 devui/breadcrumb/breadcrumb.token.ts          |  3 +
 devui/common/helper-utils.ts                  |  4 +-
 .../dashboard/demo/basic/basic.component.html | 16 +--
 .../demo/dashboard-demo.component.html        |  8 +-
 .../demo/dashboard-demo.component.ts          | 38 +++++--
 devui/dashboard/demo/dashboard-demo.module.ts |  2 +
 .../more-config/more-config.component.html    | 46 ++++-----
 devui/dashboard/doc/api-en.md                 | 46 +++++----
 devui/data-table/data-table-body.component.ts |  6 +-
 devui/data-table/data-table-cell.component.ts |  9 +-
 devui/data-table/data-table-head.component.ts |  4 +-
 devui/data-table/data-table-row.component.ts  | 10 +-
 devui/data-table/data-table-row.token.ts      |  3 +
 devui/data-table/data-table.component.ts      |  4 +
 devui/data-table/data-table.model.ts          |  8 +-
 devui/data-table/data-table.token.ts          |  3 +
 devui/data-table/display-cell-value.pipe.ts   |  2 +-
 .../table/head/th/filter/filter.component.ts  |  4 +-
 .../data-table/table/head/th/th.component.ts  |  4 +
 devui/data-table/table/head/th/th.token.ts    |  3 +
 .../dragdrop/touch-support/dragdrop-touch.ts  |  2 +-
 devui/layout/public-api.ts                    |  1 +
 devui/loading/loading.directive.ts            | 20 ++--
 devui/ng-package.json                         |  8 +-
 devui/package.json                            | 12 +--
 devui/polyfills.ts                            | 35 +------
 devui/position/positioning.service.ts         |  8 +-
 devui/test.ts                                 |  4 +-
 devui/tsconfig.lib.prod.json                  |  4 +-
 devui/version.ts                              |  2 +-
 package.json                                  | 55 +++++------
 patches/ng-packagr+12.2.6.patch               | 12 ---
 patches/ng-packagr+13.1.3.patch               | 12 +++
 .../babel-loader-wepack-config.js             |  4 +-
 .../get-path-alias-from-tsconfig.js           |  6 +-
 scripts/sass-importer/get-tsconfig-alias.js   |  3 +-
 scripts/worker.js                             |  6 ++
 src/app/app.component.ts                      |  1 +
 src/app/component/getStarted-cn.md            |  2 +-
 src/app/component/getStarted-en.md            |  2 +-
 .../customize-theme.component.ts              |  4 +-
 src/assets/i18n/en-us.json                    | 46 ++++++++-
 src/assets/i18n/zh-cn.json                    | 46 ++++++++-
 src/polyfills.ts                              | 14 +--
 src/test.ts                                   |  4 +-
 66 files changed, 455 insertions(+), 298 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 devui/accordion/accordion-list-token.ts
 create mode 100644 devui/accordion/accordion-menu-token.ts
 create mode 100644 devui/accordion/accordion-token.ts
 create mode 100644 devui/breadcrumb/breadcrumb.token.ts
 create mode 100644 devui/data-table/data-table-row.token.ts
 create mode 100644 devui/data-table/data-table.token.ts
 create mode 100644 devui/data-table/table/head/th/th.token.ts
 delete mode 100644 patches/ng-packagr+12.2.6.patch
 create mode 100644 patches/ng-packagr+13.1.3.patch
 create mode 100644 scripts/worker.js

diff --git a/.browserslistrc b/.browserslistrc
index 844a3f5e..7853daf7 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -5,6 +5,6 @@
 
 > 0.5%
 last 2 versions
+last 2 Edge major versions
 Firefox ESR
 not dead
-not IE 9-10
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..34bb5849
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,14 @@
+karma.conf.js
+e2e/*
+playbook/*
+scripts/*
+server/*
+style-guide/*
+preview/*
+tools/*
+devui-commons/*
+assistant/*
+commitlint.config.js
+node_modules/*
+dist/*
+publish/*
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index c4a623cd..a3dd7763 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,6 +2,7 @@ module.exports = {
   rules: {
     "no-useless-constructor": "off",
     "no-useless-concat":"off",
+    'no-unused-expressions': 'off',
     "max-params": "off",
     "@typescript-eslint/no-useless-constructor": "off",
     "@typescript-eslint/no-parameter-properties": "off",
diff --git a/.gitignore b/.gitignore
index 8b3fdd89..3d3b00ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
diff --git a/README.md b/README.md
index 126e2c23..4601568b 100755
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
 
 ## Angular Support
 
-Now supports Angular <font color=red>`^12.0.0`</font>
+Now supports Angular <font color=red>`^13.0.0`</font>
 
 ## Getting Started
 
@@ -97,7 +97,7 @@ Modern browsers and Internet Explorer 11+.
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- |
-| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| Edge | last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## Who use it
 
diff --git a/README_zh_CN.md b/README_zh_CN.md
index 8e5a8831..4d4ac8db 100644
--- a/README_zh_CN.md
+++ b/README_zh_CN.md
@@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
 
 ## Angular版本
 
-当前支持的angular版本<font color=red>`^11.0.0`</font>
+当前支持的angular版本<font color=red>`^13.0.0`</font>
 
 ## 快速开始
 
@@ -99,7 +99,7 @@ ng serve --open
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- |
-| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| Edge | last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## 谁在使用
 
diff --git a/angular.json b/angular.json
index 73187739..e6953ac5 100755
--- a/angular.json
+++ b/angular.json
@@ -52,7 +52,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -157,12 +156,14 @@
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "devui/tsconfig.lib.json",
             "project": "devui/ng-package.json"
           },
           "configurations": {
             "production": {
               "tsConfig": "devui/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "devui/tsconfig.lib.json"
             }
           }
         },
@@ -195,4 +196,4 @@
     }
   },
   "defaultProject": "devui"
-}
\ No newline at end of file
+}
diff --git a/devui/accordion/accordion-item-hreflink.component.ts b/devui/accordion/accordion-item-hreflink.component.ts
index ec5bf7b3..cc18cccb 100644
--- a/devui/accordion/accordion-item-hreflink.component.ts
+++ b/devui/accordion/accordion-item-hreflink.component.ts
@@ -1,6 +1,6 @@
-import { Component, HostListener, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, Inject, ViewEncapsulation } from '@angular/core';
 import { AccordionBaseLinkComponent } from './accordion-base-link-component.class';
-import { AccordionComponent } from './accordion.component';
+import { ACCORDION } from './accordion-token';
 
 @Component({
   selector: 'd-accordion-item-hreflink',
@@ -9,7 +9,7 @@ import { AccordionComponent } from './accordion.component';
   preserveWhitespaces: false,
 })
 export class AccordionItemHreflinkComponent extends AccordionBaseLinkComponent {
-  constructor(protected accordion: AccordionComponent) {
+  constructor(@Inject(ACCORDION) protected accordion: any) {
     super(accordion);
   }
   @HostListener('click', ['$event'])
diff --git a/devui/accordion/accordion-item-routerlink.component.ts b/devui/accordion/accordion-item-routerlink.component.ts
index 18ca0094..52a63a9b 100644
--- a/devui/accordion/accordion-item-routerlink.component.ts
+++ b/devui/accordion/accordion-item-routerlink.component.ts
@@ -1,7 +1,7 @@
-import { Component, HostBinding, HostListener, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation} from '@angular/core';
+import { Component, HostBinding, HostListener, Inject, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Params, Router, RouterLinkActive, UrlTree } from '@angular/router';
 import { AccordionBaseLinkComponent } from './accordion-base-link-component.class';
-import { AccordionComponent } from './accordion.component';
+import { ACCORDION } from './accordion-token';
 
 @Component({
   selector: 'd-accordion-item-routerlink',
@@ -29,7 +29,7 @@ export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent
   public queryParams: Params;
   public fragment: string;
 
-  constructor(protected accordion: AccordionComponent, private router: Router) {
+  constructor(@Inject(ACCORDION) protected accordion: any, private router: Router) {
     super(accordion);
   }
 
diff --git a/devui/accordion/accordion-item.component.ts b/devui/accordion/accordion-item.component.ts
index 42e01e07..2b10d848 100644
--- a/devui/accordion/accordion-item.component.ts
+++ b/devui/accordion/accordion-item.component.ts
@@ -1,6 +1,6 @@
-import { Component, HostListener, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, Inject, ViewEncapsulation } from '@angular/core';
 import { AccordionBaseItemComponent } from './accordion-base-item-component.class';
-import { AccordionComponent } from './accordion.component';
+import { ACCORDION } from './accordion-token';
 import { AccordionBaseItem } from './accordion.type';
 
 @Component({
@@ -10,7 +10,7 @@ import { AccordionBaseItem } from './accordion.type';
   preserveWhitespaces: false,
 })
 export class AccordionItemComponent extends AccordionBaseItemComponent<AccordionBaseItem> {
-  constructor(protected accordion: AccordionComponent) {
+  constructor(@Inject(ACCORDION) protected accordion: any) {
     super(accordion);
   }
   @HostListener('click', ['$event'])
diff --git a/devui/accordion/accordion-list-token.ts b/devui/accordion/accordion-list-token.ts
new file mode 100644
index 00000000..72c2a979
--- /dev/null
+++ b/devui/accordion/accordion-list-token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const ACCORDION_LIST = new InjectionToken('AccordionListComponent');
diff --git a/devui/accordion/accordion-list.component.html b/devui/accordion/accordion-list.component.html
index fb9297a5..c58ce90c 100644
--- a/devui/accordion/accordion-list.component.html
+++ b/devui/accordion/accordion-list.component.html
@@ -3,6 +3,16 @@
     <!--菜单类型-->
     <d-accordion-menu *ngIf="item[childrenKey] !== undefined" [item]="item" [deepth]="deepth" [parent]="parent"></d-accordion-menu>
     <!--非菜单类型-->
+    <d-accordion-list
+      *ngIf="item[childrenKey] !== undefined"
+      class="devui-accordion-submenu"
+      [deepth]="deepth + 1"
+      [data]="item[childrenKey]"
+      [parent]="item"
+      [@collapse]="item.open ? 'expanded' : 'collapsed'"
+      [@.disabled]="!animateState"
+    >
+    </d-accordion-list>
     <ng-container *ngIf="item[childrenKey] === undefined">
       <!--路由链接-->
       <d-accordion-item-routerlink
diff --git a/devui/accordion/accordion-list.component.ts b/devui/accordion/accordion-list.component.ts
index 8494e5a3..19e8fb21 100644
--- a/devui/accordion/accordion-list.component.ts
+++ b/devui/accordion/accordion-list.component.ts
@@ -1,37 +1,49 @@
 import {
-  Component, Host, HostBinding, Input, OnDestroy, OnInit,
+  Component, Host, HostBinding, Inject, Input, OnDestroy, OnInit,
   Optional, QueryList, SkipSelf, ViewChildren, ViewEncapsulation
 } from '@angular/core';
+import { expandCollapse, expandCollapseForDomDestroy } from 'ng-devui/utils';
 import { AccordionItemRouterlinkComponent } from './accordion-item-routerlink.component';
-import { AccordionMenuComponent } from './accordion-menu.component';
-import { AccordionComponent } from './accordion.component';
+import { ACCORDION_LIST } from './accordion-list-token';
+import { ACCORDION_MENU } from './accordion-menu-token';
+import { ACCORDION } from './accordion-token';
 import { AccordionMenuItem } from './accordion.type';
 
 @Component({
   selector: 'd-accordion-list',
   templateUrl: './accordion-list.component.html',
   encapsulation: ViewEncapsulation.None,
+  animations: [expandCollapse, expandCollapseForDomDestroy],
   preserveWhitespaces: false,
+  providers: [{
+    provide: ACCORDION_LIST,
+    useExisting: AccordionListComponent
+  }]
 })
 export class AccordionListComponent implements OnInit, OnDestroy {
-  @Input() data: Array<AccordionMenuItem>;
-  @Input() deepth = 0;
-  @Input() parent: AccordionMenuItem;
-  @ViewChildren(AccordionMenuComponent) accordionMenuQueryList: QueryList<AccordionMenuComponent>;
-  @ViewChildren(AccordionItemRouterlinkComponent) accordionItemRouterlinkQueryList: QueryList<AccordionItemRouterlinkComponent>;
-  constructor(@Optional() @Host() @SkipSelf() private parentComponent: AccordionMenuComponent,
-              private accordion: AccordionComponent) {}
-  ngOnInit(): void {
-    if (this.parentComponent) {
-      setTimeout(() => {this.parentComponent.accordionListFromView = this; });
-    }
-  }
-  ngOnDestroy(): void {
-    if (this.parentComponent) {
-      this.parentComponent.accordionListFromView = undefined;
-    }
-  }
 
+  // @HostBinding('class.open')
+  // get open() {
+  //   return (this.keyOpen === undefined && this.accordion.autoOpenActiveMenu)
+  //     ? this.childActived
+  //     : this.keyOpen;
+  // }
+  // get keyOpen() {
+  //   return this.data && this.data[this.accordion.openKey];
+  // }
+
+  // get children() {
+  //   return this.data && this.data[this.accordion.childrenKey];
+  // }
+  // get childActived() {
+  //   return this.routerLinkActived || this.hasActiveChildren;
+  // }
+
+  // get showAnimate() {
+  //   return this.accordion.showAnimation;
+  // }
+  constructor(@Optional() @Host() @SkipSelf() @Inject(ACCORDION_MENU) private parentComponent: any,
+              @Inject(ACCORDION) private accordion: any) {}
   @HostBinding('class.devui-accordion-show-animate') get animateState() {
     return this.accordion.showAnimation;
   }
@@ -81,21 +93,6 @@ export class AccordionListComponent implements OnInit, OnDestroy {
   get linkDefaultTarget() {
     return this.accordion.linkDefaultTarget;
   }
-  private isLinkRouterActive(airlc: AccordionItemRouterlinkComponent): boolean {
-    return airlc.routerLinkActived;
-  }
-  private isMenuRouterActive(amc: AccordionMenuComponent): boolean {
-    return amc.routerLinkActived;
-  }
-  private isMenuDataActive(amc: AccordionMenuComponent): boolean {
-    return amc.hasActiveChildren;
-  }
-  private isItemDataActive(item: AccordionMenuItem): boolean {
-    return !!item[this.activeKey];
-  }
-  private isItemData(item: AccordionMenuItem): boolean {
-    return item[this.childrenKey] === undefined;
-  }
   get routerLinkActived(): boolean {
     return (!!this.accordionItemRouterlinkQueryList
         && this.accordionItemRouterlinkQueryList.some(airlc => this.isLinkRouterActive(airlc))
@@ -111,6 +108,37 @@ export class AccordionListComponent implements OnInit, OnDestroy {
         && this.data.some(item => this.isItemData(item) && this.isItemDataActive(item))
       );
   }
+  @Input() data: Array<AccordionMenuItem>;
+  @Input() deepth = 0;
+  @Input() parent: AccordionMenuItem;
+  @ViewChildren(ACCORDION_MENU) accordionMenuQueryList: QueryList<any>;
+  @ViewChildren(AccordionItemRouterlinkComponent) accordionItemRouterlinkQueryList: QueryList<AccordionItemRouterlinkComponent>;
+6;
+  ngOnInit(): void {
+    if (this.parentComponent) {
+      setTimeout(() => {this.parentComponent.accordionListFromView = this; });
+    }
+  }
+  ngOnDestroy(): void {
+    if (this.parentComponent) {
+      this.parentComponent.accordionListFromView = undefined;
+    }
+  }
+  private isLinkRouterActive(airlc: AccordionItemRouterlinkComponent): boolean {
+    return airlc.routerLinkActived;
+  }
+  private isMenuRouterActive(amc: any): boolean {
+    return amc.routerLinkActived;
+  }
+  private isMenuDataActive(amc: any): boolean {
+    return amc.hasActiveChildren;
+  }
+  private isItemDataActive(item: AccordionMenuItem): boolean {
+    return !!item[this.activeKey];
+  }
+  private isItemData(item: AccordionMenuItem): boolean {
+    return item[this.childrenKey] === undefined;
+  }
   menuToggleItemFn = (item: any , event?: any) => {
     this.accordion.menuToggleFn({
       item: item,
diff --git a/devui/accordion/accordion-menu-token.ts b/devui/accordion/accordion-menu-token.ts
new file mode 100644
index 00000000..d2a9a3ff
--- /dev/null
+++ b/devui/accordion/accordion-menu-token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const ACCORDION_MENU = new InjectionToken('AccordionMenuComponent');
diff --git a/devui/accordion/accordion-menu.component.html b/devui/accordion/accordion-menu.component.html
index 963bb594..cc056756 100644
--- a/devui/accordion/accordion-menu.component.html
+++ b/devui/accordion/accordion-menu.component.html
@@ -45,13 +45,3 @@
     </svg>
   </span>
 </div>
-<d-accordion-list
-  class="devui-accordion-submenu"
-  [@collapse]="open ? 'expanded' : 'collapsed'"
-  [@.disabled]="!showAnimate"
-  [ngClass]="{ 'devui-accordion-menu-hidden': !open && !showAnimate }"
-  [deepth]="deepth + 1"
-  [data]="children"
-  [parent]="item"
->
-</d-accordion-list>
diff --git a/devui/accordion/accordion-menu.component.ts b/devui/accordion/accordion-menu.component.ts
index 1475bd13..b78eb154 100644
--- a/devui/accordion/accordion-menu.component.ts
+++ b/devui/accordion/accordion-menu.component.ts
@@ -1,30 +1,28 @@
-import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
-import { expandCollapse, expandCollapseForDomDestroy } from 'ng-devui/utils';
+import { Component, HostBinding, Inject, ViewEncapsulation } from '@angular/core';
 import { AccordionBaseComponent } from './accordion-base-component.class';
-import { AccordionListComponent } from './accordion-list.component';
-import { AccordionComponent } from './accordion.component';
+import { ACCORDION_MENU } from './accordion-menu-token';
+import { ACCORDION } from './accordion-token';
 import { AccordionBaseMenu, AccordionMenuItem } from './accordion.type';
 @Component({
   selector: 'd-accordion-menu',
   templateUrl: './accordion-menu.component.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
-  animations: [expandCollapse, expandCollapseForDomDestroy]
+  providers: [{
+    provide: ACCORDION_MENU,
+    useExisting: AccordionMenuComponent
+  }]
 })
 export class AccordionMenuComponent extends AccordionBaseComponent<AccordionBaseMenu<AccordionMenuItem>> {
   @HostBinding('class.devui-accordion-menu-item')
   defaultClasses = true;
 
-  public accordionListFromView: AccordionListComponent;
+  public accordionListFromView: any; // AccordionListComponent
 
   get menuItemTemplate() {
     return this.accordion.menuItemTemplate;
   }
 
-  get showAnimate() {
-    return this.accordion.showAnimation;
-  }
-
   @HostBinding('class.open')
   get open() {
     return (this.keyOpen === undefined && this.accordion.autoOpenActiveMenu)
@@ -52,7 +50,7 @@ export class AccordionMenuComponent extends AccordionBaseComponent<AccordionBase
     return this.accordionListFromView && this.accordionListFromView.hasActiveChildren;
   }
 
-  constructor(public accordion: AccordionComponent) {
+  constructor(@Inject(ACCORDION) public accordion: any) {
     super(accordion);
   }
 
diff --git a/devui/accordion/accordion-token.ts b/devui/accordion/accordion-token.ts
new file mode 100644
index 00000000..38fd04d1
--- /dev/null
+++ b/devui/accordion/accordion-token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const ACCORDION = new InjectionToken('AccordionComponent');
diff --git a/devui/accordion/accordion.component.scss b/devui/accordion/accordion.component.scss
index 0cfab036..d84f66a5 100755
--- a/devui/accordion/accordion.component.scss
+++ b/devui/accordion/accordion.component.scss
@@ -170,10 +170,6 @@
   }
 }
 
-:host ::ng-deep d-accordion-list.devui-accordion-menu-hidden {
-  display: none;
-}
-
 /* 视觉融合灰线 */
 :host ::ng-deep .devui-accordion-item-title {
   position: relative;
diff --git a/devui/accordion/accordion.component.ts b/devui/accordion/accordion.component.ts
index f0404a2f..b643dce9 100755
--- a/devui/accordion/accordion.component.ts
+++ b/devui/accordion/accordion.component.ts
@@ -2,12 +2,17 @@ import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, S
 import { I18nInterface, I18nService } from 'ng-devui/i18n';
 import { DevConfigService, WithConfig } from 'ng-devui/utils/globalConfig';
 import { Subscription } from 'rxjs';
+import { ACCORDION } from './accordion-token';
 import { AccordionItemClickEvent, AccordionMenuToggleEvent, AccordionMenuType, AccordionOptions } from './accordion.type';
 @Component({
   selector: 'd-accordion',
   templateUrl: './accordion.component.html',
   styleUrls: ['./accordion.component.scss'],
   preserveWhitespaces: false,
+  providers: [{
+    provide: ACCORDION,
+    useExisting: AccordionComponent
+  }]
 })
 export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, OnDestroy {
   @Input() data: Array<any> | AccordionMenuType;
diff --git a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts
index 4e22a1f5..e8ad1495 100644
--- a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts
+++ b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts
@@ -1,7 +1,7 @@
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
-import { BreadCrumbComponent } from '../breadcrumb.component';
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { BreadCrumbService } from '../breadcrumb.service';
+import { BREADCRUMB } from '../breadcrumb.token';
 import { MenuConfig } from '../breadcrumb.type';
 
 @Component({
@@ -23,7 +23,7 @@ export class BreadCrumbItemComponent implements OnInit {
   menuListDisplay: Array<MenuConfig>;
   isOpen: boolean;
 
-  constructor(public breadCrumbComponent: BreadCrumbComponent, private breadCrumbService: BreadCrumbService) { }
+  constructor(@Inject(BREADCRUMB) public breadCrumbComponent: any, private breadCrumbService: BreadCrumbService) { }
   ngOnInit(): void {
     this.menuListDisplay = this.menuList;
   }
diff --git a/devui/breadcrumb/breadcrumb.component.ts b/devui/breadcrumb/breadcrumb.component.ts
index c74aaa4a..fb0c64a1 100644
--- a/devui/breadcrumb/breadcrumb.component.ts
+++ b/devui/breadcrumb/breadcrumb.component.ts
@@ -4,6 +4,7 @@ import {
   TemplateRef,
 } from '@angular/core';
 import { BreadCrumbService } from './breadcrumb.service';
+import { BREADCRUMB } from './breadcrumb.token';
 import { SourceConfig } from './breadcrumb.type';
 
 @Component({
@@ -12,6 +13,9 @@ import { SourceConfig } from './breadcrumb.type';
   templateUrl: './breadcrumb.component.html',
   styleUrls: ['./breadcrumb.component.scss'],
   preserveWhitespaces: false,
+  providers: [
+    {provide: BREADCRUMB, useExisting: BreadCrumbComponent}
+  ],
 })
 export class BreadCrumbComponent {
   @Input() separatorIcon: TemplateRef<any>;
diff --git a/devui/breadcrumb/breadcrumb.token.ts b/devui/breadcrumb/breadcrumb.token.ts
new file mode 100644
index 00000000..8662559d
--- /dev/null
+++ b/devui/breadcrumb/breadcrumb.token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const BREADCRUMB = new InjectionToken('BreadCrumbComponent');
diff --git a/devui/common/helper-utils.ts b/devui/common/helper-utils.ts
index da8f6b39..7851f81e 100755
--- a/devui/common/helper-utils.ts
+++ b/devui/common/helper-utils.ts
@@ -168,9 +168,9 @@ export class HelperUtils {
       if (typeof document === 'undefined' || typeof window === 'undefined') {
         return;
       }
-      if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE11 support
+      if (window.navigator && window.navigator['msSaveOrOpenBlob']) { // IE11 support
         const blob = new Blob([data], {type: contentType});
-        window.navigator.msSaveOrOpenBlob(blob, filename);
+        window.navigator['msSaveOrOpenBlob'](blob, filename);
       } else {// other browsers
         if ('download' in document.createElement('a')) {
           const blob = new Blob([data], {type: contentType});
diff --git a/devui/dashboard/demo/basic/basic.component.html b/devui/dashboard/demo/basic/basic.component.html
index 6e337e8f..907ef34a 100644
--- a/devui/dashboard/demo/basic/basic.component.html
+++ b/devui/dashboard/demo/basic/basic.component.html
@@ -1,5 +1,5 @@
-<d-button (btnClick)="addWidget()">添加一个widget</d-button>
-<d-button [bsStyle]="'common'" (btnClick)="deleteWidget(widgets.length - 1)">删除最后一个widget</d-button>
+<d-button (btnClick)="addWidget()">Add a widget</d-button>
+<d-button [bsStyle]="'common'" (btnClick)="deleteWidget(widgets.length - 1)">Delete the last widget</d-button>
 <d-dashboard #dashboard="dDashboard" class="dashboard">
   <d-dashboard-widget
     *ngFor="let widget of widgets; let index = index"
@@ -21,18 +21,18 @@
     <div class="content">
       <div>
         <div>
-          <span>坐标</span><span class="coordinate">{{ widget.x }} , {{ widget.y }}</span>
+          <span>Coordinates</span><span class="coordinate">{{ widget.x }} , {{ widget.y }}</span>
         </div>
         <div>
-          <span>宽高</span><span class="size">{{ widget.width }} x {{ widget.height }}</span>
+          <span>Width & Height</span><span class="size">{{ widget.width }} x {{ widget.height }}</span>
         </div>
-        <div *ngIf="widget.locked"><span>锁定位置</span></div>
-        <div *ngIf="widget.noMove"><span>锁定拖拽移动</span></div>
-        <div *ngIf="widget.noResize"><span>锁定拖拽大小</span></div>
+        <div *ngIf="widget.locked"><span>Lock position</span></div>
+        <div *ngIf="widget.noMove"><span>Lock drag move</span></div>
+        <div *ngIf="widget.noResize"><span>Lock drag size</span></div>
       </div>
     </div>
   </d-dashboard-widget>
   <d-dashboard-widget [minWidth]="2" [maxWidth]="5" class="widget">
-    <div class="content"><div>独立使用</div></div></d-dashboard-widget
+    <div class="content"><div>Independent use</div></div></d-dashboard-widget
   >
 </d-dashboard>
diff --git a/devui/dashboard/demo/dashboard-demo.component.html b/devui/dashboard/demo/dashboard-demo.component.html
index 01fab3d7..8f0de8cf 100644
--- a/devui/dashboard/demo/dashboard-demo.component.html
+++ b/devui/dashboard/demo/dashboard-demo.component.html
@@ -1,15 +1,15 @@
 <div class="demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 160, bottom: 0 }">
   <d-demo-nav [navItems]="navItems">></d-demo-nav>
   <div class="devui-demo-example" [dAnchor]="'basic-usage'">
-    <div class="demo-title">基本用法</div>
-    <div class="demo-text">支持拖拽排序，缩放大小，添加，删除，禁止调整单个大小，禁止移动单个，锁定位置等等</div>
+    <div class="demo-title">{{ 'components.dashboard.basicDemo.title' | translate }}</div>
+    <div class="demo-text">{{ 'components.dashboard.basicDemo.description' | translate }}</div>
     <d-codebox id="components-card-basic" [sourceData]="basicSource">
       <d-basic demo></d-basic>
     </d-codebox>
   </div>
   <div class="devui-demo-example" [dAnchor]="'more-config'">
-    <div class="demo-title">更多设置</div>
-    <div class="demo-text">支持配置只读静态，配置上空浮动，连续紧凑排列，从外部拖拽添加，拖拽到垃圾桶删除等</div>
+    <div class="demo-title">{{ 'components.dashboard.configDemo.title' | translate }}</div>
+    <div class="demo-text">{{ 'components.dashboard.configDemo.description' | translate }}</div>
     <d-codebox id="components-card-basic" [sourceData]="moreConfigSource">
       <d-more-config demo></d-more-config>
     </d-codebox>
diff --git a/devui/dashboard/demo/dashboard-demo.component.ts b/devui/dashboard/demo/dashboard-demo.component.ts
index 701f0415..6828e2b8 100644
--- a/devui/dashboard/demo/dashboard-demo.component.ts
+++ b/devui/dashboard/demo/dashboard-demo.component.ts
@@ -1,11 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { DevuiSourceData } from 'ng-devui/shared/devui-codebox/devui-source-data';
+import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'd-dashboard-demo',
   templateUrl: './dashboard-demo.component.html'
 })
-export class DashboardDemoComponent implements OnInit {
+export class DashboardDemoComponent implements OnInit, OnDestroy {
   basicSource: Array<DevuiSourceData> = [
     {title: 'HTML', language: 'xml', code: require('./basic/basic.component.html?raw')},
     {title: 'TS', language: 'typescript', code: require('./basic/basic.component.ts?raw')},
@@ -16,13 +18,35 @@ export class DashboardDemoComponent implements OnInit {
     {title: 'TS', language: 'typescript', code: require('./more-config/more-config.component.ts?raw')},
     {title: 'SCSS', language: 'css', code: require('./more-config/more-config.component.scss?raw')}
   ];
-  navItems = [
-    { dAnchorLink: 'basic-usage', value: '基本用法'},
-    { dAnchorLink: 'more-config', value: '更多设置'},
-  ];
-  constructor() { }
+  navItems = [];
+  subs: Subscription = new Subscription();
+  constructor(private translate: TranslateService) {}
 
   ngOnInit() {
+    this.subs.add(
+      this.translate.get('components.dashboard.anchorLinkValues').subscribe((res) => {
+        this.setNavValues(res);
+      })
+    );
+
+    this.subs.add(
+      this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => {
+        const values = this.translate.instant('components.dashboard.anchorLinkValues');
+        this.setNavValues(values);
+      })
+    );
   }
 
+  setNavValues(values) {
+    this.navItems = [
+      { dAnchorLink: 'basic-usage', value: values['basic-usage'] },
+      { dAnchorLink: 'more-config', value: values['more-config'] }
+    ];
+  }
+
+  ngOnDestroy() {
+    if (this.subs) {
+      this.subs.unsubscribe();
+    }
+  }
 }
diff --git a/devui/dashboard/demo/dashboard-demo.module.ts b/devui/dashboard/demo/dashboard-demo.module.ts
index 5ac017fd..95f6ea55 100644
--- a/devui/dashboard/demo/dashboard-demo.module.ts
+++ b/devui/dashboard/demo/dashboard-demo.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 import {
   AnchorModule, ButtonModule, DrawerModule, DropDownModule, FormModule,
   SearchModule, TabsModule, ToggleModule
@@ -32,6 +33,7 @@ import { MoreConfigComponent } from './more-config/more-config.component';
     ButtonModule,
     AnchorModule,
     ToggleModule,
+    TranslateModule,
     DropDownModule,
     DDemoNavModule,
     DashboardModule,
diff --git a/devui/dashboard/demo/more-config/more-config.component.html b/devui/dashboard/demo/more-config/more-config.component.html
index 90ba5a09..47198af2 100644
--- a/devui/dashboard/demo/more-config/more-config.component.html
+++ b/devui/dashboard/demo/more-config/more-config.component.html
@@ -15,12 +15,12 @@
         [widgetData]="{ msg: 'Aha!' }"
       >
         <span class="icon icon-add"></span>
-        <div class="info">拖动此卡片到右侧添加</div>
+        <div class="info">Drag this card to the right to add</div>
       </div>
     </div>
     <div class="trash-zone" dDashboardLibraryTrash [trashData]="{ data: 'foo' }" [targetDashboard]="dashboard">
       <div class="icon icon-delete"></div>
-      <div class="info">拖动仪表盘的卡片到这里删除</div>
+      <div class="info">Drag the dashboard card here to delete it</div>
     </div>
   </div>
   <div class="main-content">
@@ -48,7 +48,7 @@
         [(width)]="widget.width"
         [(height)]="widget.height"
       >
-        <div style="padding: 12px">来源：{{ widget.from === 'data' ? '数据' : '拖拽' }}</div>
+        <div style="padding: 12px">Source: {{ widget.from === 'data' ? 'Data' : 'Drag' }}</div>
       </d-dashboard-widget>
     </d-dashboard>
   </div>
@@ -56,51 +56,51 @@
 <hr />
 <div class="layout">
   <div class="setting">
-    <div class="title">布局</div>
+    <div class="title">Layout</div>
     <form dForm [layout]="layoutDirection" [labelSize]="'sm'">
       <d-form-item>
-        <d-form-label>列数</d-form-label>
-        <d-form-control [extraInfo]="'数字，取值范围 1 - 12， 超过12列请参考api配置'">
+        <d-form-label>Columns</d-form-label>
+        <d-form-control [extraInfo]="'Numeral, ranges from 1 to 12. For more than 12 columns, see the API configuration.'">
           <input dTextInput name="column" [(ngModel)]="column" [ngModelOptions]="{ updateOn: 'blur' }" />
         </d-form-control>
       </d-form-item>
       <d-form-item>
-        <d-form-label>行高</d-form-label>
-        <d-form-control [extraInfo]="'数字或字符串， 数字单位为px'">
+        <d-form-label>Row height</d-form-label>
+        <d-form-control [extraInfo]="'Numeral or character string. The unit is px.'">
           <input dTextInput name="cellHeight" [(ngModel)]="cellHeight" [ngModelOptions]="{ updateOn: 'blur' }" />
         </d-form-control>
       </d-form-item>
       <d-form-item>
-        <d-form-label>边距</d-form-label>
-        <d-form-control [extraInfo]="'数字或字符串， 数字单位为px'">
+        <d-form-label>Margins</d-form-label>
+        <d-form-control [extraInfo]="'Numeral or character string. The unit is px.'">
           <input dTextInput name="margin" [(ngModel)]="margin" [ngModelOptions]="{ updateOn: 'blur' }" />
         </d-form-control>
       </d-form-item>
       <d-form-item>
-        <d-form-label>最小行高</d-form-label>
-        <d-form-control [extraInfo]="'数字，0 表示不限制'">
+        <d-form-label>Minimum row height</d-form-label>
+        <d-form-control [extraInfo]="'Number. The value 0 indicates no restriction.'">
           <input dTextInput name="minRow" [(ngModel)]="minRow" [ngModelOptions]="{ updateOn: 'blur' }" />
         </d-form-control>
       </d-form-item>
       <d-form-item>
-        <d-form-label>最大行高</d-form-label>
-        <d-form-control [extraInfo]="'数字，0 表示不限制'">
+        <d-form-label>Maximum row height</d-form-label>
+        <d-form-control [extraInfo]="'Number. The value 0 indicates no restriction.'">
           <input dTextInput name="maxRow" [(ngModel)]="maxRow" [ngModelOptions]="{ updateOn: 'blur' }" />
         </d-form-control>
       </d-form-item>
     </form>
   </div>
   <div class="config">
-    <div class="title">配置</div>
-    <div><d-toggle [(ngModel)]="static"></d-toggle>静态</div>
-    <div><d-toggle [(ngModel)]="float"></d-toggle>允许上空</div>
-    <div><d-toggle [(ngModel)]="animate"></d-toggle>动画</div>
-    <div><d-toggle [(ngModel)]="widgetMoveable"></d-toggle>禁止移动</div>
-    <div><d-toggle [(ngModel)]="widgetResizable"></d-toggle>禁止调整大小</div>
-    <div><d-toggle [(ngModel)]="showGridBlock"></d-toggle>显示网格</div>
+    <div class="title">Configuration</div>
+    <div><d-toggle [(ngModel)]="static"></d-toggle>Static</div>
+    <div><d-toggle [(ngModel)]="float"></d-toggle>Permitted overhead</div>
+    <div><d-toggle [(ngModel)]="animate"></d-toggle>Animation</div>
+    <div><d-toggle [(ngModel)]="widgetMoveable"></d-toggle>Disable moving</div>
+    <div><d-toggle [(ngModel)]="widgetResizable"></d-toggle>Disable resizing</div>
+    <div><d-toggle [(ngModel)]="showGridBlock"></d-toggle>Show grid</div>
   </div>
   <div class="operation">
-    <div class="title">操作</div>
-    <d-button [bsStyle]="'common'" (btnClick)="dashboard.compact()">自动连续紧凑排列</d-button>
+    <div class="title">Operation</div>
+    <d-button [bsStyle]="'common'" (btnClick)="dashboard.compact()">Automatic continuous compact arrangement</d-button>
   </div>
 </div>
diff --git a/devui/dashboard/doc/api-en.md b/devui/dashboard/doc/api-en.md
index da373341..2ea3cc25 100644
--- a/devui/dashboard/doc/api-en.md
+++ b/devui/dashboard/doc/api-en.md
@@ -29,13 +29,13 @@ This component defines a dashboard.
 
 | Parameter | Type | Default | Description |
 | :-------------: | :----------------: | :---: | :------------------------------------------------------------------------------ |
-| initOptions | `GridstackOptions` | -- | is optional. By default, the configuration is built-in. Users do not need to overwrite the configuration. This option is used to maintain scalability.|
+| initOptions | `GridstackOptions` | -- | Optional. By default, the configuration is built-in. Users do not need to overwrite the configuration. This option is used to maintain scalability.|
 | static | `boolean` | false | Optional. Indicates whether to enable read-only. true indicates read-only and false indicates editable. The default value is false. |
 | float | `boolean` | true | Optional. This parameter indicates whether to allow the widget to be placed under a blank widget. The default value is true. |
 | animate | `boolean` | true | Optional. Whether to enable the animation when adjusting the width and height and moving cards. The default value is true. |
 | widgetMoveable | `boolean` | true |: indicates whether the internal widget can be moved. This parameter is valid only when static is set to false.|
-| widgetResizable | `boolean` | true | is optional. Can the size of the internal widget be changed? |
-| showGridBlock | `boolean` | false | (Optional) Indicates whether to display the grid.|
+| widgetResizable | `boolean` | true | Optional. Can the size of the internal widget be changed? |
+| showGridBlock | `boolean` | false | Optional. Indicates whether to display the grid.|
 | column | `number` | 12 | Optional. The default value is 12. If the value is greater than 12, use gridstack.extra.scss to extend the CSS. |
 | minRow | `number` | -- | Optional. Minimum number of rows. The value 0 indicates no limit. |
 | maxRow | `number` | -- | Optional. Maximum number of rows. The value 0 indicates no limit.|
@@ -46,10 +46,10 @@ This component defines a dashboard.
 
 | Event | Type | Description |
 | :-----------: | :----------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
-Event triggered by adding a widget on the UI, such as | widgetAdded | `EventEmitter<DashboardWidgetEvent>` | dragging. A single data node in the array is the added node and contains widgetData information. willItFit indicates whether there is sufficient space. origNode indicates the original node.|
-Event triggered by widget change on the UI, such as | widgetChanged | `EventEmitter<DashboardWidgetEvent>` | dragging. In the array, a single data node is the changed node, and the widget is the dragged DashboardWidgetComponent.
-Event triggered when a widget is deleted on the UI, such as | widgetRemoved | `EventEmitter<DashboardWidgetEvent>` | dragging. A single data node in the array is the deleted node and contains trashData information. The widget is the dragged DashboardWidgetComponent.
-| dashboardInit | `EventEmitter<DashboardWidgetEvent>` | dashboard initialization complete|
+| widgetAdded | `EventEmitter<DashboardWidgetEvent>` | Event triggered by adding a widget on the UI, such as dragging. A single data node in the array is the added node and contains widgetData information. willItFit indicates whether there is sufficient space. origNode indicates the original node.|
+| widgetChanged | `EventEmitter<DashboardWidgetEvent>` | Event triggered by widget change on the UI, such as dragging. In the array, a single data node is the changed node, and the widget is the dragged DashboardWidgetComponent.
+| widgetRemoved | `EventEmitter<DashboardWidgetEvent>` | Event triggered when a widget is deleted on the UI, such as dragging. A single data node in the array is the deleted node and contains trashData information. The widget is the dragged DashboardWidgetComponent.
+| dashboardInit | `EventEmitter<DashboardWidgetEvent>` | Emit when dashboard initialization complete. |
 
 ```typescript
 export type DashboardWidgetEvent = Array<{
@@ -63,8 +63,6 @@ origNode?: GridStackNode; // add(optional)
 } >;
 ```
 
-
-3548/5000 拼音  翻译
 ### d-dashboard function
 
 Exporting a dDashboard
@@ -106,7 +104,7 @@ This component defines a dashboard widget.
 | minHeight | `number` | 0 | Optional. This parameter indicates the minimum height of the widget. The value 0 indicates no limit. |
 | noResize | `boolean` | false | Optional. Indicates whether the widget can be resized. |
 | noMove | `boolean` | false | Optional. Indicates whether the widget can be moved. |
-| autoPosition | `boolean` | false | (Optional) Indicates whether to ignore x and y to automatically search for vacant bits. This parameter is valid only for initialization.|
+| autoPosition | `boolean` | false | Optional. Indicates whether to ignore x and y to automatically search for vacant bits. This parameter is valid only for initialization.|
 | locked | `boolean` | false | Optional. Indicates whether the Widget is locked and not squeezed by other Widget positions. |
 | WidgetData | `any` | -- | Optional. User-defined data can be used for differentiated transmission. |
 
@@ -114,13 +112,13 @@ This component defines a dashboard widget.
 
 | Event | Type | Description |
 | :-----------: | :--------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------: |
-If the | xChange | `EventEmitter<number>` | x value changes, you are advised to bind the | xChange | `EventEmitter<number>` | x value to the corresponding x value bidirectionally. If the | xChange | `EventEmitter<number>` | x value is not bound to the x value, the internal x value will be forcibly changed (see the description).|
-If the | yChange | `EventEmitter<number>` | y value changes, you are advised to bind the | yChange | `EventEmitter<number>` | y value to the corresponding x value bidirectionally. If the | yChange | `EventEmitter<number>` | y value is not bound to the y value, the internal y value will be forcibly changed (see the description).|
-If the | widthChange | `EventEmitter<number>` | width value changes, you are advised to bind the | widthChange | `EventEmitter<number>` | width value to the corresponding width value bidirectionally. If the | widthChange | `EventEmitter<number>` | width value is not bound to the width value, the internal width value will be forcibly changed (see the description).|
-If the | heightChange | `EventEmitter<number>` | height value changes, it is recommended that the | heightChange | `EventEmitter<number>` | height value be bidirectionally bound to the corresponding height value. If the | heightChange | `EventEmitter<number>` | height value is not bound to the height value, the internal height value will be forcibly changed (see the description). | |
-| WidgetInit | `EventEmitter` | Optional. It is transmitted when the Widget initialization is complete. |
-| WidgetResize | `EventEmitter` | Optional. This parameter is triggered when the size of the widget is adjusted. In single-column mode, the value of width is the width of the widget (unit: column), and the value of height is the height of the widget (unit: row). |
-| widgetDestroy | `EventEmitter` | is optional. It is transmitted when the widget is destroyed.|
+| xChange | `EventEmitter<number>` | The x value changes, it is recommended to bind to the corresponding x value in both directions. If it is not bound back to the x value, the internal x value will be forcibly modified (see description) |
+| yChange | `EventEmitter<number>` | The y value changes, it is recommended to bind to the corresponding x value in both directions. If it is not bound back to the y value, the internal y value will be forcibly modified (see description) |
+| widthChange | `EventEmitter<number>` | The width value changes, it is recommended to bind to the corresponding width value in both directions. If it is not bound back to the width value, the internal width value will be forcibly modified (see description) |
+| heightChange | `EventEmitter<number>` | The height value changes, it is recommended to bind to the corresponding height value in both directions. If it is not bound back to the height value, the internal height value will be forcibly modified (see description) | |
+| widgetInit | `EventEmitter` | optional, emitted when widget initialization is complete |
+| widgetResize | `EventEmitter` | Optional, triggered when the widget is resized, triggered when the following changes in single-column mode, when resizing, width is the width of the widget (unit: column), and height is the height of the widget (unit: row) ) |
+| widgetDestroy | `EventEmitter` | optional, emitted when the widget is destroyed |
 
 - Note: If the original data value is not bound, the internal value is forcibly updated to adapt to the GUI function. Users can perform unified processing in the widgetChange event of the dashboard.
 
@@ -135,10 +133,10 @@ This component defines an external pendant that can be dragged into the dashboar
 | targetDashboard | `DashboardComponent` | -- | Mandatory. Target dashboards that can be dragged into |
 | width | `number` | 1 | Width of the widget to be dragged (unit: column) |
 | height | `number` | 1 | Height of the widget to be dragged (unit: row) |
-| dragMode | `'copy'\ | 'move' `| 'copy' | Optional, move or copy|
-| dragTemplate | `TemplateRef<any>` | -- | is optional. The dragged content template is displayed when the content template is dragged. For details about available variables in the template, see the following section.
+| dragMode | `'copy' \| 'move' `| 'copy' | Optional, move or copy|
+| dragTemplate | `TemplateRef<any>` | -- | Optional. The dragged content template is displayed when the content template is dragged. For details about available variables in the template, see the following section.
 | dragCopyStyle | `boolean` | -- | Optional. Indicates whether to copy all styles during dragging. |
-| dragDisabled | `boolean` | false | (Optional) Whether to disable dragging. This parameter is used to temporarily disable dragging into the dashboard.|
+| dragDisabled | `boolean` | false | Optional. Whether to disable dragging. This parameter is used to temporarily disable dragging into the dashboard.|
 
 ### outlet parameter of dragTemplate
 
@@ -156,8 +154,8 @@ This component defines a container for external widgets that can be dragged to t
 
 | Event | Type | Description |
 | :-------------: | :------------: | :------------------------------- |
-| widgetDragStart | `EventEmitter` | is optional. It is emitted when the widget starts to drag.|
-| widgetDragStop | `EventEmitter` | is optional. It is transmitted when the widget ends dragging.|
+| widgetDragStart | `EventEmitter` | Optional. It is emitted when the widget starts to drag.|
+| widgetDragStop | `EventEmitter` | Optional. It is transmitted when the widget ends dragging.|
 
 ## dDashboardLibraryTrash Directive
 
@@ -167,6 +165,6 @@ This component defines a recycle bin that can be dragged into by the dashboard p
 
 | Parameter | Type | Default | Description |
 | :-------------: | :------------------: | :---: | :--------------------------------------------------- |
-| targetDashboard | `DashboardComponent` | -- | (Mandatory) Delete the target dashboard associated with the operation.|
+| targetDashboard | `DashboardComponent` | -- | Mandatory. Delete the target dashboard associated with the operation.|
 | trashData | `any` | -- | Optional. User-defined recycle bin information can be used to distinguish different recycle bins. |
-| dropDisabled | `boolean` | false | (Optional) Indicates whether to disable the Dashboard attachment. This parameter is used to temporarily disable the Dashboard attachment.|
\ No newline at end of file
+| dropDisabled | `boolean` | false | Optional. Indicates whether to disable the Dashboard attachment. This parameter is used to temporarily disable the Dashboard attachment.|
\ No newline at end of file
diff --git a/devui/data-table/data-table-body.component.ts b/devui/data-table/data-table-body.component.ts
index 31bae9ca..f354b817 100755
--- a/devui/data-table/data-table-body.component.ts
+++ b/devui/data-table/data-table-body.component.ts
@@ -1,6 +1,6 @@
-import { Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
-import { DataTableComponent } from './data-table.component';
+import { Component, Inject, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { TableExpandConfig, TableWidthConfig } from './data-table.model';
+import { DATA_TABLE } from './data-table.token';
 import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
 
 @Component({
@@ -31,7 +31,7 @@ export class DataTableBodyComponent implements OnChanges {
   @Input() headerExpandConfig: TableExpandConfig;
   @Input() generalRowHoveredData: boolean;
   childTdColspan: number;
-  constructor(public dt: DataTableComponent) {
+  constructor(@Inject(DATA_TABLE) public dt: any) {
 
   }
 
diff --git a/devui/data-table/data-table-cell.component.ts b/devui/data-table/data-table-cell.component.ts
index a63a3aa8..6c2f5da9 100755
--- a/devui/data-table/data-table-cell.component.ts
+++ b/devui/data-table/data-table-cell.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   ComponentFactoryResolver,
   ElementRef,
+  Inject,
   Input,
   NgZone,
   OnChanges,
@@ -16,8 +17,8 @@ import { SelectComponent } from 'ng-devui/select';
 import { TreeSelectComponent } from 'ng-devui/tree-select';
 import { stopPropagationIfExist } from 'ng-devui/utils';
 import { fromEvent, Subscription } from 'rxjs';
-import { DataTableRowComponent } from './data-table-row.component';
-import { DataTableComponent } from './data-table.component';
+import { DATA_TABLE_ROW } from './data-table-row.token';
+import { DATA_TABLE } from './data-table.token';
 import { EditorDirective } from './editor-host.directive';
 import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
 
@@ -50,9 +51,9 @@ export class DataTableCellComponent implements OnInit, OnChanges, OnDestroy {
   templateEditorActive: boolean; // 通过模板生成的编辑控件激活
   dynamicEditorActive: boolean; // 动态生成的编辑控件激活
 
-  constructor(public dt: DataTableComponent, private changeDetectorRef: ChangeDetectorRef,
+  constructor(@Inject(DATA_TABLE) public dt: any, private changeDetectorRef: ChangeDetectorRef,
               private componentFactoryResolver: ComponentFactoryResolver,
-              public rowComponent: DataTableRowComponent, private cellRef: ElementRef, private ngZone: NgZone) {
+              @Inject(DATA_TABLE_ROW) public rowComponent: any, private cellRef: ElementRef, private ngZone: NgZone) {
 
   }
 
diff --git a/devui/data-table/data-table-head.component.ts b/devui/data-table/data-table-head.component.ts
index 5ee1332d..1206fb84 100755
--- a/devui/data-table/data-table-head.component.ts
+++ b/devui/data-table/data-table-head.component.ts
@@ -5,8 +5,8 @@ import {
 } from '@angular/core';
 import { I18nInterface, I18nService } from 'ng-devui/i18n';
 import { Subscription } from 'rxjs';
-import { DataTableComponent } from './data-table.component';
 import { SortDirection, SortEventArg, TableCheckOptions } from './data-table.model';
+import { DATA_TABLE } from './data-table.token';
 import { TableThComponent } from './table/head/th/th.component';
 import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
 
@@ -115,7 +115,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit,
   checkedListForFilter = [];
   document: Document;
   documentElement: HTMLElement;
-  constructor(public dt: DataTableComponent,
+  constructor(@Inject(DATA_TABLE) public dt: any,
               private zone: NgZone,
               private element: ElementRef,
               private differs: KeyValueDiffers,
diff --git a/devui/data-table/data-table-row.component.ts b/devui/data-table/data-table-row.component.ts
index aa5e1e67..808d7b31 100755
--- a/devui/data-table/data-table-row.component.ts
+++ b/devui/data-table/data-table-row.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, OnInit, Output } from '@angular/core';
-import { DataTableComponent } from './data-table.component';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Inject, Input, NgZone, OnInit, Output } from '@angular/core';
+import { DATA_TABLE_ROW } from './data-table-row.token';
+import { DATA_TABLE } from './data-table.token';
 import { ForceUpdateReason } from './force-update-reason.model';
 import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
 
@@ -8,6 +9,9 @@ import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.comp
   templateUrl: './data-table-row.component.html',
   styleUrls: ['./data-table-row.component.scss'],
   preserveWhitespaces: false,
+  providers: [
+    {provide: DATA_TABLE_ROW, useExisting: DataTableRowComponent}
+  ],
 })
 export class DataTableRowComponent implements OnInit {
   @Input() rowItem: any;
@@ -33,7 +37,7 @@ export class DataTableRowComponent implements OnInit {
   clickCount = 0; // 记录点击次数
   timeoutId; // 延时id
 
-  constructor(public dt: DataTableComponent, private changeDetectorRef: ChangeDetectorRef,
+  constructor(@Inject(DATA_TABLE) public dt: any, private changeDetectorRef: ChangeDetectorRef,
               private rowRef: ElementRef, private ngZone: NgZone) {
   }
 
diff --git a/devui/data-table/data-table-row.token.ts b/devui/data-table/data-table-row.token.ts
new file mode 100644
index 00000000..13069fcd
--- /dev/null
+++ b/devui/data-table/data-table-row.token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const DATA_TABLE_ROW = new InjectionToken('DATA_TABLE_ROW');
diff --git a/devui/data-table/data-table.component.ts b/devui/data-table/data-table.component.ts
index 32197d02..4a5d9518 100755
--- a/devui/data-table/data-table.component.ts
+++ b/devui/data-table/data-table.component.ts
@@ -15,6 +15,7 @@ import {
   RowSelectedEventArg, SortEventArg, TableCheckOptions, TableCheckStatusArg,
   TableExpandConfig, TableWidthConfig
 } from './data-table.model';
+import { DATA_TABLE } from './data-table.token';
 import { TableTbodyComponent } from './table/body/tbody.component';
 import { TableThComponent } from './table/head/th/th.component';
 import { TableTheadComponent } from './table/head/thead.component';
@@ -30,6 +31,9 @@ import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.comp
   // changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'dataTable',
   preserveWhitespaces: false,
+  providers: [
+    {provide: DATA_TABLE, useExisting: DataTableComponent}
+  ],
 })
 export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterContentInit, AfterViewInit {
   /**
diff --git a/devui/data-table/data-table.model.ts b/devui/data-table/data-table.model.ts
index 4498d2fe..69029486 100755
--- a/devui/data-table/data-table.model.ts
+++ b/devui/data-table/data-table.model.ts
@@ -1,8 +1,8 @@
 import { TemplateRef } from '@angular/core';
-import { DataTableCellComponent } from './data-table-cell.component';
-import { DataTableRowComponent } from './data-table-row.component';
-import { TableThComponent } from './table/head/th/th.component';
-import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
+import type { DataTableCellComponent } from './data-table-cell.component';
+import type { DataTableRowComponent } from './data-table-row.component';
+import type { TableThComponent } from './table/head/th/th.component';
+import type { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
 
 export interface CellSelectedEventArg {
   rowIndex: number;
diff --git a/devui/data-table/data-table.token.ts b/devui/data-table/data-table.token.ts
new file mode 100644
index 00000000..7594edf5
--- /dev/null
+++ b/devui/data-table/data-table.token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const DATA_TABLE = new InjectionToken('DATA_TABLE');
diff --git a/devui/data-table/display-cell-value.pipe.ts b/devui/data-table/display-cell-value.pipe.ts
index 83687c4f..7efe01d2 100755
--- a/devui/data-table/display-cell-value.pipe.ts
+++ b/devui/data-table/display-cell-value.pipe.ts
@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { formatDate } from 'ng-devui/utils';
-import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
+import type { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
 
 @Pipe({ name: 'disPlayCellValuePipe' })
 export class DisPlayCellValuePipe implements PipeTransform {
diff --git a/devui/data-table/table/head/th/filter/filter.component.ts b/devui/data-table/table/head/th/filter/filter.component.ts
index 8d20f274..61cb56b6 100644
--- a/devui/data-table/table/head/th/filter/filter.component.ts
+++ b/devui/data-table/table/head/th/filter/filter.component.ts
@@ -8,7 +8,7 @@ import { I18nInterface, I18nService } from 'ng-devui/i18n';
 import { BehaviorSubject, fromEvent, Observable, of, Subscription } from 'rxjs';
 import { debounceTime, map, switchMap } from 'rxjs/operators';
 import { FilterConfig } from '../../../../data-table.model';
-import { TableThComponent } from '../th.component';
+import { TABLE_TH } from '../th.token';
 
 @Component({
   selector: 'd-table-filter',
@@ -49,7 +49,7 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy {
   filterIconActiveInner: boolean;
   DEBONCE_TIME = 300;
   document: Document;
-  constructor(private ref: ChangeDetectorRef, private i18n: I18nService, private thComponent: TableThComponent,
+  constructor(private ref: ChangeDetectorRef, private i18n: I18nService, @Inject(TABLE_TH) private thComponent: any,
               @Inject(DOCUMENT) private doc: any) {
     this.i18nCommonText = this.i18n.getI18nText().common;
     this.document = this.doc;
diff --git a/devui/data-table/table/head/th/th.component.ts b/devui/data-table/table/head/th/th.component.ts
index 1c79f938..23d2f402 100644
--- a/devui/data-table/table/head/th/th.component.ts
+++ b/devui/data-table/table/head/th/th.component.ts
@@ -5,11 +5,15 @@ import {
 } from '@angular/core';
 import { fromEvent, Observable, Subscription } from 'rxjs';
 import { FilterConfig, SortDirection, SortEventArg } from '../../../data-table.model';
+import { TABLE_TH } from './th.token';
 
 @Component({
   /* eslint-disable-next-line @angular-eslint/component-selector*/
   selector: '[dHeadCell]',
   templateUrl: './th.component.html',
+  providers: [
+    {provide: TABLE_TH, useExisting: TableThComponent}
+  ],
 })
 export class TableThComponent implements OnChanges, OnDestroy {
   @HostBinding('class.resizeable') resizeEnabledClass = false;
diff --git a/devui/data-table/table/head/th/th.token.ts b/devui/data-table/table/head/th/th.token.ts
new file mode 100644
index 00000000..e16d4a5d
--- /dev/null
+++ b/devui/data-table/table/head/th/th.token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const TABLE_TH = new InjectionToken('TABLE_TH');
diff --git a/devui/dragdrop/touch-support/dragdrop-touch.ts b/devui/dragdrop/touch-support/dragdrop-touch.ts
index 40e9c11c..e7281ded 100644
--- a/devui/dragdrop/touch-support/dragdrop-touch.ts
+++ b/devui/dragdrop/touch-support/dragdrop-touch.ts
@@ -95,7 +95,7 @@ export class DragDropTouch {
     if ('ontouchstart' in d  // normal mobile device
       || 'ontouchstart' in w
       || navigator.maxTouchPoints > 0
-      || navigator.msMaxTouchPoints > 0
+      || navigator['msMaxTouchPoints'] > 0
       || window['DocumentTouch'] && document instanceof window['DocumentTouch']) {
       bool = true;
     } else {
diff --git a/devui/layout/public-api.ts b/devui/layout/public-api.ts
index 46fbb3da..0880cff0 100644
--- a/devui/layout/public-api.ts
+++ b/devui/layout/public-api.ts
@@ -12,3 +12,4 @@ export * from './row.component';
 export * from './screen-media-query.service';
 export * from './space.directive';
 export * from './style.directive';
+export * from './flex.directive';
diff --git a/devui/loading/loading.directive.ts b/devui/loading/loading.directive.ts
index 2da57941..b01bc1fc 100755
--- a/devui/loading/loading.directive.ts
+++ b/devui/loading/loading.directive.ts
@@ -1,5 +1,4 @@
 import {
-  ComponentFactoryResolver,
   ComponentRef,
   Directive,
   ElementRef,
@@ -41,7 +40,6 @@ export class LoadingDirective implements OnChanges {
   active = true;
 
   constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
     private triggerElementRef: ElementRef,
     private viewContainerRef: ViewContainerRef,
     private injector: Injector,
@@ -109,11 +107,10 @@ export class LoadingDirective implements OnChanges {
       if (this.backdrop) {
         this.createLoadingBackdrop();
       }
-      this.loadingRef = this.viewContainerRef.createComponent(
-        this.componentFactoryResolver.resolveComponentFactory(LoadingComponent),
-        null,
-        this.injector
-      );
+      this.loadingRef = this.viewContainerRef.createComponent(LoadingComponent, {
+        index: null,
+        injector: this.injector,
+      });
 
       this.insert(this.loadingRef.hostView);
 
@@ -144,11 +141,10 @@ export class LoadingDirective implements OnChanges {
   private createLoadingBackdrop() {
     this.backdropRef =
       !this.backdropRef &&
-      this.viewContainerRef.createComponent(
-        this.componentFactoryResolver.resolveComponentFactory(LoadingBackdropComponent),
-        null,
-        this.injector
-      );
+      this.viewContainerRef.createComponent(LoadingBackdropComponent, {
+        index: null,
+        injector: this.injector,
+      });
     this.insert(this.backdropRef.hostView);
 
     Object.assign(this.backdropRef.instance, {
diff --git a/devui/ng-package.json b/devui/ng-package.json
index 16504c16..31921ce3 100755
--- a/devui/ng-package.json
+++ b/devui/ng-package.json
@@ -2,11 +2,7 @@
   "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../publish",
   "lib": {
-    "entryFile": "./index.ts",
-    "umdModuleIds": {
-      "lodash-es": "lodash-es",
-      "enquire.js": "enquire.js"
-    }
+    "entryFile": "./index.ts"
   },
-  "whitelistedNonPeerDependencies": ["@angular/cdk","date-fns", "lodash-es", "@popperjs/core", "enquire.js", "css-vars-ponyfill"]
+  "allowedNonPeerDependencies": ["@angular/cdk","date-fns", "lodash-es", "@popperjs/core", "enquire.js", "css-vars-ponyfill"]
 }
diff --git a/devui/package.json b/devui/package.json
index 1bfb28d4..1d95ec34 100755
--- a/devui/package.json
+++ b/devui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-devui",
-  "version": "12.3.0",
+  "version": "13.0.0",
   "license": "MIT",
   "description": "DevUI components based on Angular",
   "keywords": [
@@ -17,7 +17,7 @@
     "url": "https://github.com/DevCloudFE/ng-devui/issues"
   },
   "dependencies": {
-    "@angular/cdk": "^12.0.0",
+    "@angular/cdk": "^13.0.0",
     "date-fns": "^2.20.0",
     "lodash-es": "^4.17.11",
     "@popperjs/core": "^2.5.4",
@@ -26,9 +26,9 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/animations": "^12.0.0",
-    "@angular/common": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/forms": "^12.0.0"
+    "@angular/animations": "^13.0.0",
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@angular/forms": "^13.0.0"
   }
 }
\ No newline at end of file
diff --git a/devui/polyfills.ts b/devui/polyfills.ts
index de2ab795..d5a59e18 100644
--- a/devui/polyfills.ts
+++ b/devui/polyfills.ts
@@ -16,44 +16,11 @@
 
 /** *************************************************************************************************
  * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/**
- * If the application will be indexed by Google Search, the following is required.
- * Googlebot uses a renderer based on Chrome 41.
- * https://developers.google.com/search/docs/guides/rendering
- **/
-// import 'core-js/es6/array';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-import 'classlist.js';  // Run `npm install --save classlist.js`.
+ */  // Run `npm install --save classlist.js`.
 
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
 
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
diff --git a/devui/position/positioning.service.ts b/devui/position/positioning.service.ts
index 15485f14..fd2eaa8d 100755
--- a/devui/position/positioning.service.ts
+++ b/devui/position/positioning.service.ts
@@ -7,9 +7,9 @@ export class PositionService {
   constructor(private documentRef: DocumentRef, private windowRef: WindowRef) {
   }
 
-  position(element: HTMLElement, round = true): ClientRect {
-    let elPosition: ClientRect;
-    let parentOffset: ClientRect = { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
+  position(element: HTMLElement, round = true) {
+    let elPosition;
+    let parentOffset = { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
 
     if (this.getStyle(element, 'position') === 'fixed') {
       elPosition = element.getBoundingClientRect();
@@ -41,7 +41,7 @@ export class PositionService {
     return elPosition;
   }
 
-  offset(element: HTMLElement, round = true): ClientRect {
+  offset(element: HTMLElement, round = true) {
     const elBcr = element.getBoundingClientRect();
     const viewportOffset = {
       top: this.windowRef.pageYOffset - this.documentRef.documentElement.clientTop,
diff --git a/devui/test.ts b/devui/test.ts
index ae56d6c5..1f8ba397 100755
--- a/devui/test.ts
+++ b/devui/test.ts
@@ -17,7 +17,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
diff --git a/devui/tsconfig.lib.prod.json b/devui/tsconfig.lib.prod.json
index 2617a83e..2a2faa88 100644
--- a/devui/tsconfig.lib.prod.json
+++ b/devui/tsconfig.lib.prod.json
@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
-}
\ No newline at end of file
+}
diff --git a/devui/version.ts b/devui/version.ts
index 93ee857b..aacd73f2 100755
--- a/devui/version.ts
+++ b/devui/version.ts
@@ -1,3 +1,3 @@
 import { Version } from '@angular/core';
 
-export const VERSION = new Version('12.3.0');
+export const VERSION = new Version('13.0.0');
diff --git a/package.json b/package.json
index ed721ffe..8335c667 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,9 @@
   },
   "scripts": {
     "ng": "ng",
-    "start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --open --configuration es5",
-    "start-es6": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --open",
-    "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod --deploy-url /components/",
-    "build:separate": "npm run build:devui && node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod --deploy-url /components/ --configuration separate",
+    "start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --open",
+    "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build  --configuration production  --deploy-url /components/",
+    "build:separate": "npm run build:devui && node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production --deploy-url /components/ --configuration separate",
     "test": "ng test",
     "test:lib": "ng test devui-lib --no-watch --no-progress --browsers=ChromeHeadlessCI",
     "lint": "ng lint",
@@ -32,42 +31,42 @@
     "build:devui:ivy": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build devui-lib"
   },
   "dependencies": {
-    "@angular/animations": "^12.2.10",
-    "@angular/cdk": "^12.2.10",
-    "@angular/common": "^12.2.10",
-    "@angular/compiler": "^12.2.10",
-    "@angular/core": "^12.2.10",
-    "@angular/forms": "^12.2.10",
-    "@angular/platform-browser": "^12.2.10",
-    "@angular/platform-browser-dynamic": "^12.2.10",
-    "@angular/router": "^12.2.10",
+    "@angular/animations": "^13.1.2",
+    "@angular/cdk": "^13.1.2",
+    "@angular/common": "^13.1.2",
+    "@angular/compiler": "^13.1.2",
+    "@angular/core": "^13.1.2",
+    "@angular/forms": "^13.1.2",
+    "@angular/platform-browser": "^13.1.2",
+    "@angular/platform-browser-dynamic": "^13.1.2",
+    "@angular/router": "^13.1.2",
     "@devui-design/icons": "^1.2.0",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "@popperjs/core": "^2.10.2",
-    "bootstrap": "^4.5.2",
+    "bootstrap": "^4.6.0",
     "classlist.js": "^1.1.20150312",
     "color": "^3.1.3",
     "core-js": "^3.18.3",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.23.0",
     "enquire.js": "^2.1.6",
-    "fastestsmallesttextencoderdecoder": "1.0.14",
+    "fastestsmallesttextencoderdecoder": "1.0.22",
     "gridstack": "2.0.1",
     "lodash-es": "^4.17.15",
-    "marked": "2.1.1",
+    "marked": "^3.0.4",
     "tslib": "^2.0.0",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^12.1.3",
-    "@angular-devkit/build-angular": "^12.2.10",
-    "@angular-eslint/builder": "^12.1.0",
-    "@angular-eslint/eslint-plugin": "^12.1.0",
-    "@angular/cli": "^12.2.10",
-    "@angular/compiler-cli": "^12.1.3",
-    "@angular/language-service": "^12.1.3",
+    "@angular-builders/custom-webpack": "^13.0.0",
+    "@angular-devkit/build-angular": "^13.1.3",
+    "@angular-eslint/builder": "^13.0.0",
+    "@angular-eslint/eslint-plugin": "^13.0.1",
+    "@angular/cli": "^13.1.3",
+    "@angular/compiler-cli": "^13.1.2",
+    "@angular/language-service": "^13.1.2",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@types/jasmine": "~3.6.0",
@@ -93,8 +92,7 @@
     "karma-junit-reporter": "^2.0.1",
     "lint-staged": "^9.2.3",
     "markdown-loader": "^5.1.0",
-    "ng-packagr": "^12.0.0",
-    "ngx-build-plus": "^8.1.5",
+    "ng-packagr": "^13.0.8",
     "patch-package": "^6.2.2",
     "postcss": "^8.2.4",
     "prettier": "^2.1.2",
@@ -106,8 +104,9 @@
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.17.0",
+    "synckit": "^0.6.0",
     "ts-node": "~7.0.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.4.4"
   },
   "lint-staged": {
     "{devui,src}/**/*.{ts,js}": [
diff --git a/patches/ng-packagr+12.2.6.patch b/patches/ng-packagr+12.2.6.patch
deleted file mode 100644
index 0a7aba93..00000000
--- a/patches/ng-packagr+12.2.6.patch
+++ /dev/null
@@ -1,12 +0,0 @@
-diff --git a/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js b/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js
-index 348a4ca..9b8c8a8 100644
---- a/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js
-+++ b/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js
-@@ -124,6 +124,7 @@ function optimizeCss(filePath, css, browsers, cssUrl) {
-         autoprefixer: true,
-         stage: 3,
-     }));
-+    postCssPlugins.push(require(process.cwd() + '/' + 'scripts/themeable/add-origin-varvalue.js' ));
-     return postcss_1.default(postCssPlugins).process(css, {
-         from: filePath,
-         to: filePath.replace(path.extname(filePath), '.css'),
diff --git a/patches/ng-packagr+13.1.3.patch b/patches/ng-packagr+13.1.3.patch
new file mode 100644
index 00000000..80a756b6
--- /dev/null
+++ b/patches/ng-packagr+13.1.3.patch
@@ -0,0 +1,12 @@
+diff --git a/node_modules/ng-packagr/lib/styles/stylesheet-processor.js b/node_modules/ng-packagr/lib/styles/stylesheet-processor.js
+index ac329f6..8c4d00f 100644
+--- a/node_modules/ng-packagr/lib/styles/stylesheet-processor.js
++++ b/node_modules/ng-packagr/lib/styles/stylesheet-processor.js
+@@ -138,6 +138,7 @@ class StylesheetProcessor {
+             autoprefixer: true,
+             stage: 3,
+         }));
++        postCssPlugins.push(require(process.cwd() + '/' + 'scripts/themeable/add-origin-varvalue.js' ));
+         return (0, postcss_1.default)(postCssPlugins);
+     }
+     async renderCss(filePath, css) {
diff --git a/scripts/es2015-to-es5-babel-loader/babel-loader-wepack-config.js b/scripts/es2015-to-es5-babel-loader/babel-loader-wepack-config.js
index 7b050842..d4f68a6d 100644
--- a/scripts/es2015-to-es5-babel-loader/babel-loader-wepack-config.js
+++ b/scripts/es2015-to-es5-babel-loader/babel-loader-wepack-config.js
@@ -1,7 +1,7 @@
 const path = require('path');
 const ts = require('typescript');
 const AngularCompilerPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
-const readConfiguration = require('@angular/compiler-cli').readConfiguration;
+const { createSyncFn  } = require('synckit');
 const ES6_ONLY_THIRD_PARTY_LIST = require('./es6-only-third-party-list');
 
 function getAngularCompilerTsConfigPath(config) {
@@ -11,7 +11,9 @@ function getAngularCompilerTsConfigPath(config) {
   }
   return undefined;
 }
+
 function getTsconfigCompileTarget(tsconfigPath) {
+  const readConfiguration = createSyncFn(require.resolve('../worker'));
   const {target} = readConfiguration(path.resolve(tsconfigPath)).options;
   return target;
 }
diff --git a/scripts/less-importer/get-path-alias-from-tsconfig.js b/scripts/less-importer/get-path-alias-from-tsconfig.js
index 8fd1c7bb..d0a5932c 100644
--- a/scripts/less-importer/get-path-alias-from-tsconfig.js
+++ b/scripts/less-importer/get-path-alias-from-tsconfig.js
@@ -1,7 +1,7 @@
 const path = require('path');
-const readConfiguration = require('@angular/compiler-cli').readConfiguration;
-
+const { createSyncFn  } = require('synckit');
 module.exports = function pathAlias(tsconfigPath) {
+  const readConfiguration = createSyncFn(require.resolve('../worker'));
   const { baseUrl, paths } = readConfiguration(path.resolve(tsconfigPath)).options;
   if (!paths) { return []; }
   return Object.keys(paths)
@@ -13,4 +13,4 @@ module.exports = function pathAlias(tsconfigPath) {
       aliasReg: new RegExp('^~' + rule.alias.replace(/\/\*$/, '/(.*?)')),
       pathPrefixes: rule.paths.map(pathname => path.resolve(baseUrl || '', pathname.replace(/\*$/, '')))
     }));
-}
\ No newline at end of file
+}
diff --git a/scripts/sass-importer/get-tsconfig-alias.js b/scripts/sass-importer/get-tsconfig-alias.js
index 71d83dd6..e6093c78 100644
--- a/scripts/sass-importer/get-tsconfig-alias.js
+++ b/scripts/sass-importer/get-tsconfig-alias.js
@@ -1,7 +1,8 @@
 const path = require('path');
-const readConfiguration = require('@angular/compiler-cli').readConfiguration;
+const { createSyncFn  } = require('synckit');
 
 function pathAlias(tsconfigPath) {
+  const readConfiguration = createSyncFn(require.resolve('../worker'));
   const {baseUrl, paths} = readConfiguration(path.resolve(tsconfigPath)).options;
   if (!paths) { return []; }
   return Object.keys(paths)
diff --git a/scripts/worker.js b/scripts/worker.js
new file mode 100644
index 00000000..be15ec1c
--- /dev/null
+++ b/scripts/worker.js
@@ -0,0 +1,6 @@
+const { runAsWorker } = require('synckit')
+
+runAsWorker(async (filePath) => {
+  const readConfiguration = (await import('@angular/compiler-cli')).readConfiguration;
+  return readConfiguration(filePath);
+})
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 57c108f3..16bd61ec 100755
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -77,6 +77,7 @@ export class AppComponent implements OnInit, OnDestroy {
     const versionArr = this.version.split('.');
     this.versionOptions = [
       { name: this.version, link: '/components/get-start', target: '_self' },
+      { name: '12.3.0', link: '/12.3.0/', target: '_self' },
       { name: '11.4.0', link: '/11.4.0/', target: '_self' },
       { name: '10.2.0', link: '/10.2.0/', target: '_self' },
       { name: '9.3.0', link: '/9.3.0/', target: '_self' },
diff --git a/src/app/component/getStarted-cn.md b/src/app/component/getStarted-cn.md
index ce81c6e6..5dcefe2b 100644
--- a/src/app/component/getStarted-cn.md
+++ b/src/app/component/getStarted-cn.md
@@ -10,7 +10,7 @@
 
 ### Angular版本
 
-当前支持的Angular版本 <font color=red>`^12.0.0`</font>
+当前支持的Angular版本 <font color=red>`^13.0.0`</font>
 
 ### 1. 创建一个项目
 
diff --git a/src/app/component/getStarted-en.md b/src/app/component/getStarted-en.md
index bc524a87..adf67475 100644
--- a/src/app/component/getStarted-en.md
+++ b/src/app/component/getStarted-en.md
@@ -10,7 +10,7 @@ For details about how to use this function, see the following StackBlitz demonst
 
 ### Angular version
 
-The supported Angular version is <font color=red>`^12.0.0`</font>.
+The supported Angular version is <font color=red>`^13.0.0`</font>.
 
 ### 1. Create a project
 
diff --git a/src/app/theme-picker/customize-theme/customize-theme.component.ts b/src/app/theme-picker/customize-theme/customize-theme.component.ts
index a333988b..f05291f5 100644
--- a/src/app/theme-picker/customize-theme/customize-theme.component.ts
+++ b/src/app/theme-picker/customize-theme/customize-theme.component.ts
@@ -100,9 +100,9 @@ export const myTheme: Theme = new Theme({
     if (typeof window === 'undefined') {
       return;
     }
-    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE11 support
+    if (window.navigator && window.navigator['msSaveOrOpenBlob']) { // IE11 support
       const blob = new Blob([data], { type: contentType });
-      window.navigator.msSaveOrOpenBlob(blob, filename);
+      window.navigator['msSaveOrOpenBlob'](blob, filename);
     } else {// other browsers
       if ('download' in this.document.createElement('a')) {
         const blob = new Blob([data], { type: contentType });
diff --git a/src/assets/i18n/en-us.json b/src/assets/i18n/en-us.json
index 4eb0dec3..550a382d 100644
--- a/src/assets/i18n/en-us.json
+++ b/src/assets/i18n/en-us.json
@@ -1423,7 +1423,51 @@
       "type": "Experimental",
       "path": "dashboard",
       "description": "Dashboard supports various pendants.",
-      "tmw": "Functions as a container to carry various types of content."
+      "tmw": "Functions as a container to carry various types of content.",
+      "basicDemo": {
+        "title": "Basic Usage",
+        "description": "Supports drag-and-drop sorting, scaling, adding, deleting, resize, moving, and locking.",
+        "addWidget": "Add a widget",
+        "popWidget": "Delete the last widget",
+        "coordinates": "Coordinates",
+        "size": "Width and Height",
+        "lock": "Lock",
+        "position": "Location",
+        "dragMove": "Drag Move",
+        "dragSize": "Drag Size",
+        "independentUse": "Independent use"
+      },
+      "configDemo": {
+        "title": "More Settings",
+        "description": "Supports read-only static configuration, floating configuration, continuous compact arrangement, external addition, and deletion.",
+        "dragAdd": "Drag the card to the right.",
+        "dragDelete": "Drag the dashboard card here to delete it.",
+        "source": "Source:",
+        "data": "Data",
+        "drag": "Drag",
+        "layout": "Layout",
+        "columns": "Number of columns",
+        "placeHolder1": "The value ranges from 1 to 12. For more than 12 columns, see the API configuration.",
+        "rowHeight": "Row Height",
+        "placeHolder2": "Number or character string, in pixels",
+        "margins": "Margins",
+        "minRowHeight": "Minimum row height",
+        "placeHolder3": "Number. The value 0 indicates no restriction.",
+        "maxRowHeight": "Maximum row height",
+        "configuration": "Configuration",
+        "static": "Static",
+        "permittedOverhead": "Allow Overhead",
+        "animation": "animation",
+        "forbiddenMoving": "Forbidden Move",
+        "forbiddenResizing": "Forbidden Resize",
+        "showGrid": "Display Grid",
+        "operation": "Operation",
+        "autoArrangement": "Automatic Continuous Compact Arrangement"
+      },
+      "anchorLinkValues": {
+        "basic-usage": "Basic Usage",
+        "more-config": "More Settings"
+      }
     },
     "datepicker": {
       "name": "DatePicker",
diff --git a/src/assets/i18n/zh-cn.json b/src/assets/i18n/zh-cn.json
index c52c94b2..795dd56c 100644
--- a/src/assets/i18n/zh-cn.json
+++ b/src/assets/i18n/zh-cn.json
@@ -1416,7 +1416,51 @@
       "type": "演进中",
       "path": "dashboard",
       "description": "仪表盘支持各类挂件",
-      "tmw": "作为容器承载各类内容"
+      "tmw": "作为容器承载各类内容",
+      "basicDemo": {
+        "title": "基本用法",
+        "description": "支持拖拽排序，缩放大小，添加，删除，禁止调整单个大小，禁止移动单个，锁定位置等等",
+        "addWidget": "添加一个widget",
+        "popWidget": "删除最后一个widget",
+        "coordinates": "坐标",
+        "size": "宽高",
+        "lock": "锁定",
+        "position": "位置",
+        "dragMove": "拖拽移动",
+        "dragSize": "拖拽大小",
+        "independentUse": "独立使用"
+      },
+      "configDemo": {
+        "title": "更多设置",
+        "description": "支持配置只读静态，配置上空浮动，连续紧凑排列，从外部拖拽添加，拖拽到垃圾桶删除等",
+        "dragAdd": "拖动此卡片到右侧添加",
+        "dragDelete": "拖动仪表盘的卡片到这里删除",
+        "source": "来源：",
+        "data": "数据",
+        "drag": "拖拽",
+        "layout": "布局",
+        "columns": "列数",
+        "placeHolder1": "数字，取值范围 1 - 12， 超过12列请参考api配置",
+        "rowHeight": "行高",
+        "placeHolder2": "数字或字符串， 数字单位为px",
+        "margins": "边距",
+        "minRowHeight": "最小行高",
+        "placeHolder3": "数字，0 表示不限制",
+        "maxRowHeight": "最大行高",
+        "configuration": "配置",
+        "static": "静态",
+        "permittedOverhead": "允许上空",
+        "animation": "动画",
+        "forbiddenMoving": "禁止移动",
+        "forbiddenResizing": "禁止调整大小",
+        "showGrid": "显示网格",
+        "operation": "操作",
+        "autoArrangement": "自动连续紧凑排列"
+      },
+      "anchorLinkValues": {
+        "basic-usage": "基本用法",
+        "more-config": "更多设置"
+      }
     },
     "datepicker": {
       "name": "DatePicker 日期选择器",
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 4e6d99a3..7b094f1f 100755
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -24,20 +24,10 @@ import 'core-js/es/array';
  * Googlebot uses a renderer based on Chrome 41.
  * https://developers.google.com/search/docs/guides/rendering
  **/
-import 'core-js/es/array';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-import 'classlist.js';  // Run `npm install --save classlist.js`.
+import 'core-js/es/array';  // Run `npm install --save classlist.js`.
 
 /** IE10 and IE11 requires the following for the Reflect API. */
-import 'core-js/es/reflect';
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'core-js/es/reflect';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
diff --git a/src/test.ts b/src/test.ts
index 33f9986d..2ef3f202 100755
--- a/src/test.ts
+++ b/src/test.ts
@@ -7,7 +7,9 @@ import 'zone.js/testing';
 declare const require: any;
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.