@simplysm/angular 1.0.138 → 14.0.1

package/scss/commons/_variables.scss

@@ -0,0 +1,145 @@
+@use "sass:map";
+@use "sass:color";
+
+@function to-rgb($oklch-color) {
+  @return color.to-space($oklch-color, rgb);
+}
+
+$colors: (
+  red: to-rgb(oklch(0.704 0.191 22.216)),
+  orange: to-rgb(oklch(0.75 0.183 55.934)),
+  amber: to-rgb(oklch(0.828 0.189 84.429)),
+  yellow: to-rgb(oklch(0.852 0.199 91.936)),
+  lime: to-rgb(oklch(0.841 0.238 128.85)),
+  green: to-rgb(oklch(0.792 0.209 151.711)),
+  emerald: to-rgb(oklch(0.765 0.177 163.223)),
+  teal: to-rgb(oklch(0.777 0.152 181.912)),
+  cyan: to-rgb(oklch(0.789 0.154 211.53)),
+  sky: to-rgb(oklch(0.746 0.16 232.661)),
+  blue: to-rgb(oklch(0.707 0.165 254.624)),
+  indigo: to-rgb(oklch(0.673 0.182 276.935)),
+  violet: to-rgb(oklch(0.702 0.183 293.541)),
+  purple: to-rgb(oklch(0.714 0.203 305.504)),
+  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),
+  pink: to-rgb(oklch(0.718 0.202 349.761)),
+  rose: to-rgb(oklch(0.712 0.194 13.428)),
+  slate: to-rgb(oklch(0.704 0.04 256.788)),
+  gray: to-rgb(oklch(0.707 0.022 261.325)),
+  zinc: to-rgb(oklch(0.705 0.015 286.067)),
+  neutral: to-rgb(oklch(0.708 0 0)),
+  stone: to-rgb(oklch(0.709 0.01 56.259)),
+);
+
+// D6: lightest~darkest가 실제 밝기와 일치하도록 수정
+// lightest(+90%) > lighter(+75%) > light(+60%) > default > dark(-10%) > darker(-25%) > darkest(-40%)
+@function color-map($base, $offset: 0%) {
+  @return (
+    lightest: color.scale($base, $lightness: 90% + $offset),
+    lighter: color.scale($base, $lightness: 75% + $offset),
+    light: color.scale($base, $lightness: 60% + $offset),
+    default: $base,
+    dark: color.scale($base, $lightness: -10% + $offset),
+    darker: color.scale($base, $lightness: -25% + $offset),
+    darkest: color.scale($base, $lightness: -40% + $offset)
+  );
+}
+
+$vars: (
+  theme: (
+    "gray": color-map(map.get($colors, gray), -5%),
+    blue-gray: color-map(map.get($colors, slate)),
+    primary: color-map(map.get($colors, blue)),
+    secondary: color-map(map.get($colors, blue)),
+    info: color-map(map.get($colors, cyan)),
+    success: color-map(map.get($colors, lime)),
+    warning: color-map(map.get($colors, orange)),
+    danger: color-map(map.get($colors, red)),
+  ),
+  trans: (
+    darkest: rgba(0, 0, 0, 0.5),
+    darker: rgba(0, 0, 0, 0.4),
+    dark: rgba(0, 0, 0, 0.3),
+    default: rgba(0, 0, 0, 0.2),
+    light: rgba(0, 0, 0, 0.1),
+    lighter: rgba(0, 0, 0, 0.05),
+    lightest: rgba(0, 0, 0, 0.03),
+    rev-default: rgba(255, 255, 255, 0.1),
+    rev-light: rgba(255, 255, 255, 0.2),
+    rev-lighter: rgba(255, 255, 255, 0.3),
+    rev-lightest: rgba(255, 255, 255, 0.4),
+  ),
+  text-trans: (
+    dark: black,
+    default: rgba(0, 0, 0, 0.87),
+    light: rgba(0, 0, 0, 0.6),
+    lighter: rgba(0, 0, 0, 0.38),
+    lightest: rgba(0, 0, 0, 0.2),
+    rev-default: white,
+    rev-dark: rgba(255, 255, 255, 0.7),
+    rev-darker: rgba(255, 255, 255, 0.5),
+  ),
+  font-size: (
+    lg: 1.1667rem,
+    default: 1rem,
+    sm: 0.9167rem,
+    h1: 2rem,
+    h2: 1.5rem,
+    h3: 1.3333rem,
+    h4: 1.1667rem,
+    h5: 1rem,
+    h6: 0.9167rem,
+  ),
+  gap: (
+    xxs: 0.0833rem,
+    xs: 0.1667rem,
+    sm: 0.3333rem,
+    default: 0.5rem,
+    lg: 0.6667rem,
+    xl: 1rem,
+    xxl: 1.5rem,
+    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-radius: (
+    xs: var(--gap-xxs),
+    sm: var(--gap-xs),
+    default: var(--gap-sm),
+    lg: var(--gap-default),
+    xl: var(--gap-lg),
+    xxl: var(--gap-xl),
+  ),
+  z-index: (
+    toast: 9999,
+    busy: 9998,
+    dropdown: 5000,
+    modal: 4000,
+    sidebar: 3000,
+  ),
+  line-height: 1.5em,
+  line-height-strip-unit: 1.5,
+  font-family: sans-serif,
+  font-family-monospace: monospace,
+  background-color: white,
+  background-rev-color: black,
+  control-color: white,
+  animation-duration: 0.2s,
+  elevation-size: 0.0833rem,
+  sidebar: (
+    width: 15em,
+  ),
+  topbar: (
+    height: 3em,
+  ),
+  sheet: (
+    pv: var(--gap-xs),
+    ph: var(--gap-sm),
+    bg: var(--theme-gray-lightest),
+  ),
+);

package/scss/styles.scss

@@ -1,47 +1,11 @@
-// 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";
+
+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,64 @@
+@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),
+    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,
+  sheet: (
+    bg: var(--theme-gray-lightest),
+  ),
+);

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
+  "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>();
+
+  // Focus (버블링 안 되므로 capture 필수)
+  "focus.capture" = output<FocusEvent>();
+  "blur.capture" = output<FocusEvent>();
+
+  // Form
+  "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>();
+
+  // Drag & Drop
+  "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>();
+
+  // Custom events
+  "sdResize" = output<ISdResizeEvent>();
+
+  // Command events
+  "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-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-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/plugins/commands/sd-insert-command-event.plugin.ts

