feat(examples): add checkbox examples

 - fix up checkbox styles

examples/all.ts

@@ -16,13 +16,16 @@ import RadioBasicUsage from './components/radio/basic_usage';
 import SwitchBasicUsage from './components/switch/basic_usage';
 import TabsDynamicHeight from './components/tabs/dynamic_height';
 import TabsDynamicTabs from './components/tabs/dynamic_tabs';
+import CheckboxBasicUsage from "./components/checkbox/basic_usage";
+import CheckboxSyncing from "./components/checkbox/syncing";
 
 /**
  * Collection of Material Design component directives.
  */
 export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   CardBasicUsage, CardInlineActions, CardActionButtons,
   ButtonBasicUsage,
+  CheckboxBasicUsage, CheckboxSyncing,
   DialogBasicUsage,
   RadioBasicUsage,
   SwitchBasicUsage,

examples/components/checkbox/basic_usage.html

@@ -0,0 +1,46 @@
+<section layout-padding>
+  <fieldset class="standard">
+    <legend>Using two way bindings with <code>[(checked)]</code></legend>
+    <div layout="column" layout-wrap layout-gt-sm="row">
+      <div flex-xs flex="50">
+        <md-checkbox [(checked)]="cb1" aria-label="Checkbox 1">
+          Checkbox 1: {{ cb1 }}
+        </md-checkbox>
+      </div>
+      <div flex-xs flex="50">
+        <div layout-xs="column" flex-xs="100">
+          <md-checkbox
+            [(checked)]="cb2"
+            aria-label="Checkbox 2"
+            ng-true-value="'yup'"
+            ng-false-value="'nope'"
+            class="md-warn md-align-top-left" flex>
+            Checkbox 2 (md-warn) <br/>
+            <span class="ipsum">
+              Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
+              Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
+              sit amet dapibus tortor ligula non nibh.
+            </span>
+            <br/>
+            {{ cb2 }}
+          </md-checkbox>
+        </div>
+      </div>
+      <div flex-xs flex="50">
+        <md-checkbox disabled="true" aria-label="Disabled checkbox" [(checked)]="cb3">
+          Checkbox: Disabled
+        </md-checkbox>
+      </div>
+      <div flex-xs flex="50">
+        <md-checkbox disabled="true" aria-label="Disabled checked checkbox" [(checked)]="cb4">
+          Checkbox: Disabled, Checked
+        </md-checkbox>
+      </div>
+      <div flex-xs flex="50">
+        <md-checkbox md-no-ink aria-label="Checkbox No Ink" [(checked)]="cb5" class="md-primary">
+          Checkbox (md-primary): No Ink
+        </md-checkbox>
+      </div>
+    </div>
+  </fieldset>
+</section>

examples/components/checkbox/basic_usage.scss

@@ -0,0 +1,28 @@
+div.flex-xs {
+  min-height:40px;
+
+}
+.checkboxDemo1 div {
+  clear: both;
+}
+.checkboxDemo1 md-checkbox {
+  float: left;
+}
+p {
+  padding-left: 8px;
+}
+fieldset.standard {
+  border-style: solid;
+  border-width: 1px;
+}
+legend {
+  color: #3F51B5;
+}
+legend code {
+  color: #3F51B5;
+  font-weight: normal;
+}
+
+.ipsum {
+  color: saddlebrown;
+}

examples/components/checkbox/basic_usage.ts

