@cocoar/ui-routing 0.1.0-beta.155

package/README.md

@@ -0,0 +1,349 @@
+# @cocoar/ui-routing
+
+Fragment-based routing utilities for Angular applications. Enable deep-linkable components (modals, drawers, panels) and custom actions through URL fragments.
+
+## Features
+
+- **Fragment-as-Route Pattern** — Treat URL fragments (`#details/123`) like declarative routes
+- **Path Parameter Extraction** — Use path patterns (`:id`, `:customer`) in fragments
+- **Query Parameter Support** — Parse and type query parameters (`?edit=true&mode=advanced`)
+- **Component Deep-linking** — Open any component via URL (modals, drawers, panels, etc.)
+- **Action Handlers** — Execute side effects through fragment changes
+- **Framework-Agnostic** — No assumptions about UI implementation (bring your own overlay system)
+- **Type-Safe** — Full TypeScript support with inference
+
+## Installation
+
+```bash
+npm install @cocoar/ui-routing
+```
+
+## Quick Start
+
+### 1. Define Fragment Routes
+
+```typescript
+import { ComponentRoutedFragment, ActionRoutedFragment } from '@cocoar/ui-routing';
+
+// For modals, drawers, or any component-based UI:
+const fragments: ComponentRoutedFragment[] = [
+  {
+    type: 'component',
+    path: 'details/:id',
+    loadComponent: () => import('./details.component').then(m => m.DetailsComponent),
+    options: { width: '800px', closeOnBackdrop: true } // Your custom config
+  }
+];
+
+// For actions without UI:
+const actionFragments: ActionRoutedFragment[] = [
+  {
+    type: 'action',
+    path: 'logout',
+    handler: () => authService.logout()
+  }
+];
+```
+
+### 2. Add to Route Configuration
+
+```typescript
+import { createRouteData, IRoutedFragmentConfig } from '@cocoar/ui-routing';
+
+const routes: Routes = [
+  {
+    path: 'dashboard',
+    component: DashboardComponent,
+    data: createRouteData<IRoutedFragmentConfig>({
+      routedFragments: fragments
+    })
+  }
+];
+```
+
+### 3. React to Fragment Changes
+
+```typescript
+import { RoutedFragmentService } from '@cocoar/ui-routing';
+
+@Component({ /* ... */ })
+export class DashboardComponent {
+  private fragmentService = inject(RoutedFragmentService);
+  private modalService = inject(MyModalService); // Your modal implementation
+
+  ngOnInit() {
+    // Handle component fragments (modals, drawers, etc.)
+    this.fragmentService.getParsedFragments('component').subscribe(components => {
+      components.forEach(async item => {
+        const component = await item.route.loadComponent();
+        this.modalService.open(component, {
+          data: item.params,
+          ...item.route.options // Your custom options
+        });
+      });
+    });
+
+    // Handle action fragments
+    this.fragmentService.getParsedFragments('action').subscribe(actions => {
+      actions.forEach(item => item.route.handler(item.params));
+    });
+  }
+}
+```component via fragment
+this.router.navigate([], { fragment: 'details/123?edit=true' });
+
+// Multiple fragments (component + confirmation)
+this.router.navigate([], { fragment: 'details/123#confirm' });
+
+// Remove fragment (close component)
+this.fragmentService.removeFragmentPart('details/123');
+```
+
+## API Reference
+
+### Types
+
+#### `ComponentRoutedFragment<TOptions>`
+Configuration for component fragments (modals, drawers, panels, etc.) with generic options.
+
+```typescript
+interface ComponentRoutedFragment<TOptions = unknown> {
+  type: 'component';
+  path: string; // Path pattern (e.g., 'details/:id/:tab')
+  loadComponent: () => Type<unknown> | Promise<Type<unknown>>;
+  options?: TOptions; // Your custom
+interface ModalRoutedFragment<TModalOptions = unknown> {
+  type: 'modal';
+  path: string; // Path pattern (e.g., 'details/:id/:tab')
+  loadComponent: () => Type<unknown> | Promise<Type<unknown>>;
+  modalOptions?: TModalOptions; // Your overlay config type
+}
+```
+
+#### `ActionRoutedFragment`
+Configuration for action fragments (no UI).
+
+```typescript
+interface ActionRoutedFragment extends RoutedFragmentBase<never> {
+  type: 'action';
+  handler: (params: any) => void;
+  options?: never; // Actions don't have options
+}
+```
+
+#### `IRoutedFragmentConfig<TFragment>`
+Route data configuration. Generic parameter allows type-safe fragment arrays.
+
+```typescript
+interface IRoutedFragmentConfig<TFragment extends RoutedFragmentBase = RoutedFragmentBase> {
+  routedFragments: TFragment[];
+}
+```
+
+#### `ParsedRoute<T>`
+Parsed fragment with extracted parameters.
+
+```typescript
+interface ParsedRoute<T extends RoutedFragment = RoutedFragment> {
+  params: { [key: string]: any }; // Extracted path & query params
+  route: T; // Matched route configuration
+  fragment: string; // Original fragment string
+}
+```
+
+### Services
+
+#### `RoutedFragmentService`
+component fragments (modals, drawers, etc.)
+fragmentService.getParsedFragments('component').subscribe(components => {
+  // Handle components
+});
+
+// Get action fragments
+fragmentService.getParsedFragments('action').subscribe(actions => {
+  // Handle actionmits parsed fragments filtered bycomponents).
+
+```typescript
+fragmentService.removeFragmentPart('details/123');
+```
+
+## Integration Examples
+
+The library is completely generic and works with any UI system. Here are integration patterns:
+
+### With Modals (Angular Material Dialog)
+
+```typescript
+import { MatDialogConfig } from '@angular/material/dialog';
+import { ComponentRoutedFragment } from '@cocoar/ui-routing';
+
+type ModalFragment = ComponentRoutedFragment<MatDialogConfig>;
+
+const fragments: ModalFragment[] = [{
+  type: 'component',
+  path: 'details/:id',
+  loadComponent: () => DetailsComponent,
+  options: { width: '600px', hasBackdrop: true }
+}];
+
+// In component:
+this.fragmentService.getParsedFragments('component').subscribe(items => {
+  items.forEach(async item => {
+    const component = await item.route.loadComponent();
+    this.dialog.open(component, {
+      data: item.params,
+      ...item.route.options
+    });
+  });
+});
+```
+
+### With Drawers/Side Panels
+
+```typescript
+interface DrawerConfig {
+  position: 'left' | 'right';
+  width: string;
+}
+
+type DrawerFragment = ComponentRoutedFragment<DrawerConfig>;
+
+const fragments: DrawerFragment[] = [{
+  type: 'component',
+  path: 'settings',
+  loadComponent: () => SettingsComponent,
+  options: { position: 'right', width: '400px' }
+}];
+```
+
+### With Custom Overlay System
+
+```typescript
+interface MyOverlayConfig {
+  width?: string;
+  closeOnEscape?: boolean;
+  backdrop?: boolean;
+}
+
+type CustomFragment = ComponentRoutedFragment<MyOverlayConfig>;
+
+// Create a service that bridges fragments → your overlay system
+@Injectable({ providedIn: 'root' })
+export class RoutedOverlayService {
+  private fragmentService = inject(RoutedFragmentService);
+  private overlayService = inject(MyOverlayService);
+
+  constructor() {
+    this.fragmentService.getParsedFragments('component').subscribe(items => {
+      items.forEach(async item => {
+        const component = await item.route.loadComponent();
+        this.overlayService.open(component, {
+          data: item.params,
+          config: item.route.options
+        });
+      });
+    });
+  }
+}loseOnEscape?: boolean;
+}
+
+type CustomModalFragment = ModalRoutedFragment<MyOverlayConfig>;
+
+const fragments: CustomModalFragment[] = [{
+  type: 'modal',
+  path: 'settings',
+  loadComponent: () => SettingsComponent,
+  modalOptions: { width: '400px', closeOnEscape: true }
+}];
+```
+
+## Advanced Usage
+
+### Extending with Custom Fragment Types
+
+The library uses a **base interface pattern** that allows you to create your own fragment types:
+
+```typescript
+import { RoutedFragmentBase } from '@cocoar/ui-routing';
+import { Type } from '@angular/core';
+
+// 1. Define your custom fragment type
+export interface DrawerRoutedFragment extends RoutedFragmentBase<DrawerConfig> {
+  type: 'drawer';
+  side: 'left' | 'right';
+  loadComponent: () => Type<unknown> | Promise<Type<unknown>>;
+}
+
+export interface DrawerConfig {
+  width: string;
+  backdrop?: boolean;
+}
+
+// 2. Create fragments
+const drawerFragments: DrawerRoutedFragment[] = [{
+  type: 'drawer',
+  path: 'filters',
+  side: 'left',
+  loadComponent: () => import('./filters-drawer.component'),
+  options: { width: '300px', backdrop: true }
+}];
+
+// 3. React to your custom type
+this.fragmentService.getParsedFragments('drawer').subscribe(drawers => {
+  drawers.forEach(async item => {
+    const component = await item.route.loadComponent();
+    // item.route is typed as DrawerRoutedFragment
+    this.drawerService.open(component, item.route.side, item.route.options);
+  });
+});
+```
+
+### Multiple Fragments
+
+```typescript
+// URL: /page#details/123#confirm
+// Opens both "details" component AND "confirm" component
+```
+
+### Query Parameters
+
+```typescript
+// Fragment: details/123?edit=true&tab=settings
+// Parsed params: { id: '123', edit: true, tab: 'settings' }
+```
+
+### Dynamic Parameters
+
+```typescript
+{
+  type: 'component',
+  path: 'user/:userId/order/:orderId',
+  loadComponent: () => OrderDetailsComponent
+}
+
+// Fragment: user/42/order/1337
+// Params: { userId: '42', orderId: '1337' }
+```
+
+## Accessibility Considerations
+
+⚠️ **Important:** Fragment changes do not automatically announce to screen readers. When opening components via fragments:
+
+1. Ensure proper ARIA attributes (`role`, `aria-labelledby`, `aria-describedby`)
+2. Trap focus within overlays
+3. Return focus to trigger element on close
+4. Consider announcing state changes with `aria-live` regions
+
+## Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- Requires Angular 21+ and Angular Router
+
+## License
+
+Apache-2.0
+
+## Contributing
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.
+

package/fesm2022/cocoar-ui-routing.mjs

@@ -0,0 +1,236 @@
+import { match } from 'path-to-regexp';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable } from '@angular/core';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { map, filter } from 'rxjs/operators';
+import { BehaviorSubject, merge, defer } from 'rxjs';
+
+/**
+ * Type-safe helper for creating route data configuration.
+ * Ensures TypeScript inference for route data objects.
+ *
+ * @param data - Route data object
+ * @returns The same object with proper typing
+ *
+ * @example
+ * ```typescript
+ * const routeData = createRouteData({
+ *   routedFragments: [...]
+ * });
+ * ```
+ */
+function createRouteData(data) {
+    return data;
+}
+
+/**
+ * Parses URL fragment into structured routes with parameters.
+ * Supports multiple fragments separated by '#' and query parameters.
+ *
+ * @param fragment - Raw URL fragment (e.g., "details/123?edit=true#confirm")
+ * @param registeredRoutes - Array of route configurations to match against
+ * @returns Array of parsed routes with extracted parameters
+ *
+ * @example
+ * ```typescript
+ * const routes = [
+ *   { type: 'component', path: 'details/:id', loadComponent: () => DetailsComponent }
+ * ];
+ * const parsed = parseFragment('details/123?edit=true', routes);
+ * // Result: [{ params: { id: '123', edit: true }, route: {...}, fragment: 'details/123?edit=true' }]
+ * ```
+ */
+function parseFragment(fragment, registeredRoutes) {
+    // Normalize routes: expand arrays into individual route entries
+    const normalizedRoutes = registeredRoutes.flatMap((route) => {
+        if (Array.isArray(route.path)) {
+            // Expand array paths into separate route objects
+            return route.path.map((p) => ({ ...route, path: p }));
+        }
+        return [route];
+    });
+    const routeGroups = fragment.split('#'); // Split on '#'
+    return routeGroups
+        .map((routeGroup) => {
+        const [routePath, queryParamsString] = routeGroup.split('?'); // Separate query params
+        const parsedParams = {};
+        // Find the registered route that matches the full routePath
+        const registeredRoute = normalizedRoutes.find((route) => {
+            const matcher = match(route.path, { decode: decodeURIComponent });
+            const matchResult = matcher(routePath);
+            return !!matchResult; // Return true if the route matches the full routePath
+        });
+        if (registeredRoute) {
+            const matcher = match(registeredRoute.path, { decode: decodeURIComponent });
+            const matchResult = matcher(routePath);
+            if (matchResult) {
+                Object.assign(parsedParams, matchResult.params); // Extract route params (like id, customer)
+            }
+            // Handle optional query parameters
+            if (queryParamsString) {
+                const queryParams = new URLSearchParams(queryParamsString);
+                queryParams.forEach((value, key) => {
+                    let parsedValue;
+                    // Try to parse as JSON (for booleans, numbers, etc.)
+                    try {
+                        parsedValue = JSON.parse(value);
+                    }
+                    catch {
+                        parsedValue = value; // Default to string if JSON parsing fails
+                    }
+                    parsedParams[key] = parsedValue;
+                });
+            }
+            // Return the matched route and its parameters
+            return { fragment: routeGroup, params: parsedParams, route: registeredRoute };
+        }
+        // Return null if no match is found (handled in filtering)
+        return null;
+    })
+        .filter((route) => route !== null); // Filter out null results and return empty array if nothing matches
+}
+
+/**
+ * Injection token for providing routed fragments configuration.
+ * Use this when you can't provide fragments via route data (e.g., in scenarios or tests).
+ *
+ * @example
+ * ```typescript
+ * providers: [
+ *   { provide: ROUTED_FRAGMENTS, useValue: [...fragments] }
+ * ]
+ * ```
+ */
+const ROUTED_FRAGMENTS = new InjectionToken('ROUTED_FRAGMENTS');
+
+/**
+ * Service that monitors Angular Router fragments and parses them into structured routes.
+ * Provides observables for reacting to fragment changes.
+ *
+ * Fragment configuration can be provided via:
+ * 1. ROUTED_FRAGMENTS injection token (preferred for scenarios/tests)
+ * 2. Route data with `routedFragments` property
+ *
+ * @example
+ * ```typescript
+ * // Via injection token:
+ * providers: [
+ *   RoutedFragmentService,
+ *   { provide: ROUTED_FRAGMENTS, useValue: fragments }
+ * ]
+ *
+ * // Via route data:
+ * {
+ *   path: 'page',
+ *   component: MyComponent,
+ *   data: { routedFragments: fragments }
+ * }
+ * ```
+ */
+class RoutedFragmentService {
+    router = inject(Router);
+    activatedRoute = inject(ActivatedRoute);
+    injectedFragments = inject(ROUTED_FRAGMENTS, { optional: true });
+    parsedFragments = new BehaviorSubject([]);
+    /**
+     * Get parsed fragments filtered by type.
+     * Emits whenever the fragment changes via router navigation.
+     *
+     * @param type - Fragment type to filter by ('component' | 'action' | your custom type)
+     * @returns Observable of parsed fragments matching the specified type
+     */
+    getParsedFragments(type) {
+        return this.parsedFragments.pipe(map((pf) => pf.filter((p) => p.route.type === type)));
+    }
+    getRoutedFragments = (routeSnapshot) => {
+        // Prefer injected fragments (for scenarios/tests), fall back to route data
+        if (this.injectedFragments && this.injectedFragments.length > 0) {
+            return this.injectedFragments;
+        }
+        return routeSnapshot.data?.routedFragments ?? [];
+    };
+    getCurrentRoute = (route) => {
+        while (route.firstChild) {
+            route = route.firstChild;
+        }
+        return route;
+    };
+    constructor() {
+        // Combine initial fragment state with navigation events
+        // Using merge ensures both initial load and subsequent navigations are handled
+        merge(
+        // Emit current state immediately
+        defer(() => {
+            const snapshot = this.getCurrentRoute(this.activatedRoute).snapshot;
+            return [{ fragment: snapshot.fragment, fragments: this.getRoutedFragments(snapshot) }];
+        }), 
+        // Watch for navigation events
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map(() => {
+            const snapshot = this.getCurrentRoute(this.activatedRoute).snapshot;
+            return { fragment: snapshot.fragment, fragments: this.getRoutedFragments(snapshot) };
+        }))).subscribe(({ fragment, fragments }) => {
+            if (fragments && fragments.length > 0) {
+                this.handleFragment(fragment ?? '', fragments);
+            }
+        });
+    }
+    async handleFragment(fragment, routedFragments) {
+        const parsedRoutes = parseFragment(fragment, routedFragments);
+        this.parsedFragments.next(parsedRoutes);
+    }
+    /**
+     * Remove a specific fragment part from the current URL.
+     * Useful for closing modals or clearing fragment state.
+     *
+     * @param part - Fragment path prefix to remove (e.g., 'details/123')
+     *
+     * @example
+     * ```typescript
+     * // URL: /page#details/123#confirm
+     * fragmentService.removeFragmentPart('details/123');
+     * // Result: /page#confirm
+     * ```
+     */
+    removeFragmentPart(part) {
+        const fragment = this.router.url.split('#')[1] || ''; // Get current fragment
+        const fragmentParts = fragment.split('#').map(fullyDecodeURIComponent); // Split multiple fragment parts
+        // Filter out the fragment part that matches the provided path
+        const updatedFragment = fragmentParts.filter((frag) => !frag.startsWith(part)).join('#');
+        const route = this.getCurrentRoute(this.activatedRoute);
+        // Use the router to navigate with the updated fragment
+        this.router.navigate([], {
+            relativeTo: route,
+            queryParams: route.snapshot.queryParams, // Preserve the current query parameters
+            fragment: updatedFragment || undefined, // If no fragment remains, set to undefined
+            replaceUrl: false, // Do not replace the current URL in the history
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RoutedFragmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RoutedFragmentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RoutedFragmentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+function fullyDecodeURIComponent(input) {
+    let prev = '';
+    let current = input;
+    try {
+        do {
+            prev = current;
+            current = decodeURIComponent(current);
+        } while (current !== prev);
+    }
+    catch {
+        // If decodeURIComponent fails (e.g., due to an incomplete %xx), abort
+        return prev;
+    }
+    return current;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ROUTED_FRAGMENTS, RoutedFragmentService, createRouteData, parseFragment };
+//# sourceMappingURL=cocoar-ui-routing.mjs.map

package/fesm2022/cocoar-ui-routing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cocoar-ui-routing.mjs","sources":["../../../../libs/ui-routing/src/lib/routed-fragments/create-route-data.ts","../../../../libs/ui-routing/src/lib/routed-fragments/fragment-parser.ts","../../../../libs/ui-routing/src/lib/routed-fragments/routed-fragment.ts","../../../../libs/ui-routing/src/lib/routed-fragments/routed-fragment.service.ts","../../../../libs/ui-routing/src/cocoar-ui-routing.ts"],"sourcesContent":["/**\n * Type-safe helper for creating route data configuration.\n * Ensures TypeScript inference for route data objects.\n *\n * @param data - Route data object\n * @returns The same object with proper typing\n *\n * @example\n * ```typescript\n * const routeData = createRouteData({\n *   routedFragments: [...]\n * });\n * ```\n */\nexport function createRouteData<T>(data: T): T {\n  return data;\n}\n","import { match } from 'path-to-regexp';\nimport { RoutedFragmentBase } from './routed-fragment';\n\n/**\n * Parsed fragment with extracted parameters and matched route.\n */\nexport interface ParsedRoute<T extends RoutedFragmentBase = RoutedFragmentBase> {\n  params: Record<string, unknown>;\n  route: T;\n  fragment: string;\n}\n\n/**\n * Parses URL fragment into structured routes with parameters.\n * Supports multiple fragments separated by '#' and query parameters.\n *\n * @param fragment - Raw URL fragment (e.g., \"details/123?edit=true#confirm\")\n * @param registeredRoutes - Array of route configurations to match against\n * @returns Array of parsed routes with extracted parameters\n *\n * @example\n * ```typescript\n * const routes = [\n *   { type: 'component', path: 'details/:id', loadComponent: () => DetailsComponent }\n * ];\n * const parsed = parseFragment('details/123?edit=true', routes);\n * // Result: [{ params: { id: '123', edit: true }, route: {...}, fragment: 'details/123?edit=true' }]\n * ```\n */\nexport function parseFragment<T extends RoutedFragmentBase>(\n  fragment: string,\n  registeredRoutes: T[]\n): ParsedRoute<T>[] {\n  // Normalize routes: expand arrays into individual route entries\n  const normalizedRoutes = registeredRoutes.flatMap((route) => {\n    if (Array.isArray(route.path)) {\n      // Expand array paths into separate route objects\n      return route.path.map((p) => ({ ...route, path: p }));\n    }\n    return [route];\n  });\n\n  const routeGroups = fragment.split('#'); // Split on '#'\n\n  return routeGroups\n    .map((routeGroup) => {\n      const [routePath, queryParamsString] = routeGroup.split('?'); // Separate query params\n      const parsedParams: Record<string, unknown> = {};\n\n      // Find the registered route that matches the full routePath\n      const registeredRoute = normalizedRoutes.find((route) => {\n        const matcher = match(route.path, { decode: decodeURIComponent });\n        const matchResult = matcher(routePath);\n        return !!matchResult; // Return true if the route matches the full routePath\n      });\n\n      if (registeredRoute) {\n        const matcher = match(registeredRoute.path, { decode: decodeURIComponent });\n        const matchResult = matcher(routePath);\n\n        if (matchResult) {\n          Object.assign(parsedParams, matchResult.params); // Extract route params (like id, customer)\n        }\n\n        // Handle optional query parameters\n        if (queryParamsString) {\n          const queryParams = new URLSearchParams(queryParamsString);\n          queryParams.forEach((value, key) => {\n            let parsedValue: unknown;\n\n            // Try to parse as JSON (for booleans, numbers, etc.)\n            try {\n              parsedValue = JSON.parse(value);\n            } catch {\n              parsedValue = value; // Default to string if JSON parsing fails\n            }\n\n            parsedParams[key] = parsedValue;\n          });\n        }\n\n        // Return the matched route and its parameters\n        return { fragment: routeGroup, params: parsedParams, route: registeredRoute };\n      }\n\n      // Return null if no match is found (handled in filtering)\n      return null;\n    })\n    .filter((route) => route !== null); // Filter out null results and return empty array if nothing matches\n}\n","import { InjectionToken, Type } from '@angular/core';\n\n/**\n * Base interface for all routed fragments.\n * Extend this interface to create custom fragment types in your application.\n *\n * @example\n * ```typescript\n * // In your app:\n * export interface DrawerRoutedFragment extends RoutedFragmentBase<DrawerConfig> {\n *   type: 'drawer';\n *   loadComponent: () => Type<unknown> | Promise<Type<unknown>>;\n * }\n * ```\n */\nexport interface RoutedFragmentBase<TOptions = unknown> {\n  type: string;\n  path: string | string[];\n  options?: TOptions;\n}\n\n/**\n * Route configuration interface for fragment-based routing.\n * Add this to Angular route data to enable fragment parsing.\n */\nexport interface IRoutedFragmentConfig<TFragment extends RoutedFragmentBase = RoutedFragmentBase> {\n  routedFragments: TFragment[];\n}\n\n/**\n * Injection token for providing routed fragments configuration.\n * Use this when you can't provide fragments via route data (e.g., in scenarios or tests).\n *\n * @example\n * ```typescript\n * providers: [\n *   { provide: ROUTED_FRAGMENTS, useValue: [...fragments] }\n * ]\n * ```\n */\nexport const ROUTED_FRAGMENTS = new InjectionToken<RoutedFragmentBase[]>('ROUTED_FRAGMENTS');\n\n/**\n * Component fragment that loads a lazy-loaded component.\n * Generic TOptions allows consumers to provide their own configuration type\n * (e.g., modal options, drawer options, dialog options, etc.).\n *\n * @example\n * ```typescript\n * // For modals:\n * const fragment: ComponentRoutedFragment<MyModalConfig> = {\n *   type: 'component',\n *   path: 'details/:id',\n *   loadComponent: () => import('./details.component'),\n *   options: { width: '800px', closeOnBackdrop: true }\n * };\n *\n * // For drawers:\n * const fragment: ComponentRoutedFragment<MyDrawerConfig> = {\n *   type: 'component',\n *   path: 'settings',\n *   loadComponent: () => import('./settings.component'),\n *   options: { position: 'right', width: '400px' }\n * };\n * ```\n */\nexport interface ComponentRoutedFragment<TOptions = unknown> extends RoutedFragmentBase<TOptions> {\n  type: 'component';\n  loadComponent: () => Type<unknown> | Promise<Type<unknown>>;\n}\n\n/**\n * Action fragment that executes a custom handler.\n * Useful for triggering side effects without UI components.\n *\n * @example\n * ```typescript\n * const fragment: ActionRoutedFragment = {\n *   type: 'action',\n *   path: 'logout',\n *   handler: (params) => authService.logout()\n * };\n * ```\n */\nexport interface ActionRoutedFragment extends RoutedFragmentBase<never> {\n  type: 'action';\n  handler: (params: Record<string, unknown>) => void;\n  options?: never; // Actions don't have options\n}\n","import { inject, Injectable } from '@angular/core';\nimport { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';\nimport { filter, map } from 'rxjs/operators';\nimport { BehaviorSubject, defer, merge } from 'rxjs';\n\nimport { ParsedRoute, parseFragment } from './fragment-parser';\nimport { IRoutedFragmentConfig, RoutedFragmentBase, ROUTED_FRAGMENTS } from './routed-fragment';\n\n/**\n * Service that monitors Angular Router fragments and parses them into structured routes.\n * Provides observables for reacting to fragment changes.\n *\n * Fragment configuration can be provided via:\n * 1. ROUTED_FRAGMENTS injection token (preferred for scenarios/tests)\n * 2. Route data with `routedFragments` property\n *\n * @example\n * ```typescript\n * // Via injection token:\n * providers: [\n *   RoutedFragmentService,\n *   { provide: ROUTED_FRAGMENTS, useValue: fragments }\n * ]\n *\n * // Via route data:\n * {\n *   path: 'page',\n *   component: MyComponent,\n *   data: { routedFragments: fragments }\n * }\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class RoutedFragmentService {\n  private router = inject(Router);\n  private activatedRoute = inject(ActivatedRoute);\n  private injectedFragments = inject(ROUTED_FRAGMENTS, { optional: true });\n\n  private parsedFragments = new BehaviorSubject<ParsedRoute[]>([]);\n\n  /**\n   * Get parsed fragments filtered by type.\n   * Emits whenever the fragment changes via router navigation.\n   *\n   * @param type - Fragment type to filter by ('component' | 'action' | your custom type)\n   * @returns Observable of parsed fragments matching the specified type\n   */\n  public getParsedFragments<T extends string>(type: T) {\n    return this.parsedFragments.pipe(\n      map((pf) =>\n        pf.filter((p): p is ParsedRoute<RoutedFragmentBase & { type: T }> => p.route.type === type)\n      )\n    );\n  }\n\n  private getRoutedFragments = (routeSnapshot: ActivatedRouteSnapshot) => {\n    // Prefer injected fragments (for scenarios/tests), fall back to route data\n    if (this.injectedFragments && this.injectedFragments.length > 0) {\n      return this.injectedFragments;\n    }\n\n    return (routeSnapshot.data as IRoutedFragmentConfig)?.routedFragments ?? [];\n  };\n\n  private getCurrentRoute = (route: ActivatedRoute): ActivatedRoute => {\n    while (route.firstChild) {\n      route = route.firstChild;\n    }\n    return route;\n  };\n\n  constructor() {\n    // Combine initial fragment state with navigation events\n    // Using merge ensures both initial load and subsequent navigations are handled\n    merge(\n      // Emit current state immediately\n      defer(() => {\n        const snapshot = this.getCurrentRoute(this.activatedRoute).snapshot;\n        return [{ fragment: snapshot.fragment, fragments: this.getRoutedFragments(snapshot) }];\n      }),\n      // Watch for navigation events\n      this.router.events.pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        map(() => {\n          const snapshot = this.getCurrentRoute(this.activatedRoute).snapshot;\n          return { fragment: snapshot.fragment, fragments: this.getRoutedFragments(snapshot) };\n        })\n      )\n    ).subscribe(({ fragment, fragments }) => {\n      if (fragments && fragments.length > 0) {\n        this.handleFragment(fragment ?? '', fragments);\n      }\n    });\n  }\n\n  private async handleFragment(fragment: string, routedFragments: RoutedFragmentBase[]) {\n    const parsedRoutes = parseFragment(fragment, routedFragments);\n    this.parsedFragments.next(parsedRoutes);\n  }\n\n  /**\n   * Remove a specific fragment part from the current URL.\n   * Useful for closing modals or clearing fragment state.\n   *\n   * @param part - Fragment path prefix to remove (e.g., 'details/123')\n   *\n   * @example\n   * ```typescript\n   * // URL: /page#details/123#confirm\n   * fragmentService.removeFragmentPart('details/123');\n   * // Result: /page#confirm\n   * ```\n   */\n  public removeFragmentPart(part: string) {\n    const fragment = this.router.url.split('#')[1] || ''; // Get current fragment\n    const fragmentParts = fragment.split('#').map(fullyDecodeURIComponent); // Split multiple fragment parts\n\n    // Filter out the fragment part that matches the provided path\n    const updatedFragment = fragmentParts.filter((frag) => !frag.startsWith(part)).join('#');\n\n    const route = this.getCurrentRoute(this.activatedRoute);\n\n    // Use the router to navigate with the updated fragment\n    this.router.navigate([], {\n      relativeTo: route,\n      queryParams: route.snapshot.queryParams, // Preserve the current query parameters\n      fragment: updatedFragment || undefined, // If no fragment remains, set to undefined\n      replaceUrl: false, // Do not replace the current URL in the history\n    });\n  }\n}\n\nfunction fullyDecodeURIComponent(input: string): string {\n  let prev = '';\n  let current = input;\n\n  try {\n    do {\n      prev = current;\n      current = decodeURIComponent(current);\n    } while (current !== prev);\n  } catch {\n    // If decodeURIComponent fails (e.g., due to an incomplete %xx), abort\n    return prev;\n  }\n\n  return current;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;AAaG;AACG,SAAU,eAAe,CAAI,IAAO,EAAA;AACxC,IAAA,OAAO,IAAI;AACb;;ACJA;;;;;;;;;;;;;;;;AAgBG;AACG,SAAU,aAAa,CAC3B,QAAgB,EAChB,gBAAqB,EAAA;;IAGrB,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;QAC1D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;;YAE7B,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;QACvD;QACA,OAAO,CAAC,KAAK,CAAC;AAChB,IAAA,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAExC,IAAA,OAAO;AACJ,SAAA,GAAG,CAAC,CAAC,UAAU,KAAI;AAClB,QAAA,MAAM,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC7D,MAAM,YAAY,GAA4B,EAAE;;QAGhD,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAI;AACtD,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC;AACjE,YAAA,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC;AACtC,YAAA,OAAO,CAAC,CAAC,WAAW,CAAC;AACvB,QAAA,CAAC,CAAC;QAEF,IAAI,eAAe,EAAE;AACnB,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC;AAC3E,YAAA,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC;YAEtC,IAAI,WAAW,EAAE;gBACf,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;YAClD;;YAGA,IAAI,iBAAiB,EAAE;AACrB,gBAAA,MAAM,WAAW,GAAG,IAAI,eAAe,CAAC,iBAAiB,CAAC;gBAC1D,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,KAAI;AACjC,oBAAA,IAAI,WAAoB;;AAGxB,oBAAA,IAAI;AACF,wBAAA,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;oBACjC;AAAE,oBAAA,MAAM;AACN,wBAAA,WAAW,GAAG,KAAK,CAAC;oBACtB;AAEA,oBAAA,YAAY,CAAC,GAAG,CAAC,GAAG,WAAW;AACjC,gBAAA,CAAC,CAAC;YACJ;;AAGA,YAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE;QAC/E;;AAGA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;AACA,SAAA,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC,CAAC;AACvC;;AC5DA;;;;;;;;;;AAUG;MACU,gBAAgB,GAAG,IAAI,cAAc,CAAuB,kBAAkB;;AChC3F;;;;;;;;;;;;;;;;;;;;;;;AAuBG;MAEU,qBAAqB,CAAA;AACxB,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;IACvC,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAEhE,IAAA,eAAe,GAAG,IAAI,eAAe,CAAgB,EAAE,CAAC;AAEhE;;;;;;AAMG;AACI,IAAA,kBAAkB,CAAmB,IAAO,EAAA;AACjD,QAAA,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,CAC9B,GAAG,CAAC,CAAC,EAAE,KACL,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,KAAyD,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAC5F,CACF;IACH;AAEQ,IAAA,kBAAkB,GAAG,CAAC,aAAqC,KAAI;;AAErE,QAAA,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/D,OAAO,IAAI,CAAC,iBAAiB;QAC/B;AAEA,QAAA,OAAQ,aAAa,CAAC,IAA8B,EAAE,eAAe,IAAI,EAAE;AAC7E,IAAA,CAAC;AAEO,IAAA,eAAe,GAAG,CAAC,KAAqB,KAAoB;AAClE,QAAA,OAAO,KAAK,CAAC,UAAU,EAAE;AACvB,YAAA,KAAK,GAAG,KAAK,CAAC,UAAU;QAC1B;AACA,QAAA,OAAO,KAAK;AACd,IAAA,CAAC;AAED,IAAA,WAAA,GAAA;;;QAGE,KAAK;;QAEH,KAAK,CAAC,MAAK;AACT,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,QAAQ;AACnE,YAAA,OAAO,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC;AACxF,QAAA,CAAC,CAAC;;QAEF,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CACrB,MAAM,CAAC,CAAC,KAAK,KAA6B,KAAK,YAAY,aAAa,CAAC,EACzE,GAAG,CAAC,MAAK;AACP,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,QAAQ;AACnE,YAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE;AACtF,QAAA,CAAC,CAAC,CACH,CACF,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;YACtC,IAAI,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;gBACrC,IAAI,CAAC,cAAc,CAAC,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC;YAChD;AACF,QAAA,CAAC,CAAC;IACJ;AAEQ,IAAA,MAAM,cAAc,CAAC,QAAgB,EAAE,eAAqC,EAAA;QAClF,MAAM,YAAY,GAAG,aAAa,CAAC,QAAQ,EAAE,eAAe,CAAC;AAC7D,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC;IACzC;AAEA;;;;;;;;;;;;AAYG;AACI,IAAA,kBAAkB,CAAC,IAAY,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AACrD,QAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;;QAGvE,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAExF,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC;;AAGvD,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE;AACvB,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW;AACvC,YAAA,QAAQ,EAAE,eAAe,IAAI,SAAS;YACtC,UAAU,EAAE,KAAK;AAClB,SAAA,CAAC;IACJ;uGAhGW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAArB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,cADR,MAAM,EAAA,CAAA;;2FACnB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;AAoGlC,SAAS,uBAAuB,CAAC,KAAa,EAAA;IAC5C,IAAI,IAAI,GAAG,EAAE;IACb,IAAI,OAAO,GAAG,KAAK;AAEnB,IAAA,IAAI;AACF,QAAA,GAAG;YACD,IAAI,GAAG,OAAO;AACd,YAAA,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC;AACvC,QAAA,CAAC,QAAQ,OAAO,KAAK,IAAI;IAC3B;AAAE,IAAA,MAAM;;AAEN,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,OAAO,OAAO;AAChB;;ACnJA;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@cocoar/ui-routing",
+  "version": "0.1.0-beta.155",
+  "description": "Fragment-based routing utilities for Angular applications",
+  "author": "Cocoar",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cocoar-dev/cocoar-ui.git",
+    "directory": "libs/ui-routing"
+  },
+  "bugs": {
+    "url": "https://github.com/cocoar-dev/cocoar-ui/issues"
+  },
+  "homepage": "https://github.com/cocoar-dev/cocoar-ui",
+  "keywords": [
+    "angular",
+    "routing",
+    "fragments",
+    "url-fragments",
+    "modal-routing",
+    "deep-linking",
+    "cocoar"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/core": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "path-to-regexp": "^8.3.0",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/cocoar-ui-routing.mjs",
+  "typings": "types/cocoar-ui-routing.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/cocoar-ui-routing.d.ts",
+      "default": "./fesm2022/cocoar-ui-routing.mjs"
+    }
+  }
+}

