camunda-bpmn-js 0.13.0-alpha.0 → 0.13.0-alpha.3

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.
Files changed (39) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/base-modeler.css +1 -0
  3. package/dist/assets/bpmn-js-properties-panel.css +778 -0
  4. package/dist/assets/bpmn-js.css +116 -0
  5. package/dist/assets/camunda-cloud-modeler.css +2 -1
  6. package/dist/assets/diagram-js.css +80 -78
  7. package/dist/assets/element-templates.css +3 -3
  8. package/dist/assets/properties-panel.css +5 -17
  9. package/dist/base-modeler.development.js +6632 -6025
  10. package/dist/base-modeler.production.min.js +4 -4
  11. package/dist/camunda-cloud-modeler.development.js +44091 -39170
  12. package/dist/camunda-cloud-modeler.production.min.js +4 -4
  13. package/dist/camunda-platform-modeler.development.js +21448 -21032
  14. package/dist/camunda-platform-modeler.production.min.js +4 -4
  15. package/lib/base/Modeler.js +0 -6
  16. package/lib/camunda-cloud/ElementTemplatesValidator.js +1 -0
  17. package/lib/camunda-cloud/Modeler.js +14 -1
  18. package/lib/camunda-cloud/features/drilldown/index.js +3 -0
  19. package/lib/camunda-cloud/features/modeling/behavior/CleanUpBusinessRuleTaskBehavior.js +60 -57
  20. package/lib/camunda-cloud/features/modeling/behavior/CreateZeebeCallActivityBehavior.js +1 -1
  21. package/lib/camunda-cloud/features/modeling/behavior/RemoveAssignmentDefinitionBehavior.js +51 -0
  22. package/lib/camunda-cloud/features/modeling/behavior/UpdatePropagateAllChildVariablesBehavior.js +60 -33
  23. package/lib/camunda-cloud/features/modeling/behavior/index.js +8 -8
  24. package/lib/camunda-cloud/helper/CalledElementHelper.js +5 -5
  25. package/lib/camunda-cloud/helper/FormsHelper.js +4 -4
  26. package/lib/camunda-cloud/helper/Utils.js +1 -1
  27. package/lib/camunda-platform/features/modeling/behavior/DeleteErrorEventDefinitionBehavior.js +23 -36
  28. package/lib/camunda-platform/features/modeling/behavior/DeleteRetryTimeCycleBehavior.js +33 -21
  29. package/lib/camunda-platform/features/modeling/behavior/UpdateCamundaExclusiveBehavior.js +14 -11
  30. package/lib/camunda-platform/features/modeling/behavior/UpdateInputOutputBehavior.js +20 -30
  31. package/lib/camunda-platform/features/modeling/behavior/UpdateResultVariableBehavior.js +15 -12
  32. package/lib/camunda-platform/features/modeling/behavior/UserTaskFormsBehavior.js +9 -8
  33. package/lib/camunda-platform/features/modeling/behavior/UserTaskGeneratedFormsBehavior.js +32 -33
  34. package/lib/util/ExtensionElementsUtil.js +59 -0
  35. package/package.json +12 -13
  36. package/styles/base-modeler.css +1 -0
  37. package/styles/camunda-cloud-modeler.css +2 -1
  38. package/lib/camunda-cloud/features/modeling/behavior/CleanUpAssignmentDefinitionBehavior.js +0 -78
  39. package/lib/camunda-cloud/helper/ExtensionElementsHelper.js +0 -17
