igniteui-webcomponents/components/slider/range-slider.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

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;
};
import { html, nothing } from 'lit';
import { property, query } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { registerComponent } from '../common/definitions/register.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { asNumber, asPercent } from '../common/util.js';
import { IgcSliderBaseComponent } from './slider-base.js';
import IgcSliderLabelComponent from './slider-label.js';
class IgcRangeSliderComponent extends EventEmitterMixin(IgcSliderBaseComponent) {
    constructor() {
        super(...arguments);
        this._lower = 0;
        this._upper = 0;
    }
    static register() {
        registerComponent(IgcRangeSliderComponent, IgcSliderLabelComponent);
    }
    set lower(val) {
        this._lower = this.validateValue(asNumber(val, this._lower));
    }
    get lower() {
        return this._lower;
    }
    set upper(val) {
        this._upper = this.validateValue(asNumber(val, this._upper));
    }
    get upper() {
        return this._upper;
    }
    get activeValue() {
        return this.activeThumb === this.thumbFrom ? this.lower : this.upper;
    }
    normalizeValue() {
        this._lower = this.validateValue(this._lower);
        this._upper = this.validateValue(this._upper);
    }
    getTrackStyle() {
        const start = asPercent(this.lower - this.min, this.distance);
        return {
            insetInlineStart: `${start}%`,
            width: `${asPercent(this.upper - this.min, this.distance) - start}%`,
        };
    }
    closestTo(goal, positions) {
        return positions.reduce((previous, current) => Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous);
    }
    closestHandle(event) {
        const fromOffset = this.thumbFrom.offsetLeft + this.thumbFrom.offsetWidth / 2;
        const toOffset = this.thumbTo.offsetLeft + this.thumbTo.offsetWidth / 2;
        const xPointer = event.clientX - this.getBoundingClientRect().left;
        const match = this.closestTo(xPointer, [fromOffset, toOffset]);
        if (fromOffset === toOffset && toOffset < xPointer) {
            return this.thumbTo;
        }
        if (fromOffset === toOffset && toOffset > xPointer) {
            return this.thumbFrom;
        }
        if (match === fromOffset) {
            return this.thumbFrom;
        }
        return this.thumbTo;
    }
    updateValue(increment) {
        const oldValue = this.activeValue;
        let [lower, upper] = [this.lower, this.upper];
        if (this.activeThumb === this.thumbFrom) {
            lower += increment;
        }
        else {
            upper += increment;
        }
        if (lower >= upper) {
            [this.lower, this.upper] = [upper, lower];
            this.toggleActiveThumb();
        }
        else {
            [this.lower, this.upper] = [lower, upper];
        }
        if (oldValue === this.activeValue) {
            return false;
        }
        this.emitInputEvent();
        return true;
    }
    emitInputEvent() {
        this.emitEvent('igcInput', {
            detail: { lower: this.lower, upper: this.upper },
        });
    }
    emitChangeEvent() {
        this.emitEvent('igcChange', {
            detail: { lower: this.lower, upper: this.upper },
        });
    }
    toggleActiveThumb() {
        const thumb = this.activeThumb === this.thumbFrom ? this.thumbTo : this.thumbFrom;
        thumb.focus();
    }
    handleFocus(event) {
        this.activeThumb = event.target;
        const id = this.activeThumb.id;
        for (const thumb of [this.thumbFrom, this.thumbTo]) {
            if (thumb.id === id)
                continue;
            const [activeValue, thumbVal] = [
                asNumber(this.activeThumb.ariaValueNow),
                asNumber(thumb.ariaValueNow),
            ];
            this.activeThumb.ariaValueText = `${this.formatValue(Math.min(activeValue, thumbVal))} - ${this.formatValue(Math.max(activeValue, thumbVal))}`;
        }
    }
    renderThumb(value, ariaLabel, thumbId) {
        const percent = `${asPercent(value - this.min, this.distance)}%`;
        const thumbStyles = { insetInlineStart: percent };
        const tooltipStyles = {
            insetInlineStart: percent,
            opacity: this.thumbLabelsVisible ? 1 : 0,
        };
        const ariaValueText = thumbId === 'thumbFrom' ? `min ${this.lower}` : `max ${this.upper}`;
        const textValue = this.hasLabels
            ? this.labels[value]
            : this.valueFormat || this.valueFormatOptions
                ? this.formatValue(value)
                : ariaValueText;
        return html `
      <div
        part="thumb"
        id=${ifDefined(thumbId)}
        tabindex=${this.disabled ? -1 : 0}
        style=${styleMap(thumbStyles)}
        role="slider"
        aria-valuemin=${this.lowerBound}
        aria-valuemax=${this.upperBound}
        aria-valuenow=${value}
        aria-valuetext=${ifDefined(textValue)}
        aria-label=${ifDefined(ariaLabel)}
        aria-disabled=${this.disabled ? 'true' : 'false'}
        @pointerenter=${this.showThumbLabels}
        @pointerleave=${this.hideThumbLabels}
        @focus=${this.handleFocus}
        @blur=${this.handleThumbBlur}
      ></div>
      ${this.hideTooltip
            ? nothing
            : html `
            <div part="thumb-label" style=${styleMap(tooltipStyles)}>
              <div part="thumb-label-inner">
                ${this.hasLabels ? this.labels[value] : this.formatValue(value)}
              </div>
            </div>
          `}
    `;
    }
    renderThumbs() {
        return html `${this.renderThumb(this.lower, this.thumbLabelLower, 'thumbFrom')}
    ${this.renderThumb(this.upper, this.thumbLabelUpper, 'thumbTo')}`;
    }
}
IgcRangeSliderComponent.tagName = 'igc-range-slider';
export default IgcRangeSliderComponent;
__decorate([
    query('#thumbFrom')
], IgcRangeSliderComponent.prototype, "thumbFrom", void 0);
__decorate([
    query('#thumbTo')
], IgcRangeSliderComponent.prototype, "thumbTo", void 0);
__decorate([
    property({ type: Number })
], IgcRangeSliderComponent.prototype, "lower", null);
__decorate([
    property({ type: Number })
], IgcRangeSliderComponent.prototype, "upper", null);
__decorate([
    property({ attribute: 'thumb-label-lower' })
], IgcRangeSliderComponent.prototype, "thumbLabelLower", void 0);
__decorate([
    property({ attribute: 'thumb-label-upper' })
], IgcRangeSliderComponent.prototype, "thumbLabelUpper", void 0);
//# sourceMappingURL=range-slider.js.map