@progressive-development/pd-content 1.0.1 → 1.0.3

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 (85) hide show
  1. package/dist/index.d.ts +5 -1
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +14 -5
  4. package/dist/pd-badge-order/DragController.d.ts +41 -0
  5. package/dist/pd-badge-order/DragController.d.ts.map +1 -0
  6. package/dist/pd-badge-order/DragController.js +239 -0
  7. package/dist/pd-badge-order/PdBadgeItem.d.ts +31 -0
  8. package/dist/pd-badge-order/PdBadgeItem.d.ts.map +1 -0
  9. package/dist/pd-badge-order/PdBadgeItem.js +320 -0
  10. package/dist/pd-badge-order/PdBadgeOrder.d.ts +68 -0
  11. package/dist/pd-badge-order/PdBadgeOrder.d.ts.map +1 -0
  12. package/dist/pd-badge-order/PdBadgeOrder.js +550 -0
  13. package/dist/pd-badge-order/flip-animator.d.ts +30 -0
  14. package/dist/pd-badge-order/flip-animator.d.ts.map +1 -0
  15. package/dist/pd-badge-order/flip-animator.js +39 -0
  16. package/dist/pd-badge-order/pd-badge-item.d.ts +3 -0
  17. package/dist/pd-badge-order/pd-badge-item.d.ts.map +1 -0
  18. package/dist/pd-badge-order/pd-badge-item.js +8 -0
  19. package/dist/pd-badge-order/pd-badge-order.d.ts +3 -0
  20. package/dist/pd-badge-order/pd-badge-order.d.ts.map +1 -0
  21. package/dist/pd-badge-order/types.d.ts +25 -0
  22. package/dist/pd-badge-order/types.d.ts.map +1 -0
  23. package/dist/pd-badge-order/types.js +3 -0
  24. package/dist/pd-badge-order.d.ts +2 -0
  25. package/dist/pd-badge-order.js +8 -0
  26. package/dist/pd-gallery/PdGallery.d.ts +72 -0
  27. package/dist/pd-gallery/PdGallery.d.ts.map +1 -0
  28. package/dist/pd-gallery/PdGallery.js +660 -0
  29. package/dist/pd-gallery/PdGalleryLightbox.d.ts +53 -0
  30. package/dist/pd-gallery/PdGalleryLightbox.d.ts.map +1 -0
  31. package/dist/pd-gallery/PdGalleryLightbox.js +530 -0
  32. package/dist/pd-gallery/index.d.ts +4 -0
  33. package/dist/pd-gallery/index.d.ts.map +1 -0
  34. package/dist/pd-gallery/pd-gallery-lightbox.d.ts +3 -0
  35. package/dist/pd-gallery/pd-gallery-lightbox.d.ts.map +1 -0
  36. package/dist/pd-gallery/pd-gallery.d.ts +3 -0
  37. package/dist/pd-gallery/pd-gallery.d.ts.map +1 -0
  38. package/dist/pd-gallery/types.d.ts +23 -0
  39. package/dist/pd-gallery/types.d.ts.map +1 -0
  40. package/dist/pd-gallery-lightbox.d.ts +2 -0
  41. package/dist/pd-gallery-lightbox.js +8 -0
  42. package/dist/pd-gallery.d.ts +2 -0
  43. package/dist/pd-gallery.js +8 -0
  44. package/dist/pd-loading-state/PdLoadingState.d.ts +25 -9
  45. package/dist/pd-loading-state/PdLoadingState.d.ts.map +1 -1
  46. package/dist/pd-loading-state/PdLoadingState.js +228 -83
  47. package/dist/pd-loading-state/pd-loading-state.d.ts.map +1 -1
  48. package/dist/pd-loading-state/pd-logo-loader.d.ts +25 -0
  49. package/dist/pd-loading-state/pd-logo-loader.d.ts.map +1 -0
  50. package/dist/pd-loading-state/pd-logo-loader.js +63 -0
  51. package/dist/pd-loading-state/register-pd-logo-loader.d.ts +6 -0
  52. package/dist/pd-loading-state/register-pd-logo-loader.d.ts.map +1 -0
  53. package/dist/pd-loading-state/register-pd-logo-loader.js +6 -0
  54. package/dist/pd-loading-state.js +8 -1
  55. package/dist/pd-panel-viewer/PdPanelViewer.d.ts.map +1 -1
  56. package/dist/pd-panel-viewer/PdPanelViewer.js +1 -1
  57. package/dist/types.d.ts +3 -0
  58. package/dist/types.d.ts.map +1 -1
  59. package/package.json +8 -3
  60. package/dist/pd-box-view/pd-box-view.stories.d.ts +0 -43
  61. package/dist/pd-box-view/pd-box-view.stories.d.ts.map +0 -1
  62. package/dist/pd-code-snippet/pd-code-snippet.stories.d.ts +0 -55
  63. package/dist/pd-code-snippet/pd-code-snippet.stories.d.ts.map +0 -1
  64. package/dist/pd-collapse/pd-collapse.stories.d.ts +0 -51
  65. package/dist/pd-collapse/pd-collapse.stories.d.ts.map +0 -1
  66. package/dist/pd-collapse-group/pd-collapse-group.stories.d.ts +0 -40
  67. package/dist/pd-collapse-group/pd-collapse-group.stories.d.ts.map +0 -1
  68. package/dist/pd-edit-content/pd-edit-content.stories.d.ts +0 -55
  69. package/dist/pd-edit-content/pd-edit-content.stories.d.ts.map +0 -1
  70. package/dist/pd-loading-state/pd-loading-state.stories.d.ts +0 -48
  71. package/dist/pd-loading-state/pd-loading-state.stories.d.ts.map +0 -1
  72. package/dist/pd-more-info/pd-more-info.stories.d.ts +0 -42
  73. package/dist/pd-more-info/pd-more-info.stories.d.ts.map +0 -1
  74. package/dist/pd-notice-box/pd-notice-box.stories.d.ts +0 -58
  75. package/dist/pd-notice-box/pd-notice-box.stories.d.ts.map +0 -1
  76. package/dist/pd-panel-viewer/pd-panel-viewer.stories.d.ts +0 -46
  77. package/dist/pd-panel-viewer/pd-panel-viewer.stories.d.ts.map +0 -1
  78. package/dist/pd-resize-content/pd-resize-content.stories.d.ts +0 -37
  79. package/dist/pd-resize-content/pd-resize-content.stories.d.ts.map +0 -1
  80. package/dist/pd-tab/pd-tab.stories.d.ts +0 -53
  81. package/dist/pd-tab/pd-tab.stories.d.ts.map +0 -1
  82. package/dist/pd-timeline/pd-timeline.stories.d.ts +0 -56
  83. package/dist/pd-timeline/pd-timeline.stories.d.ts.map +0 -1
  84. package/dist/pd-timeline-wizard/pd-timeline-wizard.stories.d.ts +0 -54
  85. package/dist/pd-timeline-wizard/pd-timeline-wizard.stories.d.ts.map +0 -1
