@progressive-development/pd-content 1.0.3 → 1.1.1

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

@@ -1,9 +1,11 @@
-import { css, nothing, html } from 'lit';
+import { LitElement, 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 '@progressive-development/pd-forms/pd-button';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
 import './pd-badge-item.js';
-import { capturePositions, animateFlip } from './flip-animator.js';
+import { animateFlip, capturePositions } from './flip-animator.js';
 import { DragController } from './DragController.js';
 
 var __defProp = Object.defineProperty;
@@ -16,21 +18,32 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const BADGE_SELECTOR = "pd-badge-item";
-class PdBadgeOrder extends PdBaseUIInput {
+class PdBadgeOrder extends LitElement {
   constructor() {
     super(...arguments);
-    this.badges = [];
+    this.label = "";
+    this.valueName = "";
     this.numbered = true;
     this.activeLabel = "Ausgewählt";
     this.availableLabel = "Verfügbar";
     this.emptyActiveText = "Badges hierher ziehen";
     this.emptyAvailableText = "Keine weiteren Badges";
+    this.editable = "";
+    this.creatable = "";
+    this.required = false;
+    this.disabled = false;
+    this.readonly = false;
+    this._badges = [];
+    this._activeIds = [];
+    /** Whether initial data has been applied. */
+    this._initialized = false;
+    this._error = "";
     this._dragController = new DragController(this);
+    /** Badge ID that should auto-enter edit mode after next render. */
+    this._autoEditBadgeId = "";
     /** Positions captured before DOM change for FLIP animation */
     this._oldPositions = null;
-    // ---------------------------------------------------------------------------
-    // Event handlers
-    // ---------------------------------------------------------------------------
+    // ── Event handlers ────────────────────────────────────────────────────────
     this._onBadgeAction = (e) => {
       const { action, badgeId } = e.detail;
       switch (action) {
@@ -43,18 +56,95 @@ class PdBadgeOrder extends PdBaseUIInput {
         case "delete":
           this._deleteBadge(badgeId);
           break;
+        case "edit-save":
+          this._editBadge(
+            badgeId,
+            e.detail.title,
+            e.detail.description
+          );
+          break;
       }
     };
   }
+  // ── Public API ────────────────────────────────────────────────────────────
+  /** Current active IDs (read-only). */
+  get value() {
+    return this._activeIds;
+  }
+  /** Current badges (read-only). */
+  get badges() {
+    return this._badges;
+  }
+  /** Set badges and active IDs from outside. Marks as initialized. */
+  setBadges(badges, activeIds) {
+    this._badges = [...badges];
+    this._activeIds = [...activeIds];
+    this._initialized = true;
+  }
+  /** Reset to empty state. Allows initialBadges/initialValue to re-apply on next render. */
+  reset() {
+    this._badges = [];
+    this._activeIds = [];
+    this._initialized = false;
+    this._error = "";
+  }
+  /** Validate current state. Sets error message visible if invalid. Returns true if valid. */
+  validate() {
+    const count = this._activeIds.length;
+    if (this.required && count === 0) {
+      this._error = "Mindestens eine Badge auswählen";
+      return false;
+    }
+    if (this.min !== void 0 && count < this.min) {
+      this._error = `Mindestens ${this.min} Badges auswählen`;
+      return false;
+    }
+    if (this.max !== void 0 && count > this.max) {
+      this._error = `Maximal ${this.max} Badges erlaubt`;
+      return false;
+    }
+    this._error = "";
+    return true;
+  }
   static {
+    // ── Styles ────────────────────────────────────────────────────────────────
     this.styles = [
-      PdBaseUIInput.styles,
       css`
       :host {
         display: block;
         --pd-input-field-width: 100%;
       }
 
+      .label-header {
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .label-header label {
+        font-size: var(--pd-input-label-font-size, 0.9em);
+        color: var(--pd-input-label-col, inherit);
+      }
+
+      .label-icons {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .ai-trigger {
+        --pd-icon-size: 22px;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+      }
+      .ai-trigger:hover,
+      .ai-trigger:focus-visible {
+        opacity: 1;
+      }
+
       .badge-order-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -73,7 +163,8 @@ class PdBadgeOrder extends PdBaseUIInput {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0.5rem 0;
+        min-height: 2rem;
+        padding: 0.25rem 0;
         font-family: var(--pd-default-font-title-family, sans-serif);
         font-size: 0.8rem;
         font-weight: 600;
@@ -132,7 +223,6 @@ class PdBadgeOrder extends PdBaseUIInput {
         flex-shrink: 0;
       }
 
-      /* Ghost element for drag */
       .drag-ghost {
         position: fixed;
         pointer-events: none;
@@ -144,7 +234,6 @@ class PdBadgeOrder extends PdBaseUIInput {
         width: var(--_ghost-width, 300px);
       }
 
-      /* Disabled state */
       :host([disabled]) .badge-order-container {
         opacity: 0.5;
         pointer-events: none;
@@ -154,12 +243,27 @@ class PdBadgeOrder extends PdBaseUIInput {
         pointer-events: none;
       }
 
-      /* Mobile: stacked layout, available on top */
+      .error-box {
+        display: block;
+        color: var(--pd-default-error-col, #dc2626);
+        background: var(--pd-default-error-light-col, #fef2f2);
+        border: 1px solid var(--pd-default-error-col, #dc2626);
+        border-radius: var(--pd-radius-md, 6px);
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 0.35rem;
+      }
+      .error-box p {
+        margin: 0;
+        padding: var(--pd-spacing-xs, 0.25rem) var(--pd-spacing-xs, 0.25rem)
+          var(--pd-spacing-xs, 0.25rem) var(--pd-spacing-sm, 0.5rem);
+        font-size: 0.8rem;
+      }
+
       @media (max-width: 767px) {
         .badge-order-container {
           grid-template-columns: 1fr;
         }
-
         .list-section.available-section {
           order: -1;
         }
@@ -167,107 +271,53 @@ class PdBadgeOrder extends PdBaseUIInput {
     `
     ];
   }
-  // ---------------------------------------------------------------------------
-  // 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;
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  update(changedProps) {
+    if (!this._initialized) {
+      const hasBadges = changedProps.has("initialBadges") && this.initialBadges?.length;
+      const hasValue = changedProps.has("initialValue") && this.initialValue?.length;
+      if (hasBadges || hasValue) {
+        this._badges = [...this.initialBadges ?? []];
+        this._activeIds = [...this.initialValue ?? []];
+        this._initialized = true;
       }
-    } catch {
     }
-    super.aiAdopt(value);
+    super.update(changedProps);
   }
-  // ---------------------------------------------------------------------------
-  // 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 [];
+  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);
+        }
+      });
     }
