@yoobic/yobi 8.3.0-35 → 8.3.0-36

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 (53) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/yoo-card-feed.cjs.entry.js +1 -1
  4. package/dist/cjs/yoo-draw-flow.cjs.entry.js +26 -15
  5. package/dist/cjs/yoo-form-dynamic.cjs.entry.js +4 -4
  6. package/dist/cjs/yoo-form-input-container.cjs.entry.js +1 -1
  7. package/dist/cjs/yoo-form-text-editor.cjs.entry.js +50 -50
  8. package/dist/cjs/yoo-grid-calendar.cjs.entry.js +1 -1
  9. package/dist/cjs/yoo-grid.cjs.entry.js +1 -1
  10. package/dist/cjs/yoo-markdown.cjs.entry.js +1 -1
  11. package/dist/cjs/yoo-truncate.cjs.entry.js +1 -1
  12. package/dist/cjs/yoo-waitlist-location-start.cjs.entry.js +1 -1
  13. package/dist/collection/components/1.atoms/collapsible/collapsible.js +22 -0
  14. package/dist/collection/components/1.atoms/markdown/markdown.css +1 -1
  15. package/dist/collection/components/1.atoms/truncate/truncate.css +1 -1
  16. package/dist/collection/components/form/form-dynamic/form-dynamic.css +1 -1
  17. package/dist/collection/components/form/form-dynamic/form-dynamic.js +2 -2
  18. package/dist/collection/components/form/form-dynamic/helpers/index.js +1 -1
  19. package/dist/collection/components/form/form-input-container/form-input-container.css +5 -1
  20. package/dist/collection/components/grid/grid/grid.js +1 -1
  21. package/dist/collection/components/grid/grid-calendar/grid-calendar.css +1 -1
  22. package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.css +1 -1
  23. package/dist/collection/feature-operate/waitlist/waitlist-location-start/waitlist-location-start.css +1 -1
  24. package/dist/collection/feature-platform/admin/draw-flow/draw-flow.css +239 -107
  25. package/dist/collection/feature-platform/admin/draw-flow/draw-flow.js +26 -14
  26. package/dist/design-system/design-system.css +18 -18
  27. package/dist/design-system/design-system.esm.js +1 -1
  28. package/dist/design-system/yoo-card-feed.entry.js +1 -1
  29. package/dist/design-system/yoo-draw-flow.entry.js +27 -16
  30. package/dist/design-system/yoo-form-dynamic.entry.js +4 -4
  31. package/dist/design-system/yoo-form-input-container.entry.js +1 -1
  32. package/dist/design-system/yoo-form-text-editor.entry.js +50 -50
  33. package/dist/design-system/yoo-grid-calendar.entry.js +1 -1
  34. package/dist/design-system/yoo-grid.entry.js +1 -1
  35. package/dist/design-system/yoo-markdown.entry.js +1 -1
  36. package/dist/design-system/yoo-truncate.entry.js +1 -1
  37. package/dist/design-system/yoo-waitlist-location-start.entry.js +1 -1
  38. package/dist/esm/design-system.js +1 -1
  39. package/dist/esm/loader.js +1 -1
  40. package/dist/esm/yoo-card-feed.entry.js +1 -1
  41. package/dist/esm/yoo-draw-flow.entry.js +27 -16
  42. package/dist/esm/yoo-form-dynamic.entry.js +4 -4
  43. package/dist/esm/yoo-form-input-container.entry.js +1 -1
  44. package/dist/esm/yoo-form-text-editor.entry.js +50 -50
  45. package/dist/esm/yoo-grid-calendar.entry.js +1 -1
  46. package/dist/esm/yoo-grid.entry.js +1 -1
  47. package/dist/esm/yoo-markdown.entry.js +1 -1
  48. package/dist/esm/yoo-truncate.entry.js +1 -1
  49. package/dist/esm/yoo-waitlist-location-start.entry.js +1 -1
  50. package/dist/types/components/1.atoms/collapsible/collapsible.d.ts +2 -1
  51. package/dist/types/components.d.ts +2 -0
  52. package/dist/types/feature-platform/admin/draw-flow/draw-flow.d.ts +1 -0
  53. package/package.json +1 -1
package/dist/collection/feature-platform/admin/draw-flow/draw-flow.css CHANGED
@@ -201,8 +201,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
201
201
  /* used for logos */
202
202
  /* spacing for padding, margin, etc... */
203
203
  /* shadow */
