@simplysm/angular 14.0.30 → 14.0.33

package/src/ui/navigation/topbar/sd-topbar-menu.ts

@@ -1,158 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  viewChildren,
-  ViewEncapsulation,
-} from "@angular/core";
-import { injectFullPageCodeSignal } from "../../../core/utils/injectFullPageCodeSignal";
-import {
-  type SdMenu,
-  getMenuRouterLinkOption as menuRouterLinkOption,
-  getIsMenuSelected as menuIsSelected,
-} from "../menu-utils";
-import { NgTemplateOutlet } from "@angular/common";
-import { SdTypedTemplate } from "../../../core/directives/sd-typed-template";
-import { SdRouterLink } from "../../../core/directives/sd-router-link";
-import { SdDropdown } from "../../overlay/dropdown/sd-dropdown";
-import { SdDropdownPopup } from "../../overlay/dropdown/sd-dropdown-popup";
-import { SdList } from "../../data/list/sd-list";
-import { SdListItem } from "../../data/list/sd-list-item";
-import { SdButton } from "../../form/button/sd-button";
-import { NgIcon } from "@ng-icons/core";
-import { tablerCaretDown } from "@ng-icons/tabler-icons";
-
-@Component({
-  selector: "sd-topbar-menu",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [
-    NgTemplateOutlet,
-    SdTypedTemplate,
-    SdRouterLink,
-    SdDropdown,
-    SdDropdownPopup,
-    SdList,
-    SdListItem,
-    SdButton,
-    NgIcon,
-  ],
-  host: {
-    "class": "flex-row gap-sm",
-  },
-  template: `
-    @for (menu of menus(); track menu.codeChain.join("."); let i = $index) {
-      <sd-dropdown>
-        <sd-button [theme]="'link-gray'">
-          @if (menu.icon) {
-            <ng-icon [svg]="menu.icon" />
-          }
-          {{ menu.title }}
-          <ng-icon [svg]="tablerCaretDown" />
-        </sd-button>
-        <sd-dropdown-popup>
-          <sd-list [inset]="true">
-            @if (menu.children) {
-              <ng-template
-                [ngTemplateOutlet]="itemTpl"
-                [ngTemplateOutletContext]="{ menus: menu.children, depth: 0, dropdownIndex: i }"
-              ></ng-template>
-            } @else {
-              <ng-template
-                [ngTemplateOutlet]="itemTpl"
-                [ngTemplateOutletContext]="{ menus: [menu], depth: 0, dropdownIndex: i }"
-              ></ng-template>
-            }
-          </sd-list>
-        </sd-dropdown-popup>
-      </sd-dropdown>
-    }
-
-    <ng-template
-      #itemTpl
-      [typed]="itemTemplateType"
-      let-currMenus="menus"
-      let-depth="depth"
-      let-dropdownIndex="dropdownIndex"
-    >
-      @for (menu of currMenus; track menu.codeChain.join(".")) {
-        <sd-list-item
-          [style.padding-left.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
-          [style.padding-block]="depth === 0 ? 'var(--gap-default)' : undefined"
-          [sdRouterLink]="getMenuRouterLinkOption(menu)"
-          (click)="onMenuClick(menu, dropdownIndex)"
-          [selected]="getIsMenuSelected(menu)"
-          [open]="true"
-        >
-          @if (menu.icon) {
-            <ng-icon [svg]="menu.icon" />
-            &nbsp;
-          }
-          {{ menu.title }}
-          @if (menu.children) {
-            <sd-list [inset]="true">
-              <ng-template
-                [ngTemplateOutlet]="itemTpl"
-                [ngTemplateOutletContext]="{
-                  menus: menu.children,
-                  depth: depth + 1,
-                  dropdownIndex: dropdownIndex,
-                }"
-              ></ng-template>
-            </sd-list>
-          }
-        </sd-list-item>
-      }
-    </ng-template>
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-topbar-menu {
-        sd-dropdown-popup {
-          sd-list[data-sd-inset="true"] {
-            sd-list {
-              background: var(--trans-lightest);
-            }
-          }
-        }
-      }
-    `,
-  ],
-})
-export class SdTopbarMenu {
-  menus = input<SdMenu[]>([]);
-  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
-
-  fullPageCode = injectFullPageCodeSignal();
-
-  private readonly _dropdowns = viewChildren(SdDropdown);
-
-  getMenuRouterLinkOption(
-    menu: SdMenu,
-  ): { link: string; queryParams: Record<string, string> | undefined } | undefined {
-    return menuRouterLinkOption(menu);
-  }
-
-  getIsMenuSelected(menu: SdMenu): boolean {
-    return menuIsSelected(menu, this.fullPageCode(), this.getMenuIsSelectedFn());
-  }
-
-  onMenuClick(menu: SdMenu, dropdownIndex: number): void {
-    if (menu.url != null) {
-      window.open(menu.url, "_blank");
-    }
-
-    if (menu.children === undefined) {
-      this._dropdowns()[dropdownIndex].open.set(false);
-    }
-  }
-
-  protected readonly itemTemplateType!: {
-    menus: SdMenu[];
-    depth: number;
-    dropdownIndex: number;
-  };
-
-  protected readonly tablerCaretDown = tablerCaretDown;
-}

package/src/ui/navigation/topbar/sd-topbar-user.ts

