@simplysm/angular 14.0.30 → 14.0.33

package/src/ui/overlay/toast/sd-toast-container.ts

@@ -1,58 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from "@angular/core";
-
-@Component({
-  selector: "sd-toast-container",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  host: {
-    "[attr.data-sd-overlap]": "overlap() || undefined",
-  },
-  template: `<ng-content />`,
-  styles: [
-    /* language=SCSS */ `
-      @use "../../../../scss/commons/variables";
-      @use "sass:map";
-
-      sd-toast-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        z-index: map.get(variables.$vars, z-index, toast);
-        pointer-events: none;
-
-        @media all and (max-width: variables.$breakpoint-mobile) {
-          flex-direction: column-reverse;
-        }
-
-        &[data-sd-overlap] {
-          display: block;
-          bottom: 0;
-          height: 100%;
-
-          > sd-toast {
-            position: absolute;
-            bottom: var(--gap-xxl);
-            left: var(--gap-xxl);
-            right: var(--gap-xxl);
-            width: auto;
-            max-width: none;
-          }
-        }
-      }
-    `,
-  ],
-})
-export class SdToastContainer {
-  overlap = input(false, { transform: booleanAttribute });
-}

package/src/ui/overlay/toast/sd-toast.ts

@@ -1,123 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-  ViewEncapsulation,
-} from "@angular/core";
-import type { SdToastTheme } from "../../../core/providers/sd-toast.provider";
-
-const POLITE_THEMES: ReadonlySet<string> = new Set(["info", "success"]);
-const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
-
-@Component({
-  selector: "sd-toast",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  host: {
-    "[attr.data-sd-open]": "open() || undefined",
-    "[attr.data-sd-theme]": "theme()",
-    "[attr.role]": "ariaRole()",
-    "[attr.aria-live]": "ariaLive()",
-  },
-  template: `
-    @if (message() !== undefined) {
-      <div class="_message">{{ message() }}</div>
-    }
-    <ng-content />
-    @if (useProgress()) {
-      <div class="_progress">
-        <div class="_progress-bar" [style.width.%]="progress()"></div>
-      </div>
-    }
-  `,
-  styles: [
-    /* language=SCSS */ `
-      @use "../../../../scss/commons/variables";
-      @use "../../../../scss/commons/mixins";
-      @use "sass:map";
-
-      sd-toast {
-        display: block;
-        position: relative;
-        max-width: 32.5rem;
-        width: 100%;
-        margin: var(--gap-sm);
-        padding: var(--gap-default) var(--gap-lg);
-        border-radius: var(--border-radius-default);
-        color: var(--text-trans-rev-default);
-        pointer-events: auto;
-        transform: translateY(-100%);
-        opacity: 0;
-        transition:
-          transform var(--animation-duration) ease,
-          opacity var(--animation-duration) ease;
-
-        @include mixins.elevation(12);
-
-        &[data-sd-open] {
-          transform: translateY(0);
-          opacity: 1;
-        }
-
-        @each $theme-name, $theme-map in map.get(variables.$vars, theme) {
-          &[data-sd-theme="#{$theme-name}"] {
-            background: map.get($theme-map, default);
-          }
-        }
-
-        > ._message {
-          word-break: break-all;
-          white-space: pre-wrap;
-        }
-
-        > ._progress {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 0.25rem;
-          background: var(--trans-lighter);
-          border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
-          overflow: hidden;
-
-          > ._progress-bar {
-            height: 100%;
-            background: var(--trans-default);
-            transition: width 0.3s ease;
-          }
-        }
-
-        @media all and (max-width: variables.$breakpoint-mobile) {
-          max-width: none;
-          margin: var(--gap-xs);
-          border-radius: 0;
-        }
-      }
-    `,
-  ],
-})
-export class SdToast {
-  open = model(false);
-  useProgress = input(false, { transform: booleanAttribute });
-  theme = input<SdToastTheme>("info");
-  progress = model(0);
-  message = model<string | undefined>(undefined);
-
-  ariaRole = computed(() => {
-    const t = this.theme();
-    if (POLITE_THEMES.has(t)) return "status";
-    if (ASSERTIVE_THEMES.has(t)) return "alert";
-    return undefined;
-  });
-
-  ariaLive = computed(() => {
-    const t = this.theme();
-    if (POLITE_THEMES.has(t)) return "polite";
-    if (ASSERTIVE_THEMES.has(t)) return "assertive";
-    return undefined;
-  });
-}

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

@@ -1,188 +0,0 @@
-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,
-  SdItemOfTemplate,
-} from "../../core/directives/sd-item-of-template";
-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 SdCalendar<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>>>(
-    SdItemOfTemplate,
-    { 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;
-  });
-}