@bpmn-io/properties-panel 3.2.1 → 3.3.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 (6) hide show
  1. package/assets/properties-panel.css +242 -1
  2. package/dist/index.esm.js +1832 -1321
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +1839 -1307
  5. package/dist/index.js.map +1 -1
  6. package/package.json +5 -3
package/assets/properties-panel.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --color-blue-205-100-35: hsl(205, 100%, 35%);
17
17
  --color-blue-205-100-45: hsl(205, 100%, 45%);
18
18
  --color-blue-205-100-50: hsl(205, 100%, 50%);
19
+ --color-blue-205-100-85: hsl(205, 100%, 85%);
19
20
  --color-blue-205-100-95: hsl(205, 100%, 95%);
20
21
  --color-blue-219-99-53: hsl(219, 99%, 53%);
21
22
  --color-blue-218-100-74: hsl(218, 100%, 74%);
@@ -109,9 +110,14 @@
109
110
  --feel-hover-background-color: var(--color-grey-225-10-97);
110
111
  --feel-active-background-color: transparent;
111
112
  --feel-required-color: var(--color-grey-225-10-55);
113
+ --feel-open-popup-color: hsla(0, 0%, 32%, 1);
114
+ --feel-open-popup-background-color: var(--color-white);
115
+ --feel-open-popup-hover-color: hsla(219, 99%, 53%, 1);
112
116
 
113
117
  --feel-indicator-background-color: var(--color-grey-225-10-90);
114
118
 
119
+ --feelers-select-color: var(--color-blue-205-100-85);
120
+
115
121
  --tooltip-underline-color: var(--color-blue-219-99-53);
116
122
  --tooltip-background-color: var(--color-grey-0-0-22);
117
123
  --tooltip-link: var(--color-blue-218-100-74);
@@ -1098,6 +1104,12 @@ textarea.bio-properties-panel-input {
1098
1104
  background-color: transparent;
1099
1105
  }
1100
1106
 
1107
+
1108
+ /* @Note(pinussilvestrus): mitigate low contrast - https://github.com/bpmn-io/cm-theme/issues/4 */
1109
+ .bio-properties-panel-feelers-editor .cm-content ::selection {
1110
+ background: var(--feelers-select-color, hsl(205, 100%, 85%));
1111
+ }
1112
+
1101
1113
  .bio-properties-panel-feelers-editor .cm-editor.cm-focused {
1102
1114
  background-color: transparent;
1103
1115
  }
