@simplysm/angular 14.0.53 → 14.0.55

package/src/data/crud/sd-crud-list.ts

@@ -0,0 +1,316 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  inject,
+  input,
+  model,
+  output,
+  TemplateRef,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdActivatedModalProvider } from "../../core/modal/sd-activated-modal.provider";
+import { SdAnchor } from "../../controls/button/sd-anchor";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdCommandDirective } from "../../core/commands/sd-command";
+import { SdForm } from "../../controls/form/sd-form";
+import { SdSheet } from "../sheet/sd-sheet";
+import { SdSheetColumn } from "../sheet/sd-sheet-column";
+import { SdSheetColumnCellTemplate } from "../sheet/sd-sheet-column-cell-template";
+import type { SdViewType } from "../../core/routing/injectViewTypeSignal";
+import type { SortingDef } from "../../core/selection/useSortingManager";
+import { SdBaseContainer } from "./sd-base-container";
+import { NgIcon } from "@ng-icons/core";
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  tablerCirclePlus,
+  tablerDeviceFloppy,
+  tablerEraser,
+  tablerRestore,
+  tablerSearch,
+} from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-crud-list",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdBaseContainer,
+    SdButton,
+    NgIcon,
+    NgTemplateOutlet,
+    SdSheet,
+    SdForm,
+    SdAnchor,
+    SdSheetColumn,
+    SdSheetColumnCellTemplate,
+  ],
+  hostDirectives: [{ directive: SdCommandDirective, outputs: ["sdSaveCommand"] }],
+  host: {
+    "(sdSaveCommand)": "onSaveButtonClick()",
+  },
+  template: `
+    <sd-base-container
+      [(ready)]="ready"
+      [initialized]="initialized()"
+      [(busyCount)]="busyCount"
+      [restricted]="restricted()"
+      [viewType]="viewType()"
+    >
+      <!-- TOP -->
+      @if (viewType() === "page" && (!readonly() || commandTplRef())) {
+        <ng-template #topbarTpl>
+          @if (!readonly()) {
+            <sd-button [theme]="'link-primary'" (click)="formCtrl()?.requestSubmit()">
+              <ng-icon [svg]="tablerDeviceFloppy" />
+              저장
+              <small>(CTRL+S)</small>
+            </sd-button>
+          }
+
+          <ng-template [ngTemplateOutlet]="commandTplRef()" />
+        </ng-template>
+      } @else if (!readonly() || commandTplRef()) {
+        <ng-template #commandTpl>
+          @if (!readonly()) {
+            <sd-button [theme]="'primary'" (click)="onSaveButtonClick()">
+              <ng-icon [svg]="tablerDeviceFloppy" />
+              저장
+              <small>(CTRL+S)</small>
+            </sd-button>
+          }
+
+          <ng-template [ngTemplateOutlet]="commandTplRef()" />
+        </ng-template>
+      }
+
+      <!-- BOTTOM -->
+      @if ((viewType() === "modal" && selectMode() != null) || bottomCommandTplRef()) {
+        <ng-template #bottomCommandTpl>
+          @if (bottomCommandTplRef()) {
+            <div class="flex-fill flex-row main-align-start gap-sm">
+              <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
+            </div>
+          }
+
+          @if (selectMode() != null) {
+            <sd-button
+              [size]="'sm'"
+              [theme]="'danger'"
+              (click)="onModalSelectionCancelClick()"
+              [disabled]="selectedKeys().length < 1"
+            >
+              선택 해제
+            </sd-button>
+            @if (selectMode() === "multi") {
+              <sd-button [size]="'sm'" [theme]="'primary'" (click)="onModalSelectionConfirmClick()">
+                확인({{ selectedKeys().length }})
+              </sd-button>
+            }
+          }
+        </ng-template>
+      }
+
+      <!-- CONTENT -->
+      <div class="flex-column fill">
+        @if (filterTplRef()) {
+          <sd-form (formSubmit)="filterSubmit.emit()" class="block p-default">
+            <div class="form-box-inline">
+              <div>
+                <sd-button [type]="'submit'" [theme]="'info'">
+                  <ng-icon [svg]="tablerSearch" />
+                  조회
+                </sd-button>
+              </div>
+              <ng-template [ngTemplateOutlet]="filterTplRef()" />
+            </div>
+          </sd-form>
+        }
+
+        @if (!readonly() || toolTplRef()) {
+          <div class="flex-row gap-sm p-xs-default">
+            @if (!readonly()) {
+              <sd-button [size]="'sm'" [theme]="'link-primary'" (click)="create.emit()">
+                <ng-icon [svg]="tablerCirclePlus" />
+                등록
+              </sd-button>
+              @if (selectMode() !== "single") {
+                <sd-button
+                  [size]="'sm'"
+                  [theme]="'link-danger'"
+                  (click)="delete.emit(currSelectedItems())"
+                  [disabled]="!hasSelectedNotDeleted()"
+                >
+                  <ng-icon [svg]="tablerEraser" />
+                  선택 삭제
+                </sd-button>
+                @if (hasSelectedDeleted()) {
+                  <sd-button
+                    [size]="'sm'"
+                    [theme]="'link-warning'"
+                    (click)="restore.emit(currSelectedItems())"
+                  >
+                    <ng-icon [svg]="tablerRestore" />
+                    선택 복구
+                  </sd-button>
+                }
+              }
+            }
+
+            @if (toolTplRef()) {
+              <ng-template [ngTemplateOutlet]="toolTplRef()" />
+            }
+          </div>
+        }
+
+        @if (readonly()) {
+          <div class="flex-fill p-default pt-0">
+            <ng-template [ngTemplateOutlet]="sheet" />
+          </div>
+        } @else {
+          <sd-form #formCtrl (formSubmit)="submit.emit()" class="flex-fill p-default pt-0">
+            <ng-template [ngTemplateOutlet]="sheet" />
+          </sd-form>
+        }
+      </div>
+    </sd-base-container>
+
+    <ng-template #sheet>
+      <sd-sheet
+        [key]="key() + '-sheet'"
+        [items]="items()"
+        [(currentPage)]="currentPage"
+        [totalPageCount]="totalPageCount()"
+        [(sorts)]="sorts"
+        [useAutoSort]="totalPageCount() === 0"
+        [selectMode]="selectMode() ?? (readonly() ? undefined : 'multi')"
+        [(selectedKeys)]="selectedKeys"
+        [trackByFn]="trackByFn()"
+        [getItemCellStyleFn]="getItemCellStyleFn"
+        [autoSelect]="selectMode() === 'single' ? 'click' : undefined"
+        [columnControlsInput]="columnControls()"
+        (selectedKeysChange)="onSelectedKeysChange()"
+      >
+        @if (!readonly()) {
+          <sd-sheet-column
+            [fixed]="true"
+            [key]="'deleteButton'"
+            [disableResizing]="true"
+            [disableSorting]="true"
+          >
+            <ng-template #headerTpl>
+              <div class="p-xs-sm tx-center">
+                <ng-icon [svg]="tablerEraser" />
+              </div>
+            </ng-template>
+            <ng-template [cell]="items()" let-item="item">
+              <div class="p-xs-sm">
+                <sd-anchor
+                  [theme]="'danger'"
+                  (click)="isDeleted(item) ? restore.emit([item]) : delete.emit([item])"
+                >
+                  <ng-icon [svg]="isDeleted(item) ? tablerRestore : tablerEraser" />
+                </sd-anchor>
+              </div>
+            </ng-template>
+          </sd-sheet-column>
+        }
+      </sd-sheet>
+    </ng-template>
+  `,
+})
+export class SdCrudList<TItem, TKey> {
+  private readonly _sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
+
+  ready = model(false);
+  initialized = input(false);
+  busyCount = model(0);
+  restricted = input(false);
+  readonly = input(false);
+  viewType = input.required<SdViewType>();
+  selectMode = input<"single" | "multi">();
+  key = input.required<string>();
+
+  formCtrl = viewChild<SdForm>("formCtrl");
+
+  filterSubmit = output();
+  submit = output();
+  create = output();
+  delete = output<TItem[]>();
+  restore = output<TItem[]>();
+
+  items = input<TItem[]>([]);
+  selectedKeys = model<NonNullable<TKey>[]>([]);
+
+  currDeletedItems = input<TItem[]>([]);
+  currDeletedSet = computed(() => new Set(this.currDeletedItems()));
+
+  currSelectedItems = computed(() =>
+    this.items().filter((it) => {
+      const key = this.trackByFn()(it);
+      return key != null && this.selectedKeys().includes(key);
+    }),
+  );
+
+  currentPage = model(0);
+  totalPageCount = input(0);
+  sorts = model<SortingDef[]>([]);
+
+  trackByFn = input.required<(item: TItem) => TKey>();
+
+  commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
+  filterTplRef = contentChild<TemplateRef<void>>("filterTpl");
+  toolTplRef = contentChild<TemplateRef<void>>("toolTpl");
+  bottomCommandTplRef = contentChild<TemplateRef<void>>("bottomCommandTpl");
+
+  columnControls = contentChildren(SdSheetColumn);
+
+  hasSelectedDeleted = computed(() => this.currSelectedItems().some((it) => this.isDeleted(it)));
+  hasSelectedNotDeleted = computed(() =>
+    this.currSelectedItems().some((it) => !this.isDeleted(it)),
+  );
+
+  getItemCellStyleFn = (item: TItem): string | undefined =>
+    this.isDeleted(item) ? "text-decoration: line-through;" : undefined;
+
+  isDeleted(item: TItem) {
+    return this.currDeletedSet().has(item);
+  }
+
+  onSaveButtonClick() {
+    this.formCtrl()?.requestSubmit();
+  }
+
+  onModalSelectionCancelClick(): void {
+    this.selectedKeys.set([]);
+
+    if (this.selectMode() === "single") {
+      this._sdActivatedModal?.contentComponent().close.emit({ selectedKeys: [] });
+    }
+  }
+
+  onModalSelectionConfirmClick() {
+    const selectedKeys = this.selectedKeys();
+    this._sdActivatedModal?.contentComponent().close.emit({ selectedKeys });
+  }
+
+  onSelectedKeysChange() {
+    if (this.viewType() !== "modal") return;
+    if (this.selectMode() !== "single") return;
+
+    const selectedKeys = this.selectedKeys();
+    if (selectedKeys.length !== 1) return;
+
+    this._sdActivatedModal?.contentComponent().close.emit({ selectedKeys });
+  }
+
+  protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
+  protected readonly tablerCirclePlus = tablerCirclePlus;
+  protected readonly tablerEraser = tablerEraser;
+  protected readonly tablerRestore = tablerRestore;
+  protected readonly tablerSearch = tablerSearch;
+}

