@simplysm/angular 14.0.1 → 14.0.4

package/src/ui/data/sheet/types.ts

@@ -0,0 +1,37 @@
+export interface ISdSheetColumnDef {
+  key: string;
+  header: string | string[];
+  width: string | undefined;
+  fixed: boolean;
+  hidden: boolean;
+  collapse: boolean;
+  disableSorting: boolean;
+  disableResizing: boolean;
+  ordering: number;
+}
+
+export interface ISdSheetHeaderDef {
+  text: string;
+  colspan: number;
+  rowspan: number;
+  isLastRow: boolean;
+  colDef: ISdSheetColumnDef | undefined;
+}
+
+export interface ISdSheetConfig {
+  columnRecord: Record<
+    string,
+    {
+      width?: string;
+      hidden?: boolean;
+      fixed?: boolean;
+      ordering?: number;
+    }
+  >;
+}
+
+export interface ISdSheetItemKeydownEventParam<T> {
+  item: T;
+  key?: string;
+  event: KeyboardEvent;
+}

package/src/ui/data/sheet/useSheetCellAgent.ts

@@ -0,0 +1,267 @@
+import { signal } from "@angular/core";
+import type { useSheetDomAccessor } from "./useSheetDomAccessor";
+
+export function useSheetCellAgent(options: {
+  domAccessor: ReturnType<typeof useSheetDomAccessor>;
+}) {
+  const editModeCellAddr = signal<{ r: number; c: number } | undefined>(undefined);
+  let _isTransitioning = false;
+
+  function isCellEditMode(addr: { r: number; c: number }): boolean {
+    const current = editModeCellAddr();
+    if (current == null) return false;
+    return current.r === addr.r && current.c === addr.c;
+  }
+
+  function getCellAddr(el: HTMLTableCellElement): { r: number; c: number } {
+    const r = parseInt(el.getAttribute("data-r") ?? "-1", 10);
+    const c = parseInt(el.getAttribute("data-c") ?? "-1", 10);
+    return { r, c };
+  }
+
+  function _enterEditMode(r: number, c: number): void {
+    const cell = options.domAccessor.getCell(r, c);
+    if (cell == null) return;
+    editModeCellAddr.set({ r, c });
+    // Focus first focusable child after edit mode is set
+    queueMicrotask(() => {
+      const focusable = cell.findFirstFocusableChild();
+      if (focusable !== undefined) {
+        focusable.focus();
+      }
+    });
+  }
+
+  function _exitEditMode(): void {
+    editModeCellAddr.set(undefined);
+  }
+
+  function _getClosestDataCell(el: Element): HTMLTableCellElement | null {
+    return el.closest<HTMLTableCellElement>("td[data-c]");
+  }
+
+  function _moveToCell(r: number, c: number, enterEdit: boolean): void {
+    const cell = options.domAccessor.getCell(r, c);
+    if (cell == null) return;
+    _isTransitioning = true;
+    _exitEditMode();
+    if (enterEdit) {
+      editModeCellAddr.set({ r, c });
+      queueMicrotask(() => {
+        _isTransitioning = false;
+        const targetCell = options.domAccessor.getCell(r, c);
+        if (targetCell == null) return;
+        const focusable = targetCell.findFirstFocusableChild();
+        if (focusable !== undefined) {
+          focusable.focus();
+        }
+      });
+    } else {
+      _isTransitioning = false;
+      cell.focus();
+    }
+  }
+
+  function _isMultiLineElement(el: Element): boolean {
+    return (
+      el.tagName === "TEXTAREA" ||
+      (el as HTMLElement).isContentEditable === true
+    );
+  }
+
+  async function handleKeydownCapture(event: KeyboardEvent): Promise<void> {
+    const target = event.target as HTMLElement;
+
+    // F2 to enter edit mode
+    if (event.key === "F2") {
+      const td = _getClosestDataCell(target);
+      if (td == null) return;
+      const addr = getCellAddr(td);
+      if (!isCellEditMode(addr)) {
+        event.preventDefault();
+        _enterEditMode(addr.r, addr.c);
+        return;
+      }
+    }
+
+    // Escape to exit edit mode
+    if (event.key === "Escape") {
+      const currentAddr = editModeCellAddr();
+      if (currentAddr != null) {
+        event.preventDefault();
+        const cell = options.domAccessor.getCell(currentAddr.r, currentAddr.c);
+        _exitEditMode();
+        cell?.focus();
+        return;
+      }
+    }
+
+    // Enter handling
+    if (event.key === "Enter") {
+      const currentAddr = editModeCellAddr();
+      if (currentAddr != null) {
+        const isMultiLine = _isMultiLineElement(target);
+        if (isMultiLine) {
+          // In multiline, only Ctrl+Alt+Enter moves to next row
+          if (event.ctrlKey && event.altKey) {
+            event.preventDefault();
+            _moveToCell(currentAddr.r + 1, currentAddr.c, true);
+            return;
+          }
+          // Otherwise, default behavior (newline)
+          return;
+        }
+        // Normal input: Enter moves to next row
+        event.preventDefault();
+        _moveToCell(currentAddr.r + 1, currentAddr.c, true);
+        return;
+      }
+    }
+
+    // Arrow key handling (non-edit mode, on td)
+    if (
+      (event.key === "ArrowDown" ||
+        event.key === "ArrowUp" ||
+        event.key === "ArrowLeft" ||
+        event.key === "ArrowRight") &&
+      editModeCellAddr() == null
+    ) {
+      const td = _getClosestDataCell(target);
+      if (td == null) return;
+      if (td !== target) return; // Only handle when td itself is focused
+      const addr = getCellAddr(td);
+
+      event.preventDefault();
+      switch (event.key) {
+        case "ArrowDown":
+          _moveToCell(addr.r + 1, addr.c, false);
+          break;
+        case "ArrowUp":
+          _moveToCell(addr.r - 1, addr.c, false);
+          break;
+        case "ArrowRight":
+          _moveToCell(addr.r, addr.c + 1, false);
+          break;
+        case "ArrowLeft":
+          _moveToCell(addr.r, addr.c - 1, false);
+          break;
+      }
+      return;
+    }
+
+    // Ctrl+Alt+Arrow in edit mode
+    if (
+      (event.key === "ArrowDown" ||
+        event.key === "ArrowUp" ||
+        event.key === "ArrowLeft" ||
+        event.key === "ArrowRight") &&
+      event.ctrlKey &&
+      event.altKey
+    ) {
+      const currentAddr = editModeCellAddr();
+      if (currentAddr != null) {
+        event.preventDefault();
+        switch (event.key) {
+          case "ArrowDown":
+            _moveToCell(currentAddr.r + 1, currentAddr.c, true);
+            break;
+          case "ArrowUp":
+            _moveToCell(currentAddr.r - 1, currentAddr.c, true);
+            break;
+          case "ArrowRight":
+            _moveToCell(currentAddr.r, currentAddr.c + 1, true);
+            break;
+          case "ArrowLeft":
+            _moveToCell(currentAddr.r, currentAddr.c - 1, true);
+            break;
+        }
+        return;
+      }
+    }
+
+    // Ctrl+C (copy)
+    if (event.key === "c" && event.ctrlKey && !event.altKey && !event.shiftKey) {
+      const td = _getClosestDataCell(target);
+      if (td == null) return;
+      if (td !== target) return; // Only when td itself is focused
+
+      const selection = window.getSelection();
+      if (selection != null && selection.toString() !== "") {
+        // Text selected — let browser handle it
+        return;
+      }
+
+      event.preventDefault();
+      const text = td.textContent;
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+
+    // Ctrl+V (paste)
+    if (event.key === "v" && event.ctrlKey && !event.altKey && !event.shiftKey) {
+      const td = _getClosestDataCell(target);
+      if (td == null) return;
+      if (td !== target) return; // Only when td itself is focused
+
+      event.preventDefault();
+      const text = await navigator.clipboard.readText();
+      // Enter edit mode and paste
+      const addr = getCellAddr(td);
+      _enterEditMode(addr.r, addr.c);
+
+      // Wait for edit mode to render, then paste
+      queueMicrotask(() => {
+        const cell = options.domAccessor.getCell(addr.r, addr.c);
+        if (cell == null) return;
+        const inputEl = cell.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+          "input, textarea",
+        );
+        if (inputEl != null) {
+          inputEl.value = text;
+          inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+      });
+      return;
+    }
+  }
+
+  function handleCellDoubleClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    const td = _getClosestDataCell(target);
+    if (td == null) return;
+    const addr = getCellAddr(td);
+    _enterEditMode(addr.r, addr.c);
+  }
+
+  function handleBlurCapture(event: FocusEvent): void {
+    if (_isTransitioning) return;
+    const currentAddr = editModeCellAddr();
+    if (currentAddr == null) return;
+
+    const relatedTarget = event.relatedTarget as HTMLElement | null;
+    if (relatedTarget == null) {
+      _exitEditMode();
+      return;
+    }
+
+    // Check if the new focus target is still within the same cell
+    const cell = options.domAccessor.getCell(currentAddr.r, currentAddr.c);
+    if (cell == null) {
+      _exitEditMode();
+      return;
+    }
+
+    if (!cell.contains(relatedTarget)) {
+      _exitEditMode();
+    }
+  }
+
+  return {
+    editModeCellAddr,
+    isCellEditMode,
+    getCellAddr,
+    handleKeydownCapture,
+    handleCellDoubleClick,
+    handleBlurCapture,
+  };
+}

