igniteui-webcomponents 1.0.0 → 2.0.0

package/components/slider/range-slider.js

@@ -0,0 +1,141 @@
+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, query } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter';
+import { IgcSliderBaseComponent } from './slider-base';
+export default class IgcRangeSliderComponent extends EventEmitterMixin(IgcSliderBaseComponent) {
+    constructor() {
+        super(...arguments);
+        this._lower = 0;
+        this._upper = 0;
+    }
+    set lower(val) {
+        const oldVal = this._lower;
+        this._lower = this.validateValue(val);
+        this.requestUpdate('lower', oldVal);
+    }
+    get lower() {
+        return this._lower;
+    }
+    set upper(val) {
+        const oldVal = this._upper;
+        this._upper = this.validateValue(val);
+        this.requestUpdate('upper', oldVal);
+    }
+    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 toPosition = this.valueToFraction(this.upper);
+        const fromPosition = this.valueToFraction(this.lower);
+        const positionGap = toPosition - fromPosition;
+        const filledTrackStyle = {
+            width: `${positionGap * 100}%`,
+            insetInlineStart: `${fromPosition * 100}%`,
+        };
+        return filledTrackStyle;
+    }
+    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;
+        }
+        else if (fromOffset === toOffset && toOffset > xPointer) {
+            return this.thumbFrom;
+        }
+        else if (match === fromOffset) {
+            return this.thumbFrom;
+        }
+        else {
+            return this.thumbTo;
+        }
+    }
+    updateValue(increment) {
+        const oldValue = this.activeValue;
+        let lower = this.lower;
+        let upper = this.upper;
+        if (this.activeThumb === this.thumbFrom) {
+            lower += increment;
+        }
+        else {
+            upper += increment;
+        }
+        if (lower >= upper) {
+            this.swapValues(lower, upper);
+            this.toggleActiveThumb();
+        }
+        else {
+            if (this.activeThumb === this.thumbFrom) {
+                this.lower = lower;
+            }
+            else {
+                this.upper = 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 },
+        });
+    }
+    swapValues(lower, upper) {
+        this.lower = upper;
+        this.upper = lower;
+    }
+    toggleActiveThumb() {
+        const thumb = this.activeThumb === this.thumbFrom ? this.thumbTo : this.thumbFrom;
+        thumb.focus();
+    }
+    renderThumbs() {
+        return html `${this.renderThumb(this.lower, this.ariaLabelLower, 'thumbFrom')}
+    ${this.renderThumb(this.upper, this.ariaLabelUpper, 'thumbTo')}`;
+    }
+}
+IgcRangeSliderComponent.tagName = 'igc-range-slider';
+__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: 'aria-label-lower' })
+], IgcRangeSliderComponent.prototype, "ariaLabelLower", void 0);
+__decorate([
+    property({ attribute: 'aria-label-upper' })
+], IgcRangeSliderComponent.prototype, "ariaLabelUpper", void 0);
+//# sourceMappingURL=range-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../src/components/slider/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter';\nimport { IgcSliderBaseComponent } from './slider-base';\n\nexport interface IgcRangeSliderValue {\n  lower: number;\n  upper: number;\n}\n\nexport interface IgcRangeSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<IgcRangeSliderValue>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<IgcRangeSliderValue>;\n}\n\n/**\n * A range slider component used to select two numeric values within a range.\n *\n * @element igc-range-slider\n *\n * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.\n * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n *\n * @csspart base - The base wrapper of the slider.\n * @csspart ticks - The ticks container.\n * @csspart tick-group - The tick group container.\n * @csspart tick - The tick element.\n * @csspart tick-label - The tick label element.\n * @csspart tick-label-inner - The inner element of the tick label.\n * @csspart thumbs - The thumbs container.\n * @csspart thumb - The thumb element.\n * @csspart thumb-label - The thumb tooltip label container.\n * @csspart thumb-label-inner - The thumb tooltip label inner element.\n * @csspart track - The track container.\n * @csspart steps - The track steps element.\n * @csspart inactive - The inactive element of the track.\n * @csspart fill - The filled part of the track.\n */\nexport default class IgcRangeSliderComponent extends EventEmitterMixin<\n  IgcRangeSliderEventMap,\n  Constructor<IgcSliderBaseComponent>\n>(IgcSliderBaseComponent) {\n  public static readonly tagName = 'igc-range-slider';\n\n  @query(`#thumbFrom`)\n  private thumbFrom!: HTMLElement;\n\n  @query(`#thumbTo`)\n  private thumbTo!: HTMLElement;\n\n  private _lower = 0;\n  private _upper = 0;\n\n  public set lower(val: number) {\n    const oldVal = this._lower;\n    this._lower = this.validateValue(val);\n    this.requestUpdate('lower', oldVal);\n  }\n\n  /**\n   * The current value of the lower thumb.\n   */\n  @property({ type: Number })\n  public get lower() {\n    return this._lower;\n  }\n\n  public set upper(val: number) {\n    const oldVal = this._upper;\n    this._upper = this.validateValue(val);\n    this.requestUpdate('upper', oldVal);\n  }\n\n  /**\n   * The current value of the upper thumb.\n   */\n  @property({ type: Number })\n  public get upper() {\n    return this._upper;\n  }\n\n  /**\n   * The aria label of the lower thumb.\n   */\n  @property({ attribute: 'aria-label-lower' })\n  public ariaLabelLower!: string;\n\n  /**\n   * The aria label of the upper thumb.\n   */\n  @property({ attribute: 'aria-label-upper' })\n  public ariaLabelUpper!: string;\n\n  protected override get activeValue(): number {\n    return this.activeThumb === this.thumbFrom ? this.lower : this.upper;\n  }\n\n  protected override normalizeValue(): void {\n    this._lower = this.validateValue(this._lower);\n    this._upper = this.validateValue(this._upper);\n  }\n\n  protected override getTrackStyle() {\n    const toPosition = this.valueToFraction(this.upper);\n    const fromPosition = this.valueToFraction(this.lower);\n    const positionGap = toPosition - fromPosition;\n\n    const filledTrackStyle = {\n      width: `${positionGap * 100}%`,\n      insetInlineStart: `${fromPosition * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  private closestTo(goal: number, positions: number[]): number {\n    return positions.reduce((previous, current) =>\n      Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous\n    );\n  }\n\n  protected override closestHandle(event: PointerEvent): HTMLElement {\n    const fromOffset =\n      this.thumbFrom.offsetLeft + this.thumbFrom.offsetWidth / 2;\n    const toOffset = this.thumbTo.offsetLeft + this.thumbTo.offsetWidth / 2;\n    const xPointer = event.clientX - this.getBoundingClientRect().left;\n    const match = this.closestTo(xPointer, [fromOffset, toOffset]);\n\n    if (fromOffset === toOffset && toOffset < xPointer) {\n      return this.thumbTo;\n    } else if (fromOffset === toOffset && toOffset > xPointer) {\n      return this.thumbFrom;\n    } else if (match === fromOffset) {\n      return this.thumbFrom;\n    } else {\n      return this.thumbTo;\n    }\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.activeValue;\n\n    let lower = this.lower;\n    let upper = this.upper;\n\n    if (this.activeThumb === this.thumbFrom) {\n      lower += increment;\n    } else {\n      upper += increment;\n    }\n\n    if (lower >= upper) {\n      this.swapValues(lower, upper);\n      this.toggleActiveThumb();\n    } else {\n      if (this.activeThumb === this.thumbFrom) {\n        this.lower = lower;\n      } else {\n        this.upper = upper;\n      }\n    }\n\n    if (oldValue === this.activeValue) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  private swapValues(lower: number, upper: number) {\n    this.lower = upper;\n    this.upper = lower;\n  }\n\n  private toggleActiveThumb() {\n    const thumb =\n      this.activeThumb === this.thumbFrom ? this.thumbTo : this.thumbFrom;\n    thumb.focus();\n  }\n\n  protected override renderThumbs() {\n    return html`${this.renderThumb(\n      this.lower,\n      this.ariaLabelLower,\n      'thumbFrom'\n    )}\n    ${this.renderThumb(this.upper, this.ariaLabelUpper, 'thumbTo')}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-range-slider': IgcRangeSliderComponent;\n  }\n}\n"]}

