@stemy/ngx-utils 19.7.15 → 19.7.17

package/fesm2022/stemy-ngx-utils.mjs

@@ -1702,6 +1702,50 @@ class FileSystemEntry {
     }
 }
 
+class ExclusionsRenderer {
+    constructor() {
+        return Invokable.create(this);
+    }
+    async [Invokable.call](renderCanvas) {
+        const ctx = renderCanvas.ctx;
+        renderCanvas.excludedAreas?.forEach(shape => {
+            ctx.save();
+            ctx.translate(shape.x, shape.y);
+            ctx.fillStyle = "rgba(128,128,128,0.55)";
+            shape.draw(ctx);
+            ctx.fill();
+            ctx.restore();
+        });
+    }
+}
+
+const rulerDash = [5, 5];
+const emptyDash$1 = [];
+class RulerCanvasRenderer {
+    constructor() {
+        return Invokable.create(this);
+    }
+    async [Invokable.call](renderCanvas) {
+        const ctx = renderCanvas.ctx;
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = "rgba(128, 128, 128, 0.4)";
+        ctx.setLineDash(rulerDash);
+        renderCanvas.cycles?.forEach(cycle => {
+            ctx.beginPath();
+            ctx.moveTo(0, cycle);
+            ctx.lineTo(renderCanvas.canvasWidth, cycle);
+            ctx.stroke();
+        });
+        const hw = renderCanvas.canvasWidth / 2;
+        ctx.lineDashOffset = -renderCanvas.basePan;
+        ctx.beginPath();
+        ctx.moveTo(hw, 0);
+        ctx.lineTo(hw, renderCanvas.canvasHeight);
+        ctx.stroke();
+        ctx.setLineDash(emptyDash$1);
+    }
+}
+
 function dotProduct(a, b) {
     return a.x * b.x + a.y * b.y;
 }
