@syncfusion/ej2-vue-diagrams 19.2.60 → 19.3.45

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 (41) hide show
  1. package/CHANGELOG.md +15 -3
  2. package/dist/ej2-vue-diagrams.umd.min.js +1 -1
  3. package/dist/es6/ej2-vue-diagrams.es2015.js +6 -3
  4. package/dist/es6/ej2-vue-diagrams.es2015.js.map +1 -1
  5. package/dist/es6/ej2-vue-diagrams.es5.js +6 -3
  6. package/dist/es6/ej2-vue-diagrams.es5.js.map +1 -1
  7. package/dist/global/ej2-vue-diagrams.min.js +2 -2
  8. package/package.json +8 -8
  9. package/src/diagram/diagram.component.js +2 -1
  10. package/src/overview/overview.component.js +2 -1
  11. package/src/symbol-palette/symbolpalette.component.js +2 -1
  12. package/styles/bootstrap-dark.css +45 -28
  13. package/styles/bootstrap.css +42 -25
  14. package/styles/bootstrap4.css +137 -15
  15. package/styles/bootstrap5-dark.css +396 -0
  16. package/styles/bootstrap5-dark.scss +1 -0
  17. package/styles/bootstrap5.css +396 -0
  18. package/styles/bootstrap5.scss +1 -0
  19. package/styles/diagram/bootstrap-dark.css +45 -28
  20. package/styles/diagram/bootstrap.css +42 -25
  21. package/styles/diagram/bootstrap4.css +137 -15
  22. package/styles/diagram/bootstrap5-dark.css +396 -0
  23. package/styles/diagram/bootstrap5-dark.scss +1 -0
  24. package/styles/diagram/bootstrap5.css +396 -0
  25. package/styles/diagram/bootstrap5.scss +1 -0
  26. package/styles/diagram/fabric-dark.css +42 -25
  27. package/styles/diagram/fabric.css +38 -21
  28. package/styles/diagram/highcontrast-light.css +19 -3
  29. package/styles/diagram/highcontrast.css +48 -31
  30. package/styles/diagram/material-dark.css +50 -33
  31. package/styles/diagram/material.css +38 -21
  32. package/styles/diagram/tailwind-dark.css +33 -17
  33. package/styles/diagram/tailwind.css +29 -13
  34. package/styles/fabric-dark.css +42 -25
  35. package/styles/fabric.css +38 -21
  36. package/styles/highcontrast-light.css +19 -3
  37. package/styles/highcontrast.css +48 -31
  38. package/styles/material-dark.css +50 -33
  39. package/styles/material.css +38 -21
  40. package/styles/tailwind-dark.css +33 -17
  41. package/styles/tailwind.css +29 -13
@@ -210,7 +210,7 @@
210
210
  }
211
211
 
212
212
  .e-diagram {
213
- background-color: transparent;
213
+ background-color: #fff;
214
214
  display: block;
215
215
  }
216
216
 
@@ -235,48 +235,65 @@
235
235
  }
236
236
 
237
237
  .e-diagram-endpoint-handle {
238
- fill: #ff80ab;
239
- stroke: #fff;
238
+ fill: #fff;
239
+ stroke: #00b0ff;
240
240
  }
241
241
 
242
242
  .e-diagram-endpoint-handle.e-connected {
243
- fill: #fff;
244
- stroke: #ff80ab;
243
+ fill: #00b0ff;
244
+ stroke: #fff;
245
245
  }
246
246
 
247
247
  .e-diagram-endpoint-handle.e-disabled {
248
- fill: #9e9e9e;
248
+ fill: #bdbdbd;
249
249
  opacity: 1;
250
- stroke: #000;
250
+ stroke: #fff;
251
+ }
252
+
253
+ .e-diagram-bezier-handle.e-source.e-disabled {
254
+ opacity: 1 !important;
255
+ }
256
+
257
+ .e-diagram-bezier-handle.e-target.e-disabled {
258
+ opacity: 1 !important;
259
+ }
260
+
261
+ .e-symbolpalette .e-acrdn-content {
262
+ background-color: #e0e0e0 !important;
251
263
  }
252
264
 
