@vectoriox/iox-builder 4.20.0 → 4.22.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,7 +16,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i18 from '@vectoriox/iox-ui';
-import { DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, composeVirtualTraits, stateNamesIn, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, composeVirtualTraits, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -145,13 +145,14 @@ const TARGETED_STATE_BASE = {
  * `.iox-valid` host classes it sets from `forceInvalid`/`showValid` (decision D5), so authoring
  * "Wrong"/"Accepted" styles compiles to a CLASS-compound selector, not `:state`. Currently only
  * meaningful on Field (or any future component with the same host classes).
+ *
+ * Defined in `@vectoriox/iox-ui` (`style-compiler/parts.ts`), not here — the SSR engine needs
+ * this exact mapping too and does not depend on iox-builder. Re-exported for every existing
+ * `@vectoriox/iox-builder` consumer, so nothing importing from here needs to change.
  */
-const VALIDATION_STATES = ['wrong', 'accepted'];
+const VALIDATION_STATES = [...VALIDATION_STATES$1];
 /** The host class each validation state maps to. */
-const VALIDATION_STATE_CLASS = {
-    wrong: 'iox-invalid',
-    accepted: 'iox-valid',
-};
+const VALIDATION_STATE_CLASS = VALIDATION_STATE_CLASS$1;
 const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES, ...TARGETED_STATES, ...VALIDATION_STATES];
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
@@ -3739,6 +3740,13 @@ class StyleRegistryService {
             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';
@@ -4310,9 +4318,6 @@ const CONTAINER_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main',
  *   </ng-container>
  */
 class RenderDirective {
-    /** type -> its declared parts (board 7), cached so partClassNameFor doesn't instantiate a
-     *  fresh ComponentConfig on every render — same precedent as the layer tree's own icon cache. */
-    static { this.partsCache = new Map(); }
     constructor(vcr, injector, envInjector, doc, registryService, overlayService, styleRegistry, interactionEngine, cdr, panelEventService, dragEngine) {
         this.vcr = vcr;
         this.injector = injector;
@@ -4400,19 +4405,6 @@ class RenderDirective {
      * registry — at state-restore time the parent isn't registered yet, since it registers only
      * AFTER rendering its children). Used to key relational (parent-hover) rules. (issue #1)
      */
-    /** The stable class a declared part compiles against, e.g. ('Field', 'error') -> 'iox-field__error'.
-     *  Undefined when the type declares no such part (or no parts at all) — caller skips it. */
-    partClassNameFor(type, partKey) {
-        let byKey = RenderDirective.partsCache.get(type);
-        if (!byKey) {
-            const config = this.registryService.createConfig(type);
-            byKey = {};
-            for (const part of config?.parts ?? [])
-                byKey[part.key] = part.className;
-            RenderDirective.partsCache.set(type, byKey);
-        }
-        return byKey[partKey];
-    }
     resolveParentNodeId(childEl) {
         let el = childEl?.parentElement ?? null;
         while (el) {
@@ -4568,7 +4560,7 @@ class RenderDirective {
             const partStyles = node.partStyles;
             if (partStyles) {
                 for (const [partKey, part] of Object.entries(partStyles)) {
-                    const className = this.partClassNameFor(node.type, partKey);
+                    const className = partClassName(node.type, partKey);
                     if (!className)
                         continue;
                     const base = part.styleProps ?? {};
@@ -9803,18 +9795,18 @@ class GalleryConfig extends ComponentConfig {
 }
 
 /**
- * Field's styleable sub-elements (board 7 — "the failure design"). Class names match
- * `IoxFieldComponent`'s own template exactly (`@vectoriox/iox-ui`) — the part mechanism styles
- * what that component already renders, it does not invent new markup. "Whole field" (the node's
- * own base styling) is not listed here — the Style panel always offers it as the implicit first
- * choice, falling back to the node's ordinary `styleTraits`.
+ * Field's styleable sub-elements (board 7 — "the failure design"), for the Style panel's picker.
+ * Class names come from the SHARED `PART_CLASS_NAMES` (`@vectoriox/iox-ui`) — the same map the
+ * SSR engine resolves a part's selector from — so the picker can never drift from what actually
+ * gets compiled. "Whole field" (the node's own base styling) is not listed here — the Style panel
+ * always offers it as the implicit first choice, falling back to the node's ordinary `styleTraits`.
  */
 const FIELD_PARTS = [
-    { key: 'label', label: 'Label', className: 'iox-field__label' },
-    { key: 'control', label: 'The box', className: 'iox-field__control' },
-    { key: 'help', label: 'Note', className: 'iox-field__help' },
-    { key: 'error', label: 'Error message', className: 'iox-field__error' },
-    { key: 'required', label: 'Required mark', className: 'iox-field__required' },
+    { key: 'label', label: 'Label', className: PART_CLASS_NAMES['Field']['label'] },
+    { key: 'control', label: 'The box', className: PART_CLASS_NAMES['Field']['control'] },
+    { key: 'help', label: 'Note', className: PART_CLASS_NAMES['Field']['help'] },
+    { key: 'error', label: 'Error message', className: PART_CLASS_NAMES['Field']['error'] },
+    { key: 'required', label: 'Required mark', className: PART_CLASS_NAMES['Field']['required'] },
 ];
 /** Every style group — the state blocks and field group are ordinary containers to style. */
 const fullStyles = () => buildFullStyleTraits();
@@ -9859,6 +9851,11 @@ class FormComponentConfig extends ComponentConfig {
                 { label: 'As you type', value: 'live' },
             ], 'smart'),
             new TraitConfig('resetAfterSubmit', 'Clear the form after submit', TraitInputType.Checkbox, undefined, false),
+            // Board 11 — "when it fails". Both default ON: they are what a well-behaved form does,
+            // and an author turns one off deliberately. Edited in the Form Studio's States tab,
+            // which is why they carry no SectionLabel of their own here.
+            new TraitConfig('focusFirstProblem', 'Jump to the first problem', TraitInputType.Checkbox, undefined, true),
+            new TraitConfig('announceFailure', 'Announce it out loud', TraitInputType.Checkbox, undefined, true),
             new TraitConfig('__spamLabel', 'Spam protection', TraitInputType.SectionLabel),
             // On by default and invisible to the visitor (decision D12).
             new TraitConfig('honeypot', 'Honeypot field', TraitInputType.Checkbox, undefined, true),