@vectoriox/iox-builder 11.9.2 → 11.10.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i20 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { nodeCssId, needsGroupName, resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, entranceDelay, repeatedRowIndex, keyframeStyleEntries, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { nodeCssId, needsGroupName, resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, animateAction, entranceDelay, repeatedRowIndex, keyframeStyleEntries, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
@@ -1318,6 +1318,9 @@ const ACTION_TYPE_OPTIONS = [
     { value: 'scaleIn', label: 'Scale in' },
     { value: 'scaleOut', label: 'Scale out' },
     { value: 'rotate', label: 'Rotate' },
+    { value: 'clipReveal', label: 'Reveal' },
+    { value: 'zoomOut', label: 'Zoom settle' },
+    { value: 'revealText', label: 'Reveal text' },
     { value: 'show', label: 'Show' },
     { value: 'hide', label: 'Hide' },
     { value: 'toggleVisibility', label: 'Toggle visibility' },
@@ -4697,7 +4700,7 @@ class InteractionEngineService {
         }
         // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end). A look
         // entrance on a Repeater's template staggers its rows: each copy adds its row's share (shared `entranceDelay`).
-        const anim = element.animate(keyframes, {
+        const anim = animateAction(element, { type, params: action.params }, keyframes, {
             duration: action.duration,
             delay: entranceDelay(action, repeatedRowIndex(element)),
             easing: action.easing,
@@ -4748,8 +4751,12 @@ class InteractionEngineService {
         if (this.isBuilderMode()) {
             // No transforms — inline transforms on children inside iox-page-component's
             // scale() break Lenis scroll. pointer-events:none lets wheel events and
-            // hover fall through to visible elements underneath.
-            element.style.setProperty('opacity', '0');
+            // hover fall through to visible elements underneath. A clip hides by itself, and
+            // an entrance that hides nothing (a picture settling) stays in view.
+            if (first['clipPath'])
+                element.style.setProperty('clip-path', first['clipPath']);
+            else if ('opacity' in first || 'visibility' in first)
+                element.style.setProperty('opacity', '0');
             element.style.setProperty('pointer-events', 'none');
         }
         else {
@@ -4764,6 +4771,7 @@ class InteractionEngineService {
     clearInlineAnimationStyles(element) {
         element.style.removeProperty('opacity');
         element.style.removeProperty('transform');
+        element.style.removeProperty('clip-path');
         element.style.removeProperty('visibility');
         element.style.removeProperty('pointer-events');
         element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
@@ -4777,11 +4785,11 @@ class InteractionEngineService {
             return;
         }
         // Reverse: play the keyframes backwards
-        element.animate([...keyframes].reverse(), {
+        animateAction(element, action, [...keyframes].reverse(), {
             duration: action.duration,
             easing: action.easing,
             fill: 'forwards',
-        });
+        }, { reverse: true });
     }
     /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
     keyframesFor(type, action) {
@@ -5302,6 +5310,10 @@ class SceneCanvasService {
             this.rootsById.delete(id);
         this.idsByRoot.delete(root);
     }
+    /** The canvas's Lenis just moved the scroll, inside this frame: hold every stage in this same frame. */
+    pinNow() {
+        this.driver?.pinNow();
+    }
     /** The damped progress a root's layers stand at. */
     progressOf(root) {
         return this.driver?.progressOf(root) ?? null;
@@ -8165,6 +8177,7 @@ class OverlayComponent {
             scaleIn: 'Scale In', scaleOut: 'Scale Out',
             rotate: 'Rotate', show: 'Show', hide: 'Hide',
             toggleVisibility: 'Toggle',
+            clipReveal: 'Reveal', zoomOut: 'Zoom settle', revealText: 'Reveal text',
         };
         if (isPhoneMenuOpener(this.selectEntry?.node, ix, this.designState?.snapshot.menu?.drawer.id)) {
             return this.builderLabels(MENU_OPENER_KEY, BUILDER_CHROME_EN[MENU_OPENER_KEY]);
@@ -9977,6 +9990,8 @@ class BuilderComponent {
             autoResize: false, // we drive resize() manually via canvasRo + viewportSub
         });
         this.lenis.on('scroll', (instance) => {
+            // A Scene's stage is held against this very scroll: a frame later, it would paint carried off its pin.
+            this.sceneCanvas?.pinNow();
             const clientH = this.previewScrollRef.nativeElement.clientHeight;
             this.onPageScroll({
                 scrollTop: instance.scroll,