fix(abc:st): misalignment when fixed and expand is set

- close ng-alain/ng-alain#2534

Author: cipchk

packages/abc/st/st-column-source.ts

@@ -27,6 +27,7 @@ export interface STColumnSourceProcessOptions {
   widthMode: STWidthMode;
   resizable?: STResizable;
   safeType: STColumnSafeType;
+  expand: boolean;
 }
 
 @Injectable()
@@ -140,12 +141,13 @@ export class STColumnSource {
     }
   }
 
-  private fixedCoerce(list: _STColumn[]): void {
+  private fixedCoerce(list: _STColumn[], expand: boolean): void {
     const countReduce = (a: number, b: _STColumn): number => a + +b.width!.toString().replace('px', '');
+    const expandWidth = expand ? 50 : 0;
     // left width
     list
       .filter(w => w.fixed && w.fixed === 'left' && w.width)
-      .forEach((item, idx) => (item._left = `${list.slice(0, idx).reduce(countReduce, 0)}px`));
+      .forEach((item, idx) => (item._left = `${list.slice(0, idx).reduce(countReduce, 0) + expandWidth}px`));
     // right width
     list
       .filter(w => w.fixed && w.fixed === 'right' && w.width)
@@ -536,7 +538,7 @@ export class STColumnSource {
       throw new Error(`[st]: just only one column radio`);
     }
 
-    this.fixedCoerce(columns as _STColumn[]);
+    this.fixedCoerce(columns as _STColumn[], options.expand);
     return {
       columns: columns.filter(w => !Array.isArray(w.children) || w.children.length === 0),
       ...this.genHeaders(copyList)

packages/abc/st/st.component.html

@@ -58,7 +58,7 @@
       @for (row of _headers; track row) {
         <tr>
           @if ($first && expand) {
-            <th nzWidth="50px" [rowSpan]="_headers.length"></th>
+            <th nzWidth="50px" [rowSpan]="_headers.length" [nzLeft]="row[0].column._left! ? true : false"></th>
           }
           @for (h of row; track h; let index = $index; let last = $last) {
             @let _c = h.column;
@@ -164,6 +164,7 @@
             (nzExpandChange)="_expandChange(i, $event)"
             (click)="_stopPropagation($event)"
             nzWidth="50px"
+            [nzLeft]="_columns[0]._left! ? true : false"
           ></td>
           <ng-template #wrapExpandIcon>
             <span (click)="_expandChange(i, !i.expand)">

packages/abc/st/st.component.ts

@@ -1014,7 +1014,8 @@ export class STComponent implements AfterViewInit, OnChanges {
     const res = this.columnSource.process(this.columns as _STColumn[], {
       widthMode: this.widthMode,
       resizable: this._resizable,
-      safeType: this.cog.safeType as STColumnSafeType
+      safeType: this.cog.safeType as STColumnSafeType,
+      expand: this.expand != null
     });
     this._columns = res.columns;
     this._headers = res.headers;

packages/abc/st/test/st-column-source.spec.ts

@@ -37,7 +37,12 @@ describe('st: column-source', () => {
   let rowSrv: STRowSource;
   let stWidgetRegistry: STWidgetRegistry;
   let page: PageObject;
-  const options: STColumnSourceProcessOptions = { widthMode, resizable: { disabled: true }, safeType: 'safeHtml' };
+  const options: STColumnSourceProcessOptions = {
+    widthMode,
+    resizable: { disabled: true },
+    safeType: 'safeHtml',
+    expand: false
+  };
 
   function genModule(other: { acl?: boolean; i18n?: boolean; cog?: any }): void {
     aclSrv = other.acl ? new ACLService({ merge: (_: any, def: any) => def } as any) : null;
@@ -228,7 +233,8 @@ describe('st: column-source', () => {
       it('should be working when className is object', () => {
         const res = srv.process([{ title: '', width: 10, type: 'number', className: { a: true, b: false } }], {
           widthMode: { strictBehavior: 'truncate' },
-          safeType: 'html'
+          safeType: 'html',
+          expand: false
         }).columns;
         const obj = res[0]._className as NgClassInterface;
         expect(obj['text-truncate']).toBe(true);