@progressive-development/pd-content 1.0.2 → 1.0.3

package/dist/pd-badge-order/PdBadgeOrder.d.ts

@@ -0,0 +1,68 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseUIInput } from '@progressive-development/pd-forms';
+import { PdBadge } from './types.js';
+/**
+ * Badge order component for selecting and sorting badges.
+ * Two areas: active (sorted, left/bottom) and available (pool, right/top).
+ *
+ * @tagname pd-badge-order
+ *
+ * @event pd-change - Fired when order or selection changes. Detail: { value: string[], badges: PdBadge[] }
+ * @event pd-reorder - Fired when only the order changes. Detail: { value: string[] }
+ * @event pd-form-element-change - Standard PD form event.
+ *
+ * @cssprop --pd-badge-order-gap - Gap between the two areas. Default: 1rem.
+ * @cssprop --pd-badge-order-min-height - Minimum height of badge lists. Default: 200px.
+ * @cssprop --pd-badge-transition-duration - FLIP animation duration. Default: 200ms.
+ */
+export declare class PdBadgeOrder extends PdBaseUIInput {
+    /** All available badges (the full pool). Set from outside. */
+    badges: PdBadge[];
+    /** Minimum number of active badges */
+    min?: number;
+    /** Maximum number of active badges */
+    max?: number;
+    /** Show position numbers in active list */
+    numbered: boolean;
+    /** Label for the active area */
+    activeLabel: string;
+    /** Label for the available area */
+    availableLabel: string;
+    /** Placeholder text when active list is empty */
+    emptyActiveText: string;
+    /** Placeholder text when available list is empty */
+    emptyAvailableText: string;
+    private _dragController;
+    private _activeListEl;
+    private _availableListEl;
+    /** Positions captured before DOM change for FLIP animation */
+    private _oldPositions;
+    static styles: CSSResultGroup;
+    aiAdopt(value: string): void;
+    /** @ts-expect-error Widening return type from string to string[] */
+    get value(): string[];
+    /** @ts-expect-error Widening param type from string to string[] | string */
+    set value(val: string[] | string);
+    _getParsedValue(): string[];
+    protected _getInitialValue(reset?: boolean): string;
+    connectedCallback(): void;
+    private _setupValidators;
+    private get _activeBadges();
+    private get _availableBadges();
+    private _captureBeforeChange;
+    private _addBadge;
+    private _removeBadge;
+    private _deleteBadge;
+    /** Reorder: move badge from oldIndex to newIndex within active list */
+    reorderBadge(oldIndex: number, newIndex: number): void;
+    /** Insert a badge from available into active list at a specific index */
+    insertBadgeAt(badgeId: string, index: number): void;
+    /** Move a badge from active to available (at drop) */
+    deactivateBadge(badgeId: string): void;
+    private _fireChangeEvents;
+    private _onBadgeAction;
+    updated(changedProps: PropertyValues): void;
+    render(): import('lit').TemplateResult<1>;
+    private _renderGhost;
+}
+//# sourceMappingURL=PdBadgeOrder.d.ts.map

package/dist/pd-badge-order/PdBadgeOrder.d.ts.map

@@ -0,0 +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"}

package/dist/pd-badge-order/PdBadgeOrder.js

