@simplysm/angular 14.0.30 → 14.0.33

package/src/ui/data/sheet/useSheetDisplayPipeline.ts

@@ -1,64 +0,0 @@
-import { computed, type Signal, type WritableSignal } from "@angular/core";
-import { useExpandingManager } from "../../../core/utils/useExpandingManager";
-
-export function useSheetDisplayPipeline<T>(options: {
-  items: Signal<T[]>;
-  useAutoSort: Signal<boolean>;
-  sortItems: (items: T[]) => T[];
-  itemsPerPage: Signal<number>;
-  currentPage: Signal<number>;
-  totalPageCount: Signal<number>;
-  expandedItems: WritableSignal<T[]>;
-  getChildrenFn: Signal<((item: T, index: number) => T[] | undefined) | undefined>;
-}) {
-  const effectivePageCount = computed(() => {
-    const total = options.totalPageCount();
-    if (total > 0) return total;
-    const perPage = options.itemsPerPage();
-    if (perPage <= 0) return 0;
-    return Math.ceil(options.items().length / perPage);
-  });
-
-  const sortedItems = computed(() => {
-    const items = options.items();
-    if (options.useAutoSort()) {
-      return options.sortItems(items);
-    }
-    return items;
-  });
-
-  const pagedItems = computed(() => {
-    const items = sortedItems();
-    const perPage = options.itemsPerPage();
-    if (perPage <= 0) return items;
-    const page = options.currentPage();
-    const start = page * perPage;
-    return items.slice(start, start + perPage);
-  });
-
-  const expanding = useExpandingManager<T>({
-    items: pagedItems,
-    expandedItems: options.expandedItems,
-    getChildrenFn: options.getChildrenFn,
-    sort: (items) => {
-      if (options.useAutoSort()) {
-        return options.sortItems(items);
-      }
-      return items;
-    },
-  });
-
-  const displayItems = computed(() => {
-    const getChildrenFn = options.getChildrenFn();
-    if (getChildrenFn != null) {
-      return expanding.displayItems().filter((item) => expanding.isVisible(item));
-    }
-    return pagedItems();
-  });
-
-  return {
-    effectivePageCount,
-    displayItems,
-    expanding,
-  };
-}

package/src/ui/form/button/sd-additional-button.ts

@@ -1,100 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from "@angular/core";
-
-@Component({
-  selector: "sd-additional-button",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  template: `
-    <div class="_content flex-fill">
-      <ng-content />
-    </div>
-    <div class="_button">
-      <ng-content select="sd-anchor" />
-      <ng-content select="sd-button" />
-    </div>
-  `,
-  styles: [
-    /* language=SCSS */ `
-      @use "../../../../scss/commons/mixins";
-
-      sd-additional-button {
-        border: 1px solid var(--trans-light);
-        border-radius: var(--border-radius-default);
-        overflow: hidden;
-
-        > ._content {
-          padding: var(--gap-sm) var(--gap-default);
-        }
-
-        > ._button {
-          display: flex;
-          flex-wrap: nowrap;
-          @include mixins.flex-direction(row);
-
-          > sd-anchor {
-            padding: var(--gap-sm) !important;
-          }
-
-          > sd-button > button {
-            border-left: 1px solid var(--trans-lighter) !important;
-            padding: var(--gap-sm) !important;
-            height: 100%;
-          }
-        }
-
-        &[data-sd-inset="true"] {
-          border-radius: 0;
-          border: none;
-        }
-
-        &[data-sd-size="sm"] {
-          > ._content {
-            padding: var(--gap-xs) var(--gap-default);
-          }
-
-          > ._button {
-            > sd-anchor {
-              padding: var(--gap-xs) var(--gap-sm) !important;
-            }
-
-            > sd-button > button {
-              padding: var(--gap-xs) var(--gap-sm) !important;
-            }
-          }
-        }
-
-        &[data-sd-size="lg"] {
-          > ._content {
-            padding: var(--gap-default) var(--gap-xl);
-          }
-
-          > ._button {
-            > sd-anchor {
-              padding: var(--gap-default) !important;
-            }
-
-            > sd-button > button {
-              padding: var(--gap-default) !important;
-            }
-          }
-        }
-      }
-    `,
-  ],
-  host: {
-    "class": "flex-row gap-sm",
-    "[attr.data-sd-size]": "size()",
-    "[attr.data-sd-inset]": "inset()",
-  },
-})
-export class SdAdditionalButton {
-  size = input<"sm" | "lg">();
-  inset = input(false, { transform: booleanAttribute });
-}