253
265
  .e-diagram-bezier-handle {
254
- fill: #ff80ab;
255
- stroke: #fff;
266
+ fill: #fff;
267
+ stroke: #00b0ff;
256
268
  }
257
269
 
258
270
  .e-diagram-bezier-line {
259
- stroke: #ff80ab;
271
+ stroke: #00b0ff;
260
272
  }
261
273
 
262
274
  .e-diagram-resize-handle {
263
- fill: #ff80ab;
275
+ fill: #00b0ff;
276
+ stroke: #00b0ff;
264
277
  stroke: #fff;
265
278
  }
266
279
 
280
+ .e-diagram-helper {
281
+ stroke: #00b0ff;
282
+ }
283
+
267
284
  .e-diagram-resize-handle.e-disabled {
268
- fill: #9e9e9e;
285
+ fill: #bdbdbd;
269
286
  opacity: 1;
270
- stroke: #000;
287
+ stroke: #fff;
271
288
  }
272
289
 
273
290
  .e-diagram-rotate-handle {
274
- fill: #000;
275
- stroke: #fff;
291
+ fill: #00b0ff;
292
+ stroke: #00b0ff;
276
293
  }
277
294
 
278
295
  .e-diagram-border {
279
- stroke: #ff80ab;
296
+ stroke: #00b0ff;
280
297
  }
281
298
 
282
299
  .e-diagram-border.e-disabled {
@@ -285,36 +302,36 @@
285
302
  }
286
303
 
287
304
  .e-diagram-border.e-thick-border {
288
- stroke: #ff80ab;
305
+ stroke: #3f51b5;
289
306
  stroke-width: 2;
290
307
  }
291
308
 
292
309
  .e-diagram-border.e-thick-border.e-diagram-lane {
293
- stroke: #0078ff;
310
+ stroke: #3f51b5;
294
311
  stroke-width: 2;
295
312
  }
296
313
 
297
314
  .e-diagram-highlighter {
298
- stroke: #ff80ab;
315
+ stroke: #00b0ff;
299
316
  stroke-width: 2;
300
317
  }
301
318
 
302
319
  .e-diagram-selected-region {
303
- stroke: #3f51b5;
320
+ stroke: #00b0ff;
304
321
  }
305
322
 
306
323
  .e-diagram-pivot-line {
307
- stroke: #ff80ab;
324
+ stroke: #00b0ff;
308
325
  }
309
326
 
310
327
  .e-symbolpalette .e-symbol-hover:hover {
311
- background: #eee;
312
- border-radius: 0px;
328
+ background: #bdbdbd;
329
+ border-radius: 4px;
313
330
  }
314
331
 
315
332
  .e-symbolpalette .e-symbol-selected {
316
- background: #e0e0e0;
317
- border-radius: 0px;
333
+ background: #616161;
334
+ border-radius: 4px;
318
335
  }
319
336
 
320
337
  .e-diagram-tooltip {
@@ -322,22 +339,22 @@
322
339
  }
323
340
 
324
341
  .e-diagram .e-ruler {
325
- background-color: #fff;
326
- color: #757575;
342
+ background-color: #424242;
343
+ color: #f5f5f5;
327
344
  font-size: 10px;
328
345
  }
329
346
 
330
347
  .e-diagram .e-ruler-overlap {
331
- background-color: #fff;
348
+ background-color: #424242;
332
349
  }
333
350
 
334
351
  .e-diagram .e-d-ruler-marker {
335
- stroke: #ff80ab;
352
+ stroke: #00b0ff;
336
353
  }
337
354
 
338
355
  .e-diagram .e-diagram-text-edit {
339
356
  background: #fff;
340
- border-color: #ff80ab;
357
+ border-color: #00b0ff;
341
358
  border-style: dashed;
342
359
  border-width: 1px;
343
360
  box-sizing: content-box;
@@ -346,16 +363,16 @@
346
363
  }
347
364
 
348
365
  .e-diagram-text-edit::selection {
349
- background: #ff80ab;
366
+ background: #00b0ff;
350
367
  color: #fff;
351
368
  }
352
369
 
