@vectoriox/iox-builder 1.2.9 → 1.4.0

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 }); }
@@ -3789,6 +3845,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
@@ -3826,6 +3883,7 @@ var TraitInputType;
     TraitInputType["Icon"] = "icon";
     TraitInputType["Media"] = "media";
     TraitInputType["FontFamily"] = "fontFamily";
+    TraitInputType["GridTemplate"] = "gridTemplate";
 })(TraitInputType || (TraitInputType = {}));
 function generateNodeId() {
     return Math.random().toString(36).substr(2, 9);
@@ -3888,6 +3946,7 @@ function resolveTraitControllerType(type) {
         case TraitInputType.Icon: return 'icon';
         case TraitInputType.Media: return 'media';
         case TraitInputType.FontFamily: return 'select';
+        case TraitInputType.GridTemplate: return 'gridTemplate';
         default: return 'text';
     }
 }
@@ -3932,13 +3991,20 @@ class PositionGroupStyleConfig extends GroupStyleConfig {
 class LayoutGroupStyleConfig extends GroupStyleConfig {
     constructor() {
         super(StyleCategory.Layout, [
-            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex'], 'block'),
+            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'grid'], 'block'),
+            // ── Flex-only ─────────────────────────────────────────────────────
             new TraitConfig('flexDirection', 'Direction', TraitInputType.SelectButton, [
                 { value: 'row', label: 'Horizontal', icon: 'ph-thin ph-arrow-right' },
                 { value: 'row-reverse', label: 'Horizontal Reversed', icon: 'ph-thin ph-arrow-left' },
                 { value: 'column', label: 'Vertical', icon: 'ph-thin ph-arrow-down' },
                 { value: 'column-reverse', label: 'Vertical Reversed', icon: 'ph-thin ph-arrow-up' },
             ], 'row', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
+                { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
+                { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
+                { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
+            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
+            // ── Shared flex + grid ────────────────────────────────────────────
             new TraitConfig('justifyContent', 'Justify', TraitInputType.SelectButton, [
                 { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
                 { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
@@ -3946,19 +4012,32 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
                 { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-horizontal' },
                 { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
                 { value: 'space-evenly', label: 'Space Evenly', icon: 'ph-thin ph-dots-six' },
-            ], 'flex-start', false, { trait: 'display', values: 'flex' }),
-            new TraitConfig('alignItems', 'Align', TraitInputType.SelectButton, [
+            ], 'flex-start', false, { trait: 'display', values: ['flex', 'grid'] }),
+            new TraitConfig('alignItems', 'Align Items', TraitInputType.SelectButton, [
                 { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
-                { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-top' },
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
                 { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
-                { value: 'flex-end', label: 'End', icon: 'ph-thin ph-align-bottom' },
-            ], 'stretch', false, { trait: 'display', values: 'flex' }),
-            new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
-                { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
-                { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
-                { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
-            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
-            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: 'flex' }),
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
+            ], 'stretch', false, { trait: 'display', values: ['flex', 'grid'] }),
+            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'grid'] }),
+            // ── Grid-only ─────────────────────────────────────────────────────
+            new TraitConfig('gridTemplateColumns', 'Columns', TraitInputType.GridTemplate, undefined, '1fr', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('gridTemplateRows', 'Rows', TraitInputType.GridTemplate, undefined, 'auto', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('justifyItems', 'Justify Items', TraitInputType.SelectButton, [
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-horizontal' },
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-left' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-right' },
+            ], 'stretch', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('alignContent', 'Align Content', TraitInputType.SelectButton, [
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
+                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-vertical' },
+                { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
+            ], 'stretch', false, { trait: 'display', values: 'grid' }),
+            // ── Direction (always visible) ────────────────────────────────────
             new TraitConfig('direction', 'Text Direction', TraitInputType.SelectButton, [
                 { value: 'ltr', label: 'LTR' },
                 { value: 'rtl', label: 'RTL' },
@@ -4778,5 +4857,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