@ssgoi/angular 3.0.0 → 5.2.0

package/README.md

@@ -77,7 +77,7 @@ The value you pass to `[ssgoiTransition]` should uniquely identify the view (com
 ```typescript
 import { Component } from "@angular/core";
 import { TransitionDirective } from "@ssgoi/angular";
-import { fadeIn, fadeOut } from "@ssgoi/angular/transitions";
+import { fade } from "@ssgoi/angular/transitions";
 
 @Component({
   selector: "app-call-to-action",
@@ -87,8 +87,8 @@ import { fadeIn, fadeOut } from "@ssgoi/angular/transitions";
     <button
       [transition]="{
         key: 'cta',
-        in: fadeIn({ duration: 220 }),
-        out: fadeOut({ duration: 180 })
+        in: fade({ duration: 220 }),
+        out: fade({ duration: 180 })
       }"
     >
       Get Started
@@ -128,14 +128,9 @@ Element-level factories:
 
 ```typescript
 import {
-  fadeIn,
-  fadeOut,
-  slideUp,
-  slideDown,
-  slideLeft,
-  slideRight,
-  scaleIn,
-  scaleOut,
+  fade,
+  slide,
+  scale,
   bounce,
   blur,
   rotate,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ssgoi/angular",
-  "version": "3.0.0",
+  "version": "5.2.0",
   "description": "Angular bindings for SSGOI - Native app-like page transitions for Angular applications",
   "private": false,
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@ssgoi/core": "3.0.0"
+    "@ssgoi/core": "^5.2.0"
   },
   "peerDependencies": {
     "@angular/common": "^20.0.0",

package/src/lib/index.ts

@@ -4,6 +4,7 @@ export {
   TransitionDirective,
   TransitionDirectiveConfig,
 } from "./transition.directive";
+export { TransitionScopeDirective } from "./transition-scope.directive";
 export { injectSsgoi, SSGOI_CONTEXT } from "./context";
 export { transition } from "@ssgoi/core";
 export * from "./types";

package/src/lib/transition-scope.directive.ts

@@ -0,0 +1,54 @@
+import {
+  Directive,
+  ElementRef,
+  OnInit,
+  OnDestroy,
+  inject,
+  PLATFORM_ID,
+} from "@angular/core";
+import { isPlatformBrowser } from "@angular/common";
+import { createTransitionScope } from "@ssgoi/core";
+
+/**
+ * TransitionScope creates a boundary for local-scoped transitions.
+ *
+ * Child elements with `scope: 'local'` will:
+ * - Skip IN animation when mounted simultaneously with the scope
+ * - Skip OUT animation when unmounted simultaneously with the scope
+ *
+ * @example
+ * ```html
+ * <div transitionScope>
+ *   <div [transition]="{ scope: 'local', in: ..., out: ... }">
+ *     Content
+ *   </div>
+ * </div>
+ * ```
+ */
+@Directive({
+  selector: "[transitionScope]",
+  host: {
+    style: "display: contents",
+  },
+})
+export class TransitionScopeDirective implements OnInit, OnDestroy {
+  private readonly el = inject(ElementRef<HTMLElement>);
+  private readonly platformId = inject(PLATFORM_ID);
+  private cleanup?: () => void;
+
+  ngOnInit(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    const cleanupResult = createTransitionScope()(this.el.nativeElement);
+
+    if (cleanupResult) {
+      this.cleanup = cleanupResult;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.cleanup?.();
+  }
+}

package/src/lib/transition.directive.ts

@@ -12,10 +12,12 @@ import { transition as coreTransition } from "@ssgoi/core";
 import type {
   Transition as CoreTransitionConfig,
   TransitionKey as CoreTransitionKey,
+  TransitionScope as CoreTransitionScope,
 } from "@ssgoi/core";
 
 export type TransitionDirectiveConfig = CoreTransitionConfig & {
   key?: CoreTransitionKey;
+  scope?: CoreTransitionScope;
 };
 
 @Directive({
@@ -38,7 +40,7 @@ export class TransitionDirective implements OnInit, OnDestroy {
       key: config.key,
       in: config.in,
       out: config.out,
-      ref: this.el.nativeElement,
+      scope: config.scope,
     })(this.el.nativeElement);
 
     if (cleanupResult) {