@theseam/ui-common 1.0.2-beta.16 → 1.0.2-beta.17

package/fesm2022/theseam-ui-common-framework.mjs

@@ -25,7 +25,7 @@ import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 import { TheSeamDynamicComponentLoader } from '@theseam/ui-common/dynamic-component-loader';
 import { trigger, state, transition, style, animate, group, query, animateChild, keyframes } from '@angular/animations';
 import * as i1$2 from '@angular/router';
-import { RouterModule, NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { RouterModule, NavigationEnd, NavigationStart, Router, ActivatedRoute, RouterOutlet } from '@angular/router';
 import * as i4 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i5 from '@theseam/ui-common/tooltip';
@@ -4138,9 +4138,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+function computeDirection(prev, next) {
+    let shared = 0;
+    while (shared < prev.length &&
+        shared < next.length &&
+        prev[shared] === next[shared]) {
+        shared++;
+    }
+    const prevRemaining = prev.length - shared;
+    const nextRemaining = next.length - shared;
+    if (prevRemaining === 0 && nextRemaining > 0)
+        return 'deeper';
+    if (prevRemaining > 0 && nextRemaining === 0)
+        return 'shallower';
+    return 'sibling';
+}
+
+function getUrlSegments(snapshot) {
+    const segments = [];
+    let current = snapshot;
+    while (current) {
+        for (const seg of current.url) {
+            if (seg.path) {
+                segments.push(seg.path);
+            }
+        }
+        current = current.firstChild;
+    }
+    return segments;
+}
+
+function seamRouteTransition() {
+    let isFirst = true;
+    return (info) => {
+        // Skip the first navigation (typically a redirect from / to /dashboard).
+        // No animation on initial page load.
+        if (isFirst) {
+            isFirst = false;
+            return;
+        }
+        const prevSegments = getUrlSegments(info.from);
+        const nextSegments = getUrlSegments(info.to);
+        const direction = computeDirection(prevSegments, nextSegments);
+        document.documentElement.dataset['routeDirection'] = direction;
+    };
+}
+
+/**
+ * A reusable shell component that wraps a `<router-outlet>` with automatic
+ * directional slide transitions powered by the View Transition API.
+ *
+ * Use this as a parent route component in place of custom "Base" components.
+ * It eliminates the need for per-module animation boilerplate and
+ * `routeTransitionId` route data.
+ *
+ * ### Setup (one-time per app)
+ *
+ * 1. Register the transition callback in your router config:
+ *    ```typescript
+ *    import { seamRouteTransition } from '@theseam/ui-common'
+ *
+ *    provideRouter(
+ *      routes,
+ *      withViewTransitions({ onViewTransitionCreated: seamRouteTransition() })
+ *    )
+ *    ```
+ *
+ * 2. Import the transition stylesheet in your global styles:
+ *    ```scss
+ *    @import '@theseam/ui-common/framework/route-transitions/route-transitions';
+ *    ```
+ *
+ * ### Usage in route configs
+ *
+ * ```typescript
+ * import { SeamRouteShellComponent } from '@theseam/ui-common'
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: '',
+ *     component: SeamRouteShellComponent,
+ *     children: [
+ *       { path: '', component: ClaimsTableComponent },
+ *       { path: ':id', component: ClaimDetailComponent },
+ *     ],
+ *   },
+ * ]
+ * ```
+ *
+ * ### Transition behavior
+ *
+ * Direction is determined automatically by comparing route URL segments:
+ * - **Sibling** — same parent, different child: current slides right, new slides left.
+ * - **Deeper** — navigating to a child route: both slide left.
+ * - **Shallower** — navigating to a parent route: both slide right.
+ * - **Cross-branch** — different sections entirely: treated as sibling of the
+ *   deepest shared ancestor.
+ *
+ * ### Customization
+ *
+ * Override CSS custom properties to adjust timing:
+ * ```css
+ * :root {
+ *   --seam-route-transition-duration: 300ms;
+ *   --seam-route-transition-easing: ease-out;
+ * }
+ * ```
+ *
+ * Transitions are automatically disabled when the user has
+ * `prefers-reduced-motion: reduce` enabled.
+ *
+ * ### Nesting
+ *
+ * Multiple `SeamRouteShellComponent` instances can be nested at different
+ * route depths. Each instance receives a unique `view-transition-name`
+ * based on its depth in the route tree to avoid conflicts.
+ */
+class SeamRouteShellComponent {
+    route = inject(ActivatedRoute);
+    /** Unique view-transition-name based on route depth to avoid duplicates when nested. */
+    transitionName = `seam-route-content-${this.getRouteDepth()}`;
+    getRouteDepth() {
+        let depth = 0;
+        let current = this.route.snapshot;
+        while (current.parent) {
+            depth++;
+            current = current.parent;
+        }
+        return depth;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeamRouteShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SeamRouteShellComponent, isStandalone: true, selector: "seam-route-shell", host: { properties: { "style.view-transition-name": "transitionName", "style.display": "\"flex\"", "style.flex-direction": "\"column\"", "style.height": "\"100%\"" } }, ngImport: i0, template: `<router-outlet></router-outlet>`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeamRouteShellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'seam-route-shell',
+                    template: `<router-outlet></router-outlet>`,
+                    host: {
+                        '[style.view-transition-name]': 'transitionName',
+                        '[style.display]': '"flex"',
+                        '[style.flex-direction]': '"column"',
+                        '[style.height]': '"100%"',
+                    },
+                    imports: [RouterOutlet],
+                    standalone: true,
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, DEFAULT_SIDE_NAV_CONFIG, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, HorizontalNavComponent, NavItemComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SCHEMA_FRAMEWORK_OVERRIDES, THESEAM_SIDE_NAV_ACCESSOR, THESEAM_SIDE_NAV_CONFIG, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamBaseLayoutNavToggleDirective, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, applyItemConfig, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, extendFramework, fader, findHorizontalNavLinkItems, findLinkItems, getHorizontalNavItemStateProp, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemFocused, isHorizontalNavItemType, isNavItemActive, isNavItemType, routeChanges, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, DEFAULT_SIDE_NAV_CONFIG, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, HorizontalNavComponent, NavItemComponent, SeamRouteShellComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SCHEMA_FRAMEWORK_OVERRIDES, THESEAM_SIDE_NAV_ACCESSOR, THESEAM_SIDE_NAV_CONFIG, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamBaseLayoutNavToggleDirective, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, applyItemConfig, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, computeDirection, extendFramework, fader, findHorizontalNavLinkItems, findLinkItems, getHorizontalNavItemStateProp, getItemStateProp, getUrlSegments, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemFocused, isHorizontalNavItemType, isNavItemActive, isNavItemType, routeChanges, seamRouteTransition, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
 //# sourceMappingURL=theseam-ui-common-framework.mjs.map