@@ -0,0 +1,116 @@
1
+ .bjs-container {
2
+ --bjs-font-family: Arial, sans-serif;
3
+
4
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
5
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
6
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
7
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
8
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
9
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
10
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
11
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
12
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
13
+
14
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
15
+ --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
16
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
17
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
18
+
19
+ --color-green-150-86-44: hsl(150, 86%, 44%);
20
+
21
+ --color-red-360-100-40: hsl(360, 100%, 40%);
22
+ --color-red-360-100-45: hsl(360, 100%, 45%);
23
+ --color-red-360-100-92: hsl(360, 100%, 92%);
24
+ --color-red-360-100-97: hsl(360, 100%, 97%);
25
+
26
+ --color-white: hsl(0, 0%, 100%);
27
+ --color-black: hsl(0, 0%, 0%);
28
+ --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
29
+ --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
30
+
31
+ --breadcrumbs-font-family: var(--bjs-font-family);
32
+ --breadcrumbs-item-color: var(--color-blue-205-100-50);
33
+ --breadcrumbs-arrow-color: var(--color-black);
34
+ --drilldown-fill-color: var(--color-white);
35
+ --drilldown-background-color: var(--color-blue-205-100-50);
36
+ }
37
+
38
+ .bjs-breadcrumbs {
39
+ position: absolute;
40
+ display: none;
41
+ flex-wrap: wrap;
42
+ align-items: center;
43
+ top: 30px;
44
+ left: 30px;
45
+ padding: 0px;
46
+ margin: 0px;
47
+ font-family: var(--breadcrumbs-font-family);
48
+ font-size: 16px;
49
+ line-height: normal;
50
+ }
51
+
52
+ .bjs-breadcrumbs-shown .bjs-breadcrumbs {
53
+ display: flex;
54
+ }
55
+
56
+ .djs-palette-shown .bjs-breadcrumbs {
57
+ left: 90px;
58
+ }
59
+
60
+ .djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
61
+ left: 140px;
62
+ }
63
+
64
+ .bjs-breadcrumbs li {
65
+ display: inline-flex;
66
+ padding-bottom: 5px;
67
+ }
68
+
69
+ .bjs-breadcrumbs li a {
70
+ cursor: pointer;
71
+ color: var(--breadcrumbs-item-color);
72
+ }
73
+
74
+ .bjs-breadcrumbs li:last-of-type a {
75
+ color: inherit;
76
+ cursor: default;
77
+ }
78
+
79
+ .bjs-breadcrumbs li:not(:first-child)::before {
80
+ content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>');
81
+ padding: 0 8px;
82
+ color: var(--breadcrumbs-arrow-color);
83
+ height: 1em;
84
+ }
85
+
86
+ .bjs-breadcrumbs .bjs-crumb {
87
+ display: inline-block;
88
+ max-width: 200px;
89
+ overflow: hidden;
90
+ text-overflow: ellipsis;
91
+ white-space: nowrap;
92
+ }
93
+
94
+ .bjs-drilldown {
95
+ width: 20px;
96
+ height: 20px;
97
+
98
+ padding: 0px;
99
+ margin-left: -20px;
100
+
101
+ cursor: pointer;
102
+ border: none;
103
+ border-radius: 2px;
104
+ outline: none;
105
+
106
+ fill: var(--drilldown-fill-color);
107
+ background-color: var(--drilldown-background-color);
108
+ }
109
+
110
+ .bjs-drilldown-empty {
111
+ display: none;
112
+ }
113
+
114
+ .selected .bjs-drilldown-empty {
115
+ display: inherit;
116
+ }
@@ -1 +1,2 @@
1
- @import './base-modeler.css';
1
+ @import './base-modeler.css';
2
+ @import './element-templates.css';
@@ -2,84 +2,86 @@
2
2
  * color definitions
3
3
  */
