@vectoriox/iox-builder 4.18.3 → 4.20.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 { 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';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -139,7 +139,20 @@ 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).
+ */
+const VALIDATION_STATES = ['wrong', 'accepted'];
+/** The host class each validation state maps to. */
+const VALIDATION_STATE_CLASS = {
+    wrong: 'iox-invalid',
+    accepted: 'iox-valid',
+};
+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
@@ -872,6 +885,13 @@ var PanelEventTypes;
      *  would (`string` component type, or a block / symbol object). The builder resolves WHERE from
      *  the current selection — see `resolveInsertTarget`. */
     PanelEventTypes["INSERT_COMPONENT"] = "insertcomponent";
+    /** A panel wants to select a NODE it already has a reference to (e.g. the Form's nested field
+     *  list). Carries `{ node }`. `OverlayService.setSelect()` alone only updates the overlay's own
+     *  visual state — `selectedItem`/`selectedPath` (breadcrumb) and every other panel's idea of
+     *  "what's selected" stay stale unless the SAME `_emitElementSelect` a real canvas click goes
+     *  through also runs. This event is that path for code outside `BuilderComponent` itself,
+     *  mirroring what `onTreeNodeSelect`/`onCrumbSelect` already do internally. */
+    PanelEventTypes["SELECT_NODE"] = "selectnode";
 })(PanelEventTypes || (PanelEventTypes = {}));
 class PanelEventService {
     constructor() {
@@ -3612,6 +3632,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
@@ -4268,6 +4310,9 @@ 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;
@@ -4355,6 +4400,19 @@ 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) {
@@ -4504,6 +4562,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 = this.partClassNameFor(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) {
@@ -7077,6 +7151,19 @@ class BuilderComponent {
             this.insertFromPanel(panelEvent.data);
             return;
         }
+        // A panel (e.g. the Form's nested field list) wants to select a node it already holds a
+        // reference to — same path onTreeNodeSelect/onCrumbSelect use, so selectedItem/selectedPath
+        // and every panel stay in sync, not just the overlay's own visual selection box.
+        if (panelEvent.type === PanelEventTypes.SELECT_NODE) {
+            const node = panelEvent.data?.node;
+            const ref = node ? this.overlayService.getNodeRef(node) : undefined;
+            if (node && ref) {
+                this.selectedItem = node;
+                this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
+                this._emitElementSelect(node, ref.componentRef);
+            }
+            return;
+        }
         // Every style or structural edit — including a breakpoint override — emits LAYOUT_CHANGED.
         if (panelEvent.type === PanelEventTypes.LAYOUT_CHANGED) {
             this.refreshBreakpointCounts();
@@ -9715,6 +9802,20 @@ 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`.
+ */
+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' },
+];
 /** 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. */
@@ -9795,6 +9896,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'),
@@ -10349,5 +10451,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