@vectoriox/iox-builder 11.11.0 → 11.11.1

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, animateAction, entranceDelay, repeatedRowIndex, keyframeStyleEntries, entrancePreStateStyle, 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, STRUCTURAL_STATES as STRUCTURAL_STATES$1, 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, planPartRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, 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, settleInteraction, settleModeFor, playInteraction, entranceDelay, repeatedRowIndex, entrancePreStateStyle, 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, syncSubmitButtons, 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';
@@ -1349,8 +1349,9 @@ const DIALOG_ACTION_TYPES = new Set(['openDialog', 'closeDialog', 'toggleDialog'
 const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
 /** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
 const INTERACTION_STATES = ['hover', 'active', 'focus'];
-/** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
-const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
+/** Structural pseudo-classes — matched on the outer element by the shared `planStateRule` (@vectoriox/iox-ui), the
+ *  engine's planner too (iox-client-engine#14). */
+const STRUCTURAL_STATES = [...STRUCTURAL_STATES$1];
 /**
  * Relational pseudo-classes — the styled element is a descendant, the pseudo-class
  * lives on an ANCESTOR. Compiled to `.iox-node-{parentId}:{base} .iox-node-{id} { … }`,
@@ -2145,26 +2146,6 @@ class StyleRegistryService {
         this.styleEl = null;
         this._flushPending = false;
     }
-    /**
-     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
-     * affect how the element participates in its PARENT layout (flex/block flow).
-     * Everything else goes to the INNER element (.iox-node-{id}).
-     *
-     * Exception — out-of-flow positioning (position:fixed/absolute):
-     * When position is fixed or absolute, width is redirected to the inner element
-     * (the positioned one) and a default width:100% is added if none is set, so the
-     * element stays visible. top/right/bottom/left/zIndex are always inner because
-     * they are co-ordinates of the positioned element, not the flow wrapper.
-     * position itself goes to inner with `!important` to beat component-scoped CSS.
-     */
-    static { this.OUTER_PROPS = new Set([
-        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-        'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
-        // Grid-child placement — like the flex-child props above, these position the node
-        // within the PARENT's grid, so they must land on the outer host, not the inner div.
-        'gridColumn', 'gridRow', 'justifySelf',
-        'width',
-    ]); }
     /**
      * Properties that need !important on the inner element to beat Angular's scoped-CSS
      * specificity boost. CANVAS-ONLY (H2 audit, 2026-10-11): the shared compiler never forces
@@ -2221,8 +2202,7 @@ class StyleRegistryService {
             // breakpoint is scoped identically without re-resolving it (see upsertResponsive).
             if (relativeToId || triggerId)
                 this.stateScopes.set(key, { relativeToId, triggerId });
-            const selector = this.stateSelector(nodeId, state, relativeToId, triggerId);
-            const css = selector ? this.compile(selector, styles) : '';
+            const css = this.stateRuleCss(nodeId, state, styles, relativeToId, triggerId, DeclarationContext.Base);
             if (css)
                 this.rules.set(key, css);
             else
@@ -2256,9 +2236,10 @@ class StyleRegistryService {
         if (!nodeId || !partClassName)
             return;
         const key = `${nodeId}:part:${partClassName}${state ? ':' + state : ''}`;
-        const validationClass = state ? VALIDATION_STATE_CLASS[state] : undefined;
-        const selector = buildPartSelector(nodeId, partClassName, validationClass);
-        const css = Object.keys(styles).length ? this.compile(selector, styles) : '';
+        // The shared planner the engine uses (iox-client-engine#14): a part's hover / focus is the PART's own pseudo-class
+        // — before, any non-validation state compiled to the bare part selector and applied at all times.
+        const selector = planPartRule(nodeId, partClassName, state);
+        const css = selector && Object.keys(styles).length ? this.compileSelector(selector, styles) : '';
         if (css)
             this.rules.set(key, css);
         else
@@ -2304,10 +2285,9 @@ class StyleRegistryService {
                 this.setResponsiveRule(nodeId, bp, `${nodeId}::marker`, marker);
             for (const [state, map] of Object.entries(layer.stateStyles)) {
                 const scope = this.stateScopes.get(`${nodeId}:${state}`);
-                const selector = this.stateSelector(nodeId, state, scope?.relativeToId, scope?.triggerId);
                 // A relational/targeted state whose scope isn't known yet is skipped; it is re-emitted
                 // when the base state rule arrives with its scope (see upsert).
-                const css = selector ? this.compile(selector, this.ownProps(nodeId, map), DeclarationContext.Override) : '';
+                const css = this.stateRuleCss(nodeId, state, this.ownProps(nodeId, map), scope?.relativeToId, scope?.triggerId, DeclarationContext.Override);
                 if (css)
                     this.setResponsiveRule(nodeId, bp, `${nodeId}:${state}`, css);
             }
@@ -2333,37 +2313,20 @@ class StyleRegistryService {
         return pos === 'fixed' || pos === 'absolute';
     }
     /**
-     * The selector BODY (no leading dot) for a state rule, or null when a relational / targeted
-     * state has no scope yet (emitting it unscoped would be wrong — a page-global `:has()`).
+     * A state rule's CSS through the SHARED planner the engine emits with (`planStateRule`, iox-client-engine#14), or ''
+     * when a relational / targeted state has no scope yet (emitting it unscoped would be wrong — a page-global `:has()`).
+     * `relativeToId` is the parent for a relational state (parent-hover) and the nearest common ancestor of the node and
+     * its trigger for a targeted one (trigger-hover, trigger-on). A structural state is matched on the outer element and
+     * reaches the node's own; its outer props stay outer.
      */
-    stateSelector(nodeId, state, relativeToId, triggerId) {
-        // Targeted states (trigger-hover): the styled node restyles when an ARBITRARY chosen
-        // element is hovered. The selector is `:has()`-scoped to `relativeToId` (the nearest
-        // common ancestor of styled + trigger) so it stays repetition-safe with one shared rule.
-        // `trigger-on` (CC2 "Item open"): the same scoping, keyed on the item's `[data-iox-on]` — the ONE
-        // shared `targetedStateSelector` the engine uses too.
-        if (TARGETED_STATES.includes(state)) {
-            return relativeToId && triggerId ? targetedStateSelector(state, relativeToId, triggerId, nodeId) : null;
-        }
-        // Relational states (parent-hover): the pseudo-class lives on an ANCESTOR
-        // and cascades to this element. Requires the ancestor's css id.
-        if (RELATIONAL_STATES.includes(state)) {
-            const base = RELATIONAL_STATE_BASE[state];
-            return relativeToId && base ? `iox-node-${relativeToId}:${base} .iox-node-${nodeId}` : null;
-        }
-        // Validation states (wrong/accepted, board 7) are not real CSS pseudo-classes — `:wrong`
-        // doesn't exist. Compound a CLASS instead, matching the host class IoxFieldComponent
-        // already sets from forceInvalid/showValid. Reuses buildPartSelector with no part, since
-        // "whole node, when wrong" is exactly that function's no-part case.
-        const validationClass = VALIDATION_STATE_CLASS[state];
-        if (validationClass)
-            return buildPartSelector(nodeId, undefined, validationClass);
-        // Structural pseudo-classes (first-child, last-child, nth-child) target the
-        // outer wrapper element so they participate correctly in grid/flex layout.
-        const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
-        // `focus` compiles to :focus-visible (DS2) and a component state to its attribute (`current` →
-        // [aria-current="page"], CC1) — shared with the engine via stateSelectorSuffix.
-        return `${prefix}-${nodeId}${stateSelectorSuffix(state)}`;
+    stateRuleCss(nodeId, state, styles, relativeToId, triggerId, context) {
+        const targeted = TARGETED_STATES.includes(state);
+        const plan = planStateRule(nodeId, state, targeted ? { scopeId: relativeToId, triggerId } : { parentId: relativeToId });
+        if (!plan)
+            return '';
+        const { inner, outer } = plan.outer ? splitOuterProps(styles) : { inner: styles, outer: {} };
+        return [this.compileSelector(plan.inner, inner, context), plan.outer ? this.compileSelector(plan.outer, outer, context) : '']
+            .filter(Boolean).join('\n');
     }
     /**
      * The inner + outer rule (joined) and the `::marker` rule for one composed style map.
@@ -2380,7 +2343,7 @@ class StyleRegistryService {
         for (const [k, v] of Object.entries(styles)) {
             if (k === '__markerStyles')
                 continue;
-            const wantsOuter = StyleRegistryService.OUTER_PROPS.has(k);
+            const wantsOuter = OUTER_STYLE_PROPS.has(k);
             // width goes to inner for fixed/absolute (the positioned element owns its own width)
             if (wantsOuter && !(isOutOfFlow && k === 'width')) {
                 outer[k] = v;
@@ -2526,14 +2489,16 @@ class StyleRegistryService {
         }
     }
     compile(className, styles, context = DeclarationContext.Base) {
-        // Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
-        // the shared style-compiler so the SSR engine produces byte-identical output.
-        // The inner/outer partition + selector emission stay here (builder-only concern).
+        return this.compileSelector(`.${className}`, styles, context);
+    }
+    /** One rule for a FULL selector. Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
+     *  the shared style-compiler so the SSR engine produces byte-identical output. */
+    compileSelector(selector, styles, context = DeclarationContext.Base) {
         const decls = compileDeclarations(styles, StyleRegistryService.IMPORTANT_PROPS, context);
         if (!decls.length)
             return '';
         const body = decls.map(d => `  ${d};`).join('\n');
-        return `.${className} {\n${body}\n}`;
+        return `${selector} {\n${body}\n}`;
     }
     flush() {
         if (!this.styleEl || this._flushPending)
@@ -4085,6 +4050,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 // Re-exported from the shared iox-ui package so iox-builder consumers
 // don't need to import from two different packages.
 
+/** What the canvas never writes inline (a transform inside the scaled page breaks Lenis). */
+const CANVAS_SKIPPED_PROPS = new Set(['transform']);
 /**
  * Wires ComponentNode interactions to live DOM elements via the
  * OverlayService node-element registry.
@@ -4706,22 +4673,27 @@ class InteractionEngineService {
             element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
         else if (this.EXIT_TYPES.has(type))
             element.setAttribute(INTERACTION_HIDDEN_ATTRIBUTE, '');
-        // Reduced motion (CC1 R1): no animation runs — the element takes its final frame at once.
+        // Reduced motion (CC1 R1): no animation runs — the element is left as the run would leave it (the shared settle
+        // rule: an entrance releases to the stylesheet, an exit holds its hidden frame).
         if (!motionAllowed()) {
-            this.applyFrame(element, finalKeyframe(keyframes));
+            settleInteraction(element, keyframes, settleModeFor(type), this.settleOptions());
             this.settleAfter(element, type);
             return;
         }
-        // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end). A look
+        // The ONE call the live site makes too: fill both (holds the first frame through a delay), started from the live
+        // value, settled by the shared rule — an element that has entered keeps its hover and press (iox-ui#41). A look
         // entrance on a Repeater's template staggers its rows: each copy adds its row's share (shared `entranceDelay`).
-        const anim = animateAction(element, { type, params: action.params }, keyframes, {
+        const anim = playInteraction(element, { type, params: action.params }, keyframes, {
             duration: action.duration,
             delay: entranceDelay(action, repeatedRowIndex(element)),
             easing: action.easing,
-            fill: 'both',
-        });
+        }, this.settleOptions());
         anim.finished.then(() => this.settleAfter(element, type)).catch(() => { });
     }
+    /** On the canvas a run never writes a transform inline (one inside the scaled page breaks Lenis). */
+    settleOptions() {
+        return this.isBuilderMode() ? { skip: CANVAS_SKIPPED_PROPS } : {};
+    }
     /** What an element is left as once an action is done: a revealed one interactive, a hidden one inert. */
     settleAfter(element, type) {
         if (this.ENTRANCE_TYPES.has(type)) {
@@ -4738,15 +4710,6 @@ class InteractionEngineService {
             element.style.setProperty('pointer-events', 'none');
         }
     }
-    /** Write a frame inline. On the canvas never a transform: one inside the scaled page breaks Lenis. */
-    applyFrame(element, frame) {
-        const canvas = this.isBuilderMode();
-        for (const [prop, value] of keyframeStyleEntries(frame)) {
-            if (canvas && prop === 'transform')
-                continue;
-            element.style.setProperty(prop, value);
-        }
-    }
     /**
      * Freeze an element at the animation's starting frame immediately, before any
      * trigger fires. Called for ALL entrance-type actions regardless of trigger so
@@ -4787,20 +4750,22 @@ class InteractionEngineService {
         element.style.removeProperty('pointer-events');
         element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
     }
+    /** A hover-out: the action played back from where the element IS (never from its end frame), settled by the shared
+     *  rule — played back to hidden, it holds hidden; to shown, it releases. */
     reverseAction(element, action) {
-        const keyframes = this.keyframesFor(effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE)), action);
+        const type = effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE));
+        const keyframes = this.keyframesFor(type, action);
         if (!keyframes.length)
             return;
+        const frames = [...keyframes].reverse();
         if (!motionAllowed()) {
-            this.applyFrame(element, keyframes[0]);
+            settleInteraction(element, frames, settleModeFor(type, true), this.settleOptions());
             return;
         }
-        // Reverse: play the keyframes backwards
-        animateAction(element, action, [...keyframes].reverse(), {
+        playInteraction(element, { type, params: action.params }, frames, {
             duration: action.duration,
             easing: action.easing,
-            fill: 'forwards',
-        }, { reverse: true });
+        }, { ...this.settleOptions(), reverse: true });
     }
     /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
     keyframesFor(type, action) {
@@ -11147,6 +11112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/** The formClass a Form's canvas twin wears (form.config). */
+const FORM_CLASS = 'iox-form';
 const ACCORDION_TRACK_WRAPPER = 'track';
 /**
  * Directive-host Container (Phase 2 of the Moveable migration = task 9c). The real tag (div/section/
@@ -11157,6 +11124,14 @@ const ACCORDION_TRACK_WRAPPER = 'track';
  * See moveable-migration.md.
  */
 class BuilderContainerComponent {
+    /** Which state the canvas is showing. Only meaningful on a form host: its submit buttons follow it (busy, disabled
+     *  while Sending — the ONE `syncSubmitButtons` both live paths call, iox-ui#42); "While sending" is the shared CSS's. */
+    set formState(state) {
+        this._formState = state;
+        if (this.formClass === FORM_CLASS)
+            syncSubmitButtons(this.elRef?.nativeElement, state);
+    }
+    get formState() { return this._formState; }
     /** The wrapper a child renders in: an Accordion item's header → its heading level; an item's panel (either
      *  kind) → the track. A disclosure's toggle has no heading — it is a button in the flow. */
     wrapperOf(child) {
@@ -11186,8 +11161,7 @@ class BuilderContainerComponent {
          * stylesheet treat them exactly as it treats the engine's own twins.
          */
         this.formClass = '';
-        /** Which state the canvas is showing. Only meaningful on a form host. */
-        this.formState = 'idle';
+        this._formState = 'idle';
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();