@vectoriox/iox-builder 7.0.1 → 8.0.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 i1 from '@vectoriox/iox-ui';
-import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, elementStyleById, 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, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, elementStyleById, 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';
@@ -1664,16 +1664,33 @@ class ComponentRegistryService {
     }
     /** The unstyled base style map of a NEW node of the type — `switchElementStyle`'s baseline. */
     baselineStyleProps(type) {
+        const out = this.adoptionBaseline(type);
+        for (const [name, value] of Object.entries(NEW_NODE_STYLE_DEFAULTS))
+            if (name in out)
+                out[name] = value;
+        return out;
+    }
+    /** What an untouched SAVED node of the type holds — its constructor defaults, nothing on top.
+     *  Adopt (DS7) rewrites an owned trait only while it still holds this. */
+    adoptionBaseline(type) {
         const out = {};
         for (const group of this.createBaseConfig(type)?.styleTraits ?? []) {
             for (const trait of group.traits ?? [])
                 out[trait.name] = trait.default;
         }
-        for (const [name, value] of Object.entries(NEW_NODE_STYLE_DEFAULTS))
-            if (name in out)
-                out[name] = value;
         return out;
     }
+    /** The context `adoptElementStyles` (design-core) reads baselines from. */
+    adoptionContext() {
+        const cache = new Map();
+        return {
+            baseline: type => {
+                if (!cache.has(type))
+                    cache.set(type, this.adoptionBaseline(type));
+                return cache.get(type);
+            },
+        };
+    }
     register(type, component, config) {
         this.components[type] = { type, component, config };
     }
@@ -1686,13 +1703,6 @@ class ComponentRegistryService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ComponentRegistryService, decorators: [{
             type: Injectable
         }] });
-/**
- * What a new node holds before its element style is written. `color: inherit` because a new node
- * belongs to the section it is dropped into: running text inherits (contract `body`/`lead`), so a
- * literal on any ancestor — a Form, a slide, a field group — would override the section's text.
- * A style that owns a colour (headings, buttons, notices) writes its own over this.
- */
-const NEW_NODE_STYLE_DEFAULTS = { color: 'inherit' };
 /** A new node AND the default children its config builds (a palette Form's fields, submit and
  *  notices) are all new elements: each wears its type's default style. */
 function wearDefaultStyles(node) {
@@ -5076,13 +5086,16 @@ class RenderDirective {
         // template node is selectable/editable. Skip overlay registration + interaction
         // wiring for them so they can't be hovered, selected, or edited on the canvas.
         const isPreviewClone = !!node.__previewClone;
+        // WRAPPER-COLLAPSE (opt-in via ioxDragSourceId): the HOST is the flex/grid item, so it carries
+        // `iox-outer-{id}` (margin, width, grid placement) IN ADDITION to `iox-node-{id}` (visual) — one
+        // element, like the engine. A display-only clone (a repeater row, a design specimen) is laid out
+        // the same way: it only skips drag and selection below. Without the class a clone lost every
+        // OUTER prop — its width, margin and grid placement — on the canvas alone.
+        if (nativeEl && this.ioxDragSourceId != null && cssId)
+            nativeEl.classList.add(`iox-outer-${cssId}`);
         if (nativeEl && !isPreviewClone) {
-            // WRAPPER-COLLAPSE (opt-in via ioxDragSourceId): the HOST is the flex/grid item, so it
-            // carries `iox-outer-{id}` (margin/width) IN ADDITION to `iox-node-{id}` (visual) — one
-            // element, like the engine — and drag is registered on it (the wrapper is gone). The
-            // StyleRegistry's split still works: both classes are on this one host.
+            // Drag is registered on the collapsed host (the wrapper is gone).
             if (this.ioxDragSourceId != null && cssId) {
-                nativeEl.classList.add(`iox-outer-${cssId}`);
                 const sourceId = this.ioxDragSourceId;
                 this.dragEngine.registerDraggable(nativeEl, () => ({
                     type: 'internal',
@@ -9893,10 +9906,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }] } });
 
 const MAX_HISTORY = 50;
+const clone = (value) => (value === undefined ? value : JSON.parse(JSON.stringify(value)));
 /**
  * BuilderHistoryService — snapshot-based undo/redo for the page builder.
  *
- * Snapshots are JSON deep-clones of the full layout array.
+ * Snapshots are JSON deep-clones of the full layout array; a step that also changed state outside
+ * the layout records that change, so one undo reverts both.
  * Session-only — not persisted to the backend.
  * Scoped to PageUiComponent.providers[] — one history stack per builder instance.
  */
@@ -9907,8 +9922,8 @@ class BuilderHistoryService {
     }
     get canUndo() { return this._past.length > 1; }
     get canRedo() { return this._future.length > 0; }
-    push(layout) {
-        this._past.push({ layout: JSON.parse(JSON.stringify(layout)), timestamp: Date.now() });
+    push(layout, change) {
+        this._past.push({ layout: clone(layout), timestamp: Date.now(), ...(change ? { change: clone(change) } : {}) });
         if (this._past.length > MAX_HISTORY) {
             this._past.shift();
         }
@@ -9919,19 +9934,22 @@ class BuilderHistoryService {
             return null;
         const current = this._past.pop();
         this._future.unshift(current);
-        return JSON.parse(JSON.stringify(this._past[this._past.length - 1].layout));
+        return this.step(this._past[this._past.length - 1].layout, current.change?.before, !!current.change);
     }
     redo() {
         if (!this.canRedo)
             return null;
         const next = this._future.shift();
         this._past.push(next);
-        return JSON.parse(JSON.stringify(next.layout));
+        return this.step(next.layout, next.change?.after, !!next.change);
     }
     clear() {
         this._past = [];
         this._future = [];
     }
+    step(layout, restore, changed) {
+        return changed ? { layout: clone(layout), restore: clone(restore) } : { layout: clone(layout) };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderHistoryService }); }
 }
@@ -10634,12 +10652,18 @@ function wearing(node, styleId) {
     applyElementStyle(node, styleId);
     return node;
 }
+/** A Text node: a new Text wears `body` and the palette's 10px padding; a specimen's text sits flush. */
 function text(content, createConfig, styleId, styles = {}) {
     const node = textNode(content, createConfig);
     if (styleId)
         wearing(node, styleId);
-    return styled(node, styles);
+    return styled(node, { padding: '0', margin: '0', ...styles });
 }
+/** A button's label takes the BUTTON's type (the style's size, weight, case, tracking) — not body's. */
+const BUTTON_LABEL = {
+    color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', lineHeight: 'inherit',
+    letterSpacing: 'inherit', textTransform: 'inherit',
+};
 function withChildren(node, children) {
     if (!node || children.some(c => !c))
         return null;
@@ -10665,7 +10689,7 @@ function button(styleId, label, createConfig, styles = {}) {
         return null;
     setTrait(btn, 'tag', 'button');
     styled(btn, styles);
-    return withChildren(btn, [text(label, createConfig, undefined, { color: 'inherit' })]);
+    return withChildren(btn, [text(label, createConfig, undefined, BUTTON_LABEL)]);
 }
 /** A Container sized by its content: the palette Container's 200px drop-zone min-height is canvas
  *  furniture, and a specimen has no drop zone. */