@simplysm/angular 14.0.42 → 14.0.43

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

@@ -20,38 +20,39 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
     "[attr.data-sd-type]": "currType()",
   },
   template: `
-    @if (busy()) {
-      <div class="_screen">
-        <div class="_rect">
-          <div class="_indicator">
-            @switch (currType()) {
-              @case ("spinner") {
-                <div class="_spinner"></div>
-              }
-              @case ("bar") {
-                <div class="_bar"></div>
-              }
-              @case ("cube") {
-                <div class="_cube">
-                  <div class="_cube-face _cube-face-1"></div>
-                  <div class="_cube-face _cube-face-2"></div>
-                  <div class="_cube-face _cube-face-3"></div>
-                  <div class="_cube-face _cube-face-4"></div>
-                </div>
-              }
+    <div class="_screen">
+      <div class="_rect">
+        <div class="_indicator">
+          @switch (currType()) {
+            @case ("spinner") {
+              <div class="_spinner"></div>
+            }
+            @case ("bar") {
+              <div class="_bar"></div>
+            }
+            @case ("cube") {
+              <div class="_cube1"></div>
+              <div class="_cube2"></div>
+              <div class="_cube4"></div>
+              <div class="_cube3"></div>
             }
-          </div>
-          @if (message() !== undefined) {
-            <div class="_message">{{ message() }}</div>
-          }
-          @if (progressPercent() !== undefined) {
-            <div class="_progress">
-              <div class="_progress-bar" [style.width.%]="progressPercent()"></div>
-            </div>
           }
         </div>
+        @if (message() != undefined) {
+          <div class="_message">
+            <pre>{{ message() }}</pre>
+          </div>
+        }
       </div>
-    }
+      @if (progressPercent() != null) {
+        <div class="_progress">
+          <div
+            class="_progress-bar"
+            [style.transform]="'scaleX(' + progressPercent()! / 100 + ')'"
+          ></div>
+        </div>
+      }
+    </div>
     <ng-content></ng-content>
   `,
   styles: [
@@ -62,156 +63,267 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
       sd-busy-container {
         display: block;
         position: relative;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        min-width: 70px;
+        min-height: 70px;
+        overflow: auto;
 
         > ._screen {
           position: absolute;
           top: 0;
           left: 0;
-          right: 0;
-          bottom: 0;
+          width: 100%;
+          height: 100%;
           z-index: map.get(variables.$vars, z-index, busy);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: var(--busy-overlay-bg);
 
-          > ._rect {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: var(--gap-default);
+          visibility: hidden;
+          pointer-events: none;
+
+          opacity: 0;
+          transition: opacity var(--animation-duration);
+          transition-timing-function: linear;
+
+          > ._progress {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 4px;
+            width: 100%;
+            background-color: var(--background-color);
+
+            > ._progress-bar {
+              position: absolute;
+              top: 0;
+              left: 0;
+              display: inline-block;
+              content: "";
+              height: 4px;
+              width: 100%;
+              transition: 0.1s ease-in;
+              transition-property: transform;
+              transform-origin: left;
+              transform: scaleX(0);
+              background-color: var(--theme-primary-default);
+            }
+          }
+        }
+
+        &[data-sd-busy="true"] {
+          > ._screen {
+            visibility: visible;
+            pointer-events: auto;
+
+            opacity: 1;
+          }
+        }
+
+        &[data-sd-type="spinner"] {
+          > ._screen > ._rect {
+            transform: translateY(-100%);
+            transition: 0.1s ease-in;
+            transition-property: transform;
 
             > ._indicator {
-              > ._spinner {
-                width: 2rem;
-                height: 2rem;
-                border: 0.1667rem solid var(--theme-primary-lighter);
-                border-top-color: var(--theme-primary-default);
-                border-radius: 50%;
-                animation: sd-busy-spin 0.8s linear infinite;
+              top: 0;
+              width: 30px;
+              height: 30px;
+              margin: 20px auto 0 auto;
+              border: 6px solid var(--background-color);
+              border-radius: 100%;
+              border-bottom-color: var(--theme-primary-default);
+              animation: sd-busy-spin 1s linear infinite;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+
+              > div {
+                display: none;
+              }
+            }
+
+            > ._message {
+              position: absolute;
+              top: 55px;
+              width: 100%;
+              color: var(--background-color);
+              font-weight: bold;
+              text-align: center;
+              text-shadow: 0 0 2px var(--background-rev-color);
+            }
+          }
+
+          &[data-sd-busy="true"] {
+            > ._screen > ._rect {
+              transform: none;
+              transition: 0.1s ease-out;
+            }
+          }
+        }
+
+        &[data-sd-type="bar"] {
+          min-height: 4px;
+
+          &[data-sd-busy="true"] {
+            > ._screen > ._rect {
+              > ._indicator {
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 4px;
+                width: 100%;
+                background-color: var(--background-color);
+
+                &:before,
+                &:after {
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  display: inline-block;
+                  content: "";
+                  height: 4px;
+                  width: 100%;
+
+                  transform-origin: left;
+                }
+
+                &:before {
+                  background-color: var(--theme-primary-default);
+                  animation: sd-busy-bar-indicator-before 2s infinite ease-in;
+                }
+
+                &:after {
+                  background-color: var(--background-color);
+                  animation: sd-busy-bar-indicator-after 2s infinite ease-out;
+                }
+
+                > div {
+                  display: none;
+                }
               }
 
-              > ._bar {
-                width: 6rem;
-                height: 0.25rem;
-                background: var(--theme-primary-lighter);
-                border-radius: var(--border-radius-default);
-                overflow: hidden;
+              > ._message {
+                position: absolute;
+                top: 4px;
+                right: 0;
+                display: inline-block;
+              }
+            }
+          }
+        }
+
+        &[data-sd-type="cube"] {
+          > ._screen > ._rect {
+            > ._indicator {
+              position: absolute;
+              top: calc(50% - 20px);
+              left: calc(50% - 20px);
+              width: 40px;
+              height: 40px;
+              transform: rotateZ(45deg);
+
+              ._cube1,
+              ._cube2,
+              ._cube3,
+              ._cube4 {
+                float: left;
+                width: 50%;
+                height: 50%;
                 position: relative;
 
-                &::after {
+                &:before {
                   content: "";
                   position: absolute;
                   top: 0;
                   left: 0;
+                  width: 100%;
                   height: 100%;
-                  width: 40%;
-                  background: var(--theme-primary-default);
-                  border-radius: var(--border-radius-default);
-                  animation: sd-busy-bar 1.5s ease-in-out infinite;
+                  background-color: var(--trans-light);
+                  animation: sd-busy-cube 2.4s infinite linear both;
+                  transform-origin: 100% 100%;
                 }
               }
 
-              > ._cube {
-                width: 2rem;
-                height: 2rem;
-                position: relative;
-                animation: sd-busy-cube-rotate 1.8s infinite ease-in-out;
+              ._cube2 {
+                transform: rotateZ(90deg);
 
-                > ._cube-face {
-                  position: absolute;
-                  width: 50%;
-                  height: 50%;
-                  background: var(--theme-primary-default);
-                  animation: sd-busy-cube-fold 1.8s infinite ease-in-out;
-
-                  &._cube-face-1 {
-                    top: 0;
-                    left: 0;
-                  }
-
-                  &._cube-face-2 {
-                    top: 0;
-                    right: 0;
-                    animation-delay: 0.45s;
-                  }
-
-                  &._cube-face-3 {
-                    bottom: 0;
-                    right: 0;
-                    animation-delay: 0.9s;
-                  }
-
-                  &._cube-face-4 {
-                    bottom: 0;
-                    left: 0;
-                    animation-delay: 1.35s;
-                  }
+                &:before {
+                  animation-delay: 0.3s;
                 }
               }
-            }
 
-            > ._message {
-              font-size: var(--font-size-sm);
-              color: var(--text-trans-light);
-              text-align: center;
-            }
+              ._cube3 {
+                transform: rotateZ(180deg);
+
+                &:before {
+                  animation-delay: 0.6s;
+                }
+              }
 
-            > ._progress {
-              width: 10rem;
-              height: 0.25rem;
-              background: var(--theme-primary-lighter);
-              border-radius: var(--border-radius-default);
-              overflow: hidden;
-
-              > ._progress-bar {
-                height: 100%;
-                background: var(--theme-primary-default);
-                transition: width 0.3s ease;
+              ._cube4 {
+                transform: rotateZ(270deg);
+
+                &:before {
+                  animation-delay: 0.9s;
+                }
               }
             }
+
+            > ._message {
+              position: absolute;
+              top: 4px;
+              right: 0;
+              display: inline-block;
+            }
           }
         }
       }
 
       @keyframes sd-busy-spin {
+        from {
+          transform: rotate(0deg);
+        }
         to {
           transform: rotate(360deg);
         }
       }
 
-      @keyframes sd-busy-bar {
+      @keyframes sd-busy-bar-indicator-before {
         0% {
-          left: -40%;
+          transform: scaleX(0);
         }
+        60%,
         100% {
-          left: 100%;
+          transform: scaleX(1);
         }
       }
 
-      @keyframes sd-busy-cube-rotate {
-        0% {
-          transform: perspective(6.25rem) rotateX(0deg) rotateY(0deg);
-        }
+      @keyframes sd-busy-bar-indicator-after {
+        0%,
         50% {
-          transform: perspective(6.25rem) rotateX(-180deg) rotateY(0deg);
+          transform: scaleX(0);
         }
         100% {
-          transform: perspective(6.25rem) rotateX(-180deg) rotateY(-180deg);
+          transform: scaleX(1);
         }
       }
 
-      @keyframes sd-busy-cube-fold {
+      @keyframes sd-busy-cube {
         0%,
         10% {
-          transform: scale(1);
+          transform: perspective(140px) rotateX(-180deg);
+          opacity: 0;
         }
-        25% {
-          transform: scale(0.5);
+        25%,
+        75% {
+          transform: perspective(140px) rotateX(0deg);
+          opacity: 1;
         }
-        50%,
+        90%,
         100% {
-          transform: scale(1);
+          transform: perspective(140px) rotateY(180deg);
+          opacity: 0;
         }
       }
     `,

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

@@ -23,7 +23,7 @@ export class SdBusyProvider {
   private _containerRef: ComponentRef<SdBusyContainer> | undefined;
 
   get containerRef(): ComponentRef<SdBusyContainer> {
-    if (this._containerRef === undefined) {
+    if (this._containerRef == null) {
       this._containerRef = createComponent(SdBusyContainer, {
         environmentInjector: this._envInjector,
       });

package/src/core/commands/sd-command.ts

@@ -0,0 +1,46 @@
+import { DestroyRef, Directive, ElementRef, inject, output } from "@angular/core";
+import { DOCUMENT } from "@angular/common";
+import { shouldProcessCommandEvent } from "./findTopOpenModalEl";
+
+@Directive({
+  selector: "[sdRefreshCommand],[sdSaveCommand],[sdInsertCommand]",
+  standalone: true,
+})
+export class SdCommandDirective {
+  private readonly _elRef = inject(ElementRef);
+  private readonly _destroyRef = inject(DestroyRef);
+  private readonly _document = inject(DOCUMENT);
+
+  sdRefreshCommand = output<KeyboardEvent>();
+  sdSaveCommand = output<KeyboardEvent>();
+  sdInsertCommand = output<KeyboardEvent>();
+
+  constructor() {
+    const listener = (event: KeyboardEvent): void => {
+      if (!event.ctrlKey || event.shiftKey) return;
+
+      if ((event.key === "l" || event.key === "L") && event.altKey) {
+        if (!shouldProcessCommandEvent(this._document, this._elRef.nativeElement)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.sdRefreshCommand.emit(event);
+      } else if ((event.key === "s" || event.key === "S") && !event.altKey) {
+        if (!shouldProcessCommandEvent(this._document, this._elRef.nativeElement)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.sdSaveCommand.emit(event);
+      } else if (event.key === "Insert" && !event.altKey) {
+        if (!shouldProcessCommandEvent(this._document, this._elRef.nativeElement)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.sdInsertCommand.emit(event);
+      }
+    };
+
+    this._document.addEventListener("keydown", listener);
+
+    this._destroyRef.onDestroy(() => {
+      this._document.removeEventListener("keydown", listener);
+    });
+  }
+}

package/src/core/error-handler/sd-global-error-handler.plugin.ts

@@ -24,7 +24,7 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
             Message: reason.message,
             Stack: reason.stack ?? "(스택 없음)",
           });
-        } else if (typeof reason === "object" && reason !== null) {
+        } else if (typeof reason === "object" && reason != null) {
           this._displayErrorMessage("처리되지 않은 Promise 거부", {
             Reason: JSON.stringify(reason, null, 2),
           });

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

@@ -1,5 +1,4 @@
 import { Directive, output } from "@angular/core";
-import type { SdResizeEvent } from "./sd-resize-event.plugin";
 
 @Directive({
   selector: `
@@ -14,9 +13,7 @@ import type { SdResizeEvent } from "./sd-resize-event.plugin";
     [touchmove.passive], [touchmove.capture.passive],
     [touchend.passive],
     [dragover.capture], [dragenter.capture], [dragleave.capture], [drop.capture],
-    [transitionend.once], [animationend.once],
-    [sdResize],
-    [sdRefreshCommand], [sdSaveCommand], [sdInsertCommand]
+    [transitionend.once], [animationend.once]
   `,
   standalone: true,
 })
@@ -68,12 +65,4 @@ export class SdEvents {
   // Animation/Transition (once로 한 번만)
   "transitionend.once" = output<TransitionEvent>();
   "animationend.once" = output<AnimationEvent>();
-
-  // 커스텀 이벤트
-  "sdResize" = output<SdResizeEvent>();
-
-  // 커맨드 이벤트
-  "sdRefreshCommand" = output<KeyboardEvent>();
-  "sdSaveCommand" = output<KeyboardEvent>();
-  "sdInsertCommand" = output<KeyboardEvent>();
 }

package/src/core/events/sd-intersection.ts

@@ -0,0 +1,29 @@
+import { DestroyRef, Directive, ElementRef, inject, output } from "@angular/core";
+
+@Directive({
+  selector: "[sdIntersection]",
+  standalone: true,
+})
+export class SdIntersectionDirective {
+  private readonly _elRef = inject(ElementRef);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  sdIntersection = output<SdIntersectionEvent>();
+
+  constructor() {
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.length === 0) return;
+
+      this.sdIntersection.emit({ entry: entries[entries.length - 1] });
+    });
+    observer.observe(this._elRef.nativeElement);
+
+    this._destroyRef.onDestroy(() => {
+      observer.disconnect();
+    });
+  }
+}
+
+export interface SdIntersectionEvent {
+  entry: IntersectionObserverEntry;
+}

package/src/core/events/{sd-resize-event.plugin.ts → sd-resize.ts}

@@ -1,61 +1,54 @@
-import { inject, Injectable } from "@angular/core";
-import { EventManagerPlugin } from "@angular/platform-browser";
-import { DOCUMENT } from "@angular/common";
+import { DestroyRef, Directive, ElementRef, inject, output } from "@angular/core";
 
-@Injectable({ providedIn: null })
-export class SdResizeEventPlugin extends EventManagerPlugin {
-  constructor() {
-    super(inject(DOCUMENT));
-  }
+@Directive({
+  selector: "[sdResize]",
+  standalone: true,
+})
+export class SdResizeDirective {
+  private readonly _elRef = inject(ElementRef);
+  private readonly _destroyRef = inject(DestroyRef);
 
-  override supports(eventName: string): boolean {
-    return eventName === "sdResize";
-  }
+  sdResize = output<SdResizeEvent>();
 
-  override addEventListener(
-    element: HTMLElement,
-    eventName: string,
-    handler: (entry: SdResizeEvent) => void,
-  ): () => void {
+  constructor() {
     let prevWidth = 0;
     let prevHeight = 0;
-
     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({
+        this.sdResize.emit({
           heightChanged,
           widthChanged,
-          target: entry.target,
+          target: entry.target as HTMLElement,
           contentRect: entry.contentRect,
         });
       });
     });
 
-    resizeObserver.observe(element);
+    resizeObserver.observe(this._elRef.nativeElement);
 
-    return (): void => {
+    this._destroyRef.onDestroy(() => {
       if (animationFrameId != null) {
         cancelAnimationFrame(animationFrameId);
       }
       resizeObserver.disconnect();
-    };
+    });
   }
 }
 
 export interface SdResizeEvent {
   heightChanged: boolean;
   widthChanged: boolean;
-  target: Element;
+  target: HTMLElement;
   contentRect: DOMRectReadOnly;
 }

package/src/core/file-dialog/sd-file-dialog.provider.ts

@@ -18,7 +18,7 @@ export class SdFileDialogProvider {
 
       inputEl.type = "file";
       inputEl.multiple = multiple ?? false;
-      if (accept !== undefined) {
+      if (accept != null) {
         inputEl.accept = accept;
       }
       inputEl.onchange = (event: Event): void => {