@simplysm/angular 1.0.138 → 14.0.4

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,47 +1,18 @@
-// presets
-@import "presets/functions";
-@import "presets/colors";
-@import "presets/variables";
-@import "presets/variables1";
-@import "presets/variables2";
-@import "presets/variables3";
-@import "presets/mixins";
-// defaults
-@import "defaults";
-// providers
-@import "providers/sd-toast";
-// controls
-@import "controls/sd-barcode";
-@import "controls/sd-button";
-@import "controls/sd-checkbox";
-@import "controls/sd-icon";
-@import "controls/sd-label";
-@import "controls/sd-list";
-@import "controls/sd-pagination";
-@import "controls/sd-select";
-@import "controls/sd-tab";
-@import "controls/sd-textfield";
-@import "controls/sd-note";
-@import "controls/sd-table";
-// adv controls
-@import "controls/sd-checkbox-group";
-@import "controls/sd-combobox";
-@import "controls/sd-dropdown";
-@import "controls/sd-html-editor";
-@import "controls/sd-markdown-editor";
-@import "controls/sd-multi-select";
-@import "controls/sd-sheet";
-// containers
-@import "controls/sd-busy-container";
-@import "controls/sd-card";
-@import "controls/sd-dock-container";
-@import "controls/sd-form";
-@import "controls/sd-grid";
-@import "controls/sd-modal";
-@import "controls/sd-pane";
-@import "controls/sd-sidebar";
-@import "controls/sd-view";
-@import "controls/sd-tab-view";
-@import "controls/sd-topbar";
-// classes
-@import "classes";
+@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;
+
+  svg {
+    stroke-width: 1.5 !important;
+  }
+}

package/scss/themes/_variables-dark.scss

@@ -0,0 +1,66 @@
+@use "sass:map";
+@use "sass:color";
+
+@use "../commons/variables";
+
+@function color-map($base) {
+  @return (
+    darkest: color.mix(white, $base, 80%),
+    darker: color.mix(white, $base, 60%),
+    dark: color.mix(white, $base, 40%),
+    default: color.mix(black, $base, 20%),
+    light: color.mix(black, $base, 55%),
+    lighter: color.mix(black, $base, 70%),
+    lightest: color.mix(black, $base, 80%)
+  );
+}
+
+$vars: (
+  theme: (
+    "gray": color-map(map.get(variables.$colors, gray)),
+    blue-gray: color-map(map.get(variables.$colors, slate)),
+    primary: color-map(map.get(variables.$colors, blue)),
+    secondary: color-map(map.get(variables.$colors, blue)),
+    info: color-map(map.get(variables.$colors, cyan)),
+    success: color-map(map.get(variables.$colors, lime)),
+    warning: color-map(map.get(variables.$colors, orange)),
+    danger: color-map(map.get(variables.$colors, red)),
+  ),
+  trans: (
+    darkest: rgba(255, 255, 255, 0.5),
+    darker: rgba(255, 255, 255, 0.4),
+    dark: rgba(255, 255, 255, 0.3),
+    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),
+    rev-lightest: rgba(0, 0, 0, 0.4),
+  ),
+  text-trans: (
+    dark: white,
+    default: rgba(255, 255, 255, 0.87),
+    light: rgba(255, 255, 255, 0.6),
+    lighter: rgba(255, 255, 255, 0.38),
+    lightest: rgba(255, 255, 255, 0.2),
+    rev-default: black,
+    rev-dark: rgba(0, 0, 0, 0.7),
+    rev-darker: rgba(0, 0, 0, 0.5),
+  ),
+  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),
+  ),
+  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