package/types/cocoar-ui-routing.d.ts

@@ -0,0 +1,194 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Type } from '@angular/core';
+import * as rxjs from 'rxjs';
+
+/**
+ * Type-safe helper for creating route data configuration.
+ * Ensures TypeScript inference for route data objects.
+ *
+ * @param data - Route data object
+ * @returns The same object with proper typing
+ *
+ * @example
+ * ```typescript
+ * const routeData = createRouteData({
+ *   routedFragments: [...]
+ * });
+ * ```
+ */
+declare function createRouteData<T>(data: T): T;
+
+/**
+ * Base interface for all routed fragments.
+ * Extend this interface to create custom fragment types in your application.
+ *
+ * @example
+ * ```typescript
+ * // In your app:
+ * export interface DrawerRoutedFragment extends RoutedFragmentBase<DrawerConfig> {
+ *   type: 'drawer';
+ *   loadComponent: () => Type<unknown> | Promise<Type<unknown>>;
+ * }
+ * ```
+ */
+interface RoutedFragmentBase<TOptions = unknown> {
+    type: string;
+    path: string | string[];
+    options?: TOptions;
+}
+/**
+ * Route configuration interface for fragment-based routing.
+ * Add this to Angular route data to enable fragment parsing.
+ */
+interface IRoutedFragmentConfig<TFragment extends RoutedFragmentBase = RoutedFragmentBase> {
+    routedFragments: TFragment[];
+}
+/**
+ * Injection token for providing routed fragments configuration.
+ * Use this when you can't provide fragments via route data (e.g., in scenarios or tests).
+ *
+ * @example
+ * ```typescript
+ * providers: [
+ *   { provide: ROUTED_FRAGMENTS, useValue: [...fragments] }
+ * ]
+ * ```
+ */
+declare const ROUTED_FRAGMENTS: InjectionToken<RoutedFragmentBase<unknown>[]>;
+/**
+ * Component fragment that loads a lazy-loaded component.
+ * Generic TOptions allows consumers to provide their own configuration type
+ * (e.g., modal options, drawer options, dialog options, etc.).
+ *
+ * @example
+ * ```typescript
+ * // For modals:
+ * const fragment: ComponentRoutedFragment<MyModalConfig> = {
+ *   type: 'component',
+ *   path: 'details/:id',
+ *   loadComponent: () => import('./details.component'),
+ *   options: { width: '800px', closeOnBackdrop: true }
+ * };
+ *
+ * // For drawers:
+ * const fragment: ComponentRoutedFragment<MyDrawerConfig> = {
+ *   type: 'component',
+ *   path: 'settings',
+ *   loadComponent: () => import('./settings.component'),
+ *   options: { position: 'right', width: '400px' }
+ * };
+ * ```
+ */
+interface ComponentRoutedFragment<TOptions = unknown> extends RoutedFragmentBase<TOptions> {
+    type: 'component';
+    loadComponent: () => Type<unknown> | Promise<Type<unknown>>;
+}
+/**
+ * Action fragment that executes a custom handler.
+ * Useful for triggering side effects without UI components.
+ *
+ * @example
+ * ```typescript
+ * const fragment: ActionRoutedFragment = {
+ *   type: 'action',
+ *   path: 'logout',
+ *   handler: (params) => authService.logout()
+ * };
+ * ```
+ */
+interface ActionRoutedFragment extends RoutedFragmentBase<never> {
+    type: 'action';
+    handler: (params: Record<string, unknown>) => void;
+    options?: never;
+}
+
+/**
+ * Parsed fragment with extracted parameters and matched route.
+ */
+interface ParsedRoute<T extends RoutedFragmentBase = RoutedFragmentBase> {
+    params: Record<string, unknown>;
+    route: T;
+    fragment: string;
+}
+/**
+ * Parses URL fragment into structured routes with parameters.
+ * Supports multiple fragments separated by '#' and query parameters.
+ *
+ * @param fragment - Raw URL fragment (e.g., "details/123?edit=true#confirm")
+ * @param registeredRoutes - Array of route configurations to match against
+ * @returns Array of parsed routes with extracted parameters
+ *
+ * @example
+ * ```typescript
+ * const routes = [
+ *   { type: 'component', path: 'details/:id', loadComponent: () => DetailsComponent }
+ * ];
+ * const parsed = parseFragment('details/123?edit=true', routes);
+ * // Result: [{ params: { id: '123', edit: true }, route: {...}, fragment: 'details/123?edit=true' }]
+ * ```
+ */
+declare function parseFragment<T extends RoutedFragmentBase>(fragment: string, registeredRoutes: T[]): ParsedRoute<T>[];
+
+/**
+ * Service that monitors Angular Router fragments and parses them into structured routes.
+ * Provides observables for reacting to fragment changes.
+ *
+ * Fragment configuration can be provided via:
+ * 1. ROUTED_FRAGMENTS injection token (preferred for scenarios/tests)
+ * 2. Route data with `routedFragments` property
+ *
+ * @example
+ * ```typescript
+ * // Via injection token:
+ * providers: [
+ *   RoutedFragmentService,
+ *   { provide: ROUTED_FRAGMENTS, useValue: fragments }
+ * ]
+ *
+ * // Via route data:
+ * {
+ *   path: 'page',
+ *   component: MyComponent,
+ *   data: { routedFragments: fragments }
+ * }
+ * ```
+ */
+declare class RoutedFragmentService {
+    private router;
+    private activatedRoute;
+    private injectedFragments;
+    private parsedFragments;
+    /**
+     * Get parsed fragments filtered by type.
+     * Emits whenever the fragment changes via router navigation.
+     *
+     * @param type - Fragment type to filter by ('component' | 'action' | your custom type)
+     * @returns Observable of parsed fragments matching the specified type
+     */
+    getParsedFragments<T extends string>(type: T): rxjs.Observable<ParsedRoute<RoutedFragmentBase<unknown> & {
+        type: T;
+    }>[]>;
+    private getRoutedFragments;
+    private getCurrentRoute;
+    constructor();
+    private handleFragment;
+    /**
+     * Remove a specific fragment part from the current URL.
+     * Useful for closing modals or clearing fragment state.
+     *
+     * @param part - Fragment path prefix to remove (e.g., 'details/123')
+     *
+     * @example
+     * ```typescript
+     * // URL: /page#details/123#confirm
+     * fragmentService.removeFragmentPart('details/123');
+     * // Result: /page#confirm
+     * ```
+     */
+    removeFragmentPart(part: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RoutedFragmentService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RoutedFragmentService>;
+}
+
+export { ROUTED_FRAGMENTS, RoutedFragmentService, createRouteData, parseFragment };
+export type { ActionRoutedFragment, ComponentRoutedFragment, IRoutedFragmentConfig, ParsedRoute, RoutedFragmentBase };