@progressive-development/pd-content 1.0.3 → 1.1.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 (84) hide show
  1. package/dist/index.d.ts +2 -4
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +0 -4
  4. package/dist/node_modules/.pnpm/@codemirror_autocomplete@6.20.1/node_modules/@codemirror/autocomplete/dist/index.js +550 -0
  5. package/dist/node_modules/.pnpm/@codemirror_lang-css@6.3.1/node_modules/@codemirror/lang-css/dist/index.js +264 -0
  6. package/dist/node_modules/.pnpm/@codemirror_lang-html@6.4.11/node_modules/@codemirror/lang-html/dist/index.js +661 -0
  7. package/dist/node_modules/.pnpm/@codemirror_lang-java@6.0.2/node_modules/@codemirror/lang-java/dist/index.js +44 -0
  8. package/dist/node_modules/.pnpm/@codemirror_lang-javascript@6.2.5/node_modules/@codemirror/lang-javascript/dist/index.js +346 -0
  9. package/dist/node_modules/.pnpm/@codemirror_lang-json@6.0.2/node_modules/@codemirror/lang-json/dist/index.js +32 -0
  10. package/dist/node_modules/.pnpm/@codemirror_lang-markdown@6.5.0/node_modules/@codemirror/lang-markdown/dist/index.js +492 -0
  11. package/dist/node_modules/.pnpm/@codemirror_lang-python@6.2.1/node_modules/@codemirror/lang-python/dist/index.js +308 -0
  12. package/dist/node_modules/.pnpm/@codemirror_language@6.12.3/node_modules/@codemirror/language/dist/index.js +1572 -0
  13. package/dist/node_modules/.pnpm/@codemirror_state@6.6.0/node_modules/@codemirror/state/dist/index.js +3881 -0
  14. package/dist/node_modules/.pnpm/@codemirror_view@6.40.0/node_modules/@codemirror/view/dist/index.js +9657 -0
  15. package/dist/node_modules/.pnpm/@lezer_common@1.5.1/node_modules/@lezer/common/dist/index.js +2196 -0
  16. package/dist/node_modules/.pnpm/@lezer_css@1.3.3/node_modules/@lezer/css/dist/index.js +147 -0
  17. package/dist/node_modules/.pnpm/@lezer_highlight@1.2.3/node_modules/@lezer/highlight/dist/index.js +898 -0
  18. package/dist/node_modules/.pnpm/@lezer_html@1.3.13/node_modules/@lezer/html/dist/index.js +349 -0
  19. package/dist/node_modules/.pnpm/@lezer_java@1.1.3/node_modules/@lezer/java/dist/index.js +67 -0
  20. package/dist/node_modules/.pnpm/@lezer_javascript@1.5.4/node_modules/@lezer/javascript/dist/index.js +192 -0
  21. package/dist/node_modules/.pnpm/@lezer_json@1.0.3/node_modules/@lezer/json/dist/index.js +37 -0
  22. package/dist/node_modules/.pnpm/@lezer_lr@1.4.8/node_modules/@lezer/lr/dist/index.js +1884 -0
  23. package/dist/node_modules/.pnpm/@lezer_markdown@1.6.3/node_modules/@lezer/markdown/dist/index.js +2335 -0
  24. package/dist/node_modules/.pnpm/@lezer_python@1.1.18/node_modules/@lezer/python/dist/index.js +326 -0
  25. package/dist/node_modules/.pnpm/@marijn_find-cluster-break@1.0.2/node_modules/@marijn/find-cluster-break/src/index.js +82 -0
  26. package/dist/node_modules/.pnpm/style-mod@4.1.3/node_modules/style-mod/src/style-mod.js +174 -0
  27. package/dist/node_modules/.pnpm/w3c-keyname@2.2.8/node_modules/w3c-keyname/index.js +121 -0
  28. package/dist/pd-badge-order/PdBadgeItem.d.ts +11 -0
  29. package/dist/pd-badge-order/PdBadgeItem.d.ts.map +1 -1
  30. package/dist/pd-badge-order/PdBadgeItem.js +162 -10
  31. package/dist/pd-badge-order/PdBadgeOrder.d.ts +56 -17
  32. package/dist/pd-badge-order/PdBadgeOrder.d.ts.map +1 -1
  33. package/dist/pd-badge-order/PdBadgeOrder.js +308 -153
  34. package/dist/pd-badge-order/types.js +3 -1
  35. package/dist/pd-code-snippet/PdCodeSnippet.d.ts +29 -0
  36. package/dist/pd-code-snippet/PdCodeSnippet.d.ts.map +1 -1
  37. package/dist/pd-code-snippet/PdCodeSnippet.js +117 -67
  38. package/dist/pd-code-snippet/codemirror-setup.d.ts +10 -0
  39. package/dist/pd-code-snippet/codemirror-setup.d.ts.map +1 -0
  40. package/dist/pd-code-snippet/codemirror-setup.js +101 -0
  41. package/dist/pd-loading-state/PdLoadingState.d.ts +4 -1
  42. package/dist/pd-loading-state/PdLoadingState.d.ts.map +1 -1
  43. package/dist/pd-loading-state/pd-loading-state.d.ts +1 -1
  44. package/dist/pd-loading-state/pd-loading-state.d.ts.map +1 -1
  45. package/dist/pd-loading-state/pd-logo-loader.js +2 -2
  46. package/dist/pd-more-info/PdMoreInfo.d.ts +52 -4
  47. package/dist/pd-more-info/PdMoreInfo.d.ts.map +1 -1
  48. package/dist/pd-more-info/PdMoreInfo.js +146 -24
  49. package/dist/pd-notice-box/PdNoticeBox.d.ts +8 -1
  50. package/dist/pd-notice-box/PdNoticeBox.d.ts.map +1 -1
  51. package/dist/pd-notice-box/PdNoticeBox.js +41 -2
  52. package/dist/pd-panel-viewer/PdPanel.d.ts +3 -0
  53. package/dist/pd-panel-viewer/PdPanel.d.ts.map +1 -1
  54. package/dist/pd-panel-viewer/PdPanel.js +8 -1
  55. package/dist/pd-panel-viewer/PdPanelViewer.d.ts +3 -0
  56. package/dist/pd-panel-viewer/PdPanelViewer.d.ts.map +1 -1
  57. package/dist/pd-panel-viewer/PdPanelViewer.js +59 -26
  58. package/dist/pd-tab/PdTab.d.ts +8 -5
  59. package/dist/pd-tab/PdTab.d.ts.map +1 -1
  60. package/dist/pd-tab/PdTab.js +110 -56
  61. package/dist/pd-timeline/PdTimeline.d.ts +2 -0
  62. package/dist/pd-timeline/PdTimeline.d.ts.map +1 -1
  63. package/dist/pd-timeline/PdTimeline.js +50 -19
  64. package/dist/types.d.ts +2 -2
  65. package/dist/types.d.ts.map +1 -1
  66. package/package.json +16 -8
  67. package/dist/pd-gallery/PdGallery.d.ts +0 -72
  68. package/dist/pd-gallery/PdGallery.d.ts.map +0 -1
  69. package/dist/pd-gallery/PdGallery.js +0 -660
  70. package/dist/pd-gallery/PdGalleryLightbox.d.ts +0 -53
  71. package/dist/pd-gallery/PdGalleryLightbox.d.ts.map +0 -1
  72. package/dist/pd-gallery/PdGalleryLightbox.js +0 -530
  73. package/dist/pd-gallery/index.d.ts +0 -4
  74. package/dist/pd-gallery/index.d.ts.map +0 -1
  75. package/dist/pd-gallery/pd-gallery-lightbox.d.ts +0 -3
  76. package/dist/pd-gallery/pd-gallery-lightbox.d.ts.map +0 -1
  77. package/dist/pd-gallery/pd-gallery.d.ts +0 -3
  78. package/dist/pd-gallery/pd-gallery.d.ts.map +0 -1
  79. package/dist/pd-gallery/types.d.ts +0 -23
  80. package/dist/pd-gallery/types.d.ts.map +0 -1
  81. package/dist/pd-gallery-lightbox.d.ts +0 -2
  82. package/dist/pd-gallery-lightbox.js +0 -8
  83. package/dist/pd-gallery.d.ts +0 -2
  84. package/dist/pd-gallery.js +0 -8
