@simplysm/angular 14.0.1 → 14.0.4

package/src/ui/visual/sd-calendar.control.ts

@@ -0,0 +1,188 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  input,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { DateOnly } from "@simplysm/core-common";
+import { FormatPipe } from "../../core/pipes/format.pipe";
+import {
+  type SdItemOfTemplateContext,
+  SdItemOfTemplateDirective,
+} from "../../core/directives/sd-item-of-template.directive";
+import { NgTemplateOutlet } from "@angular/common";
+
+@Component({
+  selector: "sd-calendar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [FormatPipe, NgTemplateOutlet],
+  template: `
+    <table>
+      <thead>
+        <tr>
+          <th>
+            {{ weeks[weekStartDay() % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 1) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 2) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 3) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 4) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 5) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 6) % 7] }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of dataTable(); let r = $index; track r) {
+          <tr>
+            @for (data of row; let c = $index; track c) {
+              <td [class.not-current]="data.date.month !== yearMonth().month">
+                <div class="day">
+                  {{ data.date | format: "d" }}
+                </div>
+                <div class="content">
+                  @for (item of data.items; track $index) {
+                    <ng-template
+                      [ngTemplateOutlet]="itemTplRef()"
+                      [ngTemplateOutletContext]="{
+                        $implicit: item,
+                        item: item,
+                        index: r * 7 + c,
+                        depth: 0,
+                      }"
+                    ></ng-template>
+                  }
+                </div>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/mixins";
+
+      sd-calendar {
+        > table {
+          border-collapse: collapse;
+          width: 100%;
+          height: 100%;
+          border-radius: var(--border-radius-default);
+          overflow: hidden;
+
+          > * > tr > * {
+            padding: var(--gap-sm) var(--gap-default);
+            border: 1px solid var(--theme-gray-light);
+
+            width: calc(100% / 7);
+          }
+
+          > thead > tr > th {
+            background: var(--theme-gray-lighter);
+            height: 10%;
+          }
+
+          > tbody > tr > td {
+            vertical-align: top;
+            height: 15%;
+
+            > .day {
+              margin-bottom: var(--gap-sm);
+            }
+
+            &.not-current {
+              background: var(--theme-gray-lightest);
+
+              > .day {
+                color: var(--theme-gray-default);
+              }
+            }
+
+            > .content {
+              display: flex;
+              flex-wrap: nowrap;
+
+              @include mixins.flex-direction(column, var(--gap-sm));
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdCalendarControl<T> {
+  items = input.required<T[]>();
+  getItemDateFn = input.required<(item: T, index: number) => DateOnly>();
+
+  yearMonth = input(new DateOnly().setDay(1));
+
+  itemTplRef = contentChild.required<any, TemplateRef<SdItemOfTemplateContext<T>>>(
+    SdItemOfTemplateDirective,
+    { read: TemplateRef },
+  );
+
+  weekStartDay = input(0);
+  minDaysInFirstWeek = input(1);
+
+  weeks = ["일", "월", "화", "수", "목", "금", "토"];
+
+  dataTable = computed(() => {
+    const result: {
+      date: DateOnly;
+      items: T[];
+    }[][] = [];
+
+    // Build a Map<tick, T[]> once for O(1) lookup per cell
+    const itemsByTick = new Map<number, T[]>();
+    const getDateFn = this.getItemDateFn();
+    for (let i = 0; i < this.items().length; i++) {
+      const item = this.items()[i];
+      const tick = getDateFn(item, i).tick;
+      const arr = itemsByTick.get(tick);
+      if (arr !== undefined) {
+        arr.push(item);
+      } else {
+        itemsByTick.set(tick, [item]);
+      }
+    }
+
+    const firstDate = this.yearMonth().getWeekSeqStartDate(
+      this.weekStartDay(),
+      this.minDaysInFirstWeek(),
+    );
+    for (let r = 0; r < 6; r++) {
+      const row: {
+        date: DateOnly;
+        items: T[];
+      }[] = [];
+      for (let c = 0; c < 7; c++) {
+        const date = firstDate.addDays(r * 7 + c);
+        row.push({
+          date,
+          items: itemsByTick.get(date.tick) ?? [],
+        });
+      }
+      result.push(row);
+    }
+
+    return result;
+  });
+}

package/src/ui/visual/sd-echarts.control.ts

@@ -0,0 +1,73 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import * as echarts from "echarts";
+
+@Component({
+  selector: "sd-echarts",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "(sdResize)": "onHostResize()",
+  },
+  template: `
+    <ng-content></ng-content>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-echarts {
+        display: block;
+        height: 100%;
+      }
+    `,
+  ],
+})
+export class SdEchartsControl {
+  private readonly _chart = signal<echarts.ECharts | undefined>(undefined);
+
+  option = input.required<echarts.EChartsOption>();
+  notMerge = input(false);
+  loading = input(false);
+
+  constructor() {
+    const elRef = inject(ElementRef);
+    const destroyRef = inject(DestroyRef);
+
+    afterNextRender(() => {
+      const chart = echarts.init(elRef.nativeElement, null, { renderer: "svg" });
+      this._chart.set(chart);
+      destroyRef.onDestroy(() => chart.dispose());
+    });
+
+    effect(() => {
+      const chart = this._chart();
+      if (chart == null) return;
+      chart.setOption(this.option(), { notMerge: this.notMerge() });
+    });
+
+    effect(() => {
+      const chart = this._chart();
+      if (chart == null) return;
+      if (this.loading()) {
+        chart.showLoading();
+      } else {
+        chart.hideLoading();
+      }
+    });
+  }
+
+  onHostResize() {
+    this._chart()?.resize();
+  }
+}

package/src/ui/visual/sd-label.control.ts

@@ -0,0 +1,66 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-label",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-theme]": "theme()",
+    "[style.background]": "color()",
+    "[attr.data-sd-clickable]": "clickable()",
+  },
+  template: `
+    <ng-content></ng-content>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+
+      sd-label {
+        display: inline-block;
+        background: var(--theme-gray-darker);
+        color: var(--text-trans-rev-default);
+        padding: 0 var(--gap-sm);
+        border-radius: var(--border-radius-default);
+        text-indent: 0;
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            background: var(--theme-#{$key}-default);
+          }
+        }
+
+        &[data-sd-clickable="true"] {
+          cursor: pointer;
+
+          &:hover {
+            background: var(--theme-gray-dark);
+
+            @each $key, $val in map.get(variables.$vars, theme) {
+              &[data-sd-theme="#{$key}"] {
+                background: var(--theme-#{$key}-dark);
+              }
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdLabelControl {
+  theme = input<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >();
+  color = input<string>();
+  clickable = input(false, { transform: booleanAttribute });
+}

package/src/ui/visual/sd-note.control.ts

@@ -0,0 +1,66 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-note",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-inset]": "inset()",
+  },
+  template: `
+    <ng-content></ng-content>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+
+      sd-note {
+        display: block;
+        padding: var(--gap-sm) var(--gap-default);
+        background: var(--theme-gray-lightest);
+
+        border: none;
+        border-radius: var(--border-radius-default);
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            background: var(--theme-#{$key}-lightest);
+            border: 1px solid var(--theme-#{$key}-lightest);
+          }
+        }
+
+        &[data-sd-size="sm"] {
+          font-size: var(--font-size-sm);
+          padding: var(--gap-xs) var(--gap-sm);
+        }
+
+        &[data-sd-size="lg"] {
+          padding: var(--gap-default) var(--gap-lg);
+        }
+
+        &[data-sd-inset="true"] {
+          border-radius: 0;
+        }
+      }
+    `,
+  ],
+})
+export class SdNoteControl {
+  theme = input<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >();
+  size = input<"sm" | "lg">();
+  inset = input(false, { transform: booleanAttribute });
+}

package/src/ui/visual/sd-progress.control.ts

@@ -0,0 +1,88 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { PercentPipe } from "@angular/common";
+
+@Component({
+  selector: "sd-progress",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [PercentPipe],
+  host: {
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-theme]": "theme()",
+  },
+  template: `
+    <div class="_content tx-right">
+      {{ value() | percent: "1.0-2" }}
+    </div>
+    <div class="_progress" [style.width]="value() * 100 + '%'"></div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+
+      sd-progress {
+        position: relative;
+        display: block;
+        width: 100%;
+        white-space: nowrap;
+        background: var(--theme-gray-lightest);
+        border: 1px solid var(--theme-gray-lightest);
+        border-radius: var(--border-radius-default);
+        overflow: hidden;
+
+        > ._content {
+          position: relative;
+          z-index: 2;
+          padding: var(--gap-lg) var(--gap-default);
+        }
+
+        > ._progress {
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: 0;
+          height: 100%;
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] > ._progress {
+            background: var(--theme-#{$key}-default);
+          }
+        }
+
+        &[data-sd-size="sm"] > ._content {
+          padding: var(--gap-xs) var(--gap-default);
+        }
+
+        &[data-sd-size="lg"] > ._content {
+          padding: var(--gap-default) var(--gap-xl);
+        }
+
+        &[data-sd-inset="true"] {
+          border-radius: 0;
+          border: none;
+          background: var(--control-color);
+        }
+      }
+    `,
+  ],
+})
+export class SdProgressControl {
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  theme = input.required<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >();
+
+  value = input.required<number>();
+}