@simplysm/angular 14.0.100 → 14.0.102

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

@@ -62,7 +62,7 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
 
           width: calc(var(--font-size-default) + 2px);
           height: calc(var(--font-size-default) + 2px);
-          border: 1px solid var(--trans-light);
+          border: 1px solid var(--border-color-light);
           background: var(--theme-secondary-lightest);
 
           > ._indicator {
@@ -114,14 +114,9 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
               }
             }
 
-            &:focus {
-              > ._indicator_rect {
-                border-color: var(--theme-#{$key}-default);
-              }
-            }
-
             &[data-sd-checked="true"] {
               > ._indicator_rect {
+                border-color: var(--theme-#{$key}-default);
                 background: var(--theme-#{$key}-default);
 
                 > ._indicator {
@@ -129,6 +124,12 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
                 }
               }
             }
+
+            &:focus {
+              > ._indicator_rect {
+                border-color: var(--theme-#{$key}-dark);
+              }
+            }
           }
         }
 
@@ -138,15 +139,16 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
             border-color: var(--text-trans-lightest);
           }
 
-          &:focus {
+          &[data-sd-checked="true"] {
             > ._indicator_rect {
-              border-color: var(--text-trans-default);
+              border-color: var(--theme-primary-default);
+              background: var(--theme-primary-default);
             }
           }
 
-          &[data-sd-checked="true"] {
+          &:focus {
             > ._indicator_rect {
-              background: var(--theme-primary-default);
+              border-color: var(--theme-primary-dark);
             }
           }
         }

package/src/controls/collapse/sd-collapse-icon.ts

@@ -45,6 +45,8 @@ export class SdCollapseIcon {
   });
 
   transitionStyle = computed(() => {
-    return this.open() ? "transform 0.1s ease-out" : "transform 0.1s ease-in";
+    return this.open()
+      ? "transform var(--animation-duration) ease-out"
+      : "transform var(--animation-duration) ease-in";
   });
 }

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

@@ -54,7 +54,9 @@ export class SdCollapse {
 
   contentTransition = computed(() => {
     if (!this._initialized()) return "";
-    return this.open() ? "margin-top 0.1s ease-out" : "margin-top 0.1s ease-in";
+    return this.open()
+      ? "margin-top var(--animation-duration) ease-out"
+      : "margin-top var(--animation-duration) ease-in";
   });
 
   constructor() {

package/src/controls/dropdown/sd-dropdown-popup.ts

@@ -33,7 +33,7 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
         z-index: var(--z-index-dropdown);
         opacity: 0;
         transform: translateY(-0.625rem);
-        transition: 0.1s linear;
+        transition: var(--animation-duration) linear;
         transition-property: transform, opacity;
         pointer-events: none;
         background: var(--control-color);
@@ -70,7 +70,7 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
           opacity: 1;
           pointer-events: auto;
           transform: none;
-          animation: sd-dropdown-slide-up 0.2s ease-out;
+          animation: sd-dropdown-slide-up var(--animation-duration) ease-out;
           @include mixins.elevation(8);
         }
       }

package/src/controls/input/sd-textarea.ts

@@ -56,6 +56,7 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
         > textarea,
         > ._contents {
           @include mixins.form-control-base();
+          font-family: var(--font-family-field);
           resize: none;
 
           overflow: auto;
@@ -79,6 +80,10 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
           }
         }
 
+        > ._contents > pre {
+          font-family: inherit;
+        }
+
         &:not([data-sd-inset="true"]):not([data-sd-disabled="true"]) > ._contents {
           height: 0;
           max-height: 0;

package/src/controls/input/sd-textfield.ts

@@ -1,10 +1,16 @@
+import { isPlatformBrowser } from "@angular/common";
 import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
+  ElementRef,
+  inject,
   input,
   model,
+  PLATFORM_ID,
+  viewChild,
   ViewEncapsulation,
 } from "@angular/core";
 import { setupInvalid } from "../../core/validation/setupInvalid";
