<div class="slide-toggle-container" [class.disabled]="disabled">
  <label class="slide-toggle-label" [class]="'label-' + labelPosition">
    <span *ngIf="label && labelPosition === 'before'" class="label-text">{{ label }}</span>
    
    <div class="slide-toggle-wrapper" 
         (click)="toggle()" 
         (keydown)="onKeydown($event)"
         tabindex="0"
         role="switch"
         [attr.aria-checked]="value"
         [attr.aria-disabled]="disabled"
         [attr.aria-label]="label">
      
      <div class="slide-toggle-track" 
           [class.checked]="value" 
           [class]="'color-' + color">
        <div class="slide-toggle-thumb" [class.checked]="value"></div>
      </div>
    </div>
    
    <span *ngIf="label && labelPosition === 'after'" class="label-text">{{ label }}</span>
  </label>
</div> 