package/src/ui/form/button/sd-anchor.ts

@@ -1,67 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from "@angular/core";
-
-@Component({
-  selector: "sd-anchor",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  template: `
-    <ng-content />
-  `,
-  styles: [
-    /* language=SCSS */ `
-      @use "sass:map";
-
-      @use "../../../../scss/commons/variables";
-
-      sd-anchor {
-        display: inline-block;
-        cursor: pointer;
-
-        @each $key, $val in map.get(variables.$vars, theme) {
-          &[data-sd-theme="#{$key}"] {
-            color: var(--theme-#{$key}-default);
-
-            &:hover {
-              color: var(--theme-#{$key}-darker);
-              text-decoration: underline;
-            }
-
-            &:active {
-              color: var(--theme-#{$key}-default);
-            }
-
-            @media all and (pointer: coarse) {
-              &:hover {
-                color: var(--theme-#{$key}-default);
-                text-decoration: none;
-              }
-            }
-          }
-        }
-
-        &[data-sd-disabled="true"] {
-          opacity: 0.3;
-          pointer-events: none;
-        }
-      }
-    `,
-  ],
-  host: {
-    "[attr.data-sd-theme]": "theme()",
-    "[attr.data-sd-disabled]": "disabled()",
-    "[attr.tabindex]": "disabled() ? undefined : 0",
-  },
-})
-export class SdAnchor {
-  disabled = input(false, { transform: booleanAttribute });
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >("primary");
-}

package/src/ui/form/button/sd-button.ts