@@ -0,0 +1,79 @@
+import { Directive, output } from "@angular/core";
+import type { ISdResizeEvent } from "../plugins/events/sd-resize-event.plugin";
+
+@Directive({
+  selector: `
+    [click.capture], [click.once], [click.capture.once],
+    [mousedown.capture], [mouseup.capture], [mouseover.capture], [mouseout.capture],
+    [keydown.capture], [keyup.capture],
+    [focus.capture], [blur.capture],
+    [invalid.capture],
+    [scroll.capture], [scroll.passive], [scroll.capture.passive],
+    [wheel.passive], [wheel.capture.passive],
+    [touchstart.passive], [touchstart.capture.passive],
+    [touchmove.passive], [touchmove.capture.passive],
+    [touchend.passive],
+    [dragover.capture], [dragenter.capture], [dragleave.capture], [drop.capture],
+    [transitionend.once], [animationend.once],
+    [sdResize],
+    [sdRefreshCommand], [sdSaveCommand], [sdInsertCommand]
+  `,
+  standalone: true,
+})
+export class SdEventsDirective {
+  // 클릭
+  "click.capture" = output<MouseEvent>();
+  "click.once" = output<MouseEvent>();
+  "click.capture.once" = output<MouseEvent>();
+
+  // 마우스
+  "mousedown.capture" = output<MouseEvent>();
+  "mouseup.capture" = output<MouseEvent>();
+  "mouseover.capture" = output<MouseEvent>();
+  "mouseout.capture" = output<MouseEvent>();
+
+  // 키보드
+  "keydown.capture" = output<KeyboardEvent>();
+  "keyup.capture" = output<KeyboardEvent>();
+
+  // Focus (버블링 안 되므로 capture 필수)
+  "focus.capture" = output<FocusEvent>();
+  "blur.capture" = output<FocusEvent>();
+
+  // 폼
+  "invalid.capture" = output<Event>();
+
+  // Scroll (passive로 성능 최적화)
+  "scroll.capture" = output<Event>();
+  "scroll.passive" = output<Event>();
+  "scroll.capture.passive" = output<Event>();
+
+  // Wheel (passive로 성능 최적화)
+  "wheel.passive" = output<WheelEvent>();
+  "wheel.capture.passive" = output<WheelEvent>();
+
+  // Touch (passive로 성능 최적화)
+  "touchstart.passive" = output<TouchEvent>();
+  "touchstart.capture.passive" = output<TouchEvent>();
+  "touchmove.passive" = output<TouchEvent>();
+  "touchmove.capture.passive" = output<TouchEvent>();
+  "touchend.passive" = output<TouchEvent>();
+
+  // 드래그 앤 드롭
+  "dragover.capture" = output<DragEvent>();
+  "dragenter.capture" = output<DragEvent>();
+  "dragleave.capture" = output<DragEvent>();
+  "drop.capture" = output<DragEvent>();
+
+  // Animation/Transition (once로 한 번만)
+  "transitionend.once" = output<TransitionEvent>();
+  "animationend.once" = output<AnimationEvent>();
+
+  // 커스텀 이벤트
+  "sdResize" = output<ISdResizeEvent>();
+
+  // 커맨드 이벤트
+  "sdRefreshCommand" = output<KeyboardEvent>();
+  "sdSaveCommand" = output<KeyboardEvent>();
+  "sdInsertCommand" = output<KeyboardEvent>();
+}

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

@@ -0,0 +1,14 @@
+import { Directive, input } from "@angular/core";
+import { setupInvalid } from "../utils/setups/setupInvalid";
+
+@Directive({
+  selector: "[sd-invalid]",
+  standalone: true,
+})
+export class SdInvalidDirective {
+  invalidMessage = input.required<string>({ alias: "sd-invalid" });
+
+  constructor() {
+    setupInvalid(() => this.invalidMessage());
+  }
+}

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-ripple.directive.ts

@@ -0,0 +1,14 @@
+import { booleanAttribute, Directive, input } from "@angular/core";
+import { setupRipple } from "../utils/setups/setupRipple";
+
+@Directive({
+  selector: "[sd-ripple]",
+  standalone: true,
+})
+export class SdRippleDirective {
+  enabled = input.required({ alias: "sd-ripple", transform: booleanAttribute });
+
+  constructor() {
+    setupRipple(() => this.enabled());
+  }
+}

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-show-effect.directive.ts

@@ -0,0 +1,18 @@
+import { booleanAttribute, Directive, input } from "@angular/core";
+import { setupRevealOnShow } from "../utils/setups/setupRevealOnShow";
+
+@Directive({
+  selector: "[sd-show-effect]",
+  standalone: true,
+})
+export class SdShowEffectDirective {
+  enabled = input.required({ alias: "sd-show-effect", transform: booleanAttribute });
+  sdShowEffectType = input<"l2r" | "t2b">("t2b");
+
+  constructor() {
+    setupRevealOnShow(() => ({
+      type: this.sdShowEffectType(),
+      enabled: this.enabled(),
+    }));
+  }
+}

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;
+  }
+}