feat(switch): add switch component and drag service

ember-cli-build.js

@@ -9,14 +9,14 @@ var broccoliAutoprefixer = require('broccoli-autoprefixer');
 var autoprefixerOptions = require('./build/autoprefixer-options');
 
 module.exports = function(defaults) {
-  var demoAppCssTree = new BroccoliSass(['src/demo-app'], './demo-app.scss', 'demo-app.css');
+  var demoAppCssTree = new BroccoliSass(['src/demo-app'], './demo-app.scss', 'demo-app/demo-app.css');
   var componentCssTree = getComponentsCssTree();
   var angularAppTree = new Angular2App(defaults);
 
   return mergeTrees([
     angularAppTree.toTree(),
     componentCssTree,
-    demoAppCssTree,
+    demoAppCssTree
   ]);
 };
 

karma-test-shim.js

@@ -8,10 +8,11 @@ __karma__.loaded = function() {};
 /**
  * Gets map of module alias to location or package.
  * @param dir Directory name under `src/` for create a map for.
+ * @param core Is that a map of the core files
  */
-function getPathsMap(dir) {
+function getPathsMap(dir, core) {
   return Object.keys(window.__karma__.files)
-    .filter(isComponentsFile)
+    .filter(!!core ? isCoreFile : isComponentsFile)
     .reduce(function(pathsMapping, appPath) {
       var pathToReplace = new RegExp('^/base/dist/' + dir + '/');
       var moduleName = appPath.replace(pathToReplace, './').replace(/\.js$/, '');
@@ -26,6 +27,11 @@ System.config({
       defaultExtension: false,
       format: 'register',
       map: getPathsMap('components')
+    },
+    'base/dist/core': {
+      defaultExtension: false,
+      format: 'register',
+      map: getPathsMap('core', true)
     }
   }
 });
@@ -46,6 +52,10 @@ System.import('angular2/platform/browser').then(function(browser_adapter) {
   __karma__.error(error.stack || error);
 });
 
+function isCoreFile(filePath) {
+  return /^\/base\/dist\/core\/(?!spec)([a-z0-9-_\/]+)\.js$/.test(filePath);
+}
+
 function isComponentsFile(filePath) {
   return /^\/base\/dist\/components\/(?!spec)([a-z0-9-_\/]+)\.js$/.test(filePath);
 }

karma.conf.js

@@ -31,7 +31,7 @@ module.exports = function(config) {
     proxies: {
       // required for component assests fetched by Angular's compiler
       "/demo-app/": "/base/dist/demo-app/",
-      "/components/": "/base/dist/components/",
+      "/components/": "/base/dist/components/"
     },
     exclude: [],
     preprocessors: {},

src/components/switch/switch.html

@@ -0,0 +1,8 @@
+<div class="md-container"><div class="md-bar"></div>
+  <div class="md-thumb-container">
+    <div class="md-thumb"></div>
+  </div>
+</div>
+<div class="md-label">
+  <ng-content></ng-content>
+</div>

src/components/switch/switch.scss

@@ -0,0 +1,220 @@
+@import "variables";
+@import "shadows";
+@import "mixins";
+
+//TODO Temporary Theme
+@import "default-theme";
+
+$switch-width: 36px !default;
+$switch-height: 8px * 3 !default;
+$switch-bar-height: 14px !default;
+$switch-thumb-size: 20px !default;
+$switch-margin: 16px !default;
+
+.md-inline-form.md-switch {
+  margin-top: 18px;
+  margin-bottom: 19px;
+}
+
+md-switch {
+  margin: $switch-margin 0;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  height: 30px;
+  line-height: 28px;
+  align-items: center;
+  display: flex;
+
+  @include rtl(margin-left, inherit, $switch-margin);
+  @include rtl(margin-right, $switch-margin, inherit);
+
+  &:last-of-type {
+   @include rtl(margin-left, inherit, 0);
+    @include rtl(margin-right, 0, inherit);
+  }
+
+  &[disabled] {
+    cursor: default;
+
+    .md-container {
+      cursor: default;
+    }
+  }
+
+  .md-container {
+    cursor: grab;
+    width: $switch-width;
+    height: $switch-height;
+    position: relative;
+    user-select: none;
+    margin-right: 8px;
+    float: left;
+  }
+
+  &:not([disabled]) {
+    .md-dragging,
+    &.md-dragging .md-container {
+      cursor: grabbing;
+    }
+  }
+
+  &.md-focused:not([disabled]) {
+    .md-thumb:before {
+      left: -8px;
+      top: -8px;
+      right: -8px;
+      bottom: -8px;
+    }
+
+    &:not(.md-checked).md-thumb:before {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  .md-label {
+    border: 0 transparent;
+    float: left;
+  }
+
+  .md-bar {
+    left: 1px;
+    width: $switch-width - 2px;
+    top: $switch-height / 2 - $switch-bar-height / 2;
+    height: $switch-bar-height;
+    border-radius: 8px;
+    position: absolute;
+  }
+
+  .md-thumb-container {
+    top: $switch-height / 2 - $switch-thumb-size / 2;
+    left: 0;
+    width: $switch-width - $switch-thumb-size;
+    position: absolute;
+    transform: translate3d(0,0,0);
+    z-index: 1;
+  }
+  &.md-checked .md-thumb-container {
+    transform: translate3d(100%,0,0);
+  }
+
+  .md-thumb {
+    position: absolute;
+    margin: 0;
+    left: 0;
+    top: 0;
+    outline: none;
+    height: $switch-thumb-size;
+    width: $switch-thumb-size;
+    border-radius: 50%;
+    box-shadow: $md-shadow-bottom-z-1;
+
+    &:before {
+      background-color: transparent;
+      border-radius: 50%;
+      content: '';
+      position: absolute;
+      display: block;
+      height: auto;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 0.5s;
+      width: auto;
+    }
+  }
+
+  &:not(.md-dragging) {
+    .md-bar,
+    .md-thumb-container,
+    .md-thumb {
+      transition: $swift-linear;
+      transition-property: transform, background-color;
+    }
+
+    .md-bar,
+    .md-thumb {
+      transition-delay: 0.05s;
+    }
+  }
+
+  // COLOR THEMING
+  .md-thumb {
+    background-color: md-color($md-background, 50);
+  }
+  .md-bar {
+    background-color: md-color($md-background, 500);
+  }
+
+  &.md-checked {
+    .md-ink-ripple {
+      color: md-color($md-accent);
+    }
+
+    .md-thumb {
+      background-color: md-color($md-accent);
+    }
+
+    .md-bar {
+      background-color: md-color($md-accent, 0.5);
+    }
+
+    &.md-focused .md-thumb:before {
+      background-color: md-color($md-accent, 0.26);
+    }
+
+    &.md-primary {
+      .md-ink-ripple {
+        color: md-color($md-primary);
+      }
+      .md-thumb {
+        background-color: md-color($md-primary);
+      }
+      .md-bar {
+        background-color: md-color($md-primary, 0.5);
+      }
+      &.md-focused .md-thumb:before {
+        background-color: md-color($md-primary, 0.26);
+      }
+    }
+
+    &.md-warn {
+      .md-ink-ripple {
+        color: md-color($md-warn);
+      }
+      .md-thumb {
+        background-color: md-color($md-warn);
+      }
+      .md-bar {
+        background-color: md-color($md-warn, 0.5);
+      }
+      &.md-focused .md-thumb:before {
+        background-color: md-color($md-warn, 0.26);
+      }
+    }
+  }
+
+  &[disabled] {
+    .md-thumb {
+      background-color: md-color($md-background, 400);
+    }
+    .md-bar {
+      background-color: md-color($md-foreground, 'divider');
+    }
+  }
+}
+
+@media screen and (-ms-high-contrast: active) {
+  md-switch.md-default-theme .md-bar {
+    background-color: #666;
+  }
+  md-switch.md-default-theme.md-checked .md-bar {
+    background-color: #9E9E9E;
+  }
+  md-switch.md-default-theme .md-thumb {
+    background-color: #fff;
+  }
+}
+

src/components/switch/switch.spec.ts

@@ -0,0 +1,72 @@
+import {
+  it,
+  iit,
+  describe,
+  ddescribe,
+  expect,
+  inject,
+  injectAsync,
+  TestComponentBuilder,
+  beforeEachProviders,
+  beforeEach,
+} from 'angular2/testing';
+import {provide, Component} from 'angular2/core';
+import {DebugElement} from "angular2/core";
+import {MdSwitch} from './switch';
+import {AsyncTestFn} from "angular2/testing";
+import {FORM_DIRECTIVES} from "angular2/common";
+import {Input} from "angular2/core";
+import {By} from 'angular2/platform/browser';
+
+describe('MdSwitch', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; }));
+
+  describe('md-switch', () => {
+    it('should change the model value', (done:() => void) => {
+      return builder.createAsync(TestApp).then((fixture) => {
+        let testComponent = fixture.debugElement.componentInstance;
+        let switchElement = fixture.debugElement.query(By.css('md-switch'));
+
+        expect(switchElement.nativeElement.classList.contains('md-checked')).toBe(false);
+
+        testComponent.testSwitch = true;
+
+        fixture.detectChanges();
+
+        expect(switchElement.nativeElement.classList.contains('md-checked')).toBe(true);
+        done();
+      });
+    });
+
+    it('should not change the model if disabled', (done:() => void) => {
+      return builder.createAsync(TestApp).then((fixture) => {
+        let testComponent = fixture.debugElement.componentInstance;
+        let switchElement = fixture.debugElement.query(By.css('md-switch'));
+
+        expect(switchElement.nativeElement.classList.contains('md-checked')).toBe(false);
+
+        testComponent.isDisabled = true;
+        fixture.detectChanges();
+
+        switchElement.nativeElement.click();
+
+        expect(switchElement.nativeElement.classList.contains('md-checked')).toBe(false);
+        done();
+      });
+    });
+  });
+});
+
+/** Test component that contains an MdSwitch. */
+@Component({
+  selector: 'test-app',
+  directives: [MdSwitch, FORM_DIRECTIVES],
+  template:
+    '<md-switch [(ngModel)]="testSwitch" [disabled]="isDisabled">Test Switch</md-switch>',
+})
+class TestApp {
+  testSwitch = false;
+  isDisabled = false;
+}