camunda-bpmn-js 4.19.0 → 4.20.0

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 (20) hide show
  1. package/dist/assets/diagram-js.css +51 -46
  2. package/dist/base-modeler.development.js +2742 -4489
  3. package/dist/base-modeler.production.min.js +21 -20
  4. package/dist/base-navigated-viewer.development.js +33 -17
  5. package/dist/base-navigated-viewer.production.min.js +1 -1
  6. package/dist/base-viewer.development.js +33 -17
  7. package/dist/base-viewer.production.min.js +1 -1
  8. package/dist/camunda-cloud-modeler.development.js +13894 -12640
  9. package/dist/camunda-cloud-modeler.production.min.js +23 -22
  10. package/dist/camunda-cloud-navigated-viewer.development.js +33 -17
  11. package/dist/camunda-cloud-navigated-viewer.production.min.js +1 -1
  12. package/dist/camunda-cloud-viewer.development.js +33 -17
  13. package/dist/camunda-cloud-viewer.production.min.js +1 -1
  14. package/dist/camunda-platform-modeler.development.js +18100 -16803
  15. package/dist/camunda-platform-modeler.production.min.js +21 -20
  16. package/dist/camunda-platform-navigated-viewer.development.js +33 -17
  17. package/dist/camunda-platform-navigated-viewer.production.min.js +1 -1
  18. package/dist/camunda-platform-viewer.development.js +33 -17
  19. package/dist/camunda-platform-viewer.production.min.js +1 -1
  20. package/package.json +17 -17
package/dist/assets/diagram-js.css CHANGED
@@ -74,14 +74,15 @@
74
74
  --resizer-fill-color: var(--color-blue-205-100-45);
75
75
  --resizer-stroke-color: var(--canvas-fill-color);
76
76
 
77
- --search-container-background-color: var(--color-grey-225-10-97);
78
- --search-container-border-color: var(--color-blue-205-100-50);
79
- --search-container-box-shadow-color: var(--color-blue-205-100-95);
80
- --search-container-box-shadow-inset-color: var(--color-grey-225-10-80);
77
+ --search-font-family: "IBM Plex Sans", sans-serif;
78
+ --search-font-size: 14px;
79
+ --search-container-background-color: var(--color-white);
80
+ --search-shadow-color: var(--color-black-opacity-30);
81
81
  --search-input-border-color: var(--color-grey-225-10-75);
82
- --search-result-border-color: var(--color-grey-225-10-75);
83
- --search-result-highlight-color: var(--color-black);
84
- --search-result-selected-color: var(--color-blue-205-100-45-opacity-30);
82
+ --search-input-focus-border-color: var(--color-blue-205-100-50);
83
+ --search-input-focus-background-color: var(--color-blue-205-100-95);
84
+ --search-result-hover-background-color: var(--color-grey-225-10-95);
85
+ --search-result-secondary-color: var(--color-grey-225-10-55);
85
86
 
86
87
  --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
87
88
  --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
