@stemy/ngx-utils 19.7.7 → 19.7.8

package/fesm2022/stemy-ngx-utils.mjs

@@ -1,7 +1,7 @@
 import 'zone.js';
 import 'reflect-metadata';
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, untracked, computed, signal, inject, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, model, contentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, inject, untracked, computed, signal, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, Renderer2, model, contentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, Router, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer, ROUTES } from '@angular/router';
 import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, delay, timer, TimeoutError, combineLatest, of, lastValueFrom } from 'rxjs';
@@ -2503,14 +2503,17 @@ function provideEntryComponents(components, moduleId) {
         multi: true
     };
 }
+function provideOptions(options) {
+    return {
+        provide: OPTIONS_TOKEN,
+        useValue: options
+    };
+}
 function provideWithOptions(type, options) {
     return {
         useFactory: function (parent) {
             const providers = [
-                {
-                    provide: OPTIONS_TOKEN,
-                    useValue: options
-                },
+                provideOptions(options),
                 {
                     provide: type,
                     useClass: type
@@ -2524,6 +2527,10 @@ function provideWithOptions(type, options) {
         deps: [Injector]
     };
 }
+function injectOptions(defaults) {
+    const options = inject(OPTIONS_TOKEN, { optional: true });
+    return Object.assign({}, defaults, options || {});
+}
 
 class TimerUtils {
     static createTimeout(func, time) {
@@ -7765,14 +7772,6 @@ class InteractiveItemComponent {
     get shapes() {
         return this.mShapes;
     }
-    get hovered() {
-        return this.canvas?.hoveredItem === this;
-    }
-    set hovered(value) {
-        if (!this.canvas)
-            return;
-        this.canvas.hoveredItem = value ? this : null;
-    }
     get x() {
         return this.pos.x;
     }
@@ -7812,6 +7811,22 @@ class InteractiveItemComponent {
         this.validPos = new Point(value.x, value.y);
         this.valid = true;
     }
+    get hovered() {
+        return this.canvas?.hoveredItem === this;
+    }
+    set hovered(value) {
+        if (!this.canvas)
+            return;
+        this.canvas.hoveredItem = value ? this : null;
+    }
+    get selected() {
+        return this.canvas?.selectedItem === this;
+    }
+    set selected(value) {
+        if (!this.canvas)
+            return;
+        this.canvas.selectedItem = value ? this : null;
+    }
     constructor() {
         this.active = false;
         this.index = -1;
@@ -7873,7 +7888,7 @@ class InteractiveItemComponent {
     restrictPosition(x, y) {
         return {
             x: clamp(x, this.canvas.xRange),
-            y: this.canvas.infinite
+            y: this.canvas.isInfinite
                 ? overflow(y, this.canvas.yRange)
                 : clamp(y, this.canvas.yRange)
         };
@@ -7924,9 +7939,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+const emptyDash = [];
 class InteractiveCanvasComponent {
+    get isInfinite() {
+        return this.infinite();
+    }
+    get realWidth() {
+        return this.width();
+    }
+    get realHeight() {
+        return this.height();
+    }
     get items() {
-        return this.$items.value;
+        return this.itemList();
     }
     get canvas() {
         return this.canvasElem?.nativeElement;
@@ -7935,7 +7960,14 @@ class InteractiveCanvasComponent {
         return this.items[this.lockedIndex];
     }
     get selectedItem() {
-        return this.items[this.selectedIndex];
+        return this.items[this.selectedIndex()];
+    }
+    set selectedItem(item) {
+        const ix = !item ? -1 : this.items.indexOf(item);
+        const selected = untracked(() => this.selectedIndex());
+        if (ix === selected)
+            return;
+        this.selectedIndex.set(ix);
     }
     get hoveredItem() {
         return this.items[this.hoveredIndex];
@@ -7943,31 +7975,59 @@ class InteractiveCanvasComponent {
     set hoveredItem(item) {
         this.hoveredIndex = !item ? -1 : this.items.indexOf(item);
     }
-    constructor(renderer, universal) {
-        this.renderer = renderer;
-        this.universal = universal;
-        this.infinite = false;
-        this.resizeMode = "fit";
-        this.params = {};
-        this.debug = false;
-        this.horizontal = false;
-        this.selectedIndex = 0;
-        this.realWidth = 100;
-        this.realHeight = 100;
-        this.panOffset = 0;
-        this.renderCtx = {};
-        this.beforeItems = [];
-        this.afterItems = [];
-        this.selectedIndexChange = new EventEmitter();
-        this.onRotate = new EventEmitter();
-        this.onItemPan = new EventEmitter();
-        this.onItemPanned = new EventEmitter();
-        this.onPan = new EventEmitter();
-        this.onPanned = new EventEmitter();
-        this.$items = new BehaviorSubject([]);
+    constructor() {
+        /**
+         * Injectable options
+         * @private
+         */
+        this.options = injectOptions({
+            infinite: false,
+            resizeMode: "fit",
+            panOffset: 0
+        });
+        this.renderer = inject(Renderer2);
+        this.universal = inject(UniversalService);
+        /**
+         * Is the canvas infinitely scrollable?
+         */
+        this.infinite = input(this.options.infinite);
+        this.resizeMode = input(this.options.resizeMode);
+        this.horizontal = input(false);
+        /**
+         * Real life-size width of the canvas
+         */
+        this.width = input(100);
+        /**
+         * Real life-size height of the canvas
+         */
+        this.height = input(100);
+        /**
+         * Canvas params
+         */
+        this.params = input({}, {
+            transform: (v) => v || {}
+        });
+        /**
+         * Model signal for selected index
+         */
+        this.selectedIndex = model(0);
+        /**
+         * Relative offset of the panning. It is based on the rendered canvas height
+         */
+        this.panOffset = input(this.options.panOffset);
+        this.renderCtx = input({});
+        this.beforeItems = input([]);
+        this.afterItems = input([]);
+        this.onRotate = output();
+        this.onItemPan = output();
+        this.onItemPanned = output();
+        this.onPan = output();
+        this.onPanned = output();
+        this.itemList = contentChildren(InteractiveItemComponent);
         this.tempCanvas = this.universal.isServer ? null : document.createElement("canvas");
         this.shouldDraw = !this.universal.isServer;
         this.hoveredIndex = null;
+        this.oldLength = 0;
         this.xRange = [0, 1];
         this.yRange = [0, 1];
         this.ratio = 1;
@@ -7982,26 +8042,34 @@ class InteractiveCanvasComponent {
         this.touched = false;
         this.panStartRotation = 0;
         this.panStartPos = Point.Zero;
+        effect(() => {
+            const items = this.itemList();
+            const index = untracked(() => this.selectedIndex());
+            const grow = items.length > this.oldLength;
+            items.forEach((item, ix) => {
+                item.canvas = this;
+                item.index = ix;
+            });
+            this.fixRotation();
+            const last = Math.max(0, items.length - 1);
+            const selected = Math.min(grow ? last : index, last);
+            this.selectedItem = items[selected];
+            this.oldLength = items.length;
+        });
+        effect(() => {
+            const realWidth = this.width();
+            const realHeight = this.height();
+            const params = this.params();
+            this.xRange = normalizeRange(params.xRange || [0, realWidth]);
+            this.yRange = normalizeRange(params.yRange || [0, realHeight]);
+            this.resize();
+        });
     }
     ngOnInit() {
         this.redraw();
     }
     ngOnDestroy() {
         this.shouldDraw = false;
-        this.subscription?.unsubscribe();
-    }
-    ngOnChanges() {
-        this.params = this.params || {};
-        this.renderCtx = this.renderCtx || {};
-        this.beforeItems = this.beforeItems || [];
-        this.afterItems = this.afterItems || [];
-        this.xRange = normalizeRange(this.params.xRange || [0, this.realWidth]);
-        this.yRange = normalizeRange(this.params.yRange || [0, this.realHeight]);
-        this.resize();
-    }
-    ngAfterViewInit() {
-        this.subscription = this.itemList.changes.subscribe(() => this.fixItems());
-        this.fixItems();
     }
     async tempPaint(cb) {
         const renderCanvas = this.canvas;
@@ -8017,20 +8085,24 @@ class InteractiveCanvasComponent {
         bgCtx.globalCompositeOperation = "source-over";
     }
     resize() {
-        if (!this.canvasElem || !this.containerElem || !this.realWidth || !this.realWidth)
+        const realWidth = this.width();
+        const realHeight = this.height();
+        const horizontal = this.horizontal();
+        const resizeMode = this.resizeMode();
+        if (!this.canvasElem || !this.containerElem)
             return;
         const canvas = this.canvasElem.nativeElement;
         const container = this.containerElem.nativeElement;
         // Calculate canvas size
-        const axisX = this.horizontal ? "height" : "width";
-        const axisY = this.horizontal ? "width" : "height";
-        const resize = this.resizeMode == "fit" ? Math.min : Math.max;
+        const axisX = horizontal ? "height" : "width";
+        const axisY = horizontal ? "width" : "height";
+        const resize = resizeMode == "fit" ? Math.min : Math.max;
         canvas.width = container.clientWidth;
         canvas.height = container.clientHeight;
-        this.ratio = resize(canvas[axisX] / this.realWidth, canvas[axisY] / this.realHeight);
-        if (this.resizeMode == "fit") {
-            canvas[axisX] = this.realWidth * this.ratio;
-            canvas[axisY] = this.realHeight * this.ratio;
+        this.ratio = resize(canvas[axisX] / realWidth, canvas[axisY] / realHeight);
+        if (resizeMode == "fit") {
+            canvas[axisX] = realWidth * this.ratio;
+            canvas[axisY] = realHeight * this.ratio;
         }
         this.styles = getComputedStyle(canvas);
         this.ctx = canvas.getContext("2d");
@@ -8073,6 +8145,7 @@ class InteractiveCanvasComponent {
     }
     onPanMove($event) {
         const item = this.lockedItem;
+        const horizontal = this.horizontal();
         const deltaX = $event.deltaX / this.ratio;
         const deltaY = $event.deltaY / this.ratio;
         const data = {
@@ -8081,19 +8154,21 @@ class InteractiveCanvasComponent {
             deltaX,
             deltaY
         };
-        if (this.horizontal) {
+        if (horizontal) {
             data.deltaX = -deltaY;
             data.deltaY = +deltaX;
         }
         if (item) {
             item.moveTo(this.panStartPos.x + data.deltaX, this.panStartPos.y + data.deltaY);
             this.onItemPan.emit(data);
+            return;
         }
-        else if (this.infinite) {
-            this.rotation = this.panStartRotation + (this.horizontal ? deltaX : deltaY) / this.realHeight * 360;
-            this.fixRotation();
-            this.onPan.emit(data);
-        }
+        const infinite = untracked(() => this.infinite());
+        if (!infinite)
+            return;
+        this.rotation = this.panStartRotation + (horizontal ? deltaX : deltaY) / this.realHeight * 360;
+        this.fixRotation();
+        this.onPan.emit(data);
     }
     onPanEnd() {
         const item = this.lockedItem;
@@ -8113,14 +8188,17 @@ class InteractiveCanvasComponent {
         this.lockedIndex = -1;
     }
     fixRotation() {
+        // No need to track params changes because this function will be called from an effect
+        // already depending on params anyway
+        const params = untracked(() => this.params());
         if (this.fullHeight <= 0)
             return;
         this.rotation = overflow(Math.round(this.rotation * 100) / 100, -180, 180);
         this.basePan = this.rotation / 360 * this.fullHeight
-            + this.canvasHeight * this.panOffset;
+            + this.canvasHeight * untracked(() => this.panOffset());
         this.cycles = this.infinite
             ? [this.basePan - this.fullHeight, this.basePan, this.basePan + this.fullHeight] : [0];
-        this.excludedAreas = (this.params.excludedAreas || []).flatMap(coords => {
+        this.excludedAreas = (params.excludedAreas || []).flatMap(coords => {
             const x = coords.x * this.ratio;
             const y = coords.y * this.ratio;
             const width = coords.width * this.ratio;
@@ -8134,25 +8212,12 @@ class InteractiveCanvasComponent {
         });
         this.onRotate.emit(this.rotation);
     }
-    fixItems() {
-        const items = this.itemList.toArray();
-        this.$items.next(items);
-        items.forEach((item, ix) => {
-            item.canvas = this;
-            item.index = ix;
-        });
-        this.fixRotation();
-    }
     selectItem(pointer) {
         const selected = this.getIndexUnderPointer(pointer);
+        const item = this.items[selected];
         this.touched = false;
-        if (selected !== this.selectedIndex) {
-            this.selectedIndex = selected;
-            this.selectedIndexChange.emit(this.selectedIndex);
-            const item = this.selectedItem;
-            if (!item)
-                return;
-            item.active = !item.active;
+        if (item) {
+            this.selectedItem = item;
         }
         this.hoveredIndex = selected;
     }
@@ -8160,7 +8225,7 @@ class InteractiveCanvasComponent {
         if (!pointer || !this.canvas)
             return null;
         const canvasRect = this.canvas?.getBoundingClientRect();
-        return this.horizontal
+        return this.horizontal()
             ? new Point(canvasRect.bottom - pointer.clientY, pointer.clientX - canvasRect.left)
             : new Point(pointer.clientX - canvasRect.left, pointer.clientY - canvasRect.top);
     }
@@ -8214,35 +8279,15 @@ class InteractiveCanvasComponent {
                 await this.drawItem(ctx, item);
             }
         }
-        if (lockedItem) {
-            await this.drawItem(ctx, lockedItem);
-        }
-        if (!this.debug)
+        if (!lockedItem)
             return;
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = "rgba(114,232,45,0.55)";
-        for (const item of this.items) {
-            for (const shape of item.shapes) {
-                ctx.save();
-                ctx.translate(shape.x, shape.y);
-                if (shape instanceof Rect || shape instanceof Oval) {
-                    ctx.rotate(toRadians(shape.rotation));
-                    if (shape instanceof Oval) {
-                        drawOval(ctx, shape.width, shape.height);
-                    }
-                    else {
-                        drawRect(ctx, shape.width, shape.height);
-                    }
-                    ctx.stroke();
-                }
-                ctx.restore();
-            }
-        }
+        await this.drawItem(ctx, lockedItem);
     }
     async drawItem(ctx, item) {
         for (const shape of item.shapes) {
             ctx.save();
             ctx.translate(shape.x, shape.y);
+            ctx.setLineDash(emptyDash);
             ctx.lineWidth = 1;
             ctx.strokeStyle = "black";
             ctx.fillStyle = "white";
@@ -8255,19 +8300,26 @@ class InteractiveCanvasComponent {
         const canvas = ctx.canvas;
         if (canvas.width < 1 || canvas.height < 1)
             return;
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "white";
+        ctx.setLineDash(emptyDash);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.save();
-        if (this.horizontal) {
+        if (this.horizontal()) {
             ctx.rotate(-Math.PI / 2);
             ctx.translate(-this.canvasWidth, 0);
         }
+        const renderCtx = untracked(() => this.renderCtx());
+        const beforeItems = untracked(() => this.beforeItems());
+        const afterItems = untracked(() => this.afterItems());
         try {
-            for (const renderer of this.beforeItems) {
-                await renderer(this, this.renderCtx);
+            for (const renderer of beforeItems) {
+                await renderer(this, renderCtx);
             }
             await this.drawItems();
-            for (const renderer of this.afterItems) {
-                await renderer(this, this.renderCtx);
+            for (const renderer of afterItems) {
+                await renderer(this, renderCtx);
             }
         }
         catch (e) {
@@ -8275,57 +8327,18 @@ class InteractiveCanvasComponent {
         }
         ctx.restore();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, deps: [{ token: i0.Renderer2 }, { token: UniversalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: "infinite", resizeMode: "resizeMode", params: "params", realWidth: "realWidth", realHeight: "realHeight", debug: "debug", horizontal: "horizontal", selectedIndex: "selectedIndex", panOffset: "panOffset", renderCtx: "renderCtx", beforeItems: "beforeItems", afterItems: "afterItems" }, outputs: { selectedIndexChange: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: UniversalService }], propDecorators: { infinite: [{
-                type: Input
-            }], resizeMode: [{
-                type: Input
-            }], params: [{
-                type: Input
-            }], realWidth: [{
-                type: Input
-            }], realHeight: [{
-                type: Input
-            }], debug: [{
-                type: Input
-            }], horizontal: [{
-                type: Input
-            }], selectedIndex: [{
-                type: Input
-            }], panOffset: [{
-                type: Input
-            }], renderCtx: [{
-                type: Input
-            }], beforeItems: [{
-                type: Input
-            }], afterItems: [{
-                type: Input
-            }], selectedIndexChange: [{
-                type: Output
-            }], onRotate: [{
-                type: Output
-            }], onItemPan: [{
-                type: Output
-            }], onItemPanned: [{
-                type: Output
-            }], onPan: [{
-                type: Output
-            }], onPanned: [{
-                type: Output
-            }], containerElem: [{
+            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { containerElem: [{
                 type: ViewChild,
                 args: ["containerElem", { static: true }]
             }], canvasElem: [{
                 type: ViewChild,
                 args: ["canvasElem", { static: true }]
-            }], itemList: [{
-                type: ContentChildren,
-                args: [InteractiveItemComponent]
             }], onTouchEnd: [{
                 type: HostListener,
                 args: ["window:touchend", ["$event"]]
@@ -9124,5 +9137,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, distance, distanceSq, dividePts, dotProduct, drawOval, drawRect, ensurePoint, getComponentDef, getCssVariables, getRoot, gjkDistance, gjkIntersection, hashCode, impatientPromise, isBrowser, isPoint, lengthOfPt, lerpPts, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, subPts, switchClass, toDegrees, toRadians, tripleProduct };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, distance, distanceSq, dividePts, dotProduct, drawOval, drawRect, ensurePoint, getComponentDef, getCssVariables, getRoot, gjkDistance, gjkIntersection, hashCode, impatientPromise, injectOptions, isBrowser, isPoint, lengthOfPt, lerpPts, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, subPts, switchClass, toDegrees, toRadians, tripleProduct };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map