@simplysm/angular 14.1.20 → 14.2.1

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

@@ -43,11 +43,10 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
     /* language=SCSS */ `
       @use "../../../scss/commons/variables";
       @use "../../../scss/commons/mixins";
-      @use "sass:map";
 
       sd-toast {
         display: block;
-        margin-bottom: var(--gap-sm);
+        margin-bottom: var(--sd-gap-sm);
         text-align: center;
         width: 100%;
         pointer-events: none;
@@ -55,43 +54,43 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
         > ._sd-toast-block {
           display: inline-block;
           text-align: left;
-          color: var(--text-trans-rev-default);
           transform: translateY(-100%);
-          border-radius: var(--border-radius-lg);
+          border-radius: var(--sd-radius-lg);
           opacity: 0;
           @include mixins.elevation(12);
           pointer-events: auto;
 
           > ._sd-toast-message {
-            padding: var(--gap-default) var(--gap-lg);
+            padding: var(--sd-gap-default) var(--sd-gap-lg);
             word-break: break-all;
             white-space: pre-wrap;
           }
 
           > ._sd-toast-progress {
-            background: var(--theme-gray-default);
+            background-color: var(--sd-bg-state-active);
             height: 4px;
-            border-radius: var(--border-radius-xl);
+            border-radius: var(--sd-radius-xl);
             margin: 0 4px 4px 4px;
 
             > ._sd-toast-progress-bar {
-              border-radius: var(--border-radius-xl);
+              border-radius: var(--sd-radius-xl);
               height: 4px;
               transition: width 1s ease-out;
             }
           }
         }
 
-        @each $theme-name, $theme-map in map.get(variables.$vars, theme) {
-          &[data-sd-theme="#{$theme-name}"] {
+        @each $key in variables.$theme-keys {
+          &[data-sd-theme="#{$key}"] {
             > ._sd-toast-block {
-              background: var(--theme-#{$theme-name}-default);
+              background-color: var(--sd-bg-#{$key}-solid);
+              color: var(--sd-tx-#{$key}-solid);
 
               > ._sd-toast-progress {
-                background: var(--theme-#{$theme-name}-darker);
+                background-color: var(--sd-bg-state-active);
 
                 > ._sd-toast-progress-bar {
-                  background: var(--theme-#{$theme-name}-lighter);
+                  background-color: var(--sd-bg-#{$key}-subtle);
                 }
               }
             }
@@ -101,7 +100,7 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
         &[data-sd-open="true"] {
           > ._sd-toast-block {
             transform: none;
-            transition: var(--animation-duration) ease-out;
+            transition: var(--sd-animation-duration) ease-out;
             transition-property: transform, opacity;
             opacity: 1;
           }
@@ -110,7 +109,7 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
         &[data-sd-open="false"] {
           > ._sd-toast-block {
             transform: translateY(-100%);
-            transition: var(--animation-duration) ease-in;
+            transition: var(--sd-animation-duration) ease-in;
             transition-property: transform, opacity;
             opacity: 0;
           }
@@ -118,11 +117,11 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
 
         @media all and (max-width: variables.$breakpoint-mobile) {
           > ._sd-toast-block {
-            border-radius: calc(var(--line-height) / 2);
+            border-radius: calc(var(--sd-line-height) / 2);
             transform: translateY(100%);
 
             > ._sd-toast-message {
-              padding: var(--gap-xs) var(--gap-default);
+              padding: var(--sd-gap-xs) var(--sd-gap-default);
             }
           }
 

package/src/core/validation/setupInvalid.ts

@@ -46,12 +46,12 @@ function createIndicatorEl(renderer: Renderer2, hostEl: HTMLElement): HTMLDivEle
     display: "none",
     position: "absolute",
     zIndex: "1",
-    background: "var(--theme-danger-default)",
+    backgroundColor: "var(--sd-bg-danger-solid)",
 
-    top: "var(--gap-xs)",
-    left: "var(--gap-xs)",
-    width: "var(--gap-sm)",
-    height: "var(--gap-sm)",
+    top: "var(--sd-gap-xs)",
+    left: "var(--sd-gap-xs)",
+    width: "var(--sd-gap-sm)",
+    height: "var(--sd-gap-sm)",
     borderRadius: "100%",
 
     userSelect: "none",

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

@@ -1,122 +1,120 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  contentChild,
-  effect,
-  inject,
-  input,
-  model,
-  type TemplateRef,
-  untracked,
-  ViewEncapsulation,
-} from "@angular/core";
-import { injectViewTitleSignal } from "../../core/routing/injectViewTitleSignal";
-import { SdBusyContainer } from "../../core/busy/sd-busy-container";
-import { SdSharedDataProvider } from "../../core/shared-data/sd-shared-data.provider";
-import { SdToastProvider } from "../../core/toast/sd-toast.provider";
-import { SdTopbar } from "../../layout/topbar/sd-topbar";
-import { SdTopbarContainer } from "../../layout/topbar/sd-topbar-container";
-import type { SdViewType } from "../../core/routing/injectViewTypeSignal";
-import { NgIcon } from "@ng-icons/core";
-import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
-import { NgTemplateOutlet } from "@angular/common";
-
-@Component({
-  selector: "sd-base-container",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdBusyContainer, NgIcon, SdTopbarContainer, NgTemplateOutlet, SdTopbar],
-  template: `
-    <sd-busy-container [busy]="initialized() && busyCount() > 0">
-      @if (initialized()) {
-        @if (restricted()) {
-          <div class="fill tx-theme-gray-light p-xxl tx-center">
-            <br />
-            <ng-icon [svg]="tablerAlertTriangle" [size]="'5rem'" />
-            <br />
-            <br />
-            '{{ viewTitle() }}'에 대한 사용권한이 없습니다. 시스템 관리자에게 문의하세요.
-          </div>
-        } @else if (viewType() === "page") {
-          <sd-topbar-container>
-            <sd-topbar>
-              <h5 class="tx-trans-light">{{ viewTitle() }}</h5>
-
-              <ng-template [ngTemplateOutlet]="topbarTplRef()" />
-            </sd-topbar>
-
-            <ng-template [ngTemplateOutlet]="content" />
-          </sd-topbar-container>
-        } @else {
-          <ng-template [ngTemplateOutlet]="content" />
-        }
-      }
-    </sd-busy-container>
-
-    <ng-template #content>
-      <div class="flex-column fill bg-control">
-        @if (commandTplRef()) {
-          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter">
-            <ng-template [ngTemplateOutlet]="commandTplRef()" />
-          </div>
-        }
-
-        <div class="flex-fill">
-          @if (contentTplRef()) {
-            <ng-template [ngTemplateOutlet]="contentTplRef()" />
-          }
-        </div>
-
-        @if (bottomCommandTplRef()) {
-          <div
-            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter"
-          >
-            <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
-          </div>
-        }
-      </div>
-    </ng-template>
-  `,
-})
-export class SdBaseContainer {
-  private readonly _sdSharedData = inject(SdSharedDataProvider, { optional: true });
-  private readonly _sdToast = inject(SdToastProvider);
-
-  viewTitle = injectViewTitleSignal();
-
-  ready = model(false);
-  initialized = input(false);
-  busyCount = model(0);
-
-  restricted = input(false);
-
-  viewType = input.required<SdViewType>();
-
-  topbarTplRef = contentChild<TemplateRef<void>>("topbarTpl");
-  commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
-  contentTplRef = contentChild<TemplateRef<void>>("contentTpl");
-  bottomCommandTplRef = contentChild<TemplateRef<void>>("bottomCommandTpl");
-
-  constructor() {
-    effect(() => {
-      if (this.restricted()) {
-        this.ready.set(true);
-        return;
-      }
-
-      void untracked(async () => {
-        if (this._sdSharedData) {
-          this.busyCount.update((v) => v + 1);
-          await this._sdToast.try(async () => {
-            await this._sdSharedData!.wait();
-          });
-          this.busyCount.update((v) => v - 1);
-        }
-        this.ready.set(true);
-      });
-    });
-  }
-
-  protected readonly tablerAlertTriangle = tablerAlertTriangle;
-}
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  effect,
+  inject,
+  input,
+  model,
+  type TemplateRef,
+  untracked,
+  ViewEncapsulation,
+} from "@angular/core";
+import { injectViewTitleSignal } from "../../core/routing/injectViewTitleSignal";
+import { SdBusyContainer } from "../../core/busy/sd-busy-container";
+import { SdSharedDataProvider } from "../../core/shared-data/sd-shared-data.provider";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { SdTopbar } from "../../layout/topbar/sd-topbar";
+import { SdTopbarContainer } from "../../layout/topbar/sd-topbar-container";
+import type { SdViewType } from "../../core/routing/injectViewTypeSignal";
+import { NgIcon } from "@ng-icons/core";
+import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
+import { NgTemplateOutlet } from "@angular/common";
+
+@Component({
+  selector: "sd-base-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdBusyContainer, NgIcon, SdTopbarContainer, NgTemplateOutlet, SdTopbar],
+  template: `
+    <sd-busy-container [busy]="initialized() && busyCount() > 0">
+      @if (initialized()) {
+        @if (restricted()) {
+          <div class="fill tx-faint p-xxl tx-center">
+            <br />
+            <ng-icon [svg]="tablerAlertTriangle" [size]="'5rem'" />
+            <br />
+            <br />
+            '{{ viewTitle() }}'에 대한 사용권한이 없습니다. 시스템 관리자에게 문의하세요.
+          </div>
+        } @else if (viewType() === "page") {
+          <sd-topbar-container>
+            <sd-topbar>
+              <h5 class="tx-muted">{{ viewTitle() }}</h5>
+
+              <ng-template [ngTemplateOutlet]="topbarTplRef()" />
+            </sd-topbar>
+
+            <ng-template [ngTemplateOutlet]="content" />
+          </sd-topbar-container>
+        } @else {
+          <ng-template [ngTemplateOutlet]="content" />
+        }
+      }
+    </sd-busy-container>
+
+    <ng-template #content>
+      <div class="flex-column fill bg-control">
+        @if (commandTplRef()) {
+          <div class="p-sm-default flex-row gap-default bdb bdb-soft">
+            <ng-template [ngTemplateOutlet]="commandTplRef()" />
+          </div>
+        }
+
+        <div class="flex-fill">
+          @if (contentTplRef()) {
+            <ng-template [ngTemplateOutlet]="contentTplRef()" />
+          }
+        </div>
+
+        @if (bottomCommandTplRef()) {
+          <div class="p-sm-default flex-row main-align-end gap-sm bdt bdt-hairline">
+            <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
+          </div>
+        }
+      </div>
+    </ng-template>
+  `,
+})
+export class SdBaseContainer {
+  private readonly _sdSharedData = inject(SdSharedDataProvider, { optional: true });
+  private readonly _sdToast = inject(SdToastProvider);
+
+  viewTitle = injectViewTitleSignal();
+
+  ready = model(false);
+  initialized = input(false);
+  busyCount = model(0);
+
+  restricted = input(false);
+
+  viewType = input.required<SdViewType>();
+
+  topbarTplRef = contentChild<TemplateRef<void>>("topbarTpl");
+  commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
+  contentTplRef = contentChild<TemplateRef<void>>("contentTpl");
+  bottomCommandTplRef = contentChild<TemplateRef<void>>("bottomCommandTpl");
+
+  constructor() {
+    effect(() => {
+      if (this.restricted()) {
+        this.ready.set(true);
+        return;
+      }
+
+      void untracked(async () => {
+        if (this._sdSharedData) {
+          this.busyCount.update((v) => v + 1);
+          await this._sdToast.try(async () => {
+            await this._sdSharedData!.wait();
+          });
+          this.busyCount.update((v) => v - 1);
+        }
+        this.ready.set(true);
+      });
+    });
+  }
+
+  protected readonly tablerAlertTriangle = tablerAlertTriangle;
+}

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

@@ -28,7 +28,7 @@ import {
         flex-wrap: nowrap;
         white-space: nowrap;
         height: 100%;
-        @include mixins.flex-direction(row, var(--gap-lg));
+        @include mixins.flex-direction(row, var(--sd-gap-lg));
       }
     `,
   ],

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

