@vectoriox/iox-builder 1.5.10 → 1.6.1

package/fesm2022/vectoriox-iox-builder.mjs

@@ -271,6 +271,24 @@ class OverlayService {
         }
         return undefined;
     }
+    /**
+     * Walk up the DOM from a node's registered host element to the nearest ANCESTOR
+     * element that is itself a registered node. Used to resolve the immediate parent
+     * for relational style states (e.g. parent-hover). Returns undefined for root nodes.
+     */
+    getParentEntry(node) {
+        const ref = this.nodeMap.get(node);
+        if (!ref)
+            return undefined;
+        let el = ref.element.parentElement;
+        while (el) {
+            const match = this.findNodeByElement(el);
+            if (match)
+                return match;
+            el = el.parentElement;
+        }
+        return undefined;
+    }
     setHover(element, componentName, mode) {
         if (this.selectSubject.getValue()?.element === element)
             return;
@@ -1998,7 +2016,17 @@ const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
 const INTERACTION_STATES = ['hover', 'active', 'focus'];
 /** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
 const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
-const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES];
+/**
+ * Relational pseudo-classes — the styled element is a descendant, the pseudo-class
+ * lives on an ANCESTOR. Compiled to `.iox-node-{parentId}:{base} .iox-node-{id} { … }`,
+ * so they require the ancestor's css id (`relativeToId`) at compile time.
+ * `RELATIONAL_STATE_BASE` maps each relational state to the ancestor pseudo-class.
+ */
+const RELATIONAL_STATES = ['parent-hover'];
+const RELATIONAL_STATE_BASE = {
+    'parent-hover': 'hover',
+};
+const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_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
@@ -2468,19 +2496,38 @@ class StyleRegistryService {
      *
      * @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').
+     * @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} { … }`.
      */
-    upsert(nodeId, styles, state) {
+    upsert(nodeId, styles, state, relativeToId) {
         if (!nodeId)
             return;
         if (state) {
+            const key = `${nodeId}:${state}`;
+            // 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)) {
+                const base = RELATIONAL_STATE_BASE[state];
+                const css = (relativeToId && base)
+                    ? this.compile(`iox-node-${relativeToId}:${base} .iox-node-${nodeId}`, styles)
+                    : '';
+                if (css) {
+                    this.rules.set(key, css);
+                }
+                else {
+                    this.rules.delete(key);
+                }
+                this.flush();
+                return;
+            }
             // Structural pseudo-classes (first-child, last-child, nth-child) target the
             // outer wrapper element so they participate correctly in grid/flex layout.
             const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
             const css = this.compile(`${prefix}-${nodeId}:${state}`, styles);
-            const key = `${nodeId}:${state}`;
             if (css) {
                 this.rules.set(key, css);
             }
@@ -6259,24 +6306,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 class SliderSlideComponent {
-    set style(v) {
-        if (v === this._style)
-            return;
-        this._style = v;
-        // Strip width constraints; rebuild cached object so ngStyle only updates DOM
-        // when the input actually changed — prevents spurious MutationObserver triggers.
-        const { width, minWidth, maxWidth, ...rest } = v || {};
-        this._slideEditStyle = rest;
-    }
+    set style(v) { this._style = v; }
     get style() { return this._style; }
-    get slideEditStyle() { return this._slideEditStyle; }
     constructor(dragEngine, cdr, isPreview) {
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.isPreview = isPreview;
         this.children = [];
+        // Slide visual styles are applied via the shared `iox-node-<cssId>` CSS class
+        // (StyleRegistryService), not inline — so repeated preview clones inherit master
+        // style edits. Kept as an @Input so render.directive / style panel can still set it
+        // (read internally for CDK orientation) without an NG0303 warning.
         this._style = {};
-        this._slideEditStyle = {};
         this.nodeId = '';
         this.dropListId = '';
         this.childClick = new EventEmitter();
@@ -6295,7 +6336,6 @@ class SliderSlideComponent {
         <div *ngIf="isPreview"
              class="swiper-slide"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="style"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6320,14 +6360,13 @@ class SliderSlideComponent {
             </div>
         </div>
 
-        <!-- EDIT: plain block so it sits in the horizontal strip.
-             Width/min-width/max-width are stripped from ngStyle here — they belong on the
-             iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
-             div. Applying them here too would make the content 33% of 33%. -->
+        <!-- EDIT: plain block. Visual styles come from the shared iox-node-<cssId> CSS
+             class (StyleRegistryService), NOT inline — so repeated preview clones inherit
+             master-slide style edits through the shared rule. -->
         <div *ngIf="!isPreview"
              class="slide-edit-block"
+             [class.slide-empty]="!children.length"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="slideEditStyle"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6351,7 +6390,7 @@ class SliderSlideComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-edit-block.slide-empty{min-height:120px}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, decorators: [{
             type: Component,
@@ -6360,7 +6399,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         <div *ngIf="isPreview"
              class="swiper-slide"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="style"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6385,14 +6423,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             </div>
         </div>
 
-        <!-- EDIT: plain block so it sits in the horizontal strip.
-             Width/min-width/max-width are stripped from ngStyle here — they belong on the
-             iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
-             div. Applying them here too would make the content 33% of 33%. -->
+        <!-- EDIT: plain block. Visual styles come from the shared iox-node-<cssId> CSS
+             class (StyleRegistryService), NOT inline — so repeated preview clones inherit
+             master-slide style edits through the shared rule. -->
         <div *ngIf="!isPreview"
              class="slide-edit-block"
+             [class.slide-empty]="!children.length"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="slideEditStyle"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6416,7 +6453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
+    `, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-edit-block.slide-empty{min-height:120px}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -7452,5 +7489,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EffectsGroupStyleConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, IOX_SHOP_SERVICE, InteractionEngineService, InteractionPresetRegistryService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EffectsGroupStyleConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, IOX_SHOP_SERVICE, InteractionEngineService, InteractionPresetRegistryService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map