@simplysm/angular 14.0.30 → 14.0.33

package/src/features/shared-data/sd-shared-data-select-list.ts

@@ -1,253 +0,0 @@
-import { NgTemplateOutlet } from "@angular/common";
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  effect,
-  inject,
-  input,
-  model,
-  signal,
-  TemplateRef,
-  untracked,
-  ViewEncapsulation,
-} from "@angular/core";
-import { str } from "@simplysm/core-common";
-import { matchesSearchText } from "./matchesSearchText";
-import type { SharedDataBase } from "../../core/providers/sd-shared-data.provider";
-import {
-  SdItemOfTemplate,
-  type SdItemOfTemplateContext,
-} from "../../core/directives/sd-item-of-template";
-import { SdModalProvider } from "../../ui/overlay/modal/sd-modal.provider";
-import type {
-  SdSelectModal,
-  SdSelectModalInfo,
-} from "../../ui/form/button/sd-modal-select-button";
-import { setupModelHook } from "../../core/utils/setups/setupModelHook";
-import { SdPagination } from "../../ui/navigation/pagination/sd-pagination";
-import { SdTextfield } from "../../ui/form/input/sd-textfield";
-import { SdAnchor } from "../../ui/form/button/sd-anchor";
-import { SdList } from "../../ui/data/list/sd-list";
-import { SdListItem } from "../../ui/data/list/sd-list-item";
-import { NgIcon } from "@ng-icons/core";
-import { tablerExternalLink } from "@ng-icons/tabler-icons";
-
-@Component({
-  selector: "sd-shared-data-select-list",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [
-    NgTemplateOutlet,
-    SdTextfield,
-    SdPagination,
-    SdAnchor,
-    SdList,
-    SdListItem,
-    NgIcon,
-  ],
-  host: {
-    class: "flex-column fill",
-  },
-  template: `
-    @if (header()) {
-      <div class="control-header p-default">
-        {{ header() }}
-      </div>
-    }
-
-    <div class="flex-column gap-sm p-default pt-0">
-      @if (headerTplRef() || modal()) {
-        <div class="flex-row">
-          <div class="flex-fill">
-            @if (headerTplRef()) {
-              <ng-template [ngTemplateOutlet]="headerTplRef()!"></ng-template>
-            }
-          </div>
-          @if (modal()) {
-            <sd-anchor (click)="onModalButtonClick()">
-              <ng-icon [svg]="tablerExternalLink" />
-            </sd-anchor>
-          }
-        </div>
-      }
-
-      @if (!filterTplRef()) {
-        <sd-textfield [type]="'text'" [placeholder]="'검색어'" [(value)]="searchText" />
-      } @else {
-        <div>
-          <ng-template [ngTemplateOutlet]="filterTplRef()!" />
-        </div>
-      }
-    </div>
-
-    <div class="flex-fill">
-      <div class="flex-column gap-default">
-        @if (pageItemCount()) {
-          <sd-pagination [(currentPage)]="page" [totalPageCount]="pageLength()" />
-        }
-
-        <sd-list [inset]="true" class="flex-fill">
-          @if (useUndefined()) {
-            <sd-list-item
-              [selected]="selectedItem() === undefined"
-              (click)="select(undefined)"
-              [selectedIcon]="selectedIcon()"
-            >
-              @if (undefinedTplRef()) {
-                <ng-template [ngTemplateOutlet]="undefinedTplRef()!" />
-              } @else {
-                <span class="tx-theme-gray-default">미지정</span>
-              }
-            </sd-list-item>
-          }
-          @for (item of displayItems(); let index = $index; track item.__valueKey) {
-            <sd-list-item
-              [selected]="selectedItem() === item"
-              (click)="toggle(item)"
-              [selectedIcon]="selectedIcon()"
-            >
-              <ng-template
-                [ngTemplateOutlet]="itemTplRef() ?? null"
-                [ngTemplateOutletContext]="{
-                  $implicit: item,
-                  item: item,
-                  index: index,
-                  depth: 0,
-                }"
-              ></ng-template>
-            </sd-list-item>
-          }
-        </sd-list>
-      </div>
-    </div>
-  `,
-})
-export class SdSharedDataSelectList<
-  TItem extends SharedDataBase<string | number>,
-  TModal extends SdSelectModal<any>,
-> {
-  private readonly _sdModal = inject(SdModalProvider);
-
-  selectedItem = model<TItem>();
-  canChangeFn = input<(item: TItem | undefined) => boolean | Promise<boolean>>(
-    () => true,
-  );
-
-  items = input.required<TItem[]>();
-  selectedIcon = input<string>();
-  useUndefined = input(false, { transform: booleanAttribute });
-  filterFn = input<(item: TItem, index: number) => boolean>();
-
-  modal = input<SdSelectModalInfo<TModal>>();
-
-  header = input<string>();
-
-  headerTplRef = contentChild<any, TemplateRef<void>>("headerTpl", {
-    read: TemplateRef,
-  });
-  filterTplRef = contentChild<any, TemplateRef<void>>("filterTpl", {
-    read: TemplateRef,
-  });
-  itemTplRef = contentChild<any, TemplateRef<SdItemOfTemplateContext<TItem>>>(
-    SdItemOfTemplate,
-    { read: TemplateRef },
-  );
-  undefinedTplRef = contentChild<any, TemplateRef<void>>("undefinedTpl", {
-    read: TemplateRef,
-  });
-
-  searchText = signal<string | undefined>(undefined);
-
-  pageItemCount = input<number>();
-  page = signal(0);
-
-  private readonly _filteredItems = computed(() => {
-    let result = this.items().filter((item) => !item.__isHidden);
-
-    if (!str.isNullOrEmpty(this.searchText())) {
-      result = result.filter((item) =>
-        matchesSearchText(item.__searchText, this.searchText()),
-      );
-    }
-
-    if (this.filterFn() != null) {
-      result = result.filter((item, i) => this.filterFn()!(item, i));
-    }
-
-    return result;
-  });
-
-  pageLength = computed(() => {
-    const pic = this.pageItemCount();
-    if (pic != null && pic > 0) {
-      return Math.ceil(this._filteredItems().length / pic);
-    }
-    return 0;
-  });
-
-  displayItems = computed(() => {
-    const filtered = this._filteredItems();
-
-    const pic = this.pageItemCount();
-    if (pic != null && pic > 0) {
-      return filtered.slice(pic * this.page(), pic * (this.page() + 1));
-    }
-
-    return filtered;
-  });
-
-  constructor() {
-    setupModelHook(this.selectedItem, this.canChangeFn);
-
-    // items 변경 시 selectedItem 동기화 (selectedItem은 추적하지 않음)
-    effect(() => {
-      const items = this.items();
-      const current = untracked(() => this.selectedItem());
-      if (current != null) {
-        const updated = items.find(
-          (item) => item.__valueKey === current.__valueKey,
-        );
-        if (updated !== current) {
-          this.selectedItem.set(updated);
-        }
-      }
-    });
-  }
-
-  select(item: TItem | undefined): void {
-    this.selectedItem.set(item);
-  }
-
-  toggle(item: TItem | undefined): void {
-    this.selectedItem.update((v) => (v === item ? undefined : item));
-  }
-
-  async onModalButtonClick(): Promise<void> {
-    const modalInfo = this.modal();
-    if (modalInfo == null) return;
-
-    const result = await this._sdModal.showAsync({
-      ...modalInfo,
-      inputs: {
-        selectMode: "single",
-        selectedItemKeys: [this.selectedItem()]
-          .filter((v): v is NonNullable<typeof v> => v != null)
-          .map((item) => item.__valueKey),
-        ...modalInfo.inputs,
-      } as any,
-    });
-
-    if (result != null) {
-      const newSelectedItem = this.items().find(
-        (item) => item.__valueKey === result.selectedItemKeys[0],
-      );
-      this.selectedItem.set(newSelectedItem);
-    }
-  }
-
-  protected readonly tablerExternalLink = tablerExternalLink;
-}

