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

package/slider/slider.js

@@ -1,433 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { NgModule, Component, ElementRef, HostBinding, Input, ViewEncapsulation, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
-import { BooleanFieldValue, MdGestureConfig, applyCssTransform } from '../core';
-/**
- * Visually, a 30px separation between tick marks looks best. This is very subjective but it is
- * the default separation we chose.
- */
-var MIN_AUTO_TICK_SEPARATION = 30;
-/**
- * Provider Expression that allows md-slider to register as a ControlValueAccessor.
- * This allows it to support [(ngModel)] and [formControl].
- */
-export var MD_SLIDER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(function () { return MdSlider; }),
-    multi: true
-};
-export var MdSlider = (function () {
-    function MdSlider(elementRef) {
-        /** A renderer to handle updating the slider's thumb and fill track. */
-        this._renderer = null;
-        /** The dimensions of the slider. */
-        this._sliderDimensions = null;
-        this.disabled = false;
-        /** Whether or not to show the thumb label. */
-        this.thumbLabel = false;
-        /** The miniumum value that the slider can have. */
-        this._min = 0;
-        /** The maximum value that the slider can have. */
-        this._max = 100;
-        /** The percentage of the slider that coincides with the value. */
-        this._percent = 0;
-        this._controlValueAccessorChangeFn = function (value) { };
-        /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
-        this.onTouched = function () { };
-        /** The values at which the thumb will snap. */
-        this.step = 1;
-        /**
-         * Whether or not the thumb is sliding.
-         * Used to determine if there should be a transition for the thumb and fill track.
-         * TODO: internal
-         */
-        this.isSliding = false;
-        /**
-         * 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
-         */
-        this.isActive = false;
-        /** Indicator for if the value has been set or not. */
-        this._isInitialized = false;
-        /** Value of the slider. */
-        this._value = 0;
-        this._renderer = new SliderRenderer(elementRef);
-    }
-    Object.defineProperty(MdSlider.prototype, "min", {
-        get: function () {
-            return this._min;
-        },
-        set: function (v) {
-            // This has to be forced as a number to handle the math later.
-            this._min = Number(v);
-            // If the value wasn't explicitly set by the user, set it to the min.
-            if (!this._isInitialized) {
-                this.value = this._min;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MdSlider.prototype, "max", {
-        get: function () {
-            return this._max;
-        },
-        set: function (v) {
-            this._max = Number(v);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MdSlider.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        set: function (v) {
-            // Only set the value to a valid number. v is casted to an any as we know it will come in as a
-            // string but it is labeled as a number which causes parseFloat to not accept it.
-            if (isNaN(parseFloat(v))) {
-                return;
-            }
-            this._value = Number(v);
-            this._isInitialized = true;
-            this._controlValueAccessorChangeFn(this._value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Once the slider has rendered, grab the dimensions and update the position of the thumb and
-     * fill track.
-     * TODO: internal
-     */
-    MdSlider.prototype.ngAfterContentInit = function () {
-        this._sliderDimensions = this._renderer.getSliderDimensions();
-        // This needs to be called after content init because the value can be set to the min if the
-        // value itself isn't set. If this happens, the control value accessor needs to be updated.
-        this._controlValueAccessorChangeFn(this.value);
-        this.snapThumbToValue();
-        this._updateTickSeparation();
-    };
-    /** TODO: internal */
-    MdSlider.prototype.onClick = function (event) {
-        if (this.disabled) {
-            return;
-        }
-        this.isActive = true;
-        this.isSliding = false;
-        this._renderer.addFocus();
-        this.updateValueFromPosition(event.clientX);
-        this.snapThumbToValue();
-    };
-    /** TODO: internal */
-    MdSlider.prototype.onSlide = function (event) {
-        if (this.disabled) {
-            return;
-        }
-        // Prevent the slide from selecting anything else.
-        event.preventDefault();
-        this.updateValueFromPosition(event.center.x);
-    };
-    /** TODO: internal */
-    MdSlider.prototype.onSlideStart = function (event) {
-        if (this.disabled) {
-            return;
-        }
-        event.preventDefault();
-        this.isSliding = true;
-        this.isActive = true;
-        this._renderer.addFocus();
-        this.updateValueFromPosition(event.center.x);
-    };
-    /** TODO: internal */
-    MdSlider.prototype.onSlideEnd = function () {
-        this.isSliding = false;
-        this.snapThumbToValue();
-    };
-    /** TODO: internal */
-    MdSlider.prototype.onResize = function () {
-        this.isSliding = true;
-        this._sliderDimensions = this._renderer.getSliderDimensions();
-        // Skip updating the value and position as there is no new placement.
-        this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
-    };
-    /** TODO: internal */
-    MdSlider.prototype.onBlur = function () {
-        this.isActive = false;
-        this.onTouched();
-    };
-    /**
-     * 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.
-     */
-    MdSlider.prototype.updatePercentFromValue = function () {
-        this._percent = this.calculatePercentage(this.value);
-    };
-    /**
-     * Calculate the new value from the new physical location. The value will always be snapped.
-     */
-    MdSlider.prototype.updateValueFromPosition = function (pos) {
-        var offset = this._sliderDimensions.left;
-        var size = this._sliderDimensions.width;
-        // The exact value is calculated from the event and used to find the closest snap value.
-        this._percent = this.clamp((pos - offset) / size);
-        var exactValue = this.calculateValue(this._percent);
-        // This calculation finds the closest step by finding the closest whole number divisible by the
-        // step relative to the min.
-        var closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;
-        // The value needs to snap to the min and max.
-        this.value = this.clamp(closestValue, this.min, this.max);
-        this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
-    };
-    /**
-     * Snaps the thumb to the current value.
-     * Called after a click or drag event is over.
-     */
-    MdSlider.prototype.snapThumbToValue = function () {
-        this.updatePercentFromValue();
-        this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
-    };
-    /**
-     * 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.
-     */
-    MdSlider.prototype._updateTickSeparation = function () {
-        if (this._tickInterval == 'auto') {
-            this._updateAutoTickSeparation();
-        }
-        else if (Number(this._tickInterval)) {
-            this._updateTickSeparationFromInterval();
-        }
-    };
-    /**
-     * Calculates the optimal separation in pixels of tick marks based on the minimum auto tick
-     * separation constant.
-     */
-    MdSlider.prototype._updateAutoTickSeparation = function () {
-        // We're looking for the multiple of step for which the separation between is greater than the
-        // minimum tick separation.
-        var sliderWidth = this._sliderDimensions.width;
-        // This is the total "width" of the slider in terms of values.
-        var valueWidth = this.max - this.min;
-        // Calculate how many values exist within 1px on the slider.
-        var valuePerPixel = valueWidth / sliderWidth;
-        // Calculate how many values exist in the minimum tick separation (px).
-        var valuePerSeparation = valuePerPixel * MIN_AUTO_TICK_SEPARATION;
-        // Calculate how many steps exist in this separation. This will be the lowest value you can
-        // multiply step by to get a separation that is greater than or equal to the minimum tick
-        // separation.
-        var stepsPerSeparation = Math.ceil(valuePerSeparation / this.step);
-        // Get the percentage of the slider for which this tick would be located so we can then draw
-        // it on the slider.
-        var tickPercentage = this.calculatePercentage((this.step * stepsPerSeparation) + this.min);
-        // The pixel value of the tick is the percentage * the width of the slider. Use this to draw
-        // the ticks on the slider.
-        this._renderer.drawTicks(sliderWidth * tickPercentage);
-    };
-    /**
-     * Calculates the separation of tick marks by finding the pixel value of the tickInterval.
-     */
-    MdSlider.prototype._updateTickSeparationFromInterval = function () {
-        // Force tickInterval to be a number so it can be used in calculations.
-        var interval = this._tickInterval;
-        // Calculate the first value a tick will be located at by getting the step at which the interval
-        // lands and adding that to the min.
-        var tickValue = (this.step * interval) + this.min;
-        // The percentage of the step on the slider is needed in order to calculate the pixel offset
-        // from the beginning of the slider. This offset is the tick separation.
-        var tickPercentage = this.calculatePercentage(tickValue);
-        this._renderer.drawTicks(this._sliderDimensions.width * tickPercentage);
-    };
-    /**
-     * Calculates the percentage of the slider that a value is.
-     */
-    MdSlider.prototype.calculatePercentage = function (value) {
-        return (value - this.min) / (this.max - this.min);
-    };
-    /**
-     * Calculates the value a percentage of the slider corresponds to.
-     */
-    MdSlider.prototype.calculateValue = function (percentage) {
-        return this.min + (percentage * (this.max - this.min));
-    };
-    /**
-     * Return a number between two numbers.
-     */
-    MdSlider.prototype.clamp = function (value, min, max) {
-        if (min === void 0) { min = 0; }
-        if (max === void 0) { max = 1; }
-        return Math.max(min, Math.min(value, max));
-    };
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    MdSlider.prototype.writeValue = function (value) {
-        this.value = value;
-        if (this._sliderDimensions) {
-            this.snapThumbToValue();
-        }
-    };
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    MdSlider.prototype.registerOnChange = function (fn) {
-        this._controlValueAccessorChangeFn = fn;
-    };
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    MdSlider.prototype.registerOnTouched = function (fn) {
-        this.onTouched = fn;
-    };
-    __decorate([
-        Input(),
-        BooleanFieldValue(),
-        HostBinding('class.md-slider-disabled'),
-        HostBinding('attr.aria-disabled'), 
-        __metadata('design:type', Boolean)
-    ], MdSlider.prototype, "disabled", void 0);
-    __decorate([
-        Input('thumb-label'),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdSlider.prototype, "thumbLabel", void 0);
-    __decorate([
-        Input(), 
-        __metadata('design:type', Number)
-    ], MdSlider.prototype, "step", void 0);
-    __decorate([
-        Input('tick-interval'), 
-        __metadata('design:type', Object)
-    ], MdSlider.prototype, "_tickInterval", void 0);
-    __decorate([
-        Input(),
-        HostBinding('attr.aria-valuemin'), 
-        __metadata('design:type', Object)
-    ], MdSlider.prototype, "min", null);
-    __decorate([
-        Input(),
-        HostBinding('attr.aria-valuemax'), 
-        __metadata('design:type', Object)
-    ], MdSlider.prototype, "max", null);
-    __decorate([
-        Input(),
-        HostBinding('attr.aria-valuenow'), 
-        __metadata('design:type', Object)
-    ], MdSlider.prototype, "value", null);
-    MdSlider = __decorate([
-        Component({selector: 'md-slider',
-            providers: [MD_SLIDER_VALUE_ACCESSOR],
-            host: {
-                'tabindex': '0',
-                '(click)': 'onClick($event)',
-                '(slide)': 'onSlide($event)',
-                '(slidestart)': 'onSlideStart($event)',
-                '(slideend)': 'onSlideEnd()',
-                '(window:resize)': 'onResize()',
-                '(blur)': 'onBlur()',
-            },
-            template: "<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> ",
-            styles: ["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 */ "],
-            encapsulation: ViewEncapsulation.None,
-        }), 
-        __metadata('design:paramtypes', [ElementRef])
-    ], MdSlider);
-    return MdSlider;
-}());
-/**
- * Renderer class in order to keep all dom manipulation in one place and outside of the main class.
- */
-export var SliderRenderer = (function () {
-    function SliderRenderer(elementRef) {
-        this._sliderElement = elementRef.nativeElement;
-    }
-    /**
-     * 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.
-     */
-    SliderRenderer.prototype.getSliderDimensions = function () {
-        var trackElement = this._sliderElement.querySelector('.md-slider-track');
-        return trackElement.getBoundingClientRect();
-    };
-    /**
-     * Update the physical position of the thumb and fill track on the slider.
-     */
-    SliderRenderer.prototype.updateThumbAndFillPosition = function (percent, width) {
-        // A container element that is used to avoid overwriting the transform on the thumb itself.
-        var thumbPositionElement = this._sliderElement.querySelector('.md-slider-thumb-position');
-        var fillTrackElement = this._sliderElement.querySelector('.md-slider-track-fill');
-        var position = Math.round(percent * width);
-        fillTrackElement.style.width = position + "px";
-        applyCssTransform(thumbPositionElement, "translateX(" + position + "px)");
-    };
-    /**
-     * Focuses the native element.
-     * Currently only used to allow a blur event to fire but will be used with keyboard input later.
-     */
-    SliderRenderer.prototype.addFocus = function () {
-        this._sliderElement.focus();
-    };
-    /**
-     * Draws ticks onto the tick container.
-     */
-    SliderRenderer.prototype.drawTicks = function (tickSeparation) {
-        var tickContainer = this._sliderElement.querySelector('.md-slider-tick-container');
-        var tickContainerWidth = tickContainer.getBoundingClientRect().width;
-        // An extra element for the last tick is needed because the linear gradient cannot be told to
-        // always draw a tick at the end of the gradient. To get around this, there is a second
-        // container for ticks that has a single tick mark on the very right edge.
-        var lastTickContainer = this._sliderElement.querySelector('.md-slider-last-tick-container');
-        // Subtract 1 from the tick separation to center the tick.
-        // TODO: Evaluate the rendering performance of using repeating background gradients.
-        tickContainer.style.background = "repeating-linear-gradient(to right, black, black 2px, " +
-            ("transparent 2px, transparent " + (tickSeparation - 1) + "px)");
-        // Add a tick to the very end by starting on the right side and adding a 2px black line.
-        lastTickContainer.style.background = "linear-gradient(to left, black, black 2px, transparent " +
-            "2px, transparent)";
-        // If the second to last tick is too close (a separation of less than half the normal
-        // separation), don't show it by decreasing the width of the tick container element.
-        if (tickContainerWidth % tickSeparation < (tickSeparation / 2)) {
-            tickContainer.style.width = tickContainerWidth - tickSeparation + 'px';
-        }
-    };
-    return SliderRenderer;
-}());
-export var MdSliderModule = (function () {
-    function MdSliderModule() {
-    }
-    MdSliderModule.forRoot = function () {
-        return {
-            ngModule: MdSliderModule,
-            providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig }]
-        };
-    };
-    MdSliderModule = __decorate([
-        NgModule({
-            imports: [FormsModule],
-            exports: [MdSlider],
-            declarations: [MdSlider],
-            providers: [
-                { provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig },
-            ],
-        }), 
-        __metadata('design:paramtypes', [])
-    ], MdSliderModule);
-    return MdSliderModule;
-}());
-
-//# sourceMappingURL=slider.js.map

package/slider/slider.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["slider/slider.ts"],"names":[],"mappings":"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","file":"slider/slider.js","sourcesContent":["import {\n  NgModule,\n  ModuleWithProviders,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  ViewEncapsulation,\n  AfterContentInit,\n  forwardRef,\n} from '@angular/core';\nimport {\n  NG_VALUE_ACCESSOR,\n  ControlValueAccessor,\n  FormsModule,\n} from '@angular/forms';\nimport {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';\nimport {BooleanFieldValue, MdGestureConfig, applyCssTransform} from '../core';\nimport {Input as HammerInput} from 'hammerjs';\n\n/**\n * Visually, a 30px separation between tick marks looks best. This is very subjective but it is\n * the default separation we chose.\n */\nconst MIN_AUTO_TICK_SEPARATION = 30;\n\n/**\n * Provider Expression that allows md-slider to register as a ControlValueAccessor.\n * This allows it to support [(ngModel)] and [formControl].\n */\nexport const MD_SLIDER_VALUE_ACCESSOR: any = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => MdSlider),\n  multi: true\n};\n\n@Component({\n  moduleId: module.id,\n  selector: 'md-slider',\n  providers: [MD_SLIDER_VALUE_ACCESSOR],\n  host: {\n    'tabindex': '0',\n    '(click)': 'onClick($event)',\n    '(slide)': 'onSlide($event)',\n    '(slidestart)': 'onSlideStart($event)',\n    '(slideend)': 'onSlideEnd()',\n    '(window:resize)': 'onResize()',\n    '(blur)': 'onBlur()',\n  },\n  templateUrl: 'slider.html',\n  styleUrls: ['slider.css'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class MdSlider implements AfterContentInit, ControlValueAccessor {\n  /** A renderer to handle updating the slider's thumb and fill track. */\n  private _renderer: SliderRenderer = null;\n\n  /** The dimensions of the slider. */\n  private _sliderDimensions: ClientRect = null;\n\n  @Input()\n  @BooleanFieldValue()\n  @HostBinding('class.md-slider-disabled')\n  @HostBinding('attr.aria-disabled')\n  disabled: boolean = false;\n\n  /** Whether or not to show the thumb label. */\n  @Input('thumb-label')\n  @BooleanFieldValue()\n  thumbLabel: boolean = false;\n\n  /** The miniumum value that the slider can have. */\n  private _min: number = 0;\n\n  /** The maximum value that the slider can have. */\n  private _max: number = 100;\n\n  /** The percentage of the slider that coincides with the value. */\n  private _percent: number = 0;\n\n  private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};\n\n  /** onTouch function registered via registerOnTouch (ControlValueAccessor). */\n  onTouched: () => any = () => {};\n\n  /** The values at which the thumb will snap. */\n  @Input() step: number = 1;\n\n  /**\n   * How often to show ticks. Relative to the step so that a tick always appears on a step.\n   * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).\n   */\n  @Input('tick-interval') _tickInterval: 'auto' | number;\n\n  /**\n   * Whether or not the thumb is sliding.\n   * Used to determine if there should be a transition for the thumb and fill track.\n   * TODO: internal\n   */\n  isSliding: boolean = false;\n\n  /**\n   * Whether or not the slider is active (clicked or sliding).\n   * Used to shrink and grow the thumb as according to the Material Design spec.\n   * TODO: internal\n   */\n  isActive: boolean = false;\n\n  /** Indicator for if the value has been set or not. */\n  private _isInitialized: boolean = false;\n\n  /** Value of the slider. */\n  private _value: number = 0;\n\n  @Input()\n  @HostBinding('attr.aria-valuemin')\n  get min() {\n    return this._min;\n  }\n\n  set min(v: number) {\n    // This has to be forced as a number to handle the math later.\n    this._min = Number(v);\n\n    // If the value wasn't explicitly set by the user, set it to the min.\n    if (!this._isInitialized) {\n      this.value = this._min;\n    }\n  }\n\n  @Input()\n  @HostBinding('attr.aria-valuemax')\n  get max() {\n    return this._max;\n  }\n\n  set max(v: number) {\n    this._max = Number(v);\n  }\n\n  @Input()\n  @HostBinding('attr.aria-valuenow')\n  get value() {\n    return this._value;\n  }\n\n  set value(v: number) {\n    // Only set the value to a valid number. v is casted to an any as we know it will come in as a\n    // string but it is labeled as a number which causes parseFloat to not accept it.\n    if (isNaN(parseFloat(<any> v))) {\n      return;\n    }\n\n    this._value = Number(v);\n    this._isInitialized = true;\n    this._controlValueAccessorChangeFn(this._value);\n  }\n\n  constructor(elementRef: ElementRef) {\n    this._renderer = new SliderRenderer(elementRef);\n  }\n\n  /**\n   * Once the slider has rendered, grab the dimensions and update the position of the thumb and\n   * fill track.\n   * TODO: internal\n   */\n  ngAfterContentInit() {\n    this._sliderDimensions = this._renderer.getSliderDimensions();\n    // This needs to be called after content init because the value can be set to the min if the\n    // value itself isn't set. If this happens, the control value accessor needs to be updated.\n    this._controlValueAccessorChangeFn(this.value);\n    this.snapThumbToValue();\n    this._updateTickSeparation();\n  }\n\n  /** TODO: internal */\n  onClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.isActive = true;\n    this.isSliding = false;\n    this._renderer.addFocus();\n    this.updateValueFromPosition(event.clientX);\n    this.snapThumbToValue();\n  }\n\n  /** TODO: internal */\n  onSlide(event: HammerInput) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent the slide from selecting anything else.\n    event.preventDefault();\n    this.updateValueFromPosition(event.center.x);\n  }\n\n  /** TODO: internal */\n  onSlideStart(event: HammerInput) {\n    if (this.disabled) {\n      return;\n    }\n\n    event.preventDefault();\n    this.isSliding = true;\n    this.isActive = true;\n    this._renderer.addFocus();\n    this.updateValueFromPosition(event.center.x);\n  }\n\n  /** TODO: internal */\n  onSlideEnd() {\n    this.isSliding = false;\n    this.snapThumbToValue();\n  }\n\n  /** TODO: internal */\n  onResize() {\n    this.isSliding = true;\n    this._sliderDimensions = this._renderer.getSliderDimensions();\n    // Skip updating the value and position as there is no new placement.\n    this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);\n  }\n\n  /** TODO: internal */\n  onBlur() {\n    this.isActive = false;\n    this.onTouched();\n  }\n\n  /**\n   * When the value changes without a physical position, the percentage needs to be recalculated\n   * independent of the physical location.\n   * This is also used to move the thumb to a snapped value once sliding is done.\n   */\n  updatePercentFromValue() {\n    this._percent = this.calculatePercentage(this.value);\n  }\n\n  /**\n   * Calculate the new value from the new physical location. The value will always be snapped.\n   */\n  updateValueFromPosition(pos: number) {\n    let offset = this._sliderDimensions.left;\n    let size = this._sliderDimensions.width;\n\n    // The exact value is calculated from the event and used to find the closest snap value.\n    this._percent = this.clamp((pos - offset) / size);\n    let exactValue = this.calculateValue(this._percent);\n\n    // This calculation finds the closest step by finding the closest whole number divisible by the\n    // step relative to the min.\n    let closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;\n    // The value needs to snap to the min and max.\n    this.value = this.clamp(closestValue, this.min, this.max);\n    this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);\n  }\n\n  /**\n   * Snaps the thumb to the current value.\n   * Called after a click or drag event is over.\n   */\n  snapThumbToValue() {\n    this.updatePercentFromValue();\n    this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);\n  }\n\n  /**\n   * Calculates the separation in pixels of tick marks. If there is no tick interval or the interval\n   * is set to something other than a number or 'auto', nothing happens.\n   */\n  private _updateTickSeparation() {\n    if (this._tickInterval == 'auto') {\n      this._updateAutoTickSeparation();\n    } else if (Number(this._tickInterval)) {\n      this._updateTickSeparationFromInterval();\n    }\n  }\n\n  /**\n   * Calculates the optimal separation in pixels of tick marks based on the minimum auto tick\n   * separation constant.\n   */\n  private _updateAutoTickSeparation() {\n    // We're looking for the multiple of step for which the separation between is greater than the\n    // minimum tick separation.\n    let sliderWidth = this._sliderDimensions.width;\n\n    // This is the total \"width\" of the slider in terms of values.\n    let valueWidth = this.max - this.min;\n\n    // Calculate how many values exist within 1px on the slider.\n    let valuePerPixel = valueWidth / sliderWidth;\n\n    // Calculate how many values exist in the minimum tick separation (px).\n    let valuePerSeparation = valuePerPixel  * MIN_AUTO_TICK_SEPARATION;\n\n    // Calculate how many steps exist in this separation. This will be the lowest value you can\n    // multiply step by to get a separation that is greater than or equal to the minimum tick\n    // separation.\n    let stepsPerSeparation = Math.ceil(valuePerSeparation / this.step);\n\n    // Get the percentage of the slider for which this tick would be located so we can then draw\n    // it on the slider.\n    let tickPercentage = this.calculatePercentage((this.step * stepsPerSeparation) + this.min);\n\n    // The pixel value of the tick is the percentage * the width of the slider. Use this to draw\n    // the ticks on the slider.\n    this._renderer.drawTicks(sliderWidth * tickPercentage);\n  }\n\n  /**\n   * Calculates the separation of tick marks by finding the pixel value of the tickInterval.\n   */\n  private _updateTickSeparationFromInterval() {\n    // Force tickInterval to be a number so it can be used in calculations.\n    let interval: number = <number> this._tickInterval;\n    // Calculate the first value a tick will be located at by getting the step at which the interval\n    // lands and adding that to the min.\n    let tickValue = (this.step * interval) + this.min;\n\n    // The percentage of the step on the slider is needed in order to calculate the pixel offset\n    // from the beginning of the slider. This offset is the tick separation.\n    let tickPercentage = this.calculatePercentage(tickValue);\n    this._renderer.drawTicks(this._sliderDimensions.width * tickPercentage);\n  }\n\n  /**\n   * Calculates the percentage of the slider that a value is.\n   */\n  calculatePercentage(value: number) {\n    return (value - this.min) / (this.max - this.min);\n  }\n\n  /**\n   * Calculates the value a percentage of the slider corresponds to.\n   */\n  calculateValue(percentage: number) {\n    return this.min + (percentage * (this.max - this.min));\n  }\n\n  /**\n   * Return a number between two numbers.\n   */\n  clamp(value: number, min = 0, max = 1) {\n    return Math.max(min, Math.min(value, max));\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * TODO: internal\n   */\n  writeValue(value: any) {\n    this.value = value;\n\n    if (this._sliderDimensions) {\n      this.snapThumbToValue();\n    }\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * TODO: internal\n   */\n  registerOnChange(fn: (value: any) => void) {\n    this._controlValueAccessorChangeFn = fn;\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * TODO: internal\n   */\n  registerOnTouched(fn: any) {\n    this.onTouched = fn;\n  }\n}\n\n/**\n * Renderer class in order to keep all dom manipulation in one place and outside of the main class.\n */\nexport class SliderRenderer {\n  private _sliderElement: HTMLElement;\n\n  constructor(elementRef: ElementRef) {\n    this._sliderElement = elementRef.nativeElement;\n  }\n\n  /**\n   * Get the bounding client rect of the slider track element.\n   * The track is used rather than the native element to ignore the extra space that the thumb can\n   * take up.\n   */\n  getSliderDimensions() {\n    let trackElement = this._sliderElement.querySelector('.md-slider-track');\n    return trackElement.getBoundingClientRect();\n  }\n\n  /**\n   * Update the physical position of the thumb and fill track on the slider.\n   */\n  updateThumbAndFillPosition(percent: number, width: number) {\n    // A container element that is used to avoid overwriting the transform on the thumb itself.\n    let thumbPositionElement =\n        <HTMLElement>this._sliderElement.querySelector('.md-slider-thumb-position');\n    let fillTrackElement = <HTMLElement>this._sliderElement.querySelector('.md-slider-track-fill');\n\n    let position = Math.round(percent * width);\n\n    fillTrackElement.style.width = `${position}px`;\n    applyCssTransform(thumbPositionElement, `translateX(${position}px)`);\n  }\n\n  /**\n   * Focuses the native element.\n   * Currently only used to allow a blur event to fire but will be used with keyboard input later.\n   */\n  addFocus() {\n    this._sliderElement.focus();\n  }\n\n  /**\n   * Draws ticks onto the tick container.\n   */\n  drawTicks(tickSeparation: number) {\n    let tickContainer = <HTMLElement>this._sliderElement.querySelector('.md-slider-tick-container');\n    let tickContainerWidth = tickContainer.getBoundingClientRect().width;\n    // An extra element for the last tick is needed because the linear gradient cannot be told to\n    // always draw a tick at the end of the gradient. To get around this, there is a second\n    // container for ticks that has a single tick mark on the very right edge.\n    let lastTickContainer =\n        <HTMLElement>this._sliderElement.querySelector('.md-slider-last-tick-container');\n    // Subtract 1 from the tick separation to center the tick.\n    // TODO: Evaluate the rendering performance of using repeating background gradients.\n    tickContainer.style.background = `repeating-linear-gradient(to right, black, black 2px, ` +\n        `transparent 2px, transparent ${tickSeparation - 1}px)`;\n    // Add a tick to the very end by starting on the right side and adding a 2px black line.\n    lastTickContainer.style.background = `linear-gradient(to left, black, black 2px, transparent ` +\n        `2px, transparent)`;\n\n    // If the second to last tick is too close (a separation of less than half the normal\n    // separation), don't show it by decreasing the width of the tick container element.\n    if (tickContainerWidth % tickSeparation < (tickSeparation / 2)) {\n      tickContainer.style.width = tickContainerWidth - tickSeparation + 'px';\n    }\n  }\n}\n\n\n@NgModule({\n  imports: [FormsModule],\n  exports: [MdSlider],\n  declarations: [MdSlider],\n  providers: [\n    {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig},\n  ],\n})\nexport class MdSliderModule {\n  static forRoot(): ModuleWithProviders {\n    return {\n      ngModule: MdSliderModule,\n      providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}]\n    };\n  }\n}\n"],"sourceRoot":"/source/"}

package/slider/slider.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":1,"metadata":{"MD_SLIDER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdSlider"},"multi":true},"MdSlider":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-slider","providers":[{"__symbolic":"reference","name":"MD_SLIDER_VALUE_ACCESSOR"}],"host":{"tabindex":"0","(click)":"onClick($event)","(slide)":"onSlide($event)","(slidestart)":"onSlideStart($event)","(slideend)":"onSlideEnd()","(window:resize)":"onResize()","(blur)":"onBlur()"},"templateUrl":"slider.html","styleUrls":["slider.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-slider-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"thumbLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["thumb-label"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_tickInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["tick-interval"]}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuemin"]}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuemax"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuenow"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onSlide":[{"__symbolic":"method"}],"onSlideStart":[{"__symbolic":"method"}],"onSlideEnd":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"updatePercentFromValue":[{"__symbolic":"method"}],"updateValueFromPosition":[{"__symbolic":"method"}],"snapThumbToValue":[{"__symbolic":"method"}],"_updateTickSeparation":[{"__symbolic":"method"}],"_updateAutoTickSeparation":[{"__symbolic":"method"}],"_updateTickSeparationFromInterval":[{"__symbolic":"method"}],"calculatePercentage":[{"__symbolic":"method"}],"calculateValue":[{"__symbolic":"method"}],"clamp":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"MdSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdSlider"}],"declarations":[{"__symbolic":"reference","name":"MdSlider"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSliderModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}}}}}}