@simplysm/angular 14.0.42 → 14.0.43

package/src/core/toast/sd-toast.ts

@@ -24,14 +24,17 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
     "[attr.aria-live]": "ariaLive()",
   },
   template: `
-    <div class="_block">
-      @if (message() !== undefined) {
-        <div class="_message">{{ message() }}</div>
-      }
-      <ng-content />
+    <div class="_sd-toast-block">
+      <div class="_sd-toast-message">
+        @if (message() != undefined) {
+          {{ message() }}
+        } @else {
+          <ng-content />
+        }
+      </div>
       @if (useProgress()) {
-        <div class="_progress">
-          <div class="_progress-bar" [style.width.%]="progress()"></div>
+        <div class="_sd-toast-progress">
+          <div class="_sd-toast-progress-bar" [style.width.%]="progress()"></div>
         </div>
       }
     </div>
@@ -49,7 +52,7 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
         width: 100%;
         pointer-events: none;
 
-        > ._block {
+        > ._sd-toast-block {
           display: inline-block;
           text-align: left;
           color: var(--text-trans-rev-default);
@@ -59,19 +62,19 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
           @include mixins.elevation(12);
           pointer-events: auto;
 
-          > ._message {
+          > ._sd-toast-message {
             padding: var(--gap-default) var(--gap-lg);
             word-break: break-all;
             white-space: pre-wrap;
           }
 
-          > ._progress {
+          > ._sd-toast-progress {
             background: var(--theme-gray-default);
             height: 4px;
             border-radius: var(--border-radius-xl);
             margin: 0 4px 4px 4px;
 
-            > ._progress-bar {
+            > ._sd-toast-progress-bar {
               border-radius: var(--border-radius-xl);
               height: 4px;
               transition: width 1s ease-out;
@@ -81,14 +84,14 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
 
         @each $theme-name, $theme-map in map.get(variables.$vars, theme) {
           &[data-sd-theme="#{$theme-name}"] {
-            > ._block {
-              background: map.get($theme-map, default);
+            > ._sd-toast-block {
+              background: var(--theme-#{$theme-name}-default);
 
-              > ._progress {
-                background: map.get($theme-map, darker);
+              > ._sd-toast-progress {
+                background: var(--theme-#{$theme-name}-darker);
 
-                > ._progress-bar {
-                  background: map.get($theme-map, lighter);
+                > ._sd-toast-progress-bar {
+                  background: var(--theme-#{$theme-name}-lighter);
                 }
               }
             }
@@ -96,7 +99,7 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
         }
 
         &[data-sd-open="true"] {
-          > ._block {
+          > ._sd-toast-block {
             transform: none;
             transition: var(--animation-duration) ease-out;
             transition-property: transform, opacity;
@@ -105,7 +108,7 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
         }
 
         &[data-sd-open="false"] {
-          > ._block {
+          > ._sd-toast-block {
             transform: translateY(-100%);
             transition: var(--animation-duration) ease-in;
             transition-property: transform, opacity;
@@ -114,17 +117,17 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
         }
 
         @media all and (max-width: variables.$breakpoint-mobile) {
-          > ._block {
+          > ._sd-toast-block {
             border-radius: calc(var(--line-height) / 2);
             transform: translateY(100%);
 
-            > ._message {
+            > ._sd-toast-message {
               padding: var(--gap-xs) var(--gap-default);
             }
           }
 
           &[data-sd-open="false"] {
-            > ._block {
+            > ._sd-toast-block {
               transform: translateY(100%);
             }
           }

package/src/core/validation/setupInvalid.ts

@@ -66,6 +66,7 @@ function createInputHiddenEl(renderer: Renderer2, hostEl: HTMLElement): HTMLInpu
   newEl.name = Uuid.generate().toString();
   newEl.className = "sd-invalid-input";
   newEl.tabIndex = -1;
+  newEl.autocomplete = "off";
   setSafeStyle(renderer, newEl, {
     position: "absolute",
     left: "2px",
@@ -83,7 +84,7 @@ function createInputHiddenEl(renderer: Renderer2, hostEl: HTMLElement): HTMLInpu
     const tabbableElement =
       (isTabbable(hostEl) ? hostEl : hostEl.findFirstTabbableChild()) ??
       hostEl.findTabbableParent();
-    if (tabbableElement !== undefined) {
+    if (tabbableElement != null) {
       tabbableElement.focus();
     }
   });

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

@@ -22,6 +22,7 @@ import {
   tablerRestore,
 } from "@ng-icons/tabler-icons";
 import { SdDataDetailBase } from "./sd-data-detail.base";
+import { SdCommandDirective } from "../../core/commands/sd-command";
 
 export type { SdDataDetailDataInfo } from "./sd-data-detail.base";
 
@@ -41,6 +42,9 @@ export type { SdDataDetailDataInfo } from "./sd-data-detail.base";
     SdAnchor,
     NgIcon,
   ],
+  hostDirectives: [
+    { directive: SdCommandDirective, outputs: ["sdRefreshCommand", "sdSaveCommand"] },
+  ],
   host: {
     "(sdRefreshCommand)": "onRefreshButtonClick()",
     "(sdSaveCommand)": "onSubmitButtonClick()",
@@ -169,18 +173,18 @@ export type { SdDataDetailDataInfo } from "./sd-data-detail.base";
             </div>
           </div>
         </ng-template>
-      }
 
-      <ng-template #modalActionTpl>
-        <sd-anchor
-          [theme]="'gray'"
-          class="p-sm-default"
-          (click)="onRefreshButtonClick()"
-          title="새로고침(CTRL+ALT+L)"
-        >
-          <ng-icon [svg]="icons.tablerRefresh" />
-        </sd-anchor>
-      </ng-template>
+        <ng-template #modalActionTpl>
+          <sd-anchor
+            [theme]="'gray'"
+            class="p-sm-default"
+            (click)="onRefreshButtonClick()"
+            title="새로고침(CTRL+ALT+L)"
+          >
+            <ng-icon [svg]="icons.tablerRefresh" />
+          </sd-anchor>
+        </ng-template>
+      }
     </sd-base-container>
   `,
 })

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