@@ -532,7 +533,7 @@ svg.new-parent {
532
533
  width: 100%;
533
534
  box-sizing: border-box;
534
535
  font-size: var(--popup-font-size);
535
- padding: 3px 6px;
536
+ padding: 3px 6px 3px 28px;
536
537
  border-radius: 2px;
537
538
  border: solid 1px var(--popup-search-border-color);
538
539
  line-height: 21px;
@@ -593,6 +594,8 @@ svg.new-parent {
593
594
  }
594
595
 
595
596
  .djs-popup-search {
597
+ position: relative;
598
+ width: auto;
596
599
  margin: 10px 12px;
597
600
  }
598
601
 
@@ -603,21 +606,12 @@ svg.new-parent {
603
606
  margin: 0;
604
607
  }
605
608
 
606
- .djs-popup-search {
607
- position: relative;
608
- width: auto;
609
- }
610
-
611
609
  .djs-popup-search-icon {
612
610
  position: absolute;
613
611
  left: 8px;
614
612
  top: 7px;
615
613
  }
616
614
 
617
- .djs-popup-search input {
618
- padding-left: 25px;
619
- }
620
-
621
615
  .djs-popup-results {
622
616
  margin: 7px 3px 7px 12px;
623
617
  list-style: none;
@@ -889,6 +883,14 @@ svg.new-parent {
889
883
  /**
890
884
  * search pad
891
885
  */
886
+ .djs-search-open .djs-context-pad {
887
+ display: none;
888
+ }
889
+
890
+ .djs-search-open .djs-connection.selected .djs-outline {
891
+ display: block;
892
+ }
893
+
892
894
  .djs-search-container {
893
895
  position: absolute;
894
896
  top: 20px;
@@ -902,76 +904,79 @@ svg.new-parent {
902
904
  max-width: 400px;
903
905
  z-index: 10;
904
906
 
905
- font-size: 1.05em;
906
- opacity: 0.9;
907
- background: var(--search-container-background-color);
908
- border: solid 1px var(--search-container-border-color);
907
+ font-family: var(--search-font-family);
908
+ font-size: var(--search-font-size);
909
909
  border-radius: 2px;
910
- box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset;
910
+ box-shadow: 0px 2px 6px var(--search-shadow-color);
911
911
  }
912
912
 
913
913
  .djs-search-container:not(.open) {
914
914
  display: none;
915
915
  }
916
916
 
917
+ .djs-search-input {
918
+ position: relative;
919
+ }
920
+
921
+ .djs-search-input svg {
922
+ position: absolute;
923
+ left: 8px;
924
+ top: 7px;
925
+ }
926
+
917
927
  .djs-search-input input {
918
- font-size: 1.05em;
928
+ font-size: var(--search-font-size);
919
929
  width: 100%;
920
- padding: 6px 10px;
930
+ padding: 3px 6px 3px 28px;
921
931
  border: 1px solid var(--search-input-border-color);
932
+ border-radius: 2px;
922
933
  box-sizing: border-box;
934
+ line-height: 21px;
923
935
  }
924
936
 
925
937
  .djs-search-input input:focus {
938
+ background-color: var(--search-input-focus-background-color);
939
+ border: solid 1px var(--search-input-focus-border-color);
926
940
  outline: none;
927
- border-color: var(--search-input-border-color);
928
941
  }
929
942
 
930
943
  .djs-search-results {
931
944
  position: relative;
932
945
  overflow-y: auto;
933
946
  max-height: 200px;
934
- }
935
-
936
- .djs-search-results:hover {
937
- cursor: pointer;
947
+ background: var(--search-container-background-color);
938
948
  }
939
949
 
940
950
  .djs-search-result {
941
- width: 100%;
942
- padding: 6px 10px;
943
- background: white;
944
- border-bottom: solid 1px var(--search-result-border-color);
945
- border-radius: 1px;
946
- }
947
-
948
- .djs-search-highlight {
949
- color: var(--search-result-highlight-color);
951
+ padding: 6px 8px;
950
952
  }
951
953
 
952
954
  .djs-search-result-primary {
953
- margin: 0 0 10px;
955
+ margin: 0 0 3px;
956
+ text-overflow: ellipsis;
957
+ overflow: hidden;
958
+ white-space: nowrap;
954
959
  }
955
960
 
956
961
  .djs-search-result-secondary {
957
962
  font-family: monospace;
958
963
  margin: 0;
964
+ text-overflow: ellipsis;
965
+ overflow: hidden;
966
+ white-space: nowrap;
967
+ color: var(--search-result-secondary-color);
959
968
  }
960
969
 
961
970
  .djs-search-result:hover {
962
- background: var(--search-result-selected-color);
971
+ background: var(--search-result-hover-background-color);
963
972
  }
964
973
 
965
974
  .djs-search-result-selected {
966
- background: var(--search-result-selected-color);
975
+ background: var(--search-result-hover-background-color);
967
976
  }
968
977
 
969
978
  .djs-search-result-selected:hover {
970
- background: var(--search-result-selected-color);
971
- }
972
-
973
- .djs-search-overlay {
974
- background: var(--search-result-selected-color);
979
+ background: var(--search-result-hover-background-color);
975
980
  }
976
981
 
977
982
  /**