4
4
  .djs-container {
5
- --blue-base-65: #4d90ff;
6
- --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3);
7
- --blue-darken-48: #005df7;
8
- --blue-darken-55: #1a70ff;
9
- --blue-lighten-82: #a2c5ff;
10
-
11
- --red-base-62: #ff3d3d;
12
- --red-base-62-lighten-90: rgb(255, 235, 235);
13
-
14
- --silver-darken-94: #efefef;
15
-
16
- --color-000000: #000000;
17
- --color-000000-opacity-05: rgba(0, 0, 0, 0.05);
18
- --color-000000-opacity-10: rgba(0, 0, 0, 0.1);
19
- --color-333333: #333333;
20
- --color-666666: #666666;
21
- --color-aaaaaa: #aaaaaa;
22
- --color-cccccc: #cccccc;
23
- --color-cdcdcd: #cdcdcd;
24
- --color-dddddd: #dddddd;
25
- --color-f6f6f6: #f6f6f6;
26
- --color-fafafa: #fafafa;
27
- --color-fefefe: #fefefe;
28
- --color-ffffff: #ffffff;
29
-
30
- --bendpoint-fill-color: var(--blue-base-65-opacity-30);
31
- --bendpoint-stroke-color: var(--blue-base-65);
32
-
33
- --context-pad-entry-background-color: var(--color-fefefe);
34
- --context-pad-entry-hover-background-color: var(--silver-darken-94);
35
-
36
- --element-dragger-color: var(--blue-base-65);
37
- --element-hover-outline-fill-color: var(--blue-darken-48);
38
- --element-selected-outline-stroke-color: var(--blue-base-65);
39
-
40
- --lasso-fill-color: var(--color-000000-opacity-05);
41
- --lasso-stroke-color: var(--color-000000);
42
-
43
- --palette-entry-color: var(--color-333333);
44
- --palette-entry-hover-color: var(--blue-darken-48);
45
- --palette-entry-selected-color: var(--blue-base-65);
46
- --palette-separator-color: var(--color-aaaaaa);
47
- --palette-toggle-hover-background-color: var(--color-666666);
48
- --palette-background-color: var(--color-fafafa);
49
- --palette-border-color: var(--color-cccccc);
50
-
51
- --popup-body-background-color: var(--color-fefefe);
52
- --popup-header-entry-selected-color: var(--blue-base-65);
53
- --popup-header-entry-selected-background-color: var(--color-000000-opacity-10);
54
- --popup-header-separator-color: var(--color-dddddd);
55
- --popup-background-color: var(--color-fafafa);
56
- --popup-border-color: var(--color-cccccc);
57
-
58
- --resizer-fill-color: var(--blue-base-65-opacity-30);
59
- --resizer-stroke-color: var(--blue-base-65);
60
-
61
- --search-container-background-color: var(--color-fafafa);
62
- --search-container-border-color: var(--blue-darken-55);
63
- --search-container-box-shadow-color: var(--blue-lighten-82);
64
- --search-container-box-shadow-inset-color: var(--color-cdcdcd);
65
- --search-input-border-color: var(--color-cccccc);
66
- --search-result-border-color: var(--color-aaaaaa);
67
- --search-result-highlight-color: var(--color-000000);
68
- --search-result-selected-color: var(--blue-base-65-opacity-30);
69
-
70
- --shape-attach-allowed-stroke-color: var(--blue-base-65);
71
- --shape-connect-allowed-fill-color: var(--color-f6f6f6);
72
- --shape-drop-allowed-fill-color: var(--color-f6f6f6);
73
- --shape-drop-not-allowed-fill-color: var(--red-base-62-lighten-90);
74
- --shape-resize-preview-stroke-color: var(--blue-base-65);
75
-
76
- --snap-line-stroke-color: var(--blue-base-65-opacity-30);
77
-
78
- --space-tool-crosshair-stroke-color: var(--color-000000);
79
-
80
- --tooltip-error-background-color: var(--red-base-62-lighten-90);
81
- --tooltip-error-border-color: var(--red-base-62);
82
- --tooltip-error-color: var(--red-base-62);
5
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
6
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
7
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
8
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
9
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
10
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
11
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
12
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
13
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
14
+
15
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
16
+ --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
17
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
18
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
19
+
20
+ --color-green-150-86-44: hsl(150, 86%, 44%);
21
+
22
+ --color-red-360-100-40: hsl(360, 100%, 40%);
23
+ --color-red-360-100-45: hsl(360, 100%, 45%);
24
+ --color-red-360-100-92: hsl(360, 100%, 92%);
25
+ --color-red-360-100-97: hsl(360, 100%, 97%);
26
+
27
+ --color-white: hsl(0, 0%, 100%);
28
+ --color-black: hsl(0, 0%, 0%);
29
+ --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
30
+ --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
31
+
32
+ --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30);
33
+ --bendpoint-stroke-color: var(--color-blue-205-100-50);
34
+
35
+ --context-pad-entry-background-color: var(--color-white);
36
+ --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
37
+
38
+ --element-dragger-color: var(--color-blue-205-100-50);
39
+ --element-hover-outline-fill-color: var(--color-blue-205-100-45);
40
+ --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
41
+
42
+ --lasso-fill-color: var(--color-black-opacity-05);
43
+ --lasso-stroke-color: var(--color-black);
44
+
45
+ --palette-entry-color: var(--color-grey-225-10-15);
46
+ --palette-entry-hover-color: var(--color-blue-205-100-45);
47
+ --palette-entry-selected-color: var(--color-blue-205-100-50);
48
+ --palette-separator-color: var(--color-grey-225-10-75);
49
+ --palette-toggle-hover-background-color: var(--color-grey-225-10-55);
50
+ --palette-background-color: var(--color-grey-225-10-97);
51
+ --palette-border-color: var(--color-grey-225-10-75);
52
+
53
+ --popup-body-background-color: var(--color-white);
54
+ --popup-header-entry-selected-color: var(--color-blue-205-100-50);
55
+ --popup-header-entry-selected-background-color: var(--color-black-opacity-10);
56
+ --popup-header-separator-color: var(--color-grey-225-10-75);
57
+ --popup-background-color: var(--color-grey-225-10-97);
58
+ --popup-border-color: var(--color-grey-225-10-75);
59
+
60
+ --resizer-fill-color: var(--color-blue-205-100-45-opacity-30);
61
+ --resizer-stroke-color: var(--color-blue-205-100-50);
62
+
63
+ --search-container-background-color: var(--color-grey-225-10-97);
64
+ --search-container-border-color: var(--color-blue-205-100-50);
65
+ --search-container-box-shadow-color: var(--color-blue-205-100-95);
66
+ --search-container-box-shadow-inset-color: var(--color-grey-225-10-80);
67
+ --search-input-border-color: var(--color-grey-225-10-75);
68
+ --search-result-border-color: var(--color-grey-225-10-75);
69
+ --search-result-highlight-color: var(--color-black);
70
+ --search-result-selected-color: var(--color-blue-205-100-45-opacity-30);
71
+
72
+ --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
73
+ --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
74
+ --shape-drop-allowed-fill-color: var(--color-grey-225-10-97);
75
+ --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97);
76
+ --shape-resize-preview-stroke-color: var(--color-blue-205-100-50);
77
+
78
+ --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30);
79
+
80
+ --space-tool-crosshair-stroke-color: var(--color-black);
81
+
82
+ --tooltip-error-background-color: var(--color-red-360-100-97);
83
+ --tooltip-error-border-color: var(--color-red-360-100-45);
84
+ --tooltip-error-color: var(--color-red-360-100-45);
83
85
  }