@@ -1,209 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdRipple } from "../../../core/directives/sd-ripple";
-
-@Component({
-  selector: "sd-button",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdRipple],
-  template: `
-    <button
-      tabindex="0"
-      [type]="type()"
-      [disabled]="disabled()"
-      [class]="buttonClass()"
-      [style]="buttonStyle()"
-      [sdRipple]="!disabled()"
-    >
-      <ng-content />
-    </button>
-  `,
-  styles: [
-    /* language=SCSS */ `
-      @use "sass:map";
-
-      @use "../../../../scss/commons/variables";
-      @use "../../../../scss/commons/mixins";
-
-      sd-button {
-        > button {
-          @include mixins.form-control-base();
-          user-select: none;
-          padding: var(--gap-sm) var(--gap-lg);
-          width: 100%;
-
-          background: var(--control-color);
-          border-color: var(--border-color-default);
-          border-radius: var(--border-radius-default);
-
-          font-weight: bold;
-          text-align: center;
-          cursor: pointer;
-
-          transition: 0.1s linear;
-          transition-property: border, background;
-
-          &:hover {
-            background: var(--theme-gray-lightest);
-          }
-
-          &:disabled {
-            background: var(--control-color);
-            border-color: var(--theme-gray-lighter);
-            color: var(--text-trans-lighter);
-            cursor: default;
-          }
-        }
-
-        &[data-sd-inset="true"] > button {
-          border-radius: 0;
-          border: none;
-          color: var(--theme-primary-default);
-
-          &:hover {
-            color: var(--theme-primary-darker);
-          }
-
-          &:disabled {
-            background: var(--control-color);
-            border-color: var(--theme-gray-lighter);
-            color: var(--text-trans-default);
-            cursor: default;
-          }
-        }
-
-        @each $key, $val in map.get(variables.$vars, theme) {
-          &[data-sd-theme="#{$key}"] > button {
-            background: var(--theme-#{$key}-default);
-            border-color: var(--theme-#{$key}-default);
-            color: var(--text-trans-rev-default);
-
-            &:hover {
-              background: var(--theme-#{$key}-dark);
-              border-color: var(--theme-#{$key}-dark);
-              color: var(--text-trans-rev-default);
-            }
-
-            &:disabled {
-              background: var(--theme-gray-lighter);
-              border-color: var(--theme-gray-lighter);
-              color: var(--text-trans-lighter);
-              cursor: default;
-            }
-          }
-        }
-
-        &[data-sd-theme="link"] > button {
-          border-color: transparent;
-          background: transparent;
-          color: var(--theme-primary-default);
-
-          &:hover {
-            color: var(--theme-primary-darker);
-          }
-
-          &:disabled {
-            border-color: transparent;
-            color: var(--text-trans-lighter);
-          }
-        }
-
-        @each $key, $val in map.get(variables.$vars, theme) {
-          &[data-sd-theme="link-#{$key}"] > button {
-            border-color: transparent;
-            background: transparent;
-            color: var(--theme-#{$key}-default);
-
-            &:hover {
-              background: var(--trans-lighter);
-              color: var(--theme-#{$key}-darker);
-            }
-
-            &:disabled {
-              border-color: transparent;
-              color: var(--text-trans-lighter);
-            }
-          }
-        }
-
-        &[data-sd-theme="link-rev"] > button {
-          border-color: transparent;
-          background: transparent;
-          color: var(--text-trans-rev-default);
-
-          &:hover {
-            color: var(--text-trans-rev-dark);
-          }
-
-          &:disabled {
-            border-color: transparent;
-            color: var(--text-trans-rev-darker);
-          }
-        }
-
-        &[data-sd-inline="true"] > button {
-          display: inline-block;
-          width: auto;
-          vertical-align: top;
-        }
-
-        &[data-sd-size="sm"] > button {
-          padding: var(--gap-xs) var(--gap-default);
-        }
-
-        &[data-sd-size="lg"] > button {
-          padding: var(--gap-default) var(--gap-xl);
-        }
-
-        &[data-sd-disabled="true"] {
-          &:active {
-            pointer-events: none;
-          }
-        }
-      }
-    `,
-  ],
-  host: {
-    "[attr.data-sd-theme]": "theme()",
-    "[attr.data-sd-inline]": "inline()",
-    "[attr.data-sd-size]": "size()",
-    "[attr.data-sd-inset]": "inset()",
-    "[attr.data-sd-disabled]": "disabled()",
-  },
-})
-export class SdButton {
-  type = input<"button" | "submit">("button");
-  theme = input<
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "warning"
-    | "danger"
-    | "gray"
-    | "blue-gray"
-    | "link"
-    | "link-primary"
-    | "link-secondary"
-    | "link-info"
-    | "link-success"
-    | "link-warning"
-    | "link-danger"
-    | "link-gray"
-    | "link-blue-gray"
-    | "link-rev"
-  >();
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  disabled = input(false, { transform: booleanAttribute });
-  buttonStyle = input<string>();
-  buttonClass = input<string>();
-}

package/src/ui/form/button/sd-modal-select-button.ts