@@ -16,10 +16,7 @@ import {
 } from "@angular/core";
 import { SdBusyContainer } from "../../core/busy/sd-busy-container";
 import { SdCheckbox } from "../../controls/checkbox/sd-checkbox";
-import {
-  SdKanbanBoard,
-  type SdKanbanDropTarget,
-} from "./sd-kanban-board";
+import { SdKanbanBoard, type SdKanbanDropTarget } from "./sd-kanban-board";
 import { SdKanban } from "./sd-kanban";
 import { SdAnchor } from "../../controls/button/sd-anchor";
 import { NgIcon } from "@ng-icons/core";
@@ -89,20 +86,20 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
       sd-kanban-lane {
         > .flex-fill {
           > sd-busy-container {
-            padding: var(--gap-xl) var(--gap-lg);
-            background: var(--theme-gray-lightest);
-            border-radius: var(--border-radius-default);
+            padding: var(--sd-gap-xl) var(--sd-gap-lg);
+            background-color: var(--sd-bg-gray-subtle);
+            border-radius: var(--sd-radius-default);
             height: 100%;
 
             > ._drop-position {
               pointer-events: none;
-              border-radius: var(--border-radius-default);
-              background: var(--trans-light);
+              border-radius: var(--sd-radius-default);
+              background-color: var(--sd-bg-state-active);
 
               height: 0;
               margin-bottom: 0;
               visibility: hidden;
-              transition: var(--animation-duration) linear;
+              transition: var(--sd-animation-duration) linear;
               transition-property: height, margin-bottom, visibility;
             }
           }
@@ -110,7 +107,7 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
 
         &[data-sd-drag-over="true"] {
           > .flex-fill > sd-busy-container > ._drop-position {
-            margin-bottom: var(--gap-lg);
+            margin-bottom: var(--sd-gap-lg);
             visibility: visible;
           }
         }
@@ -119,9 +116,7 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
   ],
 })
 export class SdKanbanLane<L, T> implements SdKanbanDropTarget<L, T> {
-  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(
-    forwardRef(() => SdKanbanBoard),
-  );
+  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(forwardRef(() => SdKanbanBoard));
 
   busy = input(false, { transform: booleanAttribute });
 

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

@@ -11,11 +11,7 @@ import {
   signal,
   ViewEncapsulation,
 } from "@angular/core";
-import {
-  SdKanbanBoard,
-  type SdKanbanDragRef,
-  type SdKanbanDropTarget,
-} from "./sd-kanban-board";
+import { SdKanbanBoard, type SdKanbanDragRef, type SdKanbanDropTarget } from "./sd-kanban-board";
 import { SdKanbanLane } from "./sd-kanban-lane";
 import { SdResizeDirective, type SdResizeEvent } from "../../core/events/sd-resize";
 
@@ -85,19 +81,19 @@ import { SdResizeDirective, type SdResizeEvent } from "../../core/events/sd-resi
         }
 
         > ._drop-position {
-          border-radius: var(--border-radius-default);
-          background: var(--trans-light);
+          border-radius: var(--sd-radius-default);
+          background-color: var(--sd-bg-state-active);
 
           height: 0;
           margin-bottom: 0;
           visibility: hidden;
-          transition: var(--animation-duration) linear;
+          transition: var(--sd-animation-duration) linear;
           transition-property: height, margin-bottom, visibility;
         }
 
         &[data-sd-drag-over="true"] {
           > ._drop-position {
-            margin-bottom: var(--gap-lg);
+            margin-bottom: var(--sd-gap-lg);
             visibility: visible;
           }
         }
