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

package/slider/slider.css

@@ -1,122 +0,0 @@
-md-slider {
-  height: 48px;
-  min-width: 128px;
-  position: relative;
-  padding: 0;
-  display: inline-block;
-  outline: none;
-  vertical-align: middle; }
-
-md-slider *,
-md-slider *::after {
-  box-sizing: border-box; }
-
-.md-slider-wrapper {
-  width: 100%;
-  height: 100%;
-  padding-left: 8px;
-  padding-right: 8px; }
-
-.md-slider-container {
-  position: relative; }
-
-.md-slider-track-container {
-  width: 100%;
-  position: absolute;
-  top: 23px;
-  height: 2px; }
-
-.md-slider-track {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 100%; }
-
-.md-slider-track-fill {
-  transition-duration: 400ms;
-  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-  transition-property: width, height; }
-
-.md-slider-tick-container, .md-slider-last-tick-container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 100%; }
-
-.md-slider-thumb-container {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translate3d(-50%, -50%, 0);
-  transition-duration: 400ms;
-  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-  transition-property: left, bottom; }
-
-.md-slider-thumb-position {
-  transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); }
-
-.md-slider-thumb {
-  z-index: 1;
-  position: absolute;
-  top: 14px;
-  left: -10px;
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  transform: scale(0.7);
-  transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); }
-
-.md-slider-thumb::after {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  border-width: 3px;
-  border-style: solid;
-  transition: inherit; }
-
-.md-slider-thumb-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: -14px;
-  top: -17px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  transform: scale(0.4) translate3d(0, 67.5px, 0) rotate(45deg);
-  transition: 300ms cubic-bezier(0.35, 0, 0.25, 1);
-  transition-property: transform, border-radius; }
-
-.md-slider-thumb-label-text {
-  z-index: 1;
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 0;
-  transform: rotate(-45deg);
-  transition: opacity 300ms cubic-bezier(0.35, 0, 0.25, 1); }
-
-.md-slider-container:not(.md-slider-thumb-label-showing) .md-slider-thumb-label {
-  display: none; }
-
-.md-slider-active.md-slider-thumb-label-showing .md-slider-thumb {
-  transform: scale(0); }
-
-.md-slider-sliding .md-slider-thumb-position,
-.md-slider-sliding .md-slider-track-fill {
-  transition: none;
-  cursor: default; }
-
-.md-slider-active .md-slider-thumb {
-  transform: scale(1); }
-
-.md-slider-active .md-slider-thumb-label {
-  border-radius: 50% 50% 0;
-  transform: rotate(45deg); }
-
-.md-slider-active .md-slider-thumb-label-text {
-  opacity: 1; }
-
-/*# sourceMappingURL=slider.css.map */