@@ -1188,4 +1200,233 @@ textarea.bio-properties-panel-input {
1188
1200
  border-bottom: 5px solid transparent;
1189
1201
  border-left: 5px solid var(--tooltip-background-color);
1190
1202
  margin-top: 16px;
1191
- }
1203
+ }
1204
+
1205
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
1206
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
1207
+ display: none;
1208
+ justify-content: center;
1209
+ flex-direction: column;
1210
+ color: hsla(0, 0%, 9%, 0.25);
1211
+ padding: 3px 6px 2px;
1212
+ border: 1px solid var(--input-border-color);
1213
+ border-radius: 2px;
1214
+ background-color: var(--input-background-color);
1215
+ font-size: var(--text-size-base);
1216
+ font-family: inherit;
1217
+ width: 100%;
1218
+ min-height: 100%;
1219
+ }
1220
+
1221
+ .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-input,
1222
+ .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-input {
1223
+ display: none;
1224
+ }
1225
+
1226
+ .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-feelers-editor__open-popup-placeholder,
1227
+ .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder {
1228
+ display: flex;
1229
+ }
1230
+
1231
+ .bio-properties-panel-popup {
1232
+ --popup-background-color: hsla(0, 0%, 96%, 1);
1233
+ --popup-header-background-color: white;
1234
+ --popup-font-color: hsla(0, 0%, 0%, 1);
1235
+ --popup-title-color: hsla(0, 0%, 0%, 1);
1236
+
1237
+ --feel-popup-close-background-color: hsla(219, 99%, 53%, 1);
1238
+ --feel-popup-gutters-background-color: hsla(0, 0%, 90%, 1);
1239
+
1240
+ position: absolute;
1241
+ display: flex;
1242
+ flex: auto;
1243
+ flex-direction: column;
1244
+ font-family: IBM Plex Sans, sans-serif;
1245
+ padding: 0;
1246
+ z-index: 1001;
1247
+ box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.3);
1248
+ background-color: var(--popup-background-color);
1249
+ color: var(--popup-font-color);
1250
+ height: auto;
1251
+ width: auto;
1252
+ overflow: hidden;
1253
+ font-size: 14px;
1254
+ }
1255
+
1256
+ .bio-properties-panel-popup h1, h2, h3, h4 {
1257
+ font-weight: 500;
1258
+ font-size: inherit;
1259
+ }
1260
+
1261
+ .bio-properties-panel-popup .bio-properties-panel-popup__header,
1262
+ .bio-properties-panel-popup .bio-properties-panel-popup__body,
1263
+ .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1264
+ padding: 12px;
1265
+ display: flex;
1266
+ }
1267
+
1268
+ .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
1269
+ padding-top: 0;
1270
+ }
1271
+
1272
+ .bio-properties-panel-popup .bio-properties-panel-popup__header {
1273
+ background-color: var(--popup-header-background-color);
1274
+ margin: 0;
1275
+ font-size: 12px;
1276
+ font-weight: 400;
1277
+ line-height: 16px;
1278
+ text-align: left;
1279
+ color: var(--popup-title-color);
1280
+ }
1281
+
1282
+ .bio-properties-panel-popup .bio-properties-panel-popup__header.draggable {
1283
+ cursor: grab;
1284
+ }
1285
+
1286
+ .bio-properties-panel-popup .bio-properties-panel-popup__drag-handle {
1287
+ display: flex;
1288
+ }
1289
+
1290
+ .bio-properties-panel-popup .bio-properties-panel-popup__drag-preview {
1291
+ width: 1px;
1292
+ height: 1px;
1293
+ position: absolute;
1294
+ top: 0;
1295
+ }
1296
+
1297
+ .bio-properties-panel-popup .bio-properties-panel-popup__title {
1298
+ margin-left: 8px;
1299
+ }
1300
+
1301
+ .bio-properties-panel-popup .bio-properties-panel-popup__title::first-letter {
1302
+ text-transform: capitalize;
1303
+ }
1304
+
1305
+ .bio-properties-panel-popup .bio-properties-panel-popup__header svg {
1306
+ margin-left: -4px;
1307
+ }
1308
+
1309
+ .bio-properties-panel-popup .bio-properties-panel-popup__body {
1310
+ font-size: inherit;
1311
+ height: 100%;
1312
+ display: flex;
1313
+ overflow: auto;
1314
+ padding-bottom: 0;
1315
+ }
1316
+
1317
+ .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1318
+ position: absolute;
1319
+ bottom: 0;
1320
+ right: 8px;
1321
+ }
1322
+
1323
+ .bio-properties-panel-feel-popup {
1324
+ min-height: 400px;
1325
+ width: fit-content;
1326
+ }
1327
+
1328
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-popup__body {
1329
+ display: flex;
1330
+ margin: 0;
1331
+ padding: 0;
1332
+ height: 100%;
1333
+ width: 100%;
1334
+ }
1335
+
1336
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
1337
+ display: flex;
1338
+ min-width: 100%;
1339
+ }
1340
+
1341
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
1342
+ width: 100%;
1343
+ display: flex;
1344
+ }
1345
+
1346
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor {
1347
+ display: flex;
1348
+ }
1349
+
1350
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor .cm-editor {
1351
+ width: 100%;
1352
+ }
1353
+
1354
+ .bio-properties-panel-feel-popup .bio-properties-panel-input {
1355
+ width: 100%;
1356
+ resize: none;
1357
+ padding: 0;
1358
+ margin-left: -12px;
1359
+ overflow: hidden;
1360
+ overflow-y: auto
1361
+ }
1362
+
1363
+ .bio-properties-panel-feel-popup .bio-properties-panel-open-feel-popup {
1364
+ display: none !important;
1365
+ }
1366
+
1367
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
1368
+ .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
1369
+ position: absolute;
1370
+ display: none;
1371
+ right: 0;
1372
+ bottom: -1px;
1373
+ background: none;
1374
+ border: none;
1375
+ color: var(--feel-open-popup-color);
1376
+ cursor: pointer;
1377
+ }
1378
+
1379
+ .bio-properties-panel-open-feel-popup svg {
1380
+ background: var(--feel-open-popup-background-color);
1381
+ }
1382
+
1383
+ .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
1384
+ .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
1385
+ .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,
1386
+ .bio-properties-panel-feel-container:focus-within .bio-properties-panel-open-feel-popup {
1387
+ display: block;
1388
+ }
1389
+
1390
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup {
1391
+ bottom: 0;
1392
+ }
1393
+
1394
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
1395
+ .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
1396
+ color: var(--feel-open-popup-hover-color);
1397
+ }
1398
+
1399
+ .bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
1400
+ background: var(--feel-popup-close-background-color);
1401
+ width: 66px;
1402
+ font-weight: 400;
1403
+ font-size: 14px;
1404
+ font-family: inherit;
1405
+ color: white;
1406
+ border: none;
1407
+ height: 32px;
1408
+ cursor: pointer;
1409
+ }
1410
+
1411
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor {
1412
+ width: 100%;
1413
+ height: 100%;
1414
+ }
1415
+
1416
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor .cm-content {
1417
+ padding-left: 4px;
1418
+ }
1419
+
1420
+ .bio-properties-panel-feel-popup .cm-gutters {
1421
+ background-color: var(--feel-popup-gutters-background-color);
1422
+ border: none;
1423
+ padding: 0;
1424
+ }
1425
+
1426
+ .bio-properties-panel-feel-popup .cm-gutter {
1427
+ min-width: 32px;
1428
+ }
1429
+
1430
+ .bio-properties-panel-feel-popup .cm-gutters .cm-lineNumbers .cm-gutterElement {
1431
+ text-align: center;
1432
+ }