@progressive-development/pd-content 1.1.0 → 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.
- package/dist/node_modules/.pnpm/@codemirror_autocomplete@6.20.1/node_modules/@codemirror/autocomplete/dist/index.js +550 -0
- package/dist/node_modules/.pnpm/@codemirror_lang-css@6.3.1/node_modules/@codemirror/lang-css/dist/index.js +264 -0
- package/dist/node_modules/.pnpm/@codemirror_lang-html@6.4.11/node_modules/@codemirror/lang-html/dist/index.js +661 -0
- package/dist/node_modules/.pnpm/@codemirror_lang-java@6.0.2/node_modules/@codemirror/lang-java/dist/index.js +44 -0
- package/dist/node_modules/.pnpm/@codemirror_lang-javascript@6.2.5/node_modules/@codemirror/lang-javascript/dist/index.js +346 -0
- package/dist/node_modules/.pnpm/@codemirror_lang-json@6.0.2/node_modules/@codemirror/lang-json/dist/index.js +32 -0
- package/dist/node_modules/.pnpm/@codemirror_lang-markdown@6.5.0/node_modules/@codemirror/lang-markdown/dist/index.js +492 -0
- package/dist/node_modules/.pnpm/@codemirror_lang-python@6.2.1/node_modules/@codemirror/lang-python/dist/index.js +308 -0
- package/dist/node_modules/.pnpm/@codemirror_language@6.12.3/node_modules/@codemirror/language/dist/index.js +1572 -0
- package/dist/node_modules/.pnpm/@codemirror_state@6.6.0/node_modules/@codemirror/state/dist/index.js +3881 -0
- package/dist/node_modules/.pnpm/@codemirror_view@6.40.0/node_modules/@codemirror/view/dist/index.js +9657 -0
- package/dist/node_modules/.pnpm/@lezer_common@1.5.1/node_modules/@lezer/common/dist/index.js +2196 -0
- package/dist/node_modules/.pnpm/@lezer_css@1.3.3/node_modules/@lezer/css/dist/index.js +147 -0
- package/dist/node_modules/.pnpm/@lezer_highlight@1.2.3/node_modules/@lezer/highlight/dist/index.js +898 -0
- package/dist/node_modules/.pnpm/@lezer_html@1.3.13/node_modules/@lezer/html/dist/index.js +349 -0
- package/dist/node_modules/.pnpm/@lezer_java@1.1.3/node_modules/@lezer/java/dist/index.js +67 -0
- package/dist/node_modules/.pnpm/@lezer_javascript@1.5.4/node_modules/@lezer/javascript/dist/index.js +192 -0
- package/dist/node_modules/.pnpm/@lezer_json@1.0.3/node_modules/@lezer/json/dist/index.js +37 -0
- package/dist/node_modules/.pnpm/@lezer_lr@1.4.8/node_modules/@lezer/lr/dist/index.js +1884 -0
- package/dist/node_modules/.pnpm/@lezer_markdown@1.6.3/node_modules/@lezer/markdown/dist/index.js +2335 -0
- package/dist/node_modules/.pnpm/@lezer_python@1.1.18/node_modules/@lezer/python/dist/index.js +326 -0
- package/dist/node_modules/.pnpm/@marijn_find-cluster-break@1.0.2/node_modules/@marijn/find-cluster-break/src/index.js +82 -0
- package/dist/node_modules/.pnpm/style-mod@4.1.3/node_modules/style-mod/src/style-mod.js +174 -0
- package/dist/node_modules/.pnpm/w3c-keyname@2.2.8/node_modules/w3c-keyname/index.js +121 -0
- package/dist/pd-badge-order/PdBadgeItem.d.ts +11 -0
- package/dist/pd-badge-order/PdBadgeItem.d.ts.map +1 -1
- package/dist/pd-badge-order/PdBadgeItem.js +162 -10
- package/dist/pd-badge-order/PdBadgeOrder.d.ts +56 -17
- package/dist/pd-badge-order/PdBadgeOrder.d.ts.map +1 -1
- package/dist/pd-badge-order/PdBadgeOrder.js +308 -153
- package/dist/pd-badge-order/types.js +3 -1
- package/dist/pd-code-snippet/PdCodeSnippet.d.ts +29 -0
- package/dist/pd-code-snippet/PdCodeSnippet.d.ts.map +1 -1
- package/dist/pd-code-snippet/PdCodeSnippet.js +117 -67
- package/dist/pd-code-snippet/codemirror-setup.d.ts +10 -0
- package/dist/pd-code-snippet/codemirror-setup.d.ts.map +1 -0
- package/dist/pd-code-snippet/codemirror-setup.js +101 -0
- package/dist/pd-more-info/PdMoreInfo.d.ts +48 -4
- package/dist/pd-more-info/PdMoreInfo.d.ts.map +1 -1
- package/dist/pd-more-info/PdMoreInfo.js +132 -17
- package/dist/pd-notice-box/PdNoticeBox.js +1 -1
- package/dist/pd-panel-viewer/PdPanel.d.ts +3 -0
- package/dist/pd-panel-viewer/PdPanel.d.ts.map +1 -1
- package/dist/pd-panel-viewer/PdPanel.js +8 -1
- package/dist/pd-panel-viewer/PdPanelViewer.d.ts +1 -0
- package/dist/pd-panel-viewer/PdPanelViewer.d.ts.map +1 -1
- package/dist/pd-panel-viewer/PdPanelViewer.js +44 -28
- package/dist/pd-timeline/PdTimeline.d.ts +2 -0
- package/dist/pd-timeline/PdTimeline.d.ts.map +1 -1
- package/dist/pd-timeline/PdTimeline.js +50 -19
- package/dist/types.d.ts +1 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +16 -6
|
@@ -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;
|
|
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
|
|
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
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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 {
|
|
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-
|
|
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
|
|
19
|
-
/**
|
|
20
|
-
|
|
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
|
-
|
|
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
|
-
/**
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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,
|
|
1
|
+
{"version":3,"file":"PdBadgeOrder.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/PdBadgeOrder.ts"],"names":[],"mappings":"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"}
|