feat(abc:notice-icon): support standalone

ng-alain · Jan 11, 2024 · 2ee634e · 2ee634e
1 parent d2798a0
commit 2ee634e
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 14 deletions.
diff --git a/packages/abc/error-collect/error-collect.component.ts b/packages/abc/error-collect/error-collect.component.ts
@@ -39,7 +39,7 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NzIconDirective]
+  imports: [NzIconDirective, NzIconDirective]
 })
 export class ErrorCollectComponent implements OnInit {
   private formEl: HTMLFormElement | null = null;

diff --git a/packages/abc/media/index.en-US.md b/packages/abc/media/index.en-US.md
@@ -39,7 +39,7 @@ const alainConfig: AlainConfig = {
 
 ## API
 
-### media
+### [media]:standalone
 
 | Property | Description | Type | Default | Global Config |
 |----------|-------------|------|---------|---------------|

diff --git a/packages/abc/media/index.zh-CN.md b/packages/abc/media/index.zh-CN.md
@@ -39,7 +39,7 @@ const alainConfig: AlainConfig = {
 
 ## API
 
-### media
+### [media]:standalone
 
 | 成员 | 说明 | 类型 | 默认值 | 全局配置 |
 |----|----|----|-----|------|

diff --git a/packages/abc/notice-icon/demo/basic.md b/packages/abc/notice-icon/demo/basic.md
@@ -8,13 +8,13 @@ title: 通知图标
 ```ts
 import { Component } from '@angular/core';
 
-import { NoticeIconModule } from '@delon/abc/notice-icon';
+import { NoticeIconComponent } from '@delon/abc/notice-icon';
 
 @Component({
   selector: 'app-demo',
   template: ` <notice-icon count="5" /> `,
   standalone: true,
-  imports: [NoticeIconModule]
+  imports: [NoticeIconComponent]
 })
 export class DemoComponent {}
 ```
diff --git a/packages/abc/notice-icon/demo/popover.md b/packages/abc/notice-icon/demo/popover.md
@@ -10,7 +10,7 @@ import { Component, TemplateRef, ViewChild, inject } from '@angular/core';
 
 import { add, formatDistanceToNow, parse } from 'date-fns';
 
-import { NoticeIconList, NoticeIconModule, NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon';
+import { NoticeIconList, NoticeIconComponent, NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -36,7 +36,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
     </div>
   `,
   standalone: true,
-  imports: [NoticeIconModule]
+  imports: [NoticeIconComponent]
 })
 export class DemoComponent {
   private readonly msg = inject(NzMessageService);

diff --git a/packages/abc/notice-icon/index.en-US.md b/packages/abc/notice-icon/index.en-US.md
@@ -10,7 +10,7 @@ Used on the navigation toolbar as a unified notification center for the entire p
 
 ## API
 
-### notice-icon
+### notice-icon:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|

diff --git a/packages/abc/notice-icon/index.zh-CN.md b/packages/abc/notice-icon/index.zh-CN.md
@@ -10,7 +10,7 @@ module: import { NoticeIconModule } from '@delon/abc/notice-icon';
 
 ## API
 
-### notice-icon
+### notice-icon:standalone
 
 | 参数 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|

diff --git a/packages/abc/notice-icon/notice-icon-tab.component.html b/packages/abc/notice-icon/notice-icon-tab.component.html
@@ -15,7 +15,7 @@
 <ng-template #listTpl>
   <nz-list [nzDataSource]="data.list" [nzRenderItem]="item">
     <ng-template #item let-item>
-      <nz-list-item (click)="onClick(item)" [ngClass]="{ 'notice-icon__item-read': item.read }">
+      <nz-list-item (click)="onClick(item)" [class.notice-icon__item-read]="item.read">
         <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDescription" [nzAvatar]="item.avatar">
           <ng-template #nzTitle>
             <ng-container *nzStringTemplateOutlet="item.title; context: { $implicit: item }">

diff --git a/packages/abc/notice-icon/notice-icon-tab.component.ts b/packages/abc/notice-icon/notice-icon-tab.component.ts
@@ -1,6 +1,10 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 
 import { LocaleData } from '@delon/theme';
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
+import { NzListModule } from 'ng-zorro-antd/list';
+import { NzTagComponent } from 'ng-zorro-antd/tag';
 
 import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
 
@@ -9,7 +13,9 @@ import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
   exportAs: 'noticeIconTab',
   templateUrl: './notice-icon-tab.component.html',
   preserveWhitespaces: false,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgTemplateOutlet, NzStringTemplateOutletDirective, NzListModule, NzTagComponent]
 })
 export class NoticeIconTabComponent {
   @Input() locale: LocaleData = {};

diff --git a/packages/abc/notice-icon/notice-icon.component.ts b/packages/abc/notice-icon/notice-icon.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -14,8 +15,14 @@ import { Subscription } from 'rxjs';
 
 import { DelonLocaleService, LocaleData } from '@delon/theme';
 import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
+import { NzBadgeComponent } from 'ng-zorro-antd/badge';
 import type { NgClassType } from 'ng-zorro-antd/core/types';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconDirective } from 'ng-zorro-antd/icon';
+import { NzSpinComponent } from 'ng-zorro-antd/spin';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
 
+import { NoticeIconTabComponent } from './notice-icon-tab.component';
 import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
 
 @Component({
@@ -25,7 +32,17 @@ import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
   host: { '[class.notice-icon__btn]': 'true' },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    NgClass,
+    NzBadgeComponent,
+    NzIconDirective,
+    NzDropDownModule,
+    NzSpinComponent,
+    NzTabsModule,
+    NoticeIconTabComponent
+  ]
 })
 export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
   static ngAcceptInputType_count: NumberInput;

diff --git a/packages/abc/notice-icon/notice-icon.module.ts b/packages/abc/notice-icon/notice-icon.module.ts
@@ -27,9 +27,10 @@ const COMPONENTS = [NoticeIconComponent];
     NzSpinModule,
     NzTabsModule,
     NzTagModule,
-    NzOutletModule
+    NzOutletModule,
+    ...COMPONENTS,
+    NoticeIconTabComponent
   ],
-  declarations: [...COMPONENTS, NoticeIconTabComponent],
   exports: COMPONENTS
 })
 export class NoticeIconModule {}