@@ -105,19 +101,15 @@ import { SdResizeDirective, type SdResizeEvent } from "../../core/events/sd-resi
         > .card {
           white-space: normal;
           user-select: none;
-          margin-bottom: var(--gap-lg);
+          margin-bottom: var(--sd-gap-lg);
         }
       }
     `,
   ],
 })
 export class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T> {
-  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(
-    forwardRef(() => SdKanbanBoard),
-  );
-  private readonly _laneControl = inject<SdKanbanLane<L, T>>(
-    forwardRef(() => SdKanbanLane),
-  );
+  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(forwardRef(() => SdKanbanBoard));
+  private readonly _laneControl = inject<SdKanbanLane<L, T>>(forwardRef(() => SdKanbanLane));
   private readonly _elRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
   readonly thisRef = this;
@@ -186,9 +178,7 @@ export class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget
 
   onCardResize(event: SdResizeEvent) {
     const marginBottom = getComputedStyle(event.target).marginBottom;
-    this.cardHeight.set(
-      event.target.clientHeight + (parseInt(marginBottom) || 0),
-    );
+    this.cardHeight.set(event.target.clientHeight + (parseInt(marginBottom) || 0));
   }
 
   onCardDragStart() {

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

@@ -21,13 +21,7 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [
-    SdTypedTemplate,
-    NgTemplateOutlet,
-    SdCollapseIcon,
-    SdCheckbox,
-    SdAnchor,
-  ],
+  imports: [SdTypedTemplate, NgTemplateOutlet, SdCollapseIcon, SdCheckbox, SdAnchor],
   styles: [
     /* language=SCSS */ `
       sd-permission-table {
@@ -36,22 +30,22 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
 
           > * > tr {
             > * {
-              padding: var(--gap-sm) var(--gap-lg);
+              padding: var(--sd-gap-sm) var(--sd-gap-lg);
               position: sticky;
               top: 0;
               border-top: 1px solid transparent;
               border-bottom: 1px solid transparent;
 
-              color: var(--text-trans-default);
+              color: var(--sd-tx-default);
 
               > * {
-                color: var(--text-trans-default) !important;
+                color: var(--sd-tx-default) !important;
               }
 
               &._title {
                 border-top-left-radius: 14px;
                 border-bottom-left-radius: 14px;
-                padding-left: var(--gap-lg);
+                padding-left: var(--sd-gap-lg);
               }
             }
 
@@ -63,12 +57,12 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
               > * {
                 &._title,
                 &._after {
-                  background: var(--theme-info-default);
+                  background-color: var(--sd-permission-group-bg);
 
-                  color: var(--text-trans-rev-default);
+                  color: var(--sd-permission-group-tx);
 
                   > * {
-                    color: var(--text-trans-rev-default) !important;
+                    color: var(--sd-permission-group-tx) !important;
                   }
                 }
               }
@@ -78,7 +72,7 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
               > * {
                 &._title,
                 &._after {
-                  background: var(--theme-info-lightest);
+                  background-color: var(--sd-bg-info-subtle);
                 }
               }
             }
@@ -87,7 +81,7 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
               > * {
                 &._title,
                 &._after {
-                  background: var(--theme-warning-lightest);
+                  background-color: var(--sd-bg-warning-subtle);
                 }
               }
             }
