@vectoriox/iox-builder 1.4.11 → 1.4.13

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1718,17 +1718,25 @@ class StyleRegistryService {
         this.rules = new Map();
         this.styleEl = null;
     }
-    /** Properties that must live on the wrapper element to affect the parent layout. */
+    /**
+     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
+     * affect how the element participates in its PARENT layout (flex/block flow).
+     * Everything else goes to the INNER element (.iox-node-{id}).
+     *
+     * Exception — out-of-flow positioning (position:fixed/absolute):
+     * When position is fixed or absolute, width is redirected to the inner element
+     * (the positioned one) and a default width:100% is added if none is set, so the
+     * element stays visible. top/right/bottom/left/zIndex are always inner because
+     * they are co-ordinates of the positioned element, not the flow wrapper.
+     * position itself goes to inner with `!important` to beat component-scoped CSS.
+     */
     static { this.OUTER_PROPS = new Set([
         'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
         'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
         'width',
-        // position must go to the outer wrapper so that position:fixed/absolute takes
-        // the WHOLE block out of flow. Inner component-scoped CSS (e.g. .section-root
-        // { position: relative }) has higher specificity than .iox-node-{id} and would
-        // silently win — putting position on the outer class bypasses that entirely.
-        'position',
     ]); }
+    /** Properties that need !important on the inner element to beat Angular's scoped-CSS specificity boost. */
+    static { this.IMPORTANT_PROPS = new Set(['position']); }
     init() {
         this.styleEl = document.createElement('style');
         this.styleEl.id = 'iox-runtime-styles';
@@ -1761,16 +1769,24 @@ class StyleRegistryService {
             this.flush();
             return;
         }
+        const pos = String(styles['position'] ?? '');
+        const isOutOfFlow = pos === 'fixed' || pos === 'absolute';
         const inner = {};
         const outer = {};
         for (const [k, v] of Object.entries(styles)) {
-            if (StyleRegistryService.OUTER_PROPS.has(k)) {
+            const wantsOuter = StyleRegistryService.OUTER_PROPS.has(k);
+            // width goes to inner for fixed/absolute (the positioned element owns its own width)
+            if (wantsOuter && !(isOutOfFlow && k === 'width')) {
                 outer[k] = v;
             }
             else {
                 inner[k] = v;
             }
         }
+        // Ensure fixed/absolute elements stay visible when no explicit width is set
+        if (isOutOfFlow && inner['width'] === undefined) {
+            inner['width'] = '100%';
+        }
         const innerCss = this.compile(`iox-node-${nodeId}`, inner);
         const outerCss = this.compile(`iox-outer-${nodeId}`, outer);
         const combined = [innerCss, outerCss].filter(Boolean).join('\n');
@@ -1822,7 +1838,11 @@ class StyleRegistryService {
     compile(className, styles) {
         const entries = Object.entries(styles)
             .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => `  ${this.toKebabCase(k)}: ${this.rewriteVh(String(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)
             return '';
         return `.${className} {\n${entries.join('\n')}\n}`;