@simplysm/angular 14.0.30 → 14.0.33

package/src/controls/input/sd-date-range.picker.ts

@@ -0,0 +1,105 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdSelect } from "../select/sd-select";
+import { SdSelectItem } from "../select/sd-select-item";
+import { SdRange } from "./sd-range";
+import { SdTextfield } from "./sd-textfield";
+import { DateOnly } from "@simplysm/core-common";
+
+@Component({
+  selector: "sd-date-range-picker",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdSelect, SdSelectItem, SdRange, SdTextfield],
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/mixins";
+
+      sd-date-range-picker {
+        display: flex;
+        align-items: center;
+
+        @include mixins.flex-direction(row, var(--gap-sm));
+      }
+    `,
+  ],
+  template: `
+    <sd-select
+      [(value)]="periodType"
+      (valueChange)="handleDatePeriodTypeChanged()"
+      [required]="true"
+      style="min-width: 0"
+    >
+      <sd-select-item [value]="'일'">일</sd-select-item>
+      <sd-select-item [value]="'월'">월</sd-select-item>
+      <sd-select-item [value]="'범위'">범위</sd-select-item>
+    </sd-select>
+    @if (periodType() === "범위") {
+      <sd-range
+        [type]="'date'"
+        [(from)]="from"
+        [(to)]="to"
+        (fromChange)="handleFromDateChanged()"
+        [required]="required()"
+      />
+    } @else {
+      <sd-textfield
+        [required]="required()"
+        [type]="periodType() === '월' ? 'month' : 'date'"
+        [(value)]="from"
+        (valueChange)="handleFromDateChanged()"
+      />
+    }
+  `,
+})
+export class SdDateRangePicker {
+  periodType = model<"일" | "월" | "범위">("범위");
+  from = model<DateOnly>();
+  to = model<DateOnly>();
+
+  required = input(false, { transform: booleanAttribute });
+
+  handleDatePeriodTypeChanged(): void {
+    if (this.periodType() === "월") {
+      const fromDate = this.from();
+      if (fromDate) {
+        const firstOfMonth = fromDate.setDay(1);
+        this.from.set(firstOfMonth);
+        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
+      } else {
+        this.to.set(undefined);
+      }
+    } else if (this.periodType() === "일") {
+      this.to.set(this.from());
+    }
+  }
+
+  handleFromDateChanged(): void {
+    if (this.periodType() === "월") {
+      const fromDate = this.from();
+      if (fromDate) {
+        const firstOfMonth = fromDate.setDay(1);
+        this.from.set(firstOfMonth);
+        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
+      } else {
+        this.to.set(undefined);
+      }
+    } else if (this.periodType() === "일") {
+      this.to.set(this.from());
+    } else if (
+      this.periodType() === "범위" &&
+      this.from() &&
+      this.to() &&
+      this.from()!.tick > this.to()!.tick
+    ) {
+      this.to.set(this.from());
+    }
+  }
+}

package/src/controls/input/sd-range.ts

@@ -0,0 +1,59 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdTextfield } from "./sd-textfield";
+import type { SdTextfieldTypes } from "./sd-textfield-type-handlers";
+
+@Component({
+  selector: "sd-range",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdTextfield],
+  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 SdRange<K extends keyof SdTextfieldTypes> {
+  type = input.required<K>();
+
+  from = model<SdTextfieldTypes[K]>();
+  to = model<SdTextfieldTypes[K]>();
+
+  inputStyle = input<string>();
+
+  required = input(false, { transform: booleanAttribute });
+  disabled = input(false, { transform: booleanAttribute });
+}

package/src/controls/input/sd-textarea.ts

@@ -0,0 +1,221 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupInvalid } from "../../core/validation/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 SdTextarea {
+  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);
+  }
+}