@simplysm/angular 14.0.1 → 14.0.4

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

@@ -0,0 +1,395 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
+import {
+  textfieldTypeHandlers,
+  type TSdTextfieldTypes,
+} from "./sd-textfield-type-handlers";
+
+@Component({
+  selector: "sd-textfield",
+  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 (controlType() === "password") {
+        <span class="tx-trans-light">****</span>
+      } @else {
+        @if (controlValue()) {
+          <pre>{{ controlValueText() ?? controlValue() }} </pre>
+        } @else if (placeholder()) {
+          <span class="tx-trans-lighter">{{ placeholder() }}</span>
+        } @else {
+          <span>&nbsp;</span>
+        }
+      }
+    </div>
+    @if (!readonly() && !disabled()) {
+      <input
+        [style]="inputStyle()"
+        [class]="inputClass()"
+        [attr.title]="title() ?? placeholder()"
+        [attr.placeholder]="placeholder()"
+        [attr.min]="min()"
+        [attr.max]="max()"
+        [type]="controlType()"
+        [attr.inputmode]="type() === 'number' ? 'numeric' : undefined"
+        [value]="controlValue()"
+        [attr.autocomplete]="autocomplete()"
+        [attr.step]="controlStep()"
+        (input)="onInput($event)"
+        (paste)="onInputPaste($event)"
+      />
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../../scss/commons/variables";
+      @use "../../../../scss/commons/mixins";
+
+      sd-textfield {
+        display: block;
+        position: relative;
+
+        > input,
+        > ._contents {
+          @include mixins.form-control-base();
+
+          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-secondary-default);
+          }
+
+          &[type="date"],
+          &[type="month"],
+          &[type="datetime-local"] {
+            padding-top: calc(var(--gap-sm) - 1px);
+            padding-bottom: calc(var(--gap-sm) - 1px);
+          }
+
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          &::-webkit-input-placeholder {
+            color: var(--text-trans-lighter);
+          }
+
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+
+          &::-webkit-calendar-picker-indicator {
+            cursor: pointer;
+            margin: auto;
+          }
+        }
+
+        > ._contents {
+          display: none;
+        }
+
+        &[data-sd-type="number"] {
+          > input,
+          > ._contents {
+            text-align: right;
+          }
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            > input,
+            > ._contents {
+              background: var(--theme-#{$key}-lightest);
+            }
+          }
+        }
+
+        &[data-sd-size="sm"] {
+          > input,
+          > ._contents {
+            padding: var(--gap-xs) var(--gap-sm);
+
+            &[type="date"],
+            &[type="month"],
+            &[type="datetime-local"],
+            &[type="color"] {
+              padding-top: calc(var(--gap-xs) - 1px);
+              padding-bottom: calc(var(--gap-xs) - 1px);
+            }
+          }
+        }
+
+        &[data-sd-size="lg"] {
+          > input,
+          > ._contents {
+            padding: var(--gap-default) var(--gap-lg);
+
+            &[type="date"],
+            &[type="month"],
+            &[type="datetime-local"],
+            &[type="color"] {
+              padding-top: calc(var(--gap-default) - 1px);
+              padding-bottom: calc(var(--gap-default) - 1px);
+            }
+          }
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          vertical-align: top;
+
+          > input,
+          > ._contents {
+            width: auto;
+            vertical-align: top;
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          > ._contents {
+            display: block;
+          }
+
+          > input {
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+
+          > input,
+          > ._contents {
+            width: 100%;
+            border: none;
+            border-radius: 0;
+          }
+
+          > input:focus {
+            outline: 1px solid var(--theme-primary-default);
+            outline-offset: -1px;
+          }
+
+          &[data-sd-type="month"] {
+            > input,
+            > ._contents {
+              width: 8.25em;
+            }
+          }
+
+          &[data-sd-type="date"] {
+            > input,
+            > ._contents {
+              width: 8.25em;
+            }
+          }
+
+          &[data-sd-type="datetime-local"] {
+            > input,
+            > ._contents {
+              width: 14em;
+            }
+          }
+
+          &[data-sd-type="year"] {
+            > input,
+            > ._contents {
+              width: 4em;
+            }
+          }
+
+          &[data-sd-type="color"] {
+            > input,
+            > ._contents {
+              height: calc(
+                var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2
+              );
+            }
+
+            &[data-sd-size="sm"] {
+              > input,
+              > ._contents {
+                height: calc(
+                  var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2
+                );
+              }
+            }
+
+            &[data-sd-size="lg"] {
+              > input,
+              > ._contents {
+                height: calc(
+                  var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2
+                );
+              }
+            }
+          }
+        }
+
+        &[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);
+            }
+          }
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._contents {
+            display: block;
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-type]": "controlType()",
+    "[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 SdTextfieldControl<K extends keyof TSdTextfieldTypes> {
+  value = model<TSdTextfieldTypes[K]>();
+
+  type = input.required<K>();
+  placeholder = input<string>();
+  title = input<string>();
+  inputStyle = input<string>();
+  inputClass = input<string>();
+
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+
+  required = input(false, { transform: booleanAttribute });
+  min = input<TSdTextfieldTypes[K]>();
+  max = input<TSdTextfieldTypes[K]>();
+  minlength = input<number>();
+  maxlength = input<number>();
+  pattern = input<string>();
+  validatorFn = input<(value: TSdTextfieldTypes[K] | undefined) => string | undefined>();
+  format = input<string>();
+
+  step = input<number>();
+  autocomplete = input<string>();
+  useNumberComma = input(true, { transform: booleanAttribute });
+  minDigits = input<number>();
+
+  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"
+  >();
+
+  private readonly handler = computed(() => textfieldTypeHandlers[this.type()]);
+
+  controlType = computed(() => this.handler().controlType);
+
+  controlStep = computed(() => this.handler().getControlStep(this.step()));
+
+  controlValue = computed(() => {
+    const value = this.value();
+    if (value == null) return "";
+    return this.handler().toControlValue(value, {
+      useNumberComma: this.useNumberComma(),
+      format: this.format(),
+    });
+  });
+
+  controlValueText = computed(() => {
+    const value = this.value();
+    if (value == null) return undefined;
+    return this.handler().toDisplayText(value, {
+      minDigits: this.minDigits(),
+    });
+  });
+
+  constructor() {
+    setupInvalid(() => {
+      const value = this.value();
+      const handlerErrors = this.handler().validate(value, {
+        required: this.required(),
+        min: this.min(),
+        max: this.max(),
+        minlength: this.minlength(),
+        maxlength: this.maxlength(),
+        pattern: this.pattern(),
+        format: this.format(),
+      });
+
+      const errorMessages = [...handlerErrors];
+
+      if (this.validatorFn()) {
+        const message = this.validatorFn()!(value);
+        if (message !== undefined) {
+          errorMessages.push(message);
+        }
+      }
+
+      return errorMessages.join("\r\n");
+    });
+  }
+
+  onInput(event: Event): void {
+    const inputEl = event.target as HTMLInputElement;
+    if (inputEl.value === "") {
+      this.value.set(undefined);
+      return;
+    }
+    const parsed = this.handler().parse(inputEl.value, { format: this.format() });
+    if (parsed === undefined) {
+      return;
+    }
+    this.value.set(parsed as TSdTextfieldTypes[K]);
+  }
+
+  onInputPaste(event: ClipboardEvent): void {
+    const text = event.clipboardData?.getData("text/plain").trim();
+    if (text == null || text === "") {
+      this.value.set(undefined);
+      return;
+    }
+    const parsed = this.handler().parse(text, { format: this.format() });
+    if (parsed === undefined) {
+      const inputEl = event.target as HTMLInputElement;
+      inputEl.value = this.controlValue();
+      return;
+    }
+    this.value.set(parsed as TSdTextfieldTypes[K] | undefined);
+  }
+}

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

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  output,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-form",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <form #formEl novalidate (submit)="handleSubmit($event)">
+      <ng-content />
+      <button hidden type="submit"></button>
+    </form>
+  `,
+})
+export class SdFormControl {
+  formElRef = viewChild.required<any, ElementRef<HTMLFormElement>>("formEl", {
+    read: ElementRef,
+  });
+
+  get formEl() {
+    return this.formElRef().nativeElement;
+  }
+
+  formSubmit = output<SubmitEvent>();
+  formInvalid = output();
+
+  requestSubmit() {
+    this.formEl.requestSubmit();
+  }
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.formEl.checkValidity()) {
+      this.formSubmit.emit(event);
+      return;
+    }
+
+    // 자동 메시지 및 포커싱
+    this.formEl.reportValidity();
+    this.formInvalid.emit();
+  }
+}

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

@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupRipple } from "../../../core/utils/setups/setupRipple";
+
+@Component({
+  selector: "sd-select-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <ng-content />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-select-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--gap-sm) var(--gap-default);
+        cursor: pointer;
+        border-left: 1px solid var(--trans-lighter);
+        position: relative;
+        overflow: hidden;
+
+        &:hover {
+          background: var(--trans-lighter);
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.tabindex]": "0",
+  },
+})
+export class SdSelectButtonControl {
+  constructor() {
+    setupRipple(() => true);
+  }
+}

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

@@ -0,0 +1,143 @@
+import {
+  afterNextRender,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdSelectControl } from "./sd-select.control";
+import { SdCheckboxControl } from "../checkbox/sd-checkbox.control";
+import { SdGapControl } from "../../layout/sd-gap.control";
+
+@Component({
+  selector: "sd-select-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCheckboxControl, SdGapControl],
+  template: `
+    <div class="_content" tabindex="0" (click)="onClick()" (keydown)="onKeydown($event)">
+      @if (_parentControl.selectMode() === "multi") {
+        <sd-checkbox [value]="isSelected()" [inline]="true" />
+        <sd-gap [width]="'sm'" />
+      }
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/mixins";
+
+      sd-select-item {
+        display: block;
+
+        > ._content {
+          padding: var(--gap-sm) var(--gap-default);
+          cursor: pointer;
+
+          &:hover {
+            background: var(--trans-lighter);
+          }
+
+          &:focus {
+            outline: none;
+            background: var(--trans-lighter);
+          }
+        }
+
+        &[data-sd-selected="true"] > ._content {
+          background: var(--trans-lighter);
+          font-weight: bold;
+        }
+
+        &[data-sd-disabled="true"] {
+          > ._content {
+            opacity: 0.3;
+            cursor: default;
+            pointer-events: none;
+          }
+        }
+
+        &[data-sd-hidden="true"] {
+          display: none;
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-selected]": "isSelected()",
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-hidden]": "hidden()",
+  },
+})
+export class SdSelectItemControl<T> {
+  protected readonly _parentControl = inject<SdSelectControl<T>>(
+    forwardRef(() => SdSelectControl),
+  );
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  value = input.required<T>();
+  disabled = input(false, { transform: booleanAttribute });
+  hidden = input(false, { transform: booleanAttribute });
+
+  contentHTML = signal("");
+
+  isSelected = computed(() => {
+    const parentValue = this._parentControl.value();
+    const itemValue = this.value();
+    if (this._parentControl.selectMode() === "multi") {
+      const arr = parentValue as T[] | undefined;
+      return arr != null && arr.includes(itemValue);
+    }
+    return parentValue === itemValue;
+  });
+
+  constructor() {
+    afterNextRender(() => {
+      const contentEl = this._elRef.nativeElement.querySelector("._content");
+      if (contentEl == null) return;
+
+      this.contentHTML.set(contentEl.innerHTML);
+
+      const observer = new MutationObserver(() => {
+        this.contentHTML.set(contentEl.innerHTML);
+      });
+      observer.observe(contentEl, { childList: true, characterData: true, subtree: true });
+
+      this._destroyRef.onDestroy(() => observer.disconnect());
+    });
+  }
+
+  onClick(): void {
+    if (this.disabled()) return;
+    this._parentControl.selectItem(this.value());
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled()) return;
+      // Space always toggles without closing
+      this._parentControl.toggleItem(this.value());
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled()) return;
+      if (this._parentControl.selectMode() === "single") {
+        this._parentControl.selectItem(this.value());
+      } else {
+        this._parentControl.toggleItem(this.value());
+      }
+    }
+  }
+}