@angular/material 2.0.0-alpha.9-3 → 2.0.0-beta.11

package/progress-bar/progress-bar.scss

@@ -1,229 +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%;
-  }
-
-  &[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-circle/README.md

@@ -1,51 +0,0 @@
-# md-progress-circle
-
-`md-progress-circle` 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-circle mode="determinate">`
-    * Indicates how long an operation will take when the percentage complete is detectable. 
- 2. Indeterminate - `<md-progress-circle 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-circle mode="determinate" [value]="myValue"></md-progress-circle>
-<md-progress-circle mode="indeterminate"></md-progress-circle>
-<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-circle mode="indeterminate" color="primary"></md-progress-circle>
-<md-progress-circle mode="indeterminate" color="accent"></md-progress-circle>
-<md-progress-circle mode="indeterminate" color="warn"></md-progress-circle>
- ```
-
-### 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-circle/_progress-circle-theme.scss

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

package/progress-circle/index.d.ts

@@ -1 +0,0 @@
-export * from './progress-circle';

package/progress-circle/index.js

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

package/progress-circle/index.js.map

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

package/progress-circle/index.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./progress-circle"}]}

package/progress-circle/progress-circle.css

@@ -1,43 +0,0 @@
-:host {
-  display: block;
-  height: 100px;
-  width: 100px; }
-  :host svg {
-    height: 100%;
-    width: 100%;
-    transform-origin: center; }
-  :host path {
-    fill: transparent;
-    stroke-width: 10px; }
-  :host[mode='indeterminate'] {
-    animation-duration: 5250ms, 2887.5ms;
-    animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate;
-    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear;
-    animation-iteration-count: infinite;
-    transition: none; }
-
-@keyframes md-progress-circle-linear-rotate {
-  0% {
-    transform: rotate(0deg); }
-  100% {
-    transform: rotate(360deg); } }
-
-@keyframes md-progress-circle-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); } }
-
-/*# sourceMappingURL=progress-circle.css.map */

package/progress-circle/progress-circle.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress-circle/progress-circle.css","sources":["progress-circle/progress-circle.scss","core/style/_variables.scss","core/typography/_typography.scss"],"sourcesContent":["@import '../core/style/variables';\n\n\n// Animation Durations \n$md-progress-circle-duration: 5250ms !default;\n$md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default;\n$md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default;\n\n// Component sizing \n$md-progress-circle-stroke-width: 10px !default;\n// Height and weight of the viewport for md-progress-circle.\n$md-progress-circle-viewport-size: 100px !default;\n\n\n:host {\n  display: block;\n  // Height and width are provided for md-progress-circle to act as a default.\n  // The height and width are expected to be overwritten by application css.\n  height: $md-progress-circle-viewport-size;\n  width: $md-progress-circle-viewport-size;\n\n  // SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed\n  // based on a 100px by 100px box.  Additionally all SVG sizes and locations are in reference to\n  // this viewBox.\n  svg {\n    height: 100%;\n    width: 100%;\n    transform-origin: center;\n  }\n\n\n  path {\n    fill: transparent;\n\n    // Stroke width of 10px defines stroke as 10% of the viewBox.\n    stroke-width: $md-progress-circle-stroke-width;\n  }\n\n\n  &[mode='indeterminate'] {\n    animation-duration: $md-progress-circle-sporadic-rotate-duration,\n                        $md-progress-circle-constant-rotate-duration;\n    animation-name: md-progress-circle-sporadic-rotate,\n                    md-progress-circle-linear-rotate;\n    animation-timing-function: $ease-in-out-curve-function,\n                               linear;\n    animation-iteration-count: infinite;\n    transition: none;\n  }\n}\n\n\n// Animations for indeterminate mode \n@keyframes md-progress-circle-linear-rotate {\n  0%       { transform: rotate(0deg); }\n  100%     { transform: rotate(360deg); }\n}\n@keyframes md-progress-circle-sporadic-rotate {\n  12.5%    { transform: rotate( 135deg); }\n  25%      { transform: rotate( 270deg); }\n  37.5%    { transform: rotate( 405deg); }\n  50%      { transform: rotate( 540deg); }\n  62.5%    { transform: rotate( 675deg); }\n  75%      { transform: rotate( 810deg); }\n  87.5%    { transform: rotate( 945deg); }\n  100%     { transform: rotate(1080deg); }\n}\n","@import '../typography/typography';\n\n\n// Typography\n$md-body-font-size-base: rem(1.4) !default;\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\n\n// Media queries\n$md-xsmall: 'max-width: 600px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Overlay z indices.\n$md-z-index-overlay: 1000;\n$md-z-index-overlay-container: 1;\n$md-z-index-overlay-backdrop: 1;\n\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$md-toggle-padding: 8px !default;\n// Width and height of input toggles\n$md-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n","// Implement the rem unit with SCSS so we don't have to actually set a font-size on\n// the user's body element.\n@function rem($multiplier) {\n  $font-size: 10px;\n  @return $multiplier * $font-size;\n}\n"],"mappings":"AAcA,AAAA,KAAK,CAAC;EACJ,OAAO,EAAE,KAAM;EAGf,MAAM,EAP2B,KAAK;EAQtC,KAAK,EAR4B,KAAK,GAsCvC;EAnCD,AAUE,KAVG,CAUH,GAAG,CAAC;IACF,MAAM,EAAE,IAAK;IACb,KAAK,EAAE,IAAK;IACZ,gBAAgB,EAAE,MAAO,GAC1B;EAdH,AAiBE,KAjBG,CAiBH,IAAI,CAAC;IACH,IAAI,EAAE,WAAY;IAGlB,YAAY,EA1BkB,IAAI,GA2BnC;EAtBH,AAAA,KAAK,CAyBF,AAAA,IAAC,CAAK,eAAe,AAApB,EAAsB;IACtB,kBAAkB,EApCQ,MAAM,EACU,QAA4B;IAqCtE,cAAc,EAAE,oEACiC;IACjD,yBAAyB,ECNA,8BAAY,EDOV,MAAM;IACjC,yBAAyB,EAAE,QAAS;IACpC,UAAU,EAAE,IAAK,GAClB;;AAKH,UAAU,CAAV,gCAAU;EACR,AAAA,EAAE;IAAS,SAAS,EAAE,YAAM;EAC5B,AAAA,IAAI;IAAO,SAAS,EAAE,cAAM;;AAE9B,UAAU,CAAV,kCAAU;EACR,AAAA,KAAK;IAAM,SAAS,EAAE,cAAM;EAC5B,AAAA,GAAG;IAAQ,SAAS,EAAE,cAAM;EAC5B,AAAA,KAAK;IAAM,SAAS,EAAE,cAAM;EAC5B,AAAA,GAAG;IAAQ,SAAS,EAAE,cAAM;EAC5B,AAAA,KAAK;IAAM,SAAS,EAAE,cAAM;EAC5B,AAAA,GAAG;IAAQ,SAAS,EAAE,cAAM;EAC5B,AAAA,KAAK;IAAM,SAAS,EAAE,cAAM;EAC5B,AAAA,IAAI;IAAO,SAAS,EAAE,eAAM","names":[],"sourceRoot":"/source/"}

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

@@ -1,76 +0,0 @@
-import { ModuleWithProviders, ChangeDetectorRef, OnDestroy } from '@angular/core';
-export declare type ProgressCircleMode = 'determinate' | 'indeterminate';
-/**
- * <md-progress-circle> component.
- */
-export declare class MdProgressCircle implements OnDestroy {
-    private _changeDetectorRef;
-    /** The id of the last requested animation. */
-    private _lastAnimationId;
-    /** The id of the indeterminate interval. */
-    private _interdeterminateInterval;
-    /**
-     * 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;
-    /** TODO: internal */
-    /** TODO: internal */
-    interdeterminateInterval: number;
-    /** The current path value, representing the progress circle. */
-    private _currentPath;
-    /** TODO: internal */
-    currentPath: string;
-    /** Clean up any animations that were running. */
-    ngOnDestroy(): void;
-    /**
-     * Value of the progress circle.
-     *
-     * Input:number
-     * _value 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: ProgressCircleMode;
-    private _mode;
-    constructor(_changeDetectorRef: ChangeDetectorRef);
-    /**
-     * 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();
-}
-/**
- * <md-spinner> component.
- *
- * This is a component definition to be used as a convenience reference to create an
- * indeterminate <md-progress-circle> instance.
- */
-export declare class MdSpinner extends MdProgressCircle {
-    constructor(changeDetectorRef: ChangeDetectorRef);
-}
-export declare class MdProgressCircleModule {
-    static forRoot(): ModuleWithProviders;
-}

package/progress-circle/progress-circle.html

@@ -1,9 +0,0 @@
-<!--
-  preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's
-  center.  The center of the circle with remain at the center of the md-progress-circle
-  element containing the SVG.
--->
-<svg viewBox="0 0 100 100"
-     preserveAspectRatio="xMidYMid meet">
-  <path [attr.d]="currentPath"></path>
-</svg>