@vectoriox/iox-builder 4.23.0 → 4.25.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 { 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';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, resolveFlavorDefaults, Breakpoint, BREAKPOINTS, countOverrides, setOverride, DEFAULT_FLAVOR, 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';
@@ -237,6 +237,26 @@ class ComponentConfig {
         }
     }
 }
+/**
+ * Layer 2 of the flavor cascade (flavors plan §4), applied by the registry factory to every
+ * BRAND-NEW element: overwrite matching styleTrait defaults with the pack's token references
+ * (`var(--iox-<token>, <packValue>)`). Runs AFTER the subclass constructor, so a pack beats the
+ * constructor's literals; the author's own edits (layer 4) beat everything as always. Self-
+ * describing serialisation then writes the var into styleProps on save — which is why the
+ * engine's `flavorDefaultDeclarations` only has to cover LEGACY nodes.
+ */
+function applyFlavorDefaults(config, pack) {
+    const defaults = resolveFlavorDefaults(config.type, pack);
+    const names = Object.keys(defaults);
+    if (!names.length)
+        return;
+    for (const group of config.styleTraits) {
+        for (const trait of group.traits) {
+            if (defaults[trait.name] !== undefined)
+                trait.default = defaults[trait.name];
+        }
+    }
+}
 class TraitConfig {
     constructor(name, label, type, options, defaultValue, inline, showWhen, responsive) {
         this.name = name;
@@ -325,19 +345,19 @@ class PositionGroupStyleConfig extends GroupStyleConfig {
 class LayoutGroupStyleConfig extends GroupStyleConfig {
     constructor() {
         super(StyleCategory.Layout, [
-            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'grid'], 'block'),
+            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid'], 'block'),
             // ── Flex-only ─────────────────────────────────────────────────────
             new TraitConfig('flexDirection', 'Direction', TraitInputType.SelectButton, [
                 { value: 'row', label: 'Horizontal', icon: 'ph-thin ph-arrow-right' },
                 { value: 'row-reverse', label: 'Horizontal Reversed', icon: 'ph-thin ph-arrow-left' },
                 { value: 'column', label: 'Vertical', icon: 'ph-thin ph-arrow-down' },
                 { value: 'column-reverse', label: 'Vertical Reversed', icon: 'ph-thin ph-arrow-up' },
-            ], 'row', false, { trait: 'display', values: 'flex' }),
+            ], 'row', false, { trait: 'display', values: ['flex', 'inline-flex'] }),
             new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
                 { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
                 { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
                 { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
-            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
+            ], 'nowrap', false, { trait: 'display', values: ['flex', 'inline-flex'] }),
             // ── Shared flex + grid ────────────────────────────────────────────
             new TraitConfig('justifyContent', 'Justify', TraitInputType.SelectButton, [
                 { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
@@ -346,14 +366,14 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
                 { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-arrows-out-line-horizontal' },
                 { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
                 { value: 'space-evenly', label: 'Space Evenly', icon: 'ph-thin ph-dots-six' },
-            ], 'flex-start', false, { trait: 'display', values: ['flex', 'grid'] }),
+            ], 'flex-start', false, { trait: 'display', values: ['flex', 'inline-flex', 'grid'] }),
             new TraitConfig('alignItems', 'Align Items', TraitInputType.SelectButton, [
                 { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
                 { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
                 { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
                 { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
-            ], 'stretch', false, { trait: 'display', values: ['flex', 'grid'] }),
-            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'grid'] }),
+            ], 'stretch', false, { trait: 'display', values: ['flex', 'inline-flex', 'grid'] }),
+            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'inline-flex', 'grid'] }),
             // ── Grid-only ─────────────────────────────────────────────────────
             new TraitConfig('gridTemplateColumns', 'Columns', TraitInputType.GridTemplate, undefined, '1fr', false, { trait: 'display', values: 'grid' }),
             new TraitConfig('gridTemplateRows', 'Rows', TraitInputType.GridTemplate, undefined, 'auto', false, { trait: 'display', values: 'grid' }),
@@ -390,8 +410,11 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
 // is hidden and the style panel drops the whole (now-empty) group. `align-self`/`order`
 // apply to both flex and grid items; `justify-self`/`grid-column`/`grid-row` are grid-only;
 // `flex-grow`/`flex-shrink`/`flex-basis` are flex-only.
-const PARENT_FLEX_OR_GRID = { trait: 'display', values: ['flex', 'grid'], scope: 'parent' };
-const PARENT_FLEX = { trait: 'display', values: 'flex', scope: 'parent' };
+// 'inline-flex' IS flex for every layout question asked here — ButtonBlock has shipped it as a
+// constructor default forever, which made Layout badge "4" with three of the four controls hidden
+// and the Display select blank (no option for its own value). The families, not the keywords.
+const PARENT_FLEX_OR_GRID = { trait: 'display', values: ['flex', 'inline-flex', 'grid'], scope: 'parent' };
+const PARENT_FLEX = { trait: 'display', values: ['flex', 'inline-flex'], scope: 'parent' };
 const PARENT_GRID = { trait: 'display', values: 'grid', scope: 'parent' };
 class ChildLayoutGroupStyleConfig extends GroupStyleConfig {
     constructor() {
@@ -1523,7 +1546,13 @@ class ComponentRegistryService {
     }
     createConfig(type) {
         const configType = this.components[type]?.config;
-        return configType ? new configType() : null;
+        if (!configType)
+            return null;
+        const config = new configType();
+        // Flavor layer (F1): every new element is born wearing the pack's token references.
+        // DEFAULT_FLAVOR until F2 lets the org choose; see flavors-and-theming-plan.md §4.
+        applyFlavorDefaults(config, DEFAULT_FLAVOR);
+        return config;
     }
     register(type, component, config) {
         this.components[type] = { type, component, config };