@simplysm/angular 14.0.1 → 14.0.5

package/src/ui/form/select/sd-select.control.ts

@@ -0,0 +1,412 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  contentChildren,
+  effect,
+  ElementRef,
+  input,
+  model,
+  signal,
+  TemplateRef,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdDropdownControl } from "../../overlay/dropdown/sd-dropdown.control";
+import { SdDropdownPopupControl } from "../../overlay/dropdown/sd-dropdown-popup.control";
+import { SdSelectItemControl } from "./sd-select-item.control";
+import { SdAnchorControl } from "../button/sd-anchor.control";
+import { SdGapControl } from "../../layout/sd-gap.control";
+import { SdItemOfTemplateDirective } from "../../../core/directives/sd-item-of-template.directive";
+import { SdRippleDirective } from "../../../core/directives/sd-ripple.directive";
+import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
+import { NgIcon } from "@ng-icons/core";
+import { tablerCaretDown } from "@ng-icons/tabler-icons";
+import { tabbable } from "tabbable";
+
+export type TSelectModeValue<T> = T | T[] | undefined;
+
+@Component({
+  selector: "sd-select",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdDropdownControl,
+    SdDropdownPopupControl,
+    SdAnchorControl,
+    SdGapControl,
+    NgTemplateOutlet,
+    SdRippleDirective,
+    NgIcon,
+  ],
+  template: `
+    <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
+      <div class="_sd-select-control" [sd-ripple]="!disabled()">
+        <div class="_sd-select-control-content" #contentEl>
+          @if (_selectedItemContentHTML() !== undefined) {
+            <div [innerHTML]="_selectedItemContentHTML()"></div>
+          } @else if (placeholder()) {
+            <span class="tx-trans-lighter">{{ placeholder() }}</span>
+          } @else {
+            <span>&nbsp;</span>
+          }
+        </div>
+        @if (!disabled()) {
+          <div class="_sd-select-control-icon">
+            <ng-icon [svg]="tablerCaretDown" />
+          </div>
+        }
+      </div>
+      @if (!disabled()) {
+        <ng-content select="sd-select-button" />
+      }
+      <sd-dropdown-popup>
+        @if (_headerTpl()) {
+          <ng-template [ngTemplateOutlet]="_headerTpl()!" />
+        }
+        @if (selectMode() === "multi" && !hideSelectAll()) {
+          <div class="_sd-select-all-bar">
+            <sd-anchor data-sd-select-all (click)="onSelectAll()">전체선택</sd-anchor>
+            <sd-gap [width]="'sm'" />
+            <sd-anchor data-sd-deselect-all (click)="onDeselectAll()">전체해제</sd-anchor>
+          </div>
+        }
+        @if (_beforeTpl()) {
+          <ng-template [ngTemplateOutlet]="_beforeTpl()!" />
+        }
+        @if (_itemOfTpl(); as tpl) {
+          @for (item of _flatItems(); track item) {
+            <ng-template
+              [ngTemplateOutlet]="tpl"
+              [ngTemplateOutletContext]="{ $implicit: item.data, item: item.data, index: item.index, depth: item.depth }"
+            />
+          }
+        } @else {
+          <ng-content />
+        }
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/mixins";
+
+      sd-select {
+        display: block;
+        position: relative;
+
+        > sd-dropdown {
+          > ._sd-select-control {
+            @include mixins.form-control-base();
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+
+            border: 1px solid var(--trans-lighter);
+            border-radius: var(--border-radius-default);
+            background: var(--theme-secondary-lightest);
+
+            > ._sd-select-control-content {
+              flex: 1;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+
+            > ._sd-select-control-icon {
+              margin-left: var(--gap-sm);
+              opacity: 0.3;
+            }
+          }
+
+          &:focus-within > ._sd-select-control {
+            border-color: var(--theme-secondary-default);
+          }
+        }
+
+        &[data-sd-size="sm"] > sd-dropdown > ._sd-select-control {
+          padding: var(--gap-xs) var(--gap-sm);
+        }
+
+        &[data-sd-size="lg"] > sd-dropdown > ._sd-select-control {
+          padding: var(--gap-default) var(--gap-lg);
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          width: auto;
+        }
+
+        &[data-sd-inset="true"] > sd-dropdown > ._sd-select-control {
+          border: none;
+          border-radius: 0;
+
+          &:focus-within {
+            outline: 1px solid var(--theme-primary-default);
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          > sd-dropdown > ._sd-select-control {
+            background: var(--trans-lighter);
+            cursor: default;
+
+            > ._sd-select-control-icon {
+              display: none;
+            }
+          }
+        }
+      }
+
+      ._sd-select-all-bar {
+        display: flex;
+        padding: var(--gap-sm) var(--gap-default);
+        border-bottom: 1px solid var(--border-color-light);
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-inline]": "inline()",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-disabled]": "disabled()",
+  },
+})
+export class SdSelectControl<T> {
+  selectMode = input<"single" | "multi">("single");
+  value = model<TSelectModeValue<T>>();
+  placeholder = input<string>();
+  disabled = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  required = input(false, { transform: booleanAttribute });
+
+  hideSelectAll = input(false, { transform: booleanAttribute });
+  multiSelectionDisplayDirection = input<"vertical">();
+
+  items = input<T[]>();
+  getChildrenFn = input<(item: T) => T[] | undefined>();
+
+  contentClass = input<string>();
+  contentStyle = input<string>();
+
+  dropdownOpen = signal(false);
+
+  protected readonly tablerCaretDown = tablerCaretDown;
+
+  _itemControls = contentChildren(SdSelectItemControl);
+  private readonly _dropdownControl = viewChild.required(SdDropdownControl);
+  private readonly _dropdownElRef = viewChild.required<SdDropdownControl, ElementRef<HTMLElement>>(
+    SdDropdownControl,
+    { read: ElementRef },
+  );
+
+  _headerTpl = contentChild<TemplateRef<void>>("headerTpl");
+  _beforeTpl = contentChild<TemplateRef<void>>("beforeTpl");
+  _itemOfTpl = contentChild(SdItemOfTemplateDirective, { read: TemplateRef });
+
+  _selectedItemContentHTML = signal<string | undefined>(undefined);
+
+  _flatItems = signal<{ data: T; index: number; depth: number }[]>([]);
+
+  constructor() {
+    // Required validation
+    setupInvalid(() => {
+      if (!this.required()) return "";
+      const v = this.value();
+      if (v == null) return "선택된 항목이 없습니다.";
+      if (Array.isArray(v) && v.length === 0) return "선택된 항목이 없습니다.";
+      return "";
+    });
+
+    // Flatten items array (with hierarchy support)
+    effect(() => {
+      const items = this.items();
+      if (items == null) {
+        this._flatItems.set([]);
+        return;
+      }
+      const getChildren = this.getChildrenFn();
+      const flat: { data: T; index: number; depth: number }[] = [];
+      let index = 0;
+      const walk = (list: T[], depth: number) => {
+        for (const item of list) {
+          flat.push({ data: item, index: index++, depth });
+          if (getChildren !== undefined) {
+            const children = getChildren(item);
+            if (children !== undefined) {
+              walk(children, depth + 1);
+            }
+          }
+        }
+      };
+      walk(items, 0);
+      this._flatItems.set(flat);
+    });
+
+    // D3: contentClass/contentStyle via effect() on popup element
+    // + D4: keyboard navigation via tabbable()
+    effect((onCleanup) => {
+      if (this.dropdownOpen()) {
+        const popupEl = this._dropdownControl().popupElRef().nativeElement;
+        const cls = this.contentClass();
+        const addedClasses: string[] = [];
+        if (cls !== undefined) {
+          for (const c of cls.split(" ").filter(Boolean)) {
+            popupEl.classList.add(c);
+            addedClasses.push(c);
+          }
+        }
+        const style = this.contentStyle();
+        const addedStyleProps: string[] = [];
+        if (style !== undefined) {
+          const tempEl = document.createElement("div");
+          tempEl.style.cssText = style;
+          for (let i = 0; i < tempEl.style.length; i++) {
+            const prop = tempEl.style[i];
+            addedStyleProps.push(prop);
+            popupEl.style.setProperty(prop, tempEl.style.getPropertyValue(prop));
+          }
+        }
+
+        const onKeydown = (event: KeyboardEvent) => {
+          if (event.ctrlKey || event.altKey) return;
+
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            const focusableEls = tabbable(popupEl);
+            if (focusableEls.length === 0) return;
+
+            const currIndex = focusableEls.indexOf(document.activeElement as HTMLElement);
+
+            if (event.key === "ArrowDown") {
+              const nextIndex = currIndex + 1;
+              if (nextIndex < focusableEls.length) {
+                focusableEls[nextIndex].focus();
+              }
+            } else {
+              // ArrowUp
+              if (currIndex <= 0) {
+                // Return focus to dropdown trigger
+                this._dropdownElRef().nativeElement.focus();
+              } else {
+                focusableEls[currIndex - 1].focus();
+              }
+            }
+          }
+        };
+
+        popupEl.addEventListener("keydown", onKeydown);
+        onCleanup(() => {
+          popupEl.removeEventListener("keydown", onKeydown);
+          for (const c of addedClasses) {
+            popupEl.classList.remove(c);
+          }
+          for (const prop of addedStyleProps) {
+            popupEl.style.removeProperty(prop);
+          }
+        });
+      }
+    });
+
+    // Mirror selected item's contentHTML to the trigger display area
+    effect(() => {
+      const items = this._itemControls();
+      const currentValue = this.value();
+
+      if (currentValue == null) {
+        this._selectedItemContentHTML.set(undefined);
+        return;
+      }
+
+      if (this.selectMode() === "multi") {
+        const arr = currentValue as T[];
+        if (arr.length === 0) {
+          this._selectedItemContentHTML.set(undefined);
+          return;
+        }
+
+        const separator = this.multiSelectionDisplayDirection() === "vertical" ? "<br>" : ", ";
+        const htmlParts: string[] = [];
+        for (const item of items) {
+          if (arr.includes(item.value())) {
+            const html = item.contentHTML();
+            if (html !== "") {
+              htmlParts.push(html);
+            }
+          }
+        }
+        if (htmlParts.length > 0) {
+          this._selectedItemContentHTML.set(htmlParts.join(separator));
+        } else {
+          this._selectedItemContentHTML.set(undefined);
+        }
+        return;
+      }
+
+      for (const item of items) {
+        if (item.value() === currentValue) {
+          const html = item.contentHTML();
+          if (html !== "") {
+            this._selectedItemContentHTML.set(html);
+          }
+          return;
+        }
+      }
+      this._selectedItemContentHTML.set(undefined);
+    });
+  }
+
+  selectItem(itemValue: T): void {
+    this._setOrToggle(itemValue);
+    if (this.selectMode() === "single") {
+      this.closeDropdown();
+    }
+  }
+
+  toggleItem(itemValue: T): void {
+    this._setOrToggle(itemValue);
+  }
+
+  private _setOrToggle(itemValue: T): void {
+    if (this.selectMode() === "single") {
+      this.value.set(itemValue);
+    } else {
+      this.value.update((v) => {
+        const arr = (v as T[] | undefined) ?? [];
+        if (arr.includes(itemValue)) {
+          return arr.filter((item) => item !== itemValue);
+        } else {
+          return [...arr, itemValue];
+        }
+      });
+    }
+  }
+
+  onSelectAll(): void {
+    const items = this._itemControls();
+    const values = items
+      .filter((item) => !item.disabled() && !item.hidden())
+      .map((item) => item.value());
+    this.value.set(values);
+  }
+
+  onDeselectAll(): void {
+    this.value.set([]);
+  }
+
+  closeDropdown(): void {
+    this.dropdownOpen.set(false);
+  }
+
+  openDropdown(): void {
+    if (this.disabled()) return;
+    this.dropdownOpen.set(true);
+  }
+}

package/src/ui/layout/dock/sd-dock-container.control.ts

@@ -0,0 +1,100 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChildren,
+  effect,
+  ElementRef,
+  input,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDockControl } from "./sd-dock.control";
+
+@Component({
+  selector: "sd-dock-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <div #content [class]="['_content', contentClass()].filter(v => v != null).join(' ')">
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-dock-container {
+        display: block;
+        height: 100%;
+
+        > ._content {
+          position: relative;
+          height: 100%;
+        }
+      }
+    `,
+  ],
+})
+export class SdDockContainerControl {
+  dockControls = contentChildren(SdDockControl);
+
+  contentElRef = viewChild.required<any, ElementRef<HTMLDivElement>>("content", {
+    read: ElementRef,
+  });
+
+  contentClass = input<string>();
+
+  constructor() {
+    effect(() => {
+      let top = 0;
+      let left = 0;
+      let bottom = 0;
+      let right = 0;
+      for (const dockControl of this.dockControls()) {
+        const position = dockControl.position();
+        const size = dockControl.size();
+
+        if (position === "top") {
+          dockControl.assignStyle({
+            top: top + "px",
+            bottom: "",
+            left: left + "px",
+            right: right + "px",
+          });
+          top += size;
+        } else if (position === "bottom") {
+          dockControl.assignStyle({
+            top: "",
+            bottom: bottom + "px",
+            left: left + "px",
+            right: right + "px",
+          });
+          bottom += size;
+        } else if (position === "left") {
+          dockControl.assignStyle({
+            top: top + "px",
+            bottom: bottom + "px",
+            left: left + "px",
+            right: "",
+          });
+          left += size;
+        } else {
+          dockControl.assignStyle({
+            top: top + "px",
+            bottom: bottom + "px",
+            left: "",
+            right: right + "px",
+          });
+          right += size;
+        }
+      }
+
+      Object.assign(this.contentElRef().nativeElement.style, {
+        paddingTop: top + "px",
+        paddingBottom: bottom + "px",
+        paddingRight: right + "px",
+        paddingLeft: left + "px",
+      });
+    });
+  }
+}

