@vectoriox/iox-builder 4.4.0 → 4.5.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -8970,6 +8970,108 @@ function matchesControlSearch(name, label, term) {
     return name.toLowerCase().includes(needle) || (label ?? '').toLowerCase().includes(needle);
 }
 
+const GRID = (columns) => ({ display: 'grid', gridTemplateColumns: columns, gap: '24px', width: '100%' });
+const ONE_COLUMN = { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' };
+const LAYOUT_PRESETS = Object.freeze([
+    {
+        id: 'stack', name: 'Stack', icon: 'ph-thin ph-rows',
+        description: 'Vertical flow with even spacing.',
+        container: { display: 'flex', flexDirection: 'column', gap: '24px', width: '100%' },
+        childCount: 2,
+    },
+    {
+        id: 'two-columns', name: 'Two columns', icon: 'ph-thin ph-columns',
+        description: 'Side by side; stacks on a phone.',
+        container: GRID('repeat(2, minmax(0, 1fr))'),
+        containerResponsive: { [Breakpoint.Small]: ONE_COLUMN },
+        childCount: 2,
+    },
+    {
+        id: 'three-columns', name: 'Three columns', icon: 'ph-thin ph-columns',
+        description: 'Three across; two on a tablet, one on a phone.',
+        container: GRID('repeat(3, minmax(0, 1fr))'),
+        containerResponsive: {
+            [Breakpoint.Tablet]: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
+            [Breakpoint.Small]: ONE_COLUMN,
+        },
+        childCount: 3,
+    },
+    {
+        id: 'sidebar-main', name: 'Sidebar + main', icon: 'ph-thin ph-layout',
+        description: 'Fixed sidebar beside flexible content; the sidebar drops under it on a tablet.',
+        container: GRID('280px minmax(0, 1fr)'),
+        containerResponsive: { [Breakpoint.Tablet]: ONE_COLUMN },
+        childCount: 2,
+    },
+    {
+        id: 'card-grid', name: 'Card grid', icon: 'ph-thin ph-squares-four',
+        description: 'A grid of cards: three, then two, then one.',
+        container: GRID('repeat(3, minmax(0, 1fr))'),
+        containerResponsive: {
+            [Breakpoint.Tablet]: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
+            [Breakpoint.Small]: ONE_COLUMN,
+        },
+        childCount: 6,
+        child: { minHeight: '160px' },
+    },
+    {
+        id: 'split-hero', name: 'Split hero', icon: 'ph-thin ph-square-split-horizontal',
+        description: 'Text beside media; on a phone the media moves above the text.',
+        container: GRID('minmax(0, 1.2fr) minmax(0, 1fr)'),
+        containerResponsive: { [Breakpoint.Small]: ONE_COLUMN },
+        childCount: 2,
+        // On a phone the MEDIA (child 2) leads — CSS order only, the DOM order never changes.
+        childResponsive: [{ [Breakpoint.Small]: { order: '1' } }, { [Breakpoint.Small]: { order: '0' } }],
+    },
+]);
+/** Set a style trait's value on a node built from a component config. */
+function setStyleTrait(node, name, value) {
+    for (const group of node.styleTraits ?? []) {
+        const trait = group.traits.find(t => t.name === name);
+        if (trait) {
+            trait.default = value;
+            return;
+        }
+    }
+}
+function applyResponsive(node, layers) {
+    if (!layers)
+        return;
+    let responsive = node.responsive;
+    for (const [bp, styles] of Object.entries(layers)) {
+        for (const [prop, value] of Object.entries(styles ?? {})) {
+            responsive = setOverride(responsive, bp, prop, value);
+        }
+    }
+    node.responsive = responsive;
+}
+/**
+ * Build a preset's node tree. `createNode` makes an empty node of a type (the component registry in
+ * the builder) — passed in so this stays pure and testable.
+ *
+ * @returns the container node, or `null` when the container type can't be created.
+ */
+function buildLayoutPreset(def, createNode) {
+    const container = createNode('Container');
+    if (!container)
+        return null;
+    for (const [prop, value] of Object.entries(def.container))
+        setStyleTrait(container, prop, value);
+    applyResponsive(container, def.containerResponsive);
+    const children = [];
+    for (let i = 0; i < def.childCount; i++) {
+        const child = createNode('Container');
+        if (!child)
+            continue;
+        for (const [prop, value] of Object.entries(def.child ?? {}))
+            setStyleTrait(child, prop, value);
+        applyResponsive(child, def.childResponsive?.[i]);
+        children.push(child);
+    }
+    container.children = children;
+    return container;
+}
+
 class BuilderButtonComponentConfig extends ComponentConfig {
     constructor() {
         super('Button', 'app-builder-button', 'ph-thin ph-cursor-click', 'Basic');
@@ -9523,5 +9625,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, 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, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, 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, 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, buildFullStyleTraits, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, stackChildrenProps, summarise, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, 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, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, 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, 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, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map