package/src/ui/data/sheet/useSheetColumnFixing.ts

@@ -0,0 +1,37 @@
+import { computed, type Signal } from "@angular/core";
+import type { ISdSheetColumnDef } from "./types";
+
+export function useSheetColumnFixing(options: {
+  columnDefs: Signal<ISdSheetColumnDef[]>;
+}) {
+  const fixedLeftMap = computed((): Map<string, number> => {
+    const map = new Map<string, number>();
+    let accumulatedLeft = 0;
+
+    for (const colDef of options.columnDefs()) {
+      if (!colDef.fixed) continue;
+      if (colDef.collapse) continue;
+
+      map.set(colDef.key, accumulatedLeft);
+
+      const width = colDef.width;
+      if (width != null && width.endsWith("px")) {
+        const px = parseFloat(width);
+        if (!Number.isNaN(px)) {
+          accumulatedLeft += px;
+        }
+      }
+    }
+
+    return map;
+  });
+
+  const hasFixed = computed((): boolean => {
+    return fixedLeftMap().size > 0;
+  });
+
+  return {
+    fixedLeftMap,
+    hasFixed,
+  };
+}

package/src/ui/data/sheet/useSheetDomAccessor.ts

@@ -0,0 +1,62 @@
+import { ElementRef, inject } from "@angular/core";
+
+export function useSheetDomAccessor() {
+  const elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  function getHostEl(): HTMLElement {
+    return elRef.nativeElement;
+  }
+
+  function getContainer(): HTMLElement {
+    return elRef.nativeElement.querySelector("._container")!;
+  }
+
+  function getTable(): HTMLTableElement {
+    return elRef.nativeElement.querySelector("table")!;
+  }
+
+  function getTHead(): HTMLTableSectionElement {
+    return getTable().querySelector("thead")!;
+  }
+
+  function getRow(r: number): HTMLTableRowElement | null {
+    const tbody = getTable().querySelector("tbody");
+    if (tbody == null) return null;
+    const rows = tbody.querySelectorAll<HTMLTableRowElement>("tr");
+    return rows[r] ?? null;
+  }
+
+  function getCell(r: number, c: number): HTMLTableCellElement | null {
+    const row = getRow(r);
+    if (row == null) return null;
+    const cells = row.querySelectorAll<HTMLTableCellElement>("td[data-c]");
+    for (const cell of cells) {
+      if (cell.getAttribute("data-c") === String(c)) {
+        return cell;
+      }
+    }
+    return null;
+  }
+
+  function getColumnResizeIndicator(): HTMLElement {
+    return elRef.nativeElement.querySelector("._resize-indicator")!;
+  }
+
+  function getLastDepthFixedHeaders(): HTMLElement[] {
+    const thead = getTHead();
+    const lastRow = thead.querySelector("tr:last-child");
+    if (lastRow == null) return [];
+    return Array.from(lastRow.querySelectorAll<HTMLElement>("th[style*='sticky']"));
+  }
+
+  return {
+    getHostEl,
+    getContainer,
+    getTable,
+    getTHead,
+    getRow,
+    getCell,
+    getColumnResizeIndicator,
+    getLastDepthFixedHeaders,
+  };
+}