package/dist/index.d.ts CHANGED
@@ -12,9 +12,13 @@ export { PdTimelineWizard } from './pd-timeline-wizard/pd-timeline-wizard.js';
12
12
  export { PdLoadingState } from './pd-loading-state/pd-loading-state.js';
13
13
  export { PdNoticeBox } from './pd-notice-box/pd-notice-box.js';
14
14
  export { PdCodeSnippet } from './pd-code-snippet/pd-code-snippet.js';
15
+ export { PdBadgeOrder } from './pd-badge-order/pd-badge-order.js';
16
+ export { PdBadgeItem } from './pd-badge-order/pd-badge-item.js';
17
+ export { PdGallery } from './pd-gallery/pd-gallery.js';
18
+ export { PdGalleryLightbox } from './pd-gallery/pd-gallery-lightbox.js';
15
19
  export type { LoadingState, LoadingSubTask, } from './pd-loading-state/pd-loading-state.js';
16
20
  export type { CodeLanguage } from './pd-code-snippet/pd-code-snippet.js';
17
- export type { PdCollapseToggleEventDetail, PdEditLink, PdCollapseElement, NoticeType, NoticeVariant, TabHeader, } from './types.js';
21
+ export type { PdCollapseToggleEventDetail, PdEditLink, PdCollapseElement, NoticeType, NoticeVariant, TabHeader, PdBadge, PdBadgeChangeDetail, PdBadgeReorderDetail, GalleryImage, GalleryMode, GalleryOpenDetail, GalleryCloseDetail, GalleryNavigateDetail, } from './types.js';
18
22
  export { templates as beTemplates } from './generated/locales/be.js';
19
23
  export { templates as deTemplates } from './generated/locales/de.js';
