@vectoriox/iox-builder 1.6.7 → 1.6.9

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, compileDeclarations, IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject } from 'rxjs';
@@ -2618,32 +2618,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)
@@ -5523,11 +5505,16 @@ class SliderContainerComponent {
         if (v === this._style)
             return;
         this._style = v;
-        // Rebuild cached value so ngStyle only re-applies when input actually changed.
-        // Avoids DOM style-attribute mutations on every CD tick → prevents MutationObserver spam.
-        this._editShellStyle = { ...v, position: 'relative' };
+        // `direction` is driven by the `dir` (Language direction) trait via [style.direction].
+        // Strip it from the ngStyle map: NgStyle writes the inline style last and would otherwise
+        // override the dir-driven direction with the generic Layout default → RTL wouldn't apply.
+        // Rebuild cached objects so ngStyle only re-applies on real input changes (avoids MO spam).
+        const { direction: _dropDirection, ...rest } = v || {};
+        this._previewStyle = rest;
+        this._editShellStyle = { ...rest, position: 'relative' };
     }
     get style() { return this._style; }
+    get previewStyle() { return this._previewStyle; }
     get editShellStyle() { return this._editShellStyle; }
     get source() { return this._source; }
     set source(value) {
@@ -5564,6 +5551,7 @@ class SliderContainerComponent {
         this.activatedRoute = activatedRoute;
         this.children = [];
         this._style = {};
+        this._previewStyle = {};
         this._editShellStyle = { position: 'relative' };
         this.nodeId = '';
         this.dropListId = '';
@@ -6014,7 +6002,7 @@ class SliderContainerComponent {
              #swiperEl
              class="swiper"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="style"
+             [ngStyle]="previewStyle"
              [attr.dir]="dir"
              [style.direction]="dir"
              [style.--swiper-navigation-color]="navigationColor || null"
@@ -6165,7 +6153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
              #swiperEl
              class="swiper"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="style"
+             [ngStyle]="previewStyle"
              [attr.dir]="dir"
              [style.direction]="dir"
              [style.--swiper-navigation-color]="navigationColor || null"