204
- .drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
205
- :root {
204
+ :host {
205
+ --border-size: 0.25rem;
206
206
  --dfBackgroundColor: rgba(255, 255, 255, 1);
207
207
  --dfBackgroundSize: 24px;
208
208
  --dfBackgroundImage: radial-gradient(rgba(191, 191, 191, 1) 1px, transparent 1px);
@@ -210,7 +210,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
210
210
  --dfNodeTypeFloat: none;
211
211
  --dfNodeBackgroundColor: rgba(255, 255, 255, 1);
212
212
  --dfNodeTextColor: #000000;
213
- --dfNodeBorderSize: 0.125rem;
213
+ --dfNodeBorderSize: var(--border-size);
214
214
  --dfNodeBorderColor: rgba(90, 48, 244, 1);
215
215
  --dfNodeBorderRadius: 16px;
216
216
  --dfNodeMinHeight: 40px;
@@ -224,7 +224,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
224
224
  --dfNodeBoxShadowColor: rgba(0, 0, 0, 0.1);
225
225
  --dfNodeHoverBackgroundColor: rgba(90, 48, 244, 0.2);
226
226
  --dfNodeHoverTextColor: #000000;
227
- --dfNodeHoverBorderSize: 0.125rem;
227
+ --dfNodeHoverBorderSize: var(--border-size);
228
228
  --dfNodeHoverBorderColor: rgba(90, 48, 244, 1);
229
229
  --dfNodeHoverBorderRadius: 16px;
230
230
  --dfNodeHoverBoxShadowHL: 0px;
@@ -234,7 +234,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
234
234
  --dfNodeHoverBoxShadowColor: rgba(0, 0, 0, 0.1);
235
235
  --dfNodeSelectedBackgroundColor: rgba(90, 48, 244, 1);
236
236
  --dfNodeSelectedTextColor: #ffffff;
237
- --dfNodeSelectedBorderSize: 0.125rem;
237
+ --dfNodeSelectedBorderSize: var(--border-size);
238
238
  --dfNodeSelectedBorderColor: rgba(90, 48, 244, 1);
239
239
  --dfNodeSelectedBorderRadius: 16px;
240
240
  --dfNodeSelectedBoxShadowHL: 0px;
@@ -243,52 +243,178 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
243
243
  --dfNodeSelectedBoxShadowS: 2px;
244
244
  --dfNodeSelectedBoxShadowColor: rgba(0, 0, 0, 0.1);
245
245
  --dfInputBackgroundColor: rgba(90, 48, 244, 1);
246
- --dfInputBorderSize: 0.125rem;
246
+ --dfInputBorderSize: var(--border-size);
247
247
  --dfInputBorderColor: rgba(255, 255, 255, 1);
248
248
  --dfInputBorderRadius: 50px;
249
249
  --dfInputLeft: -26px;
250
250
  --dfInputHeight: 20px;
251
251
  --dfInputWidth: 20px;
252
252
  --dfInputHoverBackgroundColor: rgba(255, 255, 255, 1);
253
- --dfInputHoverBorderSize: 0.125rem;
253
+ --dfInputHoverBorderSize: var(--border-size);
254
254
  --dfInputHoverBorderColor: rgba(0, 0, 0, 1);
255
255
  --dfInputHoverBorderRadius: 50px;
256
256
  --dfOutputBackgroundColor: #ffffff;
257
- --dfOutputBorderSize: 0.125rem;
257
+ --dfOutputBorderSize: var(--border-size);
258
258
  --dfOutputBorderColor: rgba(90, 48, 244, 1);
259
259
  --dfOutputBorderRadius: 50px;
260
260
  --dfOutputRight: -6px;
261
261
  --dfOutputHeight: 20px;
262
262
  --dfOutputWidth: 20px;
263
263
  --dfOutputHoverBackgroundColor: #ffffff;
264
- --dfOutputHoverBorderSize: 4px;
264
+ --dfOutputHoverBorderSize: var(--border-size);
265
265
  --dfOutputHoverBorderColor: #000000;
266
266
  --dfOutputHoverBorderRadius: 50px;
267
- --dfLineWidth: 4px;
267
+ --dfLineWidth: var(--border-size);
268
268
  --dfLineColor: rgba(208, 208, 208, 1);
269
269
  --dfLineHoverColor: rgba(90, 48, 244, 1);
270
270
  --dfLineSelectedColor: rgba(255, 198, 27, 1);
271
- --dfRerouteBorderWidth: 4px;
271
+ --dfRerouteBorderWidth: var(--border-size);
272
272
  --dfRerouteBorderColor: rgba(90, 48, 244, 1);
273
273
  --dfRerouteBackgroundColor: #ffffff;
274
- --dfRerouteHoverBorderWidth: 4px;
274
+ --dfRerouteHoverBorderWidth: var(--border-size);
275
275
  --dfRerouteHoverBorderColor: #000000;
276
276
  --dfRerouteHoverBackgroundColor: #ffffff;
277
277
  --dfDeleteDisplay: block;
278
278
  --dfDeleteColor: #ffffff;
279
279
  --dfDeleteBackgroundColor: rgba(212, 67, 51, 1);
280
- --dfDeleteBorderSize: 4px;
280
+ --dfDeleteBorderSize: var(--border-size);
281
281
  --dfDeleteBorderColor: #ffffff;
282
282
  --dfDeleteBorderRadius: 50px;
283
283
  --dfDeleteTop: -24px;
284
284
  --dfDeleteHoverColor: rgba(255, 255, 255, 1);
285
285
  --dfDeleteHoverBackgroundColor: rgba(210, 79, 76, 1);
286
- --dfDeleteHoverBorderSize: 4px;
286
+ --dfDeleteHoverBorderSize: var(--border-size);
287
287
  --dfDeleteHoverBorderColor: rgba(255, 255, 255, 1);
288
288
  --dfDeleteHoverBorderRadius: 50px;
289
289
  }
290
-
291
- .drawflow-container {
290
+ :host .parent-drawflow {
291
+ display: flex;
292
+ overflow: hidden;
293
+ outline: none;
294
+ touch-action: none;
295
+ }
296
+ :host .drawflow {
297
+ position: relative;
298
+ width: 100%;
299
+ height: 100%;
300
+ perspective: 0;
301
+ user-select: none;
302
+ }
303
+ :host .drawflow .parent-node {
304
+ position: relative;
305
+ }
306
+ :host .drawflow .drawflow-node {
307
+ position: absolute;
308
+ z-index: 2;
309
+ display: flex;
310
+ align-items: center;
311
+ width: 160px;
312
+ min-height: 40px;
313
+ padding: 15px;
314
+ color: black;
315
+ background: cyan;
316
+ border: 2px solid black;
317
+ border-radius: 4px;
318
+ }
319
+ :host .drawflow .drawflow-node.selected {
320
+ background: red;
321
+ }
322
+ :host .drawflow .drawflow-node:hover {
323
+ cursor: move;
324
+ }
325
+ :host .drawflow .drawflow-node .inputs,
326
+ :host .drawflow .drawflow-node .outputs {
327
+ width: 0px;
328
+ }
329
+ :host .drawflow .drawflow-node .drawflow_content_node {
330
+ display: block;
331
+ width: 100%;
332
+ }
333
+ :host .drawflow .drawflow-node .input,
334
+ :host .drawflow .drawflow-node .output {
335
+ position: relative;
336
+ z-index: 1;
337
+ width: 20px;
338
+ height: 20px;
339
+ margin-bottom: 5px;
340
+ background: white;
341
+ border: 2px solid black;
342
+ border-radius: 50%;
343
+ cursor: crosshair;
344
+ }
345
+ :host .drawflow .drawflow-node .input {
346
+ top: 2px;
347
+ left: -27px;
348
+ background: yellow;
349
+ }
350
+ :host .drawflow .drawflow-node .output {
351
+ top: 2px;
352
+ right: -3px;
353
+ }
354
+ :host .drawflow svg {
355
+ position: absolute;
356
+ z-index: 0;
357
+ overflow: visible !important;
358
+ }
359
+ :host .drawflow .connection {
360
+ position: absolute;
361
+ pointer-events: none;
362
+ aspect-ratio: 1/1;
363
+ }
364
+ :host .drawflow .connection .main-path {
365
+ pointer-events: all;
366
+ fill: none;
367
+ stroke: steelblue;
368
+ stroke-width: 5px;
369
+ }
370
+ :host .drawflow .connection .main-path:hover {
371
+ cursor: pointer;
372
+ stroke: #1266ab;
373
+ }
374
+ :host .drawflow .connection .main-path.selected {
375
+ stroke: #43b993;
376
+ }
377
+ :host .drawflow .connection .point {
378
+ cursor: move;
379
+ pointer-events: all;
380
+ fill: white;
381
+ stroke: black;
382
+ stroke-width: 2;
383
+ }
384
+ :host .drawflow .connection .point.selected,
385
+ :host .drawflow .connection .point:hover {
386
+ fill: #1266ab;
387
+ }
388
+ :host .drawflow .main-path {
389
+ fill: none;
390
+ stroke-width: 5px;
391
+ stroke: steelblue;
392
+ }
393
+ :host .drawflow-delete {
394
+ position: absolute;
395
+ z-index: 4;
396
+ display: block;
397
+ width: 30px;
398
+ height: 30px;
399
+ color: white;
400
+ font-weight: bold;
401
+ font-family: monospace;
402
+ line-height: 30px;
403
+ text-align: center;
404
+ background: black;
405
+ border: 2px solid white;
406
+ border-radius: 50%;
407
+ cursor: pointer;
408
+ }
409
+ :host .drawflow > .drawflow-delete {
410
+ margin-top: 15px;
411
+ margin-left: -15px;
412
+ }
413
+ :host .parent-node .drawflow-delete {
414
+ top: -15px;
415
+ right: -15px;
416
+ }
417
+ :host .drawflow-container {
292
418
  position: relative;
293
419
  display: flex;
294
420
  flex: 1;
@@ -296,7 +422,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
296
422
  width: 100%;
297
423
  height: 100%;
298
424
  }
299
- .drawflow-container .drawflow .drawflow-node {
425
+ :host .drawflow-container .drawflow .drawflow-node {
300
426
  display: var(--dfNodeType);
301
427
  width: auto;
302
428
  min-width: var(--dfNodeMinWidth);
@@ -307,24 +433,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
307
433
  background: var(--dfNodeBackgroundColor);
308
434
  border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
309
435
  border-radius: var(--dfNodeBorderRadius);
310
- -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
311
436
  box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
312
437
  }
313
- .drawflow-container .drawflow .drawflow-node:hover {
438
+ :host .drawflow-container .drawflow .drawflow-node:hover {
314
439
  color: var(--dfNodeHoverTextColor);
315
440
  background: var(--dfNodeHoverBackgroundColor);
316
441
  border: var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);
317
442
  border-radius: var(--dfNodeHoverBorderRadius);
318
- -webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
319
443
  box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
320
444
  }
321
- .drawflow-container .drawflow .drawflow-node.selected {
445
+ :host .drawflow-container .drawflow .drawflow-node.selected {
322
446
  color: var(--dfNodeSelectedTextColor);
323
447
  border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBackgroundColor);
324
448
  border-radius: var(--dfNodeSelectedBorderRadius);
325
449
  box-shadow: var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));
326
450
  }
327
- .drawflow-container .drawflow .drawflow-node .input {
451
+ :host .drawflow-container .drawflow .drawflow-node .input {
328
452
  left: var(--dfInputLeft);
329
453
  width: var(--dfInputWidth);
330
454
  height: var(--dfInputHeight);
@@ -332,15 +456,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
332
456
  border: var(--dfInputBorderSize) solid var(--dfInputBorderColor);
333
457
  border-radius: var(--dfInputBorderRadius);
334
458
  }
335
- .drawflow-container .drawflow .drawflow-node .input:hover {
459
+ :host .drawflow-container .drawflow .drawflow-node .input:hover {
336
460
  background: var(--dfInputHoverBackgroundColor);
337
461
  border: var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);
338
462
  border-radius: var(--dfInputHoverBorderRadius);
339
463
  }
340
- .drawflow-container .drawflow .drawflow-node .outputs {
464
+ :host .drawflow-container .drawflow .drawflow-node .outputs {
341
465
  float: var(--dfNodeTypeFloat);
342
466
  }
343
- .drawflow-container .drawflow .drawflow-node .output {
467
+ :host .drawflow-container .drawflow .drawflow-node .output {
344
468
  right: var(--dfOutputRight);
345
469
  width: var(--dfOutputWidth);
346
470
  height: var(--dfOutputHeight);
@@ -348,32 +472,32 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
348
472
  border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);
349
473
  border-radius: var(--dfOutputBorderRadius);
350
474
  }
351
- .drawflow-container .drawflow .drawflow-node .output:hover {
475
+ :host .drawflow-container .drawflow .drawflow-node .output:hover {
352
476
  background: var(--dfOutputHoverBackgroundColor);
353
477
  border: var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);
354
478
  border-radius: var(--dfOutputHoverBorderRadius);
355
479
  }
356
- .drawflow-container .drawflow .connection .main-path {
480
+ :host .drawflow-container .drawflow .connection .main-path {
357
481
  stroke: var(--dfLineColor);
358
482
  stroke-width: var(--dfLineWidth);
359
483
  }
360
- .drawflow-container .drawflow .connection .main-path:hover {
484
+ :host .drawflow-container .drawflow .connection .main-path:hover {
361
485
  stroke: var(--dfLineHoverColor);
362
486
  }
363
- .drawflow-container .drawflow .connection .main-path.selected {
487
+ :host .drawflow-container .drawflow .connection .main-path.selected {
364
488
  stroke: var(--dfLineSelectedColor);
365
489
  }
366
- .drawflow-container .drawflow .connection .point {
490
+ :host .drawflow-container .drawflow .connection .point {
367
491
  fill: var(--dfRerouteBackgroundColor);
368
492
  stroke: var(--dfRerouteBorderColor);
369
493
  stroke-width: var(--dfRerouteBorderWidth);
370
494
  }
371
- .drawflow-container .drawflow .connection .point:hover {
495
+ :host .drawflow-container .drawflow .connection .point:hover {
372
496
  fill: var(--dfRerouteHoverBackgroundColor);
373
497
  stroke: var(--dfRerouteHoverBorderColor);
374
498
  stroke-width: var(--dfRerouteHoverBorderWidth);
375
499
  }
376
- .drawflow-container .drawflow-delete {
500
+ :host .drawflow-container .drawflow-delete {
377
501
  display: var(--dfDeleteDisplay);
378
502
  box-sizing: content-box;
379
503
  color: var(--dfDeleteColor);
@@ -381,16 +505,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
381
505
  border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
382
506
  border-radius: var(--dfDeleteBorderRadius);
383
507
  }
384
- .drawflow-container .parent-node .drawflow-delete {
508
+ :host .drawflow-container .parent-node .drawflow-delete {
385
509
  top: var(--dfDeleteTop);
386
510
  }
387
- .drawflow-container .drawflow-delete:hover {
511
+ :host .drawflow-container .drawflow-delete:hover {
388
512
  color: var(--dfDeleteHoverColor);
389
513
  background: var(--dfDeleteHoverBackgroundColor);
390
514
  border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
391
515
  border-radius: var(--dfDeleteHoverBorderRadius);
392
516
  }
393
- .drawflow-container .toolbar {
517
+ :host .drawflow-container .toolbar {
394
518
  position: absolute;
395
519
  right: 0;
396
520
  bottom: 0;
@@ -399,11 +523,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
399
523
  justify-content: flex-end;
400
524
  padding: 1rem;
401
525
  }
402
- .drawflow-container .toolbar yoo-icon,
403
- .drawflow-container .toolbar .spacing {
526
+ :host .drawflow-container .toolbar yoo-icon,
527
+ :host .drawflow-container .toolbar .spacing {
404
528
  margin-left: 1rem;
405
529
  }
406
- .drawflow-container .outer-container {
530
+ :host .drawflow-container .outer-container {
407
531
  flex: 1;
408
532
  width: 100%;
409
533
  height: 100%;
@@ -411,223 +535,231 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
411
535
  background-image: var(--dfBackgroundImage);
412
536
  background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
413
537
  }
414
- .drawflow-container .outer-container .drawflow .parent-node .drawflow-delete {
538
+ :host .drawflow-container .outer-container .drawflow .parent-node .drawflow-delete {
415
539
  display: flex;
416
540
  align-items: center;
417
541
  justify-content: center;
418
542
  }
419
- .drawflow-container .outer-container .drawflow .drawflow-node {
543
+ :host .drawflow-container .outer-container .drawflow .drawflow-node {
420
544
  border-color: var(--accent, #276ef1);
421
545
  }
422
- .drawflow-container .outer-container .drawflow .drawflow-node.multimedia, .drawflow-container .outer-container .drawflow .drawflow-node.learn, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions, .drawflow-container .outer-container .drawflow .drawflow-node.action {
546
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.action {
423
547
  border-color: var(--info, #d84c96);
424
548
  }
425
- .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected, .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.action.selected {
549
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.action.selected {
426
550
  background: var(--info, #d84c96);
427
551
  }
428
- .drawflow-container .outer-container .drawflow .drawflow-node.multimedia:hover, .drawflow-container .outer-container .drawflow .drawflow-node.learn:hover, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.action:hover {
552
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.action:hover {
429
553
  background: var(--info-20, rgba(216, 76, 150, 0.2));
430
554
  }
431
- .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .input, .drawflow-container .outer-container .drawflow .drawflow-node.learn .input, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.action .input {
555
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.action .input {
432
556
  background: var(--info, #d84c96);
433
557
  }
434
- .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .output, .drawflow-container .outer-container .drawflow .drawflow-node.learn .output, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.action .output {
558
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.action .output {
435
559
  border-color: var(--info, #d84c96);
436
560
  }
437
- .drawflow-container .outer-container .drawflow .drawflow-node.select, .drawflow-container .outer-container .drawflow .drawflow-node.events, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents, .drawflow-container .outer-container .drawflow .drawflow-node.trigger {
561
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.select, :host .drawflow-container .outer-container .drawflow .drawflow-node.events, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger {
438
562
  border-color: var(--accent, #276ef1);
439
563
  }
440
- .drawflow-container .outer-container .drawflow .drawflow-node.select.selected, .drawflow-container .outer-container .drawflow .drawflow-node.events.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected, .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected {
564
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected {
441
565
  color: var(--light, #ffffff);
442
566
  background: var(--accent, #276ef1);
443
567
  }
444
- .drawflow-container .outer-container .drawflow .drawflow-node.select.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.events.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected yoo-icon {
568
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected yoo-icon {
445
569
  fill: var(--light, #ffffff);
446
570
  }
447
- .drawflow-container .outer-container .drawflow .drawflow-node.select:hover, .drawflow-container .outer-container .drawflow .drawflow-node.events:hover, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents:hover, .drawflow-container .outer-container .drawflow .drawflow-node.trigger:hover {
571
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.select:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.events:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger:hover {
448
572
  background: var(--accent-20, rgba(39, 110, 241, 0.2));
449
573
  }
450
- .drawflow-container .outer-container .drawflow .drawflow-node.select .input, .drawflow-container .outer-container .drawflow .drawflow-node.events .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input, .drawflow-container .outer-container .drawflow .drawflow-node.trigger .input {
574
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.select .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.events .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .input {
451
575
  background: var(--accent, #276ef1);
452
576
  }
453
- .drawflow-container .outer-container .drawflow .drawflow-node.select .output, .drawflow-container .outer-container .drawflow .drawflow-node.events .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output, .drawflow-container .outer-container .drawflow .drawflow-node.trigger .output {
577
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.select .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.events .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .output {
454
578
  border-color: var(--accent, #276ef1);
455
579
  }
456
- .drawflow-container .outer-container .drawflow .drawflow-node.textcategory, .drawflow-container .outer-container .drawflow .drawflow-node.condition {
580
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
457
581
  border-color: var(--energized, #ffc043);
458
582
  }
459
- .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected, .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
583
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
460
584
  color: var(--dark, #000000);
461
585
  background: var(--energized, #ffc043);
462
586
  }
463
- .drawflow-container .outer-container .drawflow .drawflow-node.textcategory:hover, .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
587
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
464
588
  background: var(--energized-20, rgba(255, 192, 67, 0.2));
465
589
  }
466
- .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input, .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
590
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
467
591
  background: var(--energized, #ffc043);
468
592
  }
469
- .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output, .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
593
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
470
594
  border-color: var(--energized, #ffc043);
471
595
  }
472
- .drawflow-container .outer-container .drawflow .drawflow-node.number, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, .drawflow-container .outer-container .drawflow .drawflow-node.customfield, .drawflow-container .outer-container .drawflow .drawflow-node.lesson, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
596
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.number, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
473
597
  border-color: var(--app-color, #5a30f4);
474
598
  }
475
- .drawflow-container .outer-container .drawflow .drawflow-node.number.selected, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected, .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected, .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected {
599
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected {
476
600
  color: var(--light, #ffffff);
477
601
  background: var(--app-color, #5a30f4);
478
602
  }
479
- .drawflow-container .outer-container .drawflow .drawflow-node.number.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected yoo-icon {
603
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected yoo-icon {
480
604
  fill: var(--light, #ffffff);
481
605
  }
482
- .drawflow-container .outer-container .drawflow .drawflow-node.number:hover, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp:hover, .drawflow-container .outer-container .drawflow .drawflow-node.customfield:hover, .drawflow-container .outer-container .drawflow .drawflow-node.lesson:hover, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent:hover {
606
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.number:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent:hover {
483
607
  background: var(--app-color-20, rgba(90, 48, 244, 0.2));
484
608
  }
485
- .drawflow-container .outer-container .drawflow .drawflow-node.number .input, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .input, .drawflow-container .outer-container .drawflow .drawflow-node.customfield .input, .drawflow-container .outer-container .drawflow .drawflow-node.lesson .input, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .input {
609
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.number .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .input {
486
610
  background: var(--app-color, #5a30f4);
487
611
  }
488
- .drawflow-container .outer-container .drawflow .drawflow-node.number .output, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .output, .drawflow-container .outer-container .drawflow .drawflow-node.customfield .output, .drawflow-container .outer-container .drawflow .drawflow-node.lesson .output, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .output {
612
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.number .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .output {
489
613
  border-color: var(--app-color, #5a30f4);
490
614
  }
491
- .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, .drawflow-container .outer-container .drawflow .drawflow-node.engage, .drawflow-container .outer-container .drawflow .drawflow-node.information, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions, .drawflow-container .outer-container .drawflow .drawflow-node.entity, .drawflow-container .outer-container .drawflow .drawflow-node.notification {
615
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage, :host .drawflow-container .outer-container .drawflow .drawflow-node.information, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification {
492
616
  border-color: var(--warning, #ed6e33);
493
617
  }
494
- .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected, .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected, .drawflow-container .outer-container .drawflow .drawflow-node.information.selected, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected, .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected {
618
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected {
495
619
  color: var(--light, #ffffff);
496
620
  background: var(--warning, #ed6e33);
497
621
  }
498
- .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.information.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected yoo-icon {
622
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected yoo-icon {
499
623
  fill: var(--light, #ffffff);
500
624
  }
501
- .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail:hover, .drawflow-container .outer-container .drawflow .drawflow-node.engage:hover, .drawflow-container .outer-container .drawflow .drawflow-node.information:hover, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.entity:hover, .drawflow-container .outer-container .drawflow .drawflow-node.notification:hover {
625
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.information:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification:hover {
502
626
  background: var(--warning-20, rgba(237, 110, 51, 0.2));
503
627
  }
504
- .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .input, .drawflow-container .outer-container .drawflow .drawflow-node.engage .input, .drawflow-container .outer-container .drawflow .drawflow-node.information .input, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.entity .input, .drawflow-container .outer-container .drawflow .drawflow-node.notification .input {
628
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.information .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification .input {
505
629
  background: var(--warning, #ed6e33);
506
630
  }
507
- .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output, .drawflow-container .outer-container .drawflow .drawflow-node.engage .output, .drawflow-container .outer-container .drawflow .drawflow-node.information .output, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.entity .output, .drawflow-container .outer-container .drawflow .drawflow-node.notification .output {
631
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.information .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification .output {
508
632
  border-color: var(--warning, #ed6e33);
509
633
  }
510
- .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
634
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
511
635
  border-color: var(--text-color, #807f83);
512
636
  }
513
- .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected {
637
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected {
514
638
  color: var(--dark, #000000);
515
639
  background: var(--text-color, #807f83);
516
640
  }
517
- .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring:hover {
641
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring:hover {
518
642
  background: var(--text-color-20, rgba(128, 127, 131, 0.2));
519
643
  }
520
- .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input {
644
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input {
521
645
  background: var(--text-color, #807f83);
522
646
  }
523
- .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output {
647
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output {
524
648
  border-color: var(--text-color, #807f83);
525
649
  }
526
- .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, .drawflow-container .outer-container .drawflow .drawflow-node.logic {
650
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic {
527
651
  border-color: var(--anthracite, #1a1a1a);
528
652
  }
529
- .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected, .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
653
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
530
654
  color: var(--light, #ffffff);
531
655
  background: var(--anthracite, #1a1a1a);
532
656
  }
533
- .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected yoo-icon {
657
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected yoo-icon {
534
658
  fill: var(--light, #ffffff);
535
659
  }
536
- .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory:hover, .drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
660
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
537
661
  background: var(--anthracite-20, rgba(26, 26, 26, 0.2));
538
662
  }
539
- .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input, .drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
663
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
540
664
  background: var(--anthracite, #1a1a1a);
541
665
  }
542
- .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
666
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
543
667
  border-color: var(--anthracite, #1a1a1a);
544
668
  }
545
- .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
669
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
546
670
  border-color: var(--dark, #000000);
547
671
  }
548
- .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected {
672
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected {
549
673
  color: var(--light, #ffffff);
550
674
  background: var(--dark, #000000);
551
675
  }
552
- .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected yoo-icon {
676
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected yoo-icon {
553
677
  fill: var(--light, #ffffff);
554
678
  }
555
- .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime:hover, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor:hover {
679
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor:hover {
556
680
  background: var(--dark-20, rgba(0, 0, 0, 0.2));
557
681
  }
558
- .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
682
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
559
683
  background: var(--dark, #000000);
560
684
  }
561
- .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
685
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
562
686
  border-color: var(--dark, #000000);
563
687
  }
564
- .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
688
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
565
689
  border-color: var(--danger, #d44333);
566
690
  }
567
- .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected, .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
691
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
568
692
  color: var(--light, #ffffff);
569
693
  background: var(--danger, #d44333);
570
694
  }
571
- .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected yoo-icon {
695
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected yoo-icon {
572
696
  fill: var(--light, #ffffff);
573
697
  }
574
- .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode:hover, .drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
698
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
575
699
  background: var(--danger-20, rgba(212, 67, 51, 0.2));
576
700
  }
577
- .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input, .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
701
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
578
702
  background: var(--danger, #d44333);
579
703
  }
580
- .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output, .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
704
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
581
705
  border-color: var(--danger, #d44333);
582
706
  }
583
- .drawflow-container .outer-container .drawflow .drawflow-node.condition {
707
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
584
708
  border-color: var(--stable, #adadad);
585
709
  }
586
- .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
710
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
587
711
  color: var(--dark, #000000);
588
712
  background: var(--stable, #adadad);
589
713
  }
590
- .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
714
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
591
715
  background: var(--stable-20, rgba(173, 173, 173, 0.2));
592
716
  }
593
- .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
717
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
594
718
  background: var(--stable, #adadad);
595
719
  }
596
- .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
720
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
597
721
  border-color: var(--stable, #adadad);
598
722
  }
599
- .drawflow-container .outer-container .drawflow .drawflow-node.page, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, .drawflow-container .outer-container .drawflow .drawflow-node.operate {
723
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.page, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate {
600
724
  border-color: var(--success, #3aa76d);
601
725
  }
602
- .drawflow-container .outer-container .drawflow .drawflow-node.page.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected {
726
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected {
603
727
  color: var(--light, #ffffff);
604
728
  background: var(--success, #3aa76d);
605
729
  }
606
- .drawflow-container .outer-container .drawflow .drawflow-node.page.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected yoo-icon {
730
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected yoo-icon {
607
731
  fill: var(--light, #ffffff);
608
732
  }
609
- .drawflow-container .outer-container .drawflow .drawflow-node.page:hover, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.operate:hover {
733
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.page:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate:hover {
610
734
  background: var(--success-20, rgba(58, 167, 109, 0.2));
611
735
  }
612
- .drawflow-container .outer-container .drawflow .drawflow-node.page .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.operate .input {
736
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.page .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate .input {
613
737
  background: var(--success, #3aa76d);
614
738
  }
615
- .drawflow-container .outer-container .drawflow .drawflow-node.page .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.operate .output {
739
+ :host .drawflow-container .outer-container .drawflow .drawflow-node.page .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate .output {
616
740
  border-color: var(--success, #3aa76d);
617
741
  }
618
- .drawflow-container .outer-container .drawflow .drawflow-node .title-box {
742
+ :host .drawflow-container .outer-container .drawflow .drawflow-node .block-container {
619
743
  display: flex;
744
+ flex-direction: column;
745
+ }
746
+ :host .drawflow-container .outer-container .drawflow .drawflow-node .title-box {
747
+ display: flex;
748
+ flex: 1;
749
+ }
750
+ :host .drawflow-container .outer-container .drawflow .drawflow-node .title-box .title-text {
751
+ flex: 1;
620
752
  }
621
- .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
753
+ :host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
622
754
  margin-right: var(--spacing-08, 0.5rem);
623
755
  }
624
- .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
756
+ :host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
625
757
  margin-left: var(--spacing-08, 0.5rem);
626
758
  }
627
- .drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings] {
759
+ :host .drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings] {
628
760
  opacity: 1;
629
761
  }
630
- .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings] {
762
+ :host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings] {
631
763
  cursor: pointer;
632
764
  opacity: 0.3;
633
765
  }