@simplysm/angular 14.0.90 → 14.0.92

package/scss/commons/_variables.scss

@@ -52,7 +52,7 @@ $breakpoint-sm: 1280px;
 
 $vars: (
   theme: (
-    "gray": color-map(map.get($colors, gray), -5%),
+    "gray": color-map(map.get($colors, gray)),
     blue-gray: color-map(map.get($colors, slate)),
     primary: color-map(map.get($colors, blue)),
     secondary: color-map(map.get($colors, blue)),
@@ -106,13 +106,7 @@ $vars: (
     0: 0,
     auto: "auto",
   ),
-  border-color: (
-    lighter: var(--theme-gray-lightest),
-    light: var(--theme-gray-lighter),
-    default: var(--theme-gray-light),
-    dark: var(--theme-gray-default),
-    darker: var(--theme-gray-dark),
-  ),
+  border-color: color-map(map.get($colors, gray), 5%),
   border-radius: (
     xs: var(--gap-xxs),
     sm: var(--gap-xs),
@@ -139,10 +133,10 @@ $vars: (
   animation-duration: 0.2s,
   elevation-size: 0.0833rem,
   sidebar: (
-    width: 15rem,
+    width: 14rem,
   ),
   topbar: (
-    height: 3rem,
+    height: 2.5rem,
   ),
   sheet: (
     pv: var(--gap-xs),

package/scss/controls/_table.scss

@@ -1,5 +1,5 @@
-$border-color-light: var(--theme-gray-lighter);
-$border-color-dark: var(--border-color-default);
+$border-color-light: var(--border-color-lighter);
+$border-color-dark: var(--border-color-light);
 
 .table {
   display: table;

package/src/controls/button/sd-button.ts

@@ -40,7 +40,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           width: 100%;
 
           background: var(--control-color);
-          border-color: var(--border-color-default);
+          border-color: var(--border-color-light);
           border-radius: var(--border-radius-default);
 
           font-weight: bold;

package/src/controls/list/sd-list-item.ts

@@ -1,153 +1,218 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  contentChildren,
-  input,
-  model,
-  TemplateRef,
-  ViewEncapsulation,
-} from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
-import { NgIcon } from "@ng-icons/core";
-import { SdCollapse } from "../collapse/sd-collapse";
-import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
-import { SdList } from "./sd-list";
-import { SdRipple } from "../../core/ripple/sd-ripple";
-
-@Component({
-  selector: "sd-list-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple],
-  template: `
-    <div class="_content" [style]="contentStyle()" [class]="contentClass()" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()" [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())">
-      @if (selectedIcon() != null && !hasChildren()) {
-        <ng-icon
-          [class.tx-theme-primary-default]="selected()"
-          [class.tx-trans-lightest]="!selected()"
-          [svg]="selectedIcon()!"
-        />
-      }
-      <div class="_label">
-        <ng-content />
-      </div>
-      @if (toolTpl()) {
-        <div class="_tool">
-          <ng-template [ngTemplateOutlet]="toolTpl()!" />
-        </div>
-      }
-      @if (layout() === "accordion" && hasChildren()) {
-        <sd-collapse-icon [open]="open()" />
-      }
-    </div>
-    @if (hasChildren()) {
-      <sd-collapse [open]="childrenOpen()">
-        <ng-content select="sd-list" />
-      </sd-collapse>
-    }
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-list-item {
-        display: block;
-
-        > ._content {
-          display: flex;
-          padding: var(--gap-sm) var(--gap-default);
-          cursor: pointer;
-          gap: var(--gap-xs);
-
-          > ._label {
-            flex: 1 1 auto;
-            overflow: auto;
-          }
-        }
-
-        &[data-sd-selected="true"] > ._content {
-          background: var(--trans-lighter);
-          font-weight: bold;
-        }
-
-        &[data-sd-has-selected-icon="true"][data-sd-selected="true"] > ._content {
-          color: var(--text-trans-default);
-
-          &:hover {
-            background: var(--trans-lighter);
-          }
-        }
-
-        &[data-sd-readonly="true"] {
-          > ._content {
-            cursor: default;
-          }
-        }
-
-        &[data-sd-layout="accordion"] {
-          &:not([data-sd-readonly="true"]) {
-            > ._content:hover {
-              background: var(--trans-lighter);
-            }
-          }
-
-          > sd-collapse > ._content > sd-list {
-            padding: var(--gap-xs) 0;
-          }
-        }
-
-        &[data-sd-layout="flat"][data-sd-has-children="true"] {
-          > ._content {
-            display: block;
-            background: transparent;
-            cursor: default;
-            font-size: var(--font-size-sm);
-            opacity: 0.7;
-          }
-        }
-      }
-
-      .sd-theme-mobile > sd-list-item {
-        > ._content:hover {
-          background: transparent;
-        }
-      }
-    `,
-  ],
-  host: {
-    "[attr.data-sd-layout]": "layout()",
-    "[attr.data-sd-open]": "open()",
-    "[attr.data-sd-selected]": "selected()",
-    "[attr.data-sd-readonly]": "readonly()",
-    "[attr.data-sd-has-children]": "hasChildren()",
-    "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
-  },
-})
-export class SdListItem {
-  layout = input<"accordion" | "flat">("accordion");
-  open = model(false);
-  selected = input(false, { transform: booleanAttribute });
-  selectedIcon = input<string>();
-  readonly = input(false, { transform: booleanAttribute });
-  contentStyle = input<string>();
-  contentClass = input<string>();
-
-  toolTpl = contentChild<TemplateRef<void>>("toolTpl");
-
-  private readonly _childLists = contentChildren(SdList);
-
-  hasChildren = computed(() => this._childLists().length > 0);
-
-  childrenOpen = computed(() => {
-    return this.layout() === "flat" ? true : this.open();
-  });
-
-  onContentClick(): void {
-    if (this.readonly()) return;
-    if (this.layout() === "accordion" && this.hasChildren()) {
-      this.open.update((v) => !v);
-    }
-  }
-}
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  forwardRef,
+  inject,
+  input,
+  model,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NgIcon } from "@ng-icons/core";
+import { SdCollapse } from "../collapse/sd-collapse";
+import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
+import { SdList } from "./sd-list";
+import { SdRipple } from "../../core/ripple/sd-ripple";
+
+@Component({
+  selector: "sd-list-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple],
+  template: `
+    <div
+      class="_content"
+      [style]="contentStyle()"
+      [style.padding-left]="indentPadding()"
+      [class]="contentClass()"
+      tabindex="0"
+      (click)="onContentClick()"
+      (keydown.enter)="onContentClick()"
+      [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())"
+    >
+      @if (selectedIcon() != null && !hasChildren()) {
+        <ng-icon
+          [class.tx-theme-primary-default]="selected()"
+          [class.tx-trans-lightest]="!selected()"
+          [svg]="selectedIcon()!"
+        />
+      }
+      <div class="_label">
+        <ng-content />
+      </div>
+      @if (toolTpl()) {
+        <div class="_tool">
+          <ng-template [ngTemplateOutlet]="toolTpl()!" />
+        </div>
+      }
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
+    </div>
+    @if (hasChildren()) {
+      <sd-collapse [open]="childrenOpen()">
+        <div class="_children">
+          @if (layout() === "accordion") {
+            <div class="_indent-guide" [style.left]="guideLeft()"></div>
+          }
+          <ng-content select="sd-list" />
+        </div>
+      </sd-collapse>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-list-item {
+        display: block;
+
+        > ._content {
+          display: flex;
+          padding: var(--gap-sm) var(--gap-default);
+          cursor: pointer;
+          gap: var(--gap-xs);
+          border-radius: var(--border-radius-default);
+          transition: background var(--animation-duration) ease-in;
+
+          > ._label {
+            flex: 1 1 auto;
+            overflow: auto;
+          }
+
+          &:focus-visible {
+            outline: none;
+            transition: background var(--animation-duration) ease-out;
+            background: var(--trans-lighter);
+          }
+        }
+
+        &[data-sd-selected="true"] > ._content {
+          background: var(--trans-lighter);
+          font-weight: bold;
+        }
+
+        &[data-sd-has-selected-icon="true"][data-sd-selected="true"] > ._content {
+          color: var(--text-trans-default);
+
+          &:hover {
+            background: var(--trans-lighter);
+          }
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._content {
+            cursor: default;
+          }
+        }
+
+        // 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준 컨테이너
+        > sd-collapse > ._content > ._children {
+          position: relative;
+
+          > ._indent-guide {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 0;
+            border-left: 1px solid var(--border-color-default);
+            pointer-events: none;
+          }
+        }
+
+        &[data-sd-layout="accordion"] {
+          &:not([data-sd-readonly="true"]) {
+            > ._content:hover {
+              transition: background var(--animation-duration) ease-out;
+              background: var(--trans-lighter);
+            }
+          }
+
+          //> sd-collapse > ._content > ._children > sd-list {
+          //  padding: var(--gap-xs) 0;
+          //}
+        }
+
+        &[data-sd-layout="flat"][data-sd-has-children="true"] {
+          > ._content {
+            display: block;
+            background: transparent;
+            cursor: default;
+            font-size: var(--font-size-sm);
+            opacity: 0.7;
+            margin: 0;
+          }
+        }
+      }
+
+      .sd-theme-mobile > sd-list-item {
+        > ._content:hover {
+          background: transparent;
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-layout]": "layout()",
+    "[attr.data-sd-open]": "open()",
+    "[attr.data-sd-selected]": "selected()",
+    "[attr.data-sd-readonly]": "readonly()",
+    "[attr.data-sd-has-children]": "hasChildren()",
+    "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
+  },
+})
+export class SdListItem {
+  layout = input<"accordion" | "flat">("accordion");
+  open = model(false);
+  selected = input(false, { transform: booleanAttribute });
+  selectedIcon = input<string>();
+  readonly = input(false, { transform: booleanAttribute });
+  contentStyle = input<string>();
+  contentClass = input<string>();
+
+  toolTpl = contentChild<TemplateRef<void>>("toolTpl");
+
+  private readonly _childLists = contentChildren(SdList);
+
+  // 상위 아이템을 주입해 중첩 깊이(레벨)를 추적
+  private readonly _parentItem = inject<SdListItem>(
+    forwardRef(() => SdListItem),
+    {
+      optional: true,
+      skipSelf: true,
+    },
+  );
+
+  // accordion(트리) 깊이만 셈. flat(섹션 그룹)은 들여쓰기 대상이 아니므로 0,
+  // flat 하위의 accordion 트리는 자체 루트(1)부터 새로 깊이를 셈.
+  level = computed((): number => {
+    if (this.layout() !== "accordion") return 0;
+    return (this._parentItem?.level() ?? 0) + 1;
+  });
+
+  // accordion 트리 깊이별 좌측 들여쓰기 (트리 루트·flat은 기본 패딩 유지)
+  indentPadding = computed(() => {
+    if (this.level() <= 1) return undefined;
+    return `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em)`;
+  });
+
+  // 자식 영역에 그릴 세로 가이드선의 좌측 위치 (현재 레벨 기준 + 반 칸)
+  guideLeft = computed(() => `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em + 0.75em)`);
+
+  hasChildren = computed(() => this._childLists().length > 0);
+
+  childrenOpen = computed(() => {
+    return this.layout() === "flat" ? true : this.open();
+  });
+
+  onContentClick(): void {
+    if (this.readonly()) return;
+    if (this.layout() === "accordion" && this.hasChildren()) {
+      this.open.update((v) => !v);
+    }
+  }
+}

package/src/controls/list/sd-list.ts

@@ -22,14 +22,27 @@ import {
         flex-direction: column;
         user-select: none;
         background: var(--control-color);
+        border: 1px solid var(--border-color-default);
+        border-radius: var(--border-radius-default);
+        padding: var(--gap-sm);
+        gap: var(--gap-xs);
 
         &[data-sd-inset="true"] {
           background: transparent;
+          border: none;
 
           sd-list {
             background: transparent;
           }
         }
+
+        // 아이템 내부에 중첩된 리스트는 카드 외형(테두리·라운드·배경)을 제거
+        sd-list-item sd-list {
+          border-color: transparent;
+          border-radius: 0;
+          padding: 0;
+          background: transparent;
+        }
       }
     `,
   ],

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

@@ -159,7 +159,8 @@ import "@simplysm/core-browser";
             display: flex;
             align-items: center;
             user-select: none;
-            border-bottom: 1px solid var(--theme-gray-lightest);
+            border-bottom: 1px solid var(--theme-gray-lighter);
+            background: var(--theme-gray-lightest);
 
             > ._title {
               flex: 1;

package/src/core/routing/injectCurrentPageCodeSignal.ts

@@ -9,7 +9,7 @@ export function injectCurrentPageCodeSignal(): Signal<string> | undefined {
     const activatedUrlSegmentsSignals = activatedRoute.pathFromRoot
       .slice(2)
       .map((item) => toSignal(item.url, { initialValue: item.snapshot.url }));
-    return computed(() => activatedUrlSegmentsSignals.map((item) => item()).join("."));
+    return computed(() => activatedUrlSegmentsSignals.map((item) => item().join(".")).join("."));
   }
 
   return undefined;

package/src/core/routing/injectViewTypeSignal.ts

@@ -28,6 +28,7 @@ export function injectViewTypeSignal(): Signal<SdViewType> {
       ) {
         return "control";
       }
+      
       if (fullPageCode() === currPageCode?.()) {
         return "page";
       }

package/src/data/crud/sd-base-container.ts

@@ -41,7 +41,7 @@ import { NgTemplateOutlet } from "@angular/common";
         } @else if (viewType() === "page") {
           <sd-topbar-container>
             <sd-topbar>
-              <h4>{{ viewTitle() }}</h4>
+              <h5 class="tx-trans-light">{{ viewTitle() }}</h5>
 
               <ng-template [ngTemplateOutlet]="topbarTplRef()" />
             </sd-topbar>
@@ -57,7 +57,7 @@ import { NgTemplateOutlet } from "@angular/common";
     <ng-template #content>
       <div class="flex-column fill">
         @if (commandTplRef()) {
-          <div class="p-default flex-row gap-default bdb bdb-theme-gray-lightest">
+          <div class="p-default flex-row gap-default">
             <ng-template [ngTemplateOutlet]="commandTplRef()" />
           </div>
         }
@@ -69,7 +69,7 @@ import { NgTemplateOutlet } from "@angular/common";
         </div>
 
         @if (bottomCommandTplRef()) {
-          <div class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lightest">
+          <div class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest">
             <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
           </div>
         }

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

@@ -40,7 +40,7 @@ import { tablerDeviceFloppy } from "@ng-icons/tabler-icons";
       @if (viewType() === "page" && (!readonly() || commandTplRef())) {
         <ng-template #topbarTpl>
           @if (!readonly()) {
-            <sd-button [theme]="'link-primary'" (click)="formCtrl()?.requestSubmit()">
+            <sd-button [size]="'sm'" [theme]="'link-primary'" (click)="formCtrl()?.requestSubmit()">
               <ng-icon [svg]="tablerDeviceFloppy" />
               저장
               <small>(CTRL+S)</small>
@@ -71,7 +71,7 @@ import { tablerDeviceFloppy } from "@ng-icons/tabler-icons";
       @if (viewType() === "modal" || bottomCommandTplRef()) {
         <ng-template #bottomCommandTpl>
           @if (bottomCommandTplRef()) {
-            <div class="flex-fill flex-row main-align-start gap-sm">
+            <div class="flex-fill">
               <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
             </div>
           }

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

@@ -62,9 +62,9 @@ import {
       [viewType]="viewType()"
     >
       <!-- TOP -->
-      @if (viewType() === "page" && (!readonly() || commandTplRef())) {
+      @if (viewType() === "page" && (inlineEditEnabled() || commandTplRef())) {
         <ng-template #topbarTpl>
-          @if (!readonly()) {
+          @if (inlineEditEnabled()) {
             <sd-button [theme]="'link-primary'" (click)="formCtrl()?.requestSubmit()">
               <ng-icon [svg]="tablerDeviceFloppy" />
               저장
@@ -74,9 +74,9 @@ import {
 
           <ng-template [ngTemplateOutlet]="commandTplRef()" />
         </ng-template>
-      } @else if (!readonly() || commandTplRef()) {
+      } @else if (inlineEditEnabled() || commandTplRef()) {
         <ng-template #commandTpl>
-          @if (!readonly()) {
+          @if (inlineEditEnabled()) {
             <sd-button [theme]="'primary'" (click)="onSaveButtonClick()">
               <ng-icon [svg]="tablerDeviceFloppy" />
               저장
@@ -167,14 +167,14 @@ import {
             </div>
           }
 
-          @if (readonly()) {
-            <div class="flex-fill p-default pt-0">
-              <ng-template [ngTemplateOutlet]="sheet" />
-            </div>
-          } @else {
+          @if (inlineEditEnabled()) {
             <sd-form #formCtrl (formSubmit)="submit.emit()" class="flex-fill p-default pt-0">
               <ng-template [ngTemplateOutlet]="sheet" />
             </sd-form>
+          } @else {
+            <div class="flex-fill p-default pt-0">
+              <ng-template [ngTemplateOutlet]="sheet" />
+            </div>
           }
         </div>
       </ng-template>
@@ -192,13 +192,14 @@ import {
         [useAutoSort]="totalPageCount() === 0"
         [selectMode]="selectMode() ?? (readonly() ? undefined : 'multi')"
         [(selectedKeys)]="selectedKeys"
+        [getItemSelectableFn]="getItemSelectableFn()"
         [trackByFn]="trackByFn()"
         [getItemCellStyleFn]="getItemCellStyleFn"
         [autoSelect]="selectMode() === 'single' ? 'click' : undefined"
         [columnControlsInput]="columnControls()"
         (selectedKeysChange)="onSelectedKeysChange()"
       >
-        @if (!readonly()) {
+        @if (inlineEditEnabled()) {
           <sd-sheet-column
             [fixed]="true"
             [key]="'deleteButton'"
@@ -234,6 +235,7 @@ export class SdCrudList<TItem, TKey> {
   busyCount = model(0);
   restricted = input(false);
   readonly = input(false);
+  inlineEdit = input(true);
   viewType = input.required<SdViewType>();
   selectMode = input<"single" | "multi">();
   key = input.required<string>();
@@ -266,6 +268,7 @@ export class SdCrudList<TItem, TKey> {
   sorts = model<SortingDef[]>([]);
 
   trackByFn = input.required<(item: TItem) => TKey>();
+  getItemSelectableFn = input<(item: TItem) => boolean | string>();
 
   commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
   filterTplRef = contentChild<TemplateRef<void>>("filterTpl");
@@ -274,6 +277,8 @@ export class SdCrudList<TItem, TKey> {
 
   columnControls = contentChildren(SdSheetColumn);
 
+  inlineEditEnabled = computed(() => !this.readonly() && this.inlineEdit());
+
   hasSelectedDeleted = computed(() => this.currSelectedItems().some((it) => this.isDeleted(it)));
   hasSelectedNotDeleted = computed(() =>
     this.currSelectedItems().some((it) => !this.isDeleted(it)),

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

@@ -53,19 +53,18 @@ import { tablerExternalLink } from "@ng-icons/tabler-icons";
     class: "flex-column fill",
   },
   template: `
-    @if (header()) {
-      <div class="control-header p-default">
-        {{ header() }}
-      </div>
-    }
-
-    <div class="flex-column gap-sm p-default pt-0">
-      @if (headerTplRef() || modal()) {
+    <div class="flex-column gap-sm pt-default ph-sm">
+      @if (header() || headerTplRef() || modal()) {
         <div class="flex-row">
           <div class="flex-fill">
             @if (headerTplRef()) {
               <ng-template [ngTemplateOutlet]="headerTplRef()!"></ng-template>
             }
+            @if (header()) {
+              <div class="control-header">
+                {{ header() }}
+              </div>
+            }
           </div>
           @if (modal()) {
             <sd-anchor (click)="onModalButtonClick()">