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

package/progress-bar/progress-bar.scss

@@ -1,230 +0,0 @@
-@import '../core/style/variables';
-
-
-$md-progress-bar-height: 5px !default;
-$md-progress-bar-full-animation-duration: 2000ms !default;
-$md-progress-bar-piece-animation-duration: 250ms !default;
-
-
-:host {
-  display: block;
-  // Height is provided for md-progress-bar to act as a default.
-  height: $md-progress-bar-height;
-  overflow: hidden;
-  position: relative;
-  // translateZ is added to force the md-progress-bar into its own GPU layer.
-  transform: translateZ(0);
-  transition: opacity $md-progress-bar-piece-animation-duration linear;
-  width: 100%;
-
-  // The progress bar background is used to show the bubble animation scrolling behind a
-  // buffering progress bar.
-  .md-progress-bar-background {
-    background-repeat: repeat-x;
-    background-size: 10px 4px;
-    height: 100%;
-    position: absolute;
-    visibility: hidden;
-    width: 100%;
-  }
-
-  // The progress bar buffer is the bar indicator showing the buffer value and is only visible
-  // beyond the current value of the primary progress bar.
-  .md-progress-bar-buffer {
-    height: 100%;
-    position: absolute;
-    transform-origin: top left;
-    transition: transform $md-progress-bar-piece-animation-duration ease;
-    width: 100%;
-  }
-
-   // The secondary progress bar is only used in the indeterminate animation, because of this it
-   // is hidden in other uses.
-  .md-progress-bar-secondary {
-    visibility: hidden;
-  }
-
-  // The progress bar fill fills the progress bar with the indicator color.
-  .md-progress-bar-fill {
-    animation: none;
-    height: 100%;
-    position: absolute;
-    transform-origin: top left;
-    transition: transform $md-progress-bar-piece-animation-duration ease;
-    width: 100%;
-  }
-
-  // A pseudo element is created for each progress bar bar that fills with the indicator color.
-  .md-progress-bar-fill::after {
-    animation: none;
-    content: '';
-    display: inline-block;
-    height: 100%;
-    position: absolute;
-    width: 100%;
-    left: 0;
-  }
-
-  &[mode='query'] {
-    transform: rotateZ(180deg);
-  }
-
-  &[mode='indeterminate'],
-  &[mode='query'] {
-    .md-progress-bar-fill {
-      transition: none;
-    }
-    .md-progress-bar-primary {
-      animation: md-progress-bar-primary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;
-      left: -145.166611%;
-    }
-    .md-progress-bar-primary.md-progress-bar-fill::after {
-      animation: md-progress-bar-primary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;
-    }
-    .md-progress-bar-secondary {
-      animation: md-progress-bar-secondary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;
-      left: -54.888891%;
-      visibility: visible;
-    }
-    .md-progress-bar-secondary.md-progress-bar-fill::after {
-      animation: md-progress-bar-secondary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;
-    }
-  }
-
-  &[mode='buffer'] {
-    .md-progress-bar-background {
-      animation: md-progress-bar-background-scroll $md-progress-bar-piece-animation-duration infinite linear;
-      visibility: visible;
-    }
-  }
-}
-
-
-// Reverse the apparent directionality of progress vars for rtl.
-:host-context([dir='rtl']) {
-  transform: rotateY(180deg);
-}
-
-// The values used for animations in md-progress-bar, both timing and transformation, can be
-// considered magic values. They are sourced from the Material Design example spec and duplicate
-// the values of the original designers definitions.
-//
-// The indeterminate state is essentially made up of two progress bars, one primary (the one that
-// is shown in both the determinate and indeterminate states) and one secondary, which essentially
-// mirrors the primary progress bar in appearance but is only shown to assist with the
-// indeterminate animations.
-
-// KEYFRAME BLOCK	                   DESCRIPTION
-// primary-indeterminate-translate     Translation of the primary progressbar across the screen
-// primary-indeterminate-scale         Scaling of the primary bar as it's being translated across the screen
-// secondary-indeterminate-translate   Translation of the secondary bar across the screen
-// secondary-indeterminate-scale       Scaling of the secondary bar as it's being translated across the screen
-//
-// Because two different transform animations need to be applied at once, the translation is
-// applied to the outer element and the scaling is applied to the inner element, which provides the
-// illusion necessary to make the animation work.
-
-
-// Progress Bar Timing functions:
-// $md-progress-bar-primary-indeterminate-translate-step-1 has no timing function.
-$md-progress-bar-primary-indeterminate-translate-step-2: cubic-bezier(0.5, 0, 0.701732, 0.495819) !default;
-$md-progress-bar-primary-indeterminate-translate-step-3: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default;
-// $md-progress-bar-primary-indeterminate-translate-step-4 has no timing function.
-
-// $md-progress-bar-primary-indeterminate-scale-step-1 has no timing function
-$md-progress-bar-primary-indeterminate-scale-step-2: cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default;
-$md-progress-bar-primary-indeterminate-scale-step-3: cubic-bezier(0.06, 0.11, 0.6, 1) !default;
-// $md-progress-bar-primary-indeterminate-scale-step-4 has no timing function
-
-$md-progress-bar-secondary-indeterminate-translate-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
-$md-progress-bar-secondary-indeterminate-translate-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
-$md-progress-bar-secondary-indeterminate-translate-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
-// $md-progress-bar-secondary-indeterminate-translate-step-4 has no timing function
-
-$md-progress-bar-secondary-indeterminate-scale-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
-$md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
-$md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
-// $md-progress-bar-secondary-indeterminate-scale-step-4 has no timing function
-
-
-// Animations for indeterminate and query mode.
-
-// Primary indicator.
-@keyframes md-progress-bar-primary-indeterminate-translate {
-  0% {
-    transform: translateX(0);
-  }
-  20% {
-    animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-2;
-    transform: translateX(0);
-  }
-  59.15% {
-    animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-3;
-    transform: translateX(83.67142%);
-  }
-  100% {
-    transform: translateX(200.611057%);
-  }
-}
-
-@keyframes md-progress-bar-primary-indeterminate-scale {
-  0% {
-    transform: scaleX(0.08);
-  }
-  36.65% {
-    animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-2;
-    transform: scaleX(0.08);
-  }
-  69.15% {
-    animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-3;
-    transform: scaleX(0.661479);
-  }
-  100% {
-    transform: scaleX(0.08);
-  }
-}
-
-// Secondary indicator.
-@keyframes md-progress-bar-secondary-indeterminate-translate {
-  0% {
-    animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-1;
-    transform: translateX(0);
-  }
-  25% {
-    animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-2;
-
-    transform: translateX(37.651913%);
-  }
-  48.35% {
-    animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-3;
-    transform: translateX(84.386165%);
-  }
-  100% {
-    transform: translateX(160.277782%);
-  }
-}
-
-@keyframes md-progress-bar-secondary-indeterminate-scale {
-  0% {
-    animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-1;
-    transform: scaleX(0.08);
-  }
-  19.15% {
-    animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-2;
-    transform: scaleX(0.457104);
-  }
-  44.15% {
-    animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-3;
-    transform: scaleX(0.72796);
-  }
-  100% {
-    transform: scaleX(0.08);
-  }
-}
-
-// Animation for buffer mode.
-@keyframes md-progress-bar-background-scroll {
-  to {
-    transform: translateX(-10px);
-  }
-}