353
370
  .e-ruler-tick-label {
354
- fill: #616161;
371
+ fill: #bdbdbd;
355
372
  }
356
373
 
357
374
  .e-ruler-tick {
358
- stroke: #757575;
375
+ stroke: #9e9e9e;
359
376
  }
360
377
 
361
378
  .e-menu-item e-blankicon {
@@ -210,7 +210,7 @@
210
210
  }
211
211
 
212
212
  .e-diagram {
213
- background-color: transparent;
213
+ background-color: #fff;
214
214
  display: block;
215
215
  }
216
216
 
@@ -235,24 +235,36 @@
235
235
  }
236
236
 
237
237
  .e-diagram-endpoint-handle {
238
- fill: #e3165b;
239
- stroke: #fff;
238
+ fill: #fff;
239
+ stroke: #e3165b;
240
240
  }
241
241
 
242
242
  .e-diagram-endpoint-handle.e-connected {
243
- fill: #fff;
244
- stroke: #e3165b;
243
+ fill: #e3165b;
244
+ stroke: #fff;
245
245
  }
246
246
 
247
247
  .e-diagram-endpoint-handle.e-disabled {
248
- fill: #9e9e9e;
248
+ fill: #bdbdbd;
249
249
  opacity: 1;
250
250
  stroke: #fff;
251
251
  }
252
252
 
253
+ .e-diagram-bezier-handle.e-source.e-disabled {
254
+ opacity: 1 !important;
255
+ }
256
+
257
+ .e-diagram-bezier-handle.e-target.e-disabled {
258
+ opacity: 1 !important;
259
+ }
260
+
261
+ .e-symbolpalette .e-acrdn-content {
262
+ background-color: #fff !important;
263
+ }
264
+
253
265
  .e-diagram-bezier-handle {
254
- fill: #e3165b;
255
- stroke: #fff;
266
+ fill: #fff;
267
+ stroke: #e3165b;
256
268
  }
257
269
 
258
270
  .e-diagram-bezier-line {
@@ -261,18 +273,23 @@
261
273
 
262
274
  .e-diagram-resize-handle {
263
275
  fill: #e3165b;
276
+ stroke: #e3165b;
264
277
  stroke: #fff;
265
278
  }
266
279
 
280
+ .e-diagram-helper {
281
+ stroke: #e3165b;
282
+ }
283
+
267
284
  .e-diagram-resize-handle.e-disabled {
268
- fill: #9e9e9e;
285
+ fill: #bdbdbd;
269
286
  opacity: 1;
270
287
  stroke: #fff;
271
288
  }
272
289
 
273
290
  .e-diagram-rotate-handle {
274
- fill: #000;
275
- stroke: #fff;
291
+ fill: #e3165b;
292
+ stroke: #e3165b;
276
293
  }
277
294
 
278
295
  .e-diagram-border {
@@ -285,12 +302,12 @@
285
302
  }
286
303
 
287
304
  .e-diagram-border.e-thick-border {
288
- stroke: #e3165b;
305
+ stroke: #3f51b5;
289
306
  stroke-width: 2;
290
307
  }
291
308
 
292
309
  .e-diagram-border.e-thick-border.e-diagram-lane {
293
- stroke: #0078ff;
310
+ stroke: #3f51b5;
294
311
  stroke-width: 2;
295
312
  }
296
313
 
@@ -300,7 +317,7 @@
300
317
  }
301
318
 
302
319
  .e-diagram-selected-region {
303
- stroke: #3f51b5;
320
+ stroke: #e3165b;
304
321
  }
305
322
 
