Switch

<flx-switch
  label="Small switch"
  size="small"
  [(ngModel)]="value1">
</flx-switch>

<flx-switch
  label="Medium switch"
  size="medium"
  [(ngModel)]="value2">
</flx-switch>

<flx-switch
  label="Large switch"
  size="large"
  [(ngModel)]="value3">
</flx-switch>

<flx-switch
  label="Label after (default)"
  labelPosition="after"
  [(ngModel)]="value1">
</flx-switch>

<flx-switch
  label="Label before"
  labelPosition="before"
  [(ngModel)]="value2">
</flx-switch>

<flx-switch
  label="Disabled (off)"
  [disabled]="true"
  [(ngModel)]="disabledOff">
</flx-switch>

<flx-switch
  label="Disabled (on)"
  [disabled]="true"
  [(ngModel)]="disabledOn">
</flx-switch>

export class DisabledExample {
  disabledOff = false;
  disabledOn = true;
}

<form [formGroup]="preferencesForm">
  <flx-switch
    label="Enable two-factor authentication"
    formControlName="twoFactor">
  </flx-switch>

  <flx-switch
    label="Show profile publicly"
    formControlName="publicProfile">
  </flx-switch>

  <flx-switch
    label="Send weekly digest"
    formControlName="weeklyDigest">
  </flx-switch>
</form>

import { FormBuilder } from '@angular/forms';

export class PreferencesForm {
  preferencesForm = this.fb.group({
    twoFactor: [false],
    publicProfile: [true],
    weeklyDigest: [true]
  });

  constructor(private fb: FormBuilder) {}
}

<flx-switch
  label="Maintenance mode"
  [(ngModel)]="maintenanceMode"
  (checkedChange)="onMaintenanceModeChange($event)">
</flx-switch>

export class AdminPanel {
  maintenanceMode = false;

  onMaintenanceModeChange(enabled: boolean) {
    if (enabled) {
      this.enableMaintenanceMode();
    } else {
      this.disableMaintenanceMode();
    }
  }

  enableMaintenanceMode() {
    console.log('Maintenance mode enabled');
    // API call to enable maintenance mode
  }

  disableMaintenanceMode() {
    console.log('Maintenance mode disabled');
    // API call to disable maintenance mode
  }
}

<div class="settings-list">
  <div class="setting-item">
    <div class="setting-info">
      <h4>Push notifications</h4>
      <p>Receive notifications on your device</p>
    </div>
    <flx-switch
      [(ngModel)]="settings.pushNotifications"
      labelPosition="before">
    </flx-switch>
  </div>

  <div class="setting-item">
    <div class="setting-info">
      <h4>Email digest</h4>
      <p>Get a daily summary via email</p>
    </div>
    <flx-switch
      [(ngModel)]="settings.emailDigest"
      labelPosition="before">
    </flx-switch>
  </div>

  <div class="setting-item">
    <div class="setting-info">
      <h4>Auto-update</h4>
      <p>Automatically install updates</p>
    </div>
    <flx-switch
      [(ngModel)]="settings.autoUpdate"
      labelPosition="before">
    </flx-switch>
  </div>
</div>