@simplysm/angular 14.0.86 → 14.0.87

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

@@ -1,14 +1,16 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  effect,
   forwardRef,
+  inject,
   input,
+  linkedSignal,
   output,
   signal,
   ViewEncapsulation,
 } from "@angular/core";
-import type { SdModalContentDef } from "../../core/modal/sd-modal.provider";
+import { SdModalProvider, type SdModalContentDef } from "../../core/modal/sd-modal.provider";
+import { SdConfirmModal } from "../../core/modal/sd-confirm-modal";
 import type { SdSheetConfig } from "./types";
 import type { SdSheetColumn } from "./sd-sheet-column";
 import { SdSheet } from "./sd-sheet";
@@ -178,14 +180,36 @@ interface ConfigItem {
   `,
 })
 export class SdSheetConfigModal implements SdModalContentDef<SdSheetConfig | undefined> {
-  initialized = signal(false);
+  private readonly _sdModal = inject(SdModalProvider);
+
+  initialized = signal(true);
   close = output<SdSheetConfig | undefined>();
 
   sheetKey = input.required<string>();
   controls = input.required<readonly SdSheetColumn[]>();
   config = input.required<SdSheetConfig | undefined>();
 
-  items = signal<ConfigItem[]>([]);
+  items = linkedSignal<ConfigItem[]>(() => {
+    const cfg = this.config();
+    return this.controls()
+      .map((ctrl): ConfigItem => {
+        const key = ctrl.key();
+        const cfgCol = cfg?.columnRecord[key];
+        return {
+          key,
+          header: Array.isArray(ctrl.header())
+            ? (ctrl.header() as string[]).join(" > ")
+            : (ctrl.header() as string),
+          disableResizing: ctrl.disableResizing(),
+          fixed: cfgCol?.fixed ?? ctrl.fixed(),
+          hidden: cfgCol?.hidden ?? ctrl.hidden(),
+          width: cfgCol?.width ?? ctrl.width(),
+          ordering: cfgCol?.ordering ?? ctrl.ordering(),
+        };
+      })
+      .orderBy((i) => i.ordering ?? 0)
+      .orderBy((i) => (i.fixed ? 0 : 1));
+  });
 
   trackByFn = (item: ConfigItem): string => item.key;
 
@@ -194,33 +218,6 @@ export class SdSheetConfigModal implements SdModalContentDef<SdSheetConfig | und
   protected readonly tablerX = tablerX;
   protected readonly mark = mark;
 
-  constructor() {
-    effect(() => {
-      const cfg = this.config();
-      const items = this.controls()
-        .map((ctrl): ConfigItem => {
-          const key = ctrl.key();
-          const cfgCol = cfg?.columnRecord[key];
-          return {
-            key,
-            header: Array.isArray(ctrl.header())
-              ? (ctrl.header() as string[]).join(" > ")
-              : (ctrl.header() as string),
-            disableResizing: ctrl.disableResizing(),
-            fixed: cfgCol?.fixed ?? ctrl.fixed(),
-            hidden: cfgCol?.hidden ?? ctrl.hidden(),
-            width: cfgCol?.width ?? ctrl.width(),
-            ordering: cfgCol?.ordering ?? ctrl.ordering(),
-          };
-        })
-        .orderBy((i) => i.ordering ?? 0)
-        .orderBy((i) => (i.fixed ? 0 : 1));
-
-      this.items.set(items);
-      this.initialized.set(true);
-    });
-  }
-
   onMoveUp(item: ConfigItem): void {
     this.items.update((v) => {
       const r = [...v];
@@ -264,9 +261,16 @@ export class SdSheetConfigModal implements SdModalContentDef<SdSheetConfig | und
     this.close.emit(undefined);
   }
 
-  onResetClick(): void {
-    if (confirm("설정값이 모두 초기화 됩니다.")) {
-      this.close.emit({ columnRecord: {} });
-    }
+  async onResetClick(): Promise<void> {
+    const confirmed = await this._sdModal.showAsync(
+      {
+        title: "설정 초기화",
+        type: SdConfirmModal,
+        inputs: { message: "설정값이 모두 초기화 됩니다." },
+      },
+      { useCloseByBackdrop: false },
+    );
+    if (confirmed !== true) return;
+    this.close.emit({ columnRecord: {} });
   }
 }

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

@@ -927,11 +927,16 @@ export class SdSheet<TItem> {
   }
 
   async onConfigButtonClick(): Promise<void> {
+    const key = this.key();
+    if (key == null) {
+      throw new Error("시트 설정을 사용하려면 'key'가 지정되어야 합니다.");
+    }
+
     const result = await this._sdModal.showAsync({
       title: "시트 설정",
       type: SdSheetConfigModal,
       inputs: {
-        sheetKey: this.key()!,
+        sheetKey: key,
         controls: this._effectiveColumnControls(),
         config: this._configResource.value(),
       },

package/src/data/sheet/useSheetCellStyling.ts

@@ -28,24 +28,7 @@ export function useSheetCellStyling<T>(options: {
     return `left: ${leftValue}px`;
   }
 
-  const headerColumnStyles = computed(() => {
-    const map = new Map<string, string | null>();
-    const defs = options.columnDefs();
-    for (let i = 0; i < defs.length; i++) {
-      const colDef = defs[i];
-      const parts: string[] = [];
-      const colStyle = getColDefStyle(colDef);
-      if (colStyle != null) parts.push(colStyle);
-      if (colDef.fixed) {
-        const fixedStyle = getFixedLeftStyle(i);
-        if (fixedStyle != null) parts.push(fixedStyle);
-      }
-      map.set(colDef.key, parts.length > 0 ? parts.join("; ") : null);
-    }
-    return map;
-  });
-
-  const dataColumnBaseStyles = computed(() => {
+  const columnBaseStyles = computed(() => {
     const map = new Map<string, string | null>();
     const defs = options.columnDefs();
     for (let i = 0; i < defs.length; i++) {
@@ -65,14 +48,14 @@ export function useSheetCellStyling<T>(options: {
   function getHeaderCellStyle(cell: SdSheetHeaderDef): string | null {
     if (cell.colDef == null) return null;
     const parts: string[] = [];
-    const baseStyle = headerColumnStyles().get(cell.colDef.key);
+    const baseStyle = columnBaseStyles().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 {
-    const baseStyle = dataColumnBaseStyles().get(colDef.key) ?? null;
+    const baseStyle = columnBaseStyles().get(colDef.key) ?? null;
     const styleFn = options.getItemCellStyleFn();
     const customStyle = styleFn != null ? styleFn(item, colDef.key) : undefined;
     if (baseStyle != null && customStyle != null) return `${baseStyle}; ${customStyle}`;

package/src/data/state-preset/sd-state-preset.ts

@@ -17,9 +17,9 @@ import { NgIcon } from "@ng-icons/core";
 import { tablerStar, tablerDeviceFloppy, tablerX } from "@ng-icons/tabler-icons";
 import { obj } from "@simplysm/core-common";
 
-export interface SdStatePresetDef {
+export interface SdStatePresetDef<TState> {
   name: string;
-  state: any;
+  state: TState;
 }
 
 @Component({
@@ -112,19 +112,19 @@ export interface SdStatePresetDef {
     "[attr.data-sd-size]": "size()",
   },
 })
-export class SdStatePreset {
+export class SdStatePreset<TState> {
   private readonly _sdModal = inject(SdModalProvider);
   private readonly _sdToast = inject(SdToastProvider);
 
   key = input.required<string>();
-  state = model<any>();
+  state = model.required<TState>();
   size = input<"sm" | "lg">();
 
   protected readonly tablerStar = tablerStar;
   protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
   protected readonly tablerX = tablerX;
 
-  private readonly _configResource = injectSdSystemConfigResource<SdStatePresetDef[]>({
+  private readonly _configResource = injectSdSystemConfigResource<SdStatePresetDef<TState>[]>({
     key: this.key,
   });
 
@@ -149,31 +149,31 @@ export class SdStatePreset {
       return;
     }
 
-    const newPreset: SdStatePresetDef = {
+    const newPreset: SdStatePresetDef<TState> = {
       name,
       state: obj.clone(this.state()),
     };
 
     this._configResource.set([...currentPresets, newPreset]);
-    this._sdToast.info(`현재 상태가 '${name}'에 저장되었습니다.`);
+    this._sdToast.success(`현재 상태가 '${name}'에 저장되었습니다.`);
   }
 
-  onPresetClick(preset: SdStatePresetDef): void {
+  onPresetClick(preset: SdStatePresetDef<TState>): void {
     const currentState = this.state();
     if (obj.equal(currentState, preset.state)) return;
     this.state.set(obj.clone(preset.state));
   }
 
-  onSaveClick(preset: SdStatePresetDef): void {
+  onSaveClick(preset: SdStatePresetDef<TState>): void {
     const currentPresets = this._presets();
     const updated = currentPresets.map((p) =>
       p.name === preset.name ? { ...p, state: obj.clone(this.state()) } : p,
     );
     this._configResource.set(updated);
-    this._sdToast.info(`현재 상태가 ${preset.name}에 저장되었습니다.`);
+    this._sdToast.success(`현재 상태가 ${preset.name}에 저장되었습니다.`);
   }
 
-  async onDeleteClick(preset: SdStatePresetDef): Promise<void> {
+  async onDeleteClick(preset: SdStatePresetDef<TState>): Promise<void> {
     const confirmed = await this._sdModal.showAsync(
       {
         title: "프리셋 삭제",

package/src/features/address/sd-address-search.modal.ts

@@ -151,7 +151,7 @@ export class SdAddressSearchModal implements SdModalContentDef<Address>, OnInit
         this.close.emit({
           postNumber: data.zonecode,
           address: addr + extraAddr,
-          buildingName: data.buildingName,
+          buildingName: data.buildingName !== "" ? data.buildingName : undefined,
         });
       },
       onresize: (size: { height: number }): void => {

package/src/features/editor/sd-tiptap-editor.ts

@@ -323,8 +323,9 @@ export class SdTiptapEditor {
         }
       }
 
-      if (this.validatorFn()) {
-        const message = this.validatorFn()!(this.value());
+      const validatorFn = this.validatorFn();
+      if (validatorFn != null) {
+        const message = validatorFn(this.value());
         if (message != null) {
           errorMessages.push(message);
         }

package/src/features/theme/sd-theme-selector.ts

@@ -1,75 +1,77 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
-import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
-import { SdButton } from "../../controls/button/sd-button";
-import { SdSwitch } from "../../controls/checkbox/sd-switch";
-import { NgIcon } from "@ng-icons/core";
-import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
-import { SdThemeProvider } from "./sd-theme-provider";
-
-@Component({
-  selector: "sd-theme-selector",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
-  template: `
-    <sd-dropdown>
-      <sd-button [inline]="true" [theme]="'link-gray'">
-        <ng-icon [svg]="icons.tablerPalette" />
-      </sd-button>
-      <sd-dropdown-popup>
-        <div class="p-default">
-          <div class="flex-row gap-sm cross-align-center">
-            <span>글자 크기</span>
-            <div class="flex-row gap-xs cross-align-center">
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMinFontSize()"
-                (click)="sdTheme.decreaseFontSize()"
-              >
-                <ng-icon [svg]="icons.tablerMinus" />
-              </sd-button>
-              <span>{{ sdTheme.fontSize() }}px</span>
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMaxFontSize()"
-                (click)="sdTheme.increaseFontSize()"
-              >
-                <ng-icon [svg]="icons.tablerPlus" />
-              </sd-button>
-            </div>
-          </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>다크 모드</span>
-            <sd-switch [(value)]="sdTheme.dark" />
-          </div>
-        </div>
-      </sd-dropdown-popup>
-    </sd-dropdown>
-  `,
-  styles: [],
-})
-export class SdThemeSelector {
-  protected readonly icons = { tablerPalette, tablerMinus, tablerPlus };
-  protected readonly sdTheme = inject(SdThemeProvider);
-
-  protected readonly isMinFontSize = computed(
-    () => this.sdTheme.fontSize() <= this.sdTheme.fontSizePresets[0],
-  );
-
-  protected readonly isMaxFontSize = computed(
-    () =>
-      this.sdTheme.fontSize() >= this.sdTheme.fontSizePresets[this.sdTheme.fontSizePresets.length - 1],
-  );
-}
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdSwitch } from "../../controls/checkbox/sd-switch";
+import { NgIcon } from "@ng-icons/core";
+import { SdThemeProvider } from "./sd-theme-provider";
+import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-theme-selector",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
+  template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-icon [svg]="tablerPalette" />
+      </sd-button>
+      <sd-dropdown-popup>
+        <div class="p-default">
+          <div class="flex-row gap-sm cross-align-center">
+            <span>글자 크기</span>
+            <div class="flex-row gap-xs cross-align-center">
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMinFontSize()"
+                (click)="_sdTheme.decreaseFontSize()"
+              >
+                <ng-icon [svg]="tablerMinus" />
+              </sd-button>
+              <span>{{ _sdTheme.fontSize() }}px</span>
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMaxFontSize()"
+                (click)="_sdTheme.increaseFontSize()"
+              >
+                <ng-icon [svg]="tablerPlus" />
+              </sd-button>
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>다크 모드</span>
+            <sd-switch [(value)]="_sdTheme.dark" />
+          </div>
+        </div>
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  `,
+  styles: [],
+})
+export class SdThemeSelector {
+  protected readonly _sdTheme = inject(SdThemeProvider);
+
+  isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0]);
+
+  isMaxFontSize = computed(
+    () =>
+      this._sdTheme.fontSize() >=
+      this._sdTheme.fontSizePresets[this._sdTheme.fontSizePresets.length - 1],
+  );
+
+  protected readonly tablerPlus = tablerPlus;
+  protected readonly tablerMinus = tablerMinus;
+  protected readonly tablerPalette = tablerPalette;
+}

