@alauda-fe/dynamic-plugin-shared 0.0.4-alpha.17 → 0.0.4-alpha.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14515,11 +14515,11 @@ class GraphCanvasComponent {
14515
14515
  this.graphStore.setScale(this.transformState.scale);
14516
14516
  }
14517
14517
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14518
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: GraphCanvasComponent, isStandalone: true, selector: "acl-graph-canvas", inputs: { minScale: "minScale", maxScale: "maxScale", originX: "originX", originY: "originY", boundary: "boundary", loading: "loading", loadFailed: "loadFailed" }, outputs: { retry: "retry" }, host: { listeners: { "document:mousemove": "handleMouseMove($event)", "document:mouseup": "handleMouseUp()" } }, providers: [GraphStoreService], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "surfaceRef", first: true, predicate: ["surface"], descendants: true, static: true }], ngImport: i0, template: "<div\n #canvas\n class=\"acl-graph-canvas\"\n [ngStyle]=\"canvasStyle\"\n (wheel)=\"handleWheelEvent($event)\"\n (mousedown)=\"handleMouseDown($event)\"\n>\n <div\n #surface\n class=\"acl-graph-canvas__surface\"\n [ngStyle]=\"surfaceStyle\"\n >\n <ng-content></ng-content>\n <ng-content select=\"acl-graph-links\"></ng-content>\n </div>\n\n <div class=\"acl-graph-canvas__action-wrapper right bottom\">\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'panoramic_view' | translate\"\n (click)=\"zoomOverview()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"full_size\"></aui-icon>\n </div>\n <div class=\"acl-graph-canvas__scale-controller\">\n <aui-icon\n icon=\"minus\"\n [title]=\"'zoom_out' | translate\"\n [class.disabled]=\"transformState.scale <= minScale\"\n (click)=\"zoomByDefaultStep('out')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n <span>{{ (transformState.scale * 100).toFixed(0) }}%</span>\n <aui-icon\n icon=\"plus\"\n [title]=\"'zoom_in' | translate\"\n [class.disabled]=\"transformState.scale >= maxScale\"\n (click)=\"zoomByDefaultStep('in')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n </div>\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'isometric_view' | translate\"\n (click)=\"zoomOriginal()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"actual_size\"></aui-icon>\n </div>\n </div>\n <ng-content select=\"acl-graph-actions\"></ng-content>\n <div\n class=\"acl-graph-canvas__loading-mask\"\n (wheel)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [hidden]=\"!loading && !loadFailed\"\n >\n <div class=\"acl-graph-canvas__loading\">\n @if (loading) {\n <aui-icon icon=\"spinner\"></aui-icon>\n <span>{{ 'loading_please_wait' | translate }}</span>\n }\n @if (loadFailed) {\n <span>{{ 'failed_load_please' | translate }}</span>\n <button\n aui-button=\"text\"\n (click)=\"retry.emit()\"\n >\n {{ 'retry' | translate }}\n </button>\n }\n </div>\n </div>\n</div>\n", styles: [".acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;background-position:center center;position:relative;overflow:hidden}.acl-graph-canvas:after{content:\"\";display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__surface{position:relative}.acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}.acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}.acl-graph-canvas__links .acl-graph-link__dot,.acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}.acl-graph-canvas__loading{padding:8px 16px;border-radius:var(--aui-border-radius-m)}.acl-graph-canvas__loading{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}html[aui-theme-mode=light] .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}}html[aui-theme-mode=dark] .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}.acl-graph-canvas__loading aui-icon{margin-right:8px;color:rgb(var(--aui-color-primary));font-size:var(--aui-icon-size-m)}.acl-graph-canvas__loading-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:default}.acl-graph-canvas__action-wrapper{position:absolute;display:flex}.acl-graph-canvas__action-wrapper.top{top:var(--aui-spacing-m)}.acl-graph-canvas__action-wrapper.right{right:var(--aui-spacing-m)}.acl-graph-canvas__action-wrapper.left{left:var(--aui-spacing-m)}.acl-graph-canvas__action-wrapper.bottom{bottom:var(--aui-spacing-m)}.acl-graph-canvas acl-graph-actions .acl-graph-canvas__action-wrapper.bottom.right{right:168px}.acl-graph-canvas__action{padding:0 6px;height:24px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;-webkit-user-select:none;user-select:none}.acl-graph-canvas__action{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__action.square{width:24px}.acl-graph-canvas__action:hover,.acl-graph-canvas__action.active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__action.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10))}.acl-graph-canvas__action+.acl-graph-canvas__action{margin-left:4px}.acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px}.acl-graph-canvas__scale-controller{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}.acl-graph-canvas__scale-controller{background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m)}:root .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__scale-controller{-webkit-user-select:none;user-select:none}.acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}.acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
14518
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: GraphCanvasComponent, isStandalone: true, selector: "acl-graph-canvas", inputs: { minScale: "minScale", maxScale: "maxScale", originX: "originX", originY: "originY", boundary: "boundary", loading: "loading", loadFailed: "loadFailed" }, outputs: { retry: "retry" }, host: { listeners: { "document:mousemove": "handleMouseMove($event)", "document:mouseup": "handleMouseUp()" } }, providers: [GraphStoreService], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "surfaceRef", first: true, predicate: ["surface"], descendants: true, static: true }], ngImport: i0, template: "<div\n #canvas\n class=\"acl-graph-canvas\"\n [ngStyle]=\"canvasStyle\"\n (wheel)=\"handleWheelEvent($event)\"\n (mousedown)=\"handleMouseDown($event)\"\n>\n <div\n #surface\n class=\"acl-graph-canvas__surface\"\n [ngStyle]=\"surfaceStyle\"\n >\n <ng-content></ng-content>\n <ng-content select=\"acl-graph-links\"></ng-content>\n </div>\n\n <div class=\"acl-graph-canvas__action-wrapper right bottom\">\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'panoramic_view' | translate\"\n (click)=\"zoomOverview()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"full_size\"></aui-icon>\n </div>\n <div class=\"acl-graph-canvas__scale-controller\">\n <aui-icon\n icon=\"minus\"\n [title]=\"'zoom_out' | translate\"\n [class.disabled]=\"transformState.scale <= minScale\"\n (click)=\"zoomByDefaultStep('out')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n <span>{{ (transformState.scale * 100).toFixed(0) }}%</span>\n <aui-icon\n icon=\"plus\"\n [title]=\"'zoom_in' | translate\"\n [class.disabled]=\"transformState.scale >= maxScale\"\n (click)=\"zoomByDefaultStep('in')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n </div>\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'isometric_view' | translate\"\n (click)=\"zoomOriginal()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"actual_size\"></aui-icon>\n </div>\n </div>\n <ng-content select=\"acl-graph-actions\"></ng-content>\n <div\n class=\"acl-graph-canvas__loading-mask\"\n (wheel)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [hidden]=\"!loading && !loadFailed\"\n >\n <div class=\"acl-graph-canvas__loading\">\n @if (loading) {\n <aui-icon icon=\"spinner\"></aui-icon>\n <span>{{ 'loading_please_wait' | translate }}</span>\n }\n @if (loadFailed) {\n <span>{{ 'failed_load_please' | translate }}</span>\n <button\n aui-button=\"text\"\n (click)=\"retry.emit()\"\n >\n {{ 'retry' | translate }}\n </button>\n }\n </div>\n </div>\n</div>\n", styles: ["::ng-deep .acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;background-position:center center;position:relative;overflow:hidden}::ng-deep .acl-graph-canvas:after{content:\"\";display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__surface{position:relative}::ng-deep .acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}::ng-deep .acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}::ng-deep .acl-graph-canvas__links .acl-graph-link__dot,::ng-deep .acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}::ng-deep .acl-graph-canvas__loading{padding:8px 16px;border-radius:var(--aui-border-radius-m)}::ng-deep .acl-graph-canvas__loading{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}::ng-deep .acl-graph-canvas__loading aui-icon{margin-right:8px;color:rgb(var(--aui-color-primary));font-size:var(--aui-icon-size-m)}::ng-deep .acl-graph-canvas__loading-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:default}::ng-deep .acl-graph-canvas__action-wrapper{position:absolute;display:flex}::ng-deep .acl-graph-canvas__action-wrapper.top{top:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.right{right:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.left{left:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.bottom{bottom:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas acl-graph-actions .acl-graph-canvas__action-wrapper.bottom.right{right:168px}::ng-deep .acl-graph-canvas__action{padding:0 6px;height:24px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__action{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__action.square{width:24px}::ng-deep .acl-graph-canvas__action:hover,::ng-deep .acl-graph-canvas__action.active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__action.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10))}::ng-deep .acl-graph-canvas__action+::ng-deep .acl-graph-canvas__action{margin-left:4px}::ng-deep .acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px}::ng-deep .acl-graph-canvas__scale-controller{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}::ng-deep .acl-graph-canvas__scale-controller{background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m)}:root ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__scale-controller{-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}::ng-deep .acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}::ng-deep .acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
14519
14519
  }
