@vectoriox/iox-ui 4.16.1 → 4.17.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -2275,37 +2275,45 @@ class GalleryLoop {
  * same index 0 — so the static frame and the first live frame match and there is no hydration flash.
  */
 class ClientGalleryComponent {
+    /** Manual images — `GalleryImage[]` or a plain `string[]` of URLs (normalised on set). */
+    set images(v) {
+        this._images = v ?? [];
+        this.urls = resolveGalleryUrls(this.normalizeImages(), null);
+        // A live edit (image added/removed/reordered) while the loop runs → restart on the new set so
+        // the canvas reflects it and the loop cycles through the new count.
+        if (this.loopActive)
+            this.startLoop();
+    }
+    get images() { return this._images; }
+    set showDuration(v) { this._showDuration = v; this.loop?.setDurations(v, this._fadeDuration); }
+    get showDuration() { return this._showDuration; }
+    set fadeDuration(v) { this._fadeDuration = v; this.loop?.setDurations(this._showDuration, v); }
+    get fadeDuration() { return this._fadeDuration; }
     constructor(platformId, cdr) {
         this.cdr = cdr;
         this.nodeId = '';
-        /** Manual images — `GalleryImage[]` or a plain `string[]` of URLs (normalised on set). */
-        this.images = [];
         this.effect = 'fade';
-        this.showDuration = 4000;
-        this.fadeDuration = 1000;
         this.autoStart = true;
         /** Layout mode — only `'stack'` is rendered in v1 (`'grid'` scaffolded for later). */
         this.layout = 'stack';
-        /** The flat, display-ready URLs the loop cycles. Recomputed when `images` changes. */
+        // ── Inputs that mutate live state use SETTERS, not ngOnChanges ──────────────────────────────
+        // The builder trait panel pushes edits via DIRECT property assignment (`instance.images = v`),
+        // which does NOT trigger ngOnChanges — so a gallery that recomputed in ngOnChanges never refreshed
+        // when you added an image on the canvas. A setter fires on BOTH direct assignment (builder panel)
+        // and setInput (SSR engine / render.directive), so it's the one path that works everywhere.
+        this._images = [];
+        this._showDuration = 4000;
+        this._fadeDuration = 1000;
+        /** The flat, display-ready URLs the loop cycles. Recomputed whenever `images` is set. */
         this.urls = [];
         this.currentIndex = 0;
         this.fadingOutIndex = null;
         this.started = false;
+        /** True once the loop has been started (in ngAfterViewInit) — gates the setter-driven restart. */
+        this.loopActive = false;
         this.loop = null;
         this.isBrowser = isPlatformBrowser(platformId);
     }
-    ngOnChanges(changes) {
-        if (changes['images']) {
-            this.urls = resolveGalleryUrls(this.normalizeImages(), null);
-        }
-        if (this.loop && (changes['showDuration'] || changes['fadeDuration'])) {
-            this.loop.setDurations(this.showDuration, this.fadeDuration);
-        }
-        // If the image set changed after the loop was already running, restart it on the new count.
-        if (this.loop && changes['images'] && !changes['images'].firstChange) {
-            this.startLoop();
-        }
-    }
     ngAfterViewInit() {
         if (this.isBrowser && this.autoStart) {
             this.startLoop();
@@ -2314,6 +2322,7 @@ class ClientGalleryComponent {
     ngOnDestroy() {
         this.loop?.stop();
         this.loop = null;
+        this.loopActive = false;
     }
     /** Per-slide inline style. Before the loop activates (server + no-JS + pre-first-frame) the first
      *  image is the visible static frame; once running, the effect owns each slide's look. */
@@ -2333,6 +2342,7 @@ class ClientGalleryComponent {
     startLoop() {
         if (!this.isBrowser)
             return;
+        this.loopActive = true;
         this.loop?.stop();
         this.loop = new GalleryLoop({
             showMs: this.showDuration,
@@ -2350,7 +2360,7 @@ class ClientGalleryComponent {
         return (this.images ?? []).map(img => (typeof img === 'string' ? { url: img } : img));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientGalleryComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientGalleryComponent, isStandalone: false, selector: "iox-gallery", inputs: { nodeId: "nodeId", images: "images", effect: "effect", showDuration: "showDuration", fadeDuration: "fadeDuration", autoStart: "autoStart", layout: "layout" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientGalleryComponent, isStandalone: false, selector: "iox-gallery", inputs: { nodeId: "nodeId", effect: "effect", autoStart: "autoStart", layout: "layout", images: "images", showDuration: "showDuration", fadeDuration: "fadeDuration" }, ngImport: i0, template: `
         <div class="iox-gallery" [class]="'iox-node-' + nodeId">
             <div *ngFor="let url of urls; index as i"
                  class="iox-gallery__img"
@@ -2376,18 +2386,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     args: [PLATFORM_ID]
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { nodeId: [{
                 type: Input
-            }], images: [{
-                type: Input
             }], effect: [{
                 type: Input
-            }], showDuration: [{
-                type: Input
-            }], fadeDuration: [{
-                type: Input
             }], autoStart: [{
                 type: Input
             }], layout: [{
                 type: Input
+            }], images: [{
+                type: Input
+            }], showDuration: [{
+                type: Input
+            }], fadeDuration: [{
+                type: Input
             }] } });
 
 const COMPONENTS = [
@@ -2835,6 +2845,83 @@ function composeVirtualTraits(raw, base = raw) {
     return result;
 }
 
+/**
+ * tree-relations — framework-agnostic helpers for reasoning about a rendered node
+ * tree's structural relationships. Lives in @vectoriox/iox-ui because BOTH renderers
+ * depend on iox-ui (the engine does NOT depend on iox-builder), so the same logic
+ * drives the builder canvas AND the SSR site — no fork.
+ * See iox-ai-guidance `architecture/builder/targeted-hover-state-plan.md`.
+ */
+/** The css id a node contributes to selectors: its clone `styleId`, else its own `id`. */
+function nodeCssId(node) {
+    return node.styleId ?? node.id;
+}
+/**
+ * Path of css ids from the root down to (and including) the node whose css id === `cssId`.
+ * Returns `null` when no node matches. First match wins (depth-first, pre-order).
+ */
+function pathToCssId(nodes, cssId) {
+    for (const node of nodes) {
+        const ownId = nodeCssId(node);
+        if (ownId === cssId)
+            return [ownId];
+        if (node.children?.length) {
+            const childPath = pathToCssId(node.children, cssId);
+            if (childPath)
+                return ownId ? [ownId, ...childPath] : childPath;
+        }
+    }
+    return null;
+}
+/**
+ * The css id of the NEAREST COMMON ANCESTOR of two nodes (identified by their css ids),
+ * used to scope a `:has()` targeted-state selector so it stays repetition-safe.
+ *
+ * The result may equal `styledCssId` (the trigger sits INSIDE the styled node) or
+ * `triggerCssId` (the styled node sits inside the trigger) — both are valid scopes;
+ * `buildTargetedStateSelector` picks the right selector shape for each. Returns
+ * `undefined` only when a valid scope can't exist: an id is blank, the two ids are the
+ * same node, or they share no ancestor in `root`. Callers MUST skip emitting the rule
+ * when this is `undefined` — never emit an unscoped (page-global) `:has()`, which would
+ * break under repetition.
+ */
+function nearestCommonAncestorId(root, styledCssId, triggerCssId) {
+    if (!styledCssId || !triggerCssId || styledCssId === triggerCssId)
+        return undefined;
+    const styledPath = pathToCssId(root, styledCssId);
+    const triggerPath = pathToCssId(root, triggerCssId);
+    if (!styledPath || !triggerPath)
+        return undefined;
+    // Walk both paths together; the last shared prefix element is the common ancestor.
+    let common;
+    const shorter = Math.min(styledPath.length, triggerPath.length);
+    for (let i = 0; i < shorter; i++) {
+        if (styledPath[i] !== triggerPath[i])
+            break;
+        common = styledPath[i];
+    }
+    return common;
+}
+/**
+ * Build the selector BODY (no leading `.`, matching the builder's `compile()` convention)
+ * for a targeted state, given the resolved scope. Three topologies, one shared rule:
+ *
+ *   - trigger INSIDE styled  (scope === styled):  `iox-node-{styled}:has(.iox-node-{trigger}:{base})`
+ *   - styled INSIDE trigger  (scope === trigger): `iox-node-{trigger}:{base} .iox-node-{styled}`
+ *   - separate subtrees      (scope is above both): `iox-node-{scope}:has(.iox-node-{trigger}:{base}) .iox-node-{styled}`
+ *
+ * `scopeCssId` MUST be a value returned by `nearestCommonAncestorId` for the same pair.
+ */
+function buildTargetedStateSelector(scopeCssId, triggerCssId, styledCssId, base) {
+    if (scopeCssId === styledCssId) {
+        return `iox-node-${styledCssId}:has(.iox-node-${triggerCssId}:${base})`;
+    }
+    if (scopeCssId === triggerCssId) {
+        return `iox-node-${triggerCssId}:${base} .iox-node-${styledCssId}`;
+    }
+    return `iox-node-${scopeCssId}:has(.iox-node-${triggerCssId}:${base}) .iox-node-${styledCssId}`;
+}
+
 /**
  * Shared RELATIVE (route-context) data resolving — the SINGLE source of truth for how a detail page
  * derives values FROM its current route item, consumed by BOTH the page builder (iox-cms-client) and
@@ -3540,5 +3627,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, ENVIRONMENT, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, applyBindingPipes, applyFeel, buildDataSourceFilter, buildRelatedFilter, buildTransitionTimeline, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, dataSourcePlanToRequest, effectiveTransitionId, excludeSelf, feelFor, getByPath, isReservedAlias, legacyEnterToTransition, matchRouteParams, normalizeCollectionResult, parseUrlList, planDataSource, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolvePageTransition, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, rewriteViewportUnits, stripSuppressedProps, styleKeyToKebab };
+export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, ENVIRONMENT, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, applyBindingPipes, applyFeel, buildDataSourceFilter, buildRelatedFilter, buildTargetedStateSelector, buildTransitionTimeline, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, dataSourcePlanToRequest, effectiveTransitionId, excludeSelf, feelFor, getByPath, isReservedAlias, legacyEnterToTransition, matchRouteParams, nearestCommonAncestorId, nodeCssId, normalizeCollectionResult, parseUrlList, planDataSource, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolvePageTransition, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, rewriteViewportUnits, stripSuppressedProps, styleKeyToKebab };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map