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

/**
 * Controls Module
 *
 * Handles generic UI controls functionality:
 * - Toggle sliders (Ja/Nej switches)
 */

/**
 * Controller for generic UI controls
 */
export class ControlsController {
  constructor() {
    this.initToggleSliders();
  }

  /**
   * Initialize all toggle sliders on the page
   * Toggle slider: Ja/Nej button switch with data-value attribute
   * Clicking anywhere on the slider toggles the value
   */
  private initToggleSliders(): void {
    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
      slider.addEventListener('click', () => {
        const el = slider as HTMLElement;
        const newValue = el.dataset.value === 'yes' ? 'no' : 'yes';
        el.dataset.value = newValue;

        // Dispatch custom event for listeners
        slider.dispatchEvent(new CustomEvent('toggle', {
          bubbles: true,
          detail: { value: newValue }
        }));
      });
    });
  }
}