@simplysm/angular 14.0.1 → 14.0.4

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

@@ -0,0 +1,67 @@
+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 SdAnchorControl {
+  disabled = input(false, { transform: booleanAttribute });
+  theme = input<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >("primary");
+}

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

@@ -0,0 +1,209 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdRippleDirective } from "../../../core/directives/sd-ripple.directive";
+
+@Component({
+  selector: "sd-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdRippleDirective],
+  template: `
+    <button
+      tabindex="0"
+      [type]="type()"
+      [disabled]="disabled()"
+      [class]="buttonClass()"
+      [style]="buttonStyle()"
+      [sd-ripple]="!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 SdButtonControl {
+  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.control.ts

@@ -0,0 +1,237 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  type InputSignal,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  SdModalProvider,
+  type ISdModal,
+  type ISdModalInfo,
+  type ISdModalOptions,
+} from "../../overlay/modal/sd-modal.provider";
+import type { TDirectiveInputSignals } from "../../../core/utils/TDirectiveInputSignals";
+import type { TSelectModeValue } from "../select/sd-select.control";
+import { SdAnchorControl } from "./sd-anchor.control";
+import { SdButtonControl } from "./sd-button.control";
+import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
+import { NgIcon } from "@ng-icons/core";
+import { tablerSearch, tablerEraser } from "@ng-icons/tabler-icons";
+
+/**
+ * 모달 선택 컴포넌트가 구현해야 하는 인터페이스
+ * ISdModal을 확장하여 selectMode와 selectedItemKeys를 추가한다.
+ */
+export interface ISdSelectModal<T> extends ISdModal<ISelectModalOutputResult<T>> {
+  selectMode: InputSignal<"single" | "multi">;
+  selectedItemKeys: InputSignal<T[]>;
+}
+
+/**
+ * 모달 선택 결과
+ */
+export interface ISelectModalOutputResult<T> {
+  selectedItemKeys: T[];
+  selectedItems: Record<string, unknown>[];
+}
+
+/**
+ * 모달 선택 정보 (selectMode/selectedItemKeys를 제외한 inputs)
+ */
+export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = Omit<
+  ISdModalInfo<T>,
+  "inputs"
+> & {
+  inputs: Omit<
+    TDirectiveInputSignals<T>,
+    "initialized" | "close" | "actionTplRef" | "selectMode" | "selectedItemKeys"
+  >;
+};
+
+@Component({
+  selector: "sd-modal-select-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdAnchorControl, SdButtonControl, 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]="tablerSearch" />
+        </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 SdModalSelectButtonControl {
+  private readonly _sdModal = inject(SdModalProvider);
+
+  selectMode = input<"single" | "multi">("single");
+  value = model<TSelectModeValue<any>>();
+  selectedItems = model<Record<string, unknown>[]>([]);
+  disabled = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  modal = input<TSdSelectModalInfo<any>>();
+  modalOptions = input<ISdModalOptions>();
+  size = input<"sm" | "lg">();
+  inset = input(false, { transform: booleanAttribute });
+
+  protected readonly tablerSearch = 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 {
+    if (this.selectMode() === "multi") {
+      this.value.set([]);
+    } else {
+      this.value.set(undefined);
+    }
+    this.selectedItems.set([]);
+  }
+
+  async onSearchClick(): Promise<void> {
+    const modalInfo = this.modal();
+    if (modalInfo == null) return;
+
+    const currentValue = this.value();
+    const selectedItemKeys: any[] =
+      this.selectMode() === "multi"
+        ? (currentValue as any[] | undefined) ?? []
+        : currentValue != null
+          ? [currentValue]
+          : [];
+
+    const result = await this._sdModal.showAsync(
+      {
+        title: modalInfo.title,
+        type: modalInfo.type,
+        inputs: {
+          ...modalInfo.inputs,
+          selectMode: this.selectMode(),
+          selectedItemKeys,
+        } as any,
+      },
+      this.modalOptions(),
+    );
+
+    if (result == null) return;
+
+    const typedResult = result as ISelectModalOutputResult<any>;
+
+    if (this.selectMode() === "multi") {
+      this.value.set(typedResult.selectedItemKeys);
+    } else {
+      this.value.set(typedResult.selectedItemKeys[0]);
+    }
+    this.selectedItems.set(typedResult.selectedItems);
+  }
+}

package/src/ui/form/checkbox/sd-checkbox-group-item.control.ts

@@ -0,0 +1,51 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdCheckboxGroupControl } from "./sd-checkbox-group.control";
+import { SdCheckboxControl } from "./sd-checkbox.control";
+
+@Component({
+  selector: "sd-checkbox-group-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCheckboxControl],
+  template: `
+    <sd-checkbox
+      [value]="isSelected()"
+      (valueChange)="onSelectedChange($event)"
+      [inline]="inline()"
+      [disabled]="disabled()"
+    >
+      <ng-content></ng-content>
+    </sd-checkbox>
+  `,
+})
+export class SdCheckboxGroupItemControl<T> {
+  private readonly _parentControl = inject<SdCheckboxGroupControl<T>>(
+    forwardRef(() => SdCheckboxGroupControl),
+  );
+
+  value = input.required<T>();
+  inline = input(false, { transform: booleanAttribute });
+
+  isSelected = computed(() => this._parentControl.value().includes(this.value()));
+  disabled = computed(() => this._parentControl.disabled());
+
+  onSelectedChange(selected: boolean) {
+    this._parentControl.value.update((v) => {
+      if (selected) {
+        return [...v, this.value()];
+      } else {
+        return v.filter((item) => item !== this.value());
+      }
+    });
+  }
+}

package/src/ui/form/checkbox/sd-checkbox-group.control.ts

@@ -0,0 +1,24 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-checkbox-group",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <ng-content></ng-content>
+  `,
+})
+export class SdCheckboxGroupControl<T> {
+  value = model<T[]>([]);
+
+  disabled = input(false, { transform: booleanAttribute });
+}