@@ -0,0 +1,550 @@
+import { css, nothing, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { PdBaseUIInput } from '@progressive-development/pd-forms';
+import './pd-badge-item.js';
+import { capturePositions, animateFlip } from './flip-animator.js';
+import { DragController } from './DragController.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const BADGE_SELECTOR = "pd-badge-item";
+class PdBadgeOrder extends PdBaseUIInput {
+  constructor() {
+    super(...arguments);
+    this.badges = [];
+    this.numbered = true;
+    this.activeLabel = "Ausgewählt";
+    this.availableLabel = "Verfügbar";
+    this.emptyActiveText = "Badges hierher ziehen";
+    this.emptyAvailableText = "Keine weiteren Badges";
+    this._dragController = new DragController(this);
+    /** Positions captured before DOM change for FLIP animation */
+    this._oldPositions = null;
+    // ---------------------------------------------------------------------------
+    // Event handlers
+    // ---------------------------------------------------------------------------
+    this._onBadgeAction = (e) => {
+      const { action, badgeId } = e.detail;
+      switch (action) {
+        case "add":
+          this._addBadge(badgeId);
+          break;
+        case "remove":
+          this._removeBadge(badgeId);
+          break;
+        case "delete":
+          this._deleteBadge(badgeId);
+          break;
+      }
+    };
+  }
+  static {
+    this.styles = [
+      PdBaseUIInput.styles,
+      css`
+      :host {
+        display: block;
+        --pd-input-field-width: 100%;
+      }
+
+      .badge-order-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--pd-badge-order-gap, 1rem);
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .list-section {
+        display: flex;
+        flex-direction: column;
+        min-height: var(--pd-badge-order-min-height, 200px);
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0;
+        font-family: var(--pd-default-font-title-family, sans-serif);
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: var(--pd-default-font-title-col, #374151);
+      }
+
+      .section-count {
+        font-weight: 400;
+        color: var(--pd-default-disabled-col, #9ca3af);
+        font-size: 0.75rem;
+      }
+
+      .badge-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        flex: 1;
+        padding: 0.5rem;
+        border: 1px solid var(--pd-default-disabled-light-col, #e5e7eb);
+        border-radius: var(--pd-radius-md, 6px);
+        background: var(--pd-default-lightest-col, #fafafa);
+        overflow-y: auto;
+        position: relative;
+        transition: background-color 0.2s;
+      }
+
+      .badge-list.drag-over {
+        background: color-mix(
+          in srgb,
+          var(--pd-badge-drop-highlight, var(--pd-default-col, #3b82f6)) 8%,
+          var(--pd-default-lightest-col, #fafafa)
+        );
+      }
+
+      .empty-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        min-height: 80px;
+        color: var(--pd-default-disabled-col, #9ca3af);
+        font-size: 0.8rem;
+        font-style: italic;
+        text-align: center;
+        padding: 1rem;
+      }
+
+      .drop-indicator {
+        height: 2px;
+        background: var(
+          --pd-badge-drop-highlight,
+          var(--pd-default-col, #3b82f6)
+        );
+        border-radius: 1px;
+        transition: opacity 0.15s;
+        flex-shrink: 0;
+      }
+
+      /* Ghost element for drag */
+      .drag-ghost {
+        position: fixed;
+        pointer-events: none;
+        z-index: 9999;
+        opacity: 0.9;
+        transform: scale(var(--pd-badge-drag-scale, 1.03));
+        box-shadow: var(--pd-badge-drag-shadow, 0 8px 24px rgba(0, 0, 0, 0.15));
+        will-change: transform;
+        width: var(--_ghost-width, 300px);
+      }
+
+      /* Disabled state */
+      :host([disabled]) .badge-order-container {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      :host([readonly]) .badge-order-container {
+        pointer-events: none;
+      }
+
+      /* Mobile: stacked layout, available on top */
+      @media (max-width: 767px) {
+        .badge-order-container {
+          grid-template-columns: 1fr;
+        }
+
+        .list-section.available-section {
+          order: -1;
+        }
+      }
+    `
+    ];
+  }
+  // ---------------------------------------------------------------------------
+  // AI adoption: supports enriched format { value: string[], badges: PdBadge[] }
+  // ---------------------------------------------------------------------------
+  aiAdopt(value) {
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed) && Array.isArray(parsed.value)) {
+        if (Array.isArray(parsed.badges) && parsed.badges.length > 0) {
+          const existingMap = new Map(this.badges.map((b) => [b.id, b]));
+          for (const badge of parsed.badges) {
+            existingMap.set(badge.id, badge);
+          }
+          this.badges = [...existingMap.values()];
+        }
+        this.value = parsed.value;
+        this._fireChangeEvents();
+        return;
+      }
+    } catch {
+    }
+    super.aiAdopt(value);
+  }
+  // ---------------------------------------------------------------------------
+  // Value handling: string[] serialized as JSON string
+  // ---------------------------------------------------------------------------
+  /** @ts-expect-error Widening return type from string to string[] */
+  get value() {
+    try {
+      const parsed = JSON.parse(this._value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  /** @ts-expect-error Widening param type from string to string[] | string */
+  set value(val) {
+    const ids = Array.isArray(val) ? val : typeof val === "string" && val.startsWith("[") ? JSON.parse(val) : [];
+    const jsonVal = JSON.stringify(ids);
+    if (this._value !== jsonVal) {
+      this._handleChangedValue(jsonVal, void 0, true);
+    }
+  }
+  _getParsedValue() {
+    return this.value;
+  }
+  _getInitialValue(reset) {
+    return reset ? this.initValue || "[]" : this.initValue || this._value || "[]";
+  }
+  // ---------------------------------------------------------------------------
+  // Validators
+  // ---------------------------------------------------------------------------
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupValidators();
+  }
+  _setupValidators() {
+    this._validators = [];
+    const requiredBadgeValidator = (val) => {
+      if (!this.required) return null;
+      try {
+        const ids = JSON.parse(val);
+        return Array.isArray(ids) && ids.length === 0 ? "Mindestens eine Badge auswählen" : null;
+      } catch {
+        return "Mindestens eine Badge auswählen";
+      }
+    };
+    const minValidator = (val) => {
+      if (this.min === void 0) return null;
+      try {
+        const ids = JSON.parse(val);
+        return Array.isArray(ids) && ids.length < this.min ? `Mindestens ${this.min} Badges auswählen` : null;
+      } catch {
+        return null;
+      }
+    };
+    const maxValidator = (val) => {
+      if (this.max === void 0) return null;
+      try {
+        const ids = JSON.parse(val);
+        return Array.isArray(ids) && ids.length > this.max ? `Maximal ${this.max} Badges erlaubt` : null;
+      } catch {
+        return null;
+      }
+    };
+    this._validators.push(requiredBadgeValidator, minValidator, maxValidator);
+  }
+  // ---------------------------------------------------------------------------
+  // Computed properties
+  // ---------------------------------------------------------------------------
+  get _activeBadges() {
+    const ids = this.value;
+    const badgeMap = new Map(this.badges.map((b) => [b.id, b]));
+    return ids.map((id) => badgeMap.get(id)).filter((b) => !!b);
+  }
+  get _availableBadges() {
+    const activeIds = new Set(this.value);
+    return this.badges.filter((b) => !activeIds.has(b.id));
+  }
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+  _captureBeforeChange() {
+    if (this._activeListEl) {
+      this._oldPositions = capturePositions(this._activeListEl, BADGE_SELECTOR);
+    }
+    if (this._availableListEl) {
+      const availPositions = capturePositions(
+        this._availableListEl,
+        BADGE_SELECTOR
+      );
+      if (this._oldPositions) {
+        availPositions.forEach(
+          (rect, key) => this._oldPositions.set(key, rect)
+        );
+      } else {
+        this._oldPositions = availPositions;
+      }
+    }
+  }
+  _addBadge(badgeId) {
+    if (this.disabled || this.readonly) return;
+    const ids = this.value;
+    if (ids.includes(badgeId)) return;
+    if (this.max !== void 0 && ids.length >= this.max) return;
+    this._captureBeforeChange();
+    this.value = [...ids, badgeId];
+    this._fireChangeEvents();
+  }
+  _removeBadge(badgeId) {
+    if (this.disabled || this.readonly) return;
+    const ids = this.value;
+    this._captureBeforeChange();
+    this.value = ids.filter((id) => id !== badgeId);
+    this._fireChangeEvents();
+  }
+  _deleteBadge(badgeId) {
+    if (this.disabled || this.readonly) return;
+    const badge = this.badges.find((b) => b.id === badgeId);
+    if (!badge?.custom) return;
+    this._captureBeforeChange();
+    const ids = this.value;
+    if (ids.includes(badgeId)) {
+      this.value = ids.filter((id) => id !== badgeId);
+    }
+    this.badges = this.badges.filter((b) => b.id !== badgeId);
+    this.dispatchEvent(
+      new CustomEvent("pd-badge-deleted", {
+        detail: { badge },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this._fireChangeEvents();
+  }
+  /** Reorder: move badge from oldIndex to newIndex within active list */
+  reorderBadge(oldIndex, newIndex) {
+    const ids = [...this.value];
+    if (oldIndex < 0 || oldIndex >= ids.length || newIndex < 0 || newIndex >= ids.length)
+      return;
+    this._captureBeforeChange();
+    const [moved] = ids.splice(oldIndex, 1);
+    ids.splice(newIndex, 0, moved);
+    this.value = ids;
+    this.dispatchEvent(
+      new CustomEvent("pd-reorder", {
+        detail: { value: ids },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this._fireChangeEvents();
+  }
+  /** Insert a badge from available into active list at a specific index */
+  insertBadgeAt(badgeId, index) {
+    if (this.disabled || this.readonly) return;
+    const ids = this.value;
+    if (ids.includes(badgeId)) return;
+    if (this.max !== void 0 && ids.length >= this.max) return;
+    this._captureBeforeChange();
+    const newIds = [...ids];
+    const insertIdx = Math.max(0, Math.min(index, newIds.length));
+    newIds.splice(insertIdx, 0, badgeId);
+    this.value = newIds;
+    this._fireChangeEvents();
+  }
+  /** Move a badge from active to available (at drop) */
+  deactivateBadge(badgeId) {
+    this._removeBadge(badgeId);
+  }
+  _fireChangeEvents() {
+    const detail = {
+      value: this.value,
+      badges: this.badges
+    };
+    this.dispatchEvent(
+      new CustomEvent("pd-change", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (this._oldPositions) {
+      const oldPos = this._oldPositions;
+      this._oldPositions = null;
+      requestAnimationFrame(() => {
+        if (this._activeListEl) {
+          animateFlip(this._activeListEl, BADGE_SELECTOR, oldPos);
+        }
+        if (this._availableListEl) {
+          animateFlip(this._availableListEl, BADGE_SELECTOR, oldPos);
+        }
+      });
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  render() {
+    const activeBadges = this._activeBadges;
+    const availableBadges = this._availableBadges;
+    const drag = this._dragController;
+    return html`
+      ${this._renderLabel("badge-order")}
+
+      <div
+        class="badge-order-container"
+        part="container"
+        @badge-action=${this._onBadgeAction}
+      >
+        <!-- Active list -->
+        <div class="list-section active-section">
+          <div class="section-header">
+            <span>
+              <slot name="active-header">${this.activeLabel}</slot>
+              <span class="section-count">(${activeBadges.length})</span>
+            </span>
+          </div>
+          <div
+            id="active-list"
+            class=${classMap({
+      "badge-list": true,
+      "drag-over": drag.isDragging && drag.dropTarget === "active"
+    })}
+            part="active-list"
+            role="listbox"
+            aria-label="${this.activeLabel} (${activeBadges.length})"
+            data-area="active"
+            @pointerdown=${drag.onPointerDown}
+          >
+            ${activeBadges.length > 0 ? activeBadges.map(
+      (badge, i) => html`
+                    ${drag.isDragging && drag.dropTarget === "active" && drag.insertIndex === i ? html`<div class="drop-indicator"></div>` : nothing}
+                    <pd-badge-item
+                      .badge=${badge}
+                      .index=${i + 1}
+                      ?numbered=${this.numbered}
+                      ?active=${true}
+                      ?disabled=${this.disabled}
+                      ?readonly=${this.readonly}
+                      ?ghost=${drag.isDragging && drag.draggedId === badge.id}
+                      data-badge-id=${badge.id}
+                      role="option"
+                      aria-label="${badge.title}, Position ${i + 1}"
+                    ></pd-badge-item>
+                  `
+    ) : html`
+                  <div class="empty-placeholder">
+                    <slot name="empty-active">${this.emptyActiveText}</slot>
+                  </div>
+                `}
+            ${drag.isDragging && drag.dropTarget === "active" && drag.insertIndex === activeBadges.length ? html`<div class="drop-indicator"></div>` : nothing}
+          </div>
+        </div>
+
+        <!-- Available list -->
+        <div class="list-section available-section">
+          <div class="section-header">
+            <span>
+              <slot name="available-header">${this.availableLabel}</slot>
+              <span class="section-count">(${availableBadges.length})</span>
+            </span>
+          </div>
+          <div
+            id="available-list"
+            class=${classMap({
+      "badge-list": true,
+      "drag-over": drag.isDragging && drag.dropTarget === "available"
+    })}
+            part="available-list"
+            role="listbox"
+            aria-label="${this.availableLabel} (${availableBadges.length})"
+            data-area="available"
+          >
+            ${availableBadges.length > 0 ? availableBadges.map(
+      (badge) => html`
+                    <pd-badge-item
+                      .badge=${badge}
+                      ?disabled=${this.disabled}
+                      ?readonly=${this.readonly}
+                      data-badge-id=${badge.id}
+                      role="option"
+                      aria-label="${badge.title}"
+                    ></pd-badge-item>
+                  `
+    ) : html`
+                  <div class="empty-placeholder">
+                    <slot name="empty-available"
+                      >${this.emptyAvailableText}</slot
+                    >
+                  </div>
+                `}
+          </div>
+        </div>
+      </div>
+
+      ${this._renderGhost()} ${this._renderErrorMsg()}
+    `;
+  }
+  _renderGhost() {
+    const drag = this._dragController;
+    if (!drag.isDragging || !drag.draggedId) return nothing;
+    const badge = this.badges.find((b) => b.id === drag.draggedId);
+    if (!badge) return nothing;
+    const idx = this.value.indexOf(drag.draggedId);
+    return html`
+      <div
+        class="drag-ghost"
+        style="left: ${drag.ghostX}px; top: ${drag.ghostY}px;"
+      >
+        <pd-badge-item
+          .badge=${badge}
+          .index=${idx >= 0 ? idx + 1 : 0}
+          ?numbered=${this.numbered && idx >= 0}
+          ?active=${idx >= 0}
+          ?dragging=${true}
+        ></pd-badge-item>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Array, attribute: false })
+], PdBadgeOrder.prototype, "badges");
+__decorateClass([
+  property({ type: Number })
+], PdBadgeOrder.prototype, "min");
+__decorateClass([
+  property({ type: Number })
+], PdBadgeOrder.prototype, "max");
+__decorateClass([
+  property({ type: Boolean })
+], PdBadgeOrder.prototype, "numbered");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "activeLabel");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "availableLabel");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "emptyActiveText");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "emptyAvailableText");
+__decorateClass([
+  state()
+], PdBadgeOrder.prototype, "_dragController");
+__decorateClass([
+  query("#active-list")
+], PdBadgeOrder.prototype, "_activeListEl");
+__decorateClass([
+  query("#available-list")
+], PdBadgeOrder.prototype, "_availableListEl");
+
+export { PdBadgeOrder };

package/dist/pd-badge-order/flip-animator.d.ts

@@ -0,0 +1,30 @@
+/**
+ * FLIP animation utility for smooth badge reordering.
+ *
+ * FLIP = First, Last, Invert, Play
+ * 1. First:  Capture positions before DOM change (capturePositions)
+ * 2. Last:   DOM change happens (Lit re-render)
+ * 3. Invert: Calculate deltas, apply inverse transform
+ * 4. Play:   Animate transform back to none
+ */
+/**
+ * Capture current positions of all matching elements in a container.
+ * Call this BEFORE the DOM change.
+ *
+ * @returns Map of badge-id → DOMRect
+ */
+export declare function capturePositions(container: HTMLElement, selector: string): Map<string, DOMRect>;
+/**
+ * Animate elements from their old positions to their new positions using FLIP.
+ * Call this AFTER the DOM change (e.g., in updated() or requestAnimationFrame).
+ *
+ * @param container - The container element holding the badges
+ * @param selector - CSS selector for badge elements
+ * @param oldPositions - Positions captured before the DOM change
+ * @param options - Animation options
+ */
+export declare function animateFlip(container: HTMLElement, selector: string, oldPositions: Map<string, DOMRect>, options?: {
+    duration?: number;
+    easing?: string;
+}): void;
+//# sourceMappingURL=flip-animator.d.ts.map

package/dist/pd-badge-order/flip-animator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-animator.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/flip-animator.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,MAAM,GACf,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAYtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACzB,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,MAAM,EAChB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,EAClC,OAAO,GAAE;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACZ,GACL,IAAI,CAkCN"}

package/dist/pd-badge-order/flip-animator.js

@@ -0,0 +1,39 @@
+function capturePositions(container, selector) {
+  const positions = /* @__PURE__ */ new Map();
+  const elements = container.querySelectorAll(selector);
+  elements.forEach((el) => {
+    const id = el.dataset.badgeId;
+    if (id) {
+      positions.set(id, el.getBoundingClientRect());
+    }
+  });
+  return positions;
+}
+function animateFlip(container, selector, oldPositions, options = {}) {
+  const { duration = 200, easing = "ease-in-out" } = options;
+  const elements = container.querySelectorAll(selector);
+  elements.forEach((el) => {
+    const htmlEl = el;
+    const id = htmlEl.dataset.badgeId;
+    if (!id) return;
+    const oldPos = oldPositions.get(id);
+    if (!oldPos) return;
+    const newPos = htmlEl.getBoundingClientRect();
+    const deltaX = oldPos.left - newPos.left;
+    const deltaY = oldPos.top - newPos.top;
+    if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) return;
+    htmlEl.animate(
+      [
+        { transform: `translate(${deltaX}px, ${deltaY}px)` },
+        { transform: "translate(0, 0)" }
+      ],
+      {
+        duration,
+        easing,
+        fill: "none"
+      }
+    );
+  });
+}
+
+export { animateFlip, capturePositions };

package/dist/pd-badge-order/pd-badge-item.d.ts

@@ -0,0 +1,3 @@
+import { PdBadgeItem } from './PdBadgeItem.js';
+export { PdBadgeItem };
+//# sourceMappingURL=pd-badge-item.d.ts.map