@redvars/peacock 3.9.0 → 3.9.1

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 (83) hide show
  1. package/dist/code-highlighter.js +1 -4
  2. package/dist/code-highlighter.js.map +1 -1
  3. package/dist/custom-elements-jsdocs.json +39 -223
  4. package/dist/custom-elements.json +391 -2205
  5. package/dist/elevation.js +55 -2
  6. package/dist/elevation.js.map +1 -1
  7. package/dist/flow.js +762 -0
  8. package/dist/flow.js.map +1 -0
  9. package/dist/index.js +1 -3
  10. package/dist/index.js.map +1 -1
  11. package/dist/loader.js +2 -9
  12. package/dist/loader.js.map +1 -1
  13. package/dist/menu-item.js +144 -63
  14. package/dist/menu-item.js.map +1 -1
  15. package/dist/menu.js +161 -73
  16. package/dist/menu.js.map +1 -1
  17. package/dist/src/flow/flow.d.ts +102 -0
  18. package/dist/src/flow/index.d.ts +2 -0
  19. package/dist/src/index.d.ts +2 -4
  20. package/dist/src/menu/menu/menu.d.ts +10 -9
  21. package/dist/src/menu/menu-item/menu-item.d.ts +1 -3
  22. package/dist/src/timeline/timeline.d.ts +0 -1
  23. package/dist/sub-menu.js +28 -1
  24. package/dist/sub-menu.js.map +1 -1
  25. package/dist/timeline-item.js +22 -34
  26. package/dist/timeline-item.js.map +1 -1
  27. package/dist/timeline.js +1 -18
  28. package/dist/timeline.js.map +1 -1
  29. package/dist/tsconfig.tsbuildinfo +1 -1
  30. package/package.json +3 -2
  31. package/readme.md +2 -2
  32. package/src/code-highlighter/code-highlighter.scss +1 -7
  33. package/src/elevation/demo/index.html +52 -0
  34. package/src/elevation/elevation.scss +52 -5
  35. package/src/elevation/elevation.ts +8 -1
  36. package/src/flow/flow.scss +195 -0
  37. package/src/flow/flow.ts +683 -0
  38. package/src/flow/index.ts +2 -0
  39. package/src/index.ts +2 -16
  40. package/src/loader.ts +2 -9
  41. package/src/menu/menu/copy-component-files.mjs +47 -0
  42. package/src/menu/menu/menu.scss +55 -17
  43. package/src/menu/menu/menu.ts +155 -84
  44. package/src/menu/menu-item/menu-item-colors.scss +3 -3
  45. package/src/menu/menu-item/menu-item.scss +118 -24
  46. package/src/menu/menu-item/menu-item.ts +61 -55
  47. package/src/menu/sub-menu/sub-menu.scss +30 -1
  48. package/src/timeline/timeline-item.scss +21 -31
  49. package/src/timeline/timeline-item.ts +2 -1
  50. package/src/timeline/timeline.scss +0 -10
  51. package/src/timeline/timeline.ts +0 -2
  52. package/dist/canvas.js +0 -385
  53. package/dist/canvas.js.map +0 -1
  54. package/dist/flow-designer-node-CGSm6cUH.js +0 -553
  55. package/dist/flow-designer-node-CGSm6cUH.js.map +0 -1
  56. package/dist/flow-designer-node.js +0 -4
  57. package/dist/flow-designer-node.js.map +0 -1
  58. package/dist/flow-designer.js +0 -1417
  59. package/dist/flow-designer.js.map +0 -1
  60. package/dist/src/canvas/canvas.d.ts +0 -92
  61. package/dist/src/canvas/index.d.ts +0 -2
  62. package/dist/src/flow-designer/commands.d.ts +0 -66
  63. package/dist/src/flow-designer/flow-designer-node.d.ts +0 -46
  64. package/dist/src/flow-designer/flow-designer.d.ts +0 -133
  65. package/dist/src/flow-designer/index.d.ts +0 -7
  66. package/dist/src/flow-designer/layout.d.ts +0 -30
  67. package/dist/src/flow-designer/types.d.ts +0 -142
  68. package/dist/src/flow-designer/validation.d.ts +0 -43
  69. package/dist/src/flow-designer/workflow-utils.d.ts +0 -40
  70. package/src/canvas/canvas.scss +0 -72
  71. package/src/canvas/canvas.ts +0 -413
  72. package/src/canvas/index.ts +0 -2
  73. package/src/flow-designer/DEMO.md +0 -239
  74. package/src/flow-designer/commands.ts +0 -278
  75. package/src/flow-designer/flow-designer-node.ts +0 -172
  76. package/src/flow-designer/flow-designer.scss +0 -457
  77. package/src/flow-designer/flow-designer.ts +0 -611
  78. package/src/flow-designer/index.ts +0 -41
  79. package/src/flow-designer/layout.ts +0 -357
  80. package/src/flow-designer/types.ts +0 -166
  81. package/src/flow-designer/validation.ts +0 -284
  82. package/src/flow-designer/workflow-utils.ts +0 -282
  83. /package/dist/test/{flow-designer.test.d.ts → elevation.test.d.ts} +0 -0