306
323
  .e-diagram-pivot-line {
@@ -309,12 +326,12 @@
309
326
 
310
327
  .e-symbolpalette .e-symbol-hover:hover {
311
328
  background: #eee;
312
- border-radius: 0px;
329
+ border-radius: 4px;
313
330
  }
314
331
 
315
332
  .e-symbolpalette .e-symbol-selected {
316
- background: #e0e0e0;
317
- border-radius: 0px;
333
+ background: #bdbdbd;
334
+ border-radius: 4px;
318
335
  }
319
336
 
320
337
  .e-diagram-tooltip {
@@ -322,13 +339,13 @@
322
339
  }
323
340
 
324
341
  .e-diagram .e-ruler {
325
- background-color: #fff;
326
- color: #757575;
342
+ background-color: #f5f5f5;
343
+ color: #f5f5f5;
327
344
  font-size: 10px;
328
345
  }
329
346
 
330
347
  .e-diagram .e-ruler-overlap {
331
- background-color: #fff;
348
+ background-color: #f5f5f5;
332
349
  }
333
350
 
334
351
  .e-diagram .e-d-ruler-marker {
@@ -355,7 +372,7 @@
355
372
  }
356
373
 
357
374
  .e-ruler-tick {
358
- stroke: #757575;
375
+ stroke: #bdbdbd;
359
376
  }
360
377
 
361
378
  .e-menu-item e-blankicon {
@@ -130,7 +130,7 @@
130
130
  }
131
131
 
132
132
  .e-diagram-menu .e-delete::before {
133
- content: '\e78d';
133
+ content: '\e844';
134
134
  }
135
135
 
136
136
  .e-diagram-menu .e-ungroup::before {
@@ -145,6 +145,14 @@
145
145
  content: '\e7bd';
146
146
  }
147
147
 
148
+ .e-diagram-menu .e-redo::before {
149
+ content: '\e7b9';
150
+ }
151
+
152
+ .e-diagram-menu .e-copy::before {
153
+ content: '\e7ce';
154
+ }
155
+
148
156
  .e-diagram-menu .e-cut::before {
149
157
  content: '\e763';
150
158
  }
@@ -157,14 +165,6 @@
157
165
  content: '\e75e';
158
166
  }
159
167
 
160
- .e-diagram-menu .e-copy::before {
161
- content: '\e7ce';
162
- }
163
-
164
- .e-diagram-menu .e-redo::before {
165
- content: '\e7b9';
166
- }
167
-
168
168
  .e-diagram-menu .e-zoomin::before {
169
169
  content: '\e70a';
170
170
  }
@@ -206,7 +206,7 @@
206
206
  }
207
207
 
208
208
  .e-symbolpalette .e-clear-searchtext::before {
209
- content: '\e771';
209
+ content: '\e737';
210
210
  }
211
211
 
212
212
  .e-diagram {
@@ -250,6 +250,18 @@
250
250
  stroke: #fff;
251
251
  }
252
252
 
253
+ .e-diagram-bezier-handle.e-source.e-disabled {
254
+ opacity: 1 !important;
255
+ }
256
+
257
+ .e-diagram-bezier-handle.e-target.e-disabled {
258
+ opacity: 1 !important;
259
+ }
260
+
261
+ .e-symbolpalette .e-acrdn-content {
262
+ background-color: #d1d5db !important;
263
+ }
264
+
253
265
  .e-diagram-bezier-handle {
254
266
  fill: #fff;
255
267
  stroke: #22d3ee;
@@ -265,6 +277,10 @@
265
277
  stroke: #fff;
266
278
  }
267
279
 
280
+ .e-diagram-helper {
281
+ stroke: #22d3ee;
282
+ }
283
+
268
284
  .e-diagram-resize-handle.e-disabled {
269
285
  fill: #9ca3af;
270
286
  opacity: 1;
@@ -272,7 +288,7 @@
272
288
  }
273
289
 
274
290
  .e-diagram-rotate-handle {
275
- fill: #d1d5db;
291
+ fill: #22d3ee;
276
292
  stroke: #22d3ee;
277
293
  }
278
294
 
@@ -282,7 +298,7 @@
282
298
 
283
299
  .e-diagram-border.e-disabled {
284
300
  opacity: 1;
285
- stroke: #22d3ee;
301
+ stroke: #9ca3af;
286
302
  }
287
303
 
288
304
  .e-diagram-border.e-thick-border {
@@ -309,12 +325,12 @@
309
325
  }
310
326
 
311
327
  .e-symbolpalette .e-symbol-hover:hover {
312
- background: #4b5563;
328
+ background: #9ca3af;
313
329
  border-radius: 0px;
314
330
  }
315
331
 
