@vectoriox/iox-builder 1.6.8 → 1.6.10

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i14 from '@vectoriox/iox-ui';
-import { ComponentInstanceRegistryService, IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
+import { ComponentInstanceRegistryService, DEFAULT_WIDTH_BY_TYPE, compileDeclarations, IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject } from 'rxjs';
@@ -2086,6 +2086,12 @@ class ComponentConfig {
     /** Override specific trait defaults after styleTraits are set.
      *  Call this at the end of each subclass constructor. */
     applyStyleDefaults(defaults) {
+        // Single source of truth for container-type width defaults: when a subclass does
+        // not set width explicitly, fill it from the shared DEFAULT_WIDTH_BY_TYPE map — the
+        // same map the SSR engine resolves from. See render-parity.md.
+        if (defaults['width'] === undefined && DEFAULT_WIDTH_BY_TYPE[this.type] !== undefined) {
+            defaults = { ...defaults, width: DEFAULT_WIDTH_BY_TYPE[this.type] };
+        }
         for (const group of this.styleTraits) {
             for (const trait of group.traits) {
                 if (defaults[trait.name] !== undefined) {
@@ -2618,32 +2624,14 @@ class StyleRegistryService {
         }
     }
     compile(className, styles) {
-        const entries = Object.entries(styles)
-            .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => {
-            const val = this.rewriteVh(String(v));
-            const bang = StyleRegistryService.IMPORTANT_PROPS.has(k) ? ' !important' : '';
-            return `  ${this.toKebabCase(k)}: ${val}${bang};`;
-        });
-        if (!entries.length)
+        // Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
+        // the shared style-compiler so the SSR engine produces byte-identical output.
+        // The inner/outer partition + selector emission stay here (builder-only concern).
+        const decls = compileDeclarations(styles, StyleRegistryService.IMPORTANT_PROPS);
+        if (!decls.length)
             return '';
-        return `.${className} {\n${entries.join('\n')}\n}`;
-    }
-    /**
-     * Rewrite viewport-relative units so they resolve to the simulated canvas
-     * dimensions rather than the real browser viewport.
-     *
-     * --preview-vh / --preview-vw are set by BuilderComponent via ResizeObserver
-     * and viewport-state subscription. In production (no variables defined) the
-     * fallbacks `1vh` / `1vw` restore the original browser behaviour.
-     */
-    rewriteVh(value) {
-        return value
-            .replace(/(-?\d*\.?\d+)vh/g, 'calc($1 * var(--preview-vh, 1vh))')
-            .replace(/(-?\d*\.?\d+)vw/g, 'calc($1 * var(--preview-vw, 1vw))');
-    }
-    toKebabCase(str) {
-        return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+        const body = decls.map(d => `  ${d};`).join('\n');
+        return `.${className} {\n${body}\n}`;
     }
     flush() {
         if (!this.styleEl || this._flushPending)
@@ -7111,7 +7099,6 @@ class BuilderContainerComponentConfig extends ComponentConfig {
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: 'auto',
             minHeight: '200px',
             display: 'block',
@@ -7126,7 +7113,6 @@ class BuilderDividerComponentConfig extends ComponentConfig {
         this.traits = [];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: '1px',
             backgroundColor: '#cccccc',
             margin: '8px 0px 8px 0px',
@@ -7251,7 +7237,6 @@ class BuilderListItemComponentConfig extends ComponentConfig {
         this.styleTraits = buildFullStyleTraits();
         this.children = [];
         this.applyStyleDefaults({
-            width: '100%',
             display: 'block',
             backgroundColor: 'transparent',
         });
@@ -7272,7 +7257,6 @@ class TextBlockComponentConfig extends ComponentConfig {
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
             display: 'block',
-            width: '100%',
             height: 'auto',
             minHeight: '20px',
             padding: '10px',
@@ -7305,7 +7289,6 @@ class BuilderListComponentConfig extends ComponentConfig {
             this.makeListItem(),
         ];
         this.applyStyleDefaults({
-            width: '100%',
             display: 'block',
             backgroundColor: 'transparent',
             padding: '0px 0px 0px 24px',
@@ -7343,7 +7326,6 @@ class RepeaterComponentConfig extends ComponentConfig {
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: 'auto',
         });
     }
@@ -7512,9 +7494,7 @@ class SliderContainerConfig extends ComponentConfig {
             new BackgroundGroupStyleConfig(),
             new EffectsGroupStyleConfig(),
         ];
-        this.applyStyleDefaults({
-            width: '100%',
-        });
+        this.applyStyleDefaults({});
     }
 }
 
@@ -7524,7 +7504,6 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
         this.traits = [];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: '40px',
         });
     }