-  }
-  /** @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);
+    if (this._autoEditBadgeId) {
+      const id = this._autoEditBadgeId;
+      this._autoEditBadgeId = "";
+      requestAnimationFrame(() => {
+        const selector = `pd-badge-item[data-badge-id="${id}"]`;
+        const item = this._activeListEl?.querySelector(selector) || this._availableListEl?.querySelector(selector);
+        item?.startEditing();
+      });
     }
   }
-  _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
-  // ---------------------------------------------------------------------------
+  // ── Computed ──────────────────────────────────────────────────────────────
   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);
+    const badgeMap = new Map(this._badges.map((b) => [b.id, b]));
+    return this._activeIds.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));
+    const activeIds = new Set(this._activeIds);
+    return this._badges.filter((b) => !activeIds.has(b.id));
   }
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
+  // ── Actions ───────────────────────────────────────────────────────────────
   _captureBeforeChange() {
     if (this._activeListEl) {
       this._oldPositions = capturePositions(this._activeListEl, BADGE_SELECTOR);
@@ -286,32 +336,42 @@ class PdBadgeOrder extends PdBaseUIInput {
       }
     }
   }
+  _createBadge(area = "active") {
+    if (this.disabled || this.readonly) return;
+    const id = `custom-${Date.now()}`;
+    const badge = { id, title: "", custom: true };
+    this._captureBeforeChange();
+    this._badges = [...this._badges, badge];
+    if (area === "active") {
+      if (this.max !== void 0 && this._activeIds.length >= this.max) return;
+      this._activeIds = [...this._activeIds, id];
+    }
+    this._autoEditBadgeId = id;
+    this._fireChangeEvents();
+  }
   _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;
+    if (this._activeIds.includes(badgeId)) return;
+    if (this.max !== void 0 && this._activeIds.length >= this.max) return;
     this._captureBeforeChange();
-    this.value = [...ids, badgeId];
+    this._activeIds = [...this._activeIds, 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._activeIds = this._activeIds.filter((id) => id !== badgeId);
     this._fireChangeEvents();
   }
   _deleteBadge(badgeId) {
     if (this.disabled || this.readonly) return;
-    const badge = this.badges.find((b) => b.id === badgeId);
+    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);
+    if (this._activeIds.includes(badgeId)) {
+      this._activeIds = this._activeIds.filter((id) => id !== badgeId);
     }
-    this.badges = this.badges.filter((b) => b.id !== badgeId);
+    this._badges = this._badges.filter((b) => b.id !== badgeId);
     this.dispatchEvent(
       new CustomEvent("pd-badge-deleted", {
         detail: { badge },
@@ -321,15 +381,28 @@ class PdBadgeOrder extends PdBaseUIInput {
     );
     this._fireChangeEvents();
   }
+  _editBadge(badgeId, title, description) {
+    this._badges = this._badges.map(
+      (b) => b.id === badgeId ? { ...b, title, description: description || void 0 } : b
+    );
+    this.dispatchEvent(
+      new CustomEvent("pd-badge-edited", {
+        detail: { badge: this._badges.find((b) => b.id === badgeId) },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this._fireChangeEvents();
+  }
   /** Reorder: move badge from oldIndex to newIndex within active list */
   reorderBadge(oldIndex, newIndex) {
-    const ids = [...this.value];
+    const ids = [...this._activeIds];
     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._activeIds = ids;
     this.dispatchEvent(
       new CustomEvent("pd-reorder", {
         detail: { value: ids },
@@ -342,14 +415,13 @@ class PdBadgeOrder extends PdBaseUIInput {
   /** 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;
+    if (this._activeIds.includes(badgeId)) return;
+    if (this.max !== void 0 && this._activeIds.length >= this.max) return;
     this._captureBeforeChange();
-    const newIds = [...ids];
+    const newIds = [...this._activeIds];
     const insertIdx = Math.max(0, Math.min(index, newIds.length));
     newIds.splice(insertIdx, 0, badgeId);
-    this.value = newIds;
+    this._activeIds = newIds;
     this._fireChangeEvents();
   }
   /** Move a badge from active to available (at drop) */
@@ -357,45 +429,47 @@ class PdBadgeOrder extends PdBaseUIInput {
     this._removeBadge(badgeId);
   }
   _fireChangeEvents() {
+    if (this._error) this.validate();
     const detail = {
-      value: this.value,
-      badges: this.badges
+      value: this._activeIds,
+      badges: this._badges
     };
     this.dispatchEvent(
-      new CustomEvent("pd-change", {
+      new CustomEvent("pd-badge-selection-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);
+  // ── AI Trigger ────────────────────────────────────────────────────────────
+  _onAiTrigger() {
+    this.dispatchEvent(
+      new CustomEvent("pd-ai-trigger", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value: JSON.stringify(this._activeIds),
+          valueName: this.valueName,
+          aiOptions: this.aiOptions
         }
-      });
+      })
+    );
+  }
+  _onAiTriggerKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._onAiTrigger();
     }
   }
-  // ---------------------------------------------------------------------------
-  // Render
-  // ---------------------------------------------------------------------------
+  // ── Render ────────────────────────────────────────────────────────────────
   render() {
     const activeBadges = this._activeBadges;
     const availableBadges = this._availableBadges;
     const drag = this._dragController;
+    const error = this._error;
     return html`
-      ${this._renderLabel("badge-order")}
+      ${this._renderLabel()}
 
       <div
         class="badge-order-container"
@@ -409,6 +483,16 @@ class PdBadgeOrder extends PdBaseUIInput {
               <slot name="active-header">${this.activeLabel}</slot>
               <span class="section-count">(${activeBadges.length})</span>
             </span>
+            ${(this.creatable === "active" || this.creatable === "all") && !this.disabled && !this.readonly ? html`
+                  <pd-button
+                    outline
+                    size="sm"
+                    text="Hinzufügen"
+                    icon=${pdIcons.ICON_ADD}
+                    @button-clicked=${() => this._createBadge("active")}
+                    part="create-button"
+                  ></pd-button>
+                ` : nothing}
           </div>
           <div
             id="active-list"
@@ -430,6 +514,7 @@ class PdBadgeOrder extends PdBaseUIInput {
                       .index=${i + 1}
                       ?numbered=${this.numbered}
                       ?active=${true}
+                      ?editable=${this.editable === "active" || this.editable === "all"}
                       ?disabled=${this.disabled}
                       ?readonly=${this.readonly}
                       ?ghost=${drag.isDragging && drag.draggedId === badge.id}
@@ -454,6 +539,16 @@ class PdBadgeOrder extends PdBaseUIInput {
               <slot name="available-header">${this.availableLabel}</slot>
               <span class="section-count">(${availableBadges.length})</span>
             </span>
+            ${(this.creatable === "available" || this.creatable === "all") && !this.disabled && !this.readonly ? html`
+                  <pd-button
+                    outline
+                    size="sm"
+                    text="Hinzufügen"
+                    icon=${pdIcons.ICON_ADD}
+                    @button-clicked=${() => this._createBadge("available")}
+                    part="create-button"
+                  ></pd-button>
+                ` : nothing}
           </div>
           <div
             id="available-list"
@@ -470,6 +565,7 @@ class PdBadgeOrder extends PdBaseUIInput {
       (badge) => html`
                     <pd-badge-item
                       .badge=${badge}
+                      ?editable=${this.editable === "available" || this.editable === "all"}
                       ?disabled=${this.disabled}
                       ?readonly=${this.readonly}
                       data-badge-id=${badge.id}
@@ -488,15 +584,38 @@ class PdBadgeOrder extends PdBaseUIInput {
         </div>
       </div>
 
-      ${this._renderGhost()} ${this._renderErrorMsg()}
+      ${this._renderGhost()}
+      ${error ? html`<div class="error-box"><p>${error}</p></div>` : nothing}
+    `;
+  }
+  _renderLabel() {
+    if (!this.label && !this.aiOptions) return nothing;
+    return html`
+      <div class="label-header">
+        <label>${this.label}${this.required && this.label ? "*" : ""}</label>
+        <div class="label-icons">
+          ${this.aiOptions ? html`
+                <pd-icon
+                  icon="${pdIcons.ICON_AI_SPARKLE}"
+                  activeIcon
+                  class="ai-trigger"
+                  tabindex="0"
+                  role="button"
+                  aria-label="KI-Assistent öffnen"
+                  @click="${this._onAiTrigger}"
+                  @keydown="${this._onAiTriggerKeyDown}"
+                ></pd-icon>
+              ` : nothing}
+        </div>
+      </div>
     `;
   }
   _renderGhost() {
     const drag = this._dragController;
     if (!drag.isDragging || !drag.draggedId) return nothing;
-    const badge = this.badges.find((b) => b.id === drag.draggedId);
+    const badge = this._badges.find((b) => b.id === drag.draggedId);
     if (!badge) return nothing;
-    const idx = this.value.indexOf(drag.draggedId);
+    const idx = this._activeIds.indexOf(drag.draggedId);
     return html`
       <div
         class="drag-ghost"
@@ -515,7 +634,16 @@ class PdBadgeOrder extends PdBaseUIInput {
 }
 __decorateClass([
   property({ type: Array, attribute: false })
-], PdBadgeOrder.prototype, "badges");
+], PdBadgeOrder.prototype, "initialBadges");
+__decorateClass([
+  property({ type: Array, attribute: false })
+], PdBadgeOrder.prototype, "initialValue");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "label");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "valueName");
 __decorateClass([
   property({ type: Number })
 ], PdBadgeOrder.prototype, "min");
@@ -526,17 +654,44 @@ __decorateClass([
   property({ type: Boolean })
 ], PdBadgeOrder.prototype, "numbered");
 __decorateClass([
-  property({ type: String })
+  property({ type: String, attribute: "active-label" })
 ], PdBadgeOrder.prototype, "activeLabel");
 __decorateClass([
-  property({ type: String })
+  property({ type: String, attribute: "available-label" })
 ], PdBadgeOrder.prototype, "availableLabel");
 __decorateClass([
-  property({ type: String })
+  property({ type: String, attribute: "empty-active-text" })
 ], PdBadgeOrder.prototype, "emptyActiveText");
 __decorateClass([
-  property({ type: String })
+  property({ type: String, attribute: "empty-available-text" })
 ], PdBadgeOrder.prototype, "emptyAvailableText");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "editable");
+__decorateClass([
+  property({ type: String })
+], PdBadgeOrder.prototype, "creatable");
+__decorateClass([
+  property({ type: Boolean })
+], PdBadgeOrder.prototype, "required");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBadgeOrder.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBadgeOrder.prototype, "readonly");
+__decorateClass([
+  property({ type: Object, attribute: false })
+], PdBadgeOrder.prototype, "aiOptions");
+__decorateClass([
+  state()
+], PdBadgeOrder.prototype, "_badges");
+__decorateClass([
+  state()
+], PdBadgeOrder.prototype, "_activeIds");
+__decorateClass([
+  state()
+], PdBadgeOrder.prototype, "_error");
 __decorateClass([
   state()
 ], PdBadgeOrder.prototype, "_dragController");

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

@@ -1,3 +1,5 @@
+const TEXT_LIMIT_TITLE = 40;
+const TEXT_LIMIT_DESC = 100;
 const DEFAULT_BADGE_COLOR = "#9E9E9E";
 
-export { DEFAULT_BADGE_COLOR };
+export { DEFAULT_BADGE_COLOR, TEXT_LIMIT_DESC, TEXT_LIMIT_TITLE };