package/src/ui/data/sheet/useSheetLayoutEngine.ts

@@ -0,0 +1,143 @@
+import { computed, type Signal } from "@angular/core";
+import type { SdSheetColumnDirective } from "./sd-sheet-column.directive";
+import type { ISdSheetColumnDef, ISdSheetConfig, ISdSheetHeaderDef } from "./types";
+
+export function useSheetLayoutEngine(options: {
+  columnControls: Signal<readonly SdSheetColumnDirective[]>;
+  config: Signal<ISdSheetConfig | undefined>;
+}) {
+  const columnDefs = computed((): ISdSheetColumnDef[] => {
+    const cfg = options.config();
+    const cols = options.columnControls();
+
+    return cols
+      .map((col): ISdSheetColumnDef => {
+        const key = col.key();
+        const cfgCol = cfg?.columnRecord[key];
+        return {
+          key,
+          header: col.header(),
+          width: cfgCol?.width ?? col.width(),
+          fixed: cfgCol?.fixed ?? col.fixed(),
+          hidden: cfgCol?.hidden ?? col.hidden(),
+          collapse: col.collapse(),
+          disableSorting: col.disableSorting(),
+          disableResizing: col.disableResizing(),
+          ordering: cfgCol?.ordering ?? col.ordering(),
+        };
+      })
+      .filter((def) => !def.hidden)
+      .sort((a, b) => a.ordering - b.ordering);
+  });
+
+  const hasSummary = computed((): boolean => {
+    return options.columnControls().some((col) => col.summaryTplRef() != null);
+  });
+
+  const headerDepth = computed((): number => {
+    let maxDepth = 1;
+    for (const def of columnDefs()) {
+      const header = def.header;
+      if (Array.isArray(header)) {
+        maxDepth = Math.max(maxDepth, header.length);
+      }
+    }
+    return maxDepth;
+  });
+
+  const headerDefTable = computed((): ISdSheetHeaderDef[][] => {
+    const depth = headerDepth();
+    const cols = columnDefs();
+    const table: ISdSheetHeaderDef[][] = [];
+
+    for (let row = 0; row < depth; row++) {
+      table.push([]);
+    }
+
+    // Track the header array of the first column in each cell span per row
+    const spanStartHeaders: (string[])[] = new Array(depth);
+
+    for (const colDef of cols) {
+      const headers: string[] = Array.isArray(colDef.header)
+        ? colDef.header
+        : [colDef.header];
+
+      for (let row = 0; row < depth; row++) {
+        const isLastRow = row === depth - 1 || row === headers.length - 1;
+        const text = row < headers.length ? headers[row] : headers[headers.length - 1];
+
+        if (isLastRow && row < depth - 1) {
+          const rowspan = depth - row;
+          table[row].push({
+            text,
+            colspan: 1,
+            rowspan,
+            isLastRow: true,
+            colDef,
+          });
+          spanStartHeaders[row] = headers;
+          break;
+        } else {
+          const prevCells = table[row];
+          const lastCell = prevCells.length > 0 ? prevCells[prevCells.length - 1] : undefined;
+
+          let canMerge = false;
+          if (lastCell != null && lastCell.text === text) {
+            if (!lastCell.isLastRow && !isLastRow) {
+              // Non-final rows: also check parent levels match
+              canMerge = true;
+              const prev = spanStartHeaders[row];
+              for (let r = 0; r < row; r++) {
+                const prevText = r < prev.length ? prev[r] : prev[prev.length - 1];
+                const curText = r < headers.length ? headers[r] : headers[headers.length - 1];
+                if (prevText !== curText) {
+                  canMerge = false;
+                  break;
+                }
+              }
+            } else if (lastCell.isLastRow && isLastRow) {
+              // Last-row cells: only merge if all parent levels also match
+              canMerge = true;
+              const prev = spanStartHeaders[row];
+              for (let r = 0; r < row; r++) {
+                const prevText = r < prev.length ? prev[r] : prev[prev.length - 1];
+                const curText = r < headers.length ? headers[r] : headers[headers.length - 1];
+                if (prevText !== curText) {
+                  canMerge = false;
+                  break;
+                }
+              }
+            }
+          }
+
+          if (canMerge && lastCell != null) {
+            lastCell.colspan += 1;
+          } else {
+            table[row].push({
+              text,
+              colspan: 1,
+              rowspan: 1,
+              isLastRow,
+              colDef: isLastRow ? colDef : undefined,
+            });
+            spanStartHeaders[row] = headers;
+          }
+        }
+      }
+    }
+
+    return table;
+  });
+
+  const headerFeatureRowSpan = computed((): number => {
+    return headerDepth();
+  });
+
+  return {
+    columnDefs,
+    hasSummary,
+    headerDefTable,
+    headerDepth,
+    headerFeatureRowSpan,
+  };
+}

