@vectoriox/iox-ui 4.5.2 → 4.7.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -2341,33 +2341,182 @@ 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 }];
 const move = (from, to) => [{ transform: from }, { transform: to }];
+/** Gentle recede for the outgoing page under a mask/reveal — it stays put but drops back a little,
+ *  so the page underneath never looks like a frozen screenshot. */
+const RECEDE_SOFT = [
+    { transform: 'scale(1)', opacity: 1 },
+    { transform: 'scale(0.94)', opacity: 0.6 },
+];
+/** Barely-there settle for the incoming page under a curtain — the panel hides most of it, so this
+ *  only takes the edge off the reveal. Ends at identity (required: IN frames must not persist). */
+const SETTLE_IN = [{ transform: 'scale(1.04)' }, { transform: 'scale(1)' }];
 // ── The preset catalog ──────────────────────────────────────────────────────
 // Keyed by a stable preset id persisted in pageSettings.routeAnimation.transition.
 const PAGE_TRANSITION_PRESETS = {
-    // ── Move (both pages slide; no fade — the classic Codrops "move") ──────────
+    // ── 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',
+    },
+    // ── Reveal (clip-path) ─────────────────────────────────────────────────────
+    // The incoming page is UNMASKED over the outgoing one, which recedes gently behind. No overlay
+    // panel is involved — the mask is animated directly on the incoming layer, so this needs no
+    // extra DOM. (WAAPI interpolates clip-path only between the SAME shape function with the same
+    // number of points — keep each pair consistent.)
+    'circle-reveal': {
+        category: 'reveal', label: 'Circle reveal (iris)',
+        outKeyframes: RECEDE_SOFT,
+        inKeyframes: [
+            { clipPath: 'circle(0% at 50% 50%)' },
+            { clipPath: 'circle(75% at 50% 50%)' },
+        ],
+        ontop: 'in',
+    },
+    'wipe-right': {
+        category: 'reveal', label: 'Wipe → right',
+        outKeyframes: RECEDE_SOFT,
+        inKeyframes: [{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
+        ontop: 'in',
+    },
+    'wipe-left': {
+        category: 'reveal', label: 'Wipe ← left',
+        outKeyframes: RECEDE_SOFT,
+        inKeyframes: [{ clipPath: 'inset(0 0 0 100%)' }, { clipPath: 'inset(0 0 0 0)' }],
+        ontop: 'in',
+    },
+    'wipe-down': {
+        category: 'reveal', label: 'Wipe ↓ down',
+        outKeyframes: RECEDE_SOFT,
+        inKeyframes: [{ clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0 0 0 0)' }],
+        ontop: 'in',
+    },
+    'wipe-up': {
+        category: 'reveal', label: 'Wipe ↑ up',
+        outKeyframes: RECEDE_SOFT,
+        inKeyframes: [{ clipPath: 'inset(100% 0 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
+        ontop: 'in',
+    },
+    'diagonal-wipe': {
+        category: 'reveal', label: 'Diagonal wipe',
+        outKeyframes: RECEDE_SOFT,
+        // 4-point polygons on both ends so WAAPI can interpolate them.
+        inKeyframes: [
+            { clipPath: 'polygon(0% 0%, 0% 0%, -40% 100%, -40% 100%)' },
+            { clipPath: 'polygon(0% 0%, 140% 0%, 100% 100%, -40% 100%)' },
+        ],
+        ontop: 'in',
+    },
+    'inset-reveal': {
+        category: 'reveal', label: 'Box reveal (from centre)',
+        outKeyframes: RECEDE_SOFT,
+        inKeyframes: [{ clipPath: 'inset(50% 50% 50% 50%)' }, { clipPath: 'inset(0 0 0 0)' }],
+        ontop: 'in',
+    },
+    // ── Curtain (overlay panel sweeps across, hiding the swap) ────────────────
+    // A solid panel covers the screen, the outgoing page is dropped behind it, then the panel
+    // sweeps away revealing the incoming page. Colour comes from routeAnimation.curtainColor, or
+    // the incoming page's own background.
+    'curtain-up': {
+        category: 'curtain', label: 'Curtain up',
+        outKeyframes: RECEDE_SOFT, inKeyframes: SETTLE_IN, ontop: 'in',
+        overlay: {
+            coverKeyframes: move('translateY(100%)', 'translateY(0)'),
+            uncoverKeyframes: move('translateY(0)', 'translateY(-100%)'),
+        },
+    },
+    'curtain-down': {
+        category: 'curtain', label: 'Curtain down',
+        outKeyframes: RECEDE_SOFT, inKeyframes: SETTLE_IN, ontop: 'in',
+        overlay: {
+            coverKeyframes: move('translateY(-100%)', 'translateY(0)'),
+            uncoverKeyframes: move('translateY(0)', 'translateY(100%)'),
+        },
+    },
+    'curtain-left': {
+        category: 'curtain', label: 'Curtain left',
+        outKeyframes: RECEDE_SOFT, inKeyframes: SETTLE_IN, ontop: 'in',
+        overlay: {
+            coverKeyframes: move('translateX(100%)', 'translateX(0)'),
+            uncoverKeyframes: move('translateX(0)', 'translateX(-100%)'),
+        },
+    },
+    'curtain-right': {
+        category: 'curtain', label: 'Curtain right',
+        outKeyframes: RECEDE_SOFT, inKeyframes: SETTLE_IN, ontop: 'in',
+        overlay: {
+            coverKeyframes: move('translateX(-100%)', 'translateX(0)'),
+            uncoverKeyframes: move('translateX(0)', 'translateX(100%)'),
+        },
+    },
+    // ── Move / Push (both pages travel the full distance, side by side — no overlap) ─────
     'move-left': {
-        category: 'move', label: 'Move left / from right',
+        category: 'move', label: 'Push left',
         outKeyframes: move('translateX(0)', 'translateX(-100%)'),
         inKeyframes: move('translateX(100%)', 'translateX(0)'),
     },
     'move-right': {
-        category: 'move', label: 'Move right / from left',
+        category: 'move', label: 'Push right',
         outKeyframes: move('translateX(0)', 'translateX(100%)'),
         inKeyframes: move('translateX(-100%)', 'translateX(0)'),
     },
     'move-up': {
-        category: 'move', label: 'Move up / from bottom',
+        category: 'move', label: 'Push up',
         outKeyframes: move('translateY(0)', 'translateY(-100%)'),
         inKeyframes: move('translateY(100%)', 'translateY(0)'),
     },
     'move-down': {
-        category: 'move', label: 'Move down / from top',
+        category: 'move', label: 'Push down',
         outKeyframes: move('translateY(0)', 'translateY(100%)'),
         inKeyframes: move('translateY(-100%)', 'translateY(0)'),
     },
@@ -2469,10 +2618,31 @@ const PAGE_TRANSITION_PRESETS = {
         outTransformOrigin: '100% 50%', inTransformOrigin: '0% 50%',
     },
 };
+const TRANSITION_FEELS = [
+    { value: 'calm', label: 'Calm', duration: 1800, easing: 'cubic-bezier(0.33, 1, 0.68, 1)', description: 'Slow and unhurried — editorial, luxury' },
+    { value: 'cinematic', label: 'Cinematic', duration: 1500, easing: DEFAULT_PAGE_TRANSITION_EASING, description: 'Long settle with a strong middle — the default' },
+    { value: 'smooth', label: 'Smooth', duration: 1200, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', description: 'Quick out of the gate, glides to a stop' },
+    { value: 'snappy', label: 'Snappy', duration: 600, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', description: 'Fast and responsive — app-like' },
+    { value: 'crazy', label: 'Crazy', duration: 900, easing: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)', description: 'Overshoots and springs back' },
+];
+/** The feel matching this duration+easing exactly, else 'custom'. Drives the panel's selector. */
+function feelFor(duration, easing) {
+    const d = toFiniteNumber(duration, DEFAULT_PAGE_TRANSITION_DURATION);
+    const e = easing || DEFAULT_PAGE_TRANSITION_EASING;
+    return TRANSITION_FEELS.find(f => f.duration === d && f.easing === e)?.value ?? 'custom';
+}
+/** The duration+easing patch for a feel id (undefined for 'custom' / unknown). */
+function applyFeel(feel) {
+    const f = TRANSITION_FEELS.find(x => x.value === feel);
+    return f ? { duration: f.duration, easing: f.easing } : undefined;
+}
 /** Built from PAGE_TRANSITION_PRESETS so the two lists can never drift apart. */
 const PAGE_TRANSITION_CATEGORIES = (() => {
     const order = [
-        { value: 'move', label: 'Move' },
+        { value: 'parallax', label: 'Smooth (parallax)' },
+        { value: 'reveal', label: 'Reveal (mask)' },
+        { value: 'curtain', label: 'Curtain (overlay)' },
+        { value: 'move', label: 'Push / slide' },
         { value: 'fade', label: 'Fade' },
         { value: 'scale', label: 'Scale' },
         { value: 'rotate', label: 'Rotate / 3D' },
@@ -2504,7 +2674,7 @@ function resolvePageTransition(name, opts = {}) {
     // 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 ?? 'ease';
+    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;
@@ -2524,6 +2694,14 @@ function resolvePageTransition(name, opts = {}) {
         perspective,
         outTransformOrigin: preset.outTransformOrigin,
         inTransformOrigin: preset.inTransformOrigin,
+        overlay: preset.overlay && {
+            coverFrames: preset.overlay.coverKeyframes,
+            uncoverFrames: preset.overlay.uncoverKeyframes,
+            // Cover and uncover split the total duration; 'both' holds the panel in place between
+            // the two halves so the swap is never visible through a gap.
+            coverOptions: { duration: duration / 2, easing, fill: 'both' },
+            uncoverOptions: { duration: duration / 2, easing, fill: 'both' },
+        },
     };
 }
 /**
@@ -2558,7 +2736,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;
     }
 }
 /**
@@ -2567,7 +2746,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);
@@ -2581,5 +2760,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, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, applyFeel, buildDataSourceFilter, buildTransitionTimeline, compileDeclarations, composeVirtualTraits, dataSourcePlanToRequest, effectiveTransitionId, feelFor, legacyEnterToTransition, matchRouteParams, normalizeCollectionResult, planDataSource, renderDefaultDeclarations, resolvePageTransition, resolveSingleItemId, rewriteViewportUnits, styleKeyToKebab };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map