🎯 Widget Properties & Internationalization Fix Plan

December 6, 2025 - Dynamic Properties + i18n

🎯 Issues to Fix

Issue #1: Duplicate Button Widgets ❌

Symptom: Two "Button Widget" entries appear in widgets panel Files Affected:

• WidgetRegistryService (editor-web-lib)
• ModuleWidgetBridgeService
• Button Widget registration

Issue #2: Spanish Language in UI ❌

Symptom: "Apariencia del botón" shows in Spanish Files Affected:

• button-widget-property-groups.ts - All property labels
• All widget property group files

Issue #3: No Transloco Support ❌

Symptom: Hardcoded strings, no i18n Solution: Add Transloco for internationalization

Issue #4: Dynamic Properties Not Working ❌

Symptom: Can't adjust "Button Appearance" properties Root Cause: Property panel not connected or not rendering correctly

Issue #5: Variants Not Visible ❌

Symptom: Widget variants not showing/working Root Cause: Variant system needs verification

📋 Fix Plan

Phase 1: Fix Duplicate Button Widgets ✅

Steps:

1. Investigate WidgetRegistryService.widgets() computed signal
2. Check deduplication logic (line 125-126)
3. Identify why button widget appears twice
4. Fix registration to ensure single entry

Expected Fix:

// In WidgetRegistryService
const uniqueMap = new Map<string, RegisteredWidget>();
combined.forEach(w => {
  // Use widget.type as key (not id) to prevent duplicates
  uniqueMap.set(w.type, w);
});

Phase 2: Translate to English ✅

Files to Update:

1. button-widget-property-groups.ts
2. All other widget property group files
3. Widget manifest descriptions

Translations Needed:

Phase 3: Add Transloco Support ✅

Setup:

1. Install Transloco if not present
2. Create translation files (en.json, es.json)
3. Update property group definitions to use translation keys

Example:

// Before
{
  title: 'Apariencia del botón',
  icon: 'fa-palette',
  properties: [...]
}

// After
{
  title: 'widgets.button.appearance.title', // Translation key
  icon: 'fa-palette',
  properties: [...]
}

Translation Files:

// en.json
{
  "widgets": {
    "button": {
      "content": {
        "title": "Button Content",
        "text": "Text",
        "buttonType": "Button Type",
        // ...
      },
      "appearance": {
        "title": "Button Appearance",
        "backgroundColor": "Background Color",
        // ...
      }
    }
  }
}

// es.json
{
  "widgets": {
    "button": {
      "content": {
        "title": "Contenido del botón",
        "text": "Texto",
        // ...
      }
    }
  }
}

Phase 4: Fix Dynamic Properties Panel ✅

Investigation Points:

1. Find the property panel component
2. Check if it's consuming BUTTON_WIDGET_PROPERTY_GROUPS
3. Verify property rendering logic
4. Ensure property change handlers work

Expected Files:

• property-panel.component.ts
• property-group-renderer.component.ts
• Property editor components (color picker, number input, etc.)

Fix:

1. Ensure property panel imports property groups
2. Connect setValue/getValue handlers
3. Add reactive updates when properties change

Phase 5: Verify Variants System ✅

Check:

1. Widget variant data structure
2. Variant loading from backend
3. Variant selection UI
4. Variant application to widget instances

Files to Check:

• variant-selector.component.ts
• widget-showcase variant display
• Backend /widgets/:widgetId/variants endpoint

🎯 Implementation Order

1. ✅ Fix Duplicate Buttons (5 min)

   • Quick deduplication fix

2. ✅ Translate to English (15 min)

   • Update all Spanish strings
   • Direct replacement in property groups

3. ✅ Add Transloco (20 min)

   • Setup translation infrastructure
   • Create translation files
   • Update components to use Transloco

4. ✅ Fix Property Panel (30 min)

   • Investigate current implementation
   • Fix connection between properties and UI
   • Test property changes

5. ✅ Verify Variants (15 min)

   • Check variant system
   • Ensure variants load and apply

Total Estimated Time: ~85 minutes

🎊 Expected Outcome

After Fixes:

• ✅ Single "Button Widget" in palette
• ✅ All text in English (with Spanish translation available)
• ✅ Transloco i18n fully integrated
• ✅ "Button Appearance" properties functional
• ✅ Widget variants working
• ✅ Consistent, modular, dynamic approach maintained

Let's get started! 🚀