@vectoriox/iox-builder 1.3.0 → 1.4.1

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1308,6 +1308,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * space — it does not push sibling elements. Applying margin to the host element
  * (which IS the flex/block child in the parent container) makes it work correctly.
  *
+ * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
+ * and compiled to `.iox-node-{id}:hover { … }` selectors.
+ *
+ * Design token variables are stored under the reserved key `__tokens__` and
+ * compiled to a `:root { … }` block prepended to all other rules.
+ *
  * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
  */
 class StyleRegistryService {
@@ -1327,9 +1333,30 @@ class StyleRegistryService {
         this.styleEl.id = 'iox-runtime-styles';
         document.head.appendChild(this.styleEl);
     }
-    upsert(nodeId, styles) {
+    /**
+     * Write or update the base styles for a node, or a pseudo-class state override.
+     *
+     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
+     * @param styles  Flat CSS property map (camelCase keys)
+     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus').
+     *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
+     *                State rules are NOT partitioned into inner/outer.
+     */
+    upsert(nodeId, styles, state) {
         if (!nodeId)
             return;
+        if (state) {
+            const css = this.compile(`iox-node-${nodeId}:${state}`, styles);
+            const key = `${nodeId}:${state}`;
+            if (css) {
+                this.rules.set(key, css);
+            }
+            else {
+                this.rules.delete(key);
+            }
+            this.flush();
+            return;
+        }
         const inner = {};
         const outer = {};
         for (const [k, v] of Object.entries(styles)) {
@@ -1351,10 +1378,34 @@ class StyleRegistryService {
         }
         this.flush();
     }
+    /**
+     * Write the org-level design token variables as a `:root { … }` block.
+     * Token names should be CSS custom property names without the `--` prefix
+     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
+     * Pass an empty object to clear all tokens.
+     */
+    upsertTokens(tokens) {
+        const entries = Object.entries(tokens)
+            .filter(([, v]) => v !== undefined && v !== null && v !== '')
+            .map(([k, v]) => `  --${k}: ${v};`);
+        if (entries.length) {
+            this.rules.set('__tokens__', `:root {\n${entries.join('\n')}\n}`);
+        }
+        else {
+            this.rules.delete('__tokens__');
+        }
+        this.flush();
+    }
     remove(nodeId) {
         if (!nodeId)
             return;
+        // Remove base rule and all state rules for this node
         this.rules.delete(nodeId);
+        for (const key of this.rules.keys()) {
+            if (key.startsWith(`${nodeId}:`)) {
+                this.rules.delete(key);
+            }
+        }
         this.flush();
     }
     destroy() {
@@ -1378,7 +1429,12 @@ class StyleRegistryService {
     flush() {
         if (!this.styleEl)
             return;
-        this.styleEl.textContent = Array.from(this.rules.values()).join('\n');
+        // __tokens__ always first so variables are available to all subsequent rules
+        const tokenBlock = this.rules.get('__tokens__');
+        const rest = Array.from(this.rules.entries())
+            .filter(([k]) => k !== '__tokens__')
+            .map(([, v]) => v);
+        this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
         this.changes$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1485,6 +1541,15 @@ class RenderDirective {
         // Register CSS rules in the central stylesheet (inner + outer split).
         if (cssId) {
             this.styleRegistry.upsert(cssId, initialStyle);
+            // Restore per-state overrides saved from a previous session.
+            if (node.stateStyles) {
+                for (const state of Object.keys(node.stateStyles)) {
+                    const stateMap = node.stateStyles[state];
+                    if (stateMap && Object.keys(stateMap).length) {
+                        this.styleRegistry.upsert(cssId, stateMap, state);
+                    }
+                }
+            }
         }
         // Set nodeId — declared as @Input() on every builder component.
         if (cssId) {
@@ -3789,6 +3854,7 @@ const ACTION_TYPE_OPTIONS = [
     { value: 'toggleVisibility', label: 'Toggle visibility' },
 ];
 const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
+const SUPPORTED_STATES = ['hover', 'active', 'focus'];
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
  * styleProps map. Used when editing a preset in the Style panel — the panel
@@ -4800,5 +4866,5 @@ class TextBlockComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map