316
332
  .e-symbolpalette .e-symbol-selected {
317
- background: #6b7280;
333
+ background: #4b5563;
318
334
  border-radius: 0px;
319
335
  }
320
336
 
@@ -337,12 +353,12 @@
337
353
  }
338
354
 
339
355
  .e-diagram .e-diagram-text-edit {
340
- background: #000;
356
+ background: #fff;
341
357
  border-color: #22d3ee;
342
358
  border-style: dashed;
343
359
  border-width: 1px;
344
360
  box-sizing: content-box;
345
- color: #fff;
361
+ color: #000;
346
362
  min-width: 50px;
347
363
  }
348
364
 
@@ -356,7 +372,7 @@
356
372
  }
357
373
 
358
374
  .e-ruler-tick {
359
- stroke: #4b5563;
375
+ stroke: #6b7280;
360
376
  }
361
377
 
362
378
  .e-menu-item e-blankicon {
@@ -130,7 +130,7 @@
130
130
  }
131
131
 
132
132
  .e-diagram-menu .e-delete::before {
133
- content: '\e78d';
133
+ content: '\e844';
134
134
  }
135
135
 
136
136
  .e-diagram-menu .e-ungroup::before {
@@ -145,6 +145,14 @@
145
145
  content: '\e7bd';
146
146
  }
147
147
 
148
+ .e-diagram-menu .e-redo::before {
149
+ content: '\e7b9';
150
+ }
151
+
152
+ .e-diagram-menu .e-copy::before {
153
+ content: '\e7ce';
154
+ }
155
+
148
156
  .e-diagram-menu .e-cut::before {
149
157
  content: '\e763';
150
158
  }
@@ -157,14 +165,6 @@
157
165
  content: '\e75e';
158
166
  }
159
167
 
160
- .e-diagram-menu .e-copy::before {
161
- content: '\e7ce';
162
- }
163
-
164
- .e-diagram-menu .e-redo::before {
165
- content: '\e7b9';
166
- }
167
-
168
168
  .e-diagram-menu .e-zoomin::before {
169
169
  content: '\e70a';
170
170
  }
@@ -206,7 +206,7 @@
206
206
  }
207
207
 
208
208
  .e-symbolpalette .e-clear-searchtext::before {
209
- content: '\e771';
209
+ content: '\e737';
210
210
  }
211
211
 
212
212
  .e-diagram {
@@ -250,6 +250,18 @@
250
250
  stroke: #fff;
251
251
  }
252
252
 
253
+ .e-diagram-bezier-handle.e-source.e-disabled {
254
+ opacity: 1 !important;
255
+ }
256
+
257
+ .e-diagram-bezier-handle.e-target.e-disabled {
258
+ opacity: 1 !important;
259
+ }
260
+
261
+ .e-symbolpalette .e-acrdn-content {
262
+ background-color: #fff !important;
263
+ }
264
+
253
265
  .e-diagram-bezier-handle {
254
266
  fill: #fff;
255
267
  stroke: #4f46e5;
@@ -265,6 +277,10 @@
265
277
  stroke: #fff;
266
278
  }
267
279
 
280
+ .e-diagram-helper {
281
+ stroke: #4f46e5;
282
+ }
283
+
268
284
  .e-diagram-resize-handle.e-disabled {
269
285
  fill: #9ca3af;
270
286
  opacity: 1;
@@ -272,7 +288,7 @@
272
288
  }
273
289
 
274
290
  .e-diagram-rotate-handle {
275
- fill: #6b7280;
291
+ fill: #4f46e5;
276
292
  stroke: #4f46e5;
277
293
  }
278
294
 
@@ -282,7 +298,7 @@
282
298
 
283
299
  .e-diagram-border.e-disabled {
284
300
  opacity: 1;
285
- stroke: #4f46e5;
301
+ stroke: #9ca3af;
286
302
  }
287
303
 
288
304
  .e-diagram-border.e-thick-border {
@@ -356,7 +372,7 @@
356
372
  }
357
373
 
358
374
  .e-ruler-tick {
359
- stroke: #d1d5db;
375
+ stroke: #9ca3af;
360
376
  }
361
377
 
362
378
  .e-menu-item e-blankicon {