@angular/material 2.0.0-beta.0 → 2.0.0-beta.12

package/card/card.scss

@@ -1,227 +0,0 @@
-@import '../core/style/variables';
-@import '../core/style/elevation';
-@import '../core/a11y/a11y';
-
-
-$md-card-default-padding: 24px !default;
-$md-card-mobile-padding: 24px 16px !default;
-$md-card-border-radius: 2px !default;
-$md-card-header-size: 40px !default;
-
-md-card {
-  @include md-elevation(2);
-  @include md-elevation-transition;
-  display: block;
-  position: relative;
-  padding: $md-card-default-padding;
-  border-radius: $md-card-border-radius;
-  font-family: $md-font-family;
-
-  @include cdk-high-contrast {
-    outline: solid 1px;
-  }
-}
-
-.md-card-flat {
-  box-shadow: none;
-}
-
-// base styles for each card section preset (md-card-content, etc)
-%md-card-section-base {
-  display: block;
-  margin-bottom: 16px;
-}
-
-md-card-title {
-  @extend %md-card-section-base;
-  font-size: 24px;
-  font-weight: 400;
-}
-
-md-card-subtitle {
-  @extend %md-card-section-base;
-  font-size: $md-body-font-size-base;
-}
-
-md-card-content {
-  @extend %md-card-section-base;
-  font-size: $md-body-font-size-base;
-}
-
-md-card-actions {
-  @extend %md-card-section-base;
-  margin-left: -16px;
-  margin-right: -16px;
-  padding: 8px 0;
-
-  &[align='end'] {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-
-[md-card-image] {
-  width: calc(100% + 48px);
-  margin: 0 -24px 16px -24px;
-}
-
-[md-card-xl-image] {
-  width: 240px;
-  height: 240px;
-  margin: -8px;
-}
-
-md-card-footer {
-  position: absolute;
-  width: 100%;
-  min-height: 5px;
-  bottom: 0;
-  left: 0;
-}
-
-md-card-actions {
-  [md-button], [md-raised-button] {
-    margin: 0 4px;
-  }
-}
-
-// HEADER STYLES
-
-md-card-header {
-  display: flex;
-  flex-direction: row;
-  height: $md-card-header-size;
-  margin: -8px 0 16px 0;
-}
-
-.md-card-header-text {
-  height: $md-card-header-size;
-  margin: 0 8px;
-}
-
-[md-card-avatar] {
-  height: $md-card-header-size;
-  width: $md-card-header-size;
-  border-radius: 50%;
-}
-
-md-card-header md-card-title {
-  font-size: $md-body-font-size-base;
-}
-
-// TITLE-GROUP STYLES
-
-// images grouped with title in title-group layout
-%md-card-title-img {
-  margin: -8px 0;
-}
-
-md-card-title-group {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 -8px;
-}
-
-[md-card-sm-image] {
-  @extend %md-card-title-img;
-  width: 80px;
-  height: 80px;
-}
-
-[md-card-md-image] {
-  @extend %md-card-title-img;
-  width: 112px;
-  height: 112px;
-}
-
-[md-card-lg-image] {
-  @extend %md-card-title-img;
-  width: 152px;
-  height: 152px;
-}
-
-// MEDIA QUERIES
-
-@media ($md-xsmall) {
-  md-card {
-    padding: $md-card-mobile-padding;
-  }
-
-  [md-card-image] {
-    width: calc(100% + 32px);
-    margin: 16px -16px;
-  }
-
-  md-card-title-group {
-    margin: 0;
-  }
-
-  [md-card-xl-image] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  md-card-header {
-    margin: -8px 0 0 0;
-  }
-
-}
-
-// FIRST/LAST CHILD ADJUSTMENTS
-
-// top els in md-card-content and md-card can't have their default margin-tops (e.g. <p> tags)
-// or they'll incorrectly add to card's top padding
-md-card > :first-child, md-card-content > :first-child {
-  margin-top: 0;
-}
-
-// last els in md-card-content and md-card can't have their default margin-bottoms (e.g. <p> tags)
-// or they'll incorrectly add to card's bottom padding
-md-card > :last-child, md-card-content > :last-child {
-  margin-bottom: 0;
-}
-
-// if main image is on top, need to place it flush against top
-// (by stripping card's default 24px padding)
-[md-card-image]:first-child {
-  margin-top: -24px;
-}
-
-// actions panel on bottom should be 8px from bottom of card
-// so must strip 16px from default card padding of 24px
-md-card > md-card-actions:last-child {
-  margin-bottom: -16px;
-  padding-bottom: 0;
-}
-
-// actions panel should always be 8px from sides,
-// so the first button in the actions panel can't add its own margins
-md-card-actions [md-button]:first-child,
-md-card-actions [md-raised-button]:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-// should be 12px space between titles and subtitles generally
-// default margin-bottom is 16px, so need to move lower title up 4px
-md-card-title:not(:first-child), md-card-subtitle:not(:first-child) {
-  margin-top: -4px;
-}
-
-// should be 8px space between titles and subtitles in header
-// default margin-bottom is 16px, so need to move subtitle in header up 4px
-md-card-header md-card-subtitle:not(:first-child) {
-  margin-top: -8px;
-}
-
-// xl image should always have 16px on top.
-// when it's the first el, it'll need to remove 8px from default card padding of 24px
-md-card > [md-card-xl-image]:first-child {
-  margin-top: -8px;
-}
-
-// xl image should always have 16px on bottom
-// when it's the last el, it'll need to remove 8px from default card padding of 24px
-md-card > [md-card-xl-image]:last-child {
-  margin-bottom: -8px;
-}

package/card/index.js

@@ -1,3 +0,0 @@
-export * from './card';
-
-//# sourceMappingURL=index.js.map

package/card/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["export * from './card';\n"]}

package/checkbox/OVERVIEW.md

@@ -1,28 +0,0 @@
-`<md-checkbox>` provides the same functionality as a native `<input type="checkbox">`
-enhanced with Material Design styling and animations.
-
-<!-- example(checkbox-overview) -->
-
-### Checkbox label
-The checkbox label is provided as the content to the `<md-checkbox>` element. The label can be 
-positioned before or after the checkbox by setting the `labelPosition` property to `'before'` or
-`'after'`.
-
-If you don't want the label to appear next to the checkbox, you can use 
-[`aria-label`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) or 
-[`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to 
-specify an appropriate label.
-
-### Use with `@angular/forms`
-`<md-checkobx>` is compatible with `@angular/forms` and supports both `FormsModule` 
-and `ReactiveFormsModule`.
-
-### Indeterminate state
-`<md-checkbox>` supports an `indeterminate` state, similar to the native `<input type="checkbox">`.
-While the `indeterminate` property of the checkbox is true, it will render as indeterminate 
-regardless of the `checked` value. Any interaction with the checkbox by a user (i.e., clicking) will
-remove the indeterminate state.
-
-### Theming
-The color of a `<md-checkbox>` can be changed by using the `color` property. By default, checkboxes
-use the theme's accent color. This can be changed to `'primary'` or `'warn'`.  

package/checkbox/README.md

@@ -1,93 +0,0 @@
-# md-checkbox
-
-`md-checkbox` is a Material Design selection control that allows users to make a binary choice for
-a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves
-in the same way. Similar to the native checkbox element, it supports an indeterminate state for
-"mixed" checkboxes.
-
-A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview.
-
-## Usage
-
-### Basic Usage
-
-`md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way.
-
-```html
-<ul>
-  <li *ngFor="let todo of todos">
-    <md-checkbox [checked]="todo.completed"
-                 (change)="todo.completed = $event">
-      {{todo.name}}
-    </md-checkbox>
-  </li>
-</ul>
-```
-
-### Usage within Forms
-
-In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]`
-for use within forms.
-
-```html
-<form (submit)="saveUser()">
-  <!-- Form fields... -->
-  <div>
-    <md-checkbox [(ngModel)]="user.agreesToTOS">
-      I have read and agree to the terms of service.
-    </md-checkbox>
-  </div>
-  <button type="submit" [disabled]="!user.agreesToTOS">Sign Up</button>
-</form>
-```
-
-### Indeterminate Checkboxes
-
-Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state
-
-```html
-<md-checkbox [checked]="false"
-             [indeterminate]="isIndeterminate"
-             (change)="isIndeterminate = false">
-  Click the Button Below to Make Me Indeterminate.
-</md-checkbox>
-<button type="button" (click)="isIndeterminate = true">
-  Make Indeterminate
-</button>
-```
-
-### Alignment
-
-Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label.
-
-```html
-<md-checkbox [checked]="true" align="end">
-  I come after my label.
-</md-checkbox>
-```
-
-Note that this alignment is preserved within RTL layouts.
-
-### Accessibility
-
-By default, `md-checkbox` provides all the accessibility attributes needed. It also supports
-keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the
-checkbox if you do not wish to have any label text.
-
-```html
-<md-checkbox [checked]="false" aria-label="My standalone checkbox"></md-checkbox>
-```
-
-### Theming
-
-The color of a `md-checkbox` can be changed by using the `color` attribute.
-The value `accent` is default and will correspond to your theme accent color.
-Alternatively, you can specify `primary` or `warn`.
-
-Example:
-
- ```html
-<md-checkbox [checked]="true" color="primary">
-  I come after my label.
-</md-checkbox>
- ```

package/checkbox/_checkbox-theme.scss

@@ -1,84 +0,0 @@
-@import '../core/theming/theming';
-
-
-@mixin md-checkbox-theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-
-
-  // The color of the checkbox border.
-  $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;
-
-  // The color of the checkbox's checkmark / mixedmark.
-  $checkbox-mark-color: md-color($background, background);
-
-  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
-  // this does not work well with elements layered on top of one another. To get around this we
-  // blend the colors together based on the base color and the theme background.
-  $white-30pct-opacity-on-dark: #686868;
-  $black-26pct-opacity-on-light: #b0b0b0;
-  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
-
-  .md-checkbox-frame {
-    border-color: $checkbox-border-color;
-  }
-
-  .md-checkbox-checkmark {
-    fill: $checkbox-mark-color;
-  }
-
-  .md-checkbox-checkmark-path {
-    // !important is needed here because a stroke must be set as an attribute on the SVG in order
-    // for line animation to work properly.
-    stroke: $checkbox-mark-color !important;
-  }
-
-  .md-checkbox-mixedmark {
-    background-color: $checkbox-mark-color;
-  }
-
-  .md-checkbox-indeterminate, .md-checkbox-checked {
-    &.md-primary .md-checkbox-background {
-      background-color: md-color($primary, 500);
-    }
-
-    &.md-accent .md-checkbox-background {
-      background-color: md-color($accent, 500);
-    }
-
-    &.md-warn .md-checkbox-background {
-      background-color: md-color($warn, 500);
-    }
-  }
-
-  .md-checkbox-disabled {
-    &.md-checkbox-checked, &.md-checkbox-indeterminate {
-      .md-checkbox-background {
-        background-color: $disabled-color;
-      }
-    }
-
-    &:not(.md-checkbox-checked) {
-      .md-checkbox-frame {
-        border-color: $disabled-color;
-      }
-    }
-  }
-
-  .md-checkbox:not(.md-checkbox-disabled) {
-    &.md-primary .md-checkbox-ripple .md-ripple-foreground {
-      background-color: md-color($primary, 0.26);
-    }
-
-    &.md-accent .md-checkbox-ripple .md-ripple-foreground {
-      background-color: md-color($accent, 0.26);
-    }
-
-    &.md-warn .md-checkbox-ripple .md-ripple-foreground {
-      background-color: md-color($warn, 0.26);
-    }
-  }
-}

package/checkbox/checkbox.css

@@ -1 +0,0 @@
-.md-checkbox-frame,.md-checkbox-unchecked .md-checkbox-background{background-color:transparent}@keyframes md-checkbox-fade-in-background{0%{opacity:0}50%{opacity:1}}@keyframes md-checkbox-fade-out-background{0%,50%{opacity:1}100%{opacity:0}}@keyframes md-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:22.91026}50%{animation-timing-function:cubic-bezier(0,0,.2,.1)}100%{stroke-dashoffset:0}}@keyframes md-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0,0,0,1)}100%{transform:scaleX(1)}}@keyframes md-checkbox-checked-unchecked-checkmark-path{from{animation-timing-function:cubic-bezier(.4,0,1,1);stroke-dashoffset:0}to{stroke-dashoffset:-22.91026}}@keyframes md-checkbox-checked-indeterminate-checkmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(45deg)}}@keyframes md-checkbox-indeterminate-checked-checkmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:0;transform:rotate(45deg)}to{opacity:1;transform:rotate(360deg)}}@keyframes md-checkbox-checked-indeterminate-mixedmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:0;transform:rotate(-45deg)}to{opacity:1;transform:rotate(0)}}@keyframes md-checkbox-indeterminate-checked-mixedmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(315deg)}}@keyframes md-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;opacity:1;transform:scaleX(1)}100%,32.8%{opacity:0;transform:scaleX(0)}}.md-checkbox-background,.md-checkbox-checkmark,.md-checkbox-frame{bottom:0;left:0;position:absolute;right:0;top:0}.md-checkbox-checkmark,.md-checkbox-mixedmark{width:calc(100% - 4px)}.md-checkbox-background,.md-checkbox-frame{border-radius:2px;box-sizing:border-box;pointer-events:none}md-checkbox{cursor:pointer;transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.md-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex}.md-checkbox-inner-container{display:inline-block;height:20px;line-height:0;margin:auto 8px auto auto;order:0;position:relative;vertical-align:middle;white-space:nowrap;width:20px;flex-shrink:0}[dir=rtl] .md-checkbox-inner-container{margin-left:8px;margin-right:auto}.md-checkbox-layout .md-checkbox-label{line-height:24px}.md-checkbox-frame{border:2px solid;transition:border-color 90ms cubic-bezier(0,0,.2,.1);will-change:border-color}.md-checkbox-background{align-items:center;display:inline-flex;justify-content:center;transition:background-color 90ms cubic-bezier(0,0,.2,.1),opacity 90ms cubic-bezier(0,0,.2,.1);will-change:background-color,opacity}.md-checkbox-checkmark{width:100%}.md-checkbox-checkmark-path{stroke-dashoffset:22.91026;stroke-dasharray:22.91026;stroke-width:2.67px}.md-checkbox-checked .md-checkbox-checkmark-path,.md-checkbox-indeterminate .md-checkbox-checkmark-path{stroke-dashoffset:0}.md-checkbox-mixedmark{height:2px;opacity:0;transform:scaleX(0) rotate(0)}.md-checkbox-label-before .md-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .md-checkbox-label-before .md-checkbox-inner-container{margin-left:auto;margin-right:8px}.md-checkbox-checked .md-checkbox-checkmark{opacity:1}.md-checkbox-checked .md-checkbox-mixedmark{transform:scaleX(1) rotate(-45deg)}.md-checkbox-indeterminate .md-checkbox-checkmark{opacity:0;transform:rotate(45deg)}.md-checkbox-indeterminate .md-checkbox-mixedmark{opacity:1;transform:scaleX(1) rotate(0)}.md-checkbox-disabled{cursor:default}.md-checkbox-anim-unchecked-checked .md-checkbox-background{animation:180ms linear 0s md-checkbox-fade-in-background}.md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path{animation:180ms linear 0s md-checkbox-unchecked-checked-checkmark-path}.md-checkbox-anim-unchecked-indeterminate .md-checkbox-background{animation:180ms linear 0s md-checkbox-fade-in-background}.md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark{animation:90ms linear 0s md-checkbox-unchecked-indeterminate-mixedmark}.md-checkbox-anim-checked-unchecked .md-checkbox-background{animation:180ms linear 0s md-checkbox-fade-out-background}.md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path{animation:90ms linear 0s md-checkbox-checked-unchecked-checkmark-path}.md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark{animation:90ms linear 0s md-checkbox-checked-indeterminate-checkmark}.md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark{animation:90ms linear 0s md-checkbox-checked-indeterminate-mixedmark}.md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark{animation:.5s linear 0s md-checkbox-indeterminate-checked-checkmark}.md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark{animation:.5s linear 0s md-checkbox-indeterminate-checked-mixedmark}.md-checkbox-anim-indeterminate-unchecked .md-checkbox-background{animation:180ms linear 0s md-checkbox-fade-out-background}.md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark{animation:.3s linear 0s md-checkbox-indeterminate-unchecked-mixedmark}.md-checkbox-input{bottom:0;left:50%}.md-checkbox-ripple{position:absolute;left:-15px;top:-15px;right:-15px;bottom:-15px;border-radius:50%;z-index:1;pointer-events:none}

package/checkbox/checkbox.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["checkbox.css"],"names":[],"mappings":"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","file":"checkbox.css","sourcesContent":["@keyframes md-checkbox-fade-in-background {\n  0% {\n    opacity: 0; }\n  50% {\n    opacity: 1; } }\n\n@keyframes md-checkbox-fade-out-background {\n  0%, 50% {\n    opacity: 1; }\n  100% {\n    opacity: 0; } }\n\n@keyframes md-checkbox-unchecked-checked-checkmark-path {\n  0%, 50% {\n    stroke-dashoffset: 22.91026; }\n  50% {\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); }\n  100% {\n    stroke-dashoffset: 0; } }\n\n@keyframes md-checkbox-unchecked-indeterminate-mixedmark {\n  0%, 68.2% {\n    transform: scaleX(0); }\n  68.2% {\n    animation-timing-function: cubic-bezier(0, 0, 0, 1); }\n  100% {\n    transform: scaleX(1); } }\n\n@keyframes md-checkbox-checked-unchecked-checkmark-path {\n  from {\n    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);\n    stroke-dashoffset: 0; }\n  to {\n    stroke-dashoffset: -22.91026; } }\n\n@keyframes md-checkbox-checked-indeterminate-checkmark {\n  from {\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1);\n    opacity: 1;\n    transform: rotate(0deg); }\n  to {\n    opacity: 0;\n    transform: rotate(45deg); } }\n\n@keyframes md-checkbox-indeterminate-checked-checkmark {\n  from {\n    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n    opacity: 0;\n    transform: rotate(45deg); }\n  to {\n    opacity: 1;\n    transform: rotate(360deg); } }\n\n@keyframes md-checkbox-checked-indeterminate-mixedmark {\n  from {\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1);\n    opacity: 0;\n    transform: rotate(-45deg); }\n  to {\n    opacity: 1;\n    transform: rotate(0deg); } }\n\n@keyframes md-checkbox-indeterminate-checked-mixedmark {\n  from {\n    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n    opacity: 1;\n    transform: rotate(0deg); }\n  to {\n    opacity: 0;\n    transform: rotate(315deg); } }\n\n@keyframes md-checkbox-indeterminate-unchecked-mixedmark {\n  0% {\n    animation-timing-function: linear;\n    opacity: 1;\n    transform: scaleX(1); }\n  32.8%, 100% {\n    opacity: 0;\n    transform: scaleX(0); } }\n\n.md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0; }\n\n.md-checkbox-checkmark, .md-checkbox-mixedmark {\n  width: calc(100% - 4px); }\n\n.md-checkbox-frame, .md-checkbox-background {\n  border-radius: 2px;\n  box-sizing: border-box;\n  pointer-events: none; }\n\nmd-checkbox {\n  cursor: pointer;\n  transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); }\n\n.md-checkbox-layout {\n  cursor: inherit;\n  align-items: baseline;\n  vertical-align: middle;\n  display: inline-flex; }\n\n.md-checkbox-inner-container {\n  display: inline-block;\n  height: 20px;\n  line-height: 0;\n  margin: auto;\n  margin-right: 8px;\n  order: 0;\n  position: relative;\n  vertical-align: middle;\n  white-space: nowrap;\n  width: 20px;\n  flex-shrink: 0; }\n  [dir='rtl'] .md-checkbox-inner-container {\n    margin-left: 8px;\n    margin-right: auto; }\n\n.md-checkbox-layout .md-checkbox-label {\n  line-height: 24px; }\n\n.md-checkbox-frame {\n  background-color: transparent;\n  border: 2px solid;\n  transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1);\n  will-change: border-color; }\n\n.md-checkbox-background {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n  transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);\n  will-change: background-color, opacity; }\n\n.md-checkbox-checkmark {\n  width: 100%; }\n\n.md-checkbox-checkmark-path {\n  stroke-dashoffset: 22.91026;\n  stroke-dasharray: 22.91026;\n  stroke-width: 2.66667px; }\n\n.md-checkbox-mixedmark {\n  height: 2px;\n  opacity: 0;\n  transform: scaleX(0) rotate(0deg); }\n\n.md-checkbox-label-before .md-checkbox-inner-container {\n  order: 1;\n  margin-left: 8px;\n  margin-right: auto; }\n  [dir='rtl'] .md-checkbox-label-before .md-checkbox-inner-container {\n    margin-left: auto;\n    margin-right: 8px; }\n\n.md-checkbox-checked .md-checkbox-checkmark {\n  opacity: 1; }\n\n.md-checkbox-checked .md-checkbox-checkmark-path {\n  stroke-dashoffset: 0; }\n\n.md-checkbox-checked .md-checkbox-mixedmark {\n  transform: scaleX(1) rotate(-45deg); }\n\n.md-checkbox-indeterminate .md-checkbox-checkmark {\n  opacity: 0;\n  transform: rotate(45deg); }\n\n.md-checkbox-indeterminate .md-checkbox-checkmark-path {\n  stroke-dashoffset: 0; }\n\n.md-checkbox-indeterminate .md-checkbox-mixedmark {\n  opacity: 1;\n  transform: scaleX(1) rotate(0deg); }\n\n.md-checkbox-unchecked .md-checkbox-background {\n  background-color: transparent; }\n\n.md-checkbox-disabled {\n  cursor: default; }\n\n.md-checkbox-anim-unchecked-checked .md-checkbox-background {\n  animation: 180ms linear 0ms md-checkbox-fade-in-background; }\n\n.md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path {\n  animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; }\n\n.md-checkbox-anim-unchecked-indeterminate .md-checkbox-background {\n  animation: 180ms linear 0ms md-checkbox-fade-in-background; }\n\n.md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark {\n  animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; }\n\n.md-checkbox-anim-checked-unchecked .md-checkbox-background {\n  animation: 180ms linear 0ms md-checkbox-fade-out-background; }\n\n.md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path {\n  animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; }\n\n.md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark {\n  animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; }\n\n.md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark {\n  animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; }\n\n.md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark {\n  animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; }\n\n.md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark {\n  animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; }\n\n.md-checkbox-anim-indeterminate-unchecked .md-checkbox-background {\n  animation: 180ms linear 0ms md-checkbox-fade-out-background; }\n\n.md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark {\n  animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; }\n\n.md-checkbox-input {\n  bottom: 0;\n  left: 50%; }\n\n.md-checkbox-ripple {\n  position: absolute;\n  left: -15px;\n  top: -15px;\n  right: -15px;\n  bottom: -15px;\n  border-radius: 50%;\n  z-index: 1;\n  pointer-events: none; }\n"]}

package/checkbox/checkbox.d.ts

@@ -1,155 +0,0 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, Renderer, ModuleWithProviders } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-/**
- * Provider Expression that allows md-checkbox to register as a ControlValueAccessor.
- * This allows it to support [(ngModel)].
- * @docs-private
- */
-export declare const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
-/**
- * Represents the different states that require custom transitions between them.
- * @docs-private
- */
-export declare enum TransitionCheckState {
-    /** The initial state of the component before any user interaction. */
-    Init = 0,
-    /** The state representing the component when it's becoming checked. */
-    Checked = 1,
-    /** The state representing the component when it's becoming unchecked. */
-    Unchecked = 2,
-    /** The state representing the component when it's becoming indeterminate. */
-    Indeterminate = 3,
-}
-/** Change event object emitted by MdCheckbox. */
-export declare class MdCheckboxChange {
-    source: MdCheckbox;
-    checked: boolean;
-}
-/**
- * A material design checkbox component. Supports all of the functionality of an HTML5 checkbox,
- * and exposes a similar API. A MdCheckbox can be either checked, unchecked, indeterminate, or
- * disabled. Note that all additional accessibility attributes are taken care of by the component,
- * so there is no need to provide them yourself. However, if you want to omit a label and still
- * have the checkbox be accessible, you may supply an [aria-label] input.
- * See: https://www.google.com/design/spec/components/selection-controls.html
- */
-export declare class MdCheckbox implements ControlValueAccessor {
-    private _renderer;
-    private _elementRef;
-    private _changeDetectorRef;
-    /**
-     * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
-     * take precedence so this may be omitted.
-     */
-    ariaLabel: string;
-    /**
-     * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
-     */
-    ariaLabelledby: string;
-    /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */
-    id: string;
-    /** Whether the ripple effect on click should be disabled. */
-    private _disableRipple;
-    /** Whether the ripple effect for this checkbox is disabled. */
-    disableRipple: boolean;
-    /** ID of the native input element inside `<md-checkbox>` */
-    readonly inputId: string;
-    private _required;
-    /** Whether the checkbox is required. */
-    required: boolean;
-    /**
-     * Whether or not the checkbox should appear before or after the label.
-     * @deprecated
-     */
-    align: 'start' | 'end';
-    /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
-    labelPosition: 'before' | 'after';
-    private _disabled;
-    /** Whether the checkbox is disabled. */
-    disabled: boolean;
-    /** @docs-private */
-    tabindex: number;
-    /** Name value will be applied to the input element if present */
-    name: string;
-    /** Event emitted when the checkbox's `checked` value changes. */
-    change: EventEmitter<MdCheckboxChange>;
-    /** The native `<input type="checkbox"> element */
-    _inputElement: ElementRef;
-    /**
-     * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
-     * @docs-private
-     */
-    onTouched: () => any;
-    private _currentAnimationClass;
-    private _currentCheckState;
-    private _checked;
-    private _indeterminate;
-    private _color;
-    private _controlValueAccessorChangeFn;
-    _hasFocus: boolean;
-    constructor(_renderer: Renderer, _elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
-    /**
-     * Whether the checkbox is checked. Note that setting `checked` will immediately set
-     * `indeterminate` to false.
-     */
-    checked: boolean;
-    /**
-     * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
-     * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-     * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to
-     * false. This differs from the web platform in that indeterminate state on native
-     * checkboxes is only remove when the user manually checks the checkbox (rather than setting the
-     * `checked` property programmatically). However, we feel that this behavior is more accommodating
-     * to the way consumers would envision using this component.
-     */
-    indeterminate: boolean;
-    /** The color of the button. Can be `primary`, `accent`, or `warn`. */
-    color: string;
-    _updateColor(newColor: string): void;
-    _setElementColor(color: string, isAdd: boolean): void;
-    _isRippleDisabled(): boolean;
-    /**
-     * Sets the model value. Implemented as part of ControlValueAccessor.
-     * @param value Value to be set to the model.
-     */
-    writeValue(value: any): void;
-    /**
-     * Registers a callback to be triggered when the value has changed.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn Function to be called on change.
-     */
-    registerOnChange(fn: (value: any) => void): void;
-    /**
-     * Registers a callback to be triggered when the control has been touched.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn Callback to be triggered when the checkbox is touched.
-     */
-    registerOnTouched(fn: any): void;
-    /**
-     * Sets the checkbox's disabled state. Implemented as a part of ControlValueAccessor.
-     * @param isDisabled Whether the checkbox should be disabled.
-     */
-    setDisabledState(isDisabled: boolean): void;
-    private _transitionCheckState(newState);
-    private _emitChangeEvent();
-    /** Informs the component when the input has focus so that we can style accordingly */
-    _onInputFocus(): void;
-    /** Informs the component when we lose focus in order to style accordingly */
-    _onInputBlur(): void;
-    /** Toggles the `checked` state of the checkbox. */
-    toggle(): void;
-    /**
-     * Event handler for checkbox input element.
-     * Toggles checked state if element is not disabled.
-     * @param event
-     */
-    _onInteractionEvent(event: Event): void;
-    /** Focuses the checkbox. */
-    focus(): void;
-    _onInputClick(event: Event): void;
-    private _getAnimationClassForCheckStateTransition(oldState, newState);
-    _getHostElement(): any;
-}
-export declare class MdCheckboxModule {
-    static forRoot(): ModuleWithProviders;
-}

package/checkbox/checkbox.html

@@ -1 +0,0 @@
-<label class="md-checkbox-layout"><div class="md-checkbox-inner-container"><input #input class="md-checkbox-input cdk-visually-hidden" type="checkbox" [id]="inputId" [required]="required" [checked]="checked" [disabled]="disabled" [name]="name" [tabIndex]="tabindex" [indeterminate]="indeterminate" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledby" (focus)="_onInputFocus()" (blur)="_onInputBlur()" (change)="_onInteractionEvent($event)" (click)="_onInputClick($event)"><div md-ripple *ngIf="!_isRippleDisabled()" class="md-checkbox-ripple" [mdRippleTrigger]="_getHostElement()" [mdRippleCentered]="true" [mdRippleSpeedFactor]="0.3" mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div><div class="md-checkbox-frame"></div><div class="md-checkbox-background"><svg version="1.1" class="md-checkbox-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><path class="md-checkbox-checkmark-path" fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3"/></svg><div class="md-checkbox-mixedmark"></div></div></div><span class="md-checkbox-label"><ng-content></ng-content></span></label>