@simplysm/angular 14.0.30 → 14.0.33

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

@@ -1,305 +0,0 @@
-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 SdCheckbox {
-  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.ts

@@ -1,145 +0,0 @@
-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 SdSwitch {
-  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.ts

@@ -1,173 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  model,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdModalProvider } from "../../overlay/modal/sd-modal.provider";
-import { SdToastProvider } from "../../../core/providers/sd-toast.provider";
-import { SdPromptModal } from "../../overlay/modal/sd-prompt-modal";
-import { SdConfirmModal } from "../../overlay/modal/sd-confirm-modal";
-import { injectSdSystemConfigResource } from "../../../core/utils/injectSdSystemConfigResource";
-import { SdAnchor } from "../button/sd-anchor";
-import { NgIcon } from "@ng-icons/core";
-import { tablerStar, tablerDeviceFloppy, tablerX } from "@ng-icons/tabler-icons";
-import { obj } from "@simplysm/core-common";
-
-export interface SdStatePresetDef {
-  name: string;
-  state: any;
-}
-
-@Component({
-  selector: "sd-state-preset",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdAnchor, 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 SdStatePreset {
-  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 = injectSdSystemConfigResource<SdStatePresetDef[]>({
-    key: this.key,
-  });
-
-  _presets = computed(() => this._configResource.value() ?? []);
-
-  async onAddClick(): Promise<void> {
-    const name = await this._sdModal.showAsync(
-      {
-        title: "프리셋 추가",
-        type: SdPromptModal,
-        inputs: { message: "프리셋 이름을 입력하세요." },
-      },
-      { useCloseByBackdrop: false },
-    );
-
-    if (name == null) return;
-
-    const currentPresets = this._presets();
-    const newPreset: SdStatePresetDef = {
-      name,
-      state: obj.clone(this.state()),
-    };
-
-    this._configResource.set([...currentPresets, newPreset]);
-    this._sdToast.info(`현재 상태가 '${name}'에 저장되었습니다.`);
-  }
-
-  onPresetClick(preset: SdStatePresetDef): void {
-    const currentState = this.state();
-    if (obj.equal(currentState, preset.state)) return;
-    this.state.set(obj.clone(preset.state));
-  }
-
-  onSaveClick(preset: SdStatePresetDef): 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: SdStatePresetDef): Promise<void> {
-    const confirmed = await this._sdModal.showAsync(
-      {
-        title: "프리셋 삭제",
-        type: SdConfirmModal,
-        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);
-  }
-}