@@ -40,6 +46,7 @@ import {
     </div>
     @if (!readonly() && !disabled()) {
       <input
+        #inputEl
         [style]="inputStyle()"
         [class]="inputClass()"
         [attr.title]="title() ?? placeholder()"
@@ -48,11 +55,11 @@ import {
         [attr.max]="max()"
         [type]="controlType()"
         [attr.inputmode]="type() === 'number' ? 'numeric' : undefined"
-        [value]="controlValue()"
         [attr.autocomplete]="autocomplete()"
         [attr.step]="controlStep()"
         (input)="onInput($event)"
         (paste)="onInputPaste($event)"
+        (blur)="onBlur($event)"
       />
     }
   `,
@@ -70,17 +77,18 @@ import {
         > input,
         > ._contents {
           @include mixins.form-control-base();
+          font-family: var(--font-family-field);
 
           overflow: auto;
           width: 100%;
 
-          border: 1px solid var(--trans-lighter);
+          border: 1px solid var(--border-color-light);
           border-radius: var(--border-radius-default);
           background: var(--theme-secondary-lightest);
 
           &:focus {
             outline: none;
-            border-color: var(--theme-secondary-default);
+            border-color: var(--theme-primary-default);
           }
 
           &[type="date"],
@@ -114,6 +122,10 @@ import {
           display: none;
         }
 
+        > ._contents > pre {
+          font-family: inherit;
+        }
+
         &[data-sd-type="number"] {
           > input,
           > ._contents {
@@ -253,7 +265,7 @@ import {
         &[data-sd-disabled="true"] {
           > ._contents {
             display: block;
-            background: var(--theme-gray-lightest);
+            background: var(--trans-lightest);
             color: var(--text-trans-light);
           }
 
@@ -316,6 +328,8 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
   >();
 
+  private readonly _inputElRef = viewChild<ElementRef<HTMLInputElement>>("inputEl");
+
   private readonly _handler = computed(() => textfieldTypeHandlers[this.type()]);
 
   controlType = computed(() => this._handler().controlType);
@@ -340,6 +354,21 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
   });
 
   constructor() {
+    if (isPlatformBrowser(inject(PLATFORM_ID))) {
+      effect(() => {
+        const controlValue = this.controlValue();
+        const inputEl = this._inputElRef()?.nativeElement;
+        if (inputEl == null) return;
+
+        // 편집(포커스) 중에는 DOM 을 되쓰면 사용자 입력(세그먼트·캐럿·IME 조합)이 깨지므로 생략
+        if (document.activeElement === inputEl) return;
+
+        if (inputEl.value !== controlValue) {
+          inputEl.value = controlValue;
+        }
+      });
+    }
+
     setupInvalid(() => {
       const value = this.value();
       const handlerErrors = this._handler().validate(value, {
@@ -379,6 +408,13 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     this.value.set(parsed as SdTextfieldTypes[K]);
   }
 
+  onBlur(event: FocusEvent): void {
+    // 편집 종료 시 모델 기준값으로 동기화 (number 콤마 포맷 반영, date 미완성 입력 정리)
+    // date 미완성 입력은 input.value 가 "" 라 비교 없이 무조건 되써야 남은 세그먼트가 정리됨
+    const inputEl = event.target as HTMLInputElement;
+    inputEl.value = this.controlValue();
+  }
+
   onInputPaste(event: ClipboardEvent): void {
     event.preventDefault();
     const text = event.clipboardData?.getData("text/plain").trim();

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

@@ -84,12 +84,12 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           &:focus-visible {
             outline: none;
             transition: background var(--animation-duration) ease-out;
-            background: var(--trans-lighter);
+            background: var(--trans-light);
           }
         }
 
         &[data-sd-selected="true"] > ._content {
-          background: var(--trans-lighter);
+          background: var(--trans-light);
           font-weight: bold;
         }
 
@@ -97,7 +97,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           color: var(--text-trans-default);
 
           &:hover {
-            background: var(--trans-lighter);
+            background: var(--trans-light);
           }
         }
 
@@ -128,13 +128,13 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           &:not([data-sd-readonly="true"]) {
             > ._content:hover {
               transition: background var(--animation-duration) ease-out;
-              background: var(--trans-lighter);
+              background: var(--trans-light);
             }
           }
 
           // 깊이별 들여쓰기: accordion 항목의 자식 리스트를 한 칸씩 누적 들여씀.
           // (flat 항목의 자식 리스트는 들여쓰지 않음)
-          > sd-collapse > ._content > ._children > sd-list {
+          > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {
             padding-left: 1.5em;
           }
         }

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

@@ -22,7 +22,7 @@ import { setupRipple } from "../../core/ripple/setupRipple";
         font-weight: bold;
         cursor: pointer;
         color: var(--theme-primary-default);
-        transition: background 0.1s linear;
+        transition: background var(--animation-duration) linear;
 
         &:hover {
           color: var(--theme-primary-darker);

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

@@ -40,17 +40,18 @@ import { SdGap } from "../gap/sd-gap";
         display: block;
         padding: var(--gap-sm) var(--gap-default);
         cursor: pointer;
-        transition: background 0.1s ease-in;
+        font-family: var(--font-family-field);
+        transition: background var(--animation-duration) ease-in;
         background: var(--control-color);
 
         &:hover {
-          transition: background 0.1s ease-out;
+          transition: background var(--animation-duration) ease-out;
           background: rgba(0, 0, 0, 0.07);
         }
 
         &:focus {
           outline: none;
-          transition: background 0.1s ease-out;
+          transition: background var(--animation-duration) ease-out;
           background: rgba(0, 0, 0, 0.07);
         }
 

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

@@ -113,7 +113,7 @@ export type SelectModeValue<T> = {
           display: flex;
           overflow: hidden;
 
-          border: 1px solid var(--trans-lighter);
+          border: 1px solid var(--border-color-light);
           border-radius: var(--border-radius-default);
           background: var(--theme-secondary-lightest);
 
@@ -129,6 +129,7 @@ export type SelectModeValue<T> = {
             flex-grow: 1;
             padding: var(--gap-sm) var(--gap-default);
             cursor: pointer;
+            font-family: var(--font-family-field);
 
             > ._sd-select-control-content {
               flex: 1;

package/src/core/busy/sd-busy-container.ts

@@ -103,7 +103,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
               content: "";
               height: 4px;
               width: 100%;
-              transition: 0.1s ease-in;
+              transition: var(--animation-duration) ease-in;
               transition-property: transform;
               transform-origin: left;
               transform: scaleX(0);
@@ -124,7 +124,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
         &[data-sd-type="spinner"] {
           > ._screen > ._rect {
             transform: translateY(-100%);
-            transition: 0.1s ease-in;
+            transition: var(--animation-duration) ease-in;
             transition-property: transform;
 
             > ._indicator {
@@ -157,7 +157,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
           &[data-sd-busy="true"] {
             > ._screen > ._rect {
               transform: none;
-              transition: 0.1s ease-out;
+              transition: var(--animation-duration) ease-out;
             }
           }
         }

package/src/core/directive-input-signals.ts

@@ -15,15 +15,6 @@ export type UndefToOptional<T> = {
  * 컴포넌트/디렉티브의 InputSignal 프로퍼티에서 값 타입을 추출하는 유틸리티 타입
  *
  * InputSignal이 아닌 프로퍼티는 제외되며, undefined를 포함하는 필드는 optional로 변환된다.
- *
- * @example
- * ```typescript
- * class MyComponent {
- *   name = input.required<string>();
- *   age = input(0);
- * }
- * // DirectiveInputSignals<MyComponent> = { name: string; age: number }
- * ```
  */
 export type DirectiveInputSignals<T> = UndefToOptional<{
   [P in keyof T as T[P] extends InputSignal<any> ? P : never]: T[P] extends InputSignal<

package/src/core/provideSdAngular.ts

@@ -67,6 +67,20 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
         }
       });
 
+      const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
+      if (savedBlueprint != null) {
+        sdTheme.blueprint.set(savedBlueprint);
+      }
+
+      let prevBlueprint = sdTheme.blueprint();
+      effect(() => {
+        const blueprint = sdTheme.blueprint();
+        if (blueprint !== prevBlueprint) {
+          sdLocalStorage.set("sd-theme-blueprint", blueprint);
+          prevBlueprint = blueprint;
+        }
+      });
+
       const savedFontSize = sdLocalStorage.get("sd-theme-font-size");
       if (savedFontSize != null) {
         sdTheme.fontSize.set(savedFontSize);

package/src/core/ripple/setupRipple.ts

@@ -42,7 +42,7 @@ export function setupRipple(enableFn?: () => boolean): void {
         top: y - size + "px",
         left: x - size + "px",
 
-        transition: "var(--animation-duration) linear",
+        transition: "calc(2 * var(--animation-duration)) linear",
         transitionProperty: "transform, opacity",
         transform: "scale(0.1)",
       });

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

@@ -55,9 +55,9 @@ import { NgTemplateOutlet } from "@angular/common";
     </sd-busy-container>
 
     <ng-template #content>
-      <div class="flex-column fill">
+      <div class="flex-column fill bg-control">
         @if (commandTplRef()) {
-          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter bg-theme-gray-lightest">
+          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter">
             <ng-template [ngTemplateOutlet]="commandTplRef()" />
           </div>
         }
@@ -70,7 +70,7 @@ import { NgTemplateOutlet } from "@angular/common";
 
         @if (bottomCommandTplRef()) {
           <div
-            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest"
+            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter"
           >
             <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
           </div>

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

@@ -131,33 +131,33 @@ import {
             </sd-form>
           }
 
-          @if (!readonly() || toolTplRef()) {
+          @if (canCreate() || canDelete() || toolTplRef()) {
             <div class="flex-row gap-sm p-xs-default">
-              @if (!readonly()) {
+              @if (canCreate()) {
                 <sd-button [size]="'sm'" [theme]="'link-primary'" (click)="create.emit()">
                   <ng-icon [svg]="tablerCirclePlus" />
                   등록
                 </sd-button>
-                @if (selectMode() !== "single") {
+              }
+              @if (canDelete() && selectMode() !== "single") {
+                <sd-button
+                  [size]="'sm'"
+                  [theme]="'link-danger'"
+                  (click)="delete.emit(currSelectedItems())"
+                  [disabled]="!hasSelectedNotDeleted()"
+                >
+                  <ng-icon [svg]="tablerEraser" />
+                  선택 삭제
+                </sd-button>
+                @if (hasSelectedDeleted()) {
                   <sd-button
                     [size]="'sm'"
-                    [theme]="'link-danger'"
-                    (click)="delete.emit(currSelectedItems())"
-                    [disabled]="!hasSelectedNotDeleted()"
+                    [theme]="'link-warning'"
+                    (click)="restore.emit(currSelectedItems())"
                   >
-                    <ng-icon [svg]="tablerEraser" />
-                    선택 삭제
+                    <ng-icon [svg]="tablerRestore" />
+                    선택 복구
                   </sd-button>
-                  @if (hasSelectedDeleted()) {
-                    <sd-button
-                      [size]="'sm'"
-                      [theme]="'link-warning'"
-                      (click)="restore.emit(currSelectedItems())"
-                    >
-                      <ng-icon [svg]="tablerRestore" />
-                      선택 복구
-                    </sd-button>
-                  }
                 }
               }
 
@@ -190,7 +190,7 @@ import {
         [visiblePageCount]="visiblePageCount()"
         [(sorts)]="sorts"
         [useAutoSort]="totalPageCount() === 0"
-        [selectMode]="selectMode() ?? (readonly() ? undefined : 'multi')"
+        [selectMode]="selectMode() ?? (canDelete() ? 'multi' : undefined)"
         [(selectedKeys)]="selectedKeys"
         [getItemSelectableFn]="getItemSelectableFn()"
         [trackByFn]="trackByFn()"
@@ -199,7 +199,7 @@ import {
         [columnControlsInput]="columnControls()"
         (selectedKeysChange)="onSelectedKeysChange()"
       >
-        @if (inlineEditEnabled()) {
+        @if (canDelete() && inlineEdit()) {
           <sd-sheet-column
             [fixed]="true"
             [key]="'deleteButton'"
@@ -234,7 +234,9 @@ export class SdCrudList<TItem, TKey> {
   initialized = input(false);
   busyCount = model(0);
   restricted = input(false);
-  readonly = input(false);
+  canCreate = input(true);
+  canEdit = input(true);
+  canDelete = input(true);
   inlineEdit = input(true);
   viewType = input.required<SdViewType>();
   selectMode = input<"single" | "multi">();
@@ -277,7 +279,7 @@ export class SdCrudList<TItem, TKey> {
 
   columnControls = contentChildren(SdSheetColumn);
 
-  inlineEditEnabled = computed(() => !this.readonly() && this.inlineEdit());
+  inlineEditEnabled = computed(() => this.canEdit() && this.inlineEdit());
 
   hasSelectedDeleted = computed(() => this.currSelectedItems().some((it) => this.isDeleted(it)));
   hasSelectedNotDeleted = computed(() =>

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

@@ -102,7 +102,7 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
               height: 0;
               margin-bottom: 0;
               visibility: hidden;
-              transition: 0.1s linear;
+              transition: var(--animation-duration) linear;
               transition-property: height, margin-bottom, visibility;
             }
           }

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

@@ -91,7 +91,7 @@ import { SdResizeDirective, type SdResizeEvent } from "../../core/events/sd-resi
           height: 0;
           margin-bottom: 0;
           visibility: hidden;
-          transition: 0.1s linear;
+          transition: var(--animation-duration) linear;
           transition-property: height, margin-bottom, visibility;
         }
 

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

@@ -361,9 +361,9 @@ import { SdEvents } from "../../core/events/sd-events";
       $z-index-focus-row-indicator: 6;
       $z-index-resize-indicator: 7;
 
-      $border-color: var(--theme-gray-lighter);
-      $border-color-dark: var(--theme-gray-lighter);
-      $border-color-darker: var(--theme-gray-light);
+      $border-color: var(--border-color-lighter);
+      $border-color-dark: var(--border-color-lighter);
+      $border-color-darker: var(--border-color-light);
 
       $border-radius: var(--border-radius-default);
 
@@ -500,6 +500,7 @@ import { SdEvents } from "../../core/events/sd-events";
             }
 
             > tbody > tr > td {
+              font-family: var(--font-family-field);
               background: var(--control-color);
               vertical-align: top;
 

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

@@ -189,6 +189,7 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
         > ._editor-container {
           padding: var(--gap-sm);
           min-height: 6.25rem;
+          font-family: var(--font-family-field);
 
           > .tiptap {
             outline: none;

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

@@ -5,6 +5,9 @@ import { isPlatformBrowser } from "@angular/common";
 export class SdThemeProvider {
   dark = signal<boolean>(false);
 
+  // 블루프린트(엔지니어링 도면) 테마 — dark 토글과 직교. dark 와 조합해 4면을 만든다.
+  blueprint = signal<boolean>(false);
+
   readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
 
   fontSize = signal<number>(12);
@@ -17,6 +20,10 @@ export class SdThemeProvider {
       document.body.classList.toggle("sd-theme-dark", this.dark());
     });
 
+    effect(() => {
+      document.body.classList.toggle("sd-theme-blueprint", this.blueprint());
+    });
+
     effect(() => {
       document.documentElement.style.fontSize = `${this.fontSize()}px`;
     });

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

@@ -54,6 +54,10 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
             <span>다크 모드</span>
             <sd-switch [(value)]="_sdTheme.dark" />
           </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>블루프린트</span>
+            <sd-switch [(value)]="_sdTheme.blueprint" />
+          </div>
         </div>
       </sd-dropdown-popup>
     </sd-dropdown>

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

@@ -25,11 +25,11 @@ import { filter } from "rxjs";
         position: relative;
         height: 100%;
         padding-left: var(--sidebar-width);
-        transition: padding-left 0.1s ease-out;
+        transition: padding-left var(--animation-duration) ease-out;
 
         &[data-sd-toggle="true"] {
           padding-left: 0;
-          transition: padding-left 0.1s ease-in;
+          transition: padding-left var(--animation-duration) ease-in;
         }
 
         > ._backdrop {
@@ -52,7 +52,7 @@ import { filter } from "rxjs";
             background: var(--background-rev-color);
             opacity: 0;
             pointer-events: none;
-            transition: opacity 0.3s ease-in-out;
+            transition: opacity var(--animation-duration) ease-in-out;
           }
 
           &[data-sd-toggle="true"] {

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

@@ -33,25 +33,25 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
         width: var(--sidebar-width);
         height: 100%;
         //background: var(--control-color);
-        background: var(--theme-gray-lightest);
+        //background: var(--theme-gray-lightest);
         //border-right: 1px solid var(--border-color-lighter);
 
         @media not all and (max-width: variables.$breakpoint-mobile) {
-          transition: transform 0.1s ease-out;
+          transition: transform var(--animation-duration) ease-out;
 
           &[data-sd-toggle="true"] {
             transform: translateX(-100%);
-            transition: transform 0.1s ease-in;
+            transition: transform var(--animation-duration) ease-in;
           }
         }
 
         @media all and (max-width: variables.$breakpoint-mobile) {
-          transition: transform 0.3s ease-in;
+          transition: transform var(--animation-duration) ease-in;
           transform: translateX(-100%);
 
           &[data-sd-toggle="true"] {
             transform: none;
-            transition: transform 0.3s ease-out;
+            transition: transform var(--animation-duration) ease-out;
             @include mixins.elevation(16);
           }
         }