@simplysm/angular 1.0.138 → 14.0.4

package/src/core/utils/setups/setupInvalid.ts

@@ -0,0 +1,87 @@
+import { DestroyRef, effect, ElementRef, inject, Renderer2 } from "@angular/core";
+import { setSafeStyle } from "../setSafeStyle";
+import { Uuid } from "@simplysm/core-common";
+import { isFocusable } from "tabbable";
+
+export function setupInvalid(getInvalidMessage: () => string): void {
+  const elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  const renderer = inject(Renderer2);
+  const destroyRef = inject(DestroyRef);
+
+  const hostEl = elRef.nativeElement;
+
+  setSafeStyle(renderer, hostEl, { position: "relative" });
+
+  const indicatorEl = createIndicatorEl(renderer, hostEl);
+  const inputEl = createInputHiddenEl(renderer, hostEl);
+
+  const refreshValidity = (): void => {
+    inputEl.setCustomValidity(getInvalidMessage());
+  };
+
+  effect(() => {
+    refreshValidity();
+
+    const isInvalid = !inputEl.checkValidity();
+    setSafeStyle(renderer, indicatorEl, { display: isInvalid ? "block" : "none" });
+  });
+
+  const formEl = inputEl.form;
+  if (formEl == null) return;
+
+  formEl.addEventListener("submit", refreshValidity, { capture: true });
+  destroyRef.onDestroy(() => {
+    formEl.removeEventListener("submit", refreshValidity, { capture: true });
+  });
+}
+
+function createIndicatorEl(renderer: Renderer2, hostEl: HTMLElement): HTMLDivElement {
+  const newEl: HTMLDivElement = renderer.createElement("div");
+  setSafeStyle(renderer, newEl, {
+    display: "none",
+    position: "absolute",
+    zIndex: "1",
+    background: "var(--theme-danger-default)",
+
+    top: "var(--gap-xs)",
+    left: "var(--gap-xs)",
+    width: "var(--gap-sm)",
+    height: "var(--gap-sm)",
+    borderRadius: "100%",
+
+    userSelect: "none",
+  });
+  renderer.insertBefore(hostEl, newEl, hostEl.firstChild);
+  return newEl;
+}
+
+function createInputHiddenEl(renderer: Renderer2, hostEl: HTMLElement): HTMLInputElement {
+  const newEl: HTMLInputElement = renderer.createElement("input");
+  newEl.type = "text";
+  newEl.name = Uuid.generate().toString();
+  newEl.className = "sd-invalid-input";
+  setSafeStyle(renderer, newEl, {
+    position: "absolute",
+    left: "2px",
+    bottom: "0",
+    width: "1px",
+    height: "1px",
+    opacity: "0",
+    pointerEvents: "none",
+    zIndex: "-1",
+
+    userSelect: "none",
+  });
+
+  renderer.listen(newEl, "focus", () => {
+    const focusableElement =
+      (isFocusable(hostEl) ? hostEl : hostEl.findFirstFocusableChild()) ??
+      hostEl.findFocusableParent();
+    if (focusableElement !== undefined) {
+      focusableElement.focus();
+    }
+  });
+
+  renderer.appendChild(hostEl, newEl);
+  return newEl;
+}

package/src/core/utils/setups/setupModelHook.ts

@@ -0,0 +1,26 @@
+import type { Signal, WritableSignal } from "@angular/core";
+
+export function setupModelHook<T, S extends WritableSignal<T>>(
+  model: S,
+  canFn: Signal<(item: T) => boolean | Promise<boolean>>,
+): void {
+  const orgSet = model.set;
+  model.set = (value) => {
+    const canSet = canFn()(value);
+
+    if (canSet === false) {
+      return;
+    }
+
+    if (canSet === true) {
+      orgSet(value);
+      return;
+    }
+
+    void canSet.then((allowed) => {
+      if (allowed !== false) {
+        orgSet(value);
+      }
+    }).catch(() => {});
+  };
+}

package/src/core/utils/setups/setupRevealOnShow.ts