package/slider/slider.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider/slider.css","sources":["slider/slider.scss","core/style/_variables.scss","core/typography/_typography.scss"],"sourcesContent":["@import '../core/style/variables';\n\n\n// This refers to the thickness of the slider. On a horizontal slider this is the height, on a\n// vertical slider this is the width.\n$md-slider-thickness: 48px !default;\n$md-slider-min-size: 128px !default;\n$md-slider-padding: 8px !default;\n\n$md-slider-track-height: 2px !default;\n$md-slider-thumb-size: 20px !default;\n\n$md-slider-thumb-default-scale: 0.7 !default;\n$md-slider-thumb-focus-scale: 1 !default;\n\n$md-slider-thumb-arrow-height: 16px !default;\n$md-slider-thumb-arrow-width: 28px !default;\n\n$md-slider-thumb-label-size: 28px !default;\n// The thumb has to be moved down so that it appears right over the slider track when visible and\n// on the slider track when not.\n$md-slider-thumb-label-top: ($md-slider-thickness / 2) -\n    ($md-slider-thumb-default-scale * $md-slider-thumb-size / 2) - $md-slider-thumb-label-size -\n    $md-slider-thumb-arrow-height + 10px !default;\n\n// Uses a container height and an item height to center an item vertically within the container.\n@function center-vertically($containerHeight, $itemHeight) {\n  @return ($containerHeight / 2) - ($itemHeight / 2);\n}\n\n// Positions the thumb based on its width and height.\n@mixin slider-thumb-position($width: $md-slider-thumb-size, $height: $md-slider-thumb-size) {\n  position: absolute;\n  top: center-vertically($md-slider-thickness, $height);\n  // This makes it so that the center of the thumb aligns with where the click was.\n  // This is not affected by the movement of the thumb.\n  left: (-$width / 2);\n  width: $width;\n  height: $height;\n  border-radius: max($width, $height);\n}\n\nmd-slider {\n  height: $md-slider-thickness;\n  min-width: $md-slider-min-size;\n  position: relative;\n  padding: 0;\n  display: inline-block;\n  outline: none;\n  vertical-align: middle;\n}\n\nmd-slider *,\nmd-slider *::after {\n  box-sizing: border-box;\n}\n\n// Exists in order to pad the slider and keep everything positioned correctly.\n// Cannot be merged with the .md-slider-container.\n.md-slider-wrapper {\n  width: 100%;\n  height: 100%;\n  padding-left: $md-slider-padding;\n  padding-right: $md-slider-padding;\n}\n\n\n// Holds the isActive and isSliding classes as well as helps with positioning the children.\n// Cannot be merged with .md-slider-wrapper.\n.md-slider-container {\n  position: relative;\n}\n\n.md-slider-track-container {\n  width: 100%;\n  position: absolute;\n  top: center-vertically($md-slider-thickness, $md-slider-track-height);\n  height: $md-slider-track-height;\n}\n\n.md-slider-track {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 100%;\n}\n\n.md-slider-track-fill {\n  transition-duration: $swift-ease-out-duration;\n  transition-timing-function: $swift-ease-out-timing-function;\n  transition-property: width, height;\n}\n\n.md-slider-tick-container, .md-slider-last-tick-container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 100%;\n}\n\n.md-slider-thumb-container {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translate3d(-50%, -50%, 0);\n  transition-duration: $swift-ease-out-duration;\n  transition-timing-function: $swift-ease-out-timing-function;\n  transition-property: left, bottom;\n}\n\n.md-slider-thumb-position {\n  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;\n}\n\n.md-slider-thumb {\n  z-index: 1;\n\n  @include slider-thumb-position($md-slider-thumb-size, $md-slider-thumb-size);\n  transform: scale($md-slider-thumb-default-scale);\n  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;\n}\n\n.md-slider-thumb::after {\n  content: '';\n  position: absolute;\n  width: $md-slider-thumb-size;\n  height: $md-slider-thumb-size;\n  border-radius: max($md-slider-thumb-size, $md-slider-thumb-size);\n  // Separate border properties because, if you combine them into \"border\", it defaults to 'black'.\n  border-width: 3px;\n  border-style: solid;\n  transition: inherit;\n}\n\n.md-slider-thumb-label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  position: absolute;\n  left: -($md-slider-thumb-label-size / 2);\n  top: $md-slider-thumb-label-top;\n  width: $md-slider-thumb-label-size;\n  height: $md-slider-thumb-label-size;\n  border-radius: 50%;\n\n  transform: scale(0.4) translate3d(0, (-$md-slider-thumb-label-top + 10) / 0.4, 0) rotate(45deg);\n  transition: 300ms $swift-ease-in-out-timing-function;\n  transition-property: transform, border-radius;\n}\n\n.md-slider-thumb-label-text {\n  z-index: 1;\n  font-size: 12px;\n  font-weight: bold;\n  opacity: 0;\n  transform: rotate(-45deg);\n  transition: opacity 300ms $swift-ease-in-out-timing-function;\n}\n\n.md-slider-container:not(.md-slider-thumb-label-showing) .md-slider-thumb-label {\n  display: none;\n}\n\n.md-slider-active.md-slider-thumb-label-showing .md-slider-thumb {\n  transform: scale(0);\n}\n\n.md-slider-sliding .md-slider-thumb-position,\n.md-slider-sliding .md-slider-track-fill {\n  transition: none;\n  cursor: default;\n}\n\n.md-slider-active .md-slider-thumb {\n  transform: scale($md-slider-thumb-focus-scale);\n}\n\n.md-slider-active .md-slider-thumb-label {\n  border-radius: 50% 50% 0;\n  transform: rotate(45deg);\n}\n\n.md-slider-active .md-slider-thumb-label-text {\n  opacity: 1;\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":"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","names":[],"sourceRoot":"/source/"}

package/slider/slider.d.ts