@@ -1,58 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  viewChild,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdDropdown } from "../../overlay/dropdown/sd-dropdown";
-import { SdDropdownPopup } from "../../overlay/dropdown/sd-dropdown-popup";
-import { SdList } from "../../data/list/sd-list";
-import { SdListItem } from "../../data/list/sd-list-item";
-import { SdButton } from "../../form/button/sd-button";
-
-@Component({
-  selector: "sd-topbar-user",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [
-    SdDropdown,
-    SdDropdownPopup,
-    SdList,
-    SdListItem,
-    SdButton,
-  ],
-  template: `
-    <sd-dropdown>
-      <sd-button [inline]="true" [theme]="'link-gray'">
-        <ng-content />
-      </sd-button>
-      <sd-dropdown-popup>
-        <sd-list>
-          @for (menu of menus(); track menu.title) {
-            <sd-list-item (click)="onMenuClick(menu)">
-              {{ menu.title }}
-            </sd-list-item>
-          }
-        </sd-list>
-      </sd-dropdown-popup>
-    </sd-dropdown>
-  `,
-  styles: [],
-})
-export class SdTopbarUser {
-  menus = input.required<SdTopbarUserMenu[]>();
-
-  private readonly _dropdown = viewChild(SdDropdown);
-
-  onMenuClick(menu: SdTopbarUserMenu): void {
-    menu.onClick();
-    this._dropdown()?.open.set(false);
-  }
-}
-
-export interface SdTopbarUserMenu {
-  title: string;
-  onClick: () => void;
-}

package/src/ui/navigation/topbar/sd-topbar.ts

@@ -1,95 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdSidebarContainer } from "../sidebar/sd-sidebar-container";
-import { SdButton } from "../../form/button/sd-button";
-import { NgIcon } from "@ng-icons/core";
-import { tablerMenu2 } from "@ng-icons/tabler-icons";
-
-@Component({
-  selector: "sd-topbar",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdButton, NgIcon],
-  host: {
-    "class": "flex-row gap-default cross-align-center main-align-start"
-  },
-  template: `
-    @if (hasSidebar()) {
-      <sd-button
-        [theme]="'link-primary'"
-        [buttonClass]="'p-sm-default'"
-        (click)="onToggleButtonClick()"
-      >
-        <ng-icon [svg]="tablerMenu2" />
-      </sd-button>
-    }
-    
-    <ng-content />
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-topbar {
-        height: var(--topbar-height);
-        overflow-x: auto;
-        overflow-y: hidden;
-        user-select: none;
-
-        background: var(--control-color);
-        color: var(--text-trans-default);
-        border-bottom: 1px solid var(--border-color-lighter);
-        padding-left: var(--gap-sm);
-
-        @each $h in (h1, h2, h3, h4, h5, h6) {
-          > #{$h} {
-            padding-right: var(--gap-xl);
-          }
-        }
-
-        &::-webkit-scrollbar-track {
-          background-color: var(--trans-light);
-        }
-
-        &::-webkit-scrollbar-corner {
-          background-color: var(--trans-light);
-        }
-
-        &::-webkit-scrollbar {
-          width: var(--gap-sm);
-          height: var(--gap-sm);
-          background-color: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background-color: var(--trans-default);
-        }
-      }
-    `,
-  ],
-})
-export class SdTopbar {
-  private readonly _injectedSidebarContainer = inject(SdSidebarContainer, {
-    optional: true,
-  });
-
-  sidebarContainer = input<SdSidebarContainer>();
-
-  hasSidebar = computed(
-    () => this.sidebarContainer() != null || this._injectedSidebarContainer != null,
-  );
-
-  onToggleButtonClick(): void {
-    const sc = this.sidebarContainer() ?? this._injectedSidebarContainer;
-    if (sc != null) {
-      sc.toggle.update((v) => !v);
-    }
-  }
-
-  protected readonly tablerMenu2 = tablerMenu2;
-}

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

@@ -1,243 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  input,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdBusyProvider, type SdBusyType } from "../../../core/providers/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 SdBusyContainer {
-  private readonly _sdBusy = inject(SdBusyProvider);
-
-  busy = input(false, { transform: booleanAttribute });
-  message = input<string | undefined>(undefined);
-  type = input<SdBusyType | 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/dropdown/sd-dropdown-popup.ts

@@ -1,95 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  inject,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdDropdown } from "./sd-dropdown";
-
-@Component({
-  selector: "sd-dropdown-popup",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [],
-  host: {
-    "(keydown)": "onKeydown($event)",
-  },
-  template: `
-    <div>
-      <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 SdDropdownPopup {
-  private readonly _parentControl = inject<SdDropdown>(
-    forwardRef(() => SdDropdown),
-  );
-
-  onKeydown(event: KeyboardEvent): void {
-    this._parentControl.onPopupKeydown(event);
-  }
-}

package/src/ui/overlay/modal/sd-confirm-modal.ts

@@ -1,48 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  output,
-  signal,
-  ViewEncapsulation,
-} from "@angular/core";
-import type { SdModalContentDef } from "./sd-modal.provider";
-import { SdButton } from "../../form/button/sd-button";
-
-/**
- * 범용 확인 모달.
- * SdModalContentDef<boolean> 구현. message를 표시하고, 확인/취소.
- * 확인 시 true emit, 취소 시 undefined emit.
- */
-@Component({
-  selector: "sd-confirm-modal",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdButton],
-  host: {
-    style: "display: block",
-    class: "p-default",
-  },
-  template: `
-    <p class="mb-default" [innerHTML]="message()"></p>
-    <div class="flex-row main-align-end gap-sm">
-      <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
-      <sd-button (click)="onCancel()">취소</sd-button>
-    </div>
-  `,
-})
-export class SdConfirmModal implements SdModalContentDef<boolean> {
-  initialized = signal(true);
-  close = output<boolean | undefined>();
-
-  message = input.required<string>();
-
-  onConfirm(): void {
-    this.close.emit(true);
-  }
-
-  onCancel(): void {
-    this.close.emit(undefined);
-  }
-}