package/progress-spinner/OVERVIEW.md

@@ -1,23 +0,0 @@
-`<md-progress-spinner>` and `<md-spinner>` are a circular indicators of progress and activity.
-
-<!-- example(progress-spinner-overview) -->
-
-### Progress mode
-The progress-spinner supports two modes, "determinate" and "indeterminate". 
-The `<md-spinner>` component is an alias for `<md-progress-spinner mode="indeterminate">`.
-
-| Mode          | Description                                                                      |
-|---------------|----------------------------------------------------------------------------------|
-| determinate   | Standard progress indicator, fills from 0% to 100%                               |
-| indeterminate | Indicates that something is happening without conveying a discrete progress      |
-
-
-The default mode is "determinate". In this mode, the progress is set via the `value` property, 
-which can be a whole number between 0 and 100.
-
-In "indeterminate" mode, the `value` property is ignored.
-
-
-### Theming
-The color of a progress-spinner can be changed by using the `color` property. By default, 
-progress-spinners use the theme's primary color. This can be changed to `'accent'` or `'warn'`.

package/progress-spinner/README.md

@@ -1,51 +0,0 @@
-# md-progress-spinner
-
-`md-progress-spinner` is a component for indicating progress and activity, matching the spec of 
-[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html).
-
-### Progress Modes
-
-There are two modes:
- 1. Determinate - `<md-progress-spinner mode="determinate">`
-    * Indicates how long an operation will take when the percentage complete is detectable. 
- 2. Indeterminate - `<md-progress-spinner mode="indeterminate">` or `<md-spinner>`
-    * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it
-      will take.
-
-Example:
-
- ```html
-<md-progress-spinner mode="determinate" [value]="myValue"></md-progress-spinner>
-<md-progress-spinner mode="indeterminate"></md-progress-spinner>
-<md-spinner></md-spinner>
- ```
-
-### Theming
-
-All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class.
-
-Example:
-
- ```html
-<md-progress-spinner mode="indeterminate" color="primary"></md-progress-spinner>
-<md-progress-spinner mode="indeterminate" color="accent"></md-progress-spinner>
-<md-progress-spinner mode="indeterminate" color="warn"></md-progress-spinner>
- ```
-
-### Accessibility
-
- * ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes.
-
-### Upcoming work
-
- * Adding ARIA attribute for progressbar "for".
-
-### API Summary
-
-Properties:
-
-| Name      | Type                              | Description |
-| ---       | ---                               | --- |
-| `color`   | `"primary"|"accent"|"warn"`       | The color palette of the progress indicator |
-| `mode`    | `"determinate"|"indeterminate"`   | The mode of the progress indicator |
-| `value`   | number                            | The current progress percentage for determinate indicators |

