@progressive-development/pd-content 1.0.1 → 1.0.3

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

@@ -0,0 +1,320 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '@progressive-development/pd-icon/pd-icon';
+import { pdIcons } from '@progressive-development/pd-icon';
+import { DEFAULT_BADGE_COLOR } from './types.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;
+};
+class PdBadgeItem extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.index = 0;
+    this.numbered = false;
+    this.active = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.dragging = false;
+    this.ghost = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+    }
+
+    .badge {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 0.75rem;
+      border-radius: var(--pd-badge-radius, var(--pd-radius-md, 6px));
+      background: var(--pd-default-lightest-col, #fff);
+      border: 1px solid var(--pd-default-disabled-light-col, #e5e7eb);
+      transition:
+        box-shadow 0.15s ease-out,
+        transform 0.15s ease-out,
+        opacity 0.15s ease-out;
+      cursor: default;
+      user-select: none;
+      min-height: var(--pd-badge-height, auto);
+      will-change: transform;
+    }
+
+    .badge:hover:not(.disabled):not(.readonly):not(.ghost) {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    .badge.dragging {
+      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));
+      z-index: 100;
+    }
+
+    .badge.ghost {
+      opacity: 0.35;
+      border-style: dashed;
+      background: var(
+        --pd-badge-ghost-color,
+        var(--pd-default-light-col, #f3f4f6)
+      );
+    }
+
+    .badge.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .badge.readonly {
+      cursor: default;
+    }
+
+    .number {
+      flex-shrink: 0;
+      width: 1.5rem;
+      text-align: center;
+      font-weight: 600;
+      font-size: 0.8rem;
+      color: var(--pd-default-font-title-col, #374151);
+      font-family: var(--pd-default-font-title-family, sans-serif);
+    }
+
+    .drag-handle {
+      flex-shrink: 0;
+      cursor: grab;
+      display: flex;
+      align-items: center;
+      touch-action: none;
+      --pd-icon-size: 1.1rem;
+      color: var(--pd-default-disabled-col, #9ca3af);
+      transition: color 0.15s;
+    }
+
+    .drag-handle:hover {
+      color: var(--pd-default-font-col, #374151);
+    }
+
+    .badge.disabled .drag-handle,
+    .badge.readonly .drag-handle {
+      cursor: default;
+      visibility: hidden;
+    }
+
+    .color-dot {
+      flex-shrink: 0;
+      width: 0.75rem;
+      height: 0.75rem;
+      border-radius: 50%;
+    }
+
+    .badge-icon {
+      flex-shrink: 0;
+      --pd-icon-size: 1.1rem;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.1rem;
+    }
+
+    .title {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--pd-default-font-title-col, #374151);
+      font-family: var(--pd-default-font-title-family, sans-serif);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .description {
+      font-size: 0.75rem;
+      color: var(--pd-default-font-col, #6b7280);
+      font-family: var(--pd-default-font-input-family, sans-serif);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .action-btn {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: 1px solid transparent;
+      border-radius: var(--pd-radius-sm, 4px);
+      cursor: pointer;
+      padding: 0.2rem;
+      transition:
+        background-color 0.15s,
+        border-color 0.15s;
+      --pd-icon-size: 1rem;
+      color: var(--pd-default-disabled-col, #9ca3af);
+    }
+
+    .action-btn:hover {
+      background: var(--pd-default-light-col, #f3f4f6);
+      border-color: var(--pd-default-disabled-light-col, #e5e7eb);
+      color: var(--pd-default-font-col, #374151);
+    }
+
+    .action-btn.delete-btn:hover {
+      color: var(--pd-default-error-col, #ef4444);
+      background: var(--pd-default-error-light-col, #fef2f2);
+      border-color: var(--pd-default-error-col, #ef4444);
+    }
+
+    .badge.disabled .action-btn,
+    .badge.readonly .action-btn {
+      display: none;
+    }
+  `;
+  }
+  render() {
+    if (!this.badge) return nothing;
+    const badgeClasses = {
+      badge: true,
+      active: this.active,
+      dragging: this.dragging,
+      ghost: this.ghost,
+      disabled: this.disabled,
+      readonly: this.readonly
+    };
+    const badgeColor = this.badge.color || DEFAULT_BADGE_COLOR;
+    return html`
+      <div
+        class=${classMap(badgeClasses)}
+        part="badge"
+        data-badge-id=${this.badge.id}
+      >
+        ${this.active && this.numbered ? html`<span class="number" part="badge-number">${this.index}</span>` : nothing}
+        ${this.active && !this.disabled && !this.readonly ? html`
+              <span class="drag-handle" part="drag-handle">
+                <pd-icon icon=${pdIcons.ICON_BURGER_MENU}></pd-icon>
+              </span>
+            ` : nothing}
+        ${this.badge.icon ? html`<pd-icon
+              class="badge-icon"
+              icon=${this.badge.icon}
+              part="badge-icon"
+            ></pd-icon>` : html`<span
+              class="color-dot"
+              style="background-color: ${badgeColor}"
+              part="badge-icon"
+            ></span>`}
+
+        <span class="content">
+          <span class="title" part="badge-title">${this.badge.title}</span>
+          ${this.badge.description ? html`<span class="description" part="badge-description"
+                >${this.badge.description}</span
+              >` : nothing}
+        </span>
+
+        ${this._renderActions()}
+      </div>
+    `;
+  }
+  _renderActions() {
+    if (this.disabled || this.readonly) return nothing;
+    if (this.active) {
+      return html`
+        <button
+          class="action-btn"
+          @click=${this._onRemove}
+          title="Entfernen"
+          aria-label="Badge entfernen"
+        >
+          <pd-icon icon=${pdIcons.ICON_ARROW_BACK}></pd-icon>
+        </button>
+      `;
+    }
+    return html`
+      <button
+        class="action-btn"
+        @click=${this._onAdd}
+        title="Hinzufügen"
+        aria-label="Badge hinzufügen"
+      >
+        <pd-icon icon=${pdIcons.ICON_ADD}></pd-icon>
+      </button>
+      ${this.badge.custom ? html`
+            <button
+              class="action-btn delete-btn"
+              @click=${this._onDelete}
+              title="Löschen"
+              aria-label="Badge löschen"
+            >
+              <pd-icon icon=${pdIcons.ICON_DELETE}></pd-icon>
+            </button>
+          ` : nothing}
+    `;
+  }
+  _onAdd(e) {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("badge-action", {
+        detail: { action: "add", badgeId: this.badge.id },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onRemove(e) {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("badge-action", {
+        detail: { action: "remove", badgeId: this.badge.id },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onDelete(e) {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("badge-action", {
+        detail: { action: "delete", badgeId: this.badge.id },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+}
+__decorateClass([
+  property({ type: Object })
+], PdBadgeItem.prototype, "badge");
+__decorateClass([
+  property({ type: Number })
+], PdBadgeItem.prototype, "index");
+__decorateClass([
+  property({ type: Boolean })
+], PdBadgeItem.prototype, "numbered");
+__decorateClass([
+  property({ type: Boolean })
+], PdBadgeItem.prototype, "active");
+__decorateClass([
+  property({ type: Boolean })
+], PdBadgeItem.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBadgeItem.prototype, "readonly");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBadgeItem.prototype, "dragging");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBadgeItem.prototype, "ghost");
+
+export { PdBadgeItem };

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"}