import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { clamp, isPresent, isTrueProperty } from '../../util/util';
import { Config } from '../../config/config';
import { DomController } from '../../platform/dom-controller';
import { Form } from '../../util/form';
import { Haptic } from '../../tap-click/haptic';
import { Ion } from '../ion';
import { Item } from '../item/item';
import { Platform } from '../../platform/platform';
import { pointerCoord } from '../../util/dom';
import { TimeoutDebouncer } from '../../util/debouncer';
import { UIEventManager } from '../../gestures/ui-event-manager';
export const /** @type {?} */ RANGE_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => Range),
    multi: true
};
/**
 * \@name Range
 * \@description
 * The Range slider lets users select from a range of values by moving
 * the slider knob. It can accept dual knobs, but by default one knob
 * controls the value of the range.
 *
 * ### Range Labels
 * Labels can be placed on either side of the range by adding the
 * `range-left` or `range-right` property to the element. The element
 * doesn't have to be an `ion-label`, it can be added to any element
 * to place it to the left or right of the range. See [usage](#usage)
 * below for examples.
 *
 *
 * ### Minimum and Maximum Values
 * Minimum and maximum values can be passed to the range through the `min`
 * and `max` properties, respectively. By default, the range sets the `min`
 * to `0` and the `max` to `100`.
 *
 *
 * ### Steps and Snaps
 * The `step` property specifies the value granularity of the range's value.
 * It can be useful to set the `step` when the value isn't in increments of `1`.
 * Setting the `step` property will show tick marks on the range for each step.
 * The `snaps` property can be set to automatically move the knob to the nearest
 * tick mark based on the step property value.
 *
 *
 * ### Dual Knobs
 * Setting the `dualKnobs` property to `true` on the range component will
 * enable two knobs on the range. If the range has two knobs, the value will
 * be an object containing two properties: `lower` and `upper`.
 *
 *
 * \@usage
 * ```html
 * <ion-list>
 *   <ion-item>
 *     <ion-range [(ngModel)]="singleValue" color="danger" pin="true"></ion-range>
 *   </ion-item>
 *
 *   <ion-item>
 *     <ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
 *       <ion-label range-left>-200</ion-label>
 *       <ion-label range-right>200</ion-label>
 *     </ion-range>
 *   </ion-item>
 *
 *  <ion-item>
 *    <ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
 *      <ion-icon small range-left name="sunny"></ion-icon>
 *      <ion-icon range-right name="sunny"></ion-icon>
 *    </ion-range>
 *  </ion-item>
 *
 *   <ion-item>
 *     <ion-label>step=100, snaps, {{singleValue4}}</ion-label>
 *     <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary" [(ngModel)]="singleValue4"></ion-range>
 *   </ion-item>
 *
 *   <ion-item>
 *     <ion-label>dual, step=3, snaps, {{dualValue2 | json}}</ion-label>
 *     <ion-range dualKnobs="true" [(ngModel)]="dualValue2" min="21" max="72" step="3" snaps="true"></ion-range>
 *   </ion-item>
 * </ion-list>
 * ```
 *
 *
 * \@demo /docs/v2/demos/src/range/
 */
