@simplysm/angular 14.0.1 → 14.0.4

package/src/ui/overlay/busy/sd-busy-container.control.ts

@@ -0,0 +1,243 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdBusyProvider, type TSdBusyType } from "./sd-busy.provider";
+
+@Component({
+  selector: "sd-busy-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  host: {
+    "[attr.data-sd-busy]": "busy() || undefined",
+    "[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>
+          @if (message() !== undefined) {
+            <div class="_message">{{ message() }}</div>
+          }
+          @if (progressPercent() !== undefined) {
+            <div class="_progress">
+              <div class="_progress-bar" [style.width.%]="progressPercent()"></div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+    <ng-content></ng-content>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/variables";
+      @use "sass:map";
+
+      sd-busy-container {
+        display: block;
+        position: relative;
+
+        > ._screen {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          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);
+
+            > ._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;
+              }
+
+              > ._bar {
+                width: 6rem;
+                height: 0.25rem;
+                background: var(--theme-primary-lighter);
+                border-radius: var(--border-radius-default);
+                overflow: hidden;
+                position: relative;
+
+                &::after {
+                  content: "";
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  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;
+                }
+              }
+
+              > ._cube {
+                width: 2rem;
+                height: 2rem;
+                position: relative;
+                animation: sd-busy-cube-rotate 1.8s infinite ease-in-out;
+
+                > ._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;
+                  }
+                }
+              }
+            }
+
+            > ._message {
+              font-size: var(--font-size-sm);
+              color: var(--text-trans-light);
+              text-align: center;
+            }
+
+            > ._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;
+              }
+            }
+          }
+        }
+      }
+
+      @keyframes sd-busy-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes sd-busy-bar {
+        0% {
+          left: -40%;
+        }
+        100% {
+          left: 100%;
+        }
+      }
+
+      @keyframes sd-busy-cube-rotate {
+        0% {
+          transform: perspective(6.25rem) rotateX(0deg) rotateY(0deg);
+        }
+        50% {
+          transform: perspective(6.25rem) rotateX(-180deg) rotateY(0deg);
+        }
+        100% {
+          transform: perspective(6.25rem) rotateX(-180deg) rotateY(-180deg);
+        }
+      }
+
+      @keyframes sd-busy-cube-fold {
+        0%,
+        10% {
+          transform: scale(1);
+        }
+        25% {
+          transform: scale(0.5);
+        }
+        50%,
+        100% {
+          transform: scale(1);
+        }
+      }
+    `,
+  ],
+})
+export class SdBusyContainerControl {
+  private readonly _sdBusy = inject(SdBusyProvider);
+
+  busy = input(false, { transform: booleanAttribute });
+  message = input<string | undefined>(undefined);
+  type = input<TSdBusyType | undefined>(undefined);
+  progressPercent = input<number | undefined>(undefined);
+
+  currType = computed(() => this.type() ?? this._sdBusy.type());
+
+  constructor() {
+    const el = inject(ElementRef).nativeElement as HTMLElement;
+    el.addEventListener(
+      "keydown",
+      (event) => {
+        if (this.busy()) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      true,
+    );
+  }
+}

package/src/ui/overlay/busy/sd-busy.provider.ts

@@ -0,0 +1,55 @@
+import {
+  ApplicationRef,
+  createComponent,
+  effect,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  signal,
+  type ComponentRef,
+} from "@angular/core";
+import { SdBusyContainerControl } from "./sd-busy-container.control";
+
+export type TSdBusyType = "spinner" | "bar" | "cube";
+
+@Injectable({ providedIn: "root" })
+export class SdBusyProvider {
+  private readonly _appRef = inject(ApplicationRef);
+  private readonly _envInjector = inject(EnvironmentInjector);
+
+  type = signal<TSdBusyType>("bar");
+  globalBusyCount = signal(0);
+
+  private _containerRef: ComponentRef<SdBusyContainerControl> | undefined;
+
+  get containerRef(): ComponentRef<SdBusyContainerControl> {
+    if (this._containerRef === undefined) {
+      this._containerRef = createComponent(SdBusyContainerControl, {
+        environmentInjector: this._envInjector,
+      });
+      this._appRef.attachView(this._containerRef.hostView);
+
+      const el = this._containerRef.location.nativeElement as HTMLElement;
+      el.style.position = "fixed";
+      el.style.top = "0";
+      el.style.left = "0";
+      el.style.right = "0";
+      el.style.bottom = "0";
+      el.style.pointerEvents = "none";
+      document.body.appendChild(el);
+    }
+    return this._containerRef;
+  }
+
+  constructor() {
+    effect(() => {
+      const busy = this.globalBusyCount() > 0;
+      const ref = this.containerRef;
+      const el = ref.location.nativeElement as HTMLElement;
+
+      ref.setInput("busy", busy);
+      ref.setInput("type", this.type());
+      el.style.pointerEvents = busy ? "auto" : "none";
+    });
+  }
+}

package/src/ui/overlay/dropdown/sd-dropdown-popup.control.ts

@@ -0,0 +1,110 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  forwardRef,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdEventsDirective } from "../../../core/directives/sd-events.directive";
+import { SdDropdownControl } from "./sd-dropdown.control";
+import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+
+@Component({
+  selector: "sd-dropdown-popup",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdEventsDirective],
+  host: {
+    "(keydown)": "onKeydown($event)",
+  },
+  template: `
+    <div (sdResize)="onResize($event)">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/mixins";
+      @use "../../../../scss/commons/variables";
+
+      sd-dropdown-popup {
+        position: fixed;
+        z-index: var(--z-index-dropdown);
+        opacity: 0;
+        transform: translateY(-0.625rem);
+        transition: 0.1s linear;
+        transition-property: transform, opacity;
+        pointer-events: none;
+        background: var(--control-color);
+        min-width: 7.5rem;
+        @include mixins.elevation(4);
+        overflow: hidden;
+        border-radius: var(--border-radius-default);
+        border: 1px solid var(--border-color-light);
+
+        > div {
+          width: 100%;
+          height: 100%;
+          overflow: auto;
+          white-space: nowrap;
+        }
+
+        &:focus {
+          outline: 1px solid var(--theme-primary-default);
+        }
+
+        @media all and (max-width: variables.$breakpoint-mobile) {
+          @include mixins.elevation(0);
+          border: 1px solid var(--border-color-default);
+        }
+
+        &[data-sd-mobile] {
+          position: fixed;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: auto;
+          max-height: 80vh;
+          border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+          opacity: 1;
+          pointer-events: auto;
+          transform: none;
+          animation: sd-dropdown-slide-up 0.2s ease-out;
+          @include mixins.elevation(8);
+        }
+      }
+
+      @keyframes sd-dropdown-slide-up {
+        from {
+          transform: translateY(100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
+    `,
+  ],
+})
+export class SdDropdownPopupControl {
+  private readonly _parentControl = inject<SdDropdownControl>(
+    forwardRef(() => SdDropdownControl),
+  );
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
+
+  onKeydown(event: KeyboardEvent): void {
+    this._parentControl.onPopupKeydown(event);
+  }
+
+  onResize(_event: ISdResizeEvent): void {
+    const el = this._elRef.nativeElement;
+    const divEl = el.firstElementChild as HTMLElement;
+
+    if (divEl.clientHeight > 300) {
+      el.style.height = "18.75rem";
+    } else {
+      el.style.height = "";
+    }
+  }
+}

package/src/ui/overlay/dropdown/sd-dropdown.control.ts

@@ -0,0 +1,310 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDropdownPopupControl } from "./sd-dropdown-popup.control";
+import "@simplysm/core-browser";
+
+@Component({
+  selector: "sd-dropdown",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.tabindex]": "disabled() ? undefined : '0'",
+    "(click)": "onHostClick()",
+    "(keydown)": "onHostKeydown($event)",
+  },
+  template: `
+    <ng-content />
+    <ng-content select="sd-dropdown-popup" />
+  `,
+})
+export class SdDropdownControl {
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
+
+  open = model(false);
+  disabled = input(false, { transform: booleanAttribute });
+
+  popupElRef = contentChild.required<SdDropdownPopupControl, ElementRef<HTMLElement>>(
+    SdDropdownPopupControl,
+    { read: ElementRef },
+  );
+
+  private _popupEl?: HTMLElement;
+  private _mouseoverEl?: HTMLElement;
+  private _backdropEl?: HTMLElement;
+  private _isMobile: boolean;
+  private readonly _mql: MediaQueryList;
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+
+    // $breakpoint-mobile (SCSS 변수 참조 불가, 값 동기화 필요)
+    this._mql = window.matchMedia("(max-width: 520px)");
+    this._isMobile = this._mql.matches;
+
+    const onMqlChange = (e: MediaQueryListEvent) => {
+      this._isMobile = e.matches;
+    };
+    this._mql.addEventListener("change", onMqlChange);
+    destroyRef.onDestroy(() => {
+      this._mql.removeEventListener("change", onMqlChange);
+    });
+
+    effect((onCleanup) => {
+      if (this.open()) {
+        const popupEl = this.popupElRef().nativeElement;
+        this._popupEl = popupEl;
+        document.body.appendChild(popupEl);
+
+        if (this._isMobile) {
+          popupEl.setAttribute("data-sd-mobile", "");
+
+          const backdrop = document.createElement("div");
+          backdrop.setAttribute("data-sd-dropdown-backdrop", "");
+          backdrop.style.cssText =
+            "position:fixed;inset:0;background:var(--busy-overlay-bg);z-index:var(--z-index-dropdown)";
+          backdrop.addEventListener("click", () => {
+            this._closePopup();
+          });
+          document.body.insertBefore(backdrop, popupEl);
+          this._backdropEl = backdrop;
+        } else {
+          this._updatePopupPosition();
+        }
+
+        const onScroll = (event: Event) => {
+          this._onDocumentScrollCapture(event);
+        };
+        const onMouseover = (event: Event) => {
+          this._mouseoverEl = (event as MouseEvent).target as HTMLElement;
+        };
+        const onBlur = (event: Event) => {
+          this._onDocumentBlurCapture(event as FocusEvent);
+        };
+
+        document.addEventListener("scroll", onScroll, { capture: true, passive: true });
+        document.addEventListener("mouseover", onMouseover);
+        document.addEventListener("blur", onBlur, { capture: true });
+
+        onCleanup(() => {
+          document.removeEventListener("scroll", onScroll, { capture: true });
+          document.removeEventListener("mouseover", onMouseover);
+          document.removeEventListener("blur", onBlur, { capture: true });
+          this._removePopup();
+        });
+      } else {
+        this._removePopup();
+      }
+    });
+  }
+
+  onHostClick(): void {
+    if (this.open()) {
+      this._closePopup();
+    } else {
+      this._openPopup();
+    }
+  }
+
+  onHostKeydown(event: KeyboardEvent): void {
+    if (event.ctrlKey || event.altKey) return;
+
+    if (event.key === "ArrowDown") {
+      if (!this.open()) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._openPopup();
+      } else {
+        const popupEl = this.popupElRef().nativeElement;
+        const focusable = popupEl.findFirstFocusableChild();
+        if (focusable) {
+          event.preventDefault();
+          event.stopPropagation();
+          focusable.focus();
+        }
+      }
+    }
+
+    if (event.key === "ArrowUp") {
+      if (this.open()) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._closePopup();
+      }
+    }
+
+    if (event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.open()) {
+        this._closePopup();
+      } else {
+        this._openPopup();
+      }
+    }
+
+    if (event.key === "Escape") {
+      if (this.open()) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._closePopup();
+      }
+    }
+  }
+
+  onPopupKeydown(event: KeyboardEvent): void {
+    if (event.ctrlKey || event.altKey) return;
+
+    if (event.key === "Escape") {
+      if (this.open()) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._closePopup();
+      }
+    }
+  }
+
+  private _openPopup(): void {
+    if (this.open()) return;
+    if (this.disabled()) return;
+
+    this.open.set(true);
+  }
+
+  private _closePopup(): void {
+    if (!this.open()) return;
+
+    this.open.set(false);
+  }
+
+  private _updatePopupPosition(): void {
+    const contentEl = this._elRef.nativeElement;
+    const popupEl = this._popupEl;
+    if (popupEl == null) return;
+
+    contentEl.repaint();
+
+    const windowOffset = contentEl.getRelativeOffset(document.body);
+
+    const isPlaceBottom = window.innerHeight < windowOffset.top * 2;
+    const isPlaceRight = window.innerWidth < windowOffset.left * 2;
+
+    const gap = 2;
+    const topPos = isPlaceBottom ? undefined : windowOffset.top + contentEl.offsetHeight + gap;
+    const bottomPos = isPlaceBottom ? window.innerHeight - windowOffset.top : undefined;
+    const leftPos = isPlaceRight ? undefined : windowOffset.left;
+    const rightPos = isPlaceRight
+      ? window.innerWidth - windowOffset.left - contentEl.offsetWidth
+      : undefined;
+
+    // Calculate available space for popup
+    const availableHeight = isPlaceBottom
+      ? windowOffset.top - gap
+      : window.innerHeight - (windowOffset.top + contentEl.offsetHeight + gap);
+    const availableWidth = isPlaceRight
+      ? windowOffset.left + contentEl.offsetWidth
+      : window.innerWidth - windowOffset.left;
+
+    Object.assign(popupEl.style, {
+      top: topPos !== undefined ? topPos + "px" : "",
+      bottom: bottomPos !== undefined ? bottomPos + "px" : "",
+      left: leftPos !== undefined ? leftPos + "px" : "",
+      right: rightPos !== undefined ? rightPos + "px" : "",
+      minWidth: contentEl.offsetWidth + "px",
+      maxHeight: availableHeight > 0 ? availableHeight + "px" : "",
+      maxWidth: availableWidth > 0 ? availableWidth + "px" : "",
+      overflow: "auto",
+      opacity: "1",
+      pointerEvents: "auto",
+      transform: "none",
+    });
+  }
+
+  private _onDocumentScrollCapture(event: Event): void {
+    if (this._isMobile) return;
+
+    const contentEl = this._elRef.nativeElement;
+    if ((event.target as Element).contains(contentEl)) {
+      this._updatePopupPosition();
+    }
+  }
+
+  private _onDocumentBlurCapture(event: FocusEvent): void {
+    const contentEl = this._elRef.nativeElement;
+    const popupEl = this._popupEl;
+    if (popupEl == null) return;
+
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget instanceof HTMLElement) {
+      if (
+        relatedTarget === contentEl ||
+        relatedTarget === popupEl ||
+        contentEl.contains(relatedTarget) === true ||
+        popupEl.contains(relatedTarget) === true
+      ) {
+        return;
+      }
+    }
+
+    const mouseoverEl = this._mouseoverEl;
+    if (
+      relatedTarget == null &&
+      mouseoverEl instanceof HTMLElement &&
+      (contentEl.contains(mouseoverEl) === true || popupEl.contains(mouseoverEl) === true)
+    ) {
+      const focusable = popupEl.findFirstFocusableChild();
+      if (focusable != null) {
+        focusable.focus();
+      } else {
+        contentEl.focus();
+      }
+      return;
+    }
+
+    if (this.open()) {
+      this._closePopup();
+    }
+  }
+
+  private _removePopup(): void {
+    if (this._backdropEl != null) {
+      this._backdropEl.remove();
+      this._backdropEl = undefined;
+    }
+
+    const popupEl = this._popupEl;
+    if (popupEl != null) {
+      const contentEl = this._elRef.nativeElement;
+
+      if (popupEl.matches(":focus-within")) {
+        contentEl.focus();
+      }
+
+      popupEl.removeAttribute("data-sd-mobile");
+      Object.assign(popupEl.style, {
+        top: "",
+        bottom: "",
+        left: "",
+        right: "",
+        minWidth: "",
+        opacity: "",
+        pointerEvents: "",
+        transform: "",
+      });
+      popupEl.remove();
+      this._popupEl = undefined;
+    }
+  }
+}