package/src/ui/form/button/sd-additional-button.control.ts

@@ -0,0 +1,100 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-additional-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  template: `
+    <div class="_content flex-fill">
+      <ng-content />
+    </div>
+    <div class="_button">
+      <ng-content select="sd-anchor" />
+      <ng-content select="sd-button" />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/mixins";
+
+      sd-additional-button {
+        border: 1px solid var(--trans-light);
+        border-radius: var(--border-radius-default);
+        overflow: hidden;
+
+        > ._content {
+          padding: var(--gap-sm) var(--gap-default);
+        }
+
+        > ._button {
+          display: flex;
+          flex-wrap: nowrap;
+          @include mixins.flex-direction(row);
+
+          > sd-anchor {
+            padding: var(--gap-sm) !important;
+          }
+
+          > sd-button > button {
+            border-left: 1px solid var(--trans-lighter) !important;
+            padding: var(--gap-sm) !important;
+            height: 100%;
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          border-radius: 0;
+          border: none;
+        }
+
+        &[data-sd-size="sm"] {
+          > ._content {
+            padding: var(--gap-xs) var(--gap-default);
+          }
+
+          > ._button {
+            > sd-anchor {
+              padding: var(--gap-xs) var(--gap-sm) !important;
+            }
+
+            > sd-button > button {
+              padding: var(--gap-xs) var(--gap-sm) !important;
+            }
+          }
+        }
+
+        &[data-sd-size="lg"] {
+          > ._content {
+            padding: var(--gap-default) var(--gap-xl);
+          }
+
+          > ._button {
+            > sd-anchor {
+              padding: var(--gap-default) !important;
+            }
+
+            > sd-button > button {
+              padding: var(--gap-default) !important;
+            }
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "class": "flex-row gap-sm",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-inset]": "inset()",
+  },
+})
+export class SdAdditionalButtonControl {
+  size = input<"sm" | "lg">();
+  inset = input(false, { transform: booleanAttribute });
+}