@simplysm/angular 14.0.1 → 14.0.5

package/src/ui/form/input/sd-numpad.control.ts

@@ -0,0 +1,178 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  untracked,
+  ViewEncapsulation,
+} from "@angular/core";
+import { num, str } from "@simplysm/core-common";
+import { SdButtonControl } from "../button/sd-button.control";
+import { SdTextfieldControl } from "./sd-textfield.control";
+import { NgIcon } from "@ng-icons/core";
+import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-numpad",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdTextfieldControl, SdButtonControl, NgIcon],
+  template: `
+    <table>
+      <thead>
+        <tr>
+          <td [attr.colspan]="useEnterButton() ? 2 : 3">
+            <sd-textfield
+              [type]="'text'"
+              [size]="'lg'"
+              [inputClass]="'tx-right'"
+              [placeholder]="placeholder()"
+              [required]="required()"
+              [disabled]="inputDisabled()"
+              [(value)]="text"
+            />
+          </td>
+          @if (useEnterButton()) {
+            <td>
+              <sd-button
+                [size]="'lg'"
+                [theme]="'primary'"
+                [disabled]="required() && value() === undefined"
+                (click)="onButtonClick('ENT')"
+              >
+                ENT
+              </sd-button>
+            </td>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          @if (useMinusButton()) {
+            <td>
+              <sd-button [size]="'lg'" (click)="onButtonClick('Minus')">-</sd-button>
+            </td>
+          }
+          <td [attr.colspan]="useMinusButton() ? 1 : 2">
+            <sd-button
+              [size]="'lg'"
+              [buttonClass]="'tx-theme-danger-default'"
+              (click)="onButtonClick('C')"
+            >
+              <ng-icon [svg]="tablerEraser" />
+            </sd-button>
+          </td>
+          <td>
+            <sd-button
+              [size]="'lg'"
+              [buttonClass]="'tx-theme-warning-default'"
+              (click)="onButtonClick('BS')"
+            >
+              <ng-icon [svg]="tablerArrowLeft" />
+            </sd-button>
+          </td>
+        </tr>
+        @for (r of [2, 1, 0]; track r) {
+          <tr>
+            @for (c of [0, 1, 2]; track $index) {
+              <td>
+                <sd-button [size]="'lg'" (click)="onButtonClick((r * 3 + c + 1).toString())">
+                  {{ r * 3 + c + 1 }}
+                </sd-button>
+              </td>
+            }
+          </tr>
+        }
+        <tr>
+          <td colspan="2">
+            <sd-button [size]="'lg'" (click)="onButtonClick('0')">0</sd-button>
+          </td>
+          <td>
+            <sd-button [size]="'lg'" (click)="onButtonClick('.')">.</sd-button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-numpad {
+        table {
+          width: 100%;
+          border-collapse: collapse;
+
+          > * > tr > * {
+            border: none;
+            padding: var(--gap-xxs);
+
+            > sd-button {
+              border: none;
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdNumpadControl {
+  text = signal<string | undefined>(undefined);
+
+  placeholder = input<string>();
+  value = model<number>();
+
+  required = input(false, { transform: booleanAttribute });
+  inputDisabled = input(false, { transform: booleanAttribute });
+  useEnterButton = input(false, { transform: booleanAttribute });
+  useMinusButton = input(false, { transform: booleanAttribute });
+
+  enterButtonClick = output();
+
+  constructor() {
+    effect(() => {
+      const text = this.text();
+      const newValue = num.parseFloat(text);
+      if (newValue !== untracked(() => this.value())) {
+        this.value.set(newValue);
+      }
+    });
+
+    effect(() => {
+      const value = this.value();
+      const prevValue = num.parseFloat(untracked(() => this.text()));
+      if (prevValue !== value) {
+        this.text.set(value?.toString());
+      }
+    });
+  }
+
+  onButtonClick(key: string) {
+    if (key === "C") {
+      this.text.set(undefined);
+    } else if (key === "BS") {
+      this.text.update((v) => {
+        const sliced = v?.slice(0, -1);
+        return str.isNullOrEmpty(sliced) ? undefined : sliced;
+      });
+    } else if (key === "ENT") {
+      this.enterButtonClick.emit();
+    } else if (key === "Minus") {
+      this.text.update((v) => {
+        if (v != null && v[0] === "-") {
+          return v.slice(1);
+        } else {
+          return "-" + (v ?? "");
+        }
+      });
+    } else {
+      this.text.update((v) => (v ?? "") + key);
+    }
+  }
+
+  protected readonly tablerEraser = tablerEraser;
+  protected readonly tablerArrowLeft = tablerArrowLeft;
+}

package/src/ui/form/input/sd-range.control.ts

@@ -0,0 +1,59 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdTextfieldControl } from "./sd-textfield.control";
+import type { TSdTextfieldTypes } from "./sd-textfield-type-handlers";
+
+@Component({
+  selector: "sd-range",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdTextfieldControl],
+  template: `
+    <sd-textfield
+      [type]="type()"
+      [(value)]="from"
+      [required]="required()"
+      [disabled]="disabled()"
+      [inputStyle]="inputStyle()"
+    />
+    <div>~</div>
+    <sd-textfield
+      [type]="type()"
+      [(value)]="to"
+      [min]="from()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [inputStyle]="inputStyle()"
+    />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/mixins";
+
+      sd-range {
+        display: flex;
+        align-items: center;
+
+        @include mixins.flex-direction(row, var(--gap-sm));
+      }
+    `,
+  ],
+})
+export class SdRangeControl<K extends keyof TSdTextfieldTypes> {
+  type = input.required<K>();
+
+  from = model<TSdTextfieldTypes[K]>();
+  to = model<TSdTextfieldTypes[K]>();
+
+  inputStyle = input<string>();
+
+  required = input(false, { transform: booleanAttribute });
+  disabled = input(false, { transform: booleanAttribute });
+}

package/src/ui/form/input/sd-textarea.control.ts

@@ -0,0 +1,221 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
+
+@Component({
+  selector: "sd-textarea",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <div
+      [style]="inputStyle()"
+      [class]="inputClass() ? '_contents ' + inputClass() : '_contents'"
+      [attr.title]="title() ?? placeholder()"
+      [style.visibility]="!readonly() && !disabled() ? 'hidden' : undefined"
+    >
+      @if (value()) {
+        <pre>{{ value() }} </pre>
+      } @else if (placeholder()) {
+        <span class="tx-trans-lighter">{{ placeholder() }}</span>
+      } @else {
+        <span>&nbsp;</span>
+      }
+    </div>
+    @if (!readonly() && !disabled()) {
+      <textarea
+        [value]="value() ?? ''"
+        [attr.placeholder]="placeholder()"
+        [attr.title]="title() ?? placeholder()"
+        [attr.rows]="currRows()"
+        (input)="onInput($event)"
+        [style]="inputStyle()"
+        [class]="inputClass()"
+      ></textarea>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../../scss/commons/variables";
+      @use "../../../../scss/commons/mixins";
+
+      sd-textarea {
+        display: block;
+        position: relative;
+
+        > textarea,
+        > ._contents {
+          @include mixins.form-control-base();
+          resize: none;
+
+          overflow: auto;
+          width: 100%;
+
+          border: 1px solid var(--trans-lighter);
+          border-radius: var(--border-radius-default);
+          background: var(--theme-secondary-lightest);
+
+          &:focus {
+            outline: none;
+            border-color: var(--theme-primary-default);
+          }
+
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          &::-webkit-input-placeholder {
+            color: var(--text-trans-lighter);
+          }
+        }
+
+        &:not([data-sd-inset="true"]):not([data-sd-disabled="true"]) > ._contents {
+          height: 0;
+          max-height: 0;
+          padding-top: 0;
+          padding-bottom: 0;
+          margin-top: 0;
+          margin-bottom: 0;
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            > textarea,
+            > ._contents {
+              background: var(--theme-#{$key}-lightest);
+            }
+          }
+        }
+
+        &[data-sd-size="sm"] {
+          > textarea,
+          > ._contents {
+            padding: var(--gap-xs) var(--gap-sm);
+          }
+        }
+
+        &[data-sd-size="lg"] {
+          > textarea,
+          > ._contents {
+            padding: var(--gap-default) var(--gap-lg);
+          }
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          vertical-align: top;
+
+          > textarea,
+          > ._contents {
+            width: auto;
+            vertical-align: top;
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          > ._contents {
+            display: block;
+          }
+
+          > textarea {
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+
+          > textarea,
+          > ._contents {
+            width: 100%;
+            border: none;
+            border-radius: 0;
+          }
+
+          > textarea:focus {
+            outline: 1px solid var(--theme-primary-default);
+            outline-offset: -1px;
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          > ._contents {
+            display: block;
+            background: var(--theme-gray-lightest);
+            color: var(--text-trans-light);
+          }
+
+          &[data-sd-inset="true"] {
+            > ._contents {
+              background: var(--control-color);
+              color: var(--text-trans-default);
+            }
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-readonly]": "readonly()",
+    "[attr.data-sd-inline]": "inline()",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-theme]": "theme()",
+  },
+})
+export class SdTextareaControl {
+  value = model<string>();
+
+  placeholder = input<string>();
+  title = input<string>();
+  minRows = input<number>(1);
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  validatorFn = input<(value: string | undefined) => string | undefined>();
+  theme = input<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >();
+  inputStyle = input<string>();
+  inputClass = input<string>();
+
+  currRows = computed(() => Math.max(this.minRows(), this.value()?.split("\n").length ?? 1));
+
+  constructor() {
+    setupInvalid(() => {
+      const errorMessages: string[] = [];
+      if (this.value() == null) {
+        if (this.required()) {
+          errorMessages.push("값을 입력하세요.");
+        }
+      }
+
+      if (this.validatorFn()) {
+        const message = this.validatorFn()!(this.value());
+        if (message !== undefined) {
+          errorMessages.push(message);
+        }
+      }
+
+      return errorMessages.join("\r\n");
+    });
+  }
+
+  onInput(event: Event): void {
+    const inputEl = event.target as HTMLTextAreaElement;
+
+    this.value.set(inputEl.value === "" ? undefined : inputEl.value);
+  }
+}