package/src/features/shared-data/sd-shared-data-select.ts

@@ -1,384 +0,0 @@
-import { NgTemplateOutlet } from "@angular/common";
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  effect,
-  inject,
-  input,
-  model,
-  signal,
-  TemplateRef,
-  untracked,
-  viewChild,
-  ViewEncapsulation,
-} from "@angular/core";
-import type { SharedDataBase } from "../../core/providers/sd-shared-data.provider";
-import { SdSelect, type SelectModeValue } from "../../ui/form/select/sd-select";
-import { SdSelectButton } from "../../ui/form/select/sd-select-button";
-import { SdSelectItem } from "../../ui/form/select/sd-select-item";
-import { SdTextfield } from "../../ui/form/input/sd-textfield";
-import {
-  SdItemOfTemplate,
-  type SdItemOfTemplateContext,
-} from "../../core/directives/sd-item-of-template";
-import {
-  SdModalProvider,
-  type SdModalContentDef,
-  type SdModalInfo,
-} from "../../ui/overlay/modal/sd-modal.provider";
-import type {
-  SdSelectModal,
-  SdSelectModalInfo,
-} from "../../ui/form/button/sd-modal-select-button";
-import { NgIcon } from "@ng-icons/core";
-import { tablerEdit, tablerSearch } from "@ng-icons/tabler-icons";
-import { matchesSearchText } from "./matchesSearchText";
-
-@Component({
-  selector: "sd-shared-data-select",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [
-    SdSelect,
-    SdTextfield,
-    SdSelectItem,
-    SdItemOfTemplate,
-    NgTemplateOutlet,
-    SdSelectButton,
-    NgIcon,
-  ],
-  template: `
-    <sd-select
-      [value]="$any(value())"
-      (valueChange)="value.set($any($event))"
-      [disabled]="disabled()"
-      [required]="required()"
-      [inset]="inset()"
-      [inline]="inline()"
-      [size]="size()"
-      [items]="rootDisplayItems()"
-      [selectMode]="selectMode()"
-      [contentClass]="selectClass()"
-      [multiSelectionDisplayDirection]="multiSelectionDisplayDirection()"
-      [getChildrenFn]="hasParentKey() ? getChildren : undefined"
-    >
-      @if (modal()) {
-        <sd-select-button (click)="onModalButtonClick($event)">
-          <ng-icon [svg]="tablerSearch" />
-        </sd-select-button>
-      }
-      @if (editModal()) {
-        <sd-select-button (click)="onEditModalButtonClick($event)">
-          <ng-icon [svg]="tablerEdit" />
-        </sd-select-button>
-      }
-
-      <ng-template #headerTpl>
-        <div class="p-xs">
-          <sd-textfield
-            [type]="'text'"
-            [(value)]="searchText"
-            [placeholder]="'검색어'"
-            [size]="size()"
-          />
-        </div>
-      </ng-template>
-
-      <ng-template #beforeTpl>
-        @if (
-          (!required() && selectMode() === "single") ||
-          (useUndefined() && selectMode() === "multi")
-        ) {
-          <div
-            class="_sd-shared-data-select-undefined"
-            tabindex="0"
-            (click)="onUndefinedClick()"
-            (keydown.enter)="onUndefinedClick()"
-            (keydown.space)="onUndefinedClick(); $event.preventDefault()"
-          >
-            @if (undefinedTplRef()) {
-              <ng-template [ngTemplateOutlet]="undefinedTplRef()!" />
-            } @else {
-              <span class="tx-theme-gray-default">미지정</span>
-            }
-          </div>
-        }
-      </ng-template>
-
-      <ng-template
-        [itemOf]="rootDisplayItems()"
-        let-item="item"
-        let-index="index"
-        let-depth="depth"
-      >
-        @if (
-          getItemSelectable(item, index, depth) &&
-          (isDropdownOpen() || selectedKeys().includes(item.__valueKey))
-        ) {
-          <sd-select-item [value]="item.__valueKey" [hidden]="!getItemVisible(item, index)">
-            <span
-              [style.text-decoration]="
-                getIsHiddenFn()(item, index) ? 'line-through' : undefined
-              "
-            >
-              <ng-template
-                [ngTemplateOutlet]="itemTplRef() ?? null"
-                [ngTemplateOutletContext]="{
-                  $implicit: item,
-                  item: item,
-                  index: index,
-                  depth: depth,
-                }"
-              ></ng-template>
-            </span>
-          </sd-select-item>
-        }
-      </ng-template>
-    </sd-select>
-  `,
-})
-export class SdSharedDataSelect<
-  TItem extends SharedDataBase<string | number>,
-  TMode extends keyof SelectModeValue<TItem>,
-  TModal extends SdSelectModal<any>,
-> {
-  private readonly _sdModal = inject(SdModalProvider);
-  private readonly _selectCtrl = viewChild(SdSelect);
-
-  value = model<SelectModeValue<TItem["__valueKey"] | undefined>[TMode]>();
-
-  items = input.required<TItem[]>();
-
-  disabled = input(false, { transform: booleanAttribute });
-  required = input(false, { transform: booleanAttribute });
-  useUndefined = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  inline = input(false, { transform: booleanAttribute });
-
-  size = input<"sm" | "lg">();
-  selectMode = input("single" as TMode);
-  filterFn = input<(item: TItem, index: number, ...params: any[]) => boolean>();
-  filterFnParams = input<any[]>();
-
-  modal = input<SdSelectModalInfo<TModal>>();
-  editModal = input<SdModalInfo<SdModalContentDef<boolean>>>();
-
-  selectClass = input<string>();
-  multiSelectionDisplayDirection = input<"vertical">();
-  getIsHiddenFn = input<(item: TItem, index: number) => boolean>(
-    (item) => item.__isHidden,
-  );
-  getSearchTextFn = input<(item: TItem, index: number) => string>(
-    (item) => item.__searchText,
-  );
-  displayOrderKeyProp = input<string>();
-
-  itemTplRef = contentChild<any, TemplateRef<SdItemOfTemplateContext<TItem>>>(
-    SdItemOfTemplate,
-    { read: TemplateRef },
-  );
-  undefinedTplRef = contentChild<any, TemplateRef<void>>("undefinedTpl", {
-    read: TemplateRef,
-  });
-
-  searchText = signal<string | undefined>(undefined);
-
-  isDropdownOpen = computed(() => this._selectCtrl()?.dropdownOpen() ?? false);
-
-  hasParentKey = computed(() =>
-    this.items().some((item) => item.__parentKey != null),
-  );
-
-  itemByParentKeyMap = computed(() => {
-    if (!this.hasParentKey()) return undefined;
-
-    const map = new Map<TItem["__valueKey"] | undefined, TItem[]>();
-    for (const item of this.items()) {
-      const parentKey = item.__parentKey as TItem["__valueKey"] | undefined;
-      const existing = map.get(parentKey);
-      if (existing != null) {
-        existing.push(item);
-      } else {
-        map.set(parentKey, [item]);
-      }
-    }
-    return map;
-  });
-
-  rootDisplayItems = computed(() => {
-    let result = this.items().filter((item, index) => {
-      if (this.filterFn() != null) {
-        if (!this.filterFn()!(item, index, ...(this.filterFnParams() ?? []))) {
-          return false;
-        }
-      }
-      if (this.hasParentKey()) {
-        return item.__parentKey == null;
-      }
-      return true;
-    });
-
-    const orderProp = this.displayOrderKeyProp();
-    if (orderProp != null) {
-      result = [...result].sort((a, b) => {
-        const aVal = (a as any)[orderProp];
-        const bVal = (b as any)[orderProp];
-        if (aVal < bVal) return -1;
-        if (aVal > bVal) return 1;
-        return 0;
-      });
-    }
-
-    return result;
-  });
-
-  private readonly _searchTextMatchCache = computed(() => {
-    const cache = new Map<TItem["__valueKey"], boolean>();
-    const searchText = this.searchText();
-    const getSearchTextFn = this.getSearchTextFn();
-    const hasParent = this.hasParentKey();
-    const parentMap = this.itemByParentKeyMap();
-    const items = this.items();
-
-    const check = (item: TItem, index: number): boolean => {
-      const key = item.__valueKey;
-      const cached = cache.get(key);
-      if (cached !== undefined) return cached;
-
-      const itemText = getSearchTextFn(item, index);
-      if (matchesSearchText(itemText, searchText)) {
-        cache.set(key, true);
-        return true;
-      }
-
-      if (hasParent && parentMap != null) {
-        const children = parentMap.get(key as TItem["__valueKey"]) ?? [];
-        for (let i = 0; i < children.length; i++) {
-          if (check(children[i], i)) {
-            cache.set(key, true);
-            return true;
-          }
-        }
-      }
-
-      cache.set(key, false);
-      return false;
-    };
-
-    for (let i = 0; i < items.length; i++) {
-      check(items[i], i);
-    }
-
-    return cache;
-  });
-
-  selectedKeys = computed((): any[] => {
-    const val = this.value();
-    if (val == null) return [];
-    if (Array.isArray(val)) return val;
-    return [val];
-  });
-
-  constructor() {
-    // 드롭다운 닫힘 시 검색어 초기화 (open → closed 전환 시에만)
-    let prevOpen = false;
-    effect(() => {
-      const ctrl = this._selectCtrl();
-      const currentOpen = ctrl != null ? ctrl.dropdownOpen() : false;
-
-      if (prevOpen && !currentOpen) {
-        untracked(() => this.searchText.set(undefined));
-      }
-      prevOpen = currentOpen;
-    });
-  }
-
-  getItemSelectable(item: TItem, _index: number, depth: number): boolean {
-    if (!this.hasParentKey()) return true;
-    // 트리 구조에서 depth가 0이면서 __parentKey가 있는 항목은 선택 불가
-    return depth !== 0 || item.__parentKey == null;
-  }
-
-  getItemVisible(item: TItem, index: number): boolean {
-    if (
-      this.isIncludeSearchText(item, index) &&
-      !this.getIsHiddenFn()(item, index)
-    ) {
-      return true;
-    }
-    // 현재 선택된 항목은 항상 표시
-    const val = this.value();
-    if (val === item.__valueKey) return true;
-    if (Array.isArray(val) && val.includes(item.__valueKey)) return true;
-    return false;
-  }
-
-  isIncludeSearchText(item: TItem, _index: number): boolean {
-    return this._searchTextMatchCache().get(item.__valueKey) ?? false;
-  }
-
-  getChildren = (item: SharedDataBase<string | number>): TItem[] => {
-    let result =
-      this.itemByParentKeyMap()?.get(item.__valueKey as TItem["__valueKey"]) ??
-      [];
-
-    const orderProp = this.displayOrderKeyProp();
-    if (orderProp != null) {
-      result = [...result].sort((a, b) => {
-        const aVal = (a as any)[orderProp];
-        const bVal = (b as any)[orderProp];
-        if (aVal < bVal) return -1;
-        if (aVal > bVal) return 1;
-        return 0;
-      });
-    }
-
-    return result;
-  };
-
-  onUndefinedClick(): void {
-    this.value.set(undefined as any);
-  }
-
-  async onModalButtonClick(event: MouseEvent): Promise<void> {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const modalInfo = this.modal();
-    if (modalInfo == null) return;
-
-    const result = await this._sdModal.showAsync({
-      ...modalInfo,
-      inputs: {
-        selectMode: this.selectMode(),
-        selectedItemKeys: this.selectedKeys(),
-        ...modalInfo.inputs,
-      } as any,
-    });
-
-    if (result != null) {
-      const newValue =
-        this.selectMode() === "multi"
-          ? result.selectedItemKeys
-          : result.selectedItemKeys[0];
-      this.value.set(newValue);
-    }
-  }
-
-  async onEditModalButtonClick(event: MouseEvent): Promise<void> {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const modalInfo = this.editModal();
-    if (modalInfo == null) return;
-
-    await this._sdModal.showAsync(modalInfo);
-  }
-
-  protected readonly tablerSearch = tablerSearch;
-  protected readonly tablerEdit = tablerEdit;
-}