fix(abc:st): a more friendly expandIcon (#1842)

Co-authored-by: cipchk <[email protected]>

packages/abc/st/demo/expand.md

@@ -17,20 +17,34 @@ Use `#expand` template implement expandable, allowing you to receive three value
 import { Component } from '@angular/core';
 
 import { STColumn, STData, STModule } from '@delon/abc/st';
+import { NzButtonComponent } from 'ng-zorro-antd/button';
+import { NzIconDirective } from 'ng-zorro-antd/icon';
 
 @Component({
   selector: 'app-demo',
   template: `
-    <st [data]="users" [columns]="columns" [expand]="expand" expandRowByClick expandAccordion>
+    <button nz-button nzType="primary" (click)="customIcon = !customIcon">Use Custom Icon</button>
+    <st
+      [data]="users"
+      [columns]="columns"
+      [expand]="expand"
+      expandRowByClick
+      expandAccordion
+      [expandIcon]="customIcon ? expandIcon : null"
+    >
       <ng-template #expand let-item let-index="index" let-column="column">
         {{ item.description }}
       </ng-template>
+      <ng-template #expandIcon let-i let-index="index">
+        <span nz-icon [nzType]="i.expand ? 'up' : 'down'"></span>
+      </ng-template>
     </st>
   `,
   standalone: true,
-  imports: [STModule]
+  imports: [STModule, NzIconDirective, NzButtonComponent]
 })
 export class DemoComponent {
+  customIcon = false;
   users: STData[] = Array(10)
     .fill({})
     .map((_, idx) => ({

packages/abc/st/index.en-US.md

@@ -82,8 +82,8 @@ When an exception is thrown when parsing column data, *INVALID DATA* will be for
 | `[widthConfig]` | Set col width can not used with width of STColumn | `string[]` | - | - |
 | `[expandRowByClick]` | Whether to expand row by clicking anywhere in the whole row | `boolean` | `false` | ✅ |
 | `[expandAccordion]` | Accordion mode | `boolean` | `false` | ✅ |
-| `[expand]` | Whether current column include expand icon | `TemplateRef<void>` | - | - |
-| `[expandIcon]`   | Custom expand icon | `TemplateRef<void>` | - |
+| `[expand]` | Whether current column include expand icon | `TemplateRef<{ $implicit: STData; index: number }>` | - | - |
+| `[expandIcon]`   | Custom expand icon | `TemplateRef<{ $implicit: STData; index: number }>` | - |
 | `[responsive]` | Whether to turn on responsive | `boolean` | `true` | ✅ |
 | `[responsiveHideHeaderFooter]` | Whether to display the header and footer under the small screen | `boolean` | `false` | ✅ |
 | `[resizable]` | Resize header of the current table, **Multiple headers not supported** | `STResizable, boolean` | - | - |

packages/abc/st/index.zh-CN.md

@@ -82,8 +82,8 @@ module: import { STModule } from '@delon/abc/st';
 | `[widthConfig]` | 表头分组时指定每列宽度，与 STColumn 的 width 不可混用 | `string[]` | - | - |
 | `[expandRowByClick]` | 通过点击行来展开子行 | `boolean` | `false` | ✅ |
 | `[expandAccordion]` | 手风琴模式 | `boolean` | `false` | ✅ |
-| `[expand]` | 当前列是否包含展开按钮，当数据源中包括 `expand` 表示展开状态 | `TemplateRef<void>` | - | - |
-| `[expandIcon]`   | 自定义展开图标 | `TemplateRef<void>` | - |
+| `[expand]` | 当前列是否包含展开按钮，当数据源中包括 `expand` 表示展开状态 | `TemplateRef<{ $implicit: STData; index: number }>` | - | - |
+| `[expandIcon]`   | 自定义展开图标 | `TemplateRef<{ $implicit: STData; index: number }>` | - |
 | `[responsive]` | 是否开启响应式 | `boolean` | `true` | ✅ |
 | `[responsiveHideHeaderFooter]` | 是否在小屏幕下才显示顶部与底部 | `boolean` | `false` | ✅ |
 | `[resizable]` | 当前表格所有列的调整表头配置项，**不支持多表头** | `STResizable, boolean` | - | - |

packages/abc/st/st.component.html

@@ -160,11 +160,16 @@
           <td
             [nzShowExpand]="expand && i.showExpand !== false"
             [nzExpand]="i.expand"
-            [nzExpandIcon]="expandIcon"
+            [nzExpandIcon]="expandIcon ? wrapExpandIcon : null"
             (nzExpandChange)="_expandChange(i, $event)"
             (click)="_stopPropagation($event)"
             nzWidth="50px"
           ></td>
+          <ng-template #wrapExpandIcon>
+            <span (click)="_expandChange(i, !i.expand)">
+              <ng-template [ngTemplateOutlet]="expandIcon" [ngTemplateOutletContext]="{ $implicit: i, index: index }" />
+            </span>
+          </ng-template>
         }
         @for (c of _columns; track cIdx; let cIdx = $index) {
           @if (i._values[cIdx].props?.colSpan > 0 && i._values[cIdx].props?.rowSpan > 0) {

packages/abc/st/st.component.ts

@@ -213,8 +213,8 @@ export class STComponent implements AfterViewInit, OnChanges {
   @Input() body?: TemplateRef<{ $implicit: STStatisticalResults }> | null;
   @Input({ transform: booleanAttribute }) expandRowByClick = false;
   @Input({ transform: booleanAttribute }) expandAccordion = false;
-  @Input() expand: TemplateRef<{ $implicit: NzSafeAny; index: number }> | null = null;
-  @Input() expandIcon: TemplateRef<void> | null = null;
+  @Input() expand: TemplateRef<{ $implicit: STData; index: number }> | null = null;
+  @Input() expandIcon: TemplateRef<{ $implicit: STData; index: number }> | null = null;
   @Input() noResult?: string | TemplateRef<void> | null;
   @Input({ transform: booleanAttribute }) responsive: boolean = true;
   @Input({ transform: booleanAttribute }) responsiveHideHeaderFooter?: boolean;