@bmat/angular/fesm2015/bmat-angular-forms-bm-slider.js

import { Directive, TemplateRef, EventEmitter, Component, ChangeDetectionStrategy, ElementRef, Inject, ChangeDetectorRef, HostBinding, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { OverlayModule } from '@angular/cdk/overlay';
import { DOCUMENT, CommonModule } from '@angular/common';
import { PAGE_DOWN, PAGE_UP, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import { map, takeUntil, startWith, share, debounceTime } from 'rxjs/operators';
import { fromEvent } from 'rxjs';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Directive to draw a tooltip to the progress bar
 */
class BMSliderValueTooltipDirective {
    /**
     * @param {?} templateRef
     */
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
}
BMSliderValueTooltipDirective.decorators = [
    { type: Directive, args: [{
                selector: '[bmSliderValueTooltip]',
            },] }
];
/** @nocollapse */
BMSliderValueTooltipDirective.ctorParameters = () => [
    { type: TemplateRef }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Observable Drag. Return relative position without the first
 * container, or body, with position non static.
 * @param {?} mousedownEvent
 * @param {?=} doc
 * @return {?}
 */
function dragObservable(mousedownEvent, doc = document) {
    /** @type {?} */
    let container = (/** @type {?} */ (mousedownEvent.target));
    while (container.tagName !== 'BODY' &&
        getComputedStyle(container).getPropertyValue('position') !== 'static') {
        container = (/** @type {?} */ (container.parentElement));
    }
    const { left, width } = container.getBoundingClientRect();
    /** @type {?} */
    const offsetX = mousedownEvent.offsetX;
    /** @type {?} */
    const mouseup = fromEvent(doc, 'mouseup');
    /** @type {?} */
    const mousemove = fromEvent(doc, 'mousemove');
    return mousemove.pipe(map((/**
     * @param {?} mousemoveEvent
     * @return {?}
     */
    mousemoveEvent => {
        mousemoveEvent.preventDefault();
        return Math.min(1, Math.max(0, (mousemoveEvent.clientX - offsetX - left) / width));
    })), takeUntil(mouseup));
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Observable Drag. Return relative position without the first
 * container, or body, with position non static.
 * @param {?} mouseenterEvent
 * @param {?=} doc
 * @return {?}
 */
function mouseoverRelativeCoordinatesObservable(mouseenterEvent, doc = document) {
    mouseenterEvent.preventDefault();
    /** @type {?} */
    let container = (/** @type {?} */ (mouseenterEvent.target));
    while (container.tagName !== 'BODY' &&
        getComputedStyle(container).getPropertyValue('position') !== 'static') {
        container = (/** @type {?} */ (container.parentElement));
    }
    const { left, width } = container.getBoundingClientRect();
    /** @type {?} */
    const mouseleave = fromEvent(container, 'mouseleave');
    /** @type {?} */
    const mousemove = fromEvent(doc, 'mousemove');
    return mousemove.pipe(map((/**
     * @param {?} mousemoveEvent
     * @return {?}
     */
    mousemoveEvent => {
        mousemoveEvent.preventDefault();
        return Math.min(1, Math.max(0, (mousemoveEvent.clientX - left) / width));
    })), takeUntil(mouseleave), startWith(Math.min(1, Math.max(0, (mouseenterEvent.clientX - left) / width))));
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Media progress slider
 */
class BMSliderComponent {
    /**
     * @param {?} _elementRef
     * @param {?} _document
     * @param {?} _cdr
     * @param {?} _dir
     */
    constructor(_elementRef, _document, _cdr, _dir) {
        this._elementRef = _elementRef;
        this._document = _document;
        this._cdr = _cdr;
        this._dir = _dir;
        this.min = 0;
        this.tabindex = 0;
        this.role = 'slider';
        this.change = new EventEmitter();
        this.dragStart = new EventEmitter();
        this.dragEnd = new EventEmitter();
        this._isDragging = false;
        this._isOver = false;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set value(v) {
        this._value = v;
    }
    /**
     * @return {?}
     */
    get value() {
        return this._value;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    writeValue(v) {
        this.value = v;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this._onChangeCB = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this._onTouchedCB = fn;
    }
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onMouseenter($event) {
        if (this.disabled) {
            return;
        }
        this._isOver = true;
        mouseoverRelativeCoordinatesObservable($event, this._document).subscribe({
            next: (/**
             * @param {?} val
             * @return {?}
             */
            val => {
                this.pointerTime = val * (this.max || 0);
                /** @type {?} */
                const overTime = Math.max(0, this.getRelativeLeft(this.pointerTime) -
                    this.getRelativeLeft(this.value));
                if (overTime > 0 &&
                    this._previewBar &&
                    this._previewBar.nativeElement) {
                    /** @type {?} */
                    const relativeLeft = this.getRelativeLeft(this.value);
                    this._previewBar.nativeElement.style.left = `${relativeLeft}px`;
                    this._previewBar.nativeElement.style.width = `${overTime}px`;
                }
                this._cdr.markForCheck();
            }),
            error: (/**
             * @return {?}
             */
            () => {
                this._isOver = false;
            }),
            complete: (/**
             * @return {?}
             */
            () => {
                this._isOver = false;
                this._cdr.markForCheck();
            }),
        });
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onClick(e) {
        if (!this._isDragging) {
            e.preventDefault();
            const { offsetX } = e;
            const { width } = this._elementRef.nativeElement.getBoundingClientRect();
            /** @type {?} */
            const percent = offsetX / width;
            this.value = percent * (this.max || 0);
            this.change.emit(this.value);
        }
    }
    /**
     * @return {?}
     */
    onFocusin() {
        if (this._onTouchedCB) {
            this._onTouchedCB();
        }
    }
    // tslint:disable-next-line:cyclomatic-complexity
    /**
     * @param {?} e
     * @return {?}
     */
    onKeydown(e) {
        if (this.disabled) {
            return;
        }
        /** @type {?} */
        let emitChanges = false;
        if (this.max) {
            /** @type {?} */
            const smallStep = (this.max || 1) / 100;
            switch (e.keyCode) {
                case PAGE_DOWN: {
                    e.preventDefault();
                    this._value = Math.max(0, this._value - 10 * smallStep);
                    emitChanges = true;
                    break;
                }
                case PAGE_UP: {
                    e.preventDefault();
                    this._value = Math.min(this.max, this._value + 10 * smallStep);
                    emitChanges = true;
                    break;
                }
                case DOWN_ARROW: {
                    e.preventDefault();
                    this._value = Math.max(0, this._value - smallStep);
                    emitChanges = true;
                    break;
                }
                case UP_ARROW: {
                    e.preventDefault();
                    this._value = Math.min(this.max, this._value + smallStep);
                    emitChanges = true;
                    break;
                }
                case LEFT_ARROW: {
                    e.preventDefault();
                    this._value = Math.min(Math.max(0, this._value +
                        (this._dir.value === 'ltr' ? -smallStep : smallStep)), this.max);
                    emitChanges = true;
                    break;
                }
                case RIGHT_ARROW: {
                    e.preventDefault();
                    this._value = Math.min(Math.max(0, this._value +
                        (this._dir.value === 'ltr' ? smallStep : -smallStep)), this.max);
                    emitChanges = true;
                    break;
                }
                default:
            }
        }
        if (emitChanges) {
            if (this._onChangeCB) {
                this._onChangeCB(this.value);
            }
            this.change.emit(this.value);
        }
    }
    /**
     * @param {?} value
     * @return {?}
     */
    getRelativeLeft(value) {
        if (this._elementRef.nativeElement && value && this.max) {
            const { width } = this._elementRef.nativeElement.getBoundingClientRect();
            /** @type {?} */
            const relative = value / (this.max - this.min);
            return relative * width;
        }
        return 0;
    }
    /**
     * @return {?}
     */
    showThumb() {
        return this._isDragging || this._isOver;
    }
    /**
     * @return {?}
     */
    showPreviewBar() {
        return this._isOver && !this._isDragging;
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onThumbMousedown($event) {
        if (this.disabled) {
            return;
        }
        this._cdr.detach();
        this._isDragging = true;
        if (this._onTouchedCB) {
            this._onTouchedCB();
        }
        this.dragStart.emit();
        /** @type {?} */
        const dragObservable$ = dragObservable($event, this._document).pipe(share());
        // The two observables with different throttles target components
        // that should update at different rates. The bounced targets the
        // the time tooltip, while the non bounced targets the dragged thumb
        // and bars.
        dragObservable$
            .pipe(debounceTime(15))
            .subscribe((/**
         * @return {?}
         */
        () => this._cdr.detectChanges()));
        dragObservable$.subscribe({
            next: (/**
             * @param {?} val
             * @return {?}
             */
            val => {
                this._value = val * (this.max || 0);
                /** @type {?} */
                const relativeLeft = this.getRelativeLeft(this.value);
                ((/** @type {?} */ ($event.target))).style.left = `${relativeLeft}px`;
                if (this._doneBar && this._doneBar.nativeElement) {
                    this._doneBar.nativeElement.style.width = `${relativeLeft}px`;
                }
                if (this._onChangeCB) {
                    this._onChangeCB(Math.min(Math.max(this.min, this.value), this.max));
                }
                this.change.emit(this.value);
            }),
            error: (/**
             * @return {?}
             */
            () => {
                this._cdr.reattach();
            }),
            complete: (/**
             * @return {?}
             */
            () => {
                this._cdr.reattach();
                this.dragEnd.emit();
                setTimeout((/**
                 * @return {?}
                 */
                () => {
                    this._isDragging = false;
                }), 10);
            }),
        });
    }
}
BMSliderComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-slider',
                template: "<span\n  *ngIf=\"showPreviewBar()\"\n  #previewBar\n  class=\"bm-slider__bar bm-slider__bar--preview\"\n></span>\n<span\n  #doneBar\n  class=\"bm-slider__bar bm-slider__bar--done\"\n  [ngStyle]=\"{ 'width.px': getRelativeLeft(value) }\"\n></span>\n<span\n  *ngIf=\"showThumb()\"\n  #thumb\n  class=\"bm-slider-thumb\"\n  [ngStyle]=\"{ 'left.px': getRelativeLeft(value), 'margin-left.em': -0.5 }\"\n  (mousedown)=\"onThumbMousedown($event)\"\n></span>\n<ng-content></ng-content>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{height:.5em;border-radius:.4em;display:inline-block;background-color:var(--secondary-color,#bcbcbc);max-width:100%;min-width:var(--bm-slider-min--width,200px);position:relative}:host:focus{outline:solid var(--anchor-color,#4399fd) 2px}:host(.bm-slider--disabled){opacity:.5}.bm-slider__bar{height:.5em;border-radius:.4em;display:inline-block;position:absolute}.bm-slider__bar--done{background-color:var(--header-background-color,#3e71ad)}.bm-slider__bar--preview{background-color:var(--secondary-color-hover,#959494)}.bm-slider-thumb{position:absolute;background-color:var(--header-background-color,#3e71ad);border-radius:50%;display:inline-block;height:1em;width:1em;top:-.25em}.bm-slider-tooltip{display:inline-block;background-color:rgba(0,0,0,.7);border:1px solid #000;border-radius:3px;padding:.25em .5em;color:#fff;font-size:smaller}"]
            }] }
];
/** @nocollapse */
BMSliderComponent.ctorParameters = () => [
    { type: ElementRef },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: ChangeDetectorRef },
    { type: Directionality }
];
BMSliderComponent.propDecorators = {
    max: [{ type: HostBinding, args: ['attr.aria-valuemax',] }, { type: Input }],
    value: [{ type: HostBinding, args: ['attr.aria-valuenow',] }, { type: Input }],
    min: [{ type: HostBinding, args: ['attr.aria-valuemin',] }, { type: Input }],
    tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }, { type: Input }],
    disabled: [{ type: Input }, { type: HostBinding, args: ['attr.aria-disabled',] }, { type: HostBinding, args: ['class.bm-slider--disabled',] }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    change: [{ type: Output }],
    dragStart: [{ type: Output }],
    dragEnd: [{ type: Output }],
    _doneBar: [{ type: ViewChild, args: ['doneBar', { read: ElementRef, static: true },] }],
    _previewBar: [{ type: ViewChild, args: ['previewBar', { read: ElementRef, static: false },] }],
    onMouseenter: [{ type: HostListener, args: ['mouseenter', ['$event'],] }],
    onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
    onFocusin: [{ type: HostListener, args: ['focusin',] }],
    onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Slider component module
 */
class BMSliderComponentModule {
}
BMSliderComponentModule.decorators = [
    { type: NgModule, args: [{
                imports: [BidiModule, CommonModule, OverlayModule],
                declarations: [BMSliderValueTooltipDirective, BMSliderComponent],
                exports: [BMSliderComponent, BMSliderValueTooltipDirective],
            },] }
];

export { BMSliderComponent, BMSliderComponentModule, BMSliderValueTooltipDirective };
//# sourceMappingURL=bmat-angular-forms-bm-slider.js.map