14520
14520
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphCanvasComponent, decorators: [{
14521
14521
  type: Component,
14522
- args: [{ selector: 'acl-graph-canvas', changeDetection: ChangeDetectionStrategy.OnPush, providers: [GraphStoreService], standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, TranslatePipe], template: "<div\n #canvas\n class=\"acl-graph-canvas\"\n [ngStyle]=\"canvasStyle\"\n (wheel)=\"handleWheelEvent($event)\"\n (mousedown)=\"handleMouseDown($event)\"\n>\n <div\n #surface\n class=\"acl-graph-canvas__surface\"\n [ngStyle]=\"surfaceStyle\"\n >\n <ng-content></ng-content>\n <ng-content select=\"acl-graph-links\"></ng-content>\n </div>\n\n <div class=\"acl-graph-canvas__action-wrapper right bottom\">\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'panoramic_view' | translate\"\n (click)=\"zoomOverview()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"full_size\"></aui-icon>\n </div>\n <div class=\"acl-graph-canvas__scale-controller\">\n <aui-icon\n icon=\"minus\"\n [title]=\"'zoom_out' | translate\"\n [class.disabled]=\"transformState.scale <= minScale\"\n (click)=\"zoomByDefaultStep('out')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n <span>{{ (transformState.scale * 100).toFixed(0) }}%</span>\n <aui-icon\n icon=\"plus\"\n [title]=\"'zoom_in' | translate\"\n [class.disabled]=\"transformState.scale >= maxScale\"\n (click)=\"zoomByDefaultStep('in')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n </div>\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'isometric_view' | translate\"\n (click)=\"zoomOriginal()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"actual_size\"></aui-icon>\n </div>\n </div>\n <ng-content select=\"acl-graph-actions\"></ng-content>\n <div\n class=\"acl-graph-canvas__loading-mask\"\n (wheel)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [hidden]=\"!loading && !loadFailed\"\n >\n <div class=\"acl-graph-canvas__loading\">\n @if (loading) {\n <aui-icon icon=\"spinner\"></aui-icon>\n <span>{{ 'loading_please_wait' | translate }}</span>\n }\n @if (loadFailed) {\n <span>{{ 'failed_load_please' | translate }}</span>\n <button\n aui-button=\"text\"\n (click)=\"retry.emit()\"\n >\n {{ 'retry' | translate }}\n </button>\n }\n </div>\n </div>\n</div>\n", styles: [".acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;background-position:center center;position:relative;overflow:hidden}.acl-graph-canvas:after{content:\"\";display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__surface{position:relative}.acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}.acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}.acl-graph-canvas__links .acl-graph-link__dot,.acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}.acl-graph-canvas__loading{padding:8px 16px;border-radius:var(--aui-border-radius-m)}.acl-graph-canvas__loading{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}html[aui-theme-mode=light] .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}}html[aui-theme-mode=dark] .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}.acl-graph-canvas__loading aui-icon{margin-right:8px;color:rgb(var(--aui-color-primary));font-size:var(--aui-icon-size-m)}.acl-graph-canvas__loading-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:default}.acl-graph-canvas__action-wrapper{position:absolute;display:flex}.acl-graph-canvas__action-wrapper.top{top:var(--aui-spacing-m)}.acl-graph-canvas__action-wrapper.right{right:var(--aui-spacing-m)}.acl-graph-canvas__action-wrapper.left{left:var(--aui-spacing-m)}.acl-graph-canvas__action-wrapper.bottom{bottom:var(--aui-spacing-m)}.acl-graph-canvas acl-graph-actions .acl-graph-canvas__action-wrapper.bottom.right{right:168px}.acl-graph-canvas__action{padding:0 6px;height:24px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;-webkit-user-select:none;user-select:none}.acl-graph-canvas__action{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__action.square{width:24px}.acl-graph-canvas__action:hover,.acl-graph-canvas__action.active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__action.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10))}.acl-graph-canvas__action+.acl-graph-canvas__action{margin-left:4px}.acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px}.acl-graph-canvas__scale-controller{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}.acl-graph-canvas__scale-controller{background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m)}:root .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.acl-graph-canvas__scale-controller{-webkit-user-select:none;user-select:none}.acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}.acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"] }]
14522
+ args: [{ selector: 'acl-graph-canvas', changeDetection: ChangeDetectionStrategy.OnPush, providers: [GraphStoreService], standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, TranslatePipe], template: "<div\n #canvas\n class=\"acl-graph-canvas\"\n [ngStyle]=\"canvasStyle\"\n (wheel)=\"handleWheelEvent($event)\"\n (mousedown)=\"handleMouseDown($event)\"\n>\n <div\n #surface\n class=\"acl-graph-canvas__surface\"\n [ngStyle]=\"surfaceStyle\"\n >\n <ng-content></ng-content>\n <ng-content select=\"acl-graph-links\"></ng-content>\n </div>\n\n <div class=\"acl-graph-canvas__action-wrapper right bottom\">\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'panoramic_view' | translate\"\n (click)=\"zoomOverview()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"full_size\"></aui-icon>\n </div>\n <div class=\"acl-graph-canvas__scale-controller\">\n <aui-icon\n icon=\"minus\"\n [title]=\"'zoom_out' | translate\"\n [class.disabled]=\"transformState.scale <= minScale\"\n (click)=\"zoomByDefaultStep('out')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n <span>{{ (transformState.scale * 100).toFixed(0) }}%</span>\n <aui-icon\n icon=\"plus\"\n [title]=\"'zoom_in' | translate\"\n [class.disabled]=\"transformState.scale >= maxScale\"\n (click)=\"zoomByDefaultStep('in')\"\n (mousedown)=\"$event.stopPropagation()\"\n ></aui-icon>\n </div>\n <div\n class=\"acl-graph-canvas__action square\"\n [title]=\"'isometric_view' | translate\"\n (click)=\"zoomOriginal()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <aui-icon icon=\"actual_size\"></aui-icon>\n </div>\n </div>\n <ng-content select=\"acl-graph-actions\"></ng-content>\n <div\n class=\"acl-graph-canvas__loading-mask\"\n (wheel)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [hidden]=\"!loading && !loadFailed\"\n >\n <div class=\"acl-graph-canvas__loading\">\n @if (loading) {\n <aui-icon icon=\"spinner\"></aui-icon>\n <span>{{ 'loading_please_wait' | translate }}</span>\n }\n @if (loadFailed) {\n <span>{{ 'failed_load_please' | translate }}</span>\n <button\n aui-button=\"text\"\n (click)=\"retry.emit()\"\n >\n {{ 'retry' | translate }}\n </button>\n }\n </div>\n </div>\n</div>\n", styles: ["::ng-deep .acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;background-position:center center;position:relative;overflow:hidden}::ng-deep .acl-graph-canvas:after{content:\"\";display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__surface{position:relative}::ng-deep .acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}::ng-deep .acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}::ng-deep .acl-graph-canvas__links .acl-graph-link__dot,::ng-deep .acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}::ng-deep .acl-graph-canvas__loading{padding:8px 16px;border-radius:var(--aui-border-radius-m)}::ng-deep .acl-graph-canvas__loading{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}::ng-deep .acl-graph-canvas__loading aui-icon{margin-right:8px;color:rgb(var(--aui-color-primary));font-size:var(--aui-icon-size-m)}::ng-deep .acl-graph-canvas__loading-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:default}::ng-deep .acl-graph-canvas__action-wrapper{position:absolute;display:flex}::ng-deep .acl-graph-canvas__action-wrapper.top{top:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.right{right:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.left{left:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.bottom{bottom:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas acl-graph-actions .acl-graph-canvas__action-wrapper.bottom.right{right:168px}::ng-deep .acl-graph-canvas__action{padding:0 6px;height:24px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__action{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__action.square{width:24px}::ng-deep .acl-graph-canvas__action:hover,::ng-deep .acl-graph-canvas__action.active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__action.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10))}::ng-deep .acl-graph-canvas__action+::ng-deep .acl-graph-canvas__action{margin-left:4px}::ng-deep .acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px}::ng-deep .acl-graph-canvas__scale-controller{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}::ng-deep .acl-graph-canvas__scale-controller{background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m)}:root ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__scale-controller{-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}::ng-deep .acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}::ng-deep .acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"] }]
14523
14523
  }], propDecorators: { minScale: [{
14524
14524
  type: Input
14525
14525
  }], maxScale: [{
@@ -14693,11 +14693,11 @@ class GraphLinkComponent {
14693
14693
  return points.map(p => p.map(n => n / this.store.getScale()));
14694
14694
  }
14695
14695
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14696
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: GraphLinkComponent, isStandalone: true, selector: "g[aclGraphLink]", inputs: { from: "from", to: "to", direction: "direction", radius: "radius", arrow: "arrow", color: "color", path: "path", parallelDirection: "parallelDirection", verticalDirection: "verticalDirection" }, providers: [GraphStoreService], ngImport: i0, template: "@if (points) {\n <svg:path\n class=\"acl-graph-link__line\"\n [attr.d]=\"path(points)\"\n [style.stroke]=\"color\"\n />\n @if (arrow) {\n <svg:circle\n class=\"acl-graph-link__dot\"\n r=\"4\"\n [attr.cx]=\"points[0][0]\"\n [attr.cy]=\"points[0][1]\"\n [style.fill]=\"color\"\n ></svg:circle>\n <svg:polygon\n class=\"acl-graph-link__arrow\"\n points=\"0,0 8,-4 8,4\"\n [style.transform]=\"arrowTransform\"\n [style.fill]=\"color\"\n ></svg:polygon>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
14696
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: GraphLinkComponent, isStandalone: true, selector: "g[aclGraphLink]", inputs: { from: "from", to: "to", direction: "direction", radius: "radius", arrow: "arrow", color: "color", path: "path", parallelDirection: "parallelDirection", verticalDirection: "verticalDirection" }, ngImport: i0, template: "@if (points) {\n <svg:path\n class=\"acl-graph-link__line\"\n [attr.d]=\"path(points)\"\n [style.stroke]=\"color\"\n />\n @if (arrow) {\n <svg:circle\n class=\"acl-graph-link__dot\"\n r=\"4\"\n [attr.cx]=\"points[0][0]\"\n [attr.cy]=\"points[0][1]\"\n [style.fill]=\"color\"\n ></svg:circle>\n <svg:polygon\n class=\"acl-graph-link__arrow\"\n points=\"0,0 8,-4 8,4\"\n [style.transform]=\"arrowTransform\"\n [style.fill]=\"color\"\n ></svg:polygon>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
14697
14697
  }
14698
14698
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphLinkComponent, decorators: [{
14699
14699
  type: Component,
14700
- args: [{ selector: 'g[aclGraphLink]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], providers: [GraphStoreService], template: "@if (points) {\n <svg:path\n class=\"acl-graph-link__line\"\n [attr.d]=\"path(points)\"\n [style.stroke]=\"color\"\n />\n @if (arrow) {\n <svg:circle\n class=\"acl-graph-link__dot\"\n r=\"4\"\n [attr.cx]=\"points[0][0]\"\n [attr.cy]=\"points[0][1]\"\n [style.fill]=\"color\"\n ></svg:circle>\n <svg:polygon\n class=\"acl-graph-link__arrow\"\n points=\"0,0 8,-4 8,4\"\n [style.transform]=\"arrowTransform\"\n [style.fill]=\"color\"\n ></svg:polygon>\n }\n}\n" }]
14700
+ args: [{ selector: 'g[aclGraphLink]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "@if (points) {\n <svg:path\n class=\"acl-graph-link__line\"\n [attr.d]=\"path(points)\"\n [style.stroke]=\"color\"\n />\n @if (arrow) {\n <svg:circle\n class=\"acl-graph-link__dot\"\n r=\"4\"\n [attr.cx]=\"points[0][0]\"\n [attr.cy]=\"points[0][1]\"\n [style.fill]=\"color\"\n ></svg:circle>\n <svg:polygon\n class=\"acl-graph-link__arrow\"\n points=\"0,0 8,-4 8,4\"\n [style.transform]=\"arrowTransform\"\n [style.fill]=\"color\"\n ></svg:polygon>\n }\n}\n" }]
14701
14701
  }], ctorParameters: () => [], propDecorators: { from: [{
14702
14702
  type: Input
14703
14703
  }], to: [{
@@ -14743,14 +14743,13 @@ class GraphNodeDirective {
14743
14743
  this.store.unregisterNode(this.id);
14744
14744
  }
14745
14745
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphNodeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
14746
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: GraphNodeDirective, isStandalone: true, selector: "[aclGraphNode]", inputs: { id: ["aclGraphNode", "id"] }, providers: [GraphStoreService], ngImport: i0 }); }
14746
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: GraphNodeDirective, isStandalone: true, selector: "[aclGraphNode]", inputs: { id: ["aclGraphNode", "id"] }, ngImport: i0 }); }
14747
14747
  }
14748
14748
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphNodeDirective, decorators: [{
14749
14749
  type: Directive,
14750
14750
  args: [{
14751
14751
  selector: '[aclGraphNode]',
14752
14752
  standalone: true,
14753
- providers: [GraphStoreService],
14754
14753
  }]
14755
14754
  }], propDecorators: { id: [{
14756
14755
  type: Input,