@vectoriox/iox-builder 4.1.2 → 4.3.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -8534,6 +8534,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 /** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
 const IOX_FONT_MANAGER = new InjectionToken('IOX_FONT_MANAGER');
 
+/**
+ * STRUCTURE OPS (A4) — the one-click layout changes people actually make at a narrow width, as pure
+ * "what to write" functions. Each returns a flat style map the caller stores in the node's
+ * `responsive[bp]` layer (or in the base styles at Base) through the shared `setOverride`.
+ *
+ * All of it is ordinary CSS the SSR engine already renders — there is no second tree and no
+ * per-width HTML. See responsive-breakpoints-plan.md (D5).
+ */
+/** CSS lengths that are a FIXED pixel size — the ones that stop a layout fitting a phone. */
+const PX_LENGTH = /^-?\d+(\.\d+)?px$/i;
+/**
+ * Hide / show at a width. Hiding is `display: none` INSIDE that breakpoint's rules — the node stays
+ * in the DOM and in the SSR output (one HTML document serves every width), so hidden content still
+ * ships bytes and is still indexed. Showing again clears the override rather than guessing a value.
+ *
+ * @returns the props to write, or `null` meaning "clear the display override at this breakpoint".
+ */
+function visibilityProps(hidden) {
+    return hidden ? { display: 'none' } : null;
+}
+/** True when this node is hidden by the resolved styles at some width. */
+function isHiddenAt(resolvedStyleProps) {
+    return String(resolvedStyleProps?.['display'] ?? '') === 'none';
+}
+/**
+ * Stack a container's children in one column — the most common mobile edit, and four separate
+ * controls today (display, direction, wrap, columns). A grid becomes a single-column grid; anything
+ * else becomes a column flex box.
+ */
+function stackChildrenProps(resolvedStyleProps) {
+    const display = String(resolvedStyleProps?.['display'] ?? '');
+    if (display === 'grid' || display === 'inline-grid') {
+        return { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' };
+    }
+    return { display: 'flex', flexDirection: 'column', flexWrap: 'nowrap' };
+}
+/**
+ * Collapse a grid to `count` columns (a flex row is stacked instead — it has no column track).
+ * `count` is clamped to at least 1.
+ */
+function collapseColumnsProps(resolvedStyleProps, count) {
+    const columns = Math.max(1, Math.floor(count));
+    const display = String(resolvedStyleProps?.['display'] ?? '');
+    if (display === 'grid' || display === 'inline-grid') {
+        return { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+    }
+    return columns === 1 ? stackChildrenProps(resolvedStyleProps) : { flexWrap: 'wrap' };
+}
+/** How many equal columns a `repeat(N, …)` track list describes, or null when it isn't one. */
+function columnCountOf(resolvedStyleProps) {
+    const match = /^repeat\(\s*(\d+)\s*,/.exec(String(resolvedStyleProps?.['gridTemplateColumns'] ?? ''));
+    return match ? Number(match[1]) : null;
+}
+/**
+ * Make fixed pixel sizes fluid: `width: 520px` → `width: 100%` with the original kept as
+ * `max-width`, so the element still never exceeds its designed size on a wide screen. `minWidth` in
+ * px is dropped to 0 — it is what actually forces horizontal scrolling on a phone.
+ *
+ * @returns the props to write; EMPTY when there is nothing fixed to fluidise.
+ */
+function fluidiseProps(resolvedStyleProps) {
+    const out = {};
+    const width = String(resolvedStyleProps?.['width'] ?? '');
+    const minWidth = String(resolvedStyleProps?.['minWidth'] ?? '');
+    if (PX_LENGTH.test(width)) {
+        out['width'] = '100%';
+        const maxWidth = String(resolvedStyleProps?.['maxWidth'] ?? '');
+        if (!maxWidth || maxWidth === 'none')
+            out['maxWidth'] = width;
+    }
+    if (PX_LENGTH.test(minWidth) && parseFloat(minWidth) > 0)
+        out['minWidth'] = '0px';
+    return out;
+}
+/** True when `fluidiseProps` would change anything — drives the button's disabled state. */
+function canFluidise(resolvedStyleProps) {
+    return Object.keys(fluidiseProps(resolvedStyleProps)).length > 0;
+}
+/**
+ * Reorder children AT ONE WIDTH using CSS `order`, leaving the tree — and so the DOM and
+ * screen-reader order — untouched. Returns one value per child BY CHILD INDEX: the `order` it must
+ * take, or `null` for "no override needed".
+ *
+ * Either every child gets an explicit `order` or none does: CSS defaults `order` to 0, so a partial
+ * set would mix overridden children with unordered ones and read as an arbitrary interleave.
+ *
+ * @param count  How many children there are.
+ * @param from   Index of the child being moved.
+ * @param to     Index it should occupy.
+ */
+function reorderProps(count, from, to) {
+    const none = Array.from({ length: Math.max(0, count) }, () => null);
+    if (from < 0 || from >= count || to < 0 || to >= count || from === to)
+        return none;
+    // Visual order after the move, as a list of CHILD indices.
+    const sequence = Array.from({ length: count }, (_, i) => i);
+    sequence.splice(to, 0, ...sequence.splice(from, 1));
+    const orderByChild = none.slice();
+    sequence.forEach((childIndex, position) => { orderByChild[childIndex] = position; });
+    return orderByChild;
+}
+
+/**
+ * ESSENTIALS (B3) — the handful of style controls that matter first for each component type.
+ *
+ * The style panel carries 94 controls across ten groups, ranked by nothing: the control you want for
+ * a heading sits at the same visual weight as `backdrop-filter`. The panel shows this short list in
+ * a band at the top; everything else stays exactly where it is, one click away, and reachable by
+ * search. Nothing is removed and nothing changes group.
+ *
+ * A data table, not per-component code: adding a type is one row. Types with no row fall back to
+ * `DEFAULT_ESSENTIAL_TRAITS`, so a new component is never worse off than today.
+ */
+const ESSENTIAL_TRAITS_BY_TYPE = Object.freeze({
+    Heading: ['fontFamily', 'fontSize', 'fontWeight', 'color', 'textAlign', 'margin'],
+    Text: ['fontFamily', 'fontSize', 'color', 'lineHeight', 'textAlign', 'margin'],
+    Button: ['backgroundColor', 'color', 'padding', 'borderRadius', 'fontSize'],
+    ButtonBlock: ['backgroundColor', 'padding', 'borderRadius', 'width', 'justifyContent'],
+    Link: ['color', 'fontSize', 'textDecoration', 'fontWeight'],
+    Image: ['width', 'height', 'objectFit', 'aspectRatio', 'borderRadius'],
+    Icon: ['fontSize', 'color'],
+    Container: ['display', 'flexDirection', 'gap', 'padding', 'width', 'backgroundColor'],
+    LinkedContainer: ['display', 'flexDirection', 'gap', 'padding', 'width', 'backgroundColor'],
+    Section: ['padding', 'backgroundColor', 'minHeight', 'display', 'justifyContent'],
+    Card: ['width', 'padding', 'backgroundColor', 'borderRadius', 'boxShadow'],
+    List: ['display', 'gap', 'padding', 'markerColor'],
+    ListItem: ['padding', 'fontSize', 'color'],
+    Repeater: ['display', 'flexDirection', 'gap', 'gridTemplateColumns'],
+    Divider: ['borderWidth', 'borderColor', 'width', 'margin'],
+    Spacer: ['height'],
+    SliderContainer: ['width', 'height', 'gap'],
+    SliderSlide: ['width', 'padding', 'backgroundColor'],
+    Gallery: ['width', 'aspectRatio', 'gap', 'borderRadius'],
+});
+/** For any type without its own row — size, spacing and background suit almost anything. */
+const DEFAULT_ESSENTIAL_TRAITS = Object.freeze(['width', 'height', 'padding', 'margin', 'backgroundColor']);
+/** The essential trait NAMES for a component type, in the order they should be shown. */
+function essentialTraitsFor(type) {
+    return (type && ESSENTIAL_TRAITS_BY_TYPE[type]) || DEFAULT_ESSENTIAL_TRAITS;
+}
+/**
+ * Does `label` or `name` match a control search? Case-insensitive substring on either, so "shadow"
+ * finds `boxShadow` ("Box shadow") and "radius" finds `borderRadius`.
+ */
+function matchesControlSearch(name, label, term) {
+    const needle = term.trim().toLowerCase();
+    if (!needle)
+        return true;
+    return name.toLowerCase().includes(needle) || (label ?? '').toLowerCase().includes(needle);
+}
+
 class BuilderButtonComponentConfig extends ComponentConfig {
     constructor() {
         super('Button', 'app-builder-button', 'ph-thin ph-cursor-click', 'Basic');
@@ -9087,5 +9238,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, 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, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, 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, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, findParentOf, flattenSchemaFields, generateNodeId, nodeAncestorPath, nodeAncestorPathInEither, resolveTraitControllerType, resolveTraitOptions, wrapNode };
+export { ACTION_TYPE_OPTIONS, 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, buildFullStyleTraits, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, stackChildrenProps, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map