package/components/slider/slider-base.d.ts

@@ -0,0 +1,131 @@
+import { LitElement, TemplateResult } from 'lit';
+import { StyleInfo } from 'lit/directives/style-map.js';
+export declare class IgcSliderBaseComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    protected thumb: HTMLElement;
+    private labelElements;
+    private _lowerBound?;
+    private _upperBound?;
+    private _min;
+    private _max;
+    private _step;
+    private startValue?;
+    private pointerCaptured;
+    private thumbHoverTimer;
+    protected activeThumb?: HTMLElement;
+    private thumbLabelsVisible;
+    private labels?;
+    set min(value: number);
+    /**
+     * The minimum value of the slider scale. Defaults to 0.
+     */
+    get min(): number;
+    set max(value: number);
+    /**
+     * The maximum value of the slider scale. Defaults to 100.
+     */
+    get max(): number;
+    set lowerBound(value: number | undefined);
+    /**
+     * The lower bound of the slider value. If not set, the `min` value is applied.
+     */
+    get lowerBound(): number | undefined;
+    set upperBound(value: number | undefined);
+    /**
+     * The upper bound of the slider value. If not set, the `max` value is applied.
+     */
+    get upperBound(): number | undefined;
+    /**
+     * Disables the UI interactions of the slider.
+     */
+    disabled: boolean;
+    /**
+     * Marks the slider track as discrete so it displays the steps.
+     * If the `step` is 0, the slider will remain continuos even if `discreteTrack` is `true`.
+     */
+    discreteTrack: boolean;
+    /**
+     * Hides the thumb tooltip.
+     */
+    hideTooltip: boolean;
+    set step(value: number);
+    /**
+     * Specifies the granularity that the value must adhere to.
+     * If set to 0 no stepping is implied and any value in the range is allowed.
+     */
+    get step(): number;
+    /**
+     * The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.
+     */
+    primaryTicks: number;
+    /**
+     * The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.
+     */
+    secondaryTicks: number;
+    /**
+     * Changes the orientation of the ticks.
+     */
+    tickOrientation: 'mirror' | 'start' | 'end';
+    /**
+     * Hides the primary tick labels.
+     */
+    hidePrimaryLabels: boolean;
+    /**
+     * Hides the secondary tick labels.
+     */
+    hideSecondaryLabels: boolean;
+    /**
+     * The locale used to format the thumb and tick label values in the slider.
+     */
+    locale: string;
+    /**
+     * String format used for the thumb and tick label values in the slider.
+     */
+    valueFormat?: string;
+    /**
+     * Number format options used for the thumb and tick label values in the slider.
+     */
+    valueFormatOptions?: Intl.NumberFormatOptions;
+    /**
+     * The degrees for the rotation of the tick labels. Defaults to 0.
+     */
+    tickLabelRotation: 0 | 90 | -90;
+    protected constraintsChange(): void;
+    protected labelsChange(): void;
+    constructor();
+    connectedCallback(): void;
+    protected handleSlotChange(): void;
+    protected get activeValue(): number;
+    protected normalizeValue(): void;
+    protected getTrackStyle(): StyleInfo;
+    protected updateValue(_increment: number): boolean;
+    protected renderThumbs(): TemplateResult<1>;
+    protected emitInputEvent(): void;
+    protected emitChangeEvent(): void;
+    private get actualMin();
+    private get actualMax();
+    private get isLTR();
+    protected validateValue(value: number): number;
+    private formatValue;
+    private normalizeByStep;
+    protected closestHandle(_event: PointerEvent): HTMLElement;
+    private totalTickCount;
+    private tickValue;
+    private isPrimary;
+    private showThumbLabels;
+    private hideThumbLabels;
+    private valueInRange;
+    protected valueToFraction(value: number): number;
+    private calculateTrackUpdate;
+    private updateSlider;
+    private pointerDown;
+    private pointerMove;
+    private lostPointerCapture;
+    private handleKeydown;
+    private handleThumbPointerEnter;
+    private handleThumbPointerLeave;
+    protected renderTicks(): TemplateResult<1>[];
+    protected renderThumb(value: number, ariaLabel?: string, thumbId?: string): TemplateResult<1>;
+    private renderSteps;
+    protected render(): TemplateResult<1>;
+}