@@ -1,553 +0,0 @@
1
- import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
2
- import { n } from './property-B49QQ8pS.js';
3
-
4
- var css_248z = i`* {
5
- box-sizing: border-box;
6
- -webkit-tap-highlight-color: transparent;
7
- }
8
-
9
- .screen-reader-only {
10
- display: none !important;
11
- }
12
-
13
- [hidden] {
14
- display: none !important;
15
- }
16
-
17
- :host {
18
- display: block;
19
- --flow-designer-height: 600px;
20
- --flow-designer-border-color: var(--color-outline-variant);
21
- --flow-designer-background: var(--color-surface);
22
- --flow-designer-border-radius: var(--shape-corner-medium);
23
- --flow-designer-action-bar-bg: var(--color-surface-container);
24
- }
25
-
26
- .flow-designer-container {
27
- position: relative;
28
- width: 100%;
29
- height: var(--flow-designer-height);
30
- display: flex;
31
- flex-direction: column;
32
- overflow: hidden;
33
- }
34
-
35
- .editor-toolbar {
36
- position: absolute;
37
- top: 0.75rem;
38
- right: 0.75rem;
39
- z-index: 6;
40
- }
41
- .editor-toolbar .zoom-display {
42
- font-size: 12px;
43
- color: var(--color-on-surface-variant);
44
- min-width: 40px;
45
- text-align: center;
46
- font-weight: 500;
47
- }
48
- .editor-toolbar wc-icon-button {
49
- --button-container-shape: var(--shape-corner-full);
50
- }
51
-
52
- .validation-panel {
53
- position: absolute;
54
- left: 0.75rem;
55
- right: 0.75rem;
56
- top: 4.5rem;
57
- z-index: 5;
58
- background: var(--color-error-container);
59
- color: var(--color-on-error-container);
60
- padding: 0.75rem;
61
- border: 1px solid var(--color-outline-variant);
62
- border-radius: var(--shape-corner-medium);
63
- max-height: 120px;
64
- overflow-y: auto;
65
- }
66
- .validation-panel .validation-item {
67
- display: flex;
68
- gap: 0.5rem;
69
- align-items: center;
70
- margin-bottom: 0.5rem;
71
- }
72
- .validation-panel .validation-item.error {
73
- color: var(--color-error);
74
- }
75
- .validation-panel .validation-item.warning {
76
- color: var(--color-warning);
77
- }
78
- .validation-panel .validation-item wc-icon {
79
- flex-shrink: 0;
80
- --icon-size: 18px;
81
- }
82
- .validation-panel .validation-item span {
83
- font-size: 12px;
84
- white-space: pre-wrap;
85
- }
86
- .validation-panel .validation-item:last-child {
87
- margin-bottom: 0;
88
- }
89
-
90
- .flow-designer {
91
- flex: 1;
92
- overflow: auto;
93
- position: relative;
94
- border-radius: var(--flow-designer-border-radius);
95
- background-color: var(--flow-designer-background);
96
- border: 1px solid var(--flow-designer-border-color);
97
- cursor: grab;
98
- }
99
- .flow-designer:active {
100
- cursor: grabbing;
101
- }
102
- .flow-designer .canvas-container {
103
- position: relative;
104
- min-width: 1000px;
105
- min-height: 600px;
106
- transform-origin: 0 0;
107
- }
108
-
109
- .connectors-layer {
110
- position: absolute;
111
- top: 0;
112
- left: 0;
113
- pointer-events: none;
114
- z-index: 2;
115
- overflow: visible;
116
- color: var(--color-outline-variant);
117
- }
118
- .connectors-layer .connector {
119
- fill: none;
120
- stroke: var(--color-outline-variant, #64748b);
121
- stroke-width: 2;
122
- stroke-linecap: round;
123
- stroke-linejoin: round;
124
- }
125
- .connectors-layer .connector.straight {
126
- stroke-dasharray: none;
127
- }
128
- .connectors-layer .connector.curved {
129
- stroke-dasharray: 5, 5;
130
- }
131
- .connectors-layer .connector.branch {
132
- stroke: var(--color-primary);
133
- opacity: 0.7;
134
- }
135
- .connectors-layer .connector.fork {
136
- stroke: var(--color-secondary);
137
- stroke-width: 2.5;
138
- }
139
- .connectors-layer .connector.join {
140
- stroke: var(--color-tertiary);
141
- stroke-width: 2.5;
142
- }
143
-
144
- marker#arrowhead polygon {
145
- fill: var(--color-outline-variant);
146
- }
147
-
148
- .swimlanes-container {
149
- position: absolute;
150
- inset: 0;
151
- z-index: 1;
152
- pointer-events: none;
153
- }
154
- .swimlanes-container .swimlane {
155
- position: absolute;
156
- left: 0;
157
- right: 0;
158
- background: color-mix(in srgb, var(--color-surface-container-low) 75%, transparent);
159
- border-top: 1px solid var(--color-outline-variant);
160
- border-bottom: 1px solid var(--color-outline-variant);
161
- overflow: hidden;
162
- }
163
- .swimlanes-container .swimlane.parallel {
164
- border-color: var(--color-secondary);
165
- border-top-width: 2px;
166
- border-bottom-width: 2px;
167
- }
168
- .swimlanes-container .swimlane .swimlane-header {
169
- background: var(--color-surface-container);
170
- position: absolute;
171
- top: 0.5rem;
172
- left: 0.75rem;
173
- padding: 0.35rem 0.6rem;
174
- font-size: 13px;
175
- font-weight: 500;
176
- color: var(--color-on-surface);
177
- border: 1px solid var(--color-outline-variant);
178
- border-radius: var(--shape-corner-medium);
179
- text-overflow: ellipsis;
180
- white-space: nowrap;
181
- overflow: hidden;
182
- max-width: 250px;
183
- }
184
-
185
- .nodes-layer {
186
- position: absolute;
187
- inset: 0;
188
- width: 100%;
189
- height: 100%;
190
- z-index: 3;
191
- pointer-events: none;
192
- }
193
-
194
- .node-card {
195
- position: relative;
196
- background: var(--color-surface-container);
197
- border: 2px solid var(--color-outline-variant);
198
- border-radius: var(--shape-corner-medium);
199
- padding: 1rem;
200
- height: 100%;
201
- display: flex;
202
- flex-direction: column;
203
- cursor: pointer;
204
- transition: all 200ms ease;
205
- overflow: hidden;
206
- }
207
- .node-card .node-header {
208
- display: flex;
209
- gap: 0.5rem;
210
- align-items: center;
211
- margin-bottom: 0.5rem;
212
- }
213
- .node-card .node-header .node-icon {
214
- flex-shrink: 0;
215
- --icon-size: 20px;
216
- color: var(--color-primary);
217
- }
218
- .node-card .node-header .node-title {
219
- font-weight: 500;
220
- font-size: 13px;
221
- color: var(--color-on-surface);
222
- overflow: hidden;
223
- text-overflow: ellipsis;
224
- white-space: nowrap;
225
- flex: 1;
226
- }
227
- .node-card .node-body {
228
- flex: 1;
229
- display: flex;
230
- flex-direction: column;
231
- overflow: hidden;
232
- }
233
- .node-card .node-body .node-description {
234
- font-size: 12px;
235
- color: var(--color-on-surface-variant);
236
- margin: 0 0 0.5rem 0;
237
- line-height: 1.3;
238
- overflow: hidden;
239
- text-overflow: ellipsis;
240
- display: -webkit-box;
241
- -webkit-line-clamp: 2;
242
- -webkit-box-orient: vertical;
243
- }
244
- .node-card .node-body .node-metadata {
245
- display: flex;
246
- gap: 0.5rem;
247
- flex-wrap: wrap;
248
- margin-top: auto;
249
- }
250
- .node-card .node-body .node-metadata .node-type-tag {
251
- display: inline-block;
252
- background: var(--color-primary-container);
253
- color: var(--color-on-primary-container);
254
- padding: 2px 6px;
255
- border-radius: var(--shape-corner-small);
256
- font-size: 11px;
257
- font-weight: 500;
258
- }
259
- .node-card .node-body .node-metadata .node-id {
260
- display: inline-block;
261
- color: var(--color-on-surface-variant);
262
- font-size: 11px;
263
- font-family: monospace;
264
- opacity: 0.7;
265
- }
266
- .node-card .node-actions {
267
- display: flex;
268
- gap: 0.5rem;
269
- margin-top: 0.5rem;
270
- padding-top: 0.5rem;
271
- border-top: 1px solid var(--color-outline-variant);
272
- }
273
- .node-card .node-actions .btn-sm {
274
- flex: 1;
275
- padding: 4px 8px;
276
- font-size: 11px;
277
- border: 1px solid var(--color-outline);
278
- background: var(--color-surface);
279
- border-radius: var(--shape-corner-small);
280
- cursor: pointer;
281
- color: var(--color-on-surface);
282
- transition: background 200ms ease;
283
- }
284
- .node-card .node-actions .btn-sm:hover {
285
- background: var(--color-surface-container-highest);
286
- }
287
- .node-card.trigger {
288
- border-left: 4px solid var(--color-success);
289
- }
290
- .node-card.trigger .node-icon {
291
- color: var(--color-success);
292
- }
293
- .node-card.action {
294
- border-left: 4px solid var(--color-info);
295
- }
296
- .node-card.action .node-icon {
297
- color: var(--color-info);
298
- }
299
- .node-card.decision {
300
- border-left: 4px solid var(--color-warning);
301
- }
302
- .node-card.decision .node-icon {
303
- color: var(--color-warning);
304
- }
305
- .node-card.loop_start, .node-card.loop_end {
306
- border-left: 4px solid var(--color-secondary);
307
- }
308
- .node-card.loop_start .node-icon, .node-card.loop_end .node-icon {
309
- color: var(--color-secondary);
310
- }
311
- .node-card.fork, .node-card.join {
312
- border-left: 4px solid var(--color-tertiary);
313
- }
314
- .node-card.fork .node-icon, .node-card.join .node-icon {
315
- color: var(--color-tertiary);
316
- }
317
- .node-card[selected] {
318
- border-color: var(--color-primary);
319
- border-width: 2px;
320
- box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3);
321
- }
322
- .node-card[editing] {
323
- background: var(--color-surface-container-highest);
324
- border-color: var(--color-primary);
325
- }
326
- .node-card:not([disabled]):hover {
327
- border-color: var(--color-primary);
328
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
329
- }
330
- .node-card[disabled] {
331
- opacity: 0.5;
332
- cursor: not-allowed;
333
- }
334
-
335
- .positioned-node {
336
- position: absolute;
337
- pointer-events: auto;
338
- }
339
-
340
- .empty-state {
341
- display: flex;
342
- align-items: center;
343
- justify-content: center;
344
- height: 100%;
345
- color: var(--color-on-surface-variant);
346
- font-size: 14px;
347
- }
348
-
349
- :host([disabled]) {
350
- pointer-events: none;
351
- opacity: 0.38;
352
- }
353
-
354
- @media (max-width: 768px) {
355
- .editor-toolbar {
356
- top: 0.5rem;
357
- right: 0.5rem;
358
- }
359
- .node-card {
360
- padding: 0.75rem;
361
- }
362
- .node-card .node-header .node-icon {
363
- --icon-size: 18px;
364
- }
365
- .node-card .node-header .node-title {
366
- font-size: 12px;
367
- }
368
- .node-card .node-body .node-description {
369
- font-size: 11px;
370
- }
371
- }
372
- @keyframes slideIn {
373
- from {
374
- opacity: 0;
375
- transform: scale(0.9);
376
- }
377
- to {
378
- opacity: 1;
379
- transform: scale(1);
380
- }
381
- }
382
- .node-card {
383
- animation: slideIn 200ms ease-out;
384
- }
385
-
386
- @media print {
387
- .editor-toolbar,
388
- .validation-panel {
389
- display: none;
390
- }
391
- .flow-designer {
392
- border: none;
393
- overflow: visible;
394
- }
395
- }`;
396
-
397
- /**
398
- * Individual node component for flow designer
399
- * Renders a single workflow node with customizable slot templates
400
- *
401
- * @tag wc-flow-designer-node
402
- * @rawTag flow-designer-node
403
- * @wip true
404
- */
405
- let FlowDesignerNode = class FlowDesignerNode extends i$1 {
406
- constructor() {
407
- super(...arguments);
408
- /**
409
- * The workflow node to render
410
- */
411
- this.node = { id: '', type: 'action', label: '' };
412
- /**
413
- * Whether this node is currently selected
414
- */
415
- this.isSelected = false;
416
- /**
417
- * Whether this node is in edit mode
418
- */
419
- this.isEditing = false;
420
- /**
421
- * Whether this node is disabled
422
- */
423
- this.disabled = false;
424
- /**
425
- * Whether to show the delete button
426
- */
427
- this.showDelete = true;
428
- this._handleClick = () => {
429
- this.dispatchEvent(new CustomEvent('node-click', {
430
- detail: { nodeId: this.node.id },
431
- bubbles: true,
432
- composed: true,
433
- }));
434
- };
435
- this._handleDoubleClick = () => {
436
- this.dispatchEvent(new CustomEvent('node-edit-start', {
437
- detail: { nodeId: this.node.id },
438
- bubbles: true,
439
- composed: true,
440
- }));
441
- };
442
- this._handleDelete = (e) => {
443
- e.stopPropagation();
444
- if (confirm(`Delete "${this.node.label}"?`)) {
445
- this.dispatchEvent(new CustomEvent('node-delete', {
446
- detail: { nodeId: this.node.id },
447
- bubbles: true,
448
- composed: true,
449
- }));
450
- }
451
- };
452
- this._handleMouseEnter = () => {
453
- // Node hover state handled via CSS
454
- };
455
- this._handleMouseLeave = () => {
456
- // Node hover state handled via CSS
457
- };
458
- }
459
- render() {
460
- const { node, isSelected, isEditing, disabled } = this;
461
- const nodeType = node.type || 'action';
462
- return b `
463
- <div
464
- class="node-card ${nodeType}"
465
- ?selected=${isSelected}
466
- ?editing=${isEditing}
467
- ?disabled=${disabled}
468
- @click=${this._handleClick}
469
- @dblclick=${this._handleDoubleClick}
470
- role="button"
471
- tabindex="0"
472
- @keydown=${(e) => {
473
- if (e.key === 'Enter' || e.key === ' ')
474
- this._handleClick();
475
- }}
476
- >
477
- <!-- Customizable header slot -->
478
- <slot name="${nodeType}-header">
479
- ${this._renderDefaultHeader()}
480
- </slot>
481
-
482
- <!-- Customizable body slot -->
483
- <slot name="${nodeType}-body">${this._renderDefaultBody()}</slot>
484
-
485
- <!-- Action buttons -->
486
- ${this.isEditing
487
- ? b `
488
- <div class="node-actions">
489
- <button class="btn-sm" @click=${this._handleDelete}>
490
- Delete
491
- </button>
492
- </div>
493
- `
494
- : A}
495
- </div>
496
- `;
497
- }
498
- _renderDefaultHeader() {
499
- const { node } = this;
500
- const iconMap = {
501
- trigger: 'play-circle',
502
- action: 'check-circle',
503
- decision: 'help-circle',
504
- loop_start: 'repeat',
505
- loop_end: 'repeat',
506
- fork: 'git-branch',
507
- join: 'git-merge',
508
- };
509
- const icon = iconMap[node.type] || 'activity';
510
- return b `
511
- <div class="node-header">
512
- <wc-icon provider="carbon" name=${icon} class="node-icon"></wc-icon>
513
- <span class="node-title">${node.label}</span>
514
- </div>
515
- `;
516
- }
517
- _renderDefaultBody() {
518
- const { node } = this;
519
- return b `
520
- <div class="node-body">
521
- ${node.description
522
- ? b `<p class="node-description">${node.description}</p>`
523
- : A}
524
- <div class="node-metadata">
525
- <span class="node-type-tag">${node.type}</span>
526
- ${node.id ? b `<span class="node-id">${node.id}</span>` : A}
527
- </div>
528
- </div>
529
- `;
530
- }
531
- };
532
- FlowDesignerNode.styles = [css_248z];
533
- __decorate([
534
- n({ type: Object })
535
- ], FlowDesignerNode.prototype, "node", void 0);
536
- __decorate([
537
- n({ type: Boolean, reflect: true, attribute: 'selected' })
538
- ], FlowDesignerNode.prototype, "isSelected", void 0);
539
- __decorate([
540
- n({ type: Boolean, reflect: true, attribute: 'editing' })
541
- ], FlowDesignerNode.prototype, "isEditing", void 0);
542
- __decorate([
543
- n({ type: Boolean, reflect: true })
544
- ], FlowDesignerNode.prototype, "disabled", void 0);
545
- __decorate([
546
- n({ type: Boolean, attribute: 'show-delete' })
547
- ], FlowDesignerNode.prototype, "showDelete", void 0);
548
- FlowDesignerNode = __decorate([
549
- IndividualComponent
550
- ], FlowDesignerNode);
551
-
552
- export { FlowDesignerNode as F, css_248z as c };
553
- //# sourceMappingURL=flow-designer-node-CGSm6cUH.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"flow-designer-node-CGSm6cUH.js","sources":["../../src/flow-designer/flow-designer-node.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './flow-designer.scss';\nimport type { WorkflowNode } from './types.js';\n\n/**\n * Individual node component for flow designer\n * Renders a single workflow node with customizable slot templates\n *\n * @tag wc-flow-designer-node\n * @rawTag flow-designer-node\n * @wip true\n */\n@IndividualComponent\nexport class FlowDesignerNode extends LitElement {\n static styles = [styles];\n\n /**\n * The workflow node to render\n */\n @property({ type: Object })\n node: WorkflowNode = { id: '', type: 'action', label: '' };\n\n /**\n * Whether this node is currently selected\n */\n @property({ type: Boolean, reflect: true, attribute: 'selected' })\n isSelected: boolean = false;\n\n /**\n * Whether this node is in edit mode\n */\n @property({ type: Boolean, reflect: true, attribute: 'editing' })\n isEditing: boolean = false;\n\n /**\n * Whether this node is disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n /**\n * Whether to show the delete button\n */\n @property({ type: Boolean, attribute: 'show-delete' })\n showDelete: boolean = true;\n\n private _handleClick = () => {\n this.dispatchEvent(\n new CustomEvent('node-click', {\n detail: { nodeId: this.node.id },\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private _handleDoubleClick = () => {\n this.dispatchEvent(\n new CustomEvent('node-edit-start', {\n detail: { nodeId: this.node.id },\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private _handleDelete = (e: Event) => {\n e.stopPropagation();\n if (confirm(`Delete \"${this.node.label}\"?`)) {\n this.dispatchEvent(\n new CustomEvent('node-delete', {\n detail: { nodeId: this.node.id },\n bubbles: true,\n composed: true,\n })\n );\n }\n };\n\n private _handleMouseEnter = () => {\n // Node hover state handled via CSS\n };\n\n private _handleMouseLeave = () => {\n // Node hover state handled via CSS\n };\n\n render() {\n const { node, isSelected, isEditing, disabled } = this;\n const nodeType = node.type || 'action';\n\n return html`\n <div\n class=\"node-card ${nodeType}\"\n ?selected=${isSelected}\n ?editing=${isEditing}\n ?disabled=${disabled}\n @click=${this._handleClick}\n @dblclick=${this._handleDoubleClick}\n role=\"button\"\n tabindex=\"0\"\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') this._handleClick();\n }}\n >\n <!-- Customizable header slot -->\n <slot name=\"${nodeType}-header\">\n ${this._renderDefaultHeader()}\n </slot>\n\n <!-- Customizable body slot -->\n <slot name=\"${nodeType}-body\">${this._renderDefaultBody()}</slot>\n\n <!-- Action buttons -->\n ${this.isEditing\n ? html`\n <div class=\"node-actions\">\n <button class=\"btn-sm\" @click=${this._handleDelete}>\n Delete\n </button>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n\n private _renderDefaultHeader() {\n const { node } = this;\n const iconMap: Record<string, string> = {\n trigger: 'play-circle',\n action: 'check-circle',\n decision: 'help-circle',\n loop_start: 'repeat',\n loop_end: 'repeat',\n fork: 'git-branch',\n join: 'git-merge',\n };\n\n const icon = iconMap[node.type] || 'activity';\n\n return html`\n <div class=\"node-header\">\n <wc-icon provider=\"carbon\" name=${icon} class=\"node-icon\"></wc-icon>\n <span class=\"node-title\">${node.label}</span>\n </div>\n `;\n }\n\n private _renderDefaultBody() {\n const { node } = this;\n return html`\n <div class=\"node-body\">\n ${node.description\n ? html`<p class=\"node-description\">${node.description}</p>`\n : nothing}\n <div class=\"node-metadata\">\n <span class=\"node-type-tag\">${node.type}</span>\n ${node.id ? html`<span class=\"node-id\">${node.id}</span>` : nothing}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'wc-flow-designer-node': FlowDesignerNode;\n }\n}\n"],"names":["LitElement","html","nothing","styles","property"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- import './IndividualComponent-Bdwyrvd6.js';
2
- import './property-B49QQ8pS.js';
3
- export { F as FlowDesignerNode } from './flow-designer-node-CGSm6cUH.js';
4
- //# sourceMappingURL=flow-designer-node.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"flow-designer-node.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}