@vectoriox/iox-ui 4.5.1 → 4.6.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -2341,8 +2341,18 @@ function dataSourcePlanToRequest(plan, endpoints) {
  */
 /** Perspective (px) applied to the transition container unless a preset overrides it. */
 const DEFAULT_PAGE_TRANSITION_PERSPECTIVE = 1200;
-/** Default transition duration (ms) when the page does not specify one. */
-const DEFAULT_PAGE_TRANSITION_DURATION = 600;
+/**
+ * Default transition duration (ms). Deliberately long — a slow, settled transition is most of what
+ * makes a page change read as "premium"; the same motion at ~400ms feels like a snap.
+ */
+const DEFAULT_PAGE_TRANSITION_DURATION = 1500;
+/**
+ * Default easing: a strong symmetric in-out. Paired with the long duration this is the "smoothness"
+ * — slow to leave, quick through the middle, gentle to settle.
+ */
+const DEFAULT_PAGE_TRANSITION_EASING = 'cubic-bezier(0.76, 0, 0.24, 1)';
+/** Default preset used when a page has no transition configured at all. */
+const DEFAULT_PAGE_TRANSITION = 'parallax-up';
 // ── Keyframe helpers ────────────────────────────────────────────────────────
 const FADE_OUT = [{ opacity: 1 }, { opacity: 0 }];
 const FADE_IN = [{ opacity: 0 }, { opacity: 1 }];
@@ -2350,6 +2360,46 @@ const move = (from, to) => [{ transform: from }, { transform: to }];
 // ── The preset catalog ──────────────────────────────────────────────────────
 // Keyed by a stable preset id persisted in pageSettings.routeAnimation.transition.
 const PAGE_TRANSITION_PRESETS = {
+    // ── Parallax (the default family) ──────────────────────────────────────────
+    // The outgoing page travels only HALF the distance while shrinking and dimming, so it recedes
+    // *behind* the incoming page rather than sliding away. That travel difference (50% vs 100%) is
+    // what reads as depth — there is no 3D here at all. Pair with the long default duration.
+    'parallax-up': {
+        category: 'parallax', label: 'Parallax up (recommended)',
+        outKeyframes: [
+            { transform: 'translateY(0) scale(1)', opacity: 1 },
+            { transform: 'translateY(-50%) scale(0.8)', opacity: 0.4 },
+        ],
+        inKeyframes: move('translateY(100%)', 'translateY(0)'),
+        ontop: 'in',
+    },
+    'parallax-down': {
+        category: 'parallax', label: 'Parallax down',
+        outKeyframes: [
+            { transform: 'translateY(0) scale(1)', opacity: 1 },
+            { transform: 'translateY(50%) scale(0.8)', opacity: 0.4 },
+        ],
+        inKeyframes: move('translateY(-100%)', 'translateY(0)'),
+        ontop: 'in',
+    },
+    'parallax-left': {
+        category: 'parallax', label: 'Parallax left',
+        outKeyframes: [
+            { transform: 'translateX(0) scale(1)', opacity: 1 },
+            { transform: 'translateX(-50%) scale(0.8)', opacity: 0.4 },
+        ],
+        inKeyframes: move('translateX(100%)', 'translateX(0)'),
+        ontop: 'in',
+    },
+    'parallax-right': {
+        category: 'parallax', label: 'Parallax right',
+        outKeyframes: [
+            { transform: 'translateX(0) scale(1)', opacity: 1 },
+            { transform: 'translateX(50%) scale(0.8)', opacity: 0.4 },
+        ],
+        inKeyframes: move('translateX(-100%)', 'translateX(0)'),
+        ontop: 'in',
+    },
     // ── Move (both pages slide; no fade — the classic Codrops "move") ──────────
     'move-left': {
         category: 'move', label: 'Move left / from right',
@@ -2472,6 +2522,7 @@ const PAGE_TRANSITION_PRESETS = {
 /** Built from PAGE_TRANSITION_PRESETS so the two lists can never drift apart. */
 const PAGE_TRANSITION_CATEGORIES = (() => {
     const order = [
+        { value: 'parallax', label: 'Smooth (parallax)' },
         { value: 'move', label: 'Move' },
         { value: 'fade', label: 'Fade' },
         { value: 'scale', label: 'Scale' },
@@ -2484,6 +2535,11 @@ const PAGE_TRANSITION_CATEGORIES = (() => {
             .map(([value, p]) => ({ value, label: p.label })),
     }));
 })();
+/** Coerce a possibly-string / invalid numeric setting to a usable finite, non-negative number. */
+function toFiniteNumber(value, fallback) {
+    const n = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(n) && n >= 0 ? n : fallback;
+}
 /**
  * Resolve a persisted preset id + timing into the two WAAPI animations the consumer runs.
  * Returns `null` for unknown / 'none' presets (caller should skip the transition).
@@ -2494,9 +2550,13 @@ function resolvePageTransition(name, opts = {}) {
     const preset = PAGE_TRANSITION_PRESETS[name];
     if (!preset)
         return null;
-    const duration = opts.duration ?? DEFAULT_PAGE_TRANSITION_DURATION;
-    const easing = opts.easing ?? 'ease';
-    const perspective = preset.perspective ?? opts.perspective ?? DEFAULT_PAGE_TRANSITION_PERSPECTIVE;
+    // Builder numeric inputs persist as STRINGS (e.g. duration:"413"), and WAAPI throws on a
+    // non-numeric `duration` — which silently kills the whole transition. Coerce defensively here,
+    // the single point where these values become animation options, so every consumer is protected
+    // and already-saved string data keeps working.
+    const duration = toFiniteNumber(opts.duration, DEFAULT_PAGE_TRANSITION_DURATION);
+    const easing = opts.easing || DEFAULT_PAGE_TRANSITION_EASING;
+    const perspective = toFiniteNumber(preset.perspective ?? opts.perspective, DEFAULT_PAGE_TRANSITION_PERSPECTIVE);
     const clampRatio = (r) => Math.max(0, Math.min(1, r ?? 0));
     const outDelay = clampRatio(preset.outDelayRatio) * duration;
     const inDelay = clampRatio(preset.inDelayRatio) * duration;
@@ -2549,7 +2609,8 @@ function legacyEnterToTransition(enter) {
         case 'blurIn': return 'fade';
         case 'flip': return 'flip';
         case 'fade': return 'fade';
-        default: return 'fade';
+        // Never configured (or an unrecognised value) → the default parallax transition.
+        default: return DEFAULT_PAGE_TRANSITION;
     }
 }
 /**
@@ -2558,7 +2619,7 @@ function legacyEnterToTransition(enter) {
  */
 function effectiveTransitionId(anim) {
     if (!anim)
-        return 'fade';
+        return DEFAULT_PAGE_TRANSITION;
     if (anim.transition)
         return anim.transition;
     return legacyEnterToTransition(anim.enter);
@@ -2572,5 +2633,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CardComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, ENVIRONMENT, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, SectionComponent, TextBlockComponent, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, buildDataSourceFilter, buildTransitionTimeline, compileDeclarations, composeVirtualTraits, dataSourcePlanToRequest, effectiveTransitionId, legacyEnterToTransition, matchRouteParams, normalizeCollectionResult, planDataSource, renderDefaultDeclarations, resolvePageTransition, resolveSingleItemId, rewriteViewportUnits, styleKeyToKebab };
+export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CardComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, ENVIRONMENT, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, SectionComponent, TextBlockComponent, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, buildDataSourceFilter, buildTransitionTimeline, compileDeclarations, composeVirtualTraits, dataSourcePlanToRequest, effectiveTransitionId, legacyEnterToTransition, matchRouteParams, normalizeCollectionResult, planDataSource, renderDefaultDeclarations, resolvePageTransition, resolveSingleItemId, rewriteViewportUnits, styleKeyToKebab };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map