@simplysm/angular 14.0.1 → 14.0.4

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

@@ -0,0 +1,305 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupRipple } from "../../../core/utils/setups/setupRipple";
+import { setupModelHook } from "../../../core/utils/setups/setupModelHook";
+import { NgIcon } from "@ng-icons/core";
+import { tablerCheck } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-checkbox",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgIcon],
+  template: `
+    <div class="_indicator_rect">
+      <div class="_indicator">
+        @if (!radio()) {
+          <ng-icon [svg]="icon()" />
+        } @else {
+          <div></div>
+        }
+      </div>
+    </div>
+    <div class="_contents" [style]="contentStyle()">
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../../scss/commons/variables";
+      @use "../../../../scss/commons/mixins";
+
+      sd-checkbox {
+        @include mixins.form-control-base();
+        color: inherit;
+        cursor: pointer;
+
+        height: calc(
+          var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px
+        );
+        gap: var(--gap-sm);
+
+        @supports not (appearance: auto) {
+          gap: 0;
+          > * + * {
+            margin-left: var(--gap-sm);
+          }
+        }
+
+        > ._indicator_rect {
+          display: inline-block;
+          vertical-align: -0.125em;
+          user-select: none;
+
+          width: calc(var(--font-size-default) + 2px);
+          height: calc(var(--font-size-default) + 2px);
+          border: 1px solid var(--trans-light);
+          background: var(--theme-secondary-lightest);
+
+          > ._indicator {
+            margin: -1px -2px;
+            text-align: center;
+            opacity: 0;
+            color: var(--text-trans-rev-default);
+
+            > ng-icon {
+              > svg {
+                vertical-align: top;
+                stroke-width: 2.5px !important;
+              }
+            }
+          }
+        }
+
+        ._contents {
+          display: inline-block;
+          vertical-align: top;
+          padding-left: var(--gap-sm);
+        }
+
+        > ._indicator_rect + ._contents:empty {
+          display: none;
+        }
+
+        &:focus > ._indicator_rect {
+          border-color: var(--theme-primary-dark);
+        }
+
+        &[data-sd-checked="true"] {
+          > ._indicator_rect {
+            background: var(--theme-primary-default);
+
+            > ._indicator {
+              opacity: 1;
+            }
+          }
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            > ._indicator_rect {
+              background: var(--theme-#{$key}-lightest);
+
+              > ._indicator {
+                color: var(--theme-#{$key}-default);
+              }
+            }
+
+            &:focus {
+              > ._indicator_rect {
+                border-color: var(--theme-#{$key}-default);
+              }
+            }
+
+            &[data-sd-checked="true"] {
+              > ._indicator_rect {
+                background: var(--theme-#{$key}-default);
+
+                > ._indicator {
+                  color: var(--text-trans-rev-default);
+                }
+              }
+            }
+          }
+        }
+
+        &[data-sd-theme="white"] {
+          > ._indicator_rect {
+            background: var(--control-color);
+            border-color: var(--text-trans-lightest);
+          }
+
+          &:focus {
+            > ._indicator_rect {
+              border-color: var(--text-trans-default);
+            }
+          }
+
+          &[data-sd-checked="true"] {
+            > ._indicator_rect {
+              background: var(--theme-primary-default);
+            }
+          }
+        }
+
+        &[data-sd-radio="true"] {
+          > ._indicator_rect {
+            border-radius: 100%;
+            padding: var(--gap-xs);
+
+            > ._indicator {
+              border-radius: 100%;
+              width: 100%;
+              height: 100%;
+              background: var(--theme-primary-default);
+            }
+          }
+
+          &[data-sd-checked="true"] {
+            > ._indicator_rect {
+              background: var(--theme-secondary-lightest);
+              border-color: var(--theme-primary-dark);
+            }
+          }
+        }
+
+        &[data-sd-size="sm"] {
+          height: calc(
+            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px
+          );
+          padding: var(--gap-xs) var(--gap-sm);
+          gap: var(--gap-xs);
+
+          @supports not (appearance: auto) {
+            gap: 0;
+            > * + * {
+              margin-left: var(--gap-xs);
+            }
+          }
+        }
+
+        &[data-sd-size="lg"] {
+          height: calc(
+            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px
+          );
+          padding: var(--gap-default) var(--gap-lg);
+          gap: var(--gap-default);
+
+          @supports not (appearance: auto) {
+            gap: 0;
+            > * + * {
+              margin-left: var(--gap-default);
+            }
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          height: calc(
+            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2
+          );
+          border: none;
+          justify-content: center;
+          text-align: center;
+
+          &[data-sd-size="sm"] {
+            height: calc(
+              var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2
+            );
+          }
+
+          &[data-sd-size="lg"] {
+            height: calc(
+              var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2
+            );
+          }
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          vertical-align: top;
+          padding: 0;
+          border: none;
+          height: calc(var(--font-size-default) * var(--line-height-strip-unit));
+          width: auto;
+        }
+
+        &[data-sd-disabled="true"] {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-checked]": "value()",
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-inline]": "inline()",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-radio]": "radio()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.tabindex]": "0",
+    "(click)": "onClick()",
+    "(keydown)": "onKeydown($event)",
+  },
+})
+export class SdCheckboxControl {
+  value = model(false);
+  canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
+
+  icon = input(tablerCheck);
+  radio = input(false, { transform: booleanAttribute });
+  disabled = input(false, { transform: booleanAttribute });
+
+  size = input<"sm" | "lg">();
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  theme = input<
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger"
+    | "gray"
+    | "blue-gray"
+    | "white"
+  >();
+
+  contentStyle = input<string>();
+
+  constructor() {
+    setupModelHook(this.value, this.canChangeFn);
+    setupRipple(() => !this.disabled());
+  }
+
+  onClick() {
+    if (this.disabled()) return;
+    if (this.radio()) {
+      this.value.set(true);
+    } else {
+      this.value.update((v) => !v);
+    }
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === " ") {
+      event.preventDefault();
+      if (this.disabled()) return;
+      if (this.radio()) {
+        this.value.set(true);
+      } else {
+        this.value.update((v) => !v);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-switch",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-on]": "value()",
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-inline]": "inline()",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.tabindex]": "'0'",
+    "(click)": "onClick($event)",
+    "(keydown)": "onKeydown($event)",
+  },
+  template: `
+    <div>
+      <div></div>
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../../scss/commons/variables";
+
+      sd-switch {
+        display: block;
+        padding: var(--gap-sm) 0;
+        border: 1px solid transparent;
+        vertical-align: top;
+        cursor: pointer;
+
+        > div {
+          height: var(--line-height);
+          width: calc(var(--line-height) * 2 - var(--gap-xs));
+          padding: calc(var(--gap-xs) / 2);
+          border-radius: calc(var(--line-height) / 2);
+          text-align: left;
+
+          background: var(--theme-gray-lighter);
+
+          > div {
+            display: inline-block;
+            width: calc(var(--line-height) - var(--gap-xs));
+            height: calc(var(--line-height) - var(--gap-xs));
+            border-radius: 100%;
+
+            background: var(--control-color);
+
+            transition: transform var(--animation-duration);
+          }
+        }
+
+        &[data-sd-on="true"] {
+          > div {
+            background: var(--theme-success-default);
+
+            > div {
+              transform: translateX(100%);
+            }
+          }
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          padding: 0;
+          border: none;
+        }
+
+        &[data-sd-inset="true"] {
+          border: none;
+        }
+
+        &[data-sd-size="sm"] {
+          padding: var(--gap-sm) 0;
+        }
+
+        &[data-sd-size="lg"] {
+          padding: var(--gap-default) 0;
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            &[data-sd-on="true"] {
+              > div {
+                background: var(--theme-#{$key}-default);
+              }
+            }
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          > div {
+            opacity: 0.5;
+
+            > div {
+              background: var(--theme-gray-default);
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdSwitchControl {
+  value = model(false);
+
+  disabled = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+
+  size = input<"sm" | "lg">();
+  theme = input<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >();
+
+  onClick(event: Event) {
+    if (this.disabled()) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.value.update((v) => !v);
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    if (event.key === " ") {
+      event.preventDefault();
+      if (this.disabled()) return;
+      this.value.update((v) => !v);
+    }
+  }
+}

package/src/ui/form/choice/sd-state-preset.control.ts

@@ -0,0 +1,173 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdModalProvider } from "../../overlay/modal/sd-modal.provider";
+import { SdToastProvider } from "../../overlay/toast/sd-toast.provider";
+import { SdPromptModalControl } from "../../overlay/modal/sd-prompt-modal.control";
+import { SdConfirmModalControl } from "../../overlay/modal/sd-confirm-modal.control";
+import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
+import { SdAnchorControl } from "../button/sd-anchor.control";
+import { NgIcon } from "@ng-icons/core";
+import { tablerStar, tablerDeviceFloppy, tablerX } from "@ng-icons/tabler-icons";
+import { obj } from "@simplysm/core-common";
+
+export interface ISdStatePreset {
+  name: string;
+  state: any;
+}
+
+@Component({
+  selector: "sd-state-preset",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdAnchorControl, NgIcon],
+  template: `
+    <div class="_sd-state-preset">
+      <sd-anchor (click)="onAddClick()" class="_add-btn">
+        <ng-icon [svg]="tablerStar" />
+      </sd-anchor>
+      @for (preset of _presets(); track preset.name) {
+        <div class="_preset-item">
+          <sd-anchor class="_preset-name" (click)="onPresetClick(preset)">
+            {{ preset.name }}
+          </sd-anchor>
+          <sd-anchor class="_preset-save" (click)="onSaveClick(preset)">
+            <ng-icon [svg]="tablerDeviceFloppy" />
+          </sd-anchor>
+          <sd-anchor class="_preset-delete" [theme]="'danger'" (click)="onDeleteClick(preset)">
+            <ng-icon [svg]="tablerX" />
+          </sd-anchor>
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-state-preset {
+        display: block;
+
+        > ._sd-state-preset {
+          display: flex;
+          align-items: center;
+          gap: var(--gap-sm);
+          flex-wrap: wrap;
+
+          > ._add-btn {
+            padding: var(--gap-xs);
+          }
+
+          > ._preset-item {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--gap-xs);
+            border: 1px solid var(--trans-lighter);
+            border-radius: var(--border-radius-default);
+            padding: var(--gap-xs) var(--gap-sm);
+          }
+        }
+
+        &[data-sd-size="sm"] > ._sd-state-preset {
+          > ._add-btn {
+            padding: var(--gap-xxs);
+          }
+
+          > ._preset-item {
+            padding: var(--gap-xxs) var(--gap-xs);
+          }
+        }
+
+        &[data-sd-size="lg"] > ._sd-state-preset {
+          > ._add-btn {
+            padding: var(--gap-sm);
+          }
+
+          > ._preset-item {
+            padding: var(--gap-sm) var(--gap-default);
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-size]": "size()",
+  },
+})
+export class SdStatePresetControl {
+  private readonly _sdModal = inject(SdModalProvider);
+  private readonly _sdToast = inject(SdToastProvider);
+
+  key = input.required<string>();
+  state = model<any>();
+  size = input<"sm" | "lg">();
+
+  protected readonly tablerStar = tablerStar;
+  protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
+  protected readonly tablerX = tablerX;
+
+  private readonly _configResource = useSdSystemConfigResource<ISdStatePreset[]>({
+    key: this.key,
+  });
+
+  _presets = computed(() => this._configResource.value() ?? []);
+
+  async onAddClick(): Promise<void> {
+    const name = await this._sdModal.showAsync(
+      {
+        title: "프리셋 추가",
+        type: SdPromptModalControl,
+        inputs: { message: "프리셋 이름을 입력하세요." },
+      },
+      { useCloseByBackdrop: false },
+    );
+
+    if (name == null) return;
+
+    const currentPresets = this._presets();
+    const newPreset: ISdStatePreset = {
+      name,
+      state: obj.clone(this.state()),
+    };
+
+    this._configResource.set([...currentPresets, newPreset]);
+    this._sdToast.info(`현재 상태가 '${name}'에 저장되었습니다.`);
+  }
+
+  onPresetClick(preset: ISdStatePreset): void {
+    const currentState = this.state();
+    if (obj.equal(currentState, preset.state)) return;
+    this.state.set(obj.clone(preset.state));
+  }
+
+  onSaveClick(preset: ISdStatePreset): void {
+    const currentPresets = this._presets();
+    const updated = currentPresets.map((p) =>
+      p.name === preset.name ? { ...p, state: obj.clone(this.state()) } : p,
+    );
+    this._configResource.set(updated);
+    this._sdToast.info(`현재 상태가 ${preset.name}에 저장되었습니다.`);
+  }
+
+  async onDeleteClick(preset: ISdStatePreset): Promise<void> {
+    const confirmed = await this._sdModal.showAsync(
+      {
+        title: "프리셋 삭제",
+        type: SdConfirmModalControl,
+        inputs: { message: `저장된 '${preset.name}' 상태가 삭제됩니다.` },
+      },
+      { useCloseByBackdrop: false },
+    );
+
+    if (confirmed !== true) return;
+
+    const currentPresets = this._presets();
+    const filtered = currentPresets.filter((p) => p.name !== preset.name);
+    this._configResource.set(filtered);
+  }
+}