@@ -0,0 +1,121 @@
1
+ var base = {
2
+ 8: "Backspace",
3
+ 9: "Tab",
4
+ 10: "Enter",
5
+ 12: "NumLock",
6
+ 13: "Enter",
7
+ 16: "Shift",
8
+ 17: "Control",
9
+ 18: "Alt",
10
+ 20: "CapsLock",
11
+ 27: "Escape",
12
+ 32: " ",
13
+ 33: "PageUp",
14
+ 34: "PageDown",
15
+ 35: "End",
16
+ 36: "Home",
17
+ 37: "ArrowLeft",
18
+ 38: "ArrowUp",
19
+ 39: "ArrowRight",
20
+ 40: "ArrowDown",
21
+ 44: "PrintScreen",
22
+ 45: "Insert",
23
+ 46: "Delete",
24
+ 59: ";",
25
+ 61: "=",
26
+ 91: "Meta",
27
+ 92: "Meta",
28
+ 106: "*",
29
+ 107: "+",
30
+ 108: ",",
31
+ 109: "-",
32
+ 110: ".",
33
+ 111: "/",
34
+ 144: "NumLock",
35
+ 145: "ScrollLock",
36
+ 160: "Shift",
37
+ 161: "Shift",
38
+ 162: "Control",
39
+ 163: "Control",
40
+ 164: "Alt",
41
+ 165: "Alt",
42
+ 173: "-",
43
+ 186: ";",
44
+ 187: "=",
45
+ 188: ",",
46
+ 189: "-",
47
+ 190: ".",
48
+ 191: "/",
49
+ 192: "`",
50
+ 219: "[",
51
+ 220: "\\",
52
+ 221: "]",
53
+ 222: "'"
54
+ };
55
+
56
+ var shift = {
57
+ 48: ")",
58
+ 49: "!",
59
+ 50: "@",
60
+ 51: "#",
61
+ 52: "$",
62
+ 53: "%",
63
+ 54: "^",
64
+ 55: "&",
65
+ 56: "*",
66
+ 57: "(",
67
+ 59: ":",
68
+ 61: "+",
69
+ 173: "_",
70
+ 186: ":",
71
+ 187: "+",
72
+ 188: "<",
73
+ 189: "_",
74
+ 190: ">",
75
+ 191: "?",
76
+ 192: "~",
77
+ 219: "{",
78
+ 220: "|",
79
+ 221: "}",
80
+ 222: "\""
81
+ };
82
+
83
+ var mac = typeof navigator != "undefined" && /Mac/.test(navigator.platform);
84
+ var ie = typeof navigator != "undefined" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
85
+
86
+ // Fill in the digit keys
87
+ for (var i = 0; i < 10; i++) base[48 + i] = base[96 + i] = String(i);
88
+
89
+ // The function keys
90
+ for (var i = 1; i <= 24; i++) base[i + 111] = "F" + i;
91
+
92
+ // And the alphabetic keys
93
+ for (var i = 65; i <= 90; i++) {
94
+ base[i] = String.fromCharCode(i + 32);
95
+ shift[i] = String.fromCharCode(i);
96
+ }
97
+
98
+ // For each code that doesn't have a shift-equivalent, copy the base name
99
+ for (var code in base) if (!shift.hasOwnProperty(code)) shift[code] = base[code];
100
+
101
+ function keyName(event) {
102
+ // On macOS, keys held with Shift and Cmd don't reflect the effect of Shift in `.key`.
103
+ // On IE, shift effect is never included in `.key`.
104
+ var ignoreKey = mac && event.metaKey && event.shiftKey && !event.ctrlKey && !event.altKey ||
105
+ ie && event.shiftKey && event.key && event.key.length == 1 ||
106
+ event.key == "Unidentified";
107
+ var name = (!ignoreKey && event.key) ||
108
+ (event.shiftKey ? shift : base)[event.keyCode] ||
109
+ event.key || "Unidentified";
110
+ // Edge sometimes produces wrong names (Issue #3)
111
+ if (name == "Esc") name = "Escape";
112
+ if (name == "Del") name = "Delete";
113
+ // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
114
+ if (name == "Left") name = "ArrowLeft";
115
+ if (name == "Up") name = "ArrowUp";
116
+ if (name == "Right") name = "ArrowRight";
117
+ if (name == "Down") name = "ArrowDown";
118
+ return name
119
+ }
120
+
121
+ export { base, keyName, shift };
@@ -15,15 +15,26 @@ export declare class PdBadgeItem extends LitElement {
15
15
  numbered: boolean;
16
16
  /** Whether this badge is in the active list */
17
17
  active: boolean;
18
+ /** Allow inline editing of badge title and description */
19
+ editable: boolean;
18
20
  disabled: boolean;
19
21
  readonly: boolean;
20
22
  /** Whether this badge is currently being dragged */
21
23
  dragging: boolean;
22
24
  /** Whether this is a ghost placeholder for the dragged item */
23
25
  ghost: boolean;
26
+ private _editing;
27
+ connectedCallback(): void;
28
+ disconnectedCallback(): void;
29
+ private _stopInternalFormEvent;
24
30
  static styles: import('lit').CSSResult;
25
31
  render(): import('lit').TemplateResult<1> | typeof nothing;
26
32
  private _renderActions;
33
+ /** Programmatically enter edit mode and focus the title input. */
34
+ startEditing(): Promise<void>;
35
+ private _onEditStart;
36
+ private _onEditSave;
37
+ private _onEditCancel;
27
38
  private _onAdd;
28
39
  private _onRemove;
29
40
  private _onDelete;
@@ -1 +1 @@
1
- {"version":3,"file":"PdBadgeItem.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/PdBadgeItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,OAAO,0CAA0C,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAG1C;;;;;;GAMG;AACH,qBAAa,WAAY,SAAQ,UAAU;IAEzC,KAAK,EAAG,OAAO,CAAC;IAEhB,4DAA4D;IAE5D,KAAK,SAAK;IAEV,sCAAsC;IAEtC,QAAQ,UAAS;IAEjB,+CAA+C;IAE/C,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,oDAAoD;IAEpD,QAAQ,UAAS;IAEjB,+DAA+D;IAE/D,KAAK,UAAS;IAEd,MAAM,CAAC,MAAM,0BA0JX;IAEF,MAAM;IAwDN,OAAO,CAAC,cAAc;IA0CtB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,SAAS;CAUlB"}
1
+ {"version":3,"file":"PdBadgeItem.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/PdBadgeItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,OAAO,0CAA0C,CAAC;AAElD,OAAO,4CAA4C,CAAC;AACpD,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AAErD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAO1C;;;;;;GAMG;AACH,qBAAa,WAAY,SAAQ,UAAU;IAEzC,KAAK,EAAG,OAAO,CAAC;IAEhB,4DAA4D;IAE5D,KAAK,SAAK;IAEV,sCAAsC;IAEtC,QAAQ,UAAS;IAEjB,+CAA+C;IAE/C,MAAM,UAAS;IAEf,0DAA0D;IAE1D,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,oDAAoD;IAEpD,QAAQ,UAAS;IAEjB,+DAA+D;IAE/D,KAAK,UAAS;IAGd,OAAO,CAAC,QAAQ,CAAS;IAEhB,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAYrC,OAAO,CAAC,sBAAsB,CAE5B;IAEF,MAAM,CAAC,MAAM,0BAyKX;IAEF,MAAM;IA0FN,OAAO,CAAC,cAAc;IAqEtB,kEAAkE;IACrD,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAO1C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,SAAS;CAUlB"}
@@ -1,9 +1,12 @@
1
1
  import { LitElement, css, nothing, html } from 'lit';
2
- import { property } from 'lit/decorators.js';
2
+ import { property, state } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import '@progressive-development/pd-icon/pd-icon';
5
5
  import { pdIcons } from '@progressive-development/pd-icon';
6
- import { DEFAULT_BADGE_COLOR } from './types.js';
6
+ import '@progressive-development/pd-forms/pd-input';
7
+ import '@progressive-development/pd-forms/pd-input-area';
8
+ import '@progressive-development/pd-forms/pd-button';
9
+ import { DEFAULT_BADGE_COLOR, TEXT_LIMIT_TITLE, TEXT_LIMIT_DESC } from './types.js';
7
10
 
8
11
  var __defProp = Object.defineProperty;
9
12
  var __decorateClass = (decorators, target, key, kind) => {
@@ -20,10 +23,37 @@ class PdBadgeItem extends LitElement {
20
23
  this.index = 0;
21
24
  this.numbered = false;
22
25
  this.active = false;
26
+ this.editable = false;
23
27
  this.disabled = false;
24
28
  this.readonly = false;
25
29
  this.dragging = false;
26
30
  this.ghost = false;
31
+ this._editing = false;
32
+ this._stopInternalFormEvent = (e) => {
33
+ if (e.target !== this) e.stopPropagation();
34
+ };
35
+ }
36
+ connectedCallback() {
37
+ super.connectedCallback();
38
+ this.addEventListener(
39
+ "pd-form-element-register",
40
+ this._stopInternalFormEvent
41
+ );
42
+ this.addEventListener(
43
+ "pd-form-element-change",
44
+ this._stopInternalFormEvent
45
+ );
46
+ }
47
+ disconnectedCallback() {
48
+ this.removeEventListener(
49
+ "pd-form-element-register",
50
+ this._stopInternalFormEvent
51
+ );
52
+ this.removeEventListener(
53
+ "pd-form-element-change",
54
+ this._stopInternalFormEvent
55
+ );
56
+ super.disconnectedCallback();
27
57
  }
28
58
  static {
29
59
  this.styles = css`
@@ -176,6 +206,21 @@ class PdBadgeItem extends LitElement {
176
206
  border-color: var(--pd-default-error-col, #ef4444);
177
207
  }
178
208
 
209
+ .badge.editing {
210
+ padding: 0.75rem;
211
+ align-items: flex-start;
212
+ }
213
+
214
+ .badge.editing .content {
215
+ gap: 0.5rem;
216
+ }
217
+
218
+ .edit-actions {
219
+ display: flex;
220
+ justify-content: flex-end;
221
+ gap: 0.4rem;
222
+ }
223
+
179
224
  .badge.disabled .action-btn,
180
225
  .badge.readonly .action-btn {
181
226
  display: none;
@@ -187,6 +232,7 @@ class PdBadgeItem extends LitElement {
187
232
  const badgeClasses = {
188
233
  badge: true,
189
234
  active: this.active,
235
+ editing: this._editing,
190
236
  dragging: this.dragging,
191
237
  ghost: this.ghost,
192
238
  disabled: this.disabled,
@@ -200,7 +246,7 @@ class PdBadgeItem extends LitElement {
200
246
  data-badge-id=${this.badge.id}
201
247
  >
202
248
  ${this.active && this.numbered ? html`<span class="number" part="badge-number">${this.index}</span>` : nothing}
203
- ${this.active && !this.disabled && !this.readonly ? html`
249
+ ${this.active && !this.disabled && !this.readonly && !this._editing ? html`
204
250
  <span class="drag-handle" part="drag-handle">
205
251
  <pd-icon icon=${pdIcons.ICON_BURGER_MENU}></pd-icon>
206
252
  </span>
@@ -216,10 +262,41 @@ class PdBadgeItem extends LitElement {
216
262
  ></span>`}
217
263
 
218
264
  <span class="content">
219
- <span class="title" part="badge-title">${this.badge.title}</span>
220
- ${this.badge.description ? html`<span class="description" part="badge-description"
221
- >${this.badge.description}</span
222
- >` : nothing}
265
+ ${this._editing ? html`
266
+ <pd-input
267
+ label=""
268
+ required
269
+ initValue="${this.badge.title}"
270
+ maxlength="${TEXT_LIMIT_TITLE}"
271
+ placeHolder="Titel"
272
+ ></pd-input>
273
+ <pd-input-area
274
+ label=""
275
+ initValue="${this.badge.description || ""}"
276
+ maxlength="${TEXT_LIMIT_DESC}"
277
+ placeHolder="Beschreibung"
278
+ ></pd-input-area>
279
+ <span class="edit-actions">
280
+ <pd-button
281
+ size="sm"
282
+ text="Speichern"
283
+ @button-clicked=${this._onEditSave}
284
+ ></pd-button>
285
+ <pd-button
286
+ size="sm"
287
+ outline
288
+ text="Abbrechen"
289
+ @button-clicked=${this._onEditCancel}
290
+ ></pd-button>
291
+ </span>
292
+ ` : html`
293
+ <span class="title" part="badge-title"
294
+ >${this.badge.title}</span
295
+ >
296
+ ${this.badge.description ? html`<span class="description" part="badge-description"
297
+ >${this.badge.description}</span
298
+ >` : nothing}
299
+ `}
223
300
  </span>
224
301
 
225
302
  ${this._renderActions()}
@@ -228,26 +305,47 @@ class PdBadgeItem extends LitElement {
228
305
  }
229
306
  _renderActions() {
230
307
  if (this.disabled || this.readonly) return nothing;
308
+ if (this._editing) return nothing;
231
309
  if (this.active) {
232
310
  return html`
311
+ ${this.editable ? html`
312
+ <button
313
+ class="action-btn"
314
+ @click=${this._onEditStart}
315
+ title="Bearbeiten"
316
+ aria-label="Badge bearbeiten"
317
+ >
318
+ <pd-icon icon=${pdIcons.ICON_EDIT_NEW}></pd-icon>
319
+ </button>
320
+ ` : nothing}
233
321
  <button
234
322
  class="action-btn"
235
323
  @click=${this._onRemove}
236
324
  title="Entfernen"
237
325
  aria-label="Badge entfernen"
238
326
  >
239
- <pd-icon icon=${pdIcons.ICON_ARROW_BACK}></pd-icon>
327
+ <pd-icon icon=${pdIcons.ICON_ARROW_NEXT}></pd-icon>
240
328
  </button>
241
329
  `;
242
330
  }
243
331
  return html`
332
+ ${this.editable ? html`
333
+ <button
334
+ class="action-btn"
335
+ @click=${this._onEditStart}
336
+ title="Bearbeiten"
337
+ aria-label="Badge bearbeiten"
338
+ >
339
+ <pd-icon icon=${pdIcons.ICON_EDIT_NEW}></pd-icon>
340
+ </button>
341
+ ` : nothing}
244
342
  <button
245
343
  class="action-btn"
246
344
  @click=${this._onAdd}
247
345
  title="Hinzufügen"
248
346
  aria-label="Badge hinzufügen"
249
347
  >
250
- <pd-icon icon=${pdIcons.ICON_ADD}></pd-icon>
348
+ <pd-icon icon=${pdIcons.ICON_ARROW_BACK}></pd-icon>
251
349
  </button>
252
350
  ${this.badge.custom ? html`
253
351
  <button
@@ -256,11 +354,59 @@ class PdBadgeItem extends LitElement {
256
354
  title="Löschen"
257
355
  aria-label="Badge löschen"
258
356
  >
259
- <pd-icon icon=${pdIcons.ICON_DELETE}></pd-icon>
357
+ <pd-icon icon=${pdIcons.ICON_DELETE_NEW}></pd-icon>
260
358
  </button>
261
359
  ` : nothing}
262
360
  `;
263
361
  }
362
+ /** Programmatically enter edit mode and focus the title input. */
363
+ async startEditing() {
364
+ this._editing = true;
365
+ await this.updateComplete;
366
+ const input = this.shadowRoot?.querySelector("pd-input");
367
+ input?.focus();
368
+ }
369
+ _onEditStart(e) {
370
+ e.stopPropagation();
371
+ this.startEditing();
372
+ }
373
+ _onEditSave(e) {
374
+ e.stopPropagation();
375
+ const input = this.shadowRoot?.querySelector("pd-input");
376
+ const textarea = this.shadowRoot?.querySelector("pd-input-area");
377
+ const title = (input?.value || "").trim();
378
+ if (!title) {
379
+ input?.runValidators();
380
+ return;
381
+ }
382
+ const description = (textarea?.value || "").trim();
383
+ this._editing = false;
384
+ this.dispatchEvent(
385
+ new CustomEvent("badge-action", {
386
+ detail: {
387
+ action: "edit-save",
388
+ badgeId: this.badge.id,
389
+ title,
390
+ description
391
+ },
392
+ bubbles: true,
393
+ composed: true
394
+ })
395
+ );
396
+ }
397
+ _onEditCancel(e) {
398
+ e.stopPropagation();
399
+ this._editing = false;
400
+ if (!this.badge.title) {
401
+ this.dispatchEvent(
402
+ new CustomEvent("badge-action", {
403
+ detail: { action: "delete", badgeId: this.badge.id },
404
+ bubbles: true,
405
+ composed: true
406
+ })
407
+ );
408
+ }
409
+ }
264
410
  _onAdd(e) {
265
411
  e.stopPropagation();
266
412
  this.dispatchEvent(
@@ -304,6 +450,9 @@ __decorateClass([
304
450
  __decorateClass([
305
451
  property({ type: Boolean })
306
452
  ], PdBadgeItem.prototype, "active");
453
+ __decorateClass([
454
+ property({ type: Boolean })
455
+ ], PdBadgeItem.prototype, "editable");
307
456
  __decorateClass([
308
457
  property({ type: Boolean })
309
458
  ], PdBadgeItem.prototype, "disabled");
@@ -316,5 +465,8 @@ __decorateClass([
316
465
  __decorateClass([
317
466
  property({ type: Boolean, reflect: true })
318
467
  ], PdBadgeItem.prototype, "ghost");
468
+ __decorateClass([
469
+ state()
470
+ ], PdBadgeItem.prototype, "_editing");
319
471
 
320
472
  export { PdBadgeItem };
@@ -1,23 +1,33 @@
1
- import { CSSResultGroup, PropertyValues } from 'lit';
2
- import { PdBaseUIInput } from '@progressive-development/pd-forms';
1
+ import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
2
+ import { pdAi } from '@progressive-development/pd-model';
3
3
  import { PdBadge } from './types.js';
4
4
  /**
5
5
  * Badge order component for selecting and sorting badges.
6
6
  * Two areas: active (sorted, left/bottom) and available (pool, right/top).
7
7
  *
8
+ * Internally controlled after init — badges and value are owned by this component.
9
+ * Use setBadges() / reset() for external updates after init.
10
+ *
8
11
  * @tagname pd-badge-order
9
12
  *
10
- * @event pd-change - Fired when order or selection changes. Detail: { value: string[], badges: PdBadge[] }
13
+ * @event pd-badge-selection-change - Fired when order or selection changes. Detail: { value: string[], badges: PdBadge[] }
11
14
  * @event pd-reorder - Fired when only the order changes. Detail: { value: string[] }
12
- * @event pd-form-element-change - Standard PD form event.
15
+ * @event pd-badge-edited - Fired when a badge is edited inline. Detail: { badge: PdBadge }
16
+ * @event pd-ai-trigger - Fired when AI sparkle icon is clicked. Detail: { value, valueName, aiOptions }
13
17
  *
14
18
  * @cssprop --pd-badge-order-gap - Gap between the two areas. Default: 1rem.
15
19
  * @cssprop --pd-badge-order-min-height - Minimum height of badge lists. Default: 200px.
16
20
  * @cssprop --pd-badge-transition-duration - FLIP animation duration. Default: 200ms.
17
21
  */
18
- export declare class PdBadgeOrder extends PdBaseUIInput {
19
- /** All available badges (the full pool). Set from outside. */
20
- badges: PdBadge[];
22
+ export declare class PdBadgeOrder extends LitElement {
23
+ /** Initial badges evaluated exactly once. Use setBadges() for subsequent updates. */
24
+ initialBadges?: PdBadge[];
25
+ /** Initial active IDs — evaluated exactly once. Use setBadges() for subsequent updates. */
26
+ initialValue?: string[];
27
+ /** Label displayed above the component. */
28
+ label: string;
29
+ /** Value name for form identification and events. */
30
+ valueName: string;
21
31
  /** Minimum number of active badges */
22
32
  min?: number;
23
33
  /** Maximum number of active badges */
@@ -32,27 +42,54 @@ export declare class PdBadgeOrder extends PdBaseUIInput {
32
42
  emptyActiveText: string;
33
43
  /** Placeholder text when available list is empty */
34
44
  emptyAvailableText: string;
45
+ /** Allow inline editing. "active" | "available" | "all" | "" */
46
+ editable: "active" | "available" | "all" | "";
47
+ /** Show create button. "active" | "available" | "all" | "" */
48
+ creatable: "active" | "available" | "all" | "";
49
+ /** Whether the field is required. */
50
+ required: boolean;
51
+ /** Disable all interaction. */
52
+ disabled: boolean;
53
+ /** Read-only mode. */
54
+ readonly: boolean;
55
+ /** AI configuration for this field. Shows sparkle icon when set. */
56
+ aiOptions?: pdAi.AiOptions;
57
+ /** All badges (the full pool). Internally controlled after init. */
58
+ private _badges;
59
+ /** Active badge IDs in order. Internally controlled after init. */
60
+ private _activeIds;
61
+ /** Whether initial data has been applied. */
62
+ private _initialized;
63
+ /** Validation error message — only set after explicit validate() call. */
64
+ private _error;
35
65
  private _dragController;
66
+ /** Badge ID that should auto-enter edit mode after next render. */
67
+ private _autoEditBadgeId;
36
68
  private _activeListEl;
37
69
  private _availableListEl;
38
70
  /** Positions captured before DOM change for FLIP animation */
39
71
  private _oldPositions;
40
- static styles: CSSResultGroup;
41
- aiAdopt(value: string): void;
42
- /** @ts-expect-error Widening return type from string to string[] */
72
+ /** Current active IDs (read-only). */
43
73
  get value(): string[];
44
- /** @ts-expect-error Widening param type from string to string[] | string */
45
- set value(val: string[] | string);
46
- _getParsedValue(): string[];
47
- protected _getInitialValue(reset?: boolean): string;
48
- connectedCallback(): void;
49
- private _setupValidators;
74
+ /** Current badges (read-only). */
75
+ get badges(): PdBadge[];
76
+ /** Set badges and active IDs from outside. Marks as initialized. */
77
+ setBadges(badges: PdBadge[], activeIds: string[]): void;
78
+ /** Reset to empty state. Allows initialBadges/initialValue to re-apply on next render. */
79
+ reset(): void;
80
+ /** Validate current state. Sets error message visible if invalid. Returns true if valid. */
81
+ validate(): boolean;
82
+ static styles: CSSResultGroup;
83
+ update(changedProps: PropertyValues<this>): void;
84
+ updated(changedProps: PropertyValues): void;
50
85
  private get _activeBadges();
51
86
  private get _availableBadges();
52
87
  private _captureBeforeChange;
88
+ private _createBadge;
53
89
  private _addBadge;
54
90
  private _removeBadge;
55
91
  private _deleteBadge;
92
+ private _editBadge;
56
93
  /** Reorder: move badge from oldIndex to newIndex within active list */
57
94
  reorderBadge(oldIndex: number, newIndex: number): void;
58
95
  /** Insert a badge from available into active list at a specific index */
@@ -60,9 +97,11 @@ export declare class PdBadgeOrder extends PdBaseUIInput {
60
97
  /** Move a badge from active to available (at drop) */
61
98
  deactivateBadge(badgeId: string): void;
62
99
  private _fireChangeEvents;
100
+ private _onAiTrigger;
101
+ private _onAiTriggerKeyDown;
63
102
  private _onBadgeAction;
64
- updated(changedProps: PropertyValues): void;
65
103
  render(): import('lit').TemplateResult<1>;
104
+ private _renderLabel;
66
105
  private _renderGhost;
67
106
  }
68
107
  //# sourceMappingURL=PdBadgeOrder.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"PdBadgeOrder.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/PdBadgeOrder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,OAAO,EAAuB,MAAM,YAAY,CAAC;AAM/D;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,8DAA8D;IAE9D,MAAM,EAAE,OAAO,EAAE,CAAM;IAEvB,sCAAsC;IAEtC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,sCAAsC;IAEtC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,2CAA2C;IAE3C,QAAQ,UAAQ;IAEhB,gCAAgC;IAEhC,WAAW,SAAgB;IAE3B,mCAAmC;IAEnC,cAAc,SAAe;IAE7B,iDAAiD;IAEjD,eAAe,SAA2B;IAE1C,oDAAoD;IAEpD,kBAAkB,SAA2B;IAG7C,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,aAAa,CAAe;IAGpC,OAAO,CAAC,gBAAgB,CAAe;IAEvC,8DAA8D;IAC9D,OAAO,CAAC,aAAa,CAAqC;IAE1D,OAAgB,MAAM,EAAE,cAAc,CAsHpC;IAMc,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAgC5C,oEAAoE;IACpE,IAAa,KAAK,IAAI,MAAM,EAAE,CAO7B;IAED,4EAA4E;IAC5E,IAAa,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,EAUxC;IAEQ,eAAe,IAAI,MAAM,EAAE;cAIjB,gBAAgB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM;IAUnD,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,gBAAgB;IA8CxB,OAAO,KAAK,aAAa,GAIxB;IAED,OAAO,KAAK,gBAAgB,GAG3B;IAMD,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;IA0BpB,uEAAuE;IACvE,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IA0BtD,yEAAyE;IACzE,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAenD,sDAAsD;IACtD,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAItC,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,cAAc,CAepB;IAMO,OAAO,CAAC,YAAY,EAAE,cAAc,GAAG,IAAI;IAuB3C,MAAM;IAmHf,OAAO,CAAC,YAAY;CAwBrB"}
1
+ {"version":3,"file":"PdBadgeOrder.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/PdBadgeOrder.ts"],"names":[],"mappings":"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"}