@simplysm/angular 14.0.1 → 14.0.4

package/scss/commons/_styles.scss

@@ -206,43 +206,13 @@ form {
   border: none !important;
 }
 
-.bd-trans {
+.bd-transparent {
   border-color: transparent !important;
 }
 
 @each $dir in (top, right, bottom, left) {
   $d: string.slice($dir, 1, 1);
-  .bd#{$d} {
-    border-#{$dir}: 1px solid !important;
-  }
-
-  @each $key, $val in map.get(variables.$vars, theme) {
-    @each $key1, $val1 in $val {
-      .bd#{$d}-theme-#{$key}-#{$key1} {
-        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
-      }
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, trans) {
-    .bd#{$d}-trans-#{$key} {
-      border-#{$dir}-color: var(--trans-#{$key}) !important;
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, border-color) {
-    .bd#{$d}-color-#{$key} {
-      border-#{$dir}-color: var(--border-color-#{$key}) !important;
-    }
-  }
-
-  .bd#{$d}-none {
-    border-#{$dir}: none !important;
-  }
-
-  .bd#{$d}-trans {
-    border-#{$dir}-color: transparent !important;
-  }
+  @include mixins.border-direction-variants($dir, $d);
 }
 
 //-- BORDER WIDTH
@@ -261,29 +231,24 @@ form {
 
 //-- BORDER RADIUS
 
+$radius-dirs: (
+  t: (top-right, top-left),
+  b: (bottom-right, bottom-left),
+  l: (top-left, bottom-left),
+  r: (top-right, bottom-right),
+);
+
 @each $key, $val in map.get(variables.$vars, border-radius) {
   .bd-radius-#{$key} {
     border-radius: var(--border-radius-#{$key}) !important;
   }
 
-  .bdt-radius-#{$key} {
-    border-top-right-radius: var(--border-radius-#{$key}) !important;
-    border-top-left-radius: var(--border-radius-#{$key}) !important;
-  }
-
-  .bdb-radius-#{$key} {
-    border-bottom-right-radius: var(--border-radius-#{$key}) !important;
-    border-bottom-left-radius: var(--border-radius-#{$key}) !important;
-  }
-
-  .bdl-radius-#{$key} {
-    border-top-left-radius: var(--border-radius-#{$key}) !important;
-    border-bottom-left-radius: var(--border-radius-#{$key}) !important;
-  }
-
-  .bdr-radius-#{$key} {
-    border-top-right-radius: var(--border-radius-#{$key}) !important;
-    border-bottom-right-radius: var(--border-radius-#{$key}) !important;
+  @each $d, $corners in $radius-dirs {
+    .bd#{$d}-radius-#{$key} {
+      @each $corner in $corners {
+        border-#{$corner}-radius: var(--border-radius-#{$key}) !important;
+      }
+    }
   }
 }
 
@@ -297,21 +262,7 @@ form {
   .m-#{$key} {
     margin: var(--gap-#{$key}) !important;
   }
-}
-
-@each $key, $val in map.get(variables.$vars, gap) {
-  @each $key1, $val1 in map.get(variables.$vars, gap) {
-    .p-#{$key}-#{$key1} {
-      padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
-    }
-
-    .m-#{$key}-#{$key1} {
-      margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
-    }
-  }
-}
 
-@each $key, $val in map.get(variables.$vars, gap) {
   .pv-#{$key} {
     padding-top: var(--gap-#{$key}) !important;
     padding-bottom: var(--gap-#{$key}) !important;
@@ -331,9 +282,7 @@ form {
     margin-left: var(--gap-#{$key}) !important;
     margin-right: var(--gap-#{$key}) !important;
   }
-}
 
-@each $key, $val in map.get(variables.$vars, gap) {
   .sw-#{$key} {
     width: var(--gap-#{$key}) !important;
   }
@@ -341,9 +290,7 @@ form {
   .sh-#{$key} {
     height: var(--gap-#{$key}) !important;
   }
-}
 
-@each $key, $val in map.get(variables.$vars, gap) {
   @each $dir in (top, right, bottom, left) {
     $d: string.slice($dir, 1, 1);
 
@@ -361,6 +308,18 @@ form {
   }
 }
 
+@each $key, $val in map.get(variables.$vars, gap) {
+  @each $key1, $val1 in map.get(variables.$vars, gap) {
+    .p-#{$key}-#{$key1} {
+      padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+    }
+
+    .m-#{$key}-#{$key1} {
+      margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+    }
+  }
+}
+
 //-- TEXT ALIGN
 
 @each $align in (left, right, center) {

package/scss/commons/_variables.scss

@@ -44,6 +44,12 @@ $colors: (
   );
 }
 
+// Breakpoints for media queries (CSS custom properties cannot be used in media queries)
+$breakpoint-mobile: 520px;
+$breakpoint-xxs: 800px;
+$breakpoint-xs: 1024px;
+$breakpoint-sm: 1280px;
+
 $vars: (
   theme: (
     "gray": color-map(map.get($colors, gray), -5%),
@@ -129,6 +135,7 @@ $vars: (
   background-color: white,
   background-rev-color: black,
   control-color: white,
+  busy-overlay-bg: rgba(255, 255, 255, 0.6),
   animation-duration: 0.2s,
   elevation-size: 0.0833rem,
   sidebar: (

package/scss/controls/_card.scss

@@ -0,0 +1,29 @@
+@use "../commons/mixins";
+
+.card {
+  display: block;
+  background: var(--control-color);
+  border-radius: var(--border-radius-default);
+  transition: box-shadow 0.3s ease-in-out;
+  @include mixins.elevation(2);
+  animation: sd-card var(--animation-duration) ease-out;
+  opacity: 0;
+  transform: translateY(-1em);
+  animation-fill-mode: forwards;
+
+  &:hover,
+  &:focus-within {
+    @include mixins.elevation(4);
+  }
+}
+
+@keyframes sd-card {
+  from {
+    opacity: 0;
+    transform: translateY(-1em);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}

package/scss/controls/_flex.scss

@@ -0,0 +1,38 @@
+@use "sass:map";
+@use "../commons/variables";
+@use "../commons/mixins";
+
+.flex-row {
+  display: flex !important;
+  flex-wrap: nowrap;
+  @include mixins.flex-direction(row);
+}
+
+.flex-column {
+  display: flex !important;
+  flex-wrap: nowrap;
+  @include mixins.flex-direction(column);
+}
+
+.flex-row-inline {
+  display: inline-flex !important;
+  @include mixins.flex-direction(row);
+}
+
+.flex-column-inline {
+  display: inline-flex !important;
+  @include mixins.flex-direction(column);
+}
+
+.flex-auto {
+  flex: 1 0 auto;
+}
+
+.flex-fill {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.flex-min {
+  flex: 0 0 0;
+}

package/scss/controls/_form-box.scss

@@ -0,0 +1,49 @@
+@use "../commons/mixins";
+
+.form-box {
+  display: flex;
+  @include mixins.flex-direction(column, var(--gap-default));
+
+  > div,
+  > .form-box-item {
+    display: block;
+
+    > label {
+      display: block;
+      margin-bottom: var(--gap-xs);
+      white-space: nowrap;
+      font-weight: bold;
+      border: 1px solid transparent;
+    }
+
+    @media all and (pointer: coarse) {
+      margin-bottom: var(--gap-default);
+
+      > label {
+        margin-bottom: var(--gap-xxs);
+      }
+    }
+  }
+}
+
+.form-box-inline {
+  display: inline-flex;
+  flex-wrap: wrap;
+  @include mixins.flex-direction(row, var(--gap-sm));
+
+  > div,
+  > .form-box-item {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    > label {
+      display: block;
+      white-space: nowrap;
+      font-weight: bold;
+      border: 1px solid transparent;
+      padding-left: var(--gap-sm);
+      padding-right: var(--gap-sm);
+    }
+  }
+}

package/scss/controls/_form-table.scss

@@ -0,0 +1,45 @@
+.form-table {
+  display: table;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 0;
+
+  > * > tr,
+  > tr {
+    > * {
+      padding: 0 var(--gap-default) var(--gap-sm) 0;
+      vertical-align: middle;
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    &:last-child > * {
+      padding-bottom: 0;
+    }
+
+    > th {
+      padding-left: var(--gap-sm);
+      text-align: right;
+      width: 0;
+      white-space: nowrap;
+
+      &.form-table-header {
+        text-align: left;
+        line-height: var(--line-height);
+        margin-bottom: var(--gap-sm);
+        color: var(--theme-gray-default);
+        font-weight: normal;
+
+        padding: var(--gap-xxl) 0 var(--gap-sm) 0;
+        font-size: var(--font-size-sm);
+      }
+    }
+  }
+
+  > tbody:first-child > tr:first-child > th.form-table-header,
+  > tr:first-child > th.form-table-header {
+    padding-top: 0;
+  }
+}

package/scss/controls/_grid.scss

@@ -0,0 +1,36 @@
+@use "../commons/variables";
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+@for $i from 1 through 12 {
+  .grid-#{$i} {
+    grid-column-end: span #{$i};
+  }
+}
+
+@media (max-width: variables.$breakpoint-sm) {
+  @for $i from 1 through 12 {
+    .grid-sm-#{$i} {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@media (max-width: variables.$breakpoint-xs) {
+  @for $i from 1 through 12 {
+    .grid-xs-#{$i} {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@media (max-width: variables.$breakpoint-xxs) {
+  @for $i from 1 through 12 {
+    .grid-xxs-#{$i} {
+      grid-column-end: span #{$i};
+    }
+  }
+}

package/scss/controls/_table.scss

@@ -0,0 +1,99 @@
+$border-color-light: var(--theme-gray-lighter);
+$border-color-dark: var(--border-color-default);
+
+.table {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-right: 1px solid $border-color-dark;
+  border-bottom: 1px solid $border-color-dark;
+
+  > * > tr,
+  > tr {
+    > * {
+      padding: var(--gap-xs) var(--gap-sm);
+      border-left: 1px solid $border-color-light;
+      border-top: 1px solid $border-color-light;
+
+      &:first-child {
+        border-left: 1px solid $border-color-dark;
+      }
+    }
+
+    &:first-child > * {
+      border-top: 1px solid $border-color-dark;
+    }
+  }
+
+  > tbody > tr,
+  > tr {
+    &:first-child {
+      border-top: 1px solid $border-color-dark;
+    }
+
+    > th {
+      background: var(--theme-gray-lightest);
+    }
+
+    > td {
+      vertical-align: top;
+    }
+  }
+
+  > thead > tr > th {
+    background: var(--theme-gray-lightest);
+  }
+
+  &.table-inset {
+    border-right: none;
+    border-bottom: none;
+
+    > * > tr,
+    > tr {
+      > *:first-child {
+        border-left: none;
+      }
+    }
+
+    > *:first-child > tr:first-child,
+    > tr:first-child {
+      > * {
+        border-top: none;
+      }
+    }
+  }
+
+  &.table-inline {
+    width: auto;
+  }
+
+  &.table-bd-v {
+    border-bottom: none;
+
+    > * > tr,
+    > tr {
+      > * {
+        border-top: none;
+      }
+    }
+  }
+
+  &.table-bd-h {
+    border-right: none;
+
+    > tbody > tr,
+    > tr {
+      > td:first-child {
+        border-left: none;
+      }
+    }
+
+    > * > tr,
+    > tr {
+      > * {
+        border-left: none;
+      }
+    }
+  }
+}

package/scss/styles.scss

@@ -1,6 +1,13 @@
 @use "commons/theme-variables";
 @use "commons/styles";
 
+@use "controls/flex";
+@use "controls/grid";
+@use "controls/card";
+@use "controls/form-box";
+@use "controls/form-table";
+@use "controls/table";
+
 ng-icon {
   --ng-icon__size: 1.33em;
   vertical-align: -0.2em !important;

package/scss/themes/_variables-dark.scss

@@ -33,6 +33,7 @@ $vars: (
     default: rgba(255, 255, 255, 0.2),
     light: rgba(255, 255, 255, 0.1),
     lighter: rgba(255, 255, 255, 0.03),
+    lightest: rgba(255, 255, 255, 0.05),
     rev-default: rgba(0, 0, 0, 0.1),
     rev-light: rgba(0, 0, 0, 0.2),
     rev-lighter: rgba(0, 0, 0, 0.3),
@@ -58,6 +59,7 @@ $vars: (
   background-color: #000,
   background-rev-color: #fff,
   control-color: #000,
+  busy-overlay-bg: rgba(0, 0, 0, 0.6),
   sheet: (
     bg: var(--theme-gray-lightest),
   ),

package/src/core/commons.ts

@@ -0,0 +1,4 @@
+export const TXT_CHANGE_IGNORE_CONFIRM = `
+변경사항이 있습니다. 모든 변경사항을 무시하시겠습니까?
+- 확인: 변경사항을 무시하고, 현재 요청한 작업을 수행
+- 취소: 현재 요청한 작업을 취소하고, 변경사항 재검토`.trim();

package/src/core/directives/sd-events.directive.ts

@@ -21,18 +21,18 @@ import type { ISdResizeEvent } from "../plugins/events/sd-resize-event.plugin";
   standalone: true,
 })
 export class SdEventsDirective {
-  // Click
+  // 클릭
   "click.capture" = output<MouseEvent>();
   "click.once" = output<MouseEvent>();
   "click.capture.once" = output<MouseEvent>();
 
-  // Mouse
+  // 마우스
   "mousedown.capture" = output<MouseEvent>();
   "mouseup.capture" = output<MouseEvent>();
   "mouseover.capture" = output<MouseEvent>();
   "mouseout.capture" = output<MouseEvent>();
 
-  // Keyboard
+  // 키보드
   "keydown.capture" = output<KeyboardEvent>();
   "keyup.capture" = output<KeyboardEvent>();
 
@@ -40,7 +40,7 @@ export class SdEventsDirective {
   "focus.capture" = output<FocusEvent>();
   "blur.capture" = output<FocusEvent>();
 
-  // Form
+  // 폼
   "invalid.capture" = output<Event>();
 
   // Scroll (passive로 성능 최적화)
@@ -59,7 +59,7 @@ export class SdEventsDirective {
   "touchmove.capture.passive" = output<TouchEvent>();
   "touchend.passive" = output<TouchEvent>();
 
-  // Drag & Drop
+  // 드래그 앤 드롭
   "dragover.capture" = output<DragEvent>();
   "dragenter.capture" = output<DragEvent>();
   "dragleave.capture" = output<DragEvent>();
@@ -69,10 +69,10 @@ export class SdEventsDirective {
   "transitionend.once" = output<TransitionEvent>();
   "animationend.once" = output<AnimationEvent>();
 
-  // Custom events
+  // 커스텀 이벤트
   "sdResize" = output<ISdResizeEvent>();
 
-  // Command events
+  // 커맨드 이벤트
   "sdRefreshCommand" = output<KeyboardEvent>();
   "sdSaveCommand" = output<KeyboardEvent>();
   "sdInsertCommand" = output<KeyboardEvent>();

package/src/core/directives/sd-item-of-template.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, input } from "@angular/core";
+
+@Directive({
+  selector: "ng-template[itemOf]",
+  standalone: true,
+})
+export class SdItemOfTemplateDirective<TItem> {
+  itemOf = input.required<TItem[]>();
+
+  static ngTemplateContextGuard<TContextItem>(
+    _dir: SdItemOfTemplateDirective<TContextItem>,
+    _ctx: unknown,
+  ): _ctx is SdItemOfTemplateContext<TContextItem> {
+    return true;
+  }
+}
+
+export interface SdItemOfTemplateContext<TItem> {
+  $implicit: TItem;
+  item: TItem;
+  index: number;
+  depth: number;
+}

package/src/core/directives/sd-router-link.directive.ts

@@ -0,0 +1,81 @@
+import { Directive, inject, input } from "@angular/core";
+import { Router } from "@angular/router";
+import { SdNavigateWindowProvider } from "../providers/sd-navigate-window.provider";
+
+@Directive({
+  selector: "[sd-router-link]",
+  standalone: true,
+  host: {
+    "[style.cursor]": "'pointer'",
+    "(click)": "onClick($event)",
+  },
+})
+export class SdRouterLinkDirective {
+  private readonly _router = inject(Router);
+  private readonly _navWindow = inject(SdNavigateWindowProvider);
+
+  option = input<
+    | {
+        link: string;
+        params?: Record<string, string>;
+        window?: {
+          width?: number;
+          height?: number;
+        };
+        outletName?: string;
+        queryParams?: Record<string, string>;
+      }
+    | undefined
+  >(undefined, { alias: "sd-router-link" });
+
+  async onClick(event: MouseEvent): Promise<void> {
+    const option = this.option();
+
+    if (!option) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this._navWindow.isWindow) {
+      const width = option.window?.width ?? 800;
+      const height = option.window?.height ?? 800;
+      const qp = option.queryParams
+        ? "?" + new URLSearchParams(option.queryParams).toString()
+        : "";
+      this._navWindow.open(
+        option.link + qp,
+        option.params,
+        `width=${width},height=${height}`,
+      );
+    } else if (event.ctrlKey || event.altKey) {
+      const qp = option.queryParams
+        ? "?" + new URLSearchParams(option.queryParams).toString()
+        : "";
+      this._navWindow.open(option.link + qp, option.params, "_blank");
+    } else if (event.shiftKey) {
+      const width = option.window?.width ?? 800;
+      const height = option.window?.height ?? 800;
+      const qp = option.queryParams
+        ? "?" + new URLSearchParams(option.queryParams).toString()
+        : "";
+      this._navWindow.open(
+        option.link + qp,
+        option.params,
+        `width=${width},height=${height}`,
+      );
+    } else if (option.outletName === undefined) {
+      await this._router.navigate(
+        [option.link, ...(option.params ? [option.params] : [])],
+        option.queryParams ? { queryParams: option.queryParams } : undefined,
+      );
+    } else {
+      await this._router.navigate(
+        [
+          { outlets: { [option.outletName]: option.link } },
+          ...(option.params ? [option.params] : []),
+        ],
+        option.queryParams ? { queryParams: option.queryParams } : undefined,
+      );
+    }
+  }
+}

package/src/core/directives/sd-typed-template.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, input } from "@angular/core";
+
+@Directive({
+  selector: "ng-template[typed]",
+  standalone: true,
+})
+export class SdTypedTemplateDirective<T> {
+  typed = input.required<T>();
+
+  static ngTemplateContextGuard<TypeToken>(
+    _dir: SdTypedTemplateDirective<TypeToken>,
+    _ctx: unknown,
+  ): _ctx is TypeToken {
+    return true;
+  }
+}