package/src/data/shared-data/sd-shared-data-select-button.ts

@@ -32,7 +32,6 @@ import type { SelectModeValue } from "../../controls/select/sd-select";
   template: `
     <sd-modal-select-button
       [(value)]="value"
-      [(selectedItems)]="_selectedItems"
       [modal]="modal()"
       [disabled]="disabled()"
       [required]="required()"

package/src/data/shared-data/sd-shared-data-select-list.ts

@@ -234,7 +234,7 @@ export class SdSharedDataSelectList<
       ...modalInfo,
       inputs: {
         selectMode: "single",
-        selectedItemKeys: [this.selectedItem()]
+        selectedKeys: [this.selectedItem()]
           .filter((v): v is NonNullable<typeof v> => v != null)
           .map((item) => item.__valueKey),
         ...modalInfo.inputs,
@@ -243,7 +243,7 @@ export class SdSharedDataSelectList<
 
     if (result != null) {
       const newSelectedItem = this.items().find(
-        (item) => item.__valueKey === result.selectedItemKeys[0],
+        (item) => item.__valueKey === result.selectedKeys[0],
       );
       this.selectedItem.set(newSelectedItem);
     }

package/src/data/shared-data/sd-shared-data-select.ts

@@ -347,7 +347,7 @@ export class SdSharedDataSelect<
       ...modalInfo,
       inputs: {
         selectMode: this.selectMode(),
-        selectedItemKeys: this.selectedKeys(),
+        selectedKeys: this.selectedKeys(),
         ...modalInfo.inputs,
       } as any,
     });
@@ -355,8 +355,8 @@ export class SdSharedDataSelect<
     if (result != null) {
       const newValue =
         this.selectMode() === "multi"
-          ? result.selectedItemKeys
-          : result.selectedItemKeys[0];
+          ? result.selectedKeys
+          : result.selectedKeys[0];
       this.value.set(newValue);
     }
   }

package/src/data/sheet/injectSheetSelectRowIndicator.ts

@@ -1,23 +1,33 @@
 import { afterEveryRender, type Signal } from "@angular/core";
+import { obj } from "@simplysm/core-common";
 import type { injectSheetDomAccessor } from "./injectSheetDomAccessor";
 
-export function injectSheetSelectRowIndicator<T>(options: {
+function isKeyEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  return obj.equal(a, b);
+}
+
+export function injectSheetSelectRowIndicator<TItem, TKey>(options: {
   domAccessor: ReturnType<typeof injectSheetDomAccessor>;
-  selectedItems: Signal<T[]>;
-  displayItems: Signal<T[]>;
+  selectedKeys: Signal<NonNullable<TKey>[]>;
+  displayItems: Signal<TItem[]>;
+  trackByFn: Signal<(item: TItem, index: number) => TKey>;
 }) {
   afterEveryRender(() => {
     const containerEl = options.domAccessor.getSelectRowIndicatorContainer();
 
-    if (options.selectedItems().length <= 0) {
+    if (options.selectedKeys().length <= 0) {
       containerEl.innerHTML = "";
       containerEl.style.display = "none";
       return;
     }
 
-    const selectedTrInfos = options.selectedItems()
-      .map((item) => {
-        const r = options.displayItems().indexOf(item);
+    const trackByFn = options.trackByFn();
+    const displayItems = options.displayItems();
+
+    const selectedTrInfos = options.selectedKeys()
+      .map((key) => {
+        const r = displayItems.findIndex((item, i) => isKeyEqual(trackByFn(item, i), key));
         return getTrInfo(r);
       })
       .filter((info): info is NonNullable<typeof info> => info != null);

package/src/data/sheet/sd-sheet.ts

@@ -55,7 +55,15 @@ import { SdEvents } from "../../core/events/sd-events";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgTemplateOutlet, SdCheckbox, NgIcon, SdPagination, SdAnchor, SdButton, SdResizeDirective],
+  imports: [
+    NgTemplateOutlet,
+    SdCheckbox,
+    NgIcon,
+    SdPagination,
+    SdAnchor,
+    SdButton,
+    SdResizeDirective,
+  ],
   hostDirectives: [
     { directive: SdEvents, outputs: ["keydown.capture", "focus.capture", "blur.capture"] },
   ],
@@ -69,7 +77,7 @@ import { SdEvents } from "../../core/events/sd-events";
     "(blur.capture)": "onBlurCapture($event)",
   },
   template: `
