igniteui-webcomponents 1.0.0 → 2.0.0-beta.0

package/components/slider/slider-base.js

@@ -0,0 +1,448 @@
+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, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { watch } from '../common/decorators';
+import { styles } from './slider.material.css';
+export class IgcSliderBaseComponent extends LitElement {
+    constructor() {
+        super();
+        this._min = 0;
+        this._max = 100;
+        this.pointerCaptured = false;
+        this.thumbLabelsVisible = false;
+        this.disabled = false;
+        this.discreteTrack = false;
+        this.hideTooltip = false;
+        this.step = 1;
+        this.primaryTicks = 0;
+        this.secondaryTicks = 0;
+        this.tickOrientation = 'end';
+        this.hidePrimaryLabels = false;
+        this.hideSecondaryLabels = false;
+        this.tickLabelRotation = 0;
+        this.pointerDown = (event) => {
+            const thumb = this.closestHandle(event);
+            thumb.focus();
+            this.startValue = this.activeValue;
+            this.updateSlider(event.clientX);
+            this.setPointerCapture(event.pointerId);
+            this.pointerCaptured = true;
+            this.showThumbLabels();
+            event.preventDefault();
+        };
+        this.pointerMove = (event) => {
+            if (this.pointerCaptured) {
+                this.updateSlider(event.clientX);
+            }
+        };
+        this.lostPointerCapture = () => {
+            this.pointerCaptured = false;
+            this.hideThumbLabels();
+            if (this.startValue !== this.activeValue) {
+                this.emitChangeEvent();
+            }
+            this.startValue = undefined;
+        };
+        this.handleKeydown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            const { key } = event;
+            let increment = 0;
+            const value = this.activeValue;
+            const step = this.step ? this.step : 1;
+            switch (key) {
+                case 'ArrowLeft':
+                    increment += this.isLTR ? -step : step;
+                    break;
+                case 'ArrowRight':
+                    increment += this.isLTR ? step : -step;
+                    break;
+                case 'ArrowUp':
+                    increment = step;
+                    break;
+                case 'ArrowDown':
+                    increment = -step;
+                    break;
+                case 'Home':
+                    increment = this.actualMin - value;
+                    break;
+                case 'End':
+                    increment = this.actualMax - value;
+                    break;
+                case 'PageUp':
+                    increment = Math.max((this.actualMax - this.actualMin) / 10, step);
+                    break;
+                case 'PageDown':
+                    increment = -Math.max((this.actualMax - this.actualMin) / 10, step);
+                    break;
+                default:
+                    return;
+            }
+            if (increment) {
+                const updated = this.updateValue(increment);
+                this.showThumbLabels();
+                this.hideThumbLabels();
+                if (updated) {
+                    this.emitChangeEvent();
+                }
+            }
+        };
+        this.handleThumbPointerEnter = () => {
+            this.showThumbLabels();
+        };
+        this.handleThumbPointerLeave = () => {
+            this.hideThumbLabels();
+        };
+        this.addEventListener('pointerdown', this.pointerDown);
+        this.addEventListener('pointermove', this.pointerMove);
+        this.addEventListener('lostpointercapture', this.lostPointerCapture);
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    set min(value) {
+        if (value < this.max) {
+            const oldVal = this._min;
+            this._min = value;
+            this.requestUpdate('min', oldVal);
+            if (typeof this.lowerBound === 'number' && this.lowerBound < value) {
+                this.lowerBound = value;
+            }
+        }
+    }
+    get min() {
+        return this._min;
+    }
+    set max(value) {
+        if (value > this.min) {
+            const oldVal = this._max;
+            this._max = value;
+            this.requestUpdate('max', oldVal);
+            if (typeof this.upperBound === 'number' && this.upperBound > value) {
+                this.upperBound = value;
+            }
+        }
+    }
+    get max() {
+        return this._max;
+    }
+    set lowerBound(value) {
+        const oldVal = this._lowerBound;
+        if (typeof value === 'number') {
+            this._lowerBound = this.valueInRange(value, this.min, this.actualMax);
+        }
+        else {
+            this._lowerBound = value;
+        }
+        this.requestUpdate('lowerBound', oldVal);
+    }
+    get lowerBound() {
+        return this._lowerBound;
+    }
+    set upperBound(value) {
+        const oldVal = this._upperBound;
+        if (typeof value === 'number') {
+            this._upperBound = this.valueInRange(value, this.actualMin, this.max);
+        }
+        else {
+            this._upperBound = value;
+        }
+        this.requestUpdate('upperBound', oldVal);
+    }
+    get upperBound() {
+        return this._upperBound;
+    }
+    constraintsChange() {
+        this.normalizeValue();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.normalizeValue();
+    }
+    get activeValue() {
+        return 0;
+    }
+    normalizeValue() { }
+    getTrackStyle() {
+        return {};
+    }
+    updateValue(_increment) {
+        return false;
+    }
+    renderThumbs() {
+        return html ``;
+    }
+    emitInputEvent() { }
+    emitChangeEvent() { }
+    get actualMin() {
+        return typeof this.lowerBound === 'number'
+            ? this.lowerBound
+            : this.min;
+    }
+    get actualMax() {
+        return typeof this.upperBound === 'number'
+            ? this.upperBound
+            : this.max;
+    }
+    get isLTR() {
+        const styles = window.getComputedStyle(this);
+        return styles.getPropertyValue('direction') === 'ltr';
+    }
+    validateValue(value) {
+        value = this.valueInRange(value, this.actualMin, this.actualMax);
+        value = this.normalizeByStep(value);
+        return value;
+    }
+    normalizeByStep(value) {
+        return this.step ? value - ((value - this.actualMin) % this.step) : value;
+    }
+    closestHandle(_event) {
+        return this.thumb;
+    }
+    totalTickCount() {
+        if (this.primaryTicks === 1) {
+            this.primaryTicks = 2;
+        }
+        return this.primaryTicks > 0
+            ? (this.primaryTicks - 1) * this.secondaryTicks + this.primaryTicks
+            : this.secondaryTicks > 0
+                ? this.secondaryTicks
+                : 0;
+    }
+    tickValue(idx) {
+        const tickCount = this.totalTickCount();
+        const labelStep = tickCount > 1
+            ? (this.max - this.min) / (tickCount - 1)
+            : this.max - this.min;
+        const labelVal = labelStep * idx;
+        return this.min + labelVal;
+    }
+    isPrimary(idx) {
+        return this.primaryTicks <= 0
+            ? false
+            : idx % (this.secondaryTicks + 1) === 0;
+    }
+    showThumbLabels() {
+        if (this.disabled || this.hideTooltip) {
+            return;
+        }
+        if (this.thumbHoverTimer) {
+            clearTimeout(this.thumbHoverTimer);
+            this.thumbHoverTimer = null;
+        }
+        this.thumbLabelsVisible = true;
+    }
+    hideThumbLabels() {
+        if (this.pointerCaptured || !this.thumbLabelsVisible) {
+            return;
+        }
+        this.thumbHoverTimer = setTimeout(() => {
+            this.thumbLabelsVisible = false;
+        }, 750);
+    }
+    valueInRange(value, min = 0, max = 100) {
+        return Math.max(Math.min(value, max), min);
+    }
+    valueToFraction(value) {
+        return (value - this.min) / (this.max - this.min);
+    }
+    calculateTrackUpdate(mouseX) {
+        if (!this.activeThumb) {
+            return 0;
+        }
+        const thumbBoundaries = this.activeThumb.getBoundingClientRect();
+        const thumbCenter = (thumbBoundaries.right - thumbBoundaries.left) / 2;
+        const thumbPositionX = thumbBoundaries.left + thumbCenter;
+        const scale = this.getBoundingClientRect().width / (this.max - this.min);
+        const change = this.isLTR
+            ? mouseX - thumbPositionX
+            : thumbPositionX - mouseX;
+        if (this.step) {
+            const stepDistance = scale * this.step;
+            const stepDistanceCenter = stepDistance / 2;
+            const scaleXPositive = Math.abs(change);
+            if (scaleXPositive < stepDistanceCenter) {
+                return 0;
+            }
+            return Math.round(change / stepDistance) * this.step;
+        }
+        else {
+            return change / scale;
+        }
+    }
+    updateSlider(mouseX) {
+        if (this.disabled) {
+            return;
+        }
+        const increment = this.calculateTrackUpdate(mouseX);
+        if (this.activeThumb && increment !== 0) {
+            this.updateValue(increment);
+        }
+    }
+    renderTicks() {
+        const groups = [];
+        for (let i = 0, totalCount = this.totalTickCount(); i < totalCount; i++) {
+            const isPrimary = this.isPrimary(i);
+            groups.push(html `
+        <div part="tick-group">
+          <div part="tick" data-primary=${isPrimary}>
+            ${(isPrimary ? this.hidePrimaryLabels : this.hideSecondaryLabels)
+                ? html ``
+                : html `
+                  <div part="tick-label">
+                    <span part="tick-label-inner">
+                      ${this.labelFormatter
+                    ? this.labelFormatter(this.tickValue(i))
+                    : this.tickValue(i)}
+                    </span>
+                  </div>
+                `}
+          </div>
+        </div>
+      `);
+        }
+        return groups;
+    }
+    renderThumb(value, ariaLabel, thumbId) {
+        const percent = `${this.valueToFraction(value) * 100}%`;
+        return html `
+      ${this.hideTooltip
+            ? html ``
+            : html `
+            <div
+              part="thumb-label"
+              style=${styleMap({
+                opacity: this.thumbLabelsVisible ? '1' : '0',
+                insetInlineStart: percent,
+            })}
+            >
+              ${this.labelFormatter ? this.labelFormatter(value) : value}
+            </div>
+          `}
+      <div
+        part="thumb"
+        id=${ifDefined(thumbId)}
+        tabindex=${this.disabled ? -1 : 0}
+        style=${styleMap({ insetInlineStart: percent })}
+        role="slider"
+        aria-valuemin=${this.actualMin}
+        aria-valuemax=${this.actualMax}
+        aria-valuenow=${value}
+        aria-valuetext=${ifDefined(this.labelFormatter ? this.labelFormatter(value) : undefined)}
+        aria-label=${ifDefined(ariaLabel)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        @pointerenter=${this.handleThumbPointerEnter}
+        @pointerleave=${this.handleThumbPointerLeave}
+        @focus=${(ev) => (this.activeThumb = ev.target)}
+        @blur=${() => (this.activeThumb = undefined)}
+      ></div>
+    `;
+    }
+    renderSteps() {
+        if (!this.discreteTrack || !this.step) {
+            return html ``;
+        }
+        const trackRange = this.max - this.min;
+        const interval = ((100 / (trackRange / this.step)) * 10) / 10;
+        return html `
+      <div part="steps">
+        <svg width="100%" height="100%" style="display: flex">
+          <line
+            x1="0"
+            y1="1"
+            x2="100%"
+            y2="1"
+            stroke="currentColor"
+            stroke-dasharray="1.5px, calc(${interval * Math.sqrt(2)}% - 1.5px)"
+            stroke-linecap="round"
+            stroke-width="2px"
+          ></line>
+        </svg>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div part="base">
+        ${this.tickOrientation === 'mirror' || this.tickOrientation === 'start'
+            ? html `<div part="ticks">${this.renderTicks()}</div>`
+            : html ``}
+        <div part="track">
+          <div part="fill" style=${styleMap(this.getTrackStyle())}></div>
+          <div part="inactive"></div>
+          ${this.renderSteps()}
+        </div>
+        ${this.tickOrientation !== 'start'
+            ? html `<div part="ticks">${this.renderTicks()}</div>`
+            : html ``}
+        <div part="thumbs">${this.renderThumbs()}</div>
+      </div>
+    `;
+    }
+}
+IgcSliderBaseComponent.styles = [styles];
+__decorate([
+    query(`[part='thumb']`)
+], IgcSliderBaseComponent.prototype, "thumb", void 0);
+__decorate([
+    state()
+], IgcSliderBaseComponent.prototype, "thumbLabelsVisible", void 0);
+__decorate([
+    property({ type: Number })
+], IgcSliderBaseComponent.prototype, "min", null);
+__decorate([
+    property({ type: Number })
+], IgcSliderBaseComponent.prototype, "max", null);
+__decorate([
+    property({ type: Number, attribute: 'lower-bound' })
+], IgcSliderBaseComponent.prototype, "lowerBound", null);
+__decorate([
+    property({ type: Number, attribute: 'upper-bound' })
+], IgcSliderBaseComponent.prototype, "upperBound", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcSliderBaseComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'discrete-track' })
+], IgcSliderBaseComponent.prototype, "discreteTrack", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-tooltip' })
+], IgcSliderBaseComponent.prototype, "hideTooltip", void 0);
+__decorate([
+    property({ type: Number })
+], IgcSliderBaseComponent.prototype, "step", void 0);
+__decorate([
+    property({ type: Number, attribute: 'primary-ticks' })
+], IgcSliderBaseComponent.prototype, "primaryTicks", void 0);
+__decorate([
+    property({ type: Number, attribute: 'secondary-ticks' })
+], IgcSliderBaseComponent.prototype, "secondaryTicks", void 0);
+__decorate([
+    property({ attribute: 'tick-orientation' })
+], IgcSliderBaseComponent.prototype, "tickOrientation", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-primary-labels' })
+], IgcSliderBaseComponent.prototype, "hidePrimaryLabels", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-secondary-labels' })
+], IgcSliderBaseComponent.prototype, "hideSecondaryLabels", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcSliderBaseComponent.prototype, "labelFormatter", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'tick-label-rotation' })
+], IgcSliderBaseComponent.prototype, "tickLabelRotation", void 0);
+__decorate([
+    watch('min', { waitUntilFirstUpdate: true }),
+    watch('max', { waitUntilFirstUpdate: true }),
+    watch('lowerBound', { waitUntilFirstUpdate: true }),
+    watch('upperBound', { waitUntilFirstUpdate: true }),
+    watch('step', { waitUntilFirstUpdate: true })
+], IgcSliderBaseComponent.prototype, "constraintsChange", null);
+//# sourceMappingURL=slider-base.js.map