@@ -6482,7 +6526,6 @@ class DropdownDirective {
         return true;
     }
     hide() {
-        console.log("hi");
         if (!this.opened)
             return true;
         this.opened = false;
@@ -7214,13 +7257,13 @@ class ChipsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ChipsComponent, isStandalone: false, selector: "chips", inputs: { testId: "testId", value: "value", multiple: "multiple", disabled: "disabled", type: "type", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", step: "step", placeholder: "placeholder", unique: "unique", strict: "strict", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-        ], viewQueries: [{ propertyName: "chipDropdown", first: true, predicate: ["chipDropdown"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd\n     [closeInside]=\"false\"\n     [autoPlacement]=\"autoPlacement\"\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\n    <input class=\"chips-input\"\n           dropdownToggle\n           [switch]=\"false\"\n           [attr.data-testid]=\"testId + '-input'\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                @if (item.picture) {\n                    <img [src]=\"item.picture | safe:'url'\"\n                         class=\"chip-picture\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n\n                }\n                <span class=\"chips-label\"\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\"\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n    @if (options) {\n        <div class=\"chips-dropdown\" *dropdownContent>\n            <button [ngClass]=\"option.classes\"\n                    [disabled]=\"option.disabled\"\n                    (click)=\"enterOption(option.value)\"\n                    *ngFor=\"let option of filteredOptions\">\n                <div class=\"select-option\">\n                    @if (option?.picture) {\n                        <img [src]=\"option.picture | safe:'url'\"\n                             class=\"select-option-picture\"\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\n                    }\n                    <div class=\"select-option-label\">\n                        {{ option.label }}\n                    </div>\n                </div>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "chipDropdown", first: true, predicate: ["chipDropdown"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd\n     attachTo=\"root\"\n     [closeInside]=\"false\"\n     [autoPlacement]=\"autoPlacement\"\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\n    <input class=\"chips-input\"\n           dropdownToggle\n           [switch]=\"false\"\n           [attr.data-testid]=\"testId + '-input'\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                @if (item.picture) {\n                    <img [src]=\"item.picture | safe:'url'\"\n                         class=\"chip-picture\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n\n                }\n                <span class=\"chips-label\"\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\"\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n    @if (options) {\n        <div class=\"chips-dropdown\" *dropdownContent>\n            <button [ngClass]=\"option.classes\"\n                    [disabled]=\"option.disabled\"\n                    (click)=\"enterOption(option.value)\"\n                    *ngFor=\"let option of filteredOptions\">\n                <div class=\"select-option\">\n                    @if (option?.picture) {\n                        <img [src]=\"option.picture | safe:'url'\"\n                             class=\"select-option-picture\"\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\n                    }\n                    <div class=\"select-option-label\">\n                        {{ option.label }}\n                    </div>\n                </div>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "chips", providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-                    ], template: "<div dd\n     [closeInside]=\"false\"\n     [autoPlacement]=\"autoPlacement\"\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\n    <input class=\"chips-input\"\n           dropdownToggle\n           [switch]=\"false\"\n           [attr.data-testid]=\"testId + '-input'\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                @if (item.picture) {\n                    <img [src]=\"item.picture | safe:'url'\"\n                         class=\"chip-picture\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n\n                }\n                <span class=\"chips-label\"\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\"\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n    @if (options) {\n        <div class=\"chips-dropdown\" *dropdownContent>\n            <button [ngClass]=\"option.classes\"\n                    [disabled]=\"option.disabled\"\n                    (click)=\"enterOption(option.value)\"\n                    *ngFor=\"let option of filteredOptions\">\n                <div class=\"select-option\">\n                    @if (option?.picture) {\n                        <img [src]=\"option.picture | safe:'url'\"\n                             class=\"select-option-picture\"\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\n                    }\n                    <div class=\"select-option-label\">\n                        {{ option.label }}\n                    </div>\n                </div>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"] }]
+                    ], template: "<div dd\n     attachTo=\"root\"\n     [closeInside]=\"false\"\n     [autoPlacement]=\"autoPlacement\"\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\n    <input class=\"chips-input\"\n           dropdownToggle\n           [switch]=\"false\"\n           [attr.data-testid]=\"testId + '-input'\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                @if (item.picture) {\n                    <img [src]=\"item.picture | safe:'url'\"\n                         class=\"chip-picture\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n\n                }\n                <span class=\"chips-label\"\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\"\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n    @if (options) {\n        <div class=\"chips-dropdown\" *dropdownContent>\n            <button [ngClass]=\"option.classes\"\n                    [disabled]=\"option.disabled\"\n                    (click)=\"enterOption(option.value)\"\n                    *ngFor=\"let option of filteredOptions\">\n                <div class=\"select-option\">\n                    @if (option?.picture) {\n                        <img [src]=\"option.picture | safe:'url'\"\n                             class=\"select-option-picture\"\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\n                    }\n                    <div class=\"select-option-label\">\n                        {{ option.label }}\n                    </div>\n                </div>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
                 type: Input
             }], value: [{
@@ -7947,11 +7990,13 @@ class InteractiveItemComponent {
     constructor() {
         this.active = false;
         this.index = -1;
+        this.canvasParams = {};
         this.valid = true;
         this.pos = Point.Zero;
         this.direction = "none";
         this.mFrame = new Rect(0, 0, 3, 3);
         this.mShapes = [];
+        this.mDistances = new Map();
     }
     draw(ctx, shape) {
         shape.draw(ctx, 1);
@@ -7996,6 +8041,7 @@ class InteractiveItemComponent {
         this.moveTo(this.pos.x, y);
     }
     moveEnd() {
+        this.mDistances.clear();
         if (this.valid)
             return;
         this.pos = this.validPos;
@@ -8022,7 +8068,10 @@ class InteractiveItemComponent {
         });
     }
     isValidByDistance(other) {
-        const minPixels = this.distToPixels(this.getMinDistance(other));
+        if (!this.mDistances.has(other)) {
+            this.mDistances.set(other, this.distToPixels(this.getMinDistance(other)));
+        }
+        const minPixels = this.mDistances.get(other);
         return !this.shapes.some(shape => {
             return other.shapes.some(os => {
                 return shape.distance(os) <= minPixels;
@@ -8271,7 +8320,7 @@ class InteractiveCanvasComponent {
     }
     onPanMove($event) {
         const item = this.lockedItem;
-        const horizontal = this.horizontal();
+        const horizontal = untracked(() => this.horizontal());
         const deltaX = $event.deltaX / this.ratio;
         const deltaY = $event.deltaY / this.ratio;
         const data = {
@@ -8334,6 +8383,7 @@ class InteractiveCanvasComponent {
             });
         });
         this.items.forEach(item => {
+            item.canvasParams = params;
             item.calcShapes();
         });
         this.onRotate.emit(this.rotation);
@@ -9246,5 +9296,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, 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, svgToDataUri, 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, ExclusionsRenderer, 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, RulerCanvasRenderer, 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, 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, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map