package/progress-spinner/_progress-spinner-theme.scss

@@ -1,23 +0,0 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-
-
-@mixin md-progress-spinner-theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-
-  md-progress-spinner, md-progress-circle, md-spinner {
-    path {
-      stroke: md-color($primary, 600);
-    }
-
-    &.md-accent path {
-      stroke: md-color($accent, 600);
-    }
-
-    &.md-warn path {
-      stroke: md-color($warn, 600);
-    }
-  }
-}

package/progress-spinner/index.js

@@ -1,4 +0,0 @@
-export * from './progress-circle';
-export * from './progress-spinner';
-
-//# sourceMappingURL=index.js.map

package/progress-spinner/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["progress-spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC","file":"index.js","sourcesContent":["export * from './progress-circle';\nexport * from './progress-spinner';\n"]}

package/progress-spinner/progress-circle.d.ts

@@ -1,4 +0,0 @@
-/** @deprecated */
-export { MdProgressSpinner as MdProgressCircle } from './progress-spinner';
-/** @deprecated */
-export { MdProgressSpinnerModule as MdProgressCircleModule } from './progress-spinner';

package/progress-spinner/progress-circle.js

@@ -1,6 +0,0 @@
-/** @deprecated */
-export { MdProgressSpinner as MdProgressCircle } from './progress-spinner';
-/** @deprecated */
-export { MdProgressSpinnerModule as MdProgressCircleModule } from './progress-spinner';
-
-//# sourceMappingURL=progress-circle.js.map

package/progress-spinner/progress-circle.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["progress-spinner/progress-circle.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,SAAQ,iBAAiB,IAAI,gBAAgB,QAAO,oBAAoB,CAAC;AACzE,kBAAkB;AAClB,SAAQ,uBAAuB,IAAI,sBAAsB,QAAO,oBAAoB,CAAC","file":"progress-circle.js","sourcesContent":["/** @deprecated */\nexport {MdProgressSpinner as MdProgressCircle} from './progress-spinner';\n/** @deprecated */\nexport {MdProgressSpinnerModule as MdProgressCircleModule} from './progress-spinner';\n"]}

package/progress-spinner/progress-circle.metadata.json

@@ -1 +0,0 @@
-[{"__symbolic":"module","version":2,"metadata":{},"exports":[{"from":"./progress-spinner","export":[{"name":"MdProgressSpinner","as":"MdProgressCircle"}]},{"from":"./progress-spinner","export":[{"name":"MdProgressSpinnerModule","as":"MdProgressCircleModule"}]}]},{"__symbolic":"module","exports":[{"from":"./progress-spinner","export":[{"name":"MdProgressSpinner","as":"MdProgressCircle"}]},{"from":"./progress-spinner","export":[{"name":"MdProgressSpinnerModule","as":"MdProgressCircleModule"}]}],"metadata":{},"version":1}]

package/progress-spinner/progress-spinner.css

@@ -1 +0,0 @@
-:host{display:block;height:100px;width:100px;overflow:hidden}:host svg{height:100%;width:100%;transform-origin:center}:host path{fill:transparent;stroke-width:10px}:host[mode=indeterminate] svg{animation-duration:5.25s,2.887s;animation-name:md-progress-spinner-sporadic-rotate,md-progress-spinner-linear-rotate;animation-timing-function:cubic-bezier(.35,0,.25,1),linear;animation-iteration-count:infinite;transition:none}@keyframes md-progress-spinner-linear-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes md-progress-spinner-sporadic-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}