@@ -33,6 +33,7 @@ import {
   tablerUpload,
 } from "@ng-icons/tabler-icons";
 import { SdDataSheetBase } from "./sd-data-sheet.base";
+import { SdCommandDirective } from "../../core/commands/sd-command";
 
 //#region SdDataSheet
 
@@ -53,6 +54,9 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
     SdAnchor,
     NgIcon,
   ],
+  hostDirectives: [
+    { directive: SdCommandDirective, outputs: ["sdRefreshCommand", "sdSaveCommand"] },
+  ],
   host: {
     "(sdRefreshCommand)": "onRefreshButtonClick()",
     "(sdSaveCommand)": "onSubmitButtonClick()",
@@ -211,11 +215,14 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
               [getItemSelectableFn]="parent.getItemSelectableFn"
             >
               @if (
-                parent.editMode === "inline" &&
-                parent.canEdit() &&
-                parent.itemPropInfo.isDeleted
+                parent.editMode === "inline" && parent.canEdit() && parent.itemPropInfo.isDeleted
               ) {
                 <sd-sheet-column [fixed]="true" [key]="parent.itemPropInfo.isDeleted!">
+                  <ng-template #headerTpl>
+                    <div class="p-xs-sm tx-center">
+                      <ng-icon [svg]="deleteIcon()" />
+                    </div>
+                  </ng-template>
                   <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
                       <sd-anchor
@@ -225,16 +232,10 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                       >
                         <ng-icon
                           [svg]="
-                            item[parent.itemPropInfo.isDeleted!]
-                              ? restoreIcon()
-                              : deleteIcon()
+                            item[parent.itemPropInfo.isDeleted!] ? restoreIcon() : deleteIcon()
                           "
                         />
-                        {{
-                          item[parent.itemPropInfo.isDeleted!]
-                            ? (restoreText() ?? "복구")
-                            : (deleteText() ?? "삭제")
-                        }}
+                        {{ item[parent.itemPropInfo.isDeleted!] ? restoreText() : deleteText() }}
                       </sd-anchor>
                     </div>
                   </ng-template>
@@ -322,10 +323,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                 >
                   <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
-                      {{
-                        item[parent.itemPropInfo.lastModifiedAt!]
-                          | format: "yyyy-MM-dd HH:mm"
-                      }}
+                      {{ item[parent.itemPropInfo.lastModifiedAt!] | format: "yyyy-MM-dd HH:mm" }}
                     </div>
                   </ng-template>
                 </sd-sheet-column>

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

@@ -17,15 +17,14 @@ import {
   type SdKanbanDropTarget,
 } from "./sd-kanban-board";
 import { SdKanbanLane } from "./sd-kanban-lane";
-import { SdEvents } from "../../core/events/sd-events";
-import type { SdResizeEvent } from "../../core/events/sd-resize-event.plugin";
+import { SdResizeDirective, type SdResizeEvent } from "../../core/events/sd-resize";
 
 @Component({
   selector: "sd-kanban",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdEvents],
+  imports: [SdResizeDirective],
   host: {
     "[attr.data-sd-dragging-this]": "dragKanban() === thisRef",
     "[attr.data-sd-dragging]": "dragKanban() != null",
@@ -186,9 +185,9 @@ export class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget
   }
 
   onCardResize(event: SdResizeEvent) {
-    const marginBottom = getComputedStyle(event.target as HTMLElement).marginBottom;
+    const marginBottom = getComputedStyle(event.target).marginBottom;
     this.cardHeight.set(
-      (event.target as HTMLElement).clientHeight + (parseInt(marginBottom) || 0),
+      event.target.clientHeight + (parseInt(marginBottom) || 0),
     );
   }
 

package/src/data/permission-table/sd-permission-table.ts

@@ -152,7 +152,7 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
           <td class="_title">
             @if (item.children && item.children.length > 0) {
               <sd-anchor (click)="onPermCollapseToggle(item)">
-                <sd-collapse-icon [open]="!getIsPermCollapsed(item)" />
+                <sd-collapse-icon [open]="getIsPermCollapsed(item)" />
                 {{ item.title }}
               </sd-anchor>
             } @else {
@@ -226,7 +226,7 @@ export class SdPermissionTable<TModule> {
     const walk = (item: SdPermission<TModule>, type: "use" | "edit"): boolean => {
       const key = item.codeChain.join(".") + "." + type;
       const cached = cache.get(key);
-      if (cached !== undefined) return cached;
+      if (cached != null) return cached;
 
       if (item.perms) {
         const result = item.perms.includes(type);
@@ -259,7 +259,7 @@ export class SdPermissionTable<TModule> {
     const walk = (item: SdPermission<TModule>, type: "use" | "edit"): boolean => {
       const key = item.codeChain.join(".") + "." + type;
       const cached = cache.get(key);
-      if (cached !== undefined) return cached;
+      if (cached != null) return cached;
 
       if (item.perms) {
         const permCode = item.codeChain.join(".");
@@ -295,7 +295,7 @@ export class SdPermissionTable<TModule> {
     const walk = (item: SdPermission<TModule>): boolean => {
       const key = item.codeChain.join(".");
       const cached = cache.get(key);
-      if (cached !== undefined) return cached;
+      if (cached != null) return cached;
 
       if (isDisabled) {
         cache.set(key, true);

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

@@ -93,7 +93,7 @@ import { tablerExternalLink } from "@ng-icons/tabler-icons";
         <sd-list [inset]="true" class="flex-fill">
           @if (useUndefined()) {
             <sd-list-item
-              [selected]="selectedItem() === undefined"
+              [selected]="selectedItem() == null"
               (click)="select(undefined)"
               [selectedIcon]="selectedIcon()"
             >

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

@@ -61,6 +61,7 @@ import { matchesSearchText } from "./matchesSearchText";
       [inline]="inline()"
       [size]="size()"
       [items]="rootDisplayItems()"
+      [trackByFn]="trackByFn"
       [selectMode]="selectMode()"
       [contentClass]="selectClass()"
       [multiSelectionDisplayDirection]="multiSelectionDisplayDirection()"
@@ -93,19 +94,13 @@ import { matchesSearchText } from "./matchesSearchText";
           (!required() && selectMode() === "single") ||
           (useUndefined() && selectMode() === "multi")
         ) {
-          <div
-            class="_sd-shared-data-select-undefined"
-            tabindex="0"
-            (click)="onUndefinedClick()"
-            (keydown.enter)="onUndefinedClick()"
-            (keydown.space)="onUndefinedClick(); $event.preventDefault()"
-          >
+          <sd-select-item>
             @if (undefinedTplRef()) {
               <ng-template [ngTemplateOutlet]="undefinedTplRef()!" />
             } @else {
               <span class="tx-theme-gray-default">미지정</span>
             }
-          </div>
+          </sd-select-item>
         }
       </ng-template>
 
@@ -185,6 +180,8 @@ export class SdSharedDataSelect<
     read: TemplateRef,
   });
 
+  trackByFn = (item: TItem): TItem["__valueKey"] => item.__valueKey;
+
   searchText = signal<string | undefined>(undefined);
 
   isDropdownOpen = computed(() => this._selectCtrl()?.dropdownOpen() ?? false);
@@ -224,13 +221,7 @@ export class SdSharedDataSelect<
 
     const orderProp = this.displayOrderKeyProp();
     if (orderProp != null) {
-      result = [...result].sort((a, b) => {
-        const aVal = (a as any)[orderProp];
-        const bVal = (b as any)[orderProp];
-        if (aVal < bVal) return -1;
-        if (aVal > bVal) return 1;
-        return 0;
-      });
+      result = result.orderBy((item) => (item as any)[orderProp]);
     }
 
     return result;
@@ -247,7 +238,7 @@ export class SdSharedDataSelect<
     const check = (item: TItem, index: number): boolean => {
       const key = item.__valueKey;
       const cached = cache.get(key);
-      if (cached !== undefined) return cached;
+      if (cached != null) return cached;
 
       const itemText = getSearchTextFn(item, index);
       if (matchesSearchText(itemText, searchText)) {
@@ -332,13 +323,7 @@ export class SdSharedDataSelect<
     for (const [key, children] of parentMap) {
       sorted.set(
         key,
-        [...children].sort((a, b) => {
-          const aVal = (a as any)[orderProp];
-          const bVal = (b as any)[orderProp];
-          if (aVal < bVal) return -1;
-          if (aVal > bVal) return 1;
-          return 0;
-        }),
+        children.orderBy((item) => (item as any)[orderProp]),
       );
     }
     return sorted;
@@ -351,10 +336,6 @@ export class SdSharedDataSelect<
     );
   };
 
-  onUndefinedClick(): void {
-    this.value.set(undefined as any);
-  }
-
   async onModalButtonClick(event: MouseEvent): Promise<void> {
     event.preventDefault();
     event.stopPropagation();

package/src/data/sheet/injectSheetDomAccessor.ts

@@ -8,45 +8,53 @@ export function injectSheetDomAccessor() {
   }
 
   function getContainer(): HTMLElement {
-    return elRef.nativeElement.querySelector("._container")!;
+    return elRef.nativeElement.querySelector<HTMLElement>("._sheet-container")!;
   }
 
   function getTable(): HTMLTableElement {
-    return elRef.nativeElement.querySelector("table")!;
+    return elRef.nativeElement.querySelector<HTMLTableElement>("table")!;
   }
 
   function getTHead(): HTMLTableSectionElement {
-    return getTable().querySelector("thead")!;
+    return getTable().querySelector<HTMLTableSectionElement>("thead")!;
+  }
+
+  function getLastDepthFixedHeaders(): HTMLElement[] {
+    return Array.from(getTHead().querySelectorAll<HTMLElement>("tr > th._last-depth._fixed"));
+  }
+
+  function getFocusRowIndicator(): HTMLElement {
+    return getContainer().querySelector<HTMLElement>("._focus-row-indicator")!;
+  }
+
+  function getFocusCellIndicator(): HTMLElement {
+    return getFocusRowIndicator().firstElementChild as HTMLElement;
+  }
+
+  function getSelectRowIndicatorContainer(): HTMLElement {
+    return getContainer().querySelector<HTMLElement>("._select-row-indicator-container")!;
+  }
+
+  function getSelectRowIndicators(): HTMLElement[] {
+    return Array.from(
+      getSelectRowIndicatorContainer().querySelectorAll<HTMLElement>("._select-row-indicator"),
+    );
+  }
+
+  function getColumnResizeIndicator(): HTMLElement {
+    return getContainer().querySelector<HTMLElement>("._resize-indicator")!;
   }
 
   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;
+    return tbody.querySelector<HTMLTableRowElement>(`tr[data-r='${r}']`);
   }
 
   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 row.querySelector<HTMLTableCellElement>(`td[data-c='${c}']`);
   }
 
   return {
@@ -54,9 +62,13 @@ export function injectSheetDomAccessor() {
     getContainer,
     getTable,
     getTHead,
+    getLastDepthFixedHeaders,
+    getFocusRowIndicator,
+    getFocusCellIndicator,
+    getSelectRowIndicatorContainer,
+    getSelectRowIndicators,
+    getColumnResizeIndicator,
     getRow,
     getCell,
-    getColumnResizeIndicator,
-    getLastDepthFixedHeaders,
   };
 }

package/src/data/sheet/injectSheetSelectRowIndicator.ts

@@ -0,0 +1,69 @@
+import { afterEveryRender, type Signal } from "@angular/core";
+import type { injectSheetDomAccessor } from "./injectSheetDomAccessor";
+
+export function injectSheetSelectRowIndicator<T>(options: {
+  domAccessor: ReturnType<typeof injectSheetDomAccessor>;
+  selectedItems: Signal<T[]>;
+  displayItems: Signal<T[]>;
+}) {
+  afterEveryRender(() => {
+    const containerEl = options.domAccessor.getSelectRowIndicatorContainer();
+
+    if (options.selectedItems().length <= 0) {
+      containerEl.innerHTML = "";
+      containerEl.style.display = "none";
+      return;
+    }
+
+    const selectedTrInfos = options.selectedItems()
+      .map((item) => {
+        const r = options.displayItems().indexOf(item);
+        return getTrInfo(r);
+      })
+      .filter((info): info is NonNullable<typeof info> => info != null);
+
+    let indicatorHtml = "";
+    for (const info of selectedTrInfos) {
+      const style = `top: ${info.top}px; height: ${info.height - 1}px; width: ${info.width - 1}px;`;
+      indicatorHtml += `<div class="_select-row-indicator" style="${style}" data-r="${info.r}"></div>`;
+    }
+    containerEl.innerHTML = indicatorHtml;
+    containerEl.style.display = "block";
+  });
+
+  function getTrInfo(
+    r: number,
+  ): { r: number; top: number; width: number; height: number } | undefined {
+    const trEl = options.domAccessor.getRow(r);
+    if (trEl == null) return undefined;
+
+    return {
+      r,
+      top: trEl.offsetTop,
+      width: trEl.offsetWidth,
+      height: trEl.offsetHeight,
+    };
+  }
+
+  function redraw(): void {
+    const selectRowIndicatorEls = options.domAccessor.getSelectRowIndicators();
+
+    for (const el of selectRowIndicatorEls) {
+      const rAttr = el.getAttribute("data-r");
+      if (rAttr == null) continue;
+      const r = parseInt(rAttr, 10);
+      if (Number.isNaN(r)) continue;
+
+      const trInfo = getTrInfo(r);
+      if (trInfo == null) continue;
+
+      Object.assign(el.style, {
+        top: trInfo.top + "px",
+        width: trInfo.width + "px",
+        height: trInfo.height + "px",
+      });
+    }
+  }
+
+  return { redraw };
+}