@vectoriox/iox-ui 4.16.0 → 4.16.2

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"
@@ -2358,7 +2368,7 @@ class ClientGalleryComponent {
                  [ngStyle]="slideStyle(i)"></div>
             <div class="iox-gallery__overlay"></div>
         </div>
-    `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.iox-gallery{position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    `, isInline: true, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientGalleryComponent, decorators: [{
             type: Component,
@@ -2370,24 +2380,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                  [ngStyle]="slideStyle(i)"></div>
             <div class="iox-gallery__overlay"></div>
         </div>
-    `, standalone: false, styles: [":host{display:block;width:100%;height:100%}.iox-gallery{position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"] }]
+    `, standalone: false, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     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 = [