@@ -0,0 +1,34 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdInsertCommandEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    return eventName === "sdInsertCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (event.key === "Insert" && event.ctrlKey && !event.altKey && !event.shiftKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return (): void => {
+      document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/plugins/commands/sd-refresh-command-event.plugin.ts

@@ -0,0 +1,39 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdRefreshCommandEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string) {
+    return eventName === "sdRefreshCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (
+        (event.key === "l" || event.key === "L") &&
+        event.ctrlKey &&
+        event.altKey &&
+        !event.shiftKey
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return (): void => {
+      document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/plugins/commands/sd-save-command-event.plugin.ts

@@ -0,0 +1,39 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdSaveCommandEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string) {
+    return eventName === "sdSaveCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (
+        (event.key === "s" || event.key === "S") &&
+        event.ctrlKey &&
+        !event.altKey &&
+        !event.shiftKey
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return (): void => {
+      document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/plugins/events/sd-intersection-event.plugin.ts

@@ -0,0 +1,36 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdIntersectionEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    return eventName === "sdIntersection";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (entry: ISdIntersectionEvent) => void,
+  ): () => void {
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries.single();
+      if (!entry) return;
+
+      handler({ entry });
+    });
+    observer.observe(element);
+
+    return (): void => {
+      observer.disconnect();
+    };
+  }
+}
+
+export interface ISdIntersectionEvent {
+  entry: IntersectionObserverEntry;
+}

package/src/core/plugins/events/sd-option-event.plugin.ts

@@ -0,0 +1,43 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdOptionEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    if (!/\.(capture|passive|once)/.test(eventName)) return false;
+
+    const realEventName = eventName.replace(/\.(capture|passive|once)/g, "");
+
+    return (
+      `on${realEventName}` in window ||
+      `on${realEventName}` in document ||
+      `on${realEventName}` in HTMLElement.prototype
+    );
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const options: AddEventListenerOptions = {
+      capture: eventName.includes(".capture"),
+      passive: eventName.includes(".passive"),
+      once: eventName.includes(".once"),
+    };
+
+    const realEventName = eventName.replace(
+      /\.(capture|passive|once)/g,
+      "",
+    ) as keyof HTMLElementEventMap;
+
+    element.addEventListener(realEventName, handler, options);
+
+    return () => element.removeEventListener(realEventName, handler, options);
+  }
+}

package/src/core/plugins/events/sd-resize-event.plugin.ts

@@ -0,0 +1,80 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdResizeEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    return eventName === "sdResize";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (entry: ISdResizeEvent) => void,
+  ): () => void {
+    let prevWidth = 0;
+    let prevHeight = 0;
+
+    const intersectionObserver = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+
+      const contentRect = entry.boundingClientRect;
+
+      const heightChanged = contentRect.height !== prevHeight;
+      const widthChanged = contentRect.width !== prevWidth;
+      prevHeight = contentRect.height;
+      prevWidth = contentRect.width;
+
+      handler({
+        heightChanged,
+        widthChanged,
+        target: entry.target,
+        contentRect: entry.boundingClientRect,
+      });
+
+      intersectionObserver.unobserve(entry.target);
+    });
+
+    let animationFrameId: number | undefined;
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      if (animationFrameId != null) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = requestAnimationFrame(() => {
+        const contentRect = entry.contentRect;
+
+        const heightChanged = contentRect.height !== prevHeight;
+        const widthChanged = contentRect.width !== prevWidth;
+        prevHeight = contentRect.height;
+        prevWidth = contentRect.width;
+
+        handler({
+          heightChanged,
+          widthChanged,
+          target: entry.target,
+          contentRect: entry.contentRect,
+        });
+      });
+    });
+
+    resizeObserver.observe(element);
+    intersectionObserver.observe(element);
+
+    return (): void => {
+      intersectionObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }
+}
+
+export interface ISdResizeEvent {
+  heightChanged: boolean;
+  widthChanged: boolean;
+  target: Element;
+  contentRect: DOMRectReadOnly;
+}