package/progress-spinner/progress-spinner.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["progress-spinner.css"],"names":[],"mappings":"AAAA;EACE,eAAe;EACf,cAAc;EACd,aAAa;EACb,iBAAiB,EAAE;EACnB;IACE,aAAa;IACb,YAAY;IACZ,yBAAyB,EAAE;EAC7B;IACE,kBAAkB;IAClB,mBAAmB,EAAE;EACvB;IACE,qCAAqC;IACrC,uFAAuF;IACvF,kEAAkE;IAClE,oCAAoC;IACpC,iBAAiB,EAAE;;AAEvB;EACE;IACE,wBAAwB,EAAE;EAC5B;IACE,0BAA0B,EAAE,EAAE;;AAElC;EACE;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,2BAA2B,EAAE,EAAE","file":"progress-spinner.css","sourcesContent":[":host {\n  display: block;\n  height: 100px;\n  width: 100px;\n  overflow: hidden; }\n  :host svg {\n    height: 100%;\n    width: 100%;\n    transform-origin: center; }\n  :host path {\n    fill: transparent;\n    stroke-width: 10px; }\n  :host[mode='indeterminate'] svg {\n    animation-duration: 5250ms, 2887.5ms;\n    animation-name: md-progress-spinner-sporadic-rotate, md-progress-spinner-linear-rotate;\n    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear;\n    animation-iteration-count: infinite;\n    transition: none; }\n\n@keyframes md-progress-spinner-linear-rotate {\n  0% {\n    transform: rotate(0deg); }\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes md-progress-spinner-sporadic-rotate {\n  12.5% {\n    transform: rotate(135deg); }\n  25% {\n    transform: rotate(270deg); }\n  37.5% {\n    transform: rotate(405deg); }\n  50% {\n    transform: rotate(540deg); }\n  62.5% {\n    transform: rotate(675deg); }\n  75% {\n    transform: rotate(810deg); }\n  87.5% {\n    transform: rotate(945deg); }\n  100% {\n    transform: rotate(1080deg); } }\n"]}

package/progress-spinner/progress-spinner.d.ts

@@ -1,80 +0,0 @@
-import { ModuleWithProviders, ChangeDetectorRef, OnDestroy, ElementRef, NgZone } from '@angular/core';
-export declare type ProgressSpinnerMode = 'determinate' | 'indeterminate';
-/**
- * <md-progress-spinner> component.
- */
-export declare class MdProgressSpinner implements OnDestroy {
-    private _changeDetectorRef;
-    private _ngZone;
-    private _elementRef;
-    /** The id of the last requested animation. */
-    private _lastAnimationId;
-    /** The id of the indeterminate interval. */
-    private _interdeterminateInterval;
-    /** The SVG <path> node that is used to draw the circle. */
-    private _path;
-    /**
-     * Values for aria max and min are only defined as numbers when in a determinate mode.  We do this
-     * because voiceover does not report the progress indicator as indeterminate if the aria min
-     * and/or max value are number values.
-     */
-    readonly _ariaValueMin: number;
-    readonly _ariaValueMax: number;
-    /** @docs-private */
-    /** @docs-private */
-    interdeterminateInterval: number;
-    /**
-     * Clean up any animations that were running.
-     */
-    ngOnDestroy(): void;
-    /** Value of the progress circle. It is bound to the host as the attribute aria-valuenow. */
-    private _value;
-    value: number;
-    /**
-     * Mode of the progress circle
-     *
-     * Input must be one of the values from ProgressMode, defaults to 'determinate'.
-     * mode is bound to the host as the attribute host.
-     */
-    mode: ProgressSpinnerMode;
-    private _mode;
-    color: 'primary' | 'accent' | 'warn';
-    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _elementRef: ElementRef);
-    /**
-     * Animates the circle from one percentage value to another.
-     *
-     * @param animateFrom The percentage of the circle filled starting the animation.
-     * @param animateTo The percentage of the circle filled ending the animation.
-     * @param ease The easing function to manage the pace of change in the animation.
-     * @param duration The length of time to show the animation, in milliseconds.
-     * @param rotation The starting angle of the circle fill, with 0° represented at the top center
-     *    of the circle.
-     */
-    private _animateCircle(animateFrom, animateTo, ease, duration, rotation);
-    /**
-     * Starts the indeterminate animation interval, if it is not already running.
-     */
-    private _startIndeterminateAnimation();
-    /**
-     * Removes interval, ending the animation.
-     */
-    private _cleanupIndeterminateAnimation();
-    /**
-     * Renders the arc onto the SVG element. Proxies `getArc` while setting the proper
-     * DOM attribute on the `<path>`.
-     */
-    private _renderArc(currentValue, rotation);
-}
-/**
- * <md-spinner> component.
- *
- * This is a component definition to be used as a convenience reference to create an
- * indeterminate <md-progress-spinner> instance.
- */
-export declare class MdSpinner extends MdProgressSpinner implements OnDestroy {
-    constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, ngZone: NgZone);
-    ngOnDestroy(): void;
-}
-export declare class MdProgressSpinnerModule {
-    static forRoot(): ModuleWithProviders;
-}

package/progress-spinner/progress-spinner.html

@@ -1 +0,0 @@
-<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><path></path></svg>