manuel-guilbault/app.html

## app.html
<template>
  <require from="./switch"></require>
  <span>${toggleState}</span><br />
  <label for="toggle">Toggle: </label>
  <switch id="toggle" value.bind="toggleState" disabled.bind="isCalling"></switch>
</template>

## app.js
import {computedFrom} from 'aurelia-framework';

export class App {
  _toggleState = false;
  isCalling = false;

  @computedFrom('_toggleState')
  get toggleState(){
    return this._toggleState;
  }
  set toggleState(newVal){
    this._toggleState = newVal;
    if (this._toggleState) {
      this._callApi().catch(() => { this._toggleState = false; });
    }
  }

  _callApi() {
    this.isCalling = true;

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.isCalling = false;
        reject();
      }, 500);
    });
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## switch.css
switch {
  display: inline-block;
}
switch .switch-container{
    vertical-align: middle;
    position: relative;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 1px #e5e5e5;
    height: 20px;
    width: 35px;
    background-color: white;
    padding: 0;
    cursor: pointer;

    transition: background-color .1s ease-in-out;
}
switch .switch-container.disabled {
  cursor: progress;
}
switch .switch-container.on{
    background-color: #00b300;
    box-shadow: 0px 0px 0px 1px #00b300;
}
switch .switch-container:focus{
    outline: none;
}
switch .indicator{
    box-sizing: content-box;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    margin: 0 -1px;
    background-color: white;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.28);

    transition: left .1s ease-in-out, border-color .1s ease-in-out;
}
switch .switch-container.on .indicator{
  left: calc(100% - 18px);
  border-color: #00b300;
}

## switch.html
<template>
    <require from="./switch.css"></require>
    <button click.trigger="toggle()" class="switch-container ${state} ${disabled ? 'disabled' : ''}">
        <div class="indicator"></div>
    </button>
</template>

## switch.js
import {bindable, bindingMode, computedFrom} from 'aurelia-framework';

export class SwitchCustomElement{
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value;
    @bindable disabled;

    toggle(){
      if (!this.disabled) {
        this.value = !this.value; //Double ! forces boolean, third ! toggles state
      }
    }

    @computedFrom('value')
    get state(){
        if(this.value){
            return 'on';
        } else {
            return 'off';
        }
    }
}
	<template>
	<require from="./switch"></require>
	<span>${toggleState}</span><br />
	<label for="toggle">Toggle: </label>
	<switch id="toggle" value.bind="toggleState" disabled.bind="isCalling"></switch>
	</template>
	import {computedFrom} from 'aurelia-framework';

	export class App {
	_toggleState = false;
	isCalling = false;

	@computedFrom('_toggleState')
	get toggleState(){
	return this._toggleState;
	}
	set toggleState(newVal){
	this._toggleState = newVal;
	if (this._toggleState) {
	this._callApi().catch(() => { this._toggleState = false; });
	}
	}

	_callApi() {
	this.isCalling = true;

	return new Promise((resolve, reject) => {
	setTimeout(() => {
	this.isCalling = false;
	reject();
	}, 500);
	});
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	switch {
	display: inline-block;
	}
	switch .switch-container{
	vertical-align: middle;
	position: relative;
	border: none;
	border-radius: 10px;
	box-shadow: 0px 0px 0px 1px #e5e5e5;
	height: 20px;
	width: 35px;
	background-color: white;
	padding: 0;
	cursor: pointer;

	transition: background-color .1s ease-in-out;
	}
	switch .switch-container.disabled {
	cursor: progress;
	}
	switch .switch-container.on{
	background-color: #00b300;
	box-shadow: 0px 0px 0px 1px #00b300;
	}
	switch .switch-container:focus{
	outline: none;
	}
	switch .indicator{
	box-sizing: content-box;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 18px;
	margin: 0 -1px;
	background-color: white;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.28);

	transition: left .1s ease-in-out, border-color .1s ease-in-out;
	}
	switch .switch-container.on .indicator{
	left: calc(100% - 18px);
	border-color: #00b300;
	}
	<template>
	<require from="./switch.css"></require>
	<button click.trigger="toggle()" class="switch-container ${state} ${disabled ? 'disabled' : ''}">
	<div class="indicator"></div>
	</button>
	</template>
	import {bindable, bindingMode, computedFrom} from 'aurelia-framework';

	export class SwitchCustomElement{
	@bindable({ defaultBindingMode: bindingMode.twoWay }) value;
	@bindable disabled;

	toggle(){
	if (!this.disabled) {
	this.value = !this.value; //Double ! forces boolean, third ! toggles state
	}
	}

	@computedFrom('value')
	get state(){
	if(this.value){
	return 'on';
	} else {
	return 'off';
	}
	}
	}