@@ -1,155 +0,0 @@
-import { ModuleWithProviders, ElementRef, AfterContentInit } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-/**
- * Provider Expression that allows md-slider to register as a ControlValueAccessor.
- * This allows it to support [(ngModel)] and [formControl].
- */
-export declare const MD_SLIDER_VALUE_ACCESSOR: any;
-export declare class MdSlider implements AfterContentInit, ControlValueAccessor {
-    /** A renderer to handle updating the slider's thumb and fill track. */
-    private _renderer;
-    /** The dimensions of the slider. */
-    private _sliderDimensions;
-    disabled: boolean;
-    /** Whether or not to show the thumb label. */
-    thumbLabel: boolean;
-    /** The miniumum value that the slider can have. */
-    private _min;
-    /** The maximum value that the slider can have. */
-    private _max;
-    /** The percentage of the slider that coincides with the value. */
-    private _percent;
-    private _controlValueAccessorChangeFn;
-    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
-    onTouched: () => any;
-    /** The values at which the thumb will snap. */
-    step: number;
-    /**
-     * How often to show ticks. Relative to the step so that a tick always appears on a step.
-     * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
-     */
-    _tickInterval: 'auto' | number;
-    /**
-     * Whether or not the thumb is sliding.
-     * Used to determine if there should be a transition for the thumb and fill track.
-     * TODO: internal
-     */
-    isSliding: boolean;
-    /**
-     * Whether or not the slider is active (clicked or sliding).
-     * Used to shrink and grow the thumb as according to the Material Design spec.
-     * TODO: internal
-     */
-    isActive: boolean;
-    /** Indicator for if the value has been set or not. */
-    private _isInitialized;
-    /** Value of the slider. */
-    private _value;
-    min: number;
-    max: number;
-    value: number;
-    constructor(elementRef: ElementRef);
-    /**
-     * Once the slider has rendered, grab the dimensions and update the position of the thumb and
-     * fill track.
-     * TODO: internal
-     */
-    ngAfterContentInit(): void;
-    /** TODO: internal */
-    onClick(event: MouseEvent): void;
-    /** TODO: internal */
-    onSlide(event: HammerInput): void;
-    /** TODO: internal */
-    onSlideStart(event: HammerInput): void;
-    /** TODO: internal */
-    onSlideEnd(): void;
-    /** TODO: internal */
-    onResize(): void;
-    /** TODO: internal */
-    onBlur(): void;
-    /**
-     * When the value changes without a physical position, the percentage needs to be recalculated
-     * independent of the physical location.
-     * This is also used to move the thumb to a snapped value once sliding is done.
-     */
-    updatePercentFromValue(): void;
-    /**
-     * Calculate the new value from the new physical location. The value will always be snapped.
-     */
-    updateValueFromPosition(pos: number): void;
-    /**
-     * Snaps the thumb to the current value.
-     * Called after a click or drag event is over.
-     */
-    snapThumbToValue(): void;
-    /**
-     * Calculates the separation in pixels of tick marks. If there is no tick interval or the interval
-     * is set to something other than a number or 'auto', nothing happens.
-     */
-    private _updateTickSeparation();
-    /**
-     * Calculates the optimal separation in pixels of tick marks based on the minimum auto tick
-     * separation constant.
-     */
-    private _updateAutoTickSeparation();
-    /**
-     * Calculates the separation of tick marks by finding the pixel value of the tickInterval.
-     */
-    private _updateTickSeparationFromInterval();
-    /**
-     * Calculates the percentage of the slider that a value is.
-     */
-    calculatePercentage(value: number): number;
-    /**
-     * Calculates the value a percentage of the slider corresponds to.
-     */
-    calculateValue(percentage: number): number;
-    /**
-     * Return a number between two numbers.
-     */
-    clamp(value: number, min?: number, max?: number): number;
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    writeValue(value: any): void;
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    registerOnChange(fn: (value: any) => void): void;
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    registerOnTouched(fn: any): void;
-}
-/**
- * Renderer class in order to keep all dom manipulation in one place and outside of the main class.
- */
-export declare class SliderRenderer {
-    private _sliderElement;
-    constructor(elementRef: ElementRef);
-    /**
-     * Get the bounding client rect of the slider track element.
-     * The track is used rather than the native element to ignore the extra space that the thumb can
-     * take up.
-     */
-    getSliderDimensions(): ClientRect;
-    /**
-     * Update the physical position of the thumb and fill track on the slider.
-     */
-    updateThumbAndFillPosition(percent: number, width: number): void;
-    /**
-     * Focuses the native element.
-     * Currently only used to allow a blur event to fire but will be used with keyboard input later.
-     */
-    addFocus(): void;
-    /**
-     * Draws ticks onto the tick container.
-     */
-    drawTicks(tickSeparation: number): void;
-}
-export declare class MdSliderModule {
-    static forRoot(): ModuleWithProviders;
-}

package/slider/slider.html

@@ -1,21 +0,0 @@
-<div class="md-slider-wrapper">
-  <div class="md-slider-container"
-       [class.md-slider-sliding]="isSliding"
-       [class.md-slider-active]="isActive"
-       [class.md-slider-thumb-label-showing]="thumbLabel">
-    <div class="md-slider-track-container">
-      <div class="md-slider-track"></div>
-      <div class="md-slider-track md-slider-track-fill"></div>
-      <div class="md-slider-tick-container"></div>
-      <div class="md-slider-last-tick-container"></div>
-    </div>
-    <div class="md-slider-thumb-container">
-      <div class="md-slider-thumb-position">
-        <div class="md-slider-thumb"></div>
-        <div class="md-slider-thumb-label">
-          <span class="md-slider-thumb-label-text">{{value}}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>