@@ -0,0 +1,16 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+
+@Component({selector: 'checkbox-basic-usage'})
+@View({
+  templateUrl: 'examples/components/checkbox/basic_usage.html',
+  styleUrls: ['examples/components/checkbox/basic_usage.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class CheckboxBasicUsage {
+  public cb1 = true;
+  public cb2 = false;
+  public cb3 = false;
+  public cb4 = true;
+  public cb5 = false;
+}

examples/components/checkbox/syncing.html

@@ -0,0 +1,46 @@
+<div class="syncing" layout-padding>
+  <div layout="row" layout-wrap>
+
+    <div flex="100" flex-gt-sm="50" layout="column">
+      <div>
+        <!--
+          In IE, we cannot apply flex directly to <fieldset>
+          @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
+        -->
+        <fieldset class="standard">
+          <legend>Using <code>md-checkbox</code> with <code>[checked]</code></legend>
+          <div layout="row" layout-wrap flex>
+            <div flex="50" *ngFor="#item of items">
+              <md-checkbox [checked]="exists(item, selected)" (click)="toggle(item, selected)">
+                {{ item }} <span *ngIf="exists(item, selected)">selected</span>
+              </md-checkbox>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+
+    <div flex="100" flex-gt-sm="50" layout="column">
+      <div>
+        <fieldset class="standard">
+          <legend>Using <code>&lt;input type="checkbox"&gt;</code></legend>
+          <div layout="row" layout-wrap flex>
+            <div *ngFor="#item of items" class="standard" flex="50">
+              <label>
+                <input type="checkbox" [checked]="exists(item, selected)" (click)="toggle(item, selected)"/>
+                {{ item }}
+              </label>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+
+    <div flex="100">
+      <h2 class="md-title">Selected Items</h2>
+      <code class="string">{{selected | json}}</code>
+    </div>
+  </div>
+
+
+</div>

examples/components/checkbox/syncing.scss

@@ -0,0 +1,44 @@
+.checkboxDemo1 div {
+  clear: both;
+}
+
+.checkboxDemo1 md-checkbox {
+  float: left;
+}
+
+legend {
+  color: #3F51B5;
+}
+
+legend code {
+  color: #3F51B5;
+  font-weight: normal;
+}
+
+p {
+  padding-left: 8px;
+}
+
+.info {
+  padding-left: 13px;
+}
+
+div.standard {
+  padding: 8px;
+  padding-left: 15px;
+}
+
+fieldset.standard {
+  border-style: solid;
+  border-width: 1px;
+  height: 100%;
+}
+
+.syncing {
+  min-height: 270px;
+}
+
+code.string {
+  display: block;
+  padding: 8px;
+}

examples/components/checkbox/syncing.ts

@@ -0,0 +1,24 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+
+@Component({selector: 'checkbox-syncing'})
+@View({
+  templateUrl: 'examples/components/checkbox/syncing.html',
+  styleUrls: ['examples/components/checkbox/syncing.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class CheckboxSyncing {
+
+  items = [1, 2, 3, 4, 5];
+  selected = [];
+
+  toggle(item, list) {
+    var idx = list.indexOf(item);
+    if (idx > -1) list.splice(idx, 1);
+    else list.push(item);
+  }
+
+  exists(item, list) {
+    return list.indexOf(item) > -1;
+  }
+}

ng2-material/components/checkbox/checkbox.scss

@@ -1,11 +1,12 @@
 @import "../../core/style/variables";
 @import "../../core/style/shadows";
-
-// TODO(jelbourn): This goes away.
+@import "../../core/style/mixins";
 @import "../../core/style/default-theme";
 
 $checkbox-width: 18px !default;
 $checkbox-height: $checkbox-width !default;
+$checkbox-top-left: 12px;
+$checkbox-text-margin: 10px !default;
 
 md-checkbox {
   box-sizing: border-box;
@@ -15,6 +16,16 @@ md-checkbox {
   cursor: pointer;
   outline: none;
   user-select: none;
+  position: relative;
+
+  &.md-align-top-left .md-checkbox-container {
+    top: $checkbox-top-left;
+  }
+
+  &:last-of-type {
+    @include rtl(margin-left, inherit, 0);
+    @include rtl(margin-right, 0, inherit);
+  }
 
   *, *:after {
     box-sizing: border-box;
@@ -51,11 +62,14 @@ md-checkbox {
 }
 
 .md-checkbox-container {
-  position: relative;
-  top: 4px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   display: inline-block;
   width: $checkbox-width;
   height: $checkbox-height;
+  @include rtl(left, 0, auto);
+  @include rtl(right, auto, 0);
 
   &:after {
     content: '';
@@ -94,11 +108,14 @@ md-checkbox {
   border: 1px dotted transparent;
   position: relative;
   display: inline-block;
-  margin-left: 10px;
   vertical-align: middle;
   white-space: normal;
   pointer-events: none;
   user-select: text;
+
+  @include rtl(margin-left, $checkbox-text-margin + $checkbox-width, 0);
+  @include rtl(margin-right, 0, $checkbox-text-margin + $checkbox-width);
+
 }
 
 // THEME
@@ -168,6 +185,10 @@ md-checkbox {
       border-color: md-color($md-foreground, disabled);
     }
 
+    .md-checkbox-label {
+      color: md-color($md-foreground, disabled);
+    }
+
     &[aria-checked="true"] .md-checkbox-icon {
       background-color: md-color($md-foreground, disabled);
     }