package/src/ui/layout/dock/sd-dock.control.ts

@@ -0,0 +1,171 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
+import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+
+@Component({
+  selector: "sd-dock",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-position]": "position()",
+    "[attr.data-sd-resizable]": "resizable()",
+    "(sdResize)": "onHostResize($any($event))",
+  },
+  template: `
+    <ng-content></ng-content>
+    @if (resizable()) {
+      <div class="_resize-bar" (mousedown)="onResizeBarMousedown($event)"></div>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-dock {
+        display: block;
+        position: absolute;
+        overflow: auto;
+
+        &[data-sd-resizable="true"] {
+          > ._resize-bar {
+            position: absolute;
+          }
+
+          &[data-sd-position="top"] {
+            > ._resize-bar {
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              height: 2px;
+              cursor: ns-resize;
+            }
+          }
+
+          &[data-sd-position="bottom"] {
+            > ._resize-bar {
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 2px;
+              cursor: ns-resize;
+            }
+          }
+
+          &[data-sd-position="left"] {
+            > ._resize-bar {
+              top: 0;
+              right: 0;
+              height: 100%;
+              width: 2px;
+              cursor: ew-resize;
+            }
+          }
+
+          &[data-sd-position="right"] {
+            > ._resize-bar {
+              top: 0;
+              left: 0;
+              height: 100%;
+              width: 2px;
+              cursor: ew-resize;
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdDockControl {
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
+
+  key = input<string>();
+  position = input<"top" | "bottom" | "right" | "left">("top");
+  resizable = input(false, { transform: booleanAttribute });
+
+  size = signal(0);
+
+  private readonly _config = useSdSystemConfigResource<{ size?: string }>({ key: this.key });
+
+  constructor() {
+    effect(() => {
+      const conf = this._config.value();
+      if (this.resizable() && conf && conf.size != null) {
+        if (["right", "left"].includes(this.position())) {
+          this._elRef.nativeElement.style.width = conf.size;
+        }
+        if (["top", "bottom"].includes(this.position())) {
+          this._elRef.nativeElement.style.height = conf.size;
+        }
+      }
+    });
+  }
+
+  assignStyle(style: Partial<CSSStyleDeclaration>) {
+    Object.assign(this._elRef.nativeElement.style, style);
+  }
+
+  onHostResize(event: ISdResizeEvent) {
+    if (["top", "bottom"].includes(this.position()) && event.heightChanged) {
+      this.size.set(this._elRef.nativeElement.clientHeight);
+    }
+    if (["right", "left"].includes(this.position()) && event.widthChanged) {
+      this.size.set(this._elRef.nativeElement.clientWidth);
+    }
+  }
+
+  onResizeBarMousedown(event: MouseEvent) {
+    const thisEl = this._elRef.nativeElement;
+
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const startHeight = thisEl.clientHeight;
+    const startWidth = thisEl.clientWidth;
+
+    const doDrag = (e: MouseEvent): void => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (this.position() === "bottom") {
+        thisEl.style.height = `${startHeight - e.clientY + startY}px`;
+      } else if (this.position() === "right") {
+        thisEl.style.width = `${startWidth - e.clientX + startX}px`;
+      } else if (this.position() === "top") {
+        thisEl.style.height = `${startHeight + e.clientY - startY}px`;
+      } else {
+        // left
+        thisEl.style.width = `${startWidth + e.clientX - startX}px`;
+      }
+    };
+
+    const stopDrag = (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      document.removeEventListener("mousemove", doDrag);
+      document.removeEventListener("mouseup", stopDrag);
+
+      if (this.key() != null) {
+        const newConf: { size?: string } = {};
+        if (["right", "left"].includes(this.position())) {
+          newConf.size = thisEl.style.width;
+        } else {
+          newConf.size = thisEl.style.height;
+        }
+        this._config.set(newConf);
+      }
+    };
+
+    document.addEventListener("mousemove", doDrag);
+    document.addEventListener("mouseup", stopDrag);
+  }
+}