@valtimo/process 4.15.2-next-main.15 → 4.15.3-next-main.16

package/bundles/valtimo-process.umd.js

@@ -4,449 +4,447 @@
     (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.process = {}), global.ng.core, global.ng.common.http, global.config, global.ng.common, global.components, global.ngxToastr, global.ng.platformBrowser.animations, global.BpmnJS, global.heatmap));
 }(this, (function (exports, i0, i1, i2, common, components, ngxToastr, animations, BpmnJS, heatmap) { 'use strict';
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var ProcessService = /** @class */ (function () {
-        function ProcessService(http, configService) {
-            this.http = http;
-            this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
-        }
-        ProcessService.prototype.getProcessDefinitions = function () {
-            return this.http.get(this.valtimoEndpointUri + "process/definition");
-        };
-        ProcessService.prototype.getProcessDefinitionVersions = function (key) {
-            return this.http.get(this.valtimoEndpointUri + "process/definition/" + key + "/versions");
-        };
-        ProcessService.prototype.getProcessDefinition = function (key) {
-            return this.http.get(this.valtimoEndpointUri + "process/definition/" + key);
-        };
-        ProcessService.prototype.getProcessDefinitionStartFormData = function (processDefinitionKey) {
-            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinitionKey + "/start-form");
-        };
-        ProcessService.prototype.startProcesInstance = function (key, businessKey, variables) {
-            return this.http.post(this.valtimoEndpointUri + "process/definition/" + key + "/" + businessKey + "/start", variables);
-        };
-        ProcessService.prototype.getProcessDefinitionXml = function (processDefinitionId) {
-            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinitionId + "/xml");
-        };
-        ProcessService.prototype.getProcessXml = function (id) {
-            return this.http.get(this.valtimoEndpointUri + "process/" + id + "/xml");
-        };
-        ProcessService.prototype.getProcessCount = function (id) {
-            return this.http.post(this.valtimoEndpointUri + "v2/process/definition/" + id + "/count", {
-                'key': id,
-                'processVariables': [{ '@type': 'boolean', 'name': 'active', 'value': true }]
-            });
-        };
-        ProcessService.prototype.getProcessHeatmapCount = function (processDefinition) {
-            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinition.key + "/heatmap/count?version=" + processDefinition.version);
-        };
-        ProcessService.prototype.getProcessHeatmapDuration = function (processDefinition) {
-            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinition.key + "/heatmap/duration?version=" + processDefinition.version);
-        };
-        ProcessService.prototype.getProcessInstances = function (key, page, size, sort) {
-            var params = new i1.HttpParams()
-                .set('page', page.toString())
-                .set('size', size.toString())
-                .set('sort', sort);
-            return this.http.post(this.valtimoEndpointUri + "v2/process/" + key + "/search", {}, { 'params': params });
-        };
-        ProcessService.prototype.getProcessInstance = function (processInstanceId) {
-            return this.http.get(this.valtimoEndpointUri + "process/" + processInstanceId, {});
-        };
-        ProcessService.prototype.getProcessInstanceTasks = function (id) {
-            return this.http.get(this.valtimoEndpointUri + "process/" + id + "/tasks", {});
-        };
-        ProcessService.prototype.getProcessInstanceVariables = function (id, variableNames) {
-            return this.http.post(this.valtimoEndpointUri + "process-instance/" + id + "/variables", variableNames);
-        };
-        ProcessService.prototype.addProcessInstancesDefaultVariablesValues = function (processInstances) {
-            var _this = this;
-            processInstances.forEach(function (processInstance) { return _this.addDefaultVariablesValues(processInstance); });
-            return processInstances;
-        };
-        ProcessService.prototype.addDefaultVariablesValues = function (processInstance) {
-            if (!processInstance['startUser']) {
-                processInstance.startUser = processInstance.startUserId;
-            }
-            if (!processInstance['processStarted']) {
-                processInstance.processStarted = processInstance.startTime;
-            }
-            if (!processInstance['processEnded']) {
-                processInstance.processEnded = processInstance.endTime;
-            }
-            if (!processInstance['active']) {
-                processInstance.active = processInstance.endTime == null;
-            }
-            return processInstance;
-        };
-        ProcessService.prototype.getInstancesStatistics = function (fromDate, toDate, processFilter) {
-            var params = new i1.HttpParams();
-            params.set('fromDate', fromDate);
-            params.set('toDate', toDate);
-            params.set('processFilter', processFilter);
-            return this.http.get(this.valtimoEndpointUri + "reporting/instancesstatistics", { 'params': params });
-        };
-        ProcessService.prototype.deployProcess = function (processXml) {
-            var formData = new FormData;
-            formData.append('file', new File([processXml], 'process.bpmn'));
-            formData.append('deployment-name', 'valtimoConsoleApp');
-            formData.append('deployment-source', 'process application');
-            return this.http.post(this.valtimoEndpointUri + "camunda-rest/engine/default/deployment/create", formData);
-        };
-        ProcessService.prototype.migrateProcess = function (processDefinition1Id, processDefinition2Id, params) {
-            return this.http.post(this.valtimoEndpointUri + "process/definition/" + processDefinition1Id + "/" + processDefinition2Id + "/migrate", params);
-        };
-        return ProcessService;
-    }());
-    ProcessService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ProcessService_Factory() { return new ProcessService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(i2.ConfigService)); }, token: ProcessService, providedIn: "root" });
-    ProcessService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    ProcessService.ctorParameters = function () { return [
-        { type: i1.HttpClient },
-        { type: i2.ConfigService }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var ProcessService = /** @class */ (function () {
+        function ProcessService(http, configService) {
+            this.http = http;
+            this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
+        }
+        ProcessService.prototype.getProcessDefinitions = function () {
+            return this.http.get(this.valtimoEndpointUri + "process/definition");
+        };
+        ProcessService.prototype.getProcessDefinitionVersions = function (key) {
+            return this.http.get(this.valtimoEndpointUri + "process/definition/" + key + "/versions");
+        };
+        ProcessService.prototype.getProcessDefinition = function (key) {
+            return this.http.get(this.valtimoEndpointUri + "process/definition/" + key);
+        };
+        ProcessService.prototype.getProcessDefinitionStartFormData = function (processDefinitionKey) {
+            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinitionKey + "/start-form");
+        };
+        ProcessService.prototype.startProcesInstance = function (key, businessKey, variables) {
+            return this.http.post(this.valtimoEndpointUri + "process/definition/" + key + "/" + businessKey + "/start", variables);
+        };
+        ProcessService.prototype.getProcessDefinitionXml = function (processDefinitionId) {
+            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinitionId + "/xml");
+        };
+        ProcessService.prototype.getProcessXml = function (id) {
+            return this.http.get(this.valtimoEndpointUri + "process/" + id + "/xml");
+        };
+        ProcessService.prototype.getProcessCount = function (id) {
+            return this.http.post(this.valtimoEndpointUri + "v2/process/definition/" + id + "/count", {
+                key: id,
+                processVariables: [{ '@type': 'boolean', name: 'active', value: true }],
+            });
+        };
+        ProcessService.prototype.getProcessHeatmapCount = function (processDefinition) {
+            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinition.key + "/heatmap/count?version=" + processDefinition.version);
+        };
+        ProcessService.prototype.getProcessHeatmapDuration = function (processDefinition) {
+            return this.http.get(this.valtimoEndpointUri + "process/definition/" + processDefinition.key + "/heatmap/duration?version=" + processDefinition.version);
+        };
+        ProcessService.prototype.getProcessInstances = function (key, page, size, sort) {
+            var params = new i1.HttpParams()
+                .set('page', page.toString())
+                .set('size', size.toString())
+                .set('sort', sort);
+            return this.http.post(this.valtimoEndpointUri + "v2/process/" + key + "/search", {}, { params: params });
+        };
+        ProcessService.prototype.getProcessInstance = function (processInstanceId) {
+            return this.http.get(this.valtimoEndpointUri + "process/" + processInstanceId, {});
+        };
+        ProcessService.prototype.getProcessInstanceTasks = function (id) {
+            return this.http.get(this.valtimoEndpointUri + "process/" + id + "/tasks", {});
+        };
+        ProcessService.prototype.getProcessInstanceVariables = function (id, variableNames) {
+            return this.http.post(this.valtimoEndpointUri + "process-instance/" + id + "/variables", variableNames);
+        };
+        ProcessService.prototype.addProcessInstancesDefaultVariablesValues = function (processInstances) {
+            var _this = this;
+            processInstances.forEach(function (processInstance) { return _this.addDefaultVariablesValues(processInstance); });
+            return processInstances;
+        };
+        ProcessService.prototype.addDefaultVariablesValues = function (processInstance) {
+            if (!processInstance['startUser']) {
+                processInstance.startUser = processInstance.startUserId;
+            }
+            if (!processInstance['processStarted']) {
+                processInstance.processStarted = processInstance.startTime;
+            }
+            if (!processInstance['processEnded']) {
+                processInstance.processEnded = processInstance.endTime;
+            }
+            if (!processInstance['active']) {
+                processInstance.active = processInstance.endTime == null;
+            }
+            return processInstance;
+        };
+        ProcessService.prototype.getInstancesStatistics = function (fromDate, toDate, processFilter) {
+            var params = new i1.HttpParams();
+            params.set('fromDate', fromDate);
+            params.set('toDate', toDate);
+            params.set('processFilter', processFilter);
+            return this.http.get(this.valtimoEndpointUri + "reporting/instancesstatistics", {
+                params: params,
+            });
+        };
+        ProcessService.prototype.deployProcess = function (processXml) {
+            var formData = new FormData();
+            formData.append('file', new File([processXml], 'process.bpmn'));
+            formData.append('deployment-name', 'valtimoConsoleApp');
+            formData.append('deployment-source', 'process application');
+            return this.http.post(this.valtimoEndpointUri + "camunda-rest/engine/default/deployment/create", formData);
+        };
+        ProcessService.prototype.migrateProcess = function (processDefinition1Id, processDefinition2Id, params) {
+            return this.http.post(this.valtimoEndpointUri + "process/definition/" + processDefinition1Id + "/" + processDefinition2Id + "/migrate", params);
+        };
+        return ProcessService;
+    }());
+    ProcessService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ProcessService_Factory() { return new ProcessService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(i2.ConfigService)); }, token: ProcessService, providedIn: "root" });
+    ProcessService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    ProcessService.ctorParameters = function () { return [
+        { type: i1.HttpClient },
+        { type: i2.ConfigService }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var ProcessDiagramComponent = /** @class */ (function () {
-        function ProcessDiagramComponent(processService) {
-            this.processService = processService;
-            this.importDone = new i0.EventEmitter();
-            this.enumHeatmapOptions = ['count', 'duration'];
-        }
-        ProcessDiagramComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            if (this.processDefinitionKey) {
-                this.loadProcessDefinitionFromKey(this.processDefinitionKey);
-            }
-            if (this.processInstanceId) {
-                this.loadProcessInstanceXml(this.processInstanceId);
-            }
-            this.bpmnJS = new BpmnJS();
-            this.bpmnJS.on('import.done', function (_a) {
-                var error = _a.error;
-                if (!error) {
-                    var canvas_1 = _this.bpmnJS.get('canvas'), eventBus = _this.bpmnJS.get('eventBus');
-                    if (_this.processDiagram.historicActivityInstances) {
-                        _this.processDiagram.historicActivityInstances.forEach(function (instance) {
-                            // exclude multiInstanceBody
-                            if (instance.activityType !== 'multiInstanceBody') {
-                                canvas_1.addMarker(instance.activityId, instance.endTime ? 'highlight-overlay-past' : 'highlight-overlay-current');
-                            }
-                        });
-                    }
-                    canvas_1.zoom('fit-viewport', 'auto');
-                    if (_this.processDefinitionVersions) {
-                        eventBus.on('canvas.init', function () {
-                            if (_this.showHeatmap) {
-                                _this.clearHeatmap();
-                            }
-                            _this.loadHeatmapData();
-                        });
-                        eventBus.on('canvas.viewbox.changing', function () {
-                            if (_this.showHeatmap) {
-                                _this.clearHeatmap();
-                            }
-                        });
-                        eventBus.on('canvas.viewbox.changed', function () {
-                            _this.loadHeatmapData();
-                        });
-                    }
-                }
-            });
-        };
-        ProcessDiagramComponent.prototype.ngOnChanges = function () {
-            if (this.processDefinitionKey) {
-                this.loadProcessDefinitionFromKey(this.processDefinitionKey);
-            }
-            else if (this.processInstanceId) {
-                this.loadProcessInstanceXml(this.processInstanceId);
-            }
-        };
-        ProcessDiagramComponent.prototype.ngOnDestroy = function () {
-            if (this.bpmnJS) {
-                this.bpmnJS.destroy();
-            }
-        };
-        ProcessDiagramComponent.prototype.loadProcessDefinition = function (processDefinitionKey) {
-            var _this = this;
-            this.processService.getProcessDefinition(processDefinitionKey).subscribe(function (response) {
-                _this.heatmapOption = _this.enumHeatmapOptions[0];
-                _this.version = response.version;
-                _this.loadProcessDefinitionXml(response.id);
-            });
-        };
-        ProcessDiagramComponent.prototype.loadProcessDefinitionVersions = function (processDefinitionKey) {
-            var _this = this;
-            this.processService.getProcessDefinitionVersions(processDefinitionKey).subscribe(function (response) {
-                _this.processDefinitionVersions = response;
-            });
-        };
-        ProcessDiagramComponent.prototype.loadProcessDefinitionFromKey = function (processDefinitionKey) {
-            this.loadProcessDefinitionVersions(processDefinitionKey);
-            this.loadProcessDefinition(processDefinitionKey);
-        };
-        ProcessDiagramComponent.prototype.loadProcessDefinitionXml = function (processDefinitionId) {
-            var _this = this;
-            this.processService.getProcessDefinitionXml(processDefinitionId).subscribe(function (response) {
-                _this.processDiagram = response;
-                _this.bpmnJS.importXML(_this.processDiagram.bpmn20Xml);
-                _this.bpmnJS.attachTo(_this.el.nativeElement);
-            });
-        };
-        ProcessDiagramComponent.prototype.loadProcessInstanceXml = function (processInstanceId) {
-            var _this = this;
-            this.processService.getProcessXml(processInstanceId).subscribe(function (response) {
-                _this.processDiagram = response;
-                _this.bpmnJS.importXML(_this.processDiagram.bpmn20Xml);
-                _this.bpmnJS.attachTo(_this.el.nativeElement);
-            });
-        };
-        ProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapCount = function (processDefinition) {
-            var _this = this;
-            this.processService.getProcessHeatmapCount(processDefinition).subscribe(function (response) {
-                _this.inputData = response;
-                _this.valueKey = 'totalCount';
-                _this.heatPoints = { data: [] };
-                _this.min = 0;
-                _this.max = 0;
-                Object.keys(_this.inputData).forEach(function (key) {
-                    var diagramContainer = _this.el.nativeElement.querySelector('svg')
-                        .getBoundingClientRect(), diagramElm = _this.el.nativeElement.querySelector("g[data-element-id=" + key + "]")
-                        .getBoundingClientRect();
-                    _this.setMax(key);
-                    _this.heatPoints.data.push({
-                        x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
-                        y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
-                        value: _this.inputData[key][_this.valueKey],
-                        radius: diagramElm.width / 2
-                    });
-                    _this.addCounterActiveOverlays(key, _this.inputData);
-                });
-                _this.clearHeatmap();
-                if (_this.showHeatmap) {
-                    _this.loadHeatmap();
-                }
-            });
-        };
-        ProcessDiagramComponent.prototype.onWindowResize = function () {
-            var oldCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
-            if (oldCanvas) {
-                oldCanvas.remove();
-                this.heatMapInstance = null;
-            }
-            if (this.showHeatmap) {
-                this.loadHeatmap();
-            }
-        };
-        ProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapDuration = function (processDefinition) {
-            var _this = this;
-            this.processService.getProcessHeatmapDuration(processDefinition).subscribe(function (response) {
-                _this.inputData = response;
-                _this.valueKey = 'averageDurationInMilliseconds';
-                _this.heatPoints = { data: [] };
-                _this.min = 0;
-                _this.max = 0;
-                Object.keys(_this.inputData).forEach(function (key) {
-                    var diagramContainer = _this.el.nativeElement.querySelector('svg')
-                        .getBoundingClientRect(), diagramElm = _this.el.nativeElement.querySelector("g[data-element-id=" + key + "]")
-                        .getBoundingClientRect();
-                    _this.setMax(key);
-                    _this.heatPoints.data.push({
-                        x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
-                        y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
-                        value: _this.inputData[key][_this.valueKey],
-                        radius: diagramElm.width / 2
-                    });
-                    _this.addCounterActiveOverlays(key, _this.inputData);
-                });
-                _this.clearHeatmap();
-                if (_this.showHeatmap) {
-                    _this.loadHeatmap();
-                }
-            });
-        };
-        ProcessDiagramComponent.prototype.setProcessDefinitionKey = function (processDefinitionKey) {
-            this.processDefinitionKey = processDefinitionKey;
-            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
-        };
-        ProcessDiagramComponent.prototype.setProcessDefinitionVersion = function (version) {
-            this.version = +version;
-            this.loadHeatmapData();
-        };
-        ProcessDiagramComponent.prototype.setHeatmapOption = function (heatmapOption) {
-            this.heatmapOption = heatmapOption;
-            this.loadHeatmapData();
-        };
-        ProcessDiagramComponent.prototype.toggleShowHeatmap = function () {
-            this.showHeatmap = !this.showHeatmap;
-            this.loadHeatmapData();
-        };
-        ProcessDiagramComponent.prototype.loadHeatmap = function () {
-            if (!this.heatMapInstance) {
-                this.heatMapInstance = heatmap.create({
-                    radius: 54,
-                    blur: .70,
-                    maxOpacity: .4,
-                    minOpacity: 0,
-                    container: this.el.nativeElement
-                });
-            }
-            this.heatMapInstance.setData({
-                min: this.min,
-                max: this.max,
-                data: this.heatPoints.data
-            });
-        };
-        ProcessDiagramComponent.prototype.clearHeatmap = function () {
-            if (this.heatMapInstance) {
-                this.heatMapInstance.setData({ data: [] });
-            }
-        };
-        ProcessDiagramComponent.prototype.loadHeatmapData = function () {
-            var _this = this;
-            this.processDefinition = this.processDefinitionVersions.find(function (definition) { return definition.version === _this.version; });
-            if (this.heatmapOption === 'count') {
-                this.loadProcessDefinitionHeatmapCount(this.processDefinition);
-            }
-            if (this.heatmapOption === 'duration') {
-                this.loadProcessDefinitionHeatmapDuration(this.processDefinition);
-            }
-        };
-        ProcessDiagramComponent.prototype.setMax = function (key) {
-            if (this.heatmapDuration) {
-                this.max = Math.max(this.heatmapDuration[key].averageDurationInMilliseconds, this.max);
-            }
-            else if (this.heatmapCount) {
-                this.max = Math.max(this.heatmapCount[key].totalCount + this.heatmapCount[key].count, this.max);
-            }
-        };
-        ProcessDiagramComponent.prototype.addCounterActiveOverlays = function (key, inputData) {
-            var overlays = this.bpmnJS.get('overlays');
-            overlays.add(key, {
-                position: {
-                    bottom: 13,
-                    left: -12
-                },
-                show: {
-                    minZoom: 0,
-                    maxZoom: 5.0
-                },
-                html: "<span class=\"badge badge-pill badge-primary\">" + inputData[key].count + "</span>"
-            });
-        };
-        return ProcessDiagramComponent;
-    }());
-    ProcessDiagramComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-process-diagram',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"process-diagram-container\">\n  <div *ngIf=\"processDefinitionKey\" class=\"diagram-container-switch-holder\" >\n    <div class=\"container-fluid\">\n      <div class=\"row p-4 bg-light\">\n        <div class=\"col-4\">\n          <label><strong>Version</strong></label><br />\n          <select class=\"form-control\" (change)=\"setProcessDefinitionVersion($event.target.value)\">\n            <option *ngFor=\"let processDefinitionVersion of processDefinitionVersions\"\n                    [value]=\"processDefinitionVersion.version\"\n                    [selected]=\"processDefinitionVersion.version === version\">\n              {{ processDefinitionVersion.version }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4\">\n          <label><strong>Heatmap type</strong></label><br />\n          <select class=\"form-control\" (change)=\"setHeatmapOption($event.target.value)\">\n            <option *ngFor=\"let option of enumHeatmapOptions\"\n                    [value]=\"option\"\n                    [selected]=\"option === heatmapOption\" >\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4 text-right\">\n          <label><strong>Show heatmap</strong></label><br />\n          <div class=\"text-left switch-button switch-button-sm switch-button-success\">\n            <input type=\"checkbox\" id=\"toggleHeatmap\" [checked]=\"showHeatmap\" (click)=\"toggleShowHeatmap()\"><span>\n            <label for=\"toggleHeatmap\"></label></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #ref (window:resize)=\"onWindowResize()\" class=\"diagram-container\"></div>\n\n  <div *ngIf=\"processInstanceId\" class=\"p-4 text-center legenda-holder\">\n    <span><div class=\"legenda highlight-overlay-past\"></div> Executed tasks</span>\n    <span class=\"ml-3\"><div class=\"legenda highlight-overlay-current\"></div> Current tasks</span>\n  </div>\n\n  <div *ngIf=\"processDefinitionKey\" class=\"p-4 text-center legenda-holder\">\n    <span><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active instances of this task.</span>\n    <span>&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in comparison to the other tasks.</span>\n  </div>\n</div>\n",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: [".process-diagram-container .diagram-container{height:50vh;width:100%}.process-diagram-container .diagram-container-switch-holder{position:absolute;width:100%;z-index:1000}.process-diagram-container .highlight-overlay-past:not(.djs-connection) .djs-visual>:first-child{fill:#d8d8d8!important}.process-diagram-container .highlight-overlay-current:not(.djs-connection) .djs-visual>:first-child{fill:#b2e0ff!important}.process-diagram-container .legenda-holder{font-size:1em}.process-diagram-container .legenda{border:2px solid #000;border-radius:3px;display:inline-block;margin-bottom:-4px;margin-right:5px;padding:7px}.process-diagram-container .legenda.highlight-overlay-past{background-color:#d8d8d8}.process-diagram-container .legenda.highlight-overlay-current{background-color:#b2e0ff}"]
-                },] }
-    ];
-    ProcessDiagramComponent.ctorParameters = function () { return [
-        { type: ProcessService }
-    ]; };
-    ProcessDiagramComponent.propDecorators = {
-        el: [{ type: i0.ViewChild, args: ['ref', { static: true },] }],
-        importDone: [{ type: i0.Output }],
-        processDefinitionKey: [{ type: i0.Input }],
-        processInstanceId: [{ type: i0.Input }]
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var ProcessDiagramComponent = /** @class */ (function () {
+        function ProcessDiagramComponent(processService) {
+            this.processService = processService;
+            this.importDone = new i0.EventEmitter();
+            this.enumHeatmapOptions = ['count', 'duration'];
+        }
+        ProcessDiagramComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.processDefinitionKey) {
+                this.loadProcessDefinitionFromKey(this.processDefinitionKey);
+            }
+            if (this.processInstanceId) {
+                this.loadProcessInstanceXml(this.processInstanceId);
+            }
+            this.bpmnJS = new BpmnJS();
+            this.bpmnJS.on('import.done', function (_a) {
+                var error = _a.error;
+                if (!error) {
+                    var canvas_1 = _this.bpmnJS.get('canvas'), eventBus = _this.bpmnJS.get('eventBus');
+                    if (_this.processDiagram.historicActivityInstances) {
+                        _this.processDiagram.historicActivityInstances.forEach(function (instance) {
+                            // exclude multiInstanceBody
+                            if (instance.activityType !== 'multiInstanceBody') {
+                                canvas_1.addMarker(instance.activityId, instance.endTime ? 'highlight-overlay-past' : 'highlight-overlay-current');
+                            }
+                        });
+                    }
+                    canvas_1.zoom('fit-viewport', 'auto');
+                    if (_this.processDefinitionVersions) {
+                        eventBus.on('canvas.init', function () {
+                            if (_this.showHeatmap) {
+                                _this.clearHeatmap();
+                            }
+                            _this.loadHeatmapData();
+                        });
+                        eventBus.on('canvas.viewbox.changing', function () {
+                            if (_this.showHeatmap) {
+                                _this.clearHeatmap();
+                            }
+                        });
+                        eventBus.on('canvas.viewbox.changed', function () {
+                            _this.loadHeatmapData();
+                        });
+                    }
+                }
+            });
+        };
+        ProcessDiagramComponent.prototype.ngOnChanges = function () {
+            if (this.processDefinitionKey) {
+                this.loadProcessDefinitionFromKey(this.processDefinitionKey);
+            }
+            else if (this.processInstanceId) {
+                this.loadProcessInstanceXml(this.processInstanceId);
+            }
+        };
+        ProcessDiagramComponent.prototype.ngOnDestroy = function () {
+            if (this.bpmnJS) {
+                this.bpmnJS.destroy();
+            }
+        };
+        ProcessDiagramComponent.prototype.loadProcessDefinition = function (processDefinitionKey) {
+            var _this = this;
+            this.processService.getProcessDefinition(processDefinitionKey).subscribe(function (response) {
+                _this.heatmapOption = _this.enumHeatmapOptions[0];
+                _this.version = response.version;
+                _this.loadProcessDefinitionXml(response.id);
+            });
+        };
+        ProcessDiagramComponent.prototype.loadProcessDefinitionVersions = function (processDefinitionKey) {
+            var _this = this;
+            this.processService.getProcessDefinitionVersions(processDefinitionKey).subscribe(function (response) {
+                _this.processDefinitionVersions = response;
+            });
+        };
+        ProcessDiagramComponent.prototype.loadProcessDefinitionFromKey = function (processDefinitionKey) {
+            this.loadProcessDefinitionVersions(processDefinitionKey);
+            this.loadProcessDefinition(processDefinitionKey);
+        };
+        ProcessDiagramComponent.prototype.loadProcessDefinitionXml = function (processDefinitionId) {
+            var _this = this;
+            this.processService.getProcessDefinitionXml(processDefinitionId).subscribe(function (response) {
+                _this.processDiagram = response;
+                _this.bpmnJS.importXML(_this.processDiagram.bpmn20Xml);
+                _this.bpmnJS.attachTo(_this.el.nativeElement);
+            });
+        };
+        ProcessDiagramComponent.prototype.loadProcessInstanceXml = function (processInstanceId) {
+            var _this = this;
+            this.processService.getProcessXml(processInstanceId).subscribe(function (response) {
+                _this.processDiagram = response;
+                _this.bpmnJS.importXML(_this.processDiagram.bpmn20Xml);
+                _this.bpmnJS.attachTo(_this.el.nativeElement);
+            });
+        };
+        ProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapCount = function (processDefinition) {
+            var _this = this;
+            this.processService.getProcessHeatmapCount(processDefinition).subscribe(function (response) {
+                _this.inputData = response;
+                _this.valueKey = 'totalCount';
+                _this.heatPoints = { data: [] };
+                _this.min = 0;
+                _this.max = 0;
+                Object.keys(_this.inputData).forEach(function (key) {
+                    var diagramContainer = _this.el.nativeElement.querySelector('svg').getBoundingClientRect(), diagramElm = _this.el.nativeElement
+                        .querySelector("g[data-element-id=" + key + "]")
+                        .getBoundingClientRect();
+                    _this.setMax(key);
+                    _this.heatPoints.data.push({
+                        x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
+                        y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
+                        value: _this.inputData[key][_this.valueKey],
+                        radius: diagramElm.width / 2,
+                    });
+                    _this.addCounterActiveOverlays(key, _this.inputData);
+                });
+                _this.clearHeatmap();
+                if (_this.showHeatmap) {
+                    _this.loadHeatmap();
+                }
+            });
+        };
+        ProcessDiagramComponent.prototype.onWindowResize = function () {
+            var oldCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
+            if (oldCanvas) {
+                oldCanvas.remove();
+                this.heatMapInstance = null;
+            }
+            if (this.showHeatmap) {
+                this.loadHeatmap();
+            }
+        };
+        ProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapDuration = function (processDefinition) {
+            var _this = this;
+            this.processService.getProcessHeatmapDuration(processDefinition).subscribe(function (response) {
+                _this.inputData = response;
+                _this.valueKey = 'averageDurationInMilliseconds';
+                _this.heatPoints = { data: [] };
+                _this.min = 0;
+                _this.max = 0;
+                Object.keys(_this.inputData).forEach(function (key) {
+                    var diagramContainer = _this.el.nativeElement.querySelector('svg').getBoundingClientRect(), diagramElm = _this.el.nativeElement
+                        .querySelector("g[data-element-id=" + key + "]")
+                        .getBoundingClientRect();
+                    _this.setMax(key);
+                    _this.heatPoints.data.push({
+                        x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
+                        y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
+                        value: _this.inputData[key][_this.valueKey],
+                        radius: diagramElm.width / 2,
+                    });
+                    _this.addCounterActiveOverlays(key, _this.inputData);
+                });
+                _this.clearHeatmap();
+                if (_this.showHeatmap) {
+                    _this.loadHeatmap();
+                }
+            });
+        };
+        ProcessDiagramComponent.prototype.setProcessDefinitionKey = function (processDefinitionKey) {
+            this.processDefinitionKey = processDefinitionKey;
+            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
+        };
+        ProcessDiagramComponent.prototype.setProcessDefinitionVersion = function (version) {
+            this.version = +version;
+            this.loadHeatmapData();
+        };
+        ProcessDiagramComponent.prototype.setHeatmapOption = function (heatmapOption) {
+            this.heatmapOption = heatmapOption;
+            this.loadHeatmapData();
+        };
+        ProcessDiagramComponent.prototype.toggleShowHeatmap = function () {
+            this.showHeatmap = !this.showHeatmap;
+            this.loadHeatmapData();
+        };
+        ProcessDiagramComponent.prototype.loadHeatmap = function () {
+            if (!this.heatMapInstance) {
+                this.heatMapInstance = heatmap.create({
+                    radius: 54,
+                    blur: 0.7,
+                    maxOpacity: 0.4,
+                    minOpacity: 0,
+                    container: this.el.nativeElement,
+                });
+            }
+            this.heatMapInstance.setData({
+                min: this.min,
+                max: this.max,
+                data: this.heatPoints.data,
+            });
+        };
+        ProcessDiagramComponent.prototype.clearHeatmap = function () {
+            if (this.heatMapInstance) {
+                this.heatMapInstance.setData({ data: [] });
+            }
+        };
+        ProcessDiagramComponent.prototype.loadHeatmapData = function () {
+            var _this = this;
+            this.processDefinition = this.processDefinitionVersions.find(function (definition) { return definition.version === _this.version; });
+            if (this.heatmapOption === 'count') {
+                this.loadProcessDefinitionHeatmapCount(this.processDefinition);
+            }
+            if (this.heatmapOption === 'duration') {
+                this.loadProcessDefinitionHeatmapDuration(this.processDefinition);
+            }
+        };
+        ProcessDiagramComponent.prototype.setMax = function (key) {
+            if (this.heatmapDuration) {
+                this.max = Math.max(this.heatmapDuration[key].averageDurationInMilliseconds, this.max);
+            }
+            else if (this.heatmapCount) {
+                this.max = Math.max(this.heatmapCount[key].totalCount + this.heatmapCount[key].count, this.max);
+            }
+        };
+        ProcessDiagramComponent.prototype.addCounterActiveOverlays = function (key, inputData) {
+            var overlays = this.bpmnJS.get('overlays');
+            overlays.add(key, {
+                position: {
+                    bottom: 13,
+                    left: -12,
+                },
+                show: {
+                    minZoom: 0,
+                    maxZoom: 5.0,
+                },
+                html: "<span class=\"badge badge-pill badge-primary\">" + inputData[key].count + "</span>",
+            });
+        };
+        return ProcessDiagramComponent;
+    }());
+    ProcessDiagramComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-process-diagram',
+                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"process-diagram-container\">\n  <div *ngIf=\"processDefinitionKey\" class=\"diagram-container-switch-holder\">\n    <div class=\"container-fluid\">\n      <div class=\"row p-4 bg-light\">\n        <div class=\"col-4\">\n          <label><strong>Version</strong></label\n          ><br />\n          <select class=\"form-control\" (change)=\"setProcessDefinitionVersion($event.target.value)\">\n            <option\n              *ngFor=\"let processDefinitionVersion of processDefinitionVersions\"\n              [value]=\"processDefinitionVersion.version\"\n              [selected]=\"processDefinitionVersion.version === version\"\n            >\n              {{ processDefinitionVersion.version }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4\">\n          <label><strong>Heatmap type</strong></label\n          ><br />\n          <select class=\"form-control\" (change)=\"setHeatmapOption($event.target.value)\">\n            <option\n              *ngFor=\"let option of enumHeatmapOptions\"\n              [value]=\"option\"\n              [selected]=\"option === heatmapOption\"\n            >\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4 text-right\">\n          <label><strong>Show heatmap</strong></label\n          ><br />\n          <div class=\"text-left switch-button switch-button-sm switch-button-success\">\n            <input\n              type=\"checkbox\"\n              id=\"toggleHeatmap\"\n              [checked]=\"showHeatmap\"\n              (click)=\"toggleShowHeatmap()\"\n            /><span> <label for=\"toggleHeatmap\"></label></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #ref (window:resize)=\"onWindowResize()\" class=\"diagram-container\"></div>\n\n  <div *ngIf=\"processInstanceId\" class=\"p-4 text-center legenda-holder\">\n    <span\n      ><div class=\"legenda highlight-overlay-past\"></div>\n      Executed tasks</span\n    >\n    <span class=\"ml-3\"\n      ><div class=\"legenda highlight-overlay-current\"></div>\n      Current tasks</span\n    >\n  </div>\n\n  <div *ngIf=\"processDefinitionKey\" class=\"p-4 text-center legenda-holder\">\n    <span\n      ><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active\n      instances of this task.</span\n    >\n    <span\n      >&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in\n      comparison to the other tasks.</span\n    >\n  </div>\n</div>\n",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    styles: [".process-diagram-container .diagram-container{height:50vh;width:100%}.process-diagram-container .diagram-container-switch-holder{position:absolute;width:100%;z-index:1000}.process-diagram-container .highlight-overlay-past:not(.djs-connection) .djs-visual>:first-child{fill:#d8d8d8!important}.process-diagram-container .highlight-overlay-current:not(.djs-connection) .djs-visual>:first-child{fill:#b2e0ff!important}.process-diagram-container .legenda-holder{font-size:1em}.process-diagram-container .legenda{border:2px solid #000;border-radius:3px;display:inline-block;margin-bottom:-4px;margin-right:5px;padding:7px}.process-diagram-container .legenda.highlight-overlay-past{background-color:#d8d8d8}.process-diagram-container .legenda.highlight-overlay-current{background-color:#b2e0ff}"]
+                },] }
+    ];
+    ProcessDiagramComponent.ctorParameters = function () { return [
+        { type: ProcessService }
+    ]; };
+    ProcessDiagramComponent.propDecorators = {
+        el: [{ type: i0.ViewChild, args: ['ref', { static: true },] }],
+        importDone: [{ type: i0.Output }],
+        processDefinitionKey: [{ type: i0.Input }],
+        processInstanceId: [{ type: i0.Input }]
     };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var ProcessModule = /** @class */ (function () {
-        function ProcessModule() {
-        }
-        return ProcessModule;
-    }());
-    ProcessModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        ProcessDiagramComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        components.ListModule,
-                        components.WidgetModule,
-                        components.TimelineModule,
-                        components.BpmnJsDiagramModule,
-                        components.CamundaFormModule,
-                        animations.BrowserAnimationsModule,
-                        ngxToastr.ToastrModule.forRoot({
-                            positionClass: 'toast-bottom-full-width',
-                            preventDuplicates: true
-                        })
-                    ],
-                    exports: [
-                        ProcessDiagramComponent
-                    ],
-                },] }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var ProcessModule = /** @class */ (function () {
+        function ProcessModule() {
+        }
+        return ProcessModule;
+    }());
+    ProcessModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [ProcessDiagramComponent],
+                    imports: [
+                        common.CommonModule,
+                        components.ListModule,
+                        components.WidgetModule,
+                        components.TimelineModule,
+                        components.BpmnJsDiagramModule,
+                        components.CamundaFormModule,
+                        animations.BrowserAnimationsModule,
+                        ngxToastr.ToastrModule.forRoot({
+                            positionClass: 'toast-bottom-full-width',
+                            preventDuplicates: true,
+                        }),
+                    ],
+                    exports: [ProcessDiagramComponent],
+                },] }
     ];
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.ProcessDiagramComponent = ProcessDiagramComponent;