package/components/slider/slider-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-base.js","sourceRoot":"","sources":["../../../src/components/slider/slider-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { watch } from '../common/decorators';\nimport { styles } from './slider.material.css';\n\nexport class IgcSliderBaseComponent extends LitElement {\n  /** @private */\n  public static styles = [styles];\n\n  @query(`[part='thumb']`)\n  protected thumb!: HTMLElement;\n\n  private _lowerBound?: number;\n  private _upperBound?: number;\n  private _min = 0;\n  private _max = 100;\n  private startValue?: number;\n  private pointerCaptured = false;\n  private thumbHoverTimer: any;\n  protected activeThumb?: HTMLElement;\n\n  @state()\n  private thumbLabelsVisible = false;\n\n  public set min(value: number) {\n    if (value < this.max) {\n      const oldVal = this._min;\n      this._min = value;\n      this.requestUpdate('min', oldVal);\n\n      if (typeof this.lowerBound === 'number' && this.lowerBound < value) {\n        this.lowerBound = value;\n      }\n    }\n  }\n\n  /**\n   * The minimum value of the slider scale. Defaults to 0.\n   */\n  @property({ type: Number })\n  public get min() {\n    return this._min;\n  }\n\n  public set max(value: number) {\n    if (value > this.min) {\n      const oldVal = this._max;\n      this._max = value;\n      this.requestUpdate('max', oldVal);\n\n      if (typeof this.upperBound === 'number' && this.upperBound > value) {\n        this.upperBound = value;\n      }\n    }\n  }\n\n  /**\n   * The maximum value of the slider scale. Defaults to 100.\n   */\n  @property({ type: Number })\n  public get max() {\n    return this._max;\n  }\n\n  public set lowerBound(value: number | undefined) {\n    const oldVal = this._lowerBound;\n\n    if (typeof value === 'number') {\n      this._lowerBound = this.valueInRange(value, this.min, this.actualMax);\n    } else {\n      this._lowerBound = value;\n    }\n    this.requestUpdate('lowerBound', oldVal);\n  }\n\n  /**\n   * The lower bound of the slider value. If not set, the `min` value is applied.\n   */\n  @property({ type: Number, attribute: 'lower-bound' })\n  public get lowerBound(): number | undefined {\n    return this._lowerBound;\n  }\n\n  public set upperBound(value: number | undefined) {\n    const oldVal = this._upperBound;\n\n    if (typeof value === 'number') {\n      this._upperBound = this.valueInRange(value, this.actualMin, this.max);\n    } else {\n      this._upperBound = value;\n    }\n    this.requestUpdate('upperBound', oldVal);\n  }\n\n  /**\n   * The upper bound of the slider value. If not set, the `max` value is applied.\n   */\n  @property({ type: Number, attribute: 'upper-bound' })\n  public get upperBound(): number | undefined {\n    return this._upperBound;\n  }\n\n  /**\n   * Disables the UI interactions of the slider.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Marks the slider track as discrete so it displays the steps.\n   * If the `step` is 0, the slider will remain continuos even if `discreteTrack` is `true`.\n   */\n  @property({ type: Boolean, attribute: 'discrete-track' })\n  public discreteTrack = false;\n\n  /**\n   * Hides the thumb tooltip.\n   */\n  @property({ type: Boolean, attribute: 'hide-tooltip' })\n  public hideTooltip = false;\n\n  /**\n   * Specifies the granularity that the value must adhere to.\n   * If set to 0 no stepping is implied and any value in the range is allowed.\n   */\n  @property({ type: Number })\n  public step = 1;\n\n  /**\n   * The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.\n   */\n  @property({ type: Number, attribute: 'primary-ticks' })\n  public primaryTicks = 0;\n\n  /**\n   * The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.\n   */\n  @property({ type: Number, attribute: 'secondary-ticks' })\n  public secondaryTicks = 0;\n\n  /**\n   * Changes the orientation of the ticks.\n   */\n  @property({ attribute: 'tick-orientation' })\n  public tickOrientation: 'mirror' | 'start' | 'end' = 'end';\n\n  /**\n   * Hides the primary tick labels.\n   */\n  @property({ type: Boolean, attribute: 'hide-primary-labels' })\n  public hidePrimaryLabels = false;\n\n  /**\n   * Hides the secondary tick labels.\n   */\n  @property({ type: Boolean, attribute: 'hide-secondary-labels' })\n  public hideSecondaryLabels = false;\n\n  /**\n   * Specifies a custom function to format the labels.\n   */\n  @property({ attribute: false })\n  public labelFormatter: ((value: number) => string) | undefined;\n\n  /**\n   * The degrees for the rotation of the tick labels. Defaults to 0.\n   */\n  @property({ type: Number, reflect: true, attribute: 'tick-label-rotation' })\n  public tickLabelRotation: 0 | 90 | -90 = 0;\n\n  @watch('min', { waitUntilFirstUpdate: true })\n  @watch('max', { waitUntilFirstUpdate: true })\n  @watch('lowerBound', { waitUntilFirstUpdate: true })\n  @watch('upperBound', { waitUntilFirstUpdate: true })\n  @watch('step', { waitUntilFirstUpdate: true })\n  protected constraintsChange() {\n    this.normalizeValue();\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('pointerdown', this.pointerDown);\n    this.addEventListener('pointermove', this.pointerMove);\n    this.addEventListener('lostpointercapture', this.lostPointerCapture);\n    this.addEventListener('keydown', this.handleKeydown);\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n    this.normalizeValue();\n  }\n\n  /* c8 ignore next 3 */\n  protected get activeValue() {\n    return 0;\n  }\n\n  /* c8 ignore next */\n  protected normalizeValue(): void {}\n\n  /* c8 ignore next 3 */\n  protected getTrackStyle(): StyleInfo {\n    return {};\n  }\n\n  /* c8 ignore next 3 */\n  protected updateValue(_increment: number): boolean {\n    return false;\n  }\n\n  /* c8 ignore next 3 */\n  protected renderThumbs(): TemplateResult<1> {\n    return html``;\n  }\n\n  /* c8 ignore next */\n  protected emitInputEvent() {}\n\n  /* c8 ignore next */\n  protected emitChangeEvent() {}\n\n  private get actualMin(): number {\n    return typeof this.lowerBound === 'number'\n      ? (this.lowerBound as number)\n      : this.min;\n  }\n\n  private get actualMax(): number {\n    return typeof this.upperBound === 'number'\n      ? (this.upperBound as number)\n      : this.max;\n  }\n\n  private get isLTR(): boolean {\n    const styles = window.getComputedStyle(this);\n    return styles.getPropertyValue('direction') === 'ltr';\n  }\n\n  protected validateValue(value: number) {\n    value = this.valueInRange(value, this.actualMin, this.actualMax);\n    value = this.normalizeByStep(value);\n\n    return value;\n  }\n\n  private normalizeByStep(value: number) {\n    return this.step ? value - ((value - this.actualMin) % this.step) : value;\n  }\n\n  protected closestHandle(_event: PointerEvent): HTMLElement {\n    return this.thumb;\n  }\n\n  private totalTickCount() {\n    if (this.primaryTicks === 1) {\n      this.primaryTicks = 2;\n    }\n\n    return this.primaryTicks > 0\n      ? (this.primaryTicks - 1) * this.secondaryTicks + this.primaryTicks\n      : this.secondaryTicks > 0\n      ? this.secondaryTicks\n      : 0;\n  }\n\n  private tickValue(idx: number) {\n    const tickCount = this.totalTickCount();\n    const labelStep =\n      tickCount > 1\n        ? (this.max - this.min) / (tickCount - 1)\n        : this.max - this.min;\n    const labelVal = labelStep * idx;\n\n    return this.min + labelVal;\n  }\n\n  private isPrimary(idx: number) {\n    return this.primaryTicks <= 0\n      ? false\n      : idx % (this.secondaryTicks + 1) === 0;\n  }\n\n  private showThumbLabels() {\n    if (this.disabled || this.hideTooltip) {\n      return;\n    }\n\n    if (this.thumbHoverTimer) {\n      clearTimeout(this.thumbHoverTimer);\n      this.thumbHoverTimer = null;\n    }\n\n    this.thumbLabelsVisible = true;\n  }\n\n  private hideThumbLabels() {\n    if (this.pointerCaptured || !this.thumbLabelsVisible) {\n      return;\n    }\n\n    this.thumbHoverTimer = setTimeout(() => {\n      this.thumbLabelsVisible = false;\n    }, 750);\n  }\n\n  private valueInRange(value: number, min = 0, max = 100) {\n    return Math.max(Math.min(value, max), min);\n  }\n\n  protected valueToFraction(value: number) {\n    return (value - this.min) / (this.max - this.min);\n  }\n\n  private calculateTrackUpdate(mouseX: number): number {\n    if (!this.activeThumb) {\n      return 0;\n    }\n\n    const thumbBoundaries = this.activeThumb.getBoundingClientRect();\n    const thumbCenter = (thumbBoundaries.right - thumbBoundaries.left) / 2;\n    const thumbPositionX = thumbBoundaries.left + thumbCenter;\n\n    const scale = this.getBoundingClientRect().width / (this.max - this.min);\n    const change = this.isLTR\n      ? mouseX - thumbPositionX\n      : thumbPositionX - mouseX;\n\n    if (this.step) {\n      const stepDistance = scale * this.step;\n      const stepDistanceCenter = stepDistance / 2;\n\n      // If the thumb scale range (slider update) is less than a half step,\n      // the position stays the same.\n      const scaleXPositive = Math.abs(change);\n      if (scaleXPositive < stepDistanceCenter) {\n        return 0;\n      }\n\n      return Math.round(change / stepDistance) * this.step;\n    } else {\n      return change / scale;\n    }\n  }\n\n  private updateSlider(mouseX: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    const increment = this.calculateTrackUpdate(mouseX);\n    if (this.activeThumb && increment !== 0) {\n      this.updateValue(increment);\n    }\n  }\n\n  private pointerDown = (event: PointerEvent) => {\n    const thumb = this.closestHandle(event);\n    thumb.focus();\n\n    this.startValue = this.activeValue;\n    this.updateSlider(event.clientX);\n\n    this.setPointerCapture(event.pointerId);\n    this.pointerCaptured = true;\n    this.showThumbLabels();\n    event.preventDefault();\n  };\n\n  private pointerMove = (event: PointerEvent) => {\n    if (this.pointerCaptured) {\n      this.updateSlider(event.clientX);\n    }\n  };\n\n  private lostPointerCapture = () => {\n    this.pointerCaptured = false;\n    this.hideThumbLabels();\n\n    if (this.startValue! !== this.activeValue) {\n      this.emitChangeEvent();\n    }\n    this.startValue = undefined;\n  };\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const { key } = event;\n\n    let increment = 0;\n    const value = this.activeValue;\n    const step = this.step ? this.step : 1;\n\n    switch (key) {\n      case 'ArrowLeft':\n        increment += this.isLTR ? -step : step;\n        break;\n      case 'ArrowRight':\n        increment += this.isLTR ? step : -step;\n        break;\n      case 'ArrowUp':\n        increment = step;\n        break;\n      case 'ArrowDown':\n        increment = -step;\n        break;\n      case 'Home':\n        increment = this.actualMin - value;\n        break;\n      case 'End':\n        increment = this.actualMax - value;\n        break;\n      case 'PageUp':\n        increment = Math.max((this.actualMax - this.actualMin) / 10, step);\n        break;\n      case 'PageDown':\n        increment = -Math.max((this.actualMax - this.actualMin) / 10, step);\n        break;\n      default:\n        return;\n    }\n\n    if (increment) {\n      const updated = this.updateValue(increment);\n      this.showThumbLabels();\n      this.hideThumbLabels();\n\n      if (updated) {\n        this.emitChangeEvent();\n      }\n    }\n  };\n\n  private handleThumbPointerEnter = () => {\n    this.showThumbLabels();\n  };\n\n  private handleThumbPointerLeave = () => {\n    this.hideThumbLabels();\n  };\n\n  protected renderTicks() {\n    const groups = [];\n    for (let i = 0, totalCount = this.totalTickCount(); i < totalCount; i++) {\n      const isPrimary = this.isPrimary(i);\n      groups.push(html`\n        <div part=\"tick-group\">\n          <div part=\"tick\" data-primary=${isPrimary}>\n            ${(isPrimary ? this.hidePrimaryLabels : this.hideSecondaryLabels)\n              ? html``\n              : html`\n                  <div part=\"tick-label\">\n                    <span part=\"tick-label-inner\">\n                      ${this.labelFormatter\n                        ? this.labelFormatter(this.tickValue(i))\n                        : this.tickValue(i)}\n                    </span>\n                  </div>\n                `}\n          </div>\n        </div>\n      `);\n    }\n    return groups;\n  }\n\n  protected renderThumb(value: number, ariaLabel?: string, thumbId?: string) {\n    const percent = `${this.valueToFraction(value) * 100}%`;\n\n    return html`\n      ${this.hideTooltip\n        ? html``\n        : html`\n            <div\n              part=\"thumb-label\"\n              style=${styleMap({\n                opacity: this.thumbLabelsVisible ? '1' : '0',\n                insetInlineStart: percent,\n              })}\n            >\n              ${this.labelFormatter ? this.labelFormatter(value) : value}\n            </div>\n          `}\n      <div\n        part=\"thumb\"\n        id=${ifDefined(thumbId)}\n        tabindex=${this.disabled ? -1 : 0}\n        style=${styleMap({ insetInlineStart: percent })}\n        role=\"slider\"\n        aria-valuemin=${this.actualMin}\n        aria-valuemax=${this.actualMax}\n        aria-valuenow=${value}\n        aria-valuetext=${ifDefined(\n          this.labelFormatter ? this.labelFormatter(value) : undefined\n        )}\n        aria-label=${ifDefined(ariaLabel)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        @pointerenter=${this.handleThumbPointerEnter}\n        @pointerleave=${this.handleThumbPointerLeave}\n        @focus=${(ev: Event) => (this.activeThumb = ev.target as HTMLElement)}\n        @blur=${() => (this.activeThumb = undefined)}\n      ></div>\n    `;\n  }\n\n  private renderSteps() {\n    if (!this.discreteTrack || !this.step) {\n      return html``;\n    }\n\n    const trackRange = this.max - this.min;\n    const interval = ((100 / (trackRange / this.step)) * 10) / 10;\n\n    return html`\n      <div part=\"steps\">\n        <svg width=\"100%\" height=\"100%\" style=\"display: flex\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"100%\"\n            y2=\"1\"\n            stroke=\"currentColor\"\n            stroke-dasharray=\"1.5px, calc(${interval * Math.sqrt(2)}% - 1.5px)\"\n            stroke-linecap=\"round\"\n            stroke-width=\"2px\"\n          ></line>\n        </svg>\n      </div>\n    `;\n  }\n\n  protected render() {\n    return html`\n      <div part=\"base\">\n        ${this.tickOrientation === 'mirror' || this.tickOrientation === 'start'\n          ? html`<div part=\"ticks\">${this.renderTicks()}</div>`\n          : html``}\n        <div part=\"track\">\n          <div part=\"fill\" style=${styleMap(this.getTrackStyle())}></div>\n          <div part=\"inactive\"></div>\n          ${this.renderSteps()}\n        </div>\n        ${this.tickOrientation !== 'start'\n          ? html`<div part=\"ticks\">${this.renderTicks()}</div>`\n          : html``}\n        <div part=\"thumbs\">${this.renderThumbs()}</div>\n      </div>\n    `;\n  }\n}\n"]}

package/components/slider/slider.d.ts

@@ -0,0 +1,76 @@
+import { Constructor } from '../common/mixins/constructor';
+import { IgcSliderBaseComponent } from './slider-base';
+export interface IgcSliderEventMap {
+    /**
+     * Emitted when a value is changed via thumb drag or keyboard interaction.
+     */
+    igcInput: CustomEvent<number>;
+    /**
+     * Emitted when a value change is committed on a thumb drag end or keyboard interaction.
+     */
+    igcChange: CustomEvent<number>;
+}
+declare const IgcSliderComponent_base: Constructor<import("../common/mixins/event-emitter").EventEmitterInterface<IgcSliderEventMap>> & Constructor<IgcSliderBaseComponent>;
+/**
+ * A slider component used to select numeric value within a range.
+ *
+ * @element igc-slider
+ *
+ * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.
+ * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.
+ *
+ * @csspart base - The base wrapper of the slider.
+ * @csspart ticks - The ticks container.
+ * @csspart tick-group - The tick group container.
+ * @csspart tick - The tick element.
+ * @csspart tick-label - The tick label element.
+ * @csspart tick-label-inner - The inner element of the tick label.
+ * @csspart thumbs - The thumbs container.
+ * @csspart thumb - The thumb element.
+ * @csspart thumb-label - The label of the thumb tooltip.
+ * @csspart track - The track container.
+ * @csspart steps - The track steps element.
+ * @csspart inactive - The inactive element of the track.
+ * @csspart fill - The filled part of the track.
+ */
+export default class IgcSliderComponent extends IgcSliderComponent_base {
+    /** @private */
+    static tagName: string;
+    private _value;
+    private _ariaLabel;
+    set value(val: number);
+    /**
+     * The current value of the slider.
+     */
+    get value(): number;
+    set ariaLabel(value: string);
+    /**
+     * The aria label of the slider thumb.
+     */
+    get ariaLabel(): string;
+    protected get activeValue(): number;
+    protected normalizeValue(): void;
+    protected getTrackStyle(): {
+        width: string;
+    };
+    protected updateValue(increment: number): boolean;
+    protected emitInputEvent(): void;
+    protected emitChangeEvent(): void;
+    /**
+     * Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1.
+     * @param stepIncrement Optional step increment. If no parameter is passed, it defaults to 1.
+     */
+    stepUp(stepIncrement?: number): void;
+    /**
+     * Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1.
+     * @param stepDecrement Optional step decrement. If no parameter is passed, it defaults to 1.
+     */
+    stepDown(stepDecrement?: number): void;
+    protected renderThumbs(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-slider': IgcSliderComponent;
+    }
+}
+export {};

package/components/slider/slider.js

@@ -0,0 +1,80 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter';
+import { IgcSliderBaseComponent } from './slider-base';
+export default class IgcSliderComponent extends EventEmitterMixin(IgcSliderBaseComponent) {
+    constructor() {
+        super(...arguments);
+        this._value = 0;
+    }
+    set value(val) {
+        const oldVal = this._value;
+        this._value = this.validateValue(val);
+        this.requestUpdate('value', oldVal);
+    }
+    get value() {
+        return this._value;
+    }
+    set ariaLabel(value) {
+        const oldVal = this._ariaLabel;
+        this._ariaLabel = value;
+        if (this.hasAttribute('aria-label')) {
+            this.removeAttribute('aria-label');
+        }
+        this.requestUpdate('ariaLabel', oldVal);
+    }
+    get ariaLabel() {
+        return this._ariaLabel;
+    }
+    get activeValue() {
+        return this.value;
+    }
+    normalizeValue() {
+        this._value = this.validateValue(this._value);
+    }
+    getTrackStyle() {
+        const position = this.valueToFraction(this.value);
+        const filledTrackStyle = {
+            width: `${position * 100}%`,
+        };
+        return filledTrackStyle;
+    }
+    updateValue(increment) {
+        const oldValue = this.value;
+        this.value = this.value + increment;
+        if (oldValue === this.value) {
+            return false;
+        }
+        this.emitInputEvent();
+        return true;
+    }
+    emitInputEvent() {
+        this.emitEvent('igcInput', { detail: this.value });
+    }
+    emitChangeEvent() {
+        this.emitEvent('igcChange', { detail: this.value });
+    }
+    stepUp(stepIncrement = 1) {
+        this.value = this.value + stepIncrement * this.step;
+    }
+    stepDown(stepDecrement = 1) {
+        this.value = this.value - stepDecrement * this.step;
+    }
+    renderThumbs() {
+        return html `${this.renderThumb(this.value, this.ariaLabel)}`;
+    }
+}
+IgcSliderComponent.tagName = 'igc-slider';
+__decorate([
+    property({ type: Number })
+], IgcSliderComponent.prototype, "value", null);
+__decorate([
+    property({ attribute: 'aria-label' })
+], IgcSliderComponent.prototype, "ariaLabel", null);
+//# sourceMappingURL=slider.js.map