@@ -0,0 +1,50 @@
+import { effect, ElementRef, inject, untracked } from "@angular/core";
+
+export function setupRevealOnShow(
+  optFn?: () => {
+    type?: "l2r" | "t2b";
+    enabled?: boolean;
+  },
+): void {
+  const elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  effect((onCleanup) => {
+    const el = elRef.nativeElement;
+    const type = untracked(() => optFn?.().type ?? "t2b");
+
+    Object.assign(el.style, {
+      opacity: "0",
+      transform: type === "t2b" ? "translateY(-1em)" : "translateX(-1em)",
+    });
+
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (!entry.isIntersecting) return;
+
+      const enabled = untracked(() => optFn?.().enabled ?? true);
+
+      if (enabled) {
+        Object.assign(el.style, {
+          opacity: "1",
+          transform: "none",
+          transitionDuration: "var(--animation-duration)",
+          transitionTimingFunction: "ease-out",
+          transitionProperty: "opacity, transform",
+        });
+      } else {
+        Object.assign(el.style, {
+          opacity: "1",
+          transform: "",
+          transitionDuration: "",
+          transitionTimingFunction: "",
+          transitionProperty: "",
+        });
+      }
+    });
+    observer.observe(el);
+
+    onCleanup(() => {
+      observer.disconnect();
+    });
+  });
+}

package/src/core/utils/setups/setupRipple.ts

@@ -0,0 +1,78 @@
+import { effect, ElementRef, inject } from "@angular/core";
+
+export function setupRipple(enableFn?: () => boolean): void {
+  const elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  effect((onCleanup) => {
+    const el = elRef.nativeElement;
+
+    Object.assign(el.style, {
+      position: "relative",
+      overflow: "hidden",
+    });
+
+    let indicatorEl: HTMLElement | undefined;
+
+    const onPointerDown = (event: PointerEvent): void => {
+      if (enableFn !== undefined && !enableFn()) return;
+
+      const rect = el.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height);
+
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      if (indicatorEl !== undefined) {
+        indicatorEl.remove();
+      }
+
+      indicatorEl = document.createElement("div");
+      Object.assign(indicatorEl.style, {
+        position: "absolute",
+        pointerEvents: "none",
+        borderRadius: "100%",
+        background: "var(--trans-light)",
+
+        width: size * 2 + "px",
+        height: size * 2 + "px",
+        top: y - size + "px",
+        left: x - size + "px",
+
+        transition: "var(--animation-duration) linear",
+        transitionProperty: "transform, opacity",
+        transform: "scale(0.1)",
+      });
+      el.appendChild(indicatorEl);
+
+      indicatorEl.ontransitionend = () => {
+        if (indicatorEl !== undefined && getComputedStyle(indicatorEl).opacity === "0") {
+          indicatorEl.remove();
+        }
+      };
+
+      requestAnimationFrame(() => {
+        if (indicatorEl !== undefined) {
+          indicatorEl.style.transform = "scale(1)";
+        }
+      });
+    };
+
+    const onPointerUp = (): void => {
+      if (indicatorEl !== undefined) {
+        indicatorEl.style.opacity = "0";
+      }
+    };
+
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointerup", onPointerUp);
+    el.addEventListener("pointercancel", onPointerUp);
+    el.addEventListener("pointerleave", onPointerUp);
+
+    onCleanup(() => {
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointerup", onPointerUp);
+      el.removeEventListener("pointercancel", onPointerUp);
+      el.removeEventListener("pointerleave", onPointerUp);
+    });
+  });
+}

package/src/core/utils/useCurrentPageCodeSignal.ts

@@ -0,0 +1,16 @@
+import { computed, inject, type Signal } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { ActivatedRoute } from "@angular/router";
+
+export function useCurrentPageCodeSignal(): Signal<string> | undefined {
+  const activatedRoute = inject(ActivatedRoute, { optional: true });
+
+  if (activatedRoute) {
+    const activatedUrlSegmentsSignals = activatedRoute.pathFromRoot
+      .slice(2)
+      .map((item) => toSignal(item.url, { initialValue: item.snapshot.url }));
+    return computed(() => activatedUrlSegmentsSignals.map((item) => item()).join("."));
+  }
+
+  return undefined;
+}

package/src/core/utils/useExpandingManager.ts

