@vectoriox/iox-ui 4.4.4 → 4.5.1

package/fesm2022/vectoriox-iox-ui.mjs

@@ -2326,6 +2326,244 @@ function dataSourcePlanToRequest(plan, endpoints) {
     }
 }
 
+/**
+ * Cinematic page-transition presets — the SINGLE SOURCE OF TRUTH shared by the page builder
+ * (preview) and the SSR client engine (production). Pure, transport-agnostic: this module only
+ * describes WAAPI keyframe pairs + timing/ordering. It never touches the DOM.
+ *
+ * A page transition plays TWO synchronized WAAPI animations at once — an `out` animation on a
+ * snapshot of the outgoing page and an `in` animation on the incoming page — inside a shared
+ * `perspective` container, gated on BOTH finishing (the "cinematic" feel, à la Codrops
+ * PageTransitions). The consumer supplies the DOM (snapshot layer + live page) and calls
+ * `element.animate(frames, options)`; it does NOT redefine the frames.
+ *
+ * @see architecture/builder/page-transitions.md
+ */
+/** 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;
+// ── Keyframe helpers ────────────────────────────────────────────────────────
+const FADE_OUT = [{ opacity: 1 }, { opacity: 0 }];
+const FADE_IN = [{ opacity: 0 }, { opacity: 1 }];
+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 = {
+    // ── Move (both pages slide; no fade — the classic Codrops "move") ──────────
+    'move-left': {
+        category: 'move', label: 'Move left / from right',
+        outKeyframes: move('translateX(0)', 'translateX(-100%)'),
+        inKeyframes: move('translateX(100%)', 'translateX(0)'),
+    },
+    'move-right': {
+        category: 'move', label: 'Move right / from left',
+        outKeyframes: move('translateX(0)', 'translateX(100%)'),
+        inKeyframes: move('translateX(-100%)', 'translateX(0)'),
+    },
+    'move-up': {
+        category: 'move', label: 'Move up / from bottom',
+        outKeyframes: move('translateY(0)', 'translateY(-100%)'),
+        inKeyframes: move('translateY(100%)', 'translateY(0)'),
+    },
+    'move-down': {
+        category: 'move', label: 'Move down / from top',
+        outKeyframes: move('translateY(0)', 'translateY(100%)'),
+        inKeyframes: move('translateY(-100%)', 'translateY(0)'),
+    },
+    // ── Fade (incoming sits on top; outgoing dissolves or holds) ───────────────
+    'fade': {
+        category: 'fade', label: 'Fade',
+        outKeyframes: FADE_OUT, inKeyframes: FADE_IN, ontop: 'in',
+    },
+    'fade-from-right': {
+        category: 'fade', label: 'Fade / from right',
+        outKeyframes: FADE_OUT,
+        inKeyframes: [{ transform: 'translateX(100%)', opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'fade-from-left': {
+        category: 'fade', label: 'Fade / from left',
+        outKeyframes: FADE_OUT,
+        inKeyframes: [{ transform: 'translateX(-100%)', opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'fade-from-bottom': {
+        category: 'fade', label: 'Fade / from bottom',
+        outKeyframes: FADE_OUT,
+        inKeyframes: [{ transform: 'translateY(100%)', opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }],
+        ontop: 'in',
+    },
+    // ── Scale ──────────────────────────────────────────────────────────────────
+    'scale-down-up': {
+        category: 'scale', label: 'Scale down / scale up',
+        outKeyframes: [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }],
+        inKeyframes: [{ transform: 'scale(1.2)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'scale-down': {
+        category: 'scale', label: 'Scale down / from right',
+        outKeyframes: [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }],
+        inKeyframes: move('translateX(100%)', 'translateX(0)'),
+        ontop: 'in',
+    },
+    'scale-up': {
+        category: 'scale', label: 'Move to left / scale up',
+        outKeyframes: move('translateX(0)', 'translateX(-100%)'),
+        inKeyframes: [{ transform: 'scale(0.8)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }],
+        ontop: 'out',
+    },
+    // ── Rotate / 3D (the cinematic "wow" family) ───────────────────────────────
+    'flip': {
+        category: 'rotate', label: 'Flip',
+        outKeyframes: [{ transform: 'rotateY(0deg)', opacity: 1 }, { transform: 'rotateY(-180deg)', opacity: 0 }],
+        inKeyframes: [{ transform: 'rotateY(180deg)', opacity: 0 }, { transform: 'rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '50% 50%', inTransformOrigin: '50% 50%',
+    },
+    'cube-left': {
+        category: 'rotate', label: 'Cube / to left',
+        outKeyframes: [{ transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateZ(-800px) rotateY(-90deg)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateZ(-800px) rotateY(90deg)', opacity: 0.3 }, { transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '50% 50%', inTransformOrigin: '50% 50%',
+    },
+    'cube-right': {
+        category: 'rotate', label: 'Cube / to right',
+        outKeyframes: [{ transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateZ(-800px) rotateY(90deg)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateZ(-800px) rotateY(-90deg)', opacity: 0.3 }, { transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '50% 50%', inTransformOrigin: '50% 50%',
+    },
+    'carousel-left': {
+        category: 'rotate', label: 'Carousel / to left',
+        outKeyframes: [{ transform: 'translateX(0) scale(1)', opacity: 1 }, { transform: 'translateX(-150%) scale(0.4)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateX(200%) scale(0.4)', opacity: 0.3 }, { transform: 'translateX(0) scale(1)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'carousel-right': {
+        category: 'rotate', label: 'Carousel / to right',
+        outKeyframes: [{ transform: 'translateX(0) scale(1)', opacity: 1 }, { transform: 'translateX(150%) scale(0.4)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateX(-200%) scale(0.4)', opacity: 0.3 }, { transform: 'translateX(0) scale(1)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'fall': {
+        category: 'rotate', label: 'Fall',
+        outKeyframes: [{ transform: 'translateZ(0) rotateX(0deg)', opacity: 1 }, { transform: 'translateZ(-500px) rotateX(90deg)', opacity: 0 }],
+        inKeyframes: FADE_IN,
+        outTransformOrigin: '50% 50%', ontop: 'out', inDelayRatio: 0.3,
+    },
+    'newspaper': {
+        category: 'rotate', label: 'Newspaper',
+        outKeyframes: [{ transform: 'scale(1) rotate(0deg)', opacity: 1 }, { transform: 'scale(0) rotate(720deg)', opacity: 0 }],
+        inKeyframes: [{ transform: 'scale(0) rotate(-720deg)', opacity: 0 }, { transform: 'scale(1) rotate(0deg)', opacity: 1 }],
+        ontop: 'in', inDelayRatio: 0.5,
+    },
+    'fold-left': {
+        category: 'rotate', label: 'Fold / unfold',
+        outKeyframes: [{ transform: 'translateX(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateX(-100%) rotateY(-90deg)', opacity: 0.6 }],
+        inKeyframes: [{ transform: 'translateX(100%) rotateY(90deg)', opacity: 0.6 }, { transform: 'translateX(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '0% 50%', inTransformOrigin: '100% 50%', ontop: 'in',
+    },
+    'room-left': {
+        category: 'rotate', label: 'Room / to left',
+        outKeyframes: [{ transform: 'translateX(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateX(-100%) rotateY(90deg)', opacity: 0.4 }],
+        inKeyframes: [{ transform: 'translateX(100%) rotateY(-90deg)', opacity: 0.4 }, { transform: 'translateX(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '100% 50%', inTransformOrigin: '0% 50%',
+    },
+};
+/** Built from PAGE_TRANSITION_PRESETS so the two lists can never drift apart. */
+const PAGE_TRANSITION_CATEGORIES = (() => {
+    const order = [
+        { value: 'move', label: 'Move' },
+        { value: 'fade', label: 'Fade' },
+        { value: 'scale', label: 'Scale' },
+        { value: 'rotate', label: 'Rotate / 3D' },
+    ];
+    return order.map(cat => ({
+        ...cat,
+        presets: Object.entries(PAGE_TRANSITION_PRESETS)
+            .filter(([, p]) => p.category === cat.value)
+            .map(([value, p]) => ({ value, label: p.label })),
+    }));
+})();
+/**
+ * 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).
+ */
+function resolvePageTransition(name, opts = {}) {
+    if (!name || name === 'none')
+        return null;
+    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;
+    const clampRatio = (r) => Math.max(0, Math.min(1, r ?? 0));
+    const outDelay = clampRatio(preset.outDelayRatio) * duration;
+    const inDelay = clampRatio(preset.inDelayRatio) * duration;
+    return {
+        outFrames: preset.outKeyframes,
+        inFrames: preset.inKeyframes,
+        // OUT plays on a throwaway snapshot → 'both' (hold keyframe[0] during delay, keyframe[last] after).
+        outOptions: { duration, easing, delay: outDelay, fill: 'both' },
+        // IN plays on the LIVE page host, so it must NOT persist its end state: a lingering `transform`
+        // makes that host a containing block for absolutely-positioned descendants, collapsing a
+        // `position:absolute; inset:0` page shell (iox-page-component) to 0 height. Every `in` preset
+        // ends at identity (translate 0 / scale 1 / opacity 1), so 'backwards' — which only holds
+        // keyframe[0] during the delay — is visually identical and leaves no residue.
+        inOptions: { duration, easing, delay: inDelay, fill: 'backwards' },
+        ontop: preset.ontop ?? 'in',
+        perspective,
+        outTransformOrigin: preset.outTransformOrigin,
+        inTransformOrigin: preset.inTransformOrigin,
+    };
+}
+/**
+ * The ordered phases a navigation runs, given what is present. The order is INVARIANT:
+ * every element `leave` animation finishes before the page `transition` starts, and the page
+ * `transition` finishes before any element `enter` animation begins. Phases with nothing to
+ * play are omitted. The engine iterates this list and `await`s each phase's completion.
+ */
+function buildTransitionTimeline(input) {
+    const phases = [];
+    if (input.hasLeave)
+        phases.push('leave');
+    if (input.hasTransition)
+        phases.push('transition');
+    if (input.hasEnter)
+        phases.push('enter');
+    return phases;
+}
+// ── Back-compat migration from the legacy single-page route-animation presets ─
+/**
+ * Map a legacy `enter` preset (none/fade/slideUp/slideDown/zoomIn/zoomOut/blurIn/flip) to the
+ * nearest cinematic paired `transition` id, so pages saved before this system keep animating.
+ * Returns 'fade' for anything unmapped, and 'none' for 'none'.
+ */
+function legacyEnterToTransition(enter) {
+    switch (enter) {
+        case 'none': return 'none';
+        case 'slideUp': return 'fade-from-bottom';
+        case 'slideDown': return 'fade';
+        case 'zoomIn': return 'scale-down-up';
+        case 'zoomOut': return 'scale-down-up';
+        case 'blurIn': return 'fade';
+        case 'flip': return 'flip';
+        case 'fade': return 'fade';
+        default: return 'fade';
+    }
+}
+/**
+ * Resolve the effective transition id for a page's route-animation settings: the explicit
+ * `transition` when present, otherwise migrated from the legacy `enter` preset.
+ */
+function effectiveTransitionId(anim) {
+    if (!anim)
+        return 'fade';
+    if (anim.transition)
+        return anim.transition;
+    return legacyEnterToTransition(anim.enter);
+}
+
 /*
  * Public API Surface of iox-ui
  */
@@ -2334,5 +2572,5 @@ function dataSourcePlanToRequest(plan, endpoints) {
  * 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_WIDTH_BY_TYPE, ENVIRONMENT, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, SectionComponent, TextBlockComponent, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, buildDataSourceFilter, compileDeclarations, composeVirtualTraits, dataSourcePlanToRequest, matchRouteParams, normalizeCollectionResult, planDataSource, renderDefaultDeclarations, 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_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 };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map