-    @if ((key() || effectivePageCount() > 0) && !hideConfigBar()) {
+    @if ((key() || effectivePageCount() > 1) && !hideConfigBar()) {
       <div class="_tool flex-row gap-sm p-xs">
         @if (key()) {
           <sd-button [theme]="'link-primary'" [size]="'sm'" (click)="onConfigButtonClick()">
@@ -138,13 +146,13 @@ import { SdEvents } from "../../core/events/sd-events";
               @for (cell of row; track $index) {
                 @if (!cell.isLastRow) {
                   <th
-                    [class._fixed]="cell.colDef?.fixed"
+                    [class._fixed]="cell.fixed"
                     [attr.colspan]="cell.colspan > 1 ? cell.colspan : null"
                     [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
                     [attr.data-c]="cell.colIndex"
                     [attr.title]="cell.text"
                     [style.left.px]="
-                      cell.colDef?.fixed ? fixing.fixedLeftMap().get(cell.colIndex) : null
+                      cell.fixed ? fixing.fixedLeftMap().get(cell.colIndex) : null
                     "
                   >
                     <div class="_p-sheet">
@@ -153,13 +161,14 @@ import { SdEvents } from "../../core/events/sd-events";
                   </th>
                 } @else {
                   <th
-                    [class._fixed]="cell.colDef?.fixed"
+                    [class._fixed]="cell.fixed"
                     class="_last-depth"
                     [class._sort]="cell.colDef && !cell.colDef.disableSorting"
                     [attr.colspan]="cell.colspan > 1 ? cell.colspan : null"
                     [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
                     [attr.data-c]="cell.colIndex"
                     [attr.title]="cell.colDef?.tooltip ?? cell.text"
+                    [attr.aria-sort]="getAriaSortValue(cell)"
                     [class.help]="cell.colDef?.tooltip"
                     [style]="getHeaderCellStyle(cell)"
                     (sdResize)="onFixedCellResize($event, cell.colIndex)"
@@ -231,7 +240,11 @@ import { SdEvents } from "../../core/events/sd-events";
           }
         </thead>
         <tbody>
-          @for (item of displayItems(); track trackByFn()(item, $index); let rowIdx = $index) {
+          @for (
+            item of displayItems();
+            track trackByFn()(item, $index) ?? item;
+            let rowIdx = $index
+          ) {
             <tr
               [attr.data-r]="rowIdx"
               (click)="onRowClick(item)"
@@ -254,15 +267,16 @@ import { SdEvents } from "../../core/events/sd-events";
                     [inline]="true"
                     [theme]="'white'"
                     [disabled]="_selectable !== true"
-                    [attr.title]="_selectable"
+                    [attr.title]="getSelectableTooltip(item)"
                   />
                 } @else if (selectMode() === "single") {
                   @let _selectable = selection.getSelectable(item);
                   @if (_selectable === true && selection.getCanChangeFn(item)) {
                     <sd-anchor
                       [theme]="selection.isSelected(item) ? 'primary' : 'gray'"
-                      (pointerdown)="selection.toggle(item)"
-                      [attr.title]="_selectable"
+                      (pointerdown)="$event.stopPropagation(); selection.toggle(item)"
+                      (click)="$event.stopPropagation()"
+                      [attr.title]="getSelectableTooltip(item)"
                     >
                       <ng-icon [svg]="icons.tablerArrowRight" />
                     </sd-anchor>
@@ -288,6 +302,7 @@ import { SdEvents } from "../../core/events/sd-events";
                       [svg]="icons.tablerCaretRight"
                       [style.transform]="isExpanded(item) ? 'rotate(90deg)' : undefined"
                       [class.tx-theme-primary-default]="isExpanded(item)"
+                      [attr.aria-expanded]="getAriaExpanded(item)"
                       (click)="onExpandClick($event, item)"
                     />
                   }
@@ -567,15 +582,15 @@ import { SdEvents } from "../../core/events/sd-events";
     `,
   ],
 })
-export class SdSheet<T> {
+export class SdSheet<TItem, TKey> {
   // Inputs
   key = input<string>();
-  items = input<T[]>([]);
-  trackByFn = input<(item: T, index: number) => unknown>((item) => item);
+  items = input<TItem[]>([]);
+  trackByFn = input.required<(item: TItem, index: number) => TKey>();
   selectMode = input<"single" | "multi">();
   autoSelect = input<"click" | "focus">();
-  getItemSelectableFn = input<(item: T) => boolean | string>();
-  getChildrenFn = input<(item: T, index: number) => T[] | undefined>();
+  getItemSelectableFn = input<(item: TItem) => boolean | string>();
+  getChildrenFn = input<(item: TItem, index: number) => TItem[] | undefined>();
   useAutoSort = input(false, { transform: booleanAttribute });
   visiblePageCount = input(10);
   totalPageCount = input(0);
@@ -583,26 +598,27 @@ export class SdSheet<T> {
   focusMode = input<"row" | "cell">("cell");
   inset = input(false, { transform: booleanAttribute });
   contentStyle = input<string>();
-  getItemCellClassFn = input<(item: T, colKey: string) => string>();
-  getItemCellStyleFn = input<(item: T, colKey: string) => string | undefined>();
+  getItemCellClassFn = input<(item: TItem, colKey: string) => string>();
+  getItemCellStyleFn = input<(item: TItem, colKey: string) => string | undefined>();
   hideConfigBar = input(false, { transform: booleanAttribute });
 
   // Outputs
-  itemKeydown = output<SdSheetItemKeydownEventParam<T>>();
-  cellKeydown = output<SdSheetCellKeydownEventParam<T>>();
+  itemKeydown = output<SdSheetItemKeydownEventParam<TItem>>();
+  cellKeydown = output<SdSheetCellKeydownEventParam<TItem>>();
 
   // Models
-  selectedItems = model<T[]>([]);
-  expandedItems = model<T[]>([]);
+  selectedKeys = model<NonNullable<TKey>[]>([]);
+  expandedItems = model<TItem[]>([]);
   sorts = model<SortingDef[]>([]); // Re-exported from useSortingManager
   currentPage = model(0);
 
   // Content query
   columnControls = contentChildren(SdSheetColumn);
-  columnControlsInput = input<readonly SdSheetColumn[]>();
-  private readonly _effectiveColumnControls = computed(
-    () => this.columnControlsInput() ?? this.columnControls(),
-  );
+  columnControlsInput = input<readonly SdSheetColumn[]>([]);
+  private readonly _effectiveColumnControls = computed(() => [
+    ...this.columnControls(),
+    ...this.columnControlsInput(),
+  ]);
 
   // Injected providers
   private readonly _sdModal = inject(SdModalProvider);
@@ -638,7 +654,7 @@ export class SdSheet<T> {
   });
 
   // Display pipeline (sort → page → expand → display)
-  private readonly _pipeline = useSheetDisplayPipeline<T>({
+  private readonly _pipeline = useSheetDisplayPipeline<TItem>({
     items: this.items,
     useAutoSort: this.useAutoSort,
     sortItems: (items) => this.sorting.sort(items),
@@ -662,7 +678,7 @@ export class SdSheet<T> {
   });
 
   // Cell styling composable
-  private readonly _styling = useSheetCellStyling<T>({
+  private readonly _styling = useSheetCellStyling<TItem>({
     columnDefs: this.layout.columnDefs,
     fixedLeftMap: this.fixing.fixedLeftMap,
     getItemCellStyleFn: this.getItemCellStyleFn,
@@ -683,16 +699,17 @@ export class SdSheet<T> {
   });
 
   // Select row indicator
-  private readonly _selectRowIndicator = injectSheetSelectRowIndicator<T>({
+  private readonly _selectRowIndicator = injectSheetSelectRowIndicator<TItem, TKey>({
     domAccessor: this.domAccessor,
-    selectedItems: this.selectedItems,
+    selectedKeys: this.selectedKeys,
     displayItems: this.displayItems,
+    trackByFn: this.trackByFn,
   });
 
   // Selection manager
-  selection = useSelectionManager<T>({
+  selection = useSelectionManager<TItem, TKey>({
     displayItems: this.displayItems,
-    selectedItems: this.selectedItems,
+    selectedKeys: this.selectedKeys,
     selectMode: this.selectMode,
     getItemSelectableFn: this.getItemSelectableFn,
     trackByFn: this.trackByFn,
@@ -731,25 +748,25 @@ export class SdSheet<T> {
     return col?.summaryTplRef() ?? null;
   }
 
-  getSelectableTooltip(item: T): string | null {
+  getSelectableTooltip(item: TItem): string | undefined {
     const result = this.selection.getSelectable(item);
     if (typeof result === "string") return result;
-    return null;
+    return undefined;
   }
 
-  onRowClick(item: T): void {
+  onRowClick(item: TItem): void {
     if (this.autoSelect() === "click") {
       this.selection.select(item);
     }
   }
 
-  onCellClick(event: Event, item: T): void {
+  onCellClick(event: Event, item: TItem): void {
     if (this.autoSelect() === "click") {
       this.selection.select(item);
     }
   }
 
-  onCellFocus(item: T): void {
+  onCellFocus(item: TItem): void {
     if (this.autoSelect() === "focus") {
       this.selection.select(item);
     }
@@ -766,25 +783,25 @@ export class SdSheet<T> {
     return this.sorting.defMap().get(key) ?? null;
   }
 
-  getItemDef(item: T) {
+  getItemDef(item: TItem) {
     return this.expanding.def(item);
   }
 
   // PERF-005: Set-based lookup for O(1) isExpanded check
   private readonly _expandedSet = computed(() => new Set(this.expandedItems()));
 
-  isExpanded(item: T): boolean {
+  isExpanded(item: TItem): boolean {
     return this._expandedSet().has(item);
   }
 
-  getAriaExpanded(item: T): string | null {
+  getAriaExpanded(item: TItem): string | null {
     if (this.getChildrenFn() == null) return null;
     const def = this.getItemDef(item);
     if (!def.hasChildren) return null;
     return this.isExpanded(item) ? "true" : "false";
   }
 
-  onExpandClick(event: Event, item: T): void {
+  onExpandClick(event: Event, item: TItem): void {
     event.stopPropagation();
     this.expanding.toggle(item);
   }
@@ -819,7 +836,7 @@ export class SdSheet<T> {
   }
 
   onTableResize(event: SdResizeEvent): void {
-    if (!event.widthChanged) return;
+    if (!event.widthChanged && !event.heightChanged) return;
     this._focusIndicator.redraw();
     this._selectRowIndicator.redraw();
   }
@@ -888,11 +905,11 @@ export class SdSheet<T> {
     );
   }
 
-  onItemKeydown(event: KeyboardEvent, item: T): void {
+  onItemKeydown(event: KeyboardEvent, item: TItem): void {
     this.itemKeydown.emit({ item, event });
   }
 
-  onCellKeydown(event: KeyboardEvent, item: T, colKey: string): void {
+  onCellKeydown(event: KeyboardEvent, item: TItem, colKey: string): void {
     this.cellKeydown.emit({ item, key: colKey, event });
   }