@vectoriox/iox-builder 2.9.0 → 2.10.0

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 i16 from '@vectoriox/iox-ui';
-import { DEFAULT_WIDTH_BY_TYPE, ComponentInstanceRegistryService, compileDeclarations, composeVirtualTraits, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
+import { DEFAULT_WIDTH_BY_TYPE, ComponentInstanceRegistryService, buildTargetedStateSelector, compileDeclarations, composeVirtualTraits, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -113,7 +113,22 @@ const RELATIONAL_STATES = ['parent-hover'];
 const RELATIONAL_STATE_BASE = {
     'parent-hover': 'hover',
 };
-const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES];
+/**
+ * Targeted relational pseudo-classes — the styled element restyles when an ARBITRARY
+ * chosen element (the `trigger`, not the DOM parent) matches a pseudo-class. Compiled to
+ * `.iox-node-{scopeId}:has(.iox-node-{triggerId}:{base}) .iox-node-{id} { … }`, where
+ * `scopeId` is the NEAREST COMMON ANCESTOR of the styled node and the trigger. Scoping the
+ * `:has()` to that ancestor keeps the rule repetition-safe (each cloned subtree matches
+ * independently) with a single shared CSS rule.
+ *
+ * The trigger node id per state is stored on `ComponentNode.stateTriggers`.
+ * `TARGETED_STATE_BASE` maps each targeted state to the trigger's pseudo-class.
+ */
+const TARGETED_STATES = ['trigger-hover'];
+const TARGETED_STATE_BASE = {
+    'trigger-hover': 'hover',
+};
+const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES, ...TARGETED_STATES];
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
  * styleProps map. Used when editing a preset in the Style panel — the panel
@@ -2605,15 +2620,35 @@ class StyleRegistryService {
      * @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.
-     * @param relativeToId  Ancestor css id, required for RELATIONAL states
-     *                (e.g. 'parent-hover'). Compiles to
-     *                `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
+     * @param relativeToId  For RELATIONAL states (e.g. 'parent-hover') this is the ancestor
+     *                css id; compiles to `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
+     *                For TARGETED states (e.g. 'trigger-hover') this is the SCOPE css id
+     *                (nearest common ancestor of the styled node + trigger).
+     * @param triggerId  For TARGETED states only: the css id of the trigger node whose
+     *                pseudo-class drives the state. Compiles a `:has()`-scoped selector.
      */
-    upsert(nodeId, styles, state, relativeToId) {
+    upsert(nodeId, styles, state, relativeToId, triggerId) {
         if (!nodeId)
             return;
         if (state) {
             const key = `${nodeId}:${state}`;
+            // Targeted states (trigger-hover): the styled node restyles when an ARBITRARY chosen
+            // element is hovered. The selector is `:has()`-scoped to `relativeToId` (the nearest
+            // common ancestor of styled + trigger) so it stays repetition-safe with one shared rule.
+            if (TARGETED_STATES.includes(state)) {
+                const base = TARGETED_STATE_BASE[state];
+                const css = (relativeToId && triggerId && base)
+                    ? this.compile(buildTargetedStateSelector(relativeToId, triggerId, nodeId, base), styles)
+                    : '';
+                if (css) {
+                    this.rules.set(key, css);
+                }
+                else {
+                    this.rules.delete(key);
+                }
+                this.flush();
+                return;
+            }
             // Relational states (parent-hover): the pseudo-class lives on an ANCESTOR
             // and cascades to this element. Requires the ancestor's css id.
             if (RELATIONAL_STATES.includes(state)) {