@theseam/ui-common 1.0.2-beta.16 → 1.0.2-beta.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/framework/index.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ import { TheSeamElementResizedEvent } from '@theseam/ui-common/shared';
|
|
|
12
12
|
import { SeamIcon } from '@theseam/ui-common/icon';
|
|
13
13
|
import { ThemeTypes } from '@theseam/ui-common/models';
|
|
14
14
|
import * as i3 from '@angular/router';
|
|
15
|
-
import { UrlCreationOptions, IsActiveMatchOptions, Router, ActivatedRoute, RouterOutlet, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
|
|
15
|
+
import { UrlCreationOptions, IsActiveMatchOptions, Router, ActivatedRoute, RouterOutlet, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, ViewTransitionInfo } from '@angular/router';
|
|
16
16
|
import { MenuComponent } from '@theseam/ui-common/menu';
|
|
17
17
|
import * as _angular_animations from '@angular/animations';
|
|
18
18
|
import * as i2 from '@angular/common';
|
|
@@ -1368,5 +1368,91 @@ declare function getHorizontalNavItemStateProp<K extends keyof INavItemState>(it
|
|
|
1368
1368
|
declare function setDefaultHorizontalNavItemState(item: INavItem): INavItem & Required<NavItemCanHaveState>;
|
|
1369
1369
|
declare function areSameHorizontalNavItem(item1: INavItem | undefined, item2: INavItem | undefined): boolean;
|
|
1370
1370
|
|
|
1371
|
-
|
|
1372
|
-
|
|
1371
|
+
type RouteDirection = 'sibling' | 'deeper' | 'shallower';
|
|
1372
|
+
declare function computeDirection(prev: string[], next: string[]): RouteDirection;
|
|
1373
|
+
|
|
1374
|
+
declare function getUrlSegments(snapshot: ActivatedRouteSnapshot): string[];
|
|
1375
|
+
|
|
1376
|
+
declare function seamRouteTransition(): (info: ViewTransitionInfo) => void;
|
|
1377
|
+
|
|
1378
|
+
/**
|
|
1379
|
+
* A reusable shell component that wraps a `<router-outlet>` with automatic
|
|
1380
|
+
* directional slide transitions powered by the View Transition API.
|
|
1381
|
+
*
|
|
1382
|
+
* Use this as a parent route component in place of custom "Base" components.
|
|
1383
|
+
* It eliminates the need for per-module animation boilerplate and
|
|
1384
|
+
* `routeTransitionId` route data.
|
|
1385
|
+
*
|
|
1386
|
+
* ### Setup (one-time per app)
|
|
1387
|
+
*
|
|
1388
|
+
* 1. Register the transition callback in your router config:
|
|
1389
|
+
* ```typescript
|
|
1390
|
+
* import { seamRouteTransition } from '@theseam/ui-common'
|
|
1391
|
+
*
|
|
1392
|
+
* provideRouter(
|
|
1393
|
+
* routes,
|
|
1394
|
+
* withViewTransitions({ onViewTransitionCreated: seamRouteTransition() })
|
|
1395
|
+
* )
|
|
1396
|
+
* ```
|
|
1397
|
+
*
|
|
1398
|
+
* 2. Import the transition stylesheet in your global styles:
|
|
1399
|
+
* ```scss
|
|
1400
|
+
* @import '@theseam/ui-common/framework/route-transitions/route-transitions';
|
|
1401
|
+
* ```
|
|
1402
|
+
*
|
|
1403
|
+
* ### Usage in route configs
|
|
1404
|
+
*
|
|
1405
|
+
* ```typescript
|
|
1406
|
+
* import { SeamRouteShellComponent } from '@theseam/ui-common'
|
|
1407
|
+
*
|
|
1408
|
+
* const routes: Routes = [
|
|
1409
|
+
* {
|
|
1410
|
+
* path: '',
|
|
1411
|
+
* component: SeamRouteShellComponent,
|
|
1412
|
+
* children: [
|
|
1413
|
+
* { path: '', component: ClaimsTableComponent },
|
|
1414
|
+
* { path: ':id', component: ClaimDetailComponent },
|
|
1415
|
+
* ],
|
|
1416
|
+
* },
|
|
1417
|
+
* ]
|
|
1418
|
+
* ```
|
|
1419
|
+
*
|
|
1420
|
+
* ### Transition behavior
|
|
1421
|
+
*
|
|
1422
|
+
* Direction is determined automatically by comparing route URL segments:
|
|
1423
|
+
* - **Sibling** — same parent, different child: current slides right, new slides left.
|
|
1424
|
+
* - **Deeper** — navigating to a child route: both slide left.
|
|
1425
|
+
* - **Shallower** — navigating to a parent route: both slide right.
|
|
1426
|
+
* - **Cross-branch** — different sections entirely: treated as sibling of the
|
|
1427
|
+
* deepest shared ancestor.
|
|
1428
|
+
*
|
|
1429
|
+
* ### Customization
|
|
1430
|
+
*
|
|
1431
|
+
* Override CSS custom properties to adjust timing:
|
|
1432
|
+
* ```css
|
|
1433
|
+
* :root {
|
|
1434
|
+
* --seam-route-transition-duration: 300ms;
|
|
1435
|
+
* --seam-route-transition-easing: ease-out;
|
|
1436
|
+
* }
|
|
1437
|
+
* ```
|
|
1438
|
+
*
|
|
1439
|
+
* Transitions are automatically disabled when the user has
|
|
1440
|
+
* `prefers-reduced-motion: reduce` enabled.
|
|
1441
|
+
*
|
|
1442
|
+
* ### Nesting
|
|
1443
|
+
*
|
|
1444
|
+
* Multiple `SeamRouteShellComponent` instances can be nested at different
|
|
1445
|
+
* route depths. Each instance receives a unique `view-transition-name`
|
|
1446
|
+
* based on its depth in the route tree to avoid conflicts.
|
|
1447
|
+
*/
|
|
1448
|
+
declare class SeamRouteShellComponent {
|
|
1449
|
+
private readonly route;
|
|
1450
|
+
/** Unique view-transition-name based on route depth to avoid duplicates when nested. */
|
|
1451
|
+
protected readonly transitionName: string;
|
|
1452
|
+
private getRouteDepth;
|
|
1453
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SeamRouteShellComponent, never>;
|
|
1454
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SeamRouteShellComponent, "seam-route-shell", never, {}, {}, never, never, true, never>;
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
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 };
|
|
1458
|
+
export type { IDashboardWidgetItemLayout, IDashboardWidgetItemLayoutPreference, IDashboardWidgetsColumnRecord, IDashboardWidgetsItem, IDashboardWidgetsItemDef, IDashboardWidgetsItemSerialized, IDashboardWidgetsPreferences, IDashboardWidgetsPreferencesMapRecord, IDynamicRouteDef, INavBadge, INavBasic, INavButton, INavDivider, INavItem, INavItemBase, INavItemState, INavLink, INavTitle, ISideNavBadge, ISideNavBasic, ISideNavButton, ISideNavDivider, ISideNavItem, ISideNavItemBase, ISideNavItemState, ISideNavLink, ISideNavTitle, ITheSeamDashboardWidgetsPreferencesAccessor, NavItemBadgeTooltip, NavItemCanHaveChildren, NavItemCanHaveState, NavItemChildAction, NavItemExpandAction, NavItemExpandedEvent, NavItemStateChanged, RouteDirection, SideNavAccessor, SideNavConfig, SideNavItemBadgeTooltip, SideNavItemCanBeActive, SideNavItemCanHaveChildren, SideNavItemCanHaveState, SideNavItemMenuItemTooltipBehavior, SideNavItemMenuItemTooltipConfig, SideNavItemStateChanged, TheSeamBaseLayoutAction, TheSeamBaseLayoutActionBase, TheSeamBaseLayoutActionButton, TheSeamBaseLayoutActionHref, TheSeamBaseLayoutActionRouterLink, TheSeamBaseLayoutActionTemplate, TheSeamBaseLayoutNav, TheSeamBaseLayoutRef, TheSeamSchemaFormControlWidget, TheSeamSchemaFormFrameworkOverrides, TheSeamSchemaFormWidget, TheSeamSchemaFormWidgetLayoutNodeOptions, TopBarPosition };
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--seam-route-transition-duration: 400ms;
|
|
3
|
+
--seam-route-transition-easing: ease-in-out;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/* Keyframes */
|
|
7
|
+
@keyframes seam-slide-in-left {
|
|
8
|
+
from { transform: translateX(100%); }
|
|
9
|
+
to { transform: translateX(0); }
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@keyframes seam-slide-in-right {
|
|
13
|
+
from { transform: translateX(-100%); }
|
|
14
|
+
to { transform: translateX(0); }
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes seam-slide-out-left {
|
|
18
|
+
from { transform: translateX(0); }
|
|
19
|
+
to { transform: translateX(-100%); }
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@keyframes seam-slide-out-right {
|
|
23
|
+
from { transform: translateX(0); }
|
|
24
|
+
to { transform: translateX(100%); }
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/*
|
|
28
|
+
* Suppress the default root transition so only the shell content area
|
|
29
|
+
* animates (not the entire page including sidebar/header).
|
|
30
|
+
*/
|
|
31
|
+
html[data-route-direction]::view-transition-old(root),
|
|
32
|
+
html[data-route-direction]::view-transition-new(root) {
|
|
33
|
+
animation: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/*
|
|
37
|
+
* Clip slide animations to the bounds of the original element so
|
|
38
|
+
* content doesn't overflow into the sidebar/header area. The
|
|
39
|
+
* view-transition-group exists in an overlay layer outside the
|
|
40
|
+
* normal DOM, so the parent container's overflow: hidden has no effect.
|
|
41
|
+
*/
|
|
42
|
+
::view-transition-group(seam-route-content-0),
|
|
43
|
+
::view-transition-group(seam-route-content-1),
|
|
44
|
+
::view-transition-group(seam-route-content-2),
|
|
45
|
+
::view-transition-group(seam-route-content-3),
|
|
46
|
+
::view-transition-group(seam-route-content-4),
|
|
47
|
+
::view-transition-group(seam-route-content-5) {
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/*
|
|
52
|
+
* Override the browser's default mix-blend-mode: plus-lighter on the
|
|
53
|
+
* image pair, which causes flicker/ghosting artifacts with slide
|
|
54
|
+
* animations (as opposed to the default cross-fade).
|
|
55
|
+
*/
|
|
56
|
+
::view-transition-image-pair(seam-route-content-0),
|
|
57
|
+
::view-transition-image-pair(seam-route-content-1),
|
|
58
|
+
::view-transition-image-pair(seam-route-content-2),
|
|
59
|
+
::view-transition-image-pair(seam-route-content-3),
|
|
60
|
+
::view-transition-image-pair(seam-route-content-4),
|
|
61
|
+
::view-transition-image-pair(seam-route-content-5) {
|
|
62
|
+
isolation: auto;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/*
|
|
66
|
+
* Ensure the leaving element stays behind the entering element
|
|
67
|
+
* during slide transitions to prevent the old content from
|
|
68
|
+
* flashing on top at the end of the animation.
|
|
69
|
+
*/
|
|
70
|
+
::view-transition-old(seam-route-content-0),
|
|
71
|
+
::view-transition-old(seam-route-content-1),
|
|
72
|
+
::view-transition-old(seam-route-content-2),
|
|
73
|
+
::view-transition-old(seam-route-content-3),
|
|
74
|
+
::view-transition-old(seam-route-content-4),
|
|
75
|
+
::view-transition-old(seam-route-content-5) {
|
|
76
|
+
z-index: 1;
|
|
77
|
+
}
|
|
78
|
+
::view-transition-new(seam-route-content-0),
|
|
79
|
+
::view-transition-new(seam-route-content-1),
|
|
80
|
+
::view-transition-new(seam-route-content-2),
|
|
81
|
+
::view-transition-new(seam-route-content-3),
|
|
82
|
+
::view-transition-new(seam-route-content-4),
|
|
83
|
+
::view-transition-new(seam-route-content-5) {
|
|
84
|
+
z-index: 2;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/*
|
|
88
|
+
* Each SeamRouteShellComponent gets a unique view-transition-name based on
|
|
89
|
+
* its route depth (seam-route-content-0, seam-route-content-1, etc.).
|
|
90
|
+
* Target depths 0-5 to cover any realistic nesting.
|
|
91
|
+
*
|
|
92
|
+
* View transition pseudo-elements are pseudo-elements of the document element,
|
|
93
|
+
* NOT descendants — no space between the attribute selector and pseudo-element.
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
/* Sibling swap: current slides right, new slides left */
|
|
97
|
+
html[data-route-direction="sibling"]::view-transition-old(seam-route-content-0),
|
|
98
|
+
html[data-route-direction="sibling"]::view-transition-old(seam-route-content-1),
|
|
99
|
+
html[data-route-direction="sibling"]::view-transition-old(seam-route-content-2),
|
|
100
|
+
html[data-route-direction="sibling"]::view-transition-old(seam-route-content-3),
|
|
101
|
+
html[data-route-direction="sibling"]::view-transition-old(seam-route-content-4),
|
|
102
|
+
html[data-route-direction="sibling"]::view-transition-old(seam-route-content-5) {
|
|
103
|
+
animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-out-right;
|
|
104
|
+
}
|
|
105
|
+
html[data-route-direction="sibling"]::view-transition-new(seam-route-content-0),
|
|
106
|
+
html[data-route-direction="sibling"]::view-transition-new(seam-route-content-1),
|
|
107
|
+
html[data-route-direction="sibling"]::view-transition-new(seam-route-content-2),
|
|
108
|
+
html[data-route-direction="sibling"]::view-transition-new(seam-route-content-3),
|
|
109
|
+
html[data-route-direction="sibling"]::view-transition-new(seam-route-content-4),
|
|
110
|
+
html[data-route-direction="sibling"]::view-transition-new(seam-route-content-5) {
|
|
111
|
+
animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-in-left;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Deeper: both slide left */
|
|
115
|
+
html[data-route-direction="deeper"]::view-transition-old(seam-route-content-0),
|
|
116
|
+
html[data-route-direction="deeper"]::view-transition-old(seam-route-content-1),
|
|
117
|
+
html[data-route-direction="deeper"]::view-transition-old(seam-route-content-2),
|
|
118
|
+
html[data-route-direction="deeper"]::view-transition-old(seam-route-content-3),
|
|
119
|
+
html[data-route-direction="deeper"]::view-transition-old(seam-route-content-4),
|
|
120
|
+
html[data-route-direction="deeper"]::view-transition-old(seam-route-content-5) {
|
|
121
|
+
animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-out-left;
|
|
122
|
+
}
|
|
123
|
+
html[data-route-direction="deeper"]::view-transition-new(seam-route-content-0),
|
|
124
|
+
html[data-route-direction="deeper"]::view-transition-new(seam-route-content-1),
|
|
125
|
+
html[data-route-direction="deeper"]::view-transition-new(seam-route-content-2),
|
|
126
|
+
html[data-route-direction="deeper"]::view-transition-new(seam-route-content-3),
|
|
127
|
+
html[data-route-direction="deeper"]::view-transition-new(seam-route-content-4),
|
|
128
|
+
html[data-route-direction="deeper"]::view-transition-new(seam-route-content-5) {
|
|
129
|
+
animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-in-left;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Shallower: both slide right */
|
|
133
|
+
html[data-route-direction="shallower"]::view-transition-old(seam-route-content-0),
|
|
134
|
+
html[data-route-direction="shallower"]::view-transition-old(seam-route-content-1),
|
|
135
|
+
html[data-route-direction="shallower"]::view-transition-old(seam-route-content-2),
|
|
136
|
+
html[data-route-direction="shallower"]::view-transition-old(seam-route-content-3),
|
|
137
|
+
html[data-route-direction="shallower"]::view-transition-old(seam-route-content-4),
|
|
138
|
+
html[data-route-direction="shallower"]::view-transition-old(seam-route-content-5) {
|
|
139
|
+
animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-out-right;
|
|
140
|
+
}
|
|
141
|
+
html[data-route-direction="shallower"]::view-transition-new(seam-route-content-0),
|
|
142
|
+
html[data-route-direction="shallower"]::view-transition-new(seam-route-content-1),
|
|
143
|
+
html[data-route-direction="shallower"]::view-transition-new(seam-route-content-2),
|
|
144
|
+
html[data-route-direction="shallower"]::view-transition-new(seam-route-content-3),
|
|
145
|
+
html[data-route-direction="shallower"]::view-transition-new(seam-route-content-4),
|
|
146
|
+
html[data-route-direction="shallower"]::view-transition-new(seam-route-content-5) {
|
|
147
|
+
animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-in-right;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Reduced motion: disable all route transition animations */
|
|
151
|
+
@media (prefers-reduced-motion: reduce) {
|
|
152
|
+
::view-transition-old(seam-route-content-0),
|
|
153
|
+
::view-transition-new(seam-route-content-0),
|
|
154
|
+
::view-transition-old(seam-route-content-1),
|
|
155
|
+
::view-transition-new(seam-route-content-1),
|
|
156
|
+
::view-transition-old(seam-route-content-2),
|
|
157
|
+
::view-transition-new(seam-route-content-2),
|
|
158
|
+
::view-transition-old(seam-route-content-3),
|
|
159
|
+
::view-transition-new(seam-route-content-3),
|
|
160
|
+
::view-transition-old(seam-route-content-4),
|
|
161
|
+
::view-transition-new(seam-route-content-4),
|
|
162
|
+
::view-transition-old(seam-route-content-5),
|
|
163
|
+
::view-transition-new(seam-route-content-5) {
|
|
164
|
+
animation-duration: 0s !important;
|
|
165
|
+
}
|
|
166
|
+
}
|