@@ -1,212 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  model,
-  type InputSignal,
-  ViewEncapsulation,
-} from "@angular/core";
-import {
-  SdModalProvider,
-  type SdModalContentDef,
-  type SdModalInfo,
-  type SdModalOptions,
-} from "../../overlay/modal/sd-modal.provider";
-import type { SelectModeValue } from "../select/sd-select";
-import { SdAnchor } from "./sd-anchor";
-import { SdButton } from "./sd-button";
-import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
-import type { SelectModalOutputResult } from "../../../core/types/select-modal-output-result";
-import { NgIcon } from "@ng-icons/core";
-import { tablerSearch, tablerEraser } from "@ng-icons/tabler-icons";
-
-/**
- * 모달 선택 컴포넌트가 구현해야 하는 인터페이스
- * SdModalContentDef을 확장하여 selectMode와 selectedItemKeys를 추가한다.
- */
-export interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
-  selectMode: InputSignal<"single" | "multi" | undefined>;
-  selectedItemKeys: InputSignal<any[]>;
-}
-
-/**
- * 모달 선택 정보 (selectMode/selectedItemKeys를 제외한 inputs)
- */
-export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
-  T,
-  "selectMode" | "selectedItemKeys"
->;
-
-@Component({
-  selector: "sd-modal-select-button",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdAnchor, SdButton, NgIcon],
-  template: `
-    <div class="_content">
-      <ng-content />
-    </div>
-    <div class="_button">
-      @if (!disabled() && !required() && _hasValue()) {
-        <sd-anchor data-sd-eraser [theme]="'danger'" (click)="onEraseClick()">
-          <ng-icon [svg]="tablerEraser" />
-        </sd-anchor>
-      }
-      @if (!disabled()) {
-        <sd-button [inset]="true" (click)="onSearchClick()">
-          <ng-icon [svg]="searchIcon()" />
-        </sd-button>
-      }
-    </div>
-  `,
-  styles: [
-    /* language=SCSS */ `
-      @use "../../../../scss/commons/mixins";
-
-      sd-modal-select-button {
-        display: flex;
-        flex-direction: row;
-        gap: var(--gap-sm);
-        position: relative;
-
-        border: 1px solid var(--trans-light);
-        border-radius: var(--border-radius-default);
-        overflow: hidden;
-
-        > ._content {
-          flex: 1;
-          padding: var(--gap-sm) var(--gap-default);
-        }
-
-        > ._button {
-          display: flex;
-          flex-wrap: nowrap;
-          @include mixins.flex-direction(row);
-
-          > sd-anchor {
-            padding: var(--gap-sm) !important;
-          }
-
-          > sd-button > button {
-            border-left: 1px solid var(--trans-lighter) !important;
-            padding: var(--gap-sm) !important;
-            height: 100%;
-          }
-        }
-
-        &[data-sd-inset="true"] {
-          border-radius: 0;
-          border: none;
-        }
-
-        &[data-sd-size="sm"] {
-          > ._content {
-            padding: var(--gap-xs) var(--gap-default);
-          }
-
-          > ._button {
-            > sd-anchor {
-              padding: var(--gap-xs) var(--gap-sm) !important;
-            }
-
-            > sd-button > button {
-              padding: var(--gap-xs) var(--gap-sm) !important;
-            }
-          }
-        }
-
-        &[data-sd-size="lg"] {
-          > ._content {
-            padding: var(--gap-default) var(--gap-xl);
-          }
-
-          > ._button {
-            > sd-anchor {
-              padding: var(--gap-default) !important;
-            }
-
-            > sd-button > button {
-              padding: var(--gap-default) !important;
-            }
-          }
-        }
-      }
-    `,
-  ],
-  host: {
-    "[attr.data-sd-size]": "size()",
-    "[attr.data-sd-inset]": "inset()",
-    "[attr.data-sd-disabled]": "disabled()",
-  },
-})
-export class SdModalSelectButton<
-  T extends object,
-  K,
-  M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>,
-> {
-  private readonly _sdModal = inject(SdModalProvider);
-
-  modal = input.required<SdSelectModalInfo<SdSelectModal<T>>>();
-
-  value = model<SelectModeValue<K>[M]>();
-  selectedItems = model<T[]>([]);
-
-  disabled = input(false, { transform: booleanAttribute });
-  required = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  selectMode = input<M>("single" as M);
-  modalOptions = input<SdModalOptions>();
-
-  searchIcon = input(tablerSearch);
-
-  protected readonly tablerEraser = tablerEraser;
-
-  _hasValue = computed(() => {
-    const v = this.value();
-    if (v == null) return false;
-    if (Array.isArray(v)) return v.length > 0;
-    return true;
-  });
-
-  constructor() {
-    setupInvalid(() => {
-      if (!this.required()) return "";
-      const v = this.value();
-      if (v == null) return "선택된 항목이 없습니다.";
-      if (Array.isArray(v) && v.length === 0) return "선택된 항목이 없습니다.";
-      return "";
-    });
-  }
-
-  onEraseClick(): void {
-    this.value.set((this.selectMode() === "multi" ? [] : undefined) as any);
-    this.selectedItems.set([]);
-  }
-
-  async onSearchClick(): Promise<void> {
-    const modal = this.modal();
-    const result = await this._sdModal.showAsync({
-      ...modal,
-      inputs: {
-        selectMode: this.selectMode(),
-        selectedItemKeys: (this.selectMode() === "multi"
-          ? ((this.value() as any[] | undefined) ?? [])
-          : [this.value()]
-        ).filterExists(),
-        ...modal.inputs,
-      },
-    });
-
-    if (result) {
-      const newValue =
-        this.selectMode() === "multi" ? result.selectedItemKeys : result.selectedItemKeys[0];
-      this.value.set(newValue);
-      this.selectedItems.set(result.selectedItems);
-    }
-  }
-}