@simplysm/angular 14.0.41 → 14.0.42

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

@@ -13,6 +13,7 @@ import {
 import { SdButton } from "../../controls/button/sd-button";
 import { SdForm } from "../../controls/form/sd-form";
 import { SdSheetColumn } from "../sheet/sd-sheet-column";
+import { SdSheetColumnCellTemplate } from "../sheet/sd-sheet-column-cell-template";
 import { SdSheet } from "../sheet/sd-sheet";
 import { injectParent } from "../../core/injectParent";
 import { FormatPipe } from "../../core/format.pipe";
@@ -45,6 +46,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
     SdButton,
     SdSheet,
     SdSheetColumn,
+    SdSheetColumnCellTemplate,
     NgTemplateOutlet,
     SdBaseContainer,
     FormatPipe,
@@ -214,7 +216,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                 parent.itemPropInfo.isDeleted
               ) {
                 <sd-sheet-column [fixed]="true" [key]="parent.itemPropInfo.isDeleted!">
-                  <ng-template #cellTpl let-item>
+                  <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
                       <sd-anchor
                         [theme]="'danger'"
@@ -244,12 +246,19 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   [key]="columnControl.key()"
                   [fixed]="columnControl.fixed()"
                   [header]="columnControl.header()"
+                  [headerStyle]="columnControl.headerStyle()"
+                  [tooltip]="columnControl.tooltip()"
                   [width]="columnControl.width()"
                   [disableSorting]="columnControl.disableSorting()"
                   [disableResizing]="columnControl.disableResizing()"
                   [hidden]="columnControl.hidden()"
                   [collapse]="columnControl.collapse()"
                 >
+                  @if (columnControl.headerTplRef()) {
+                    <ng-template #headerTpl>
+                      <ng-template [ngTemplateOutlet]="columnControl.headerTplRef()!" />
+                    </ng-template>
+                  }
                   @if (columnControl.summaryTplRef()) {
                     <ng-template #summaryTpl>
                       <ng-template [ngTemplateOutlet]="columnControl.summaryTplRef()!" />
@@ -257,8 +266,8 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   }
 
                   <ng-template
-                    #cellTpl
-                    let-item
+                    [cell]="parent.items()"
+                    let-item="item"
                     let-index="index"
                     let-depth="depth"
                     let-edit="edit"
@@ -311,7 +320,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   [key]="parent.itemPropInfo.lastModifiedAt!"
                   [hidden]="true"
                 >
-                  <ng-template #cellTpl let-item>
+                  <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
                       {{
                         item[parent.itemPropInfo.lastModifiedAt!]
@@ -327,7 +336,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   [key]="parent.itemPropInfo.lastModifiedBy!"
                   [hidden]="true"
                 >
-                  <ng-template #cellTpl let-item>
+                  <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
                       {{ item[parent.itemPropInfo.lastModifiedBy!] }}
                     </div>

package/src/data/sheet/sd-sheet-column-cell-template.ts

@@ -0,0 +1,17 @@
+import { Directive, input } from "@angular/core";
+import type { SdSheetCellContext } from "./sd-sheet-column";
+
+@Directive({
+  selector: "ng-template[cell]",
+  standalone: true,
+})
+export class SdSheetColumnCellTemplate<T> {
+  cell = input.required<T[]>();
+
+  static ngTemplateContextGuard<TContextItem>(
+    _dir: SdSheetColumnCellTemplate<TContextItem>,
+    _ctx: unknown,
+  ): _ctx is SdSheetCellContext<TContextItem> {
+    return true;
+  }
+}

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

@@ -5,10 +5,11 @@ import {
   input,
   TemplateRef,
 } from "@angular/core";
+import { SdSheetColumnCellTemplate } from "./sd-sheet-column-cell-template";
 
-export interface SdSheetCellContext {
-  $implicit: unknown;
-  item: unknown;
+export interface SdSheetCellContext<T = unknown> {
+  $implicit: T;
+  item: T;
   index: number;
   depth: number;
   edit: boolean;
@@ -18,9 +19,11 @@ export interface SdSheetCellContext {
   selector: "sd-sheet-column",
   standalone: true,
 })
-export class SdSheetColumn {
+export class SdSheetColumn<T = unknown> {
   key = input.required<string>();
   header = input<string | string[]>("");
+  headerStyle = input<string>();
+  tooltip = input<string>();
   width = input<string>();
   fixed = input(false, { transform: booleanAttribute });
   hidden = input(false, { transform: booleanAttribute });
@@ -29,6 +32,10 @@ export class SdSheetColumn {
   disableResizing = input(false, { transform: booleanAttribute });
   ordering = input(0);
 
-  cellTplRef = contentChild<TemplateRef<SdSheetCellContext>>("cellTpl");
+  cellTplRef = contentChild.required<any, TemplateRef<SdSheetCellContext<T>>>(
+    SdSheetColumnCellTemplate,
+    { read: TemplateRef },
+  );
+  headerTplRef = contentChild<TemplateRef<void>>("headerTpl");
   summaryTplRef = contentChild<TemplateRef<void>>("summaryTpl");
 }

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

@@ -99,10 +99,16 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
                   [attr.colspan]="cell.colspan > 1 ? cell.colspan : null"
                   [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
                   [attr.aria-sort]="getAriaSortValue(cell)"
+                  [attr.title]="cell.colDef?.tooltip ?? cell.text"
+                  [class.help]="cell.colDef?.tooltip"
                   [style]="getHeaderCellStyle(cell)"
                   (click)="onHeaderClick($event, cell)"
                 >
-                  <span>{{ cell.text }}</span>
+                  @if (cell.colDef && getColumnHeaderTpl(cell.colDef.key); as headerTpl) {
+                    <ng-template [ngTemplateOutlet]="headerTpl" />
+                  } @else {
+                    <span>{{ cell.text }}</span>
+                  }
                   @if (cell.colDef && getSortDef(cell.colDef.key); as sortDef) {
                     <ng-icon
                       class="_sort-icon"
@@ -463,6 +469,11 @@ export class SdSheet<T> {
     return map;
   });
 
+  getColumnHeaderTpl(key: string) {
+    const col = this._columnControlMap().get(key);
+    return col?.headerTplRef() ?? null;
+  }
+
   getColumnCellTpl(key: string) {
     const col = this._columnControlMap().get(key);
     return col?.cellTplRef() ?? null;

package/src/data/sheet/types.ts

@@ -1,6 +1,8 @@
 export interface SdSheetColumnDef {
   key: string;
   header: string | string[];
+  headerStyle: string | undefined;
+  tooltip: string | undefined;
   width: string | undefined;
   fixed: boolean;
   hidden: boolean;

package/src/data/sheet/useSheetCellStyling.ts

@@ -60,7 +60,11 @@ export function useSheetCellStyling<T>(options: {
 
   function getHeaderCellStyle(cell: SdSheetHeaderDef): string | null {
     if (cell.colDef == null) return null;
-    return headerColumnStyles().get(cell.colDef.key) ?? null;
+    const parts: string[] = [];
+    const baseStyle = headerColumnStyles().get(cell.colDef.key);
+    if (baseStyle != null) parts.push(baseStyle);
+    if (cell.colDef.headerStyle != null) parts.push(cell.colDef.headerStyle);
+    return parts.length > 0 ? parts.join("; ") : null;
   }
 
   function getCellStyle(item: T, colDef: SdSheetColumnDef): string | null {

package/src/data/sheet/useSheetLayoutEngine.ts

@@ -17,6 +17,8 @@ export function useSheetLayoutEngine(options: {
         return {
           key,
           header: col.header(),
+          headerStyle: col.headerStyle(),
+          tooltip: col.tooltip(),
           width: cfgCol?.width ?? col.width(),
           fixed: cfgCol?.fixed ?? col.fixed(),
           hidden: cfgCol?.hidden ?? col.hidden(),

package/src/index.ts

@@ -224,7 +224,8 @@ export {
 
 // data/sheet
 export { SdSheet } from "./data/sheet/sd-sheet";
-export { SdSheetColumn } from "./data/sheet/sd-sheet-column";
+export { SdSheetColumn, type SdSheetCellContext } from "./data/sheet/sd-sheet-column";
+export { SdSheetColumnCellTemplate } from "./data/sheet/sd-sheet-column-cell-template";
 export { SdSheetConfigModal } from "./data/sheet/sd-sheet-config.modal";
 export type {
   SdSheetColumnDef,