package/src/features/visual/sd-barcode.ts

@@ -32,15 +32,11 @@ export class SdBarcode {
     if (text == null || text === "") {
       return "";
     }
-    try {
-      const svg = bwipjs.toSVG({
-        bcid: this.type(),
-        text,
-      });
-      return this._sanitizer.bypassSecurityTrustHtml(svg);
-    } catch {
-      return "";
-    }
+    const svg = bwipjs.toSVG({
+      bcid: this.type(),
+      text,
+    });
+    return this._sanitizer.bypassSecurityTrustHtml(svg);
   });
 }
 

package/src/features/visual/sd-calendar.ts

@@ -134,7 +134,7 @@ export class SdCalendar<T> {
 
   yearMonth = input(new DateOnly().setDay(1));
 
-  itemTplRef = contentChild.required<any, TemplateRef<SdItemOfTemplateContext<T>>>(
+  itemTplRef = contentChild.required<SdItemOfTemplate<T>, TemplateRef<SdItemOfTemplateContext<T>>>(
     SdItemOfTemplate,
     { read: TemplateRef },
   );

package/src/layout/sidebar/sd-sidebar-user.ts

@@ -21,17 +21,15 @@ import { SdListItem } from "../../controls/list/sd-list-item";
     <div class="p-lg">
       <ng-content />
     </div>
-    @if (userMenu()?.title) {
+    @if (userMenu(); as _userMenu) {
       <div class="_menu-button" tabindex="0" (click)="onMenuOpenButtonClick()" (keydown.enter)="onMenuOpenButtonClick()" [sdRipple]="true">
-        {{ userMenu()?.title }}
+        {{ _userMenu.title }}
         <sd-collapse-icon [open]="menuOpen()" style="float: right;" [openRotate]="180" />
       </div>
-    }
 
-    @if (userMenu()?.title) {
       <sd-collapse [open]="menuOpen()">
         <sd-list [inset]="true">
-          @for (menu of userMenu()?.menus; track menu.title) {
+          @for (menu of _userMenu.menus; track menu.title) {
             <sd-list-item (click)="menu.onClick()">
               {{ menu.title }}
             </sd-list-item>