@@ -96,7 +90,7 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
               > * {
                 &._title,
                 &._after {
-                  background: var(--theme-success-lightest);
+                  background-color: var(--sd-bg-success-subtle);
                 }
               }
             }
@@ -130,9 +124,7 @@ import { SdAnchor } from "../../controls/button/sd-anchor";
       let-depth="depth"
       let-parent="parent"
     >
-      @if (
-        (item.children && item.children.length !== 0) || (item.perms && item.perms.length > 0)
-      ) {
+      @if ((item.children && item.children.length !== 0) || (item.perms && item.perms.length > 0)) {
         <tr
           [attr.data-sd-collapse]="!!parent && getIsPermCollapsed(parent)"
           [attr.data-sd-theme]="

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

@@ -40,15 +40,7 @@ import { tablerExternalLink } from "@ng-icons/tabler-icons";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [
-    NgTemplateOutlet,
-    SdTextfield,
-    SdPagination,
-    SdAnchor,
-    SdList,
-    SdListItem,
-    NgIcon,
-  ],
+  imports: [NgTemplateOutlet, SdTextfield, SdPagination, SdAnchor, SdList, SdListItem, NgIcon],
   host: {
     class: "flex-column fill",
   },
@@ -99,7 +91,7 @@ import { tablerExternalLink } from "@ng-icons/tabler-icons";
               @if (undefinedTplRef()) {
                 <ng-template [ngTemplateOutlet]="undefinedTplRef()!" />
               } @else {
-                <span class="tx-theme-gray-default">미지정</span>
+                <span class="tx-gray">미지정</span>
               }
             </sd-list-item>
           }
@@ -132,9 +124,7 @@ export class SdSharedDataSelectList<
   private readonly _sdModal = inject(SdModalProvider);
 
   selectedItem = model<TItem>();
-  canChangeFn = input<(item: TItem | undefined) => boolean | Promise<boolean>>(
-    () => true,
-  );
+  canChangeFn = input<(item: TItem | undefined) => boolean | Promise<boolean>>(() => true);
 
   items = input.required<TItem[]>();
   selectedIcon = input<string>();
@@ -168,9 +158,7 @@ export class SdSharedDataSelectList<
     let result = this.items().filter((item) => !item.__isHidden);
 
     if (!str.isNullOrEmpty(this.searchText())) {
-      result = result.filter((item) =>
-        matchesSearchText(item.__searchText, this.searchText()),
-      );
+      result = result.filter((item) => matchesSearchText(item.__searchText, this.searchText()));
     }
 
     if (this.filterFn() != null) {
@@ -207,9 +195,7 @@ export class SdSharedDataSelectList<
       const items = this.items();
       const current = untracked(() => this.selectedItem());
       if (current != null) {
-        const updated = items.find(
-          (item) => item.__valueKey === current.__valueKey,
-        );
+        const updated = items.find((item) => item.__valueKey === current.__valueKey);
         if (updated !== current) {
           this.selectedItem.set(updated);
         }