@vectoriox/iox-builder 4.19.0 → 4.21.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, 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';
@@ -139,7 +139,21 @@ const TARGETED_STATES = ['trigger-hover'];
 const TARGETED_STATE_BASE = {
     'trigger-hover': 'hover',
 };
-const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES, ...TARGETED_STATES];
+/**
+ * Design-time validation states (forms-and-inputs-plan.md Part 2, board 7 — "the failure
+ * design"). Not real CSS pseudo-classes: `IoxFieldComponent` already carries `.iox-invalid`/
+ * `.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 = [...VALIDATION_STATES$1];
+/** The host class each validation state maps to. */
+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
  * styleProps map. Used when editing a preset in the Style panel — the panel
@@ -3619,6 +3633,28 @@ class StyleRegistryService {
             this.rules.delete(nodeId);
         this.flush();
     }
+    /**
+     * Write or clear the styles for one PART of a compound component (board 7 — "the failure
+     * design"), optionally further scoped to a validation state ('wrong'/'accepted'). Compiles
+     * through the exact same `compile()` every other rule uses — `buildPartSelector` (shared,
+     * `@vectoriox/iox-ui`) just builds a different selector string. Unlike interaction/relational/
+     * targeted states, a validation state compounds a CLASS onto the node (`.iox-invalid`), not a
+     * `:pseudo-class`, since `IoxFieldComponent` sets that class itself from `forceInvalid`/
+     * `showValid` — there is no real "wrong" pseudo-class to hook.
+     */
+    upsertPart(nodeId, partClassName, styles, state) {
+        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) : '';
+        if (css)
+            this.rules.set(key, css);
+        else
+            this.rules.delete(key);
+        this.flush();
+    }
     /**
      * Emit (or clear) a node's breakpoint rules. `planResponsiveRules` — shared with the SSR engine —
      * decides what each breakpoint emits; this only turns it into selectors, through the SAME
@@ -3704,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';
@@ -4511,6 +4554,22 @@ class RenderDirective {
             }
             // Breakpoint layers — AFTER the state loop, so every scope resolved above is recorded.
             this.styleRegistry.upsertResponsive(cssId, initialStyle, node.stateStyles, node.responsive);
+            // Part styles (board 7 — "the failure design"). Simpler than the state loop above:
+            // a part+state combo always compounds onto THIS node (no relational/targeted scope
+            // to resolve), so every entry just needs its base plus each of its own state overrides.
+            const partStyles = node.partStyles;
+            if (partStyles) {
+                for (const [partKey, part] of Object.entries(partStyles)) {
+                    const className = partClassName(node.type, partKey);
+                    if (!className)
+                        continue;
+                    const base = part.styleProps ?? {};
+                    this.styleRegistry.upsertPart(cssId, className, composeVirtualTraits(base));
+                    for (const [state, stateMap] of Object.entries(part.stateStyles ?? {})) {
+                        this.styleRegistry.upsertPart(cssId, className, composeVirtualTraits(stateMap, base), state);
+                    }
+                }
+            }
         }
         // Set nodeId — declared as @Input() on every builder component.
         if (cssId) {
@@ -9735,6 +9794,20 @@ class GalleryConfig extends ComponentConfig {
     }
 }
 
+/**
+ * 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: 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();
 /** Layout-ish groups for a form shell: it arranges fields, it is not text. */
@@ -9815,6 +9888,7 @@ class FormComponentConfig extends ComponentConfig {
 class FieldComponentConfig extends ComponentConfig {
     constructor() {
         super('Field', 'iox-field', 'ph-thin ph-text-box', 'Forms');
+        this.parts = FIELD_PARTS;
         this.traits = [
             new TraitConfig('__contentLabel', 'Content', TraitInputType.SectionLabel),
             new TraitConfig('label', 'Label', TraitInputType.Text, undefined, 'Label'),
@@ -10369,5 +10443,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map