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

package/checkbox/checkbox.scss

@@ -1,431 +0,0 @@
-@import '../core/theming/theming';
-@import '../core/style/elevation';
-@import '../core/style/variables';
-@import '../core/ripple/ripple';
-
-
-// The width/height of the checkbox element.
-$md-checkbox-size: $md-toggle-size !default;
-// The width of the line used to draw the checkmark / mixedmark.
-$md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default;
-// The width of the checkbox border shown when the checkbox is unchecked.
-$md-checkbox-border-width: 2px;
-// The base duration used for the majority of transitions for the checkbox.
-$md-checkbox-transition-duration: 90ms;
-// The amount of spacing between the checkbox and its label.
-$md-checkbox-item-spacing: $md-toggle-padding;
-
-// Manual calculation done on SVG
-$_md-checkbox-mark-path-length: 22.910259;
-$_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
-
-// The ripple size of the checkbox
-$md-checkbox-ripple-size: 15px;
-
-// Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
-@keyframes md-checkbox-fade-in-background {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-// Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.
-@keyframes md-checkbox-fade-out-background {
-  0%, 50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-// "Draws" in the checkmark when the checkbox goes from unchecked -> checked.
-@keyframes md-checkbox-unchecked-checked-checkmark-path {
-  0%, 50% {
-    stroke-dashoffset: $_md-checkbox-mark-path-length;
-  }
-
-  50% {
-    animation-timing-function: $md-linear-out-slow-in-timing-function;
-  }
-
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-// Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.
-@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);
-  }
-}
-
-// "Erases" the checkmark when the checkbox goes from checked -> unchecked.
-@keyframes md-checkbox-checked-unchecked-checkmark-path {
-  from {
-    animation-timing-function: $md-fast-out-linear-in-timing-function;
-    stroke-dashoffset: 0;
-  }
-
-  to {
-    stroke-dashoffset: $_md-checkbox-mark-path-length * -1;
-  }
-}
-
-
-// Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This
-// animation helps provide the illusion of the checkmark "morphing" into the mixedmark.
-@keyframes md-checkbox-checked-indeterminate-checkmark {
-  from {
-    animation-timing-function: $md-linear-out-slow-in-timing-function;
-    opacity: 1;
-    transform: rotate(0deg);
-  }
-
-  to {
-    opacity: 0;
-    transform: rotate(45deg);
-  }
-}
-
-// Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->
-// checked. This animation helps provide the illusion that the mixedmark is "morphing" into the
-// checkmark.
-@keyframes md-checkbox-indeterminate-checked-checkmark {
-  from {
-    animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;
-    opacity: 0;
-    transform: rotate(45deg);
-  }
-
-  to {
-    opacity: 1;
-    transform: rotate(360deg);
-  }
-}
-
-// Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This
-// animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion
-// of "morphing" from checkmark -> mixedmark.
-@keyframes md-checkbox-checked-indeterminate-mixedmark {
-  from {
-    animation-timing-function: $md-linear-out-slow-in-timing-function;
-    opacity: 0;
-    transform: rotate(-45deg);
-  }
-
-  to {
-    opacity: 1;
-    transform: rotate(0deg);
-  }
-}
-
-// Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This
-// animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion
-// of "morphing" from mixedmark -> checkmark.
-@keyframes md-checkbox-indeterminate-checked-mixedmark {
-  from {
-    animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;
-    opacity: 1;
-    transform: rotate(0deg);
-  }
-
-  to {
-    opacity: 0;
-    transform: rotate(315deg);
-  }
-}
-
-
-// Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->
-// unchecked.
-@keyframes md-checkbox-indeterminate-unchecked-mixedmark {
-  0% {
-    animation-timing-function: linear;
-    opacity: 1;
-    transform: scaleX(1);
-  }
-
-  32.8%, 100% {
-    opacity: 0;
-    transform: scaleX(0);
-  }
-}
-
-// Applied to elements that cover the checkbox's entire inner container.
-%md-checkbox-cover-element {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-// Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
-// the mixedmark.
-%md-checkbox-mark {
-  $width-padding-inset: 2 * $md-checkbox-border-width;
-  width: calc(100% - #{$width-padding-inset});
-}
-
-// Applied to elements that appear to make up the outer box of the checkmark, such as the frame
-// that contains the border and the actual background element that contains the marks.
-%md-checkbox-outer-box {
-  @extend %md-checkbox-cover-element;
-  border-radius: 2px;
-  box-sizing: border-box;
-  pointer-events: none;
-}
-
-md-checkbox {
-  cursor: pointer;
-
-  // Animation
-  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
-              md-elevation-transition-property-value();
-}
-
-.md-checkbox-layout {
-  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the md-checkbox
-  // (e.g. pointer by default, regular when disabled), instead of the browser default.
-  cursor: inherit;
-  align-items: baseline;
-  vertical-align: middle;
-  display: inline-flex;
-}
-
-.md-checkbox-inner-container {
-  display: inline-block;
-  height: $md-checkbox-size;
-  line-height: 0;
-  margin: auto;
-  margin-right: $md-checkbox-item-spacing;
-  order: 0;
-  position: relative;
-  vertical-align: middle;
-  white-space: nowrap;
-  width: $md-checkbox-size;
-  flex-shrink: 0;
-
-  [dir='rtl'] & {
-    margin: {
-      left: $md-checkbox-item-spacing;
-      right: auto;
-    }
-  }
-}
-
-// TODO(kara): Remove this style when fixing vertical baseline
-.md-checkbox-layout .md-checkbox-label {
-  line-height: 24px;
-}
-
-.md-checkbox-frame {
-  @extend %md-checkbox-outer-box;
-
-  background-color: transparent;
-  border: $md-checkbox-border-width solid;
-  transition: border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;
-  will-change: border-color;
-}
-
-.md-checkbox-background {
-  @extend %md-checkbox-outer-box;
-
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  transition: background-color $md-checkbox-transition-duration
-                  $md-linear-out-slow-in-timing-function,
-              opacity $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;
-  will-change: background-color, opacity;
-}
-
-.md-checkbox-checkmark {
-  @extend %md-checkbox-cover-element;
-  @extend %md-checkbox-mark;
-
-  width: 100%;
-}
-
-.md-checkbox-checkmark-path {
-  stroke: {
-    dashoffset: $_md-checkbox-mark-path-length;
-    dasharray: $_md-checkbox-mark-path-length;
-    width: $md-checkbox-mark-stroke-size;
-  }
-}
-
-.md-checkbox-mixedmark {
-  @extend %md-checkbox-mark;
-
-  height: floor($md-checkbox-mark-stroke-size);
-  opacity: 0;
-  transform: scaleX(0) rotate(0deg);
-}
-
-.md-checkbox-label-before {
-  .md-checkbox-inner-container {
-    order: 1;
-    margin: {
-      left: $md-checkbox-item-spacing;
-      right: auto;
-    }
-
-    [dir='rtl'] & {
-      margin: {
-        left: auto;
-        right: $md-checkbox-item-spacing;
-      }
-    }
-  }
-}
-
-.md-checkbox-checked {
-  .md-checkbox-checkmark {
-    opacity: 1;
-  }
-
-  .md-checkbox-checkmark-path {
-    stroke-dashoffset: 0;
-  }
-
-  .md-checkbox-mixedmark {
-    transform: scaleX(1) rotate(-45deg);
-  }
-}
-
-.md-checkbox-indeterminate {
-  .md-checkbox-checkmark {
-    opacity: 0;
-    transform: rotate(45deg);
-  }
-
-  .md-checkbox-checkmark-path {
-    stroke-dashoffset: 0;
-  }
-
-  .md-checkbox-mixedmark {
-    opacity: 1;
-    transform: scaleX(1) rotate(0deg);
-  }
-}
-
-
-.md-checkbox-unchecked {
-  .md-checkbox-background {
-    background-color: transparent;
-  }
-}
-
-.md-checkbox-disabled {
-  cursor: default;
-}
-
-.md-checkbox-anim {
-  $indeterminate-change-duration: 500ms;
-
-  &-unchecked-checked {
-    .md-checkbox-background {
-      animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background;
-    }
-
-    .md-checkbox-checkmark-path {
-      // Instead of delaying the animation, we simply multiply its length by 2 and begin the
-      // animation at 50% in order to prevent a flash of styles applied to a checked checkmark
-      // as the background is fading in before the animation begins.
-      animation:
-        $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-unchecked-checked-checkmark-path;
-    }
-  }
-
-  &-unchecked-indeterminate {
-    .md-checkbox-background {
-      animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background;
-    }
-
-    .md-checkbox-mixedmark {
-      animation:
-        $md-checkbox-transition-duration linear 0ms md-checkbox-unchecked-indeterminate-mixedmark;
-    }
-  }
-
-  &-checked-unchecked {
-    .md-checkbox-background {
-      animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background;
-    }
-
-    .md-checkbox-checkmark-path {
-      animation:
-        $md-checkbox-transition-duration linear 0ms md-checkbox-checked-unchecked-checkmark-path;
-    }
-  }
-
-  &-checked-indeterminate {
-    .md-checkbox-checkmark {
-      animation:
-        $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-checkmark;
-    }
-
-    .md-checkbox-mixedmark {
-      animation:
-        $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-mixedmark;
-    }
-  }
-
-  &-indeterminate-checked {
-    .md-checkbox-checkmark {
-      animation:
-        $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-checkmark;
-    }
-
-    .md-checkbox-mixedmark {
-      animation:
-        $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-mixedmark;
-    }
-  }
-
-  &-indeterminate-unchecked {
-    .md-checkbox-background {
-      animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background;
-    }
-
-    .md-checkbox-mixedmark {
-      animation:
-        $indeterminate-change-duration * 0.6 linear 0ms
-        md-checkbox-indeterminate-unchecked-mixedmark;
-    }
-  }
-}
-
-.md-checkbox-input {
-  // Move the input to the bottom and in the middle.
-  // Visual improvement to properly show browser popups when being required.
-  bottom: 0;
-  left: 50%;
-}
-
-.md-checkbox-ripple {
-  position: absolute;
-  left: -$md-checkbox-ripple-size;
-  top: -$md-checkbox-ripple-size;
-  right: -$md-checkbox-ripple-size;
-  bottom: -$md-checkbox-ripple-size;
-  border-radius: 50%;
-  z-index: 1;
-  pointer-events: none;
-}

package/checkbox/index.js

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

package/checkbox/index.js.map

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

package/chips/OVERVIEW.md

@@ -1,40 +0,0 @@
-`<md-chip-list>` displays a list of values as individual, keyboard accessible, chips.
-
-<!-- example(chips-overview) -->
-
-_Note: chips are still early in their development and more features are being actively worked on._
-
-```html
-<md-chip-list>
-  <md-chip>Papadum</md-chip>
-  <md-chip>Naan</md-chip>
-  <md-chip>Dal</md-chip>
-</md-chip-list>
-```
-
-### Unstyled chips
-By default, `<md-chip>` has Material Design styles applied. For a chip with no styles applied,
-use `<md-basic-chip>`. You can then customize the chip appearance by adding your own CSS.
-
-_Hint: `<md-basic-chip>` receives the `md-basic-chip` CSS class in addition to the `md-chip` class._
-
-### Selection
-Chips can be selected via the `selected` property. Selection can be disabled by setting
-`selectable` to `false` on the `<md-chip-list>`.
-
-Selection emits the `(select)` output while deselecting emits the `(deselect)` output. Both outputs
-receive a ChipEvent object with a structure of `{ chip: alteredChip }`.
-
-### Disabled chips
-Individual chips may be disabled by applying the `disabled` attribute to the chip. When disabled,
-chips are neither selectable nor focusable. Currently, disabled chips receive no special styling.
-
-### Keyboard interaction
-Users can move through the chips using the arrow keys and select/deselect them with the space. Chips
-also gain focus when clicked, ensuring keyboard navigation starts at the appropriate chip.
-
-
-### Theming
-The selected color of an `<md-chip>` can be changed by using the `color` property. By default, chips
-use a neutral background color based on the current theme (light or dark). This can be changed to 
-`'primary'`, `'accent'`, or `'warn'`.

package/chips/README.md

@@ -1,7 +0,0 @@
-# md-chips
-
-`md-chips` provides a horizontal display of (optionally) selectable, addable, and removable,
-items and an input to create additional ones (again; optional). You can read more about chips
-in the [Material Design spec](https://material.google.com/components/chips.html).
-
-This is a placeholder README for the eventual chips component.

package/chips/_chips-theme.scss

@@ -1,49 +0,0 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-
-@mixin md-chips-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);
-  $foreground: map-get($theme, foreground);
-
-  // Use spec-recommended color for regular foreground, and utilise contrast color for a grey very
-  // close to the selected spec since no guidance is provided and to ensure palette consistency.
-  $light-foreground: rgba(0, 0, 0, 0.87);
-  $light-selected-foreground: md-contrast($md-grey, 600);
-
-  // The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back
-  // to standard background and foreground colors.
-  $unselected-background: if($is-dark-theme, md-color($background, card), #e0e0e0);
-  $unselected-foreground: if($is-dark-theme, md-color($foreground, text), $light-foreground);
-
-  $selected-background: if($is-dark-theme, md-color($background, app-bar), #808080);
-  $selected-foreground: if($is-dark-theme, md-color($foreground, text), $light-selected-foreground);
-
-  .md-chip:not(.md-basic-chip) {
-    background-color: $unselected-background;
-    color: $unselected-foreground;
-  }
-
-  .md-chip.md-chip-selected:not(.md-basic-chip) {
-    background-color: $selected-background;
-    color: $selected-foreground;
-
-    &.md-primary {
-      background-color: md-color($primary, 500);
-      color: md-contrast($primary, 500);
-    }
-
-    &.md-accent {
-      background-color: md-color($accent, 500);
-      color: md-contrast($accent, 500);
-    }
-
-    &.md-warn {
-      background-color: md-color($warn, 500);
-      color: md-contrast($warn, 500);
-    }
-  }
-}

package/chips/chip-list.d.ts

@@ -1,66 +0,0 @@
-import { AfterContentInit, ElementRef, ModuleWithProviders, QueryList } from '@angular/core';
-import { MdChip } from './chip';
-import { ListKeyManager } from '../core/a11y/list-key-manager';
-/**
- * A material design chips component (named ChipList for it's similarity to the List component).
- *
- * Example:
- *
- *     <md-chip-list>
- *       <md-chip>Chip 1<md-chip>
- *       <md-chip>Chip 2<md-chip>
- *     </md-chip-list>
- */
-export declare class MdChipList implements AfterContentInit {
-    private _elementRef;
-    /** Track which chips we're listening to for focus/destruction. */
-    private _subscribed;
-    /** Whether or not the chip is selectable. */
-    protected _selectable: boolean;
-    /** The ListKeyManager which handles focus. */
-    _keyManager: ListKeyManager;
-    /** The chip components contained within this chip list. */
-    chips: QueryList<MdChip>;
-    constructor(_elementRef: ElementRef);
-    ngAfterContentInit(): void;
-    /**
-     * Whether or not this chip is selectable. When a chip is not selectable,
-     * it's selected state is always ignored.
-     */
-    selectable: boolean;
-    /**
-     * Programmatically focus the chip list. This in turn focuses the first
-     * non-disabled chip in this chip list.
-     */
-    focus(): void;
-    /** Passes relevant key presses to our key manager. */
-    _keydown(event: KeyboardEvent): void;
-    /** Toggles the selected state of the currently focused chip. */
-    protected _toggleSelectOnFocusedChip(): void;
-    /**
-     * Iterate through the list of chips and add them to our list of
-     * subscribed chips.
-     *
-     * @param chips The list of chips to be subscribed.
-     */
-    protected _subscribeChips(chips: QueryList<MdChip>): void;
-    /**
-     * Add a specific chip to our subscribed list. If the chip has
-     * already been subscribed, this ensures it is only subscribed
-     * once.
-     *
-     * @param chip The chip to be subscribed (or checked for existing
-     * subscription).
-     */
-    protected _addChip(chip: MdChip): void;
-    /**
-     * Utility to ensure all indexes are valid.
-     *
-     * @param index The index to be checked.
-     * @returns True if the index is valid for our list of chips.
-     */
-    private _isValidIndex(index);
-}
-export declare class MdChipsModule {
-    static forRoot(): ModuleWithProviders;
-}