export class Range extends Ion {
    /**
     * @param {?} _form
     * @param {?} _haptic
     * @param {?} _item
     * @param {?} config
     * @param {?} _plt
     * @param {?} elementRef
     * @param {?} renderer
     * @param {?} _dom
     * @param {?} _cd
     */
    constructor(_form, _haptic, _item, config, _plt, elementRef, renderer, _dom, _cd) {
        super(config, elementRef, renderer, 'range');
        this._form = _form;
        this._haptic = _haptic;
        this._item = _item;
        this._plt = _plt;
        this._dom = _dom;
        this._cd = _cd;
        this._disabled = false;
        this._min = 0;
        this._max = 100;
        this._step = 1;
        this._valA = 0;
        this._valB = 0;
        this._ratioA = 0;
        this._ratioB = 0;
        this._debouncer = new TimeoutDebouncer(0);
        /**
         * \@output {Range} Emitted when the range selector drag starts.
         */
        this.ionFocus = new EventEmitter();
        /**
         * \@output {Range} Emitted when the range value changes.
         */
        this.ionChange = new EventEmitter();
        /**
         * \@output {Range} Emitted when the range selector drag ends.
         */
        this.ionBlur = new EventEmitter();
        this._events = new UIEventManager(_plt);
        _form.register(this);
        if (_item) {
            this.id = 'rng-' + _item.registerInput('range');
            this._lblId = 'lbl-' + _item.id;
            _item.setElementClass('item-range', true);
        }
    }
    /**
     * \@input {number} Minimum integer value of the range. Defaults to `0`.
     * @return {?}
     */
    get min() {
        return this._min;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set min(val) {
        val = Math.round(val);
        if (!isNaN(val)) {
            this._min = val;
        }
    }
    /**
     * \@input {number} Maximum integer value of the range. Defaults to `100`.
     * @return {?}
     */
    get max() {
        return this._max;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set max(val) {
        val = Math.round(val);
        if (!isNaN(val)) {
            this._max = val;
        }
    }
    /**
     * \@input {number} Specifies the value granularity. Defaults to `1`.
     * @return {?}
     */
    get step() {
        return this._step;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set step(val) {
        val = Math.round(val);
        if (!isNaN(val) && val > 0) {
            this._step = val;
        }
    }
    /**
     * \@input {boolean} If true, the knob snaps to tick marks evenly spaced based
     * on the step property value. Defaults to `false`.
     * @return {?}
     */
    get snaps() {
        return this._snaps;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set snaps(val) {
        this._snaps = isTrueProperty(val);
    }
    /**
     * \@input {boolean} If true, a pin with integer value is shown when the knob
     * is pressed. Defaults to `false`.
     * @return {?}
     */
    get pin() {
        return this._pin;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set pin(val) {
        this._pin = isTrueProperty(val);
    }
    /**
     * \@input {number} How long, in milliseconds, to wait to trigger the
     * `ionChange` event after each change in the range value. Default `0`.
     * @return {?}
     */
    get debounce() {
        return this._debouncer.wait;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set debounce(val) {
        this._debouncer.wait = val;
    }
    /**
     * \@input {boolean} Show two knobs. Defaults to `false`.
     * @return {?}
     */
    get dualKnobs() {
        return this._dual;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set dualKnobs(val) {
        this._dual = isTrueProperty(val);
    }
    /**
     * \@input {boolean} If true, the user cannot interact with this element.
     * @return {?}
     */
    get disabled() {
        return this._disabled;
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set disabled(val) {
        this._disabled = val = isTrueProperty(val);
        const /** @type {?} */ item = this._item;
        item && item.setElementClass('item-range-disabled', val);
    }
    /**
     * Returns the ratio of the knob's is current location, which is a number
     * between `0` and `1`. If two knobs are used, this property represents
     * the lower value.
     * @return {?}
     */
    get ratio() {
        if (this._dual) {
            return Math.min(this._ratioA, this._ratioB);
        }
        return this._ratioA;
    }
    /**
     * Returns the ratio of the upper value's is current location, which is
     * a number between `0` and `1`. If there is only one knob, then this
     * will return `null`.
     * @return {?}
     */
    get ratioUpper() {
        if (this._dual) {
            return Math.max(this._ratioA, this._ratioB);
        }
        return null;
    }
    /**
     * @hidden
     * @return {?}
     */
    ngAfterViewInit() {
        // add touchstart/mousedown listeners
        this._events.pointerEvents({
            element: this._slider.nativeElement,
            pointerDown: this._pointerDown.bind(this),
            pointerMove: this._pointerMove.bind(this),
            pointerUp: this._pointerUp.bind(this),
            zone: true
        });
        // build all the ticks if there are any to show
        this._createTicks();
    }
    /**
     * \@internal
     * @param {?} ev
     * @return {?}
     */
    _pointerDown(ev) {
        // TODO: we could stop listening for events instead of checking this._disabled.
        // since there are a lot of events involved, this solution is
        // enough for the moment
        if (this._disabled) {
            return false;
        }
        // trigger ionFocus event
        this.ionFocus.emit(this);
        // prevent default so scrolling does not happen
        ev.preventDefault();
        ev.stopPropagation();
        // get the start coordinates
        const /** @type {?} */ current = pointerCoord(ev);
        // get the full dimensions of the slider element
        const /** @type {?} */ rect = this._rect = this._plt.getElementBoundingClientRect(this._slider.nativeElement);
        // figure out which knob they started closer to
        const /** @type {?} */ ratio = clamp(0, (current.x - rect.left) / (rect.width), 1);
        this._activeB = this._dual && (Math.abs(ratio - this._ratioA) > Math.abs(ratio - this._ratioB));
        // update the active knob's position
        this._update(current, rect, true);
        // trigger a haptic start
        this._haptic.gestureSelectionStart();
        // return true so the pointer events
        // know everything's still valid
        return true;
    }
    /**
     * \@internal
     * @param {?} ev
     * @return {?}
     */
    _pointerMove(ev) {
        if (!this._disabled) {
            // prevent default so scrolling does not happen
            ev.preventDefault();
            ev.stopPropagation();
            // update the active knob's position
            const /** @type {?} */ hasChanged = this._update(pointerCoord(ev), this._rect, true);
            if (hasChanged && this._snaps) {
                // trigger a haptic selection changed event
                // if this is a snap range
                this._haptic.gestureSelectionChanged();
            }
        }
    }
    /**
     * \@internal
     * @param {?} ev
     * @return {?}
     */
    _pointerUp(ev) {
        if (!this._disabled) {
            // prevent default so scrolling does not happen
            ev.preventDefault();
            ev.stopPropagation();
            // update the active knob's position
            this._update(pointerCoord(ev), this._rect, false);
            // trigger a haptic end
            this._haptic.gestureSelectionEnd();
            // trigger ionBlur event
            this.ionBlur.emit(this);
        }
    }
    /**
     * \@internal
     * @param {?} current
     * @param {?} rect
     * @param {?} isPressed
     * @return {?}
     */
    _update(current, rect, isPressed) {
        // figure out where the pointer is currently at
        // update the knob being interacted with
        let /** @type {?} */ ratio = clamp(0, (current.x - rect.left) / (rect.width), 1);
        let /** @type {?} */ val = this._ratioToValue(ratio);
        if (this._snaps) {
            // snaps the ratio to the current value
            ratio = this._valueToRatio(val);
        }
        // update which knob is pressed
        this._pressed = isPressed;
        let /** @type {?} */ valChanged = false;
        if (this._activeB) {
            // when the pointer down started it was determined
            // that knob B was the one they were interacting with
            this._pressedB = isPressed;
            this._pressedA = false;
            this._ratioB = ratio;
            valChanged = val === this._valB;
            this._valB = val;
        }
        else {
            // interacting with knob A
            this._pressedA = isPressed;
            this._pressedB = false;
            this._ratioA = ratio;
            valChanged = val === this._valA;
            this._valA = val;
        }
        this._updateBar();
        if (valChanged) {
            return false;
        }
        // value has been updated
        if (this._dual) {
            // dual knobs have an lower and upper value
            if (!this.value) {
                // ensure we're always updating the same object
                this.value = {};
            }
            this.value.lower = Math.min(this._valA, this._valB);
            this.value.upper = Math.max(this._valA, this._valB);
            (void 0) /* console.debug */;
        }
        else {
            // single knob only has one value
            this.value = this._valA;
            (void 0) /* console.debug */;
        }
        this._debouncer.debounce(() => {
            this.onChange(this.value);
            this.ionChange.emit(this);
        });
        return true;
    }
    /**
     * \@internal
     * @return {?}
     */
    _updateBar() {
        const /** @type {?} */ ratioA = this._ratioA;
        const /** @type {?} */ ratioB = this._ratioB;
        if (this._dual) {
            this._barL = `${(Math.min(ratioA, ratioB) * 100)}%`;
            this._barR = `${100 - (Math.max(ratioA, ratioB) * 100)}%`;
        }
        else {
            this._barL = '';
            this._barR = `${100 - (ratioA * 100)}%`;
        }
        this._updateTicks();
    }
    /**
     * \@internal
     * @return {?}
     */
    _createTicks() {
        if (this._snaps) {
            this._dom.write(() => {
                // TODO: Fix to not use RAF
                this._ticks = [];
                for (var /** @type {?} */ value = this._min; value <= this._max; value += this._step) {
                    var /** @type {?} */ ratio = this._valueToRatio(value);
                    this._ticks.push({
                        ratio: ratio,
                        left: `${ratio * 100}%`,
                    });
                }
                this._updateTicks();
            });
        }
    }
    /**
     * \@internal
     * @return {?}
     */
    _updateTicks() {
        const /** @type {?} */ ticks = this._ticks;
        const /** @type {?} */ ratio = this.ratio;
        if (this._snaps && ticks) {
            if (this._dual) {
                var /** @type {?} */ upperRatio = this.ratioUpper;
                ticks.forEach(t => {
                    t.active = (t.ratio >= ratio && t.ratio <= upperRatio);
                });
            }
            else {
                ticks.forEach(t => {
                    t.active = (t.ratio <= ratio);
                });
            }
        }
    }
    /**
     * @hidden
     * @param {?} isIncrease
     * @param {?} isKnobB
     * @return {?}
     */
    _keyChg(isIncrease, isKnobB) {
        const /** @type {?} */ step = this._step;
        if (isKnobB) {
            if (isIncrease) {
                this._valB += step;
            }
            else {
                this._valB -= step;
            }
            this._valB = clamp(this._min, this._valB, this._max);
            this._ratioB = this._valueToRatio(this._valB);
        }
        else {
            if (isIncrease) {
                this._valA += step;
            }
            else {
                this._valA -= step;
            }
            this._valA = clamp(this._min, this._valA, this._max);
            this._ratioA = this._valueToRatio(this._valA);
        }
        this._updateBar();
    }
    /**
     * \@internal
     * @param {?} ratio
     * @return {?}
     */
    _ratioToValue(ratio) {
        ratio = Math.round(((this._max - this._min) * ratio));
        ratio = Math.round(ratio / this._step) * this._step + this._min;
        return clamp(this._min, ratio, this._max);
    }
    /**
     * \@internal
     * @param {?} value
     * @return {?}
     */
    _valueToRatio(value) {
        value = Math.round((value - this._min) / this._step) * this._step;
        value = value / (this._max - this._min);
        return clamp(0, value, 1);
    }
    /**
     * @hidden
     * @param {?} val
     * @return {?}
     */
    writeValue(val) {
        if (isPresent(val)) {
            this.value = val;
            if (this._dual) {
                this._valA = val.lower;
                this._valB = val.upper;
                this._ratioA = this._valueToRatio(val.lower);
                this._ratioB = this._valueToRatio(val.upper);
            }
            else {
                this._valA = val;
                this._ratioA = this._valueToRatio(val);
            }
            this._updateBar();
        }
    }
    /**
     * @hidden
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this._fn = fn;
        this.onChange = (val) => {
            fn(val);
            this.onTouched();
        };
    }
    /**
     * @hidden
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) { this.onTouched = fn; }
    /**
     * @hidden
     * @param {?} val
     * @return {?}
     */
    onChange(val) {
        // used when this input does not have an ngModel or formControlName
        this.onTouched();
        this._cd.detectChanges();
    }
    /**
     * @hidden
     * @return {?}
     */
    onTouched() { }
    /**
     * @hidden
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * @hidden
     * @return {?}
     */
    ngOnDestroy() {
        this._form.deregister(this);
        this._events.destroy();
    }
}
Range.decorators = [
    { type: Component, args: [{
                selector: 'ion-range',
                template: '<ng-content select="[range-left]"></ng-content>' +
                    '<div class="range-slider" #slider>' +
                    '<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active" role="presentation"></div>' +
                    '<div class="range-bar" role="presentation"></div>' +
                    '<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar role="presentation"></div>' +
                    '<div class="range-knob-handle" (ionIncrease)="_keyChg(true, false)" (ionDecrease)="_keyChg(false, false)" [ratio]="_ratioA" [val]="_valA" [pin]="_pin" [pressed]="_pressedA" [min]="_min" [max]="_max" [disabled]="_disabled" [labelId]="_lblId"></div>' +
                    '<div class="range-knob-handle" (ionIncrease)="_keyChg(true, true)" (ionDecrease)="_keyChg(false, true)" [ratio]="_ratioB" [val]="_valB" [pin]="_pin" [pressed]="_pressedB" [min]="_min" [max]="_max" [disabled]="_disabled" [labelId]="_lblId" *ngIf="_dual"></div>' +
                    '</div>' +
                    '<ng-content select="[range-right]"></ng-content>',
                host: {
                    '[class.range-disabled]': '_disabled',
                    '[class.range-pressed]': '_pressed',
                    '[class.range-has-pin]': '_pin'
                },
                providers: [RANGE_VALUE_ACCESSOR],
                encapsulation: ViewEncapsulation.None,
            },] },
];
/**
 * @nocollapse
 */
Range.ctorParameters = () => [
    { type: Form, },
    { type: Haptic, },
    { type: Item, decorators: [{ type: Optional },] },
    { type: Config, },
    { type: Platform, },
    { type: ElementRef, },
    { type: Renderer, },
    { type: DomController, },
    { type: ChangeDetectorRef, },
];
Range.propDecorators = {
    '_slider': [{ type: ViewChild, args: ['slider',] },],
    'min': [{ type: Input },],
    'max': [{ type: Input },],
    'step': [{ type: Input },],
    'snaps': [{ type: Input },],
    'pin': [{ type: Input },],
    'debounce': [{ type: Input },],
    'dualKnobs': [{ type: Input },],
    'disabled': [{ type: Input },],
    'ionFocus': [{ type: Output },],
    'ionChange': [{ type: Output },],
    'ionBlur': [{ type: Output },],
};
function Range_tsickle_Closure_declarations() {
    /** @type {?} */
    Range.decorators;
    /**
     * @nocollapse
     * @type {?}
     */
    Range.ctorParameters;
    /** @type {?} */
    Range.propDecorators;
    /** @type {?} */
    Range.prototype._dual;
    /** @type {?} */
    Range.prototype._pin;
    /** @type {?} */
    Range.prototype._disabled;
    /** @type {?} */
    Range.prototype._pressed;
    /** @type {?} */
    Range.prototype._lblId;
    /** @type {?} */
    Range.prototype._fn;
    /** @type {?} */
    Range.prototype._activeB;
    /** @type {?} */
    Range.prototype._rect;
    /** @type {?} */
    Range.prototype._ticks;
    /** @type {?} */
    Range.prototype._min;
    /** @type {?} */
    Range.prototype._max;
    /** @type {?} */
    Range.prototype._step;
    /** @type {?} */
    Range.prototype._snaps;
    /** @type {?} */
    Range.prototype._valA;
    /** @type {?} */
    Range.prototype._valB;
    /** @type {?} */
    Range.prototype._ratioA;
    /** @type {?} */
    Range.prototype._ratioB;
    /** @type {?} */
    Range.prototype._pressedA;
    /** @type {?} */
    Range.prototype._pressedB;
    /** @type {?} */
    Range.prototype._barL;
    /** @type {?} */
    Range.prototype._barR;
    /** @type {?} */
    Range.prototype._debouncer;
    /** @type {?} */
    Range.prototype._events;
    /** @type {?} */
    Range.prototype._slider;
    /**
     * @hidden
     * @type {?}
     */
    Range.prototype.value;
    /**
     * @hidden
     * @type {?}
     */
    Range.prototype.id;
    /**
     * \@output {Range} Emitted when the range selector drag starts.
     * @type {?}
     */
    Range.prototype.ionFocus;
    /**
     * \@output {Range} Emitted when the range value changes.
     * @type {?}
     */
    Range.prototype.ionChange;
    /**
     * \@output {Range} Emitted when the range selector drag ends.
     * @type {?}
     */
    Range.prototype.ionBlur;
    /** @type {?} */
    Range.prototype._form;
    /** @type {?} */
    Range.prototype._haptic;
    /** @type {?} */
    Range.prototype._item;
    /** @type {?} */
    Range.prototype._plt;
    /** @type {?} */
    Range.prototype._dom;
    /** @type {?} */
    Range.prototype._cd;
}
//# sourceMappingURL=range.js.map