20
24
  export { templates as enTemplates } from './generated/locales/en.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,YAAY,EACV,YAAY,EACZ,cAAc,GACf,MAAM,wCAAwC,CAAC;AAEhD,YAAY,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,YAAY,EACV,2BAA2B,EAC3B,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,SAAS,GACV,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,YAAY,EACV,YAAY,EACZ,cAAc,GACf,MAAM,wCAAwC,CAAC;AAEhD,YAAY,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,YAAY,EACV,2BAA2B,EAC3B,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,SAAS,EACT,OAAO,EACP,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
package/dist/index.js CHANGED
@@ -9,22 +9,31 @@ import './pd-panel.js';
9
9
  import './pd-panel-viewer.js';
10
10
  import './pd-timeline.js';
11
11
  import './pd-timeline-wizard.js';
12
- export { PdLoadingState } from './pd-loading-state/PdLoadingState.js';
12
+ import './pd-loading-state.js';
13
13
  import './pd-notice-box/pd-notice-box.js';
14
14
  import './pd-code-snippet/pd-code-snippet.js';
15
+ import './pd-badge-order.js';
16
+ import './pd-badge-order/pd-badge-item.js';
17
+ import './pd-gallery.js';
18
+ import './pd-gallery-lightbox.js';
15
19
  export { templates as beTemplates } from './locales/be.js';
16
20
  export { templates as deTemplates } from './locales/de.js';
17
21
  export { templates as enTemplates } from './locales/en.js';
22
+ export { PdBadgeItem } from './pd-badge-order/PdBadgeItem.js';
23
+ export { PdBadgeOrder } from './pd-badge-order/PdBadgeOrder.js';
18
24
  export { PdBoxView } from './pd-box-view/PdBoxView.js';
25
+ export { PdCodeSnippet } from './pd-code-snippet/PdCodeSnippet.js';
19
26
  export { PdCollapse } from './pd-collapse/PdCollapse.js';
20
27
  export { PdCollapseGroup } from './pd-collapse-group/PdCollapseGroup.js';
21
28
  export { PdEditContent } from './pd-edit-content/PdEditContent.js';
29
+ export { PdGallery } from './pd-gallery/PdGallery.js';
30
+ export { PdGalleryLightbox } from './pd-gallery/PdGalleryLightbox.js';
31
+ export { PdLoadingState } from './pd-loading-state/PdLoadingState.js';
22
32
  export { PdMoreInfo } from './pd-more-info/PdMoreInfo.js';
23
- export { PdResizeContent } from './pd-resize-content/PdResizeContent.js';
24
- export { PdTab } from './pd-tab/PdTab.js';
33
+ export { PdNoticeBox } from './pd-notice-box/PdNoticeBox.js';
25
34
  export { PdPanel } from './pd-panel-viewer/PdPanel.js';
26
35
  export { PdPanelViewer } from './pd-panel-viewer/PdPanelViewer.js';
36
+ export { PdResizeContent } from './pd-resize-content/PdResizeContent.js';
37
+ export { PdTab } from './pd-tab/PdTab.js';
27
38
  export { PdTimeline } from './pd-timeline/PdTimeline.js';
28
39
  export { PdTimelineWizard } from './pd-timeline-wizard/PdTimelineWizard.js';
