ngx-dynamic-toast 0.0.1 → 0.0.3

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-dynamic-toast",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,41 @@
 {
   "name": "ngx-dynamic-toast",
-  "version": "0.0.1",
+  "version": "0.0.3",
+  "description": "Dynamic toast notifications for Angular",
+  "keywords": [
+    "angular",
+    "ngx",
+    "toast",
+    "notification",
+    "dynamic",
+    "ngx-dynamic-toast",
+    "alerts",
+    "sonner",
+    "sonner-angular",
+    "sonner-ng",
+    "dynamic-toast",
+    "dynamic-alerts",
+    "dynamic-notification",
+    "dynamic-ngx-toast",
+    "dynamic-ngx-alerts",
+    "dynamic-ngx-notification",
+    "dynamic-ngx-toast",
+    "dynamic-ngx-alerts",
+    "dynamic-ngx-notification",
+    "dynamic-island",
+    "dynamic-island-angular",
+    "dynamic-island-ng"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ederjavs/ngx-dynamic-toast.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ederjavs/ngx-dynamic-toast/issues"
+  },
+  "homepage": "https://github.com/ederjavs/ngx-dynamic-toast#readme",
+  "author": "ederjavs",
+  "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^21.1.0",
     "@angular/core": "^21.1.0"
@@ -8,16 +43,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/ngx-dynamic-toast.mjs",
-  "typings": "types/ngx-dynamic-toast.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ngx-dynamic-toast.d.ts",
-      "default": "./fesm2022/ngx-dynamic-toast.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/constants.ts

@@ -0,0 +1,18 @@
+export const HEIGHT = 40;
+export const WIDTH = 350;
+export const DEFAULT_ROUNDNESS = 16;
+
+export const DURATION_MS = 600;
+export const DURATION_S = DURATION_MS / 1000;
+
+export const DEFAULT_TOAST_DURATION = 6000;
+export const EXIT_DURATION = DEFAULT_TOAST_DURATION * 0.1;
+export const AUTO_EXPAND_DELAY = DEFAULT_TOAST_DURATION * 0.025;
+export const AUTO_COLLAPSE_DELAY = DEFAULT_TOAST_DURATION - 2000;
+
+export const BLUR_RATIO = 0.5;
+export const PILL_PADDING = 10;
+export const MIN_EXPAND_RATIO = 2.25;
+export const SWAP_COLLAPSE_MS = 200;
+export const HEADER_EXIT_MS = DURATION_MS * 0.7;
+

package/src/lib/dynamic-toast-viewport.component.html

@@ -0,0 +1,24 @@
+@for (group of groups(); track group.pos) {
+  <section
+    data-dt-viewport
+    [attr.data-position]="group.pos"
+    aria-live="polite"
+    [style.top]="group.style?.top"
+    [style.right]="group.style?.right"
+    [style.bottom]="group.style?.bottom"
+    [style.left]="group.style?.left"
+  >
+    @for (t of group.items; track t.id) {
+      <dt-toast
+        [toast]="t"
+        [pillAlign]="group.pill"
+        [expandEdge]="group.expand"
+        [canExpand]="activeId() === undefined || activeId() === t.id"
+        (entered)="onToastEnter($event)"
+        (left)="onToastLeave($event)"
+        (dismissed)="service.dismiss($event)"
+      />
+    }
+  </section>
+}
+

package/src/lib/dynamic-toast-viewport.component.ts

@@ -0,0 +1,121 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import { DynamicToastComponent } from "./dynamic-toast.component";
+import { DynamicToastService } from "./dynamic-toast.service";
+import type { DynamicToastOffsetConfig, DynamicToastPosition } from "./types";
+
+type PillAlign = "left" | "center" | "right";
+type ExpandEdge = "top" | "bottom";
+
+const pillAlign = (pos: DynamicToastPosition): PillAlign =>
+  pos.includes("right") ? "right" : pos.includes("center") ? "center" : "left";
+
+const expandDir = (pos: DynamicToastPosition): ExpandEdge =>
+  pos.startsWith("top") ? "bottom" : "top";
+
+@Component({
+  selector: "dt-viewport",
+  standalone: true,
+  imports: [DynamicToastComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: "./dynamic-toast-viewport.component.html",
+  styleUrls: ["./styles.css"],
+})
+export class DynamicToastViewportComponent {
+  position = input<DynamicToastPosition>("top-right");
+  offset = input<DynamicToastOffsetConfig | string | number | undefined>(undefined);
+
+  readonly service = inject(DynamicToastService);
+  private hovering = signal(new Set<string>());
+
+  activeId = signal<string | undefined>(undefined);
+
+  private latestId = computed(() => {
+    const list = this.service.toasts();
+    for (let i = list.length - 1; i >= 0; i--) {
+      if (!list[i].exiting) return list[i].id;
+    }
+    return undefined;
+  });
+
+  groups = computed(() => {
+    const toasts = this.service.toasts();
+    const byPos = new Map<DynamicToastPosition, typeof toasts>();
+    for (const t of toasts) {
+      const p = (t.position ?? this.position()) as DynamicToastPosition;
+      const arr = byPos.get(p);
+      if (arr) arr.push(t);
+      else byPos.set(p, [t]);
+    }
+
+    const offset = this.offset();
+    const off: DynamicToastOffsetConfig | undefined =
+      offset === undefined
+        ? undefined
+        : typeof offset === "object"
+          ? offset
+          : { top: offset, right: offset, bottom: offset, left: offset };
+
+    const px = (v: string | number | undefined) =>
+      v === undefined ? undefined : typeof v === "number" ? `${v}px` : v;
+
+    const res: Array<{
+      pos: DynamicToastPosition;
+      items: typeof toasts;
+      pill: PillAlign;
+      expand: ExpandEdge;
+      style?: { top?: string; right?: string; bottom?: string; left?: string };
+    }> = [];
+
+    for (const [pos, items] of byPos) {
+      const style: any = {};
+      if (off) {
+        if (pos.startsWith("top") && off.top !== undefined) style.top = px(off.top);
+        if (pos.startsWith("bottom") && off.bottom !== undefined)
+          style.bottom = px(off.bottom);
+        if (pos.endsWith("left") && off.left !== undefined) style.left = px(off.left);
+        if (pos.endsWith("right") && off.right !== undefined)
+          style.right = px(off.right);
+      }
+
+      res.push({
+        pos,
+        items,
+        pill: pillAlign(pos),
+        expand: expandDir(pos),
+        style: off ? style : undefined,
+      });
+    }
+
+    return res;
+  });
+
+  onToastEnter(id: string) {
+    const next = new Set(this.hovering());
+    next.add(id);
+    this.hovering.set(next);
+    this.activeId.set(id);
+    this.service.pauseTimers();
+  }
+
+  onToastLeave(id: string) {
+    const next = new Set(this.hovering());
+    next.delete(id);
+    this.hovering.set(next);
+    if (next.size > 0) return;
+
+    queueMicrotask(() => {
+      if (this.hovering().size > 0) return;
+      this.activeId.set(this.latestId());
+      this.service.resumeTimers();
+    });
+  }
+}

package/src/lib/dynamic-toast.component.html

@@ -0,0 +1,148 @@
+<button
+  type="button"
+  data-dt-toast
+  [attr.data-ready]="ready()"
+  [attr.data-expanded]="open()"
+  [attr.data-exiting]="toast().exiting || false"
+  [attr.data-edge]="expandEdge()"
+  [attr.data-position]="pillAlign()"
+  [attr.data-state]="view().state"
+  [class]="toast().className || ''"
+  [style.--_h]="HEIGHT + 'px'"
+  [style.--_pw]="(pillWidth() || HEIGHT) + 'px'"
+  [style.--_px]="pillX() + 'px'"
+  [style.--_ht]="headerTransform()"
+  [style.--_co]="open() ? 1 : 0"
+  [style.animation-duration]="(toast().duration || 6000) + 'ms'"
+  (mouseenter)="handleEnter()"
+  (mouseleave)="handleLeave()"
+  (transitionend)="handleTransitionEnd($event)"
+  (pointerdown)="handlePointerDown($event)"
+>
+  <div
+    data-dt-canvas
+    [attr.data-edge]="expandEdge()"
+    [style.filter]="'url(#' + filterId + ')'"
+  >
+    <svg
+      data-dt-svg
+      [attr.width]="WIDTH"
+      [attr.height]="svgHeight()"
+      [attr.viewBox]="'0 0 ' + WIDTH + ' ' + svgHeight()"
+    >
+      <defs>
+        <filter
+          [id]="filterId"
+          x="-20%"
+          y="-20%"
+          width="140%"
+          height="140%"
+          colorInterpolationFilters="sRGB"
+        >
+          <feGaussianBlur
+            in="SourceGraphic"
+            [attr.stdDeviation]="blur()"
+            result="blur"
+          />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
+            result="goo"
+          />
+          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+        </filter>
+      </defs>
+
+      <path
+        data-dt-pill
+        [attr.d]="pillPath()"
+        [attr.fill]="view().fill"
+      />
+
+      <path
+        data-dt-body
+        [attr.d]="bodyPath()"
+        [attr.fill]="view().fill"
+        [attr.opacity]="open() ? 1 : 0"
+      />
+    </svg>
+  </div>
+
+  <div #headerRef data-dt-header [attr.data-edge]="expandEdge()">
+    <div data-dt-header-stack>
+      <div
+        #innerRef
+        data-dt-header-inner
+        data-layer="current"
+      >
+        <div
+          data-dt-badge
+          [attr.data-state]="view().state"
+          [class]="view().styles?.badge || ''"
+          [innerHTML]="resolvedIcon(view())"
+        ></div>
+        <span
+          data-dt-title
+          [attr.data-state]="view().state"
+          [class]="view().styles?.title || ''"
+        >
+          {{ view().title }}
+        </span>
+      </div>
+
+      <!-- @if (headerLayerPrev(); as prev) {
+        <div data-dt-header-inner data-layer="prev" data-exiting="true">
+          <div
+            data-dt-badge
+            [attr.data-state]="prev.view.state"
+            [class]="prev.view.styles?.badge || ''"
+            [innerHTML]="resolvedIcon(prev.view)"
+          ></div>
+          <span
+            data-dt-title
+            [attr.data-state]="prev.view.state"
+            [class]="prev.view.styles?.title || ''"
+          >
+            {{ prev.view.title }}
+          </span>
+        </div>
+      } -->
+    </div>
+  </div>
+
+  @if (hasDesc()) {
+    <div
+      data-dt-content
+      [attr.data-edge]="expandEdge()"
+      [attr.data-visible]="open()"
+    >
+      <div
+        #contentRef
+        data-dt-description
+        [class]="view().styles?.description || ''"
+      >
+        @if (view().description) {
+          <span>{{ view().description }}</span>
+        }
+        @if (view().contentTemplate) {
+          <ng-container
+            [ngTemplateOutlet]="view().contentTemplate"
+          ></ng-container>
+        }
+        @if (view().button) {
+          <a
+            href="#"
+            data-dt-button
+            [attr.data-state]="view().state"
+            [class]="view().styles?.button || ''"
+            (click)="handleButtonClick($event)"
+          >
+            {{ view().button?.title }}
+          </a>
+        }
+      </div>
+    </div>
+  }
+</button>
+