@@ -0,0 +1,117 @@
+import { computed, type Signal, type WritableSignal } from "@angular/core";
+import "@simplysm/core-common";
+
+export interface IExpandItemDef<T> {
+  item: T;
+  parentDef: IExpandItemDef<T> | undefined;
+  hasChildren: boolean;
+  depth: number;
+}
+
+export function useExpandingManager<T>(binding: {
+  items: Signal<T[]>;
+  expandedItems: WritableSignal<T[]>;
+  getChildrenFn: Signal<((item: T, index: number) => T[] | undefined) | undefined>;
+  sort: (items: T[]) => T[];
+}): {
+  displayItems: Signal<T[]>;
+  hasExpandable: Signal<boolean>;
+  isAllExpanded: Signal<boolean>;
+  toggle(item: T): void;
+  toggleAll(): void;
+  isVisible(item: T): boolean;
+  def(item: T): IExpandItemDef<T>;
+} {
+  const allDefs = computed(() => {
+    const getChildrenFn = binding.getChildrenFn();
+    const defs: IExpandItemDef<T>[] = [];
+
+    function walk(items: T[], parentDef: IExpandItemDef<T> | undefined, depth: number): void {
+      const sorted = binding.sort(items);
+      for (let i = 0; i < sorted.length; i++) {
+        const item = sorted[i];
+        const children = getChildrenFn?.(item, i);
+        const hasChildren = children != null && children.length > 0;
+        const itemDef: IExpandItemDef<T> = { item, parentDef, hasChildren, depth };
+        defs.push(itemDef);
+        if (hasChildren) {
+          walk(children, itemDef, depth + 1);
+        }
+      }
+    }
+
+    walk(binding.items(), undefined, 0);
+    return defs;
+  });
+
+  const displayItems = computed(() => allDefs().map((d) => d.item));
+
+  const expandableDefs = computed(() => allDefs().filter((d) => d.hasChildren));
+
+  const hasExpandable = computed(() => expandableDefs().length > 0);
+
+  const isAllExpanded = computed(() => {
+    const expandable = expandableDefs();
+    if (expandable.length === 0) return false;
+    const expandedSet = new Set(binding.expandedItems());
+    return expandable.every((d) => expandedSet.has(d.item));
+  });
+
+  const defMap = computed(() => {
+    const map = new Map<T, IExpandItemDef<T>>();
+    for (const d of allDefs()) {
+      map.set(d.item, d);
+    }
+    return map;
+  });
+
+  function toggle(item: T): void {
+    binding.expandedItems.update((arr) => {
+      const next = [...arr];
+      next.toggle(item);
+      return next;
+    });
+  }
+
+  function toggleAll(): void {
+    if (isAllExpanded()) {
+      binding.expandedItems.set([]);
+    } else {
+      binding.expandedItems.set(expandableDefs().map((d) => d.item));
+    }
+  }
+
+  function isVisible(item: T): boolean {
+    const map = defMap();
+    const itemDef = map.get(item);
+    if (itemDef == null) return false;
+
+    let current = itemDef.parentDef;
+    while (current != null) {
+      if (!binding.expandedItems().includes(current.item)) {
+        return false;
+      }
+      current = current.parentDef;
+    }
+    return true;
+  }
+
+  function def(item: T): IExpandItemDef<T> {
+    const map = defMap();
+    const d = map.get(item);
+    if (d == null) {
+      throw new Error(`Item not found in expanding manager`);
+    }
+    return d;
+  }
+
+  return {
+    displayItems,
+    hasExpandable,
+    isAllExpanded,
+    toggle,
+    toggleAll,
+    isVisible,
+    def,
+  };
+}

package/src/core/utils/useFullPageCodeSignal.ts

@@ -0,0 +1,24 @@
+import { computed, inject, type Signal } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { NavigationEnd, Router } from "@angular/router";
+import { filter, map } from "rxjs";
+
+export function useFullPageCodeSignal(): Signal<string> {
+  const router = inject(Router);
+
+  const url = toSignal(
+    router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      map((event) => event.url),
+    ),
+    { initialValue: router.url },
+  );
+
+  return computed(() =>
+    url()
+      .split("/")
+      .slice(2)
+      .map((item) => item.split(/[;?]/)[0])
+      .join("."),
+  );
+}

package/src/core/utils/useSdSystemConfigResource.ts

@@ -0,0 +1,36 @@
+import { ElementRef, inject, type ResourceRef, resource, type Signal } from "@angular/core";
+import { SdSystemConfigProvider } from "../providers/sd-system-config.provider";
+
+export function useSdSystemConfigResource<T>(options: { key: Signal<string | undefined> }) {
+  const sdSystemConfig = inject<SdSystemConfigProvider<Record<string, T>>>(SdSystemConfigProvider);
+  const elRef = inject(ElementRef);
+
+  const elTag = elRef.nativeElement.tagName.toLowerCase();
+
+  const res: ResourceRef<T | undefined> = resource({
+    params: () => options.key(),
+    loader: async ({ params: key }) => {
+      return (await sdSystemConfig.getAsync(`${elTag}.${key}`)) as T | undefined;
+    },
+  });
+
+  return {
+    value: res.value,
+    isLoading: res.isLoading,
+    status: res.status,
+    hasValue: () => res.hasValue(),
+    reload: () => res.reload(),
+    set(value: T | undefined) {
+      res.set(value);
+      const key = options.key();
+      if (key == null) return;
+      queueMicrotask(async () => {
+        await sdSystemConfig.setAsync(`${elTag}.${key}`, value as T);
+      });
+    },
+    update(fn: (prev: T | undefined) => T | undefined) {
+      const newValue = fn(res.value());
+      this.set(newValue);
+    },
+  };
+}

package/src/core/utils/useSelectionManager.ts

@@ -0,0 +1,104 @@
+import { computed, type Signal, type WritableSignal } from "@angular/core";
+
+export function useSelectionManager<T>(options: {
+  displayItems: Signal<T[]>;
+  selectedItems: WritableSignal<T[]>;
+  selectMode: Signal<"single" | "multi" | undefined>;
+  getItemSelectableFn: Signal<((item: T) => boolean | string) | undefined>;
+}): {
+  hasSelectable: Signal<boolean>;
+  isAllSelected: Signal<boolean>;
+  getSelectable(item: T): true | string | undefined;
+  getCanChangeFn(item: T): () => boolean;
+  select(item: T): void;
+  deselect(item: T): void;
+  toggle(item: T): void;
+  toggleAll(): void;
+  isSelected(item: T): boolean;
+} {
+  const selectableItems = computed(() => {
+    const fn = options.getItemSelectableFn();
+    if (fn == null) return options.displayItems();
+    return options.displayItems().filter((item) => fn(item) === true);
+  });
+
+  const hasSelectable = computed(() => {
+    return options.selectMode() != null;
+  });
+
+  const isAllSelected = computed(() => {
+    const items = selectableItems();
+    if (items.length === 0) return false;
+    const selectedSet = new Set(options.selectedItems());
+    return items.every((item) => selectedSet.has(item));
+  });
+
+  function getSelectable(item: T): true | string | undefined {
+    const mode = options.selectMode();
+    if (mode == null) return undefined;
+    const fn = options.getItemSelectableFn();
+    if (fn == null) return true;
+    const result = fn(item);
+    if (result === true) return true;
+    if (result === false) return undefined;
+    return result; // string reason
+  }
+
+  function getCanChangeFn(item: T): () => boolean {
+    return () => {
+      const selectable = getSelectable(item);
+      return selectable === true;
+    };
+  }
+
+  function select(item: T): void {
+    const mode = options.selectMode();
+    if (mode == null) return;
+    if (getSelectable(item) !== true) return;
+
+    if (mode === "single") {
+      options.selectedItems.set([item]);
+    } else {
+      options.selectedItems.update((arr) => {
+        if (arr.includes(item)) return arr;
+        return [...arr, item];
+      });
+    }
+  }
+
+  function deselect(item: T): void {
+    options.selectedItems.update((arr) => arr.filter((i) => i !== item));
+  }
+
+  function toggle(item: T): void {
+    if (isSelected(item)) {
+      deselect(item);
+    } else {
+      select(item);
+    }
+  }
+
+  function toggleAll(): void {
+    if (isAllSelected()) {
+      options.selectedItems.set([]);
+    } else {
+      options.selectedItems.set([...selectableItems()]);
+    }
+  }
+
+  function isSelected(item: T): boolean {
+    return options.selectedItems().includes(item);
+  }
+
+  return {
+    hasSelectable,
+    isAllSelected,
+    getSelectable,
+    getCanChangeFn,
+    select,
+    deselect,
+    toggle,
+    toggleAll,
+    isSelected,
+  };
+}

package/src/core/utils/useSortingManager.ts

@@ -0,0 +1,89 @@
+import { computed, type Signal, type WritableSignal } from "@angular/core";
+import "@simplysm/core-common";
+
+export interface ISortingDef {
+  key: string;
+  desc: boolean;
+}
+
+export function useSortingManager(options: {
+  sorts: WritableSignal<ISortingDef[]>;
+}): {
+  defMap: Signal<Map<string, { indexText?: string; desc: boolean }>>;
+  toggle(key: string, multiple: boolean): void;
+  sort<T>(items: T[]): T[];
+} {
+  const defMap = computed(() => {
+    const map = new Map<string, { indexText?: string; desc: boolean }>();
+    const sorts = options.sorts();
+    for (let i = 0; i < sorts.length; i++) {
+      map.set(sorts[i].key, {
+        indexText: sorts.length > 1 ? String(i + 1) : undefined,
+        desc: sorts[i].desc,
+      });
+    }
+    return map;
+  });
+
+  function toggle(key: string, multiple: boolean): void {
+    options.sorts.update((prev) => {
+      const existing = prev.find((s) => s.key === key);
+
+      if (multiple) {
+        if (existing == null) {
+          return [...prev, { key, desc: false }];
+        } else if (!existing.desc) {
+          return prev.map((s) => (s.key === key ? { ...s, desc: true } : s));
+        } else {
+          return prev.filter((s) => s.key !== key);
+        }
+      } else {
+        if (existing == null) {
+          return [{ key, desc: false }];
+        } else if (!existing.desc) {
+          return [{ key, desc: true }];
+        } else {
+          return [];
+        }
+      }
+    });
+  }
+
+  function sort<T>(items: T[]): T[] {
+    const sorts = options.sorts();
+    if (sorts.length === 0) return items;
+
+    return [...items].sort((a, b) => {
+      for (const s of sorts) {
+        const aVal = (a as Record<string, unknown>)[s.key];
+        const bVal = (b as Record<string, unknown>)[s.key];
+
+        let cmp = 0;
+        if (aVal == null && bVal == null) {
+          cmp = 0;
+        } else if (aVal == null) {
+          cmp = -1;
+        } else if (bVal == null) {
+          cmp = 1;
+        } else if (typeof aVal === "string" && typeof bVal === "string") {
+          cmp = aVal.localeCompare(bVal);
+        } else if (typeof aVal === "number" && typeof bVal === "number") {
+          cmp = aVal - bVal;
+        } else {
+          cmp = String(aVal).localeCompare(String(bVal));
+        }
+
+        if (cmp !== 0) {
+          return s.desc ? -cmp : cmp;
+        }
+      }
+      return 0;
+    });
+  }
+
+  return {
+    defMap,
+    toggle,
+    sort,
+  };
+}

package/src/core/utils/useViewTitleSignal.ts

@@ -0,0 +1,21 @@
+import { computed, inject, type Signal } from "@angular/core";
+import { SdActivatedModalProvider } from "../../ui/overlay/modal/sd-modal.provider";
+import { SdAppStructureProvider } from "../providers/sd-app-structure.provider";
+import { useFullPageCodeSignal } from "./useFullPageCodeSignal";
+import { useCurrentPageCodeSignal } from "./useCurrentPageCodeSignal";
+
+export function useViewTitleSignal(): Signal<string> {
+  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const sdAppStructure = inject(SdAppStructureProvider);
+
+  const fullPageCode = useFullPageCodeSignal();
+  const currPageCode = useCurrentPageCodeSignal();
+
+  return computed(() => {
+    if (activatedModal != null) {
+      return activatedModal.modalComponent()?.title() ?? "";
+    }
+
+    return sdAppStructure.getTitleByFullCode(currPageCode?.() ?? fullPageCode());
+  });
+}

package/src/core/utils/useViewTypeSignal.ts

@@ -0,0 +1,33 @@
+import { computed, inject, type Signal } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { SdActivatedModalProvider } from "../../ui/overlay/modal/sd-modal.provider";
+import { useCurrentPageCodeSignal } from "./useCurrentPageCodeSignal";
+import { useFullPageCodeSignal } from "./useFullPageCodeSignal";
+
+export function useViewTypeSignal(getComp: () => object): Signal<TSdViewType> {
+  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const activatedRoute = inject(ActivatedRoute, { optional: true });
+
+  const fullPageCode = useFullPageCodeSignal();
+  const currPageCode = useCurrentPageCodeSignal();
+
+  return computed<TSdViewType>(() => {
+    if (activatedModal != null) {
+      return "modal";
+    }
+
+    const comp = getComp();
+
+    if (
+      activatedRoute &&
+      activatedRoute.component === comp.constructor &&
+      fullPageCode() === currPageCode?.()
+    ) {
+      return "page";
+    }
+
+    return "control";
+  });
+}
+
+export type TSdViewType = "page" | "modal" | "control";