29
- export { PdNoticeBox } from './pd-notice-box/PdNoticeBox.js';
30
- export { PdCodeSnippet } from './pd-code-snippet/PdCodeSnippet.js';
@@ -0,0 +1,41 @@
1
+ import { ReactiveController, ReactiveControllerHost } from 'lit';
2
+ export type DropArea = "active" | "available" | null;
3
+ /**
4
+ * Reactive controller for pointer-based drag & drop.
5
+ * Supports mouse + touch via Pointer Events with setPointerCapture.
6
+ *
7
+ * Touch: Long-press on drag-handle starts drag; short tap falls through to badge-action.
8
+ * Desktop: Drag starts after DRAG_THRESHOLD px movement on drag-handle.
9
+ */
10
+ export declare class DragController implements ReactiveController {
11
+ isDragging: boolean;
12
+ draggedId: string | null;
13
+ sourceArea: DropArea;
14
+ ghostX: number;
15
+ ghostY: number;
16
+ dropTarget: DropArea;
17
+ insertIndex: number;
18
+ private _host;
19
+ private _pointerId;
20
+ private _startX;
21
+ private _startY;
22
+ private _longPressTimer;
23
+ private _dragStarted;
24
+ private _isTouch;
25
+ private _ghostOffsetX;
26
+ private _ghostOffsetY;
27
+ constructor(host: ReactiveControllerHost & HTMLElement);
28
+ hostConnected(): void;
29
+ hostDisconnected(): void;
30
+ onPointerDown: (e: PointerEvent) => void;
31
+ private _onPointerMove;
32
+ private _onPointerUp;
33
+ private _onPointerCancel;
34
+ private _startDrag;
35
+ private _updateDropTarget;
36
+ private _calculateInsertIndex;
37
+ private _executeDrop;
38
+ private _cancelLongPress;
39
+ private _cleanup;
40
+ }
41
+ //# sourceMappingURL=DragController.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragController.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/DragController.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAOtE,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAC;AAErD;;;;;;GAMG;AACH,qBAAa,cAAe,YAAW,kBAAkB;IAEvD,UAAU,UAAS;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAChC,UAAU,EAAE,QAAQ,CAAQ;IAC5B,MAAM,SAAK;IACX,MAAM,SAAK;IACX,UAAU,EAAE,QAAQ,CAAQ;IAC5B,WAAW,SAAK;IAGhB,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,eAAe,CAA8C;IACrE,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,aAAa,CAAK;gBAEd,IAAI,EAAE,sBAAsB,GAAG,WAAW;IAKtD,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;IAQxB,aAAa,GAAI,GAAG,YAAY,KAAG,IAAI,CA6DrC;IAMF,OAAO,CAAC,cAAc,CAoCpB;IAMF,OAAO,CAAC,YAAY,CAWlB;IAMF,OAAO,CAAC,gBAAgB,CAKtB;IAMF,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,iBAAiB;IA2CzB,OAAO,CAAC,qBAAqB;IAkC7B,OAAO,CAAC,YAAY;IAkCpB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,QAAQ;CA6BjB"}
@@ -0,0 +1,239 @@
1
+ const DRAG_THRESHOLD = 5;
2
+ const LONG_PRESS_MS = 300;
3
+ class DragController {
4
+ constructor(host) {
5
+ // --- Public state (read by host for rendering) ---
6
+ this.isDragging = false;
7
+ this.draggedId = null;
8
+ this.sourceArea = null;
9
+ this.ghostX = 0;
10
+ this.ghostY = 0;
11
+ this.dropTarget = null;
12
+ this.insertIndex = 0;
13
+ this._pointerId = null;
14
+ this._startX = 0;
15
+ this._startY = 0;
16
+ this._longPressTimer = null;
17
+ this._dragStarted = false;
18
+ this._isTouch = false;
19
+ this._ghostOffsetX = 0;
20
+ this._ghostOffsetY = 0;
21
+ // ---------------------------------------------------------------------------
22
+ // Pointer down — start candidate
23
+ // ---------------------------------------------------------------------------
24
+ this.onPointerDown = (e) => {
25
+ if (e.button !== 0) return;
26
+ const path = e.composedPath();
27
+ const handle = path.find(
28
+ (el) => el instanceof HTMLElement && el.classList?.contains("drag-handle")
29
+ );
30
+ if (!handle) return;
31
+ const badgeItem = path.find(
32
+ (el) => el instanceof HTMLElement && el.tagName === "PD-BADGE-ITEM"
33
+ );
34
+ if (!badgeItem) return;
35
+ const badgeId = badgeItem.dataset.badgeId;
36
+ if (!badgeId) return;
37
+ const listEl = badgeItem.closest("[data-area]");
38
+ const area = listEl?.dataset.area;
39
+ if (area !== "active") return;
40
+ this._pointerId = e.pointerId;
41
+ this._startX = e.clientX;
42
+ this._startY = e.clientY;
43
+ this._isTouch = e.pointerType === "touch";
44
+ this._dragStarted = false;
45
+ this.draggedId = badgeId;
46
+ this.sourceArea = area;
47
+ const rect = badgeItem.getBoundingClientRect();
48
+ this._ghostOffsetX = e.clientX - rect.left;
49
+ this._ghostOffsetY = e.clientY - rect.top;
50
+ this._host.style.setProperty("--_ghost-width", `${rect.width}px`);
51
+ if (this._isTouch) {
52
+ this._longPressTimer = setTimeout(() => {
53
+ this._startDrag(e);
54
+ }, LONG_PRESS_MS);
55
+ }
56
+ e.currentTarget.setPointerCapture(e.pointerId);
57
+ const target = e.currentTarget;
58
+ target.addEventListener("pointermove", this._onPointerMove);
59
+ target.addEventListener("pointerup", this._onPointerUp);
60
+ target.addEventListener("pointercancel", this._onPointerCancel);
61
+ e.preventDefault();
62
+ };
63
+ // ---------------------------------------------------------------------------
64
+ // Pointer move
65
+ // ---------------------------------------------------------------------------
66
+ this._onPointerMove = (e) => {
67
+ if (e.pointerId !== this._pointerId) return;
68
+ const deltaX = e.clientX - this._startX;
69
+ const deltaY = e.clientY - this._startY;
70
+ if (!this._dragStarted) {
71
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
72
+ if (this._isTouch) {
73
+ if (distance > DRAG_THRESHOLD) {
74
+ this._cancelLongPress();
75
+ this._cleanup();
76
+ return;
77
+ }
78
+ } else {
79
+ if (distance > DRAG_THRESHOLD) {
80
+ this._startDrag(e);
81
+ } else {
82
+ return;
83
+ }
84
+ }
85
+ }
86
+ if (!this._dragStarted) return;
87
+ this.ghostX = e.clientX - this._ghostOffsetX;
88
+ this.ghostY = e.clientY - this._ghostOffsetY;
89
+ this._updateDropTarget(e.clientX, e.clientY);
90
+ this._host.requestUpdate();
91
+ };
92
+ // ---------------------------------------------------------------------------
93
+ // Pointer up
94
+ // ---------------------------------------------------------------------------
95
+ this._onPointerUp = (e) => {
96
+ if (e.pointerId !== this._pointerId) return;
97
+ this._cancelLongPress();
98
+ if (this._dragStarted) {
99
+ this._executeDrop();
100
+ }
101
+ this._cleanup();
102
+ this._host.requestUpdate();
103
+ };
104
+ // ---------------------------------------------------------------------------
105
+ // Pointer cancel
106
+ // ---------------------------------------------------------------------------
107
+ this._onPointerCancel = (e) => {
108
+ if (e.pointerId !== this._pointerId) return;
109
+ this._cancelLongPress();
110
+ this._cleanup();
111
+ this._host.requestUpdate();
112
+ };
113
+ this._host = host;
114
+ host.addController(this);
115
+ }
116
+ hostConnected() {
117
+ }
118
+ hostDisconnected() {
119
+ this._cleanup();
120
+ }
121
+ // ---------------------------------------------------------------------------
122
+ // Internal methods
123
+ // ---------------------------------------------------------------------------
124
+ _startDrag(e) {
125
+ this._cancelLongPress();
126
+ this._dragStarted = true;
127
+ this.isDragging = true;
128
+ this.ghostX = e.clientX - this._ghostOffsetX;
129
+ this.ghostY = e.clientY - this._ghostOffsetY;
130
+ this.dropTarget = this.sourceArea;
131
+ const host = this._host;
132
+ const ids = host.value || [];
133
+ this.insertIndex = ids.indexOf(this.draggedId);
134
+ this._host.requestUpdate();
135
+ }
136
+ _updateDropTarget(clientX, clientY) {
137
+ const host = this._host;
138
+ const activeList = host.shadowRoot?.querySelector(
139
+ "#active-list"
140
+ );
141
+ const availableList = host.shadowRoot?.querySelector(
142
+ "#available-list"
143
+ );
144
+ if (activeList) {
145
+ const activeRect = activeList.getBoundingClientRect();
146
+ if (clientX >= activeRect.left && clientX <= activeRect.right && clientY >= activeRect.top && clientY <= activeRect.bottom) {
147
+ this.dropTarget = "active";
148
+ this._calculateInsertIndex(activeList, clientY);
149
+ return;
150
+ }
151
+ }
152
+ if (availableList) {
153
+ const availRect = availableList.getBoundingClientRect();
154
+ if (clientX >= availRect.left && clientX <= availRect.right && clientY >= availRect.top && clientY <= availRect.bottom) {
155
+ this.dropTarget = "available";
156
+ this.insertIndex = 0;
157
+ return;
158
+ }
159
+ }
160
+ this.dropTarget = null;
161
+ }
162
+ _calculateInsertIndex(listEl, clientY) {
163
+ const items = listEl.querySelectorAll("pd-badge-item");
164
+ const host = this._host;
165
+ const ids = host.value || [];
166
+ const dragIdx = ids.indexOf(this.draggedId);
167
+ let visibleIdx = 0;
168
+ for (let i = 0; i < items.length; i++) {
169
+ const item = items[i];
170
+ if (item.dataset.badgeId === this.draggedId) continue;
171
+ const rect = item.getBoundingClientRect();
172
+ const midY = rect.top + rect.height / 2;
173
+ if (clientY > midY) {
174
+ visibleIdx++;
175
+ } else {
176
+ break;
177
+ }
178
+ }
179
+ if (this.sourceArea === "active" && dragIdx >= 0) {
180
+ this.insertIndex = visibleIdx >= dragIdx ? visibleIdx + 1 : visibleIdx;
181
+ } else {
182
+ this.insertIndex = visibleIdx;
183
+ }
184
+ this.insertIndex = Math.max(0, Math.min(this.insertIndex, ids.length));
185
+ }
186
+ _executeDrop() {
187
+ const host = this._host;
188
+ const ids = host.value || [];
189
+ const draggedId = this.draggedId;
190
+ if (this.dropTarget === "active" && this.sourceArea === "active") {
191
+ const oldIndex = ids.indexOf(draggedId);
192
+ if (oldIndex >= 0) {
193
+ let newIndex = this.insertIndex;
194
+ if (newIndex > oldIndex) {
195
+ newIndex = Math.min(newIndex - 1, ids.length - 1);
196
+ }
197
+ if (oldIndex !== newIndex) {
198
+ host.reorderBadge(oldIndex, newIndex);
199
+ }
200
+ }
201
+ } else if (this.dropTarget === "available" && this.sourceArea === "active") {
202
+ host.deactivateBadge(draggedId);
203
+ } else if (this.dropTarget === "active" && this.sourceArea === "available") {
204
+ host.insertBadgeAt(draggedId, this.insertIndex);
205
+ }
206
+ }
207
+ _cancelLongPress() {
208
+ if (this._longPressTimer !== null) {
209
+ clearTimeout(this._longPressTimer);
210
+ this._longPressTimer = null;
211
+ }
212
+ }
213
+ _cleanup() {
214
+ this._cancelLongPress();
215
+ const activeList = this._host.shadowRoot?.querySelector(
216
+ "#active-list"
217
+ );
218
+ if (activeList) {
219
+ activeList.removeEventListener("pointermove", this._onPointerMove);
220
+ activeList.removeEventListener("pointerup", this._onPointerUp);
221
+ activeList.removeEventListener("pointercancel", this._onPointerCancel);
222
+ if (this._pointerId !== null) {
223
+ try {
224
+ activeList.releasePointerCapture(this._pointerId);
225
+ } catch {
226
+ }
227
+ }
228
+ }
229
+ this.isDragging = false;
230
+ this.draggedId = null;
231
+ this.sourceArea = null;
232
+ this.dropTarget = null;
233
+ this.insertIndex = 0;
234
+ this._pointerId = null;
235
+ this._dragStarted = false;
236
+ }
237
+ }
238
+
239
+ export { DragController };
@@ -0,0 +1,31 @@
1
+ import { LitElement, nothing } from 'lit';
2
+ import { PdBadge } from './types.js';
3
+ /**
4
+ * Single badge item used inside PdBadgeOrder.
5
+ * Pure visual component — no own logic beyond rendering and dispatching action events.
6
+ *
7
+ * @tagname pd-badge-item
8
+ * @fires badge-action - Fired when the action button (+/← /delete) is clicked. Detail: { action, badgeId }
9
+ */
10
+ export declare class PdBadgeItem extends LitElement {
11
+ badge: PdBadge;
12
+ /** Position index (1-based) shown when numbered + active */
13
+ index: number;
14
+ /** Whether to show position number */
15
+ numbered: boolean;
16
+ /** Whether this badge is in the active list */
17
+ active: boolean;
18
+ disabled: boolean;
19
+ readonly: boolean;
20
+ /** Whether this badge is currently being dragged */
21
+ dragging: boolean;
22
+ /** Whether this is a ghost placeholder for the dragged item */
23
+ ghost: boolean;
24
+ static styles: import('lit').CSSResult;
25
+ render(): import('lit').TemplateResult<1> | typeof nothing;
26
+ private _renderActions;
27
+ private _onAdd;
28
+ private _onRemove;
29
+ private _onDelete;
30
+ }
31
+ //# sourceMappingURL=PdBadgeItem.d.ts.map
@@ -0,0 +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"}