84
86
 
85
87
  /**
@@ -7,7 +7,7 @@
7
7
  --unknown-template-background-color: var(--color-red-360-100-45);
8
8
  --unknown-template-hover-background-color: var(--color-red-360-100-40);
9
9
 
10
- --update-available-text-color: var(--color-grey-225-10-55);
10
+ --select-template-information-text-color: var(--color-grey-225-10-55);
11
11
  }
12
12
 
13
13
  .bio-properties-panel-templates-group .bio-properties-panel-group-header-button:not(.bio-properties-panel-arrow) {
@@ -50,7 +50,6 @@
50
50
  margin-right: 32px;
51
51
  }
52
52
 
53
- .bio-properties-panel-template-not-found-text,
54
53
  .bio-properties-panel-remove-template {
55
54
  color: var(--text-error-color);
56
55
  }
@@ -65,8 +64,9 @@
65
64
  background-color: var(--unknown-template-hover-background-color);
66
65
  }
67
66
 
67
+ .bio-properties-panel-template-not-found-text,
68
68
  .bio-properties-panel-template-update-available-text {
69
- color: var(--update-available-text-color);
69
+ color: var(--select-template-information-text-color);
70
70
  }
71
71
 
72
72
  .bio-properties-panel-template-not-found-text,
@@ -46,7 +46,6 @@
46
46
  --group-bottom-border-color: var(--color-grey-225-10-75);
47
47
 
48
48
  --add-entry-fill-color: var(--color-grey-225-10-35);
49
- --add-entry-empty-fill-color: var(--color-grey-225-10-75);
50
49
  --add-entry-hover-fill-color: var(--color-white);
51
50
  --add-entry-hover-background-color: var(--color-blue-205-100-50);
52
51
  --add-entry-label-color: var(--color-white);
@@ -56,7 +55,6 @@
56
55
 
57
56
  --arrow-fill-color: var(--color-grey-225-10-35);
58
57
  --arrow-hover-background-color: var(--color-grey-225-10-95);
59
- --arrow-empty-fill-color: var(--color-grey-225-10-75);
60
58
 
61
59
  --dot-color: var(--color-grey-225-10-35);
62
60
 
@@ -86,13 +84,12 @@
86
84
 
87
85
  --list-entry-dot-background-color: var(--color-grey-225-10-35);
88
86
  --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
89
- --list-entry-add-entry-empty-fill-color: var(--color-white);
90
87
  --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
91
88
  --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
92
89
  --list-entry-add-entry-label-color: var(--color-white);
93
90
  --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
94
91
  --list-entry-add-entry-fill-color: var(--color-white);
95
-
92
+
96
93
  --dropdown-item-background-color: var(--color-white);
97
94
  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
98
95
  --dropdown-separator-background-color: var(--color-grey-225-10-75);
@@ -256,7 +253,6 @@
256
253
  }
257
254
 
258
255
  .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
259
- fill: var(--add-entry-empty-fill-color);
260
256
  margin-right: 69px;
261
257
  padding-left: 6px;
262
258
  }
@@ -307,10 +303,6 @@
307
303
  transform: rotate(90deg);
308
304
  }
309
305
 
310
- .bio-properties-panel-group-header.empty .bio-properties-panel-arrow {
311
- fill: var(--arrow-empty-fill-color);
312
- }
313
-
314
306
  .bio-properties-panel-dot {
315
307
  align-self: center;
316
308
  height: 8px;
@@ -364,7 +356,7 @@
364
356
  margin: 2px 0 1px;
365
357
  }
366
358
 
367
- .bio-properties-panel-description,
359
+ .bio-properties-panel-description,
368
360
  .bio-properties-panel-description p,
369
361
  .bio-properties-panel-description span,
370
362
  .bio-properties-panel-description div {
@@ -642,7 +634,9 @@ textarea.bio-properties-panel-input {
642
634
  }
643
635
 
644
636
  .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
645
- .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry {
637
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
638
+ .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
639
+ {
646
640
  visibility: visible;
647
641
  }
648
642
 
@@ -797,16 +791,10 @@ textarea.bio-properties-panel-input {
797
791
  }
798
792
 
799
793
  .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
800
- fill: var(--list-entry-add-entry-empty-fill-color);
801
- background-color: var(--list-entry-add-entry-empty-background-color);
802
794
  margin-right: 16px;
803
795
  padding-left: 6px;
804
796
  }
805
797
 
806
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry:hover {
807
- background-color: var(--list-entry-add-entry-empty-hover-background-color);
808
- }
809
-
810
798
  .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
811
799
  color: var(--list-entry-add-entry-label-color);
812
800
  padding: 4px 6px 3px 2px;