11035742941

Committed 25 Sep 2024 03:00PM UTC coverage: 98.053% (+0.03%) from 98.027%

Build # 11035742941

Build Type

push

github

Committed by

web-flow

Commit Message

Add Carousel component (#1275)


Co-authored-by: sivanova <sivanova@infragistics.com>
Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
Co-authored-by: Bozhidara Pachilova <35433937+ddaribo@users.noreply.github.com>

Run Details

3769 of 3977 branches covered (94.77%)

Branch coverage included in aggregate %.

1437 of 1448 new or added lines in 11 files covered. (99.24%)

2 existing lines in 1 file now uncovered.

23824 of 24164 relevant lines covered (98.59%)

418.47 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.42

/src/components/slider/slider-base.ts

import { LitElement, type TemplateResult, html, nothing } from 'lit';
import {
  property,
  query,
  queryAssignedElements,
  state,
} from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';

import { themes } from '../../theming/theming-decorator.js';
import {
  addKeybindings,
  arrowDown,
  arrowLeft,
  arrowRight,
  arrowUp,
  endKey,
  homeKey,
  pageDownKey,
  pageUpKey,
} from '../common/controllers/key-bindings.js';
import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
import { blazorTypeOverride } from '../common/decorators/blazorTypeOverride.js';
import { watch } from '../common/decorators/watch.js';
import {
  asNumber,
  asPercent,
  clamp,
  formatString,
  isDefined,
  isLTR,
} from '../common/util.js';
import { styles as shared } from './themes/shared/slider.common.css.js';
import { styles } from './themes/slider.base.css.js';
import { all } from './themes/themes.js';

@themes(all)
@blazorDeepImport
export class IgcSliderBaseComponent extends LitElement {
  public static override styles = [styles, shared];

  @query(`[part~='thumb']`)
  protected thumb!: HTMLElement;

  @query(`[part='base']`, true)
  protected base!: HTMLDivElement;

  @queryAssignedElements({ selector: 'igc-slider-label' })
  private labelElements!: HTMLElement[];

  private _min = 0;
  private _max = 100;
  private _lowerBound?: number;
  private _upperBound?: number;
  private _step = 1;
  private startValue?: number;
  private pointerCaptured = false;
  private thumbHoverTimer: any;
  protected activeThumb?: HTMLElement;

  @state()
  protected thumbLabelsVisible = false;

  @state()
  protected labels: string[] = [];

  protected get hasLabels() {
    return this.labels?.length > 0;
  }

  protected get distance() {
    return this.max - this.min;
  }

  /**
   * The minimum value of the slider scale. Defaults to 0.
   *
   * If `min` is greater than `max` the call is a no-op.
   *
   * If `labels` are provided (projected), then `min` is always set to 0.
   *
   * If `lowerBound` ends up being less than than the current `min` value,
   * it is automatically assigned the new `min` value.
   * @attr
   */
  @property({ type: Number })
  public set min(value: number) {
    if (!isDefined(value) || value > this.max) {
      return;
    }

    this._min = this.hasLabels ? 0 : value;

    if (isDefined(this._lowerBound) && this._lowerBound! < value) {
      this._lowerBound = value;
    }
  }

  public get min(): number {
    return this._min;
  }

  /**
   * The maximum value of the slider scale. Defaults to 100.
   *
   * If `max` is less than `min` the call is a no-op.
   *
   * If `labels` are provided (projected), then `max` is always set to
   * the number of labels.
   *
   * If `upperBound` ends up being greater than than the current `max` value,
   * it is automatically assigned the new `max` value.
   * @attr
   */
  @property({ type: Number })
  public set max(value: number) {
    if (!isDefined(value) || value < this._min) {
      return;
    }

    this._max = this.hasLabels ? this.labels.length - 1 : value;

    if (isDefined(this._upperBound) && this._upperBound! > value) {
      this._upperBound = value;
    }
  }

  public get max(): number {
    return this._max;
  }

  /**
   * The lower bound of the slider value. If not set, the `min` value is applied.
   * @attr lower-bound
   */
  @property({ type: Number, attribute: 'lower-bound' })
  public set lowerBound(value: number) {
    if (!isDefined(value)) return;
    this._lowerBound = Math.min(this._upperBound ?? value, value);
  }

  public get lowerBound(): number {
    const current = this._lowerBound ?? this._min;
    const upper = Math.min(this._upperBound ?? this._max, this._max);

    return clamp(current, this._min, upper);
  }

  /**
   * The upper bound of the slider value. If not set, the `max` value is applied.
   * @attr upper-bound
   */
  @property({ type: Number, attribute: 'upper-bound' })
  public set upperBound(value: number) {
    if (!isDefined(value)) return;
    this._upperBound = Math.max(this._lowerBound ?? value, value);
  }

  public get upperBound(): number {
    const current = this._upperBound ?? this._max;
    const lower = Math.max(this._lowerBound ?? this._min, this.min);

    return clamp(current, lower, this._max);
  }

  /**
   * Disables the UI interactions of the slider.
   * @attr
   */
  @property({ type: Boolean, reflect: true })
  public disabled = false;

  /**
   * 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`.
   * @attr discrete-track
   */
  @property({ type: Boolean, attribute: 'discrete-track' })
  public discreteTrack = false;

  /**
   * Hides the thumb tooltip.
   * @attr hide-tooltip
   */
  @property({ type: Boolean, attribute: 'hide-tooltip' })
  public hideTooltip = false;

  /**
   * 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.
   * If `labels` are provided (projected) then the step is always assumed to be 1 since it is a discrete slider.
   *
   * @attr
   */
  @property({ type: Number })
  public set step(value: number) {
    this._step = this.hasLabels ? 1 : asNumber(value, this._step);
  }

  public get step(): number {
    return this._step;
  }

  /**
   * The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.
   * @attr primary-ticks
   */
  @property({ type: Number, attribute: 'primary-ticks' })
  public primaryTicks = 0;

  /**
   * The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.
   * @attr secondary-ticks
   */
  @property({ type: Number, attribute: 'secondary-ticks' })
  public secondaryTicks = 0;

  /**
   * Changes the orientation of the ticks.
   * @attr tick-orientation
   */
  @property({ attribute: 'tick-orientation' })
  public tickOrientation: 'mirror' | 'start' | 'end' = 'end';

  /**
   * Hides the primary tick labels.
   * @attr hide-primary-labels
   */
  @property({ type: Boolean, attribute: 'hide-primary-labels' })
  public hidePrimaryLabels = false;

  /**
   * Hides the secondary tick labels.
   * @attr hide-secondary-labels
   */
  @property({ type: Boolean, attribute: 'hide-secondary-labels' })
  public hideSecondaryLabels = false;

  /**
   * The locale used to format the thumb and tick label values in the slider.
   * @attr
   */
  @property()
  public locale = 'en';

  /**
   * String format used for the thumb and tick label values in the slider.
   * @attr value-format
   */
  @property({ attribute: 'value-format' })
  public valueFormat?: string;

  /**
   * Number format options used for the thumb and tick label values in the slider.
   */
  /* blazorSuppress */
  @property({ attribute: false })
  public valueFormatOptions?: Intl.NumberFormatOptions;

  /**
   * The degrees for the rotation of the tick labels. Defaults to 0.
   * @attr tick-label-rotation
   */
  @property({ type: Number, reflect: true, attribute: 'tick-label-rotation' })
  @blazorTypeOverride('TickLabelRotation', true)
  public tickLabelRotation: 0 | 90 | -90 = 0;

  @watch('min', { waitUntilFirstUpdate: true })
  @watch('max', { waitUntilFirstUpdate: true })
  @watch('lowerBound', { waitUntilFirstUpdate: true })
  @watch('upperBound', { waitUntilFirstUpdate: true })
  @watch('step', { waitUntilFirstUpdate: true })
  protected constraintsChange() {
    this.normalizeValue();
  }

  constructor() {
    super();
    this.addEventListener('pointerdown', this.pointerDown);
    this.addEventListener('pointermove', this.pointerMove);
    this.addEventListener('lostpointercapture', this.lostPointerCapture);
    this.addEventListener('keyup', this.handleKeyUp);

    addKeybindings(this, {
      skip: () => this.disabled,
      bindingDefaults: { preventDefault: true },
    })
      .set(arrowLeft, () => this.handleArrowKeys(isLTR(this) ? -1 : 1))
      .set(arrowRight, () => this.handleArrowKeys(isLTR(this) ? 1 : -1))
      .set(arrowUp, () => this.handleArrowKeys(1))
      .set(arrowDown, () => this.handleArrowKeys(-1))
      .set(homeKey, () =>
        this.handleKeyboardIncrement(this.lowerBound - this.activeValue)
      )
      .set(endKey, () =>
        this.handleKeyboardIncrement(this.upperBound - this.activeValue)
      )
      .set(pageUpKey, () => this.handlePageKeys(1))
      .set(pageDownKey, () => this.handlePageKeys(-1));
  }

  private handleArrowKeys(delta: -1 | 1) {
    const step = this.step ? this.step : 1;
    this.handleKeyboardIncrement(step * delta);
  }

  private handlePageKeys(delta: -1 | 1) {
    const step = this.step ? this.step : 1;
    this.handleKeyboardIncrement(
      delta * Math.max((this.upperBound - this.lowerBound) / 10, step)
    );
  }

  private handleKeyboardIncrement(increment: number) {
    if (increment) {
      const updated = this.updateValue(increment);
      this.showThumbLabels();
      this.hideThumbLabels();

      if (updated) {
        this.emitChangeEvent();
      }
    }
  }

  private handleKeyUp() {
    this.activeThumb?.part.add('focused');
  }

  public override connectedCallback() {
    super.connectedCallback();
    this.normalizeValue();
  }

  protected handleSlotChange() {
    this.labels = this.labelElements.map((label) => label.textContent ?? '');
    if (this.hasLabels) {
      this.min = 0;
      this.max = this.labels.length - 1;
      this.step = 1;
    }
  }

  /* c8 ignore next 3 */
  protected get activeValue() {
    return 0;
  }

  /* c8 ignore next */
  protected normalizeValue(): void {}

  /* c8 ignore next 3 */
  protected getTrackStyle(): StyleInfo {
    return {};
  }

  /* c8 ignore next 3 */
  protected updateValue(_increment: number): boolean {
    return false;
  }

  /* c8 ignore next 3 */
  protected renderThumbs(): TemplateResult<1> {
    return html``;
  }

  /* c8 ignore next */
  protected emitInputEvent() {}

  /* c8 ignore next */
  protected emitChangeEvent() {}

  protected validateValue(value: number) {
    return this.normalizeByStep(clamp(value, this.lowerBound, this.upperBound));
  }

  protected formatValue(value: number) {
    const strValue = value.toLocaleString(this.locale, this.valueFormatOptions);
    return this.valueFormat
      ? formatString(this.valueFormat, strValue)
      : strValue;
  }

  private normalizeByStep(value: number) {
    return this.step ? value - ((value - this.lowerBound) % this.step) : value;
  }

  protected closestHandle(_event: PointerEvent): HTMLElement {
    return this.thumb;
  }

  private totalTickCount() {
    const primaryTicks = this.hasLabels
      ? this.primaryTicks > 0
        ? this.labels.length
        : 0
      : this.primaryTicks === 1
        ? 2
        : this.primaryTicks;

    return primaryTicks > 0
      ? (primaryTicks - 1) * this.secondaryTicks + primaryTicks
      : this.secondaryTicks > 0
        ? this.secondaryTicks
        : 0;
  }

  private tickValue(idx: number) {
    const tickCount = this.totalTickCount();
    const distance = this.distance;
    const labelStep = tickCount > 1 ? distance / (tickCount - 1) : distance;
    const labelVal = labelStep * idx;

    return this.min + labelVal;
  }

  private isPrimary(idx: number) {
    return this.primaryTicks <= 0
      ? false
      : idx % (this.secondaryTicks + 1) === 0;
  }

  protected showThumbLabels() {
    if (this.disabled || this.hideTooltip) {
      return;
    }

    if (this.thumbHoverTimer) {
      clearTimeout(this.thumbHoverTimer);
      this.thumbHoverTimer = null;
    }

    this.thumbLabelsVisible = true;
  }

  protected hideThumbLabels() {
    if (this.pointerCaptured || !this.thumbLabelsVisible) {
      return;
    }

    this.thumbHoverTimer = setTimeout(() => {
      this.thumbLabelsVisible = false;
    }, 750);
  }

  private calculateTrackUpdate(mouseX: number): number {
    const { width, left } = this.activeThumb!.getBoundingClientRect();
    const { width: trackWidth } = this.base.getBoundingClientRect();

    const thumbX = left + width / 2;
    const scale = trackWidth / this.distance;
    const change = isLTR(this) ? mouseX - thumbX : thumbX - mouseX;

    if (this.step) {
      const stepDistance = scale * this.step;

      // If the thumb scale range (slider update) is less than a half step,
      // the position stays the same.
      if (Math.abs(change) < stepDistance / 2) {
        return 0;
      }

      return Math.round(change / stepDistance) * this.step;
    }
    return change / scale;
  }

  private updateSlider(mouseX: number) {
    if (this.disabled || !this.activeThumb) {
      return;
    }

    const increment = this.calculateTrackUpdate(mouseX);
    if (increment !== 0) {
      this.updateValue(increment);
    }
  }

  private pointerDown(event: PointerEvent) {
    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.activeThumb?.part.remove('focused');
  }

  private pointerMove(event: PointerEvent) {
    if (this.pointerCaptured) {
      this.updateSlider(event.clientX);
    }
  }

  private lostPointerCapture() {
    this.pointerCaptured = false;
    this.hideThumbLabels();

    if (this.startValue! !== this.activeValue) {
      this.emitChangeEvent();
    }
    this.startValue = undefined;
  }

  protected handleThumbFocus(event: FocusEvent) {
    this.activeThumb = event.target as HTMLElement;
  }

  protected handleThumbBlur() {
    this.activeThumb?.part.remove('focused');
    this.activeThumb = undefined;
  }

  protected *_renderTicks() {
    const total = this.totalTickCount();
    const secondaryTicks = this.secondaryTicks + 1;

    for (let i = 0; i < total; i++) {
      const primary = this.isPrimary(i);
      const shown = primary ? this.hidePrimaryLabels : this.hideSecondaryLabels;
      const labelInner = this.hasLabels
        ? primary
          ? this.labels[Math.round(i / secondaryTicks)]
          : nothing
        : this.formatValue(this.tickValue(i));

      yield html`<div part="tick-group">
        <div part="tick" data-primary=${primary}>
          ${shown
            ? nothing
            : html`
                <div part="tick-label">
                  <span part="tick-label-inner">${labelInner}</span>
                </div>
              `}
        </div>
      </div>`;
    }
  }

  protected renderTicks() {
    return html`<div part="ticks">${this._renderTicks()}</div>`;
  }

  protected renderThumb(value: number, ariaLabel?: string, thumbId?: string) {
    const percent = `${asPercent(value - this.min, this.distance)}%`;
    const thumbStyles = { insetInlineStart: percent };
    const tooltipStyles = {
      insetInlineStart: percent,
      opacity: this.thumbLabelsVisible ? 1 : 0,
    };

    const textValue = this.hasLabels
      ? this.labels[value]
      : this.valueFormat || this.valueFormatOptions
        ? this.formatValue(value)
        : undefined;

    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.handleThumbFocus}
        @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>
          `}
    `;
  }

  private renderSteps() {
    if (!this.discreteTrack || !this.step) {
      return nothing;
    }

    const interval = (100 * Math.SQRT2 * this.step) / this.distance;

    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="0, calc(${interval}%)"
            stroke-linecap="round"
            stroke-width="2px"
          ></line>
        </svg>
      </div>
    `;
  }

  protected override render() {
    const isStart = this.tickOrientation === 'start';
    const isMirrored = this.tickOrientation === 'mirror';

    return html`
      <div part="base">
        ${isStart || isMirrored ? html`${this.renderTicks()}` : nothing}
        <div part="track">
          <div part="inactive"></div>
          <div part="fill" style=${styleMap(this.getTrackStyle())}></div>
          ${this.renderSteps()}
        </div>
        ${!isStart ? html`${this.renderTicks()}` : nothing}
        <div part="thumbs">${this.renderThumbs()}</div>
        <slot @slotchange=${this.handleSlotChange}></slot>
      </div>
    `;
  }
}

1	import { LitElement, type TemplateResult, html, nothing } from 'lit';	15✔
2	import {	15✔
3	property,	15✔
4	query,	15✔
5	queryAssignedElements,	15✔
6	state,	15✔
7	} from 'lit/decorators.js';	15✔
8	import { ifDefined } from 'lit/directives/if-defined.js';	15✔
9	import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';	15✔
10		15✔
11	import { themes } from '../../theming/theming-decorator.js';	15✔
12	import {	15✔
13	addKeybindings,	15✔
14	arrowDown,	15✔
15	arrowLeft,	15✔
16	arrowRight,	15✔
17	arrowUp,	15✔
18	endKey,	15✔
19	homeKey,	15✔
20	pageDownKey,	15✔
21	pageUpKey,	15✔
22	} from '../common/controllers/key-bindings.js';	15✔
23	import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';	15✔
24	import { blazorTypeOverride } from '../common/decorators/blazorTypeOverride.js';	15✔
25	import { watch } from '../common/decorators/watch.js';	15✔
26	import {	15✔
27	asNumber,	15✔
28	asPercent,	15✔
29	clamp,	15✔
30	formatString,	15✔
31	isDefined,	15✔
32	isLTR,	15✔
33	} from '../common/util.js';	15✔
34	import { styles as shared } from './themes/shared/slider.common.css.js';	15✔
35	import { styles } from './themes/slider.base.css.js';	15✔
36	import { all } from './themes/themes.js';	15✔
37		15✔
38	@themes(all)	15✔
39	@blazorDeepImport	15✔
40	export class IgcSliderBaseComponent extends LitElement {	15✔
41	public static override styles = [styles, shared];	15✔
42		15✔
43	@query(`[part~='thumb']`)	15✔
44	protected thumb!: HTMLElement;	15✔
45		15✔
46	@query(`[part='base']`, true)	15✔
47	protected base!: HTMLDivElement;	15✔
48		15✔
49	@queryAssignedElements({ selector: 'igc-slider-label' })	15✔
50	private labelElements!: HTMLElement[];	15✔
51		15✔
52	private _min = 0;	15✔
53	private _max = 100;	15✔
54	private _lowerBound?: number;	15✔
55	private _upperBound?: number;	15✔
56	private _step = 1;	15✔
57	private startValue?: number;	15✔
58	private pointerCaptured = false;	15✔
59	private thumbHoverTimer: any;	15✔
60	protected activeThumb?: HTMLElement;	15✔
61		15✔
62	@state()	15✔
63	protected thumbLabelsVisible = false;	15✔
64		15✔
65	@state()	15✔
66	protected labels: string[] = [];	15✔
67		15✔
68	protected get hasLabels() {	15✔
69	return this.labels?.length > 0;	960✔
70	}	960✔
71		15✔
72	protected get distance() {	15✔
73	return this.max - this.min;	626✔
74	}	626✔
75		15✔
76	/**	15✔
77	* The minimum value of the slider scale. Defaults to 0.	15✔
78	*	15✔
79	* If `min` is greater than `max` the call is a no-op.	15✔
80	*	15✔
81	* If `labels` are provided (projected), then `min` is always set to 0.	15✔
82	*	15✔
83	* If `lowerBound` ends up being less than than the current `min` value,	15✔
84	* it is automatically assigned the new `min` value.	15✔
85	* @attr	15✔
86	*/	15✔
87	@property({ type: Number })	15✔
88	public set min(value: number) {	15✔
89	if (!isDefined(value) \|\| value > this.max) {	12✔
90	return;	1✔
91	}	1✔
92		11✔
93	this._min = this.hasLabels ? 0 : value;	12✔
94		12✔
95	if (isDefined(this._lowerBound) && this._lowerBound! < value) {	12✔
96	this._lowerBound = value;	1✔
97	}	1✔
98	}	12✔
99		15✔
100	public get min(): number {	15✔
101	return this._min;	2,211✔
102	}	2,211✔
103		15✔
104	/**	15✔
105	* The maximum value of the slider scale. Defaults to 100.	15✔
106	*	15✔
107	* If `max` is less than `min` the call is a no-op.	15✔
108	*	15✔
109	* If `labels` are provided (projected), then `max` is always set to	15✔
110	* the number of labels.	15✔
111	*	15✔
112	* If `upperBound` ends up being greater than than the current `max` value,	15✔
113	* it is automatically assigned the new `max` value.	15✔
114	* @attr	15✔
115	*/	15✔
116	@property({ type: Number })	15✔
117	public set max(value: number) {	15✔
118	if (!isDefined(value) \|\| value < this._min) {	11✔
119	return;	1✔
120	}	1✔
121		10✔
122	this._max = this.hasLabels ? this.labels.length - 1 : value;	11✔
123		11✔
124	if (isDefined(this._upperBound) && this._upperBound! > value) {	11✔
125	this._upperBound = value;	1✔
126	}	1✔
127	}	11✔
128		15✔
129	public get max(): number {	15✔
130	return this._max;	841✔
131	}	841✔
132		15✔
133	/**	15✔
134	* The lower bound of the slider value. If not set, the `min` value is applied.	15✔
135	* @attr lower-bound	15✔
136	*/	15✔
137	@property({ type: Number, attribute: 'lower-bound' })	15✔
138	public set lowerBound(value: number) {	15✔
139	if (!isDefined(value)) return;	10!
140	this._lowerBound = Math.min(this._upperBound ?? value, value);	10✔
141	}	10✔
142		15✔
143	public get lowerBound(): number {	15✔
144	const current = this._lowerBound ?? this._min;	1,071✔
145	const upper = Math.min(this._upperBound ?? this._max, this._max);	1,071✔
146		1,071✔
147	return clamp(current, this._min, upper);	1,071✔
148	}	1,071✔
149		15✔
150	/**	15✔
151	* The upper bound of the slider value. If not set, the `max` value is applied.	15✔
152	* @attr upper-bound	15✔
153	*/	15✔
154	@property({ type: Number, attribute: 'upper-bound' })	15✔
155	public set upperBound(value: number) {	15✔
156	if (!isDefined(value)) return;	9!
157	this._upperBound = Math.max(this._lowerBound ?? value, value);	9✔
158	}	9✔
159		15✔
160	public get upperBound(): number {	15✔
161	const current = this._upperBound ?? this._max;	774✔
162	const lower = Math.max(this._lowerBound ?? this._min, this.min);	774✔
163		774✔
164	return clamp(current, lower, this._max);	774✔
165	}	774✔
166		15✔
167	/**	15✔
168	* Disables the UI interactions of the slider.	15✔
169	* @attr	15✔
170	*/	15✔
171	@property({ type: Boolean, reflect: true })	15✔
172	public disabled = false;	15✔
173		15✔
174	/**	15✔
175	* Marks the slider track as discrete so it displays the steps.	15✔
176	* If the `step` is 0, the slider will remain continuos even if `discreteTrack` is `true`.	15✔
177	* @attr discrete-track	15✔
178	*/	15✔
179	@property({ type: Boolean, attribute: 'discrete-track' })	15✔
180	public discreteTrack = false;	15✔
181		15✔
182	/**	15✔
183	* Hides the thumb tooltip.	15✔
184	* @attr hide-tooltip	15✔
185	*/	15✔
186	@property({ type: Boolean, attribute: 'hide-tooltip' })	15✔
187	public hideTooltip = false;	15✔
188		15✔
189	/**	15✔
190	* Specifies the granularity that the value must adhere to.	15✔
191	*	15✔
192	* If set to 0 no stepping is implied and any value in the range is allowed.	15✔
193	* If `labels` are provided (projected) then the step is always assumed to be 1 since it is a discrete slider.	15✔
194	*	15✔
195	* @attr	15✔
196	*/	15✔
197	@property({ type: Number })	15✔
198	public set step(value: number) {	15✔
199	this._step = this.hasLabels ? 1 : asNumber(value, this._step);	11✔
200	}	11✔
201		15✔
202	public get step(): number {	15✔
203	return this._step;	882✔
204	}	882✔
205		15✔
206	/**	15✔
207	* The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.	15✔
208	* @attr primary-ticks	15✔
209	*/	15✔
210	@property({ type: Number, attribute: 'primary-ticks' })	15✔
211	public primaryTicks = 0;	15✔
212		15✔
213	/**	15✔
214	* The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.	15✔
215	* @attr secondary-ticks	15✔
216	*/	15✔
217	@property({ type: Number, attribute: 'secondary-ticks' })	15✔
218	public secondaryTicks = 0;	15✔
219		15✔
220	/**	15✔
221	* Changes the orientation of the ticks.	15✔
222	* @attr tick-orientation	15✔
223	*/	15✔
224	@property({ attribute: 'tick-orientation' })	15✔
225	public tickOrientation: 'mirror' \| 'start' \| 'end' = 'end';	15✔
226		15✔
227	/**	15✔
228	* Hides the primary tick labels.	15✔
229	* @attr hide-primary-labels	15✔
230	*/	15✔
231	@property({ type: Boolean, attribute: 'hide-primary-labels' })	15✔
232	public hidePrimaryLabels = false;	15✔
233		15✔
234	/**	15✔
235	* Hides the secondary tick labels.	15✔
236	* @attr hide-secondary-labels	15✔
237	*/	15✔
238	@property({ type: Boolean, attribute: 'hide-secondary-labels' })	15✔
239	public hideSecondaryLabels = false;	15✔
240		15✔
241	/**	15✔
242	* The locale used to format the thumb and tick label values in the slider.	15✔
243	* @attr	15✔
244	*/	15✔
245	@property()	15✔
246	public locale = 'en';	15✔
247		15✔
248	/**	15✔
249	* String format used for the thumb and tick label values in the slider.	15✔
250	* @attr value-format	15✔
251	*/	15✔
252	@property({ attribute: 'value-format' })	15✔
253	public valueFormat?: string;	15✔
254		15✔
255	/**	15✔
256	* Number format options used for the thumb and tick label values in the slider.	15✔
257	*/	15✔
258	/* blazorSuppress */	15✔
259	@property({ attribute: false })	15✔
260	public valueFormatOptions?: Intl.NumberFormatOptions;	15✔
261		15✔
262	/**	15✔
263	* The degrees for the rotation of the tick labels. Defaults to 0.	15✔
264	* @attr tick-label-rotation	15✔
265	*/	15✔
266	@property({ type: Number, reflect: true, attribute: 'tick-label-rotation' })	15✔
267	@blazorTypeOverride('TickLabelRotation', true)	15✔
268	public tickLabelRotation: 0 \| 90 \| -90 = 0;	15✔
269		15✔
270	@watch('min', { waitUntilFirstUpdate: true })	15✔
271	@watch('max', { waitUntilFirstUpdate: true })	15✔
272	@watch('lowerBound', { waitUntilFirstUpdate: true })	15✔
273	@watch('upperBound', { waitUntilFirstUpdate: true })	15✔
274	@watch('step', { waitUntilFirstUpdate: true })	15✔
275	protected constraintsChange() {	15✔
276	this.normalizeValue();	43✔
277	}	43✔
278		15✔
279	constructor() {	15✔
280	super();	57✔
281	this.addEventListener('pointerdown', this.pointerDown);	57✔
282	this.addEventListener('pointermove', this.pointerMove);	57✔
283	this.addEventListener('lostpointercapture', this.lostPointerCapture);	57✔
284	this.addEventListener('keyup', this.handleKeyUp);	57✔
285		57✔
286	addKeybindings(this, {	57✔
287	skip: () => this.disabled,	57✔
288	bindingDefaults: { preventDefault: true },	57✔
289	})	57✔
290	.set(arrowLeft, () => this.handleArrowKeys(isLTR(this) ? -1 : 1))	57✔
291	.set(arrowRight, () => this.handleArrowKeys(isLTR(this) ? 1 : -1))	57✔
292	.set(arrowUp, () => this.handleArrowKeys(1))	57✔
293	.set(arrowDown, () => this.handleArrowKeys(-1))	57✔
294	.set(homeKey, () =>	57✔
295	this.handleKeyboardIncrement(this.lowerBound - this.activeValue)	3✔
296	)	57✔
297	.set(endKey, () =>	57✔
298	this.handleKeyboardIncrement(this.upperBound - this.activeValue)	3✔
299	)	57✔
300	.set(pageUpKey, () => this.handlePageKeys(1))	57✔
301	.set(pageDownKey, () => this.handlePageKeys(-1));	57✔
302	}	57✔
303		15✔
304	private handleArrowKeys(delta: -1 \| 1) {	15✔
305	const step = this.step ? this.step : 1;	8✔
306	this.handleKeyboardIncrement(step * delta);	8✔
307	}	8✔
308		15✔
309	private handlePageKeys(delta: -1 \| 1) {	15✔
310	const step = this.step ? this.step : 1;	2!
311	this.handleKeyboardIncrement(	2✔
312	delta * Math.max((this.upperBound - this.lowerBound) / 10, step)	2✔
313	);	2✔
314	}	2✔
315		15✔
316	private handleKeyboardIncrement(increment: number) {	15✔
317	if (increment) {	16✔
318	const updated = this.updateValue(increment);	14✔
319	this.showThumbLabels();	14✔
320	this.hideThumbLabels();	14✔
321		14✔
322	if (updated) {	14✔
323	this.emitChangeEvent();	14✔
324	}	14✔
325	}	14✔
326	}	16✔
327		15✔
328	private handleKeyUp() {	15✔
329	this.activeThumb?.part.add('focused');	14!
330	}	14✔
331		15✔
332	public override connectedCallback() {	15✔
333	super.connectedCallback();	57✔
334	this.normalizeValue();	57✔
335	}	57✔
336		15✔
337	protected handleSlotChange() {	15✔
338	this.labels = this.labelElements.map((label) => label.textContent ?? '');	1✔
339	if (this.hasLabels) {	1✔
340	this.min = 0;	1✔
341	this.max = this.labels.length - 1;	1✔
342	this.step = 1;	1✔
343	}	1✔
344	}	1✔
345		15✔
346	/* c8 ignore next 3 */	15✔
347	protected get activeValue() {	15✔
348	return 0;	15✔
349	}	15✔
350		15✔
351	/* c8 ignore next */	15✔
352	protected normalizeValue(): void {}	15✔
353		15✔
354	/* c8 ignore next 3 */	15✔
355	protected getTrackStyle(): StyleInfo {	15✔
356	return {};	15✔
357	}	15✔
358		15✔
359	/* c8 ignore next 3 */	15✔
360	protected updateValue(_increment: number): boolean {	15✔
361	return false;	15✔
362	}	15✔
363		15✔
364	/* c8 ignore next 3 */	15✔
365	protected renderThumbs(): TemplateResult<1> {	15✔
366	return html``;	15✔
367	}	15✔
368		15✔
369	/* c8 ignore next */	15✔
370	protected emitInputEvent() {}	15✔
371		15✔
372	/* c8 ignore next */	15✔
373	protected emitChangeEvent() {}	15✔
374		15✔
375	protected validateValue(value: number) {	15✔
376	return this.normalizeByStep(clamp(value, this.lowerBound, this.upperBound));	303✔
377	}	303✔
378		15✔
379	protected formatValue(value: number) {	15✔
380	const strValue = value.toLocaleString(this.locale, this.valueFormatOptions);	378✔
381	return this.valueFormat	378✔
382	? formatString(this.valueFormat, strValue)	378✔
383	: strValue;	378✔
384	}	378✔
385		15✔
386	private normalizeByStep(value: number) {	15✔
387	return this.step ? value - ((value - this.lowerBound) % this.step) : value;	303✔
388	}	303✔
389		15✔
390	protected closestHandle(_event: PointerEvent): HTMLElement {	15✔
391	return this.thumb;	3✔
392	}	3✔
393		15✔
394	private totalTickCount() {	15✔
395	const primaryTicks = this.hasLabels	317✔
396	? this.primaryTicks > 0	317✔
397	? this.labels.length	2✔
398	: 0	2!
399	: this.primaryTicks === 1	317✔
400	? 2	315!
401	: this.primaryTicks;	317✔
402		317✔
403	return primaryTicks > 0	317✔
404	? (primaryTicks - 1) * this.secondaryTicks + primaryTicks	317✔
405	: this.secondaryTicks > 0	317✔
406	? this.secondaryTicks	167!
407	: 0;	317✔
408	}	317✔
409		15✔
410	private tickValue(idx: number) {	15✔
411	const tickCount = this.totalTickCount();	133✔
412	const distance = this.distance;	133✔
413	const labelStep = tickCount > 1 ? distance / (tickCount - 1) : distance;	133!
414	const labelVal = labelStep * idx;	133✔
415		133✔
416	return this.min + labelVal;	133✔
417	}	133✔
418		15✔
419	private isPrimary(idx: number) {	15✔
420	return this.primaryTicks <= 0	139✔
421	? false	139!
422	: idx % (this.secondaryTicks + 1) === 0;	139✔
423	}	139✔
424		15✔
425	protected showThumbLabels() {	15✔
426	if (this.disabled \|\| this.hideTooltip) {	22✔
427	return;	1✔
428	}	1✔
429		21✔
430	if (this.thumbHoverTimer) {	22✔
431	clearTimeout(this.thumbHoverTimer);	8✔
432	this.thumbHoverTimer = null;	8✔
433	}	8✔
434		21✔
435	this.thumbLabelsVisible = true;	21✔
436	}	21✔
437		15✔
438	protected hideThumbLabels() {	15✔
439	if (this.pointerCaptured \|\| !this.thumbLabelsVisible) {	20!
440	return;	×
441	}	×
442		20✔
443	this.thumbHoverTimer = setTimeout(() => {	20✔
444	this.thumbLabelsVisible = false;	3✔
445	}, 750);	20✔
446	}	20✔
447		15✔
448	private calculateTrackUpdate(mouseX: number): number {	15✔
449	const { width, left } = this.activeThumb!.getBoundingClientRect();	20✔
450	const { width: trackWidth } = this.base.getBoundingClientRect();	20✔
451		20✔
452	const thumbX = left + width / 2;	20✔
453	const scale = trackWidth / this.distance;	20✔
454	const change = isLTR(this) ? mouseX - thumbX : thumbX - mouseX;	20!
455		20✔
456	if (this.step) {	20✔
457	const stepDistance = scale * this.step;	19✔
458		19✔
459	// If the thumb scale range (slider update) is less than a half step,	19✔
460	// the position stays the same.	19✔
461	if (Math.abs(change) < stepDistance / 2) {	19!
UNCOV 462	return 0;	×
UNCOV 463	}	×
464		19✔
465	return Math.round(change / stepDistance) * this.step;	19✔
466	}	19✔
467	return change / scale;	1✔
468	}	1✔
469		15✔
470	private updateSlider(mouseX: number) {	15✔
471	if (this.disabled \|\| !this.activeThumb) {	20!
472	return;	×
473	}	×
474		20✔
475	const increment = this.calculateTrackUpdate(mouseX);	20✔
476	if (increment !== 0) {	20✔
477	this.updateValue(increment);	20✔
478	}	20✔
479	}	20✔
480		15✔
481	private pointerDown(event: PointerEvent) {	15✔
482	const thumb = this.closestHandle(event);	6✔
483	thumb.focus();	6✔
484		6✔
485	this.startValue = this.activeValue;	6✔
486	this.updateSlider(event.clientX);	6✔
487		6✔
488	this.setPointerCapture(event.pointerId);	6✔
489	this.pointerCaptured = true;	6✔
490	this.showThumbLabels();	6✔
491	event.preventDefault();	6✔
492	this.activeThumb?.part.remove('focused');	6✔
493	}	6✔
494		15✔
495	private pointerMove(event: PointerEvent) {	15✔
496	if (this.pointerCaptured) {	14✔
497	this.updateSlider(event.clientX);	14✔
498	}	14✔
499	}	14✔
500		15✔
501	private lostPointerCapture() {	15✔
502	this.pointerCaptured = false;	5✔
503	this.hideThumbLabels();	5✔
504		5✔
505	if (this.startValue! !== this.activeValue) {	5✔
506	this.emitChangeEvent();	5✔
507	}	5✔
508	this.startValue = undefined;	5✔
509	}	5✔
510		15✔
511	protected handleThumbFocus(event: FocusEvent) {	15✔
512	this.activeThumb = event.target as HTMLElement;	3✔
513	}	3✔
514		15✔
515	protected handleThumbBlur() {	15✔
516	this.activeThumb?.part.remove('focused');	7✔
517	this.activeThumb = undefined;	7✔
518	}	7✔
519		15✔
520	protected *_renderTicks() {	15✔
521	const total = this.totalTickCount();	184✔
522	const secondaryTicks = this.secondaryTicks + 1;	184✔
523		184✔
524	for (let i = 0; i < total; i++) {	184✔
525	const primary = this.isPrimary(i);	139✔
526	const shown = primary ? this.hidePrimaryLabels : this.hideSecondaryLabels;	139✔
527	const labelInner = this.hasLabels	139✔
528	? primary	139✔
529	? this.labels[Math.round(i / secondaryTicks)]	6✔
530	: nothing	6!
531	: this.formatValue(this.tickValue(i));	139✔
532		139✔
533	yield html`<div part="tick-group">	139✔
534	<div part="tick" data-primary=${primary}>	139✔
535	${shown	139✔
536	? nothing	139✔
537	: html`	139✔
538	<div part="tick-label">	128✔
539	<span part="tick-label-inner">${labelInner}</span>	128✔
540	</div>	128✔
541	`}	128✔
542	</div>	139✔
543	</div>`;	139✔
544	}	139✔
545	}	184✔
546		15✔
547	protected renderTicks() {	15✔
548	return html`<div part="ticks">${this._renderTicks()}</div>`;	184✔
549	}	184✔
550		15✔
551	protected renderThumb(value: number, ariaLabel?: string, thumbId?: string) {	15✔
552	const percent = `${asPercent(value - this.min, this.distance)}%`;	130✔
553	const thumbStyles = { insetInlineStart: percent };	130✔
554	const tooltipStyles = {	130✔
555	insetInlineStart: percent,	130✔
556	opacity: this.thumbLabelsVisible ? 1 : 0,	130✔
557	};	130✔
558		130✔
559	const textValue = this.hasLabels	130✔
560	? this.labels[value]	130✔
561	: this.valueFormat \|\| this.valueFormatOptions	130✔
562	? this.formatValue(value)	128✔
563	: undefined;	130✔
564		130✔
565	return html`	130✔
566	<div	130✔
567	part="thumb"	130✔
568	id=${ifDefined(thumbId)}	130✔
569	tabindex=${this.disabled ? -1 : 0}	130✔
570	style=${styleMap(thumbStyles)}	130✔
571	role="slider"	130✔
572	aria-valuemin=${this.lowerBound}	130✔
573	aria-valuemax=${this.upperBound}	130✔
574	aria-valuenow=${value}	130✔
575	aria-valuetext=${ifDefined(textValue)}	130✔
576	aria-label=${ifDefined(ariaLabel)}	130✔
577	aria-disabled=${this.disabled ? 'true' : 'false'}	130✔
578	@pointerenter=${this.showThumbLabels}	130✔
579	@pointerleave=${this.hideThumbLabels}	130✔
580	@focus=${this.handleThumbFocus}	130✔
581	@blur=${this.handleThumbBlur}	130✔
582	></div>	130✔
583	${this.hideTooltip	130✔
584	? nothing	130✔
585	: html`	130✔
586	<div part="thumb-label" style=${styleMap(tooltipStyles)}>	129✔
587	<div part="thumb-label-inner">	129✔
588	${this.hasLabels ? this.labels[value] : this.formatValue(value)}	129✔
589	</div>	129✔
590	</div>	129✔
591	`}	129✔
592	`;	130✔
593	}	130✔
594		15✔
595	private renderSteps() {	15✔
596	if (!this.discreteTrack \|\| !this.step) {	183✔
597	return nothing;	182✔
598	}	182✔
599		1✔
600	const interval = (100 * Math.SQRT2 * this.step) / this.distance;	1✔
601		1✔
602	return html`	1✔
603	<div part="steps">	1✔
604	<svg width="100%" height="100%" style="display: flex">	1✔
605	<line	1✔
606	x1="0"	1✔
607	y1="1"	1✔
608	x2="100%"	1✔
609	y2="1"	1✔
610	stroke="currentColor"	1✔
611	stroke-dasharray="0, calc(${interval}%)"	1✔
612	stroke-linecap="round"	1✔
613	stroke-width="2px"	1✔
614	></line>	1✔
615	</svg>	1✔
616	</div>	1✔
617	`;	1✔
618	}	1✔
619		15✔
620	protected override render() {	15✔
621	const isStart = this.tickOrientation === 'start';	183✔
622	const isMirrored = this.tickOrientation === 'mirror';	183✔
623		183✔
624	return html`	183✔
625	<div part="base">	183✔
626	${isStart \|\| isMirrored ? html`${this.renderTicks()}` : nothing}	183✔
627	<div part="track">	183✔
628	<div part="inactive"></div>	183✔
629	<div part="fill" style=${styleMap(this.getTrackStyle())}></div>	183✔
630	${this.renderSteps()}	183✔
631	</div>	183✔
632	${!isStart ? html`${this.renderTicks()}` : nothing}	183✔
633	<div part="thumbs">${this.renderThumbs()}</div>	183✔
634	<slot @slotchange=${this.handleSlotChange}></slot>	183✔
635	</div>	183✔
636	`;	183✔
637	}	183✔
638	}	15✔

IgniteUI / igniteui-webcomponents / 11035742941

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous