Enhances Services module with detail view and interactions

Adds comprehensive service detail view with multiple tabs and dynamic interactions
Implements client-side navigation between service list and detail views
Introduces mock service data catalog for flexible component rendering
Extends localization support for new service detail screens

Improves user experience by adding edit capabilities and smooth view transitions

PlanTempus.Application/wwwroot/ts/modules/controls.ts

@@ -3,6 +3,7 @@
  *
  * Handles generic UI controls functionality:
  * - Toggle sliders (Ja/Nej switches)
+ * - Select dropdowns (Popover API)
  */
 
 /**
@@ -11,6 +12,7 @@
 export class ControlsController {
   constructor() {
     this.initToggleSliders();
+    this.initSelectDropdowns();
   }
 
   /**
@@ -33,4 +35,54 @@ export class ControlsController {
       });
     });
   }
+
+  /**
+   * Initialize all select dropdowns on the page
+   * Uses Popover API for dropdown behavior
+   */
+  private initSelectDropdowns(): void {
+    document.querySelectorAll('swp-select').forEach(select => {
+      const trigger = select.querySelector('button');
+      const popover = select.querySelector('[popover]') as HTMLElement | null;
+      const options = select.querySelectorAll('swp-select-option');
+
+      if (!trigger || !popover) return;
+
+      // Update aria-expanded on toggle
+      popover.addEventListener('toggle', (e: Event) => {
+        const event = e as ToggleEvent;
+        trigger.setAttribute('aria-expanded', event.newState === 'open' ? 'true' : 'false');
+      });
+
+      // Handle option selection
+      options.forEach(option => {
+        option.addEventListener('click', () => {
+          const value = (option as HTMLElement).dataset.value;
+          const label = option.textContent?.trim() || '';
+
+          // Update selected state
+          options.forEach(o => o.classList.remove('selected'));
+          option.classList.add('selected');
+
+          // Update trigger display
+          const valueEl = trigger.querySelector('swp-select-value');
+          if (valueEl) {
+            valueEl.textContent = label;
+          }
+
+          // Update data-value on select element
+          (select as HTMLElement).dataset.value = value;
+
+          // Close popover
+          popover.hidePopover();
+
+          // Dispatch custom event
+          select.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            detail: { value, label }
+          }));
+        });
+      });
+    });
+  }
 }