@spectrum-web-components/slider 1.1.0 → 1.1.2

package/src/Slider.dev.js

@@ -0,0 +1,481 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  nothing,
+  SizedMixin
+} from "@spectrum-web-components/base";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import {
+  classMap,
+  ifDefined,
+  repeat,
+  styleMap
+} from "@spectrum-web-components/base/src/directives.js";
+import sliderStyles from "./slider.css.js";
+import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { HandleController } from "./HandleController.dev.js";
+import { SliderHandle } from "./SliderHandle.dev.js";
+import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";
+export const variants = ["filled", "ramp", "range", "tick"];
+export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ""), {
+  noDefaultSize: true,
+  validSizes: ["s", "m", "l", "xl"]
+}) {
+  constructor() {
+    super(...arguments);
+    this.handleController = new HandleController(
+      this
+    );
+    this._editable = false;
+    this.hideStepper = false;
+    this.type = "";
+    /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
+    this._variant = "";
+    this.getAriaValueText = (values) => {
+      const valueArray = [...values.values()];
+      if (valueArray.length === 2)
+        return `${valueArray[0]} - ${valueArray[1]}`;
+      return valueArray.join(", ");
+    };
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.tickStep = 0;
+    this.tickLabels = false;
+    this.disabled = false;
+    this.quiet = false;
+    this.indeterminate = false;
+    this._numberFieldInput = Promise.resolve();
+  }
+  static get styles() {
+    return [sliderStyles];
+  }
+  get editable() {
+    return this._editable;
+  }
+  set editable(editable) {
+    if (editable === this.editable) return;
+    const oldValue = this.editable;
+    this._editable = this.handleController.size < 2 ? editable : false;
+    if (this.editable) {
+      this._numberFieldInput = import("@spectrum-web-components/number-field/sp-number-field.js");
+    }
+    if (oldValue !== this.editable) {
+      this.requestUpdate("editable", oldValue);
+    }
+  }
+  set variant(variant) {
+    const oldVariant = this.variant;
+    if (variant === this.variant) {
+      return;
+    }
+    if (variants.includes(variant) && this.fillStart === void 0) {
+      this._variant = variant;
+      this.setAttribute("variant", variant);
+    } else {
+      this._variant = "";
+      this.removeAttribute("variant");
+    }
+    this.requestUpdate("variant", oldVariant);
+  }
+  get variant() {
+    return this._variant;
+  }
+  get values() {
+    return this.handleController.values;
+  }
+  get handleName() {
+    return "value";
+  }
+  get ariaValueText() {
+    if (!this.getAriaValueText) {
+      return `${this.value}${this._forcedUnit}`;
+    }
+    return this.getAriaValueText(this.handleController.formattedValues);
+  }
+  get numberFormat() {
+    return this.getNumberFormat();
+  }
+  get focusElement() {
+    return this.handleController.focusElement;
+  }
+  handleLabelClick(event) {
+    if (this.editable) {
+      event.preventDefault();
+      this.focus();
+    }
+  }
+  render() {
+    return html`
+            ${this.renderLabel()} ${this.renderTrack()}
+            ${this.editable ? html`
+                      <sp-number-field
+                          .formatOptions=${this.formatOptions || {}}
+                          id="number-field"
+                          min=${this.min}
+                          max=${this.max}
+                          step=${this.step}
+                          size=${this.size}
+                          value=${this.value}
+                          ?hide-stepper=${this.hideStepper}
+                          ?disabled=${this.disabled}
+                          ?quiet=${this.quiet}
+                          ?indeterminate=${this.indeterminate}
+                          @input=${this.handleNumberInput}
+                          @change=${this.handleNumberChange}
+                      ></sp-number-field>
+                  ` : nothing}
+        `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleController.hostConnected();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.handleController.hostDisconnected();
+  }
+  update(changedProperties) {
+    this.handleController.hostUpdate();
+    if (changedProperties.has("disabled") && this.disabled) {
+      this.handleController.cancelDrag();
+    }
+    super.update(changedProperties);
+  }
+  renderLabel() {
+    const textLabelVisible = this.labelVisibility === "none" || this.labelVisibility === "value";
+    const valueLabelVisible = this.labelVisibility === "none" || this.labelVisibility === "text";
+    return html`
+            <div id="label-container">
+                <sp-field-label
+                    class=${classMap({
+      "visually-hidden": textLabelVisible
+    })}
+                    ?disabled=${this.disabled}
+                    id="label"
+                    for=${this.editable ? "number-field" : this.handleController.activeHandleInputId}
+                    @click=${this.handleLabelClick}
+                    size=${this.size}
+                >
+                    ${this.slotHasContent ? nothing : this.label}
+                    <slot>${this.label}</slot>
+                </sp-field-label>
+                <sp-field-label
+                    class=${classMap({
+      "visually-hidden": valueLabelVisible
+    })}
+                    ?disabled=${this.disabled}
+                    for=${this.editable ? "number-field" : this.handleController.activeHandleInputId}
+                    size=${this.size}
+                >
+                    <output id="value" aria-live="off" for="input">
+                        ${this.ariaValueText}
+                    </output>
+                </sp-field-label>
+            </div>
+        `;
+  }
+  renderRamp() {
+    if (this.variant !== "ramp") {
+      return html``;
+    }
+    return html`
+            <div id="ramp">
+                <svg
+                    viewBox="0 0 240 16"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    focusable="false"
+                >
+                    <path
+                        d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"
+                    ></path>
+                </svg>
+            </div>
+        `;
+  }
+  renderTicks() {
+    if (this.variant !== "tick") {
+      return html``;
+    }
+    const tickStep = this.tickStep || this.step;
+    const tickCount = (this.max - this.min) / tickStep;
+    const partialFit = tickCount % 1 !== 0;
+    const ticks = new Array(Math.floor(tickCount + 1));
+    ticks.fill(0, 0, tickCount + 1);
+    return html`
+            <div
+                class="${partialFit ? "not-exact " : ""}ticks"
+                style=${ifDefined(
+      partialFit ? `--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}` : void 0
+    )}
+            >
+                ${ticks.map(
+      (_tick, i) => html`
+                        <div class="tick">
+                            ${this.tickLabels ? html`
+                                      <div class="tickLabel">
+                                          ${i * tickStep + this.min}
+                                      </div>
+                                  ` : nothing}
+                        </div>
+                    `
+    )}
+            </div>
+        `;
+  }
+  renderTrackSegment(start, end) {
+    if (this.variant === "ramp") {
+      return html``;
+    }
+    return html`
+            <div
+                class="track"
+                style=${styleMap(this.trackSegmentStyles(start, end))}
+                role="presentation"
+            ></div>
+        `;
+  }
+  /**
+   * @description calculates the fill width
+   * @param fillStartValue
+   * @param currentValue
+   * @returns
+   */
+  getOffsetWidth(fillStartValue, currentValue) {
+    const distance = Math.abs(currentValue - fillStartValue);
+    return distance * 100;
+  }
+  fillStyles(centerPoint) {
+    const activeModel = this.handleController.activeHandleModel;
+    const centerPointNormalized = activeModel.normalization.toNormalized(
+      centerPoint,
+      this.min,
+      this.max
+    );
+    const position = this.dir === "rtl" ? "right" : "left";
+    const offsetPosition = (this.value > centerPoint ? centerPointNormalized : activeModel.normalizedValue) * 100;
+    const offsetWidth = this.getOffsetWidth(
+      centerPointNormalized,
+      activeModel.normalizedValue
+    );
+    const styles = {
+      [position]: `${offsetPosition}%`,
+      width: `${offsetWidth}%`
+    };
+    return styles;
+  }
+  renderFillOffset() {
+    if (this._cachedValue === void 0 || this.centerPoint === void 0) {
+      return html``;
+    }
+    return html`
+            <div
+                class=${classMap({
+      fill: true,
+      offset: this.value > this.centerPoint
+    })}
+                style=${styleMap(this.fillStyles(this.centerPoint))}
+            ></div>
+        `;
+  }
+  renderHandle() {
+    if (this.variant === "tick") {
+      return html``;
+    }
+    return html`
+            ${this.handleController.render()}
+        `;
+  }
+  renderTrack() {
+    const segments = this.handleController.trackSegments();
+    const handleItems = [
+      { id: "handles", html: this.handleController.render() }
+    ];
+    const trackItems = [
+      { id: "track0", html: this.renderTrackSegment(...segments[0]) },
+      { id: "fill", html: this.renderFillOffset() },
+      { id: "ramp", html: this.renderRamp() },
+      { id: "handles", html: this.renderHandle() },
+      ...segments.slice(1).map(([start, end], index) => ({
+        id: `track${index + 1}`,
+        html: this.renderTrackSegment(start, end)
+      }))
+    ];
+    return html`
+            <div
+                id="track"
+                ${streamingListener({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ],
+      streamOutside: ["dblclick", this.handleDoubleClick]
+    })}
+            >
+                <div id="controls">
+                    ${this.variant === "tick" ? html`
+                              ${this.renderTicks()}
+                              <div class="trackContainer">
+                                  ${repeat(
+      trackItems,
+      (item) => item.id,
+      (item) => item.html
+    )}
+                              </div>
+                              <div class="handleContainer">
+                                  ${repeat(
+      handleItems,
+      (item) => item.id,
+      (item) => item.html
+    )}
+                              </div>
+                          ` : html`
+                              ${repeat(
+      trackItems,
+      (item) => item.id,
+      (item) => item.html
+    )}
+                          `}
+                </div>
+            </div>
+        `;
+  }
+  handleDoubleClick(event) {
+    this.handleController.handleDoubleClick(event);
+  }
+  handlePointerdown(event) {
+    this.handleController.handlePointerdown(event);
+  }
+  handlePointermove(event) {
+    this.handleController.handlePointermove(event);
+  }
+  handlePointerup(event) {
+    this.handleController.handlePointerup(event);
+  }
+  handleNumberInput(event) {
+    var _a;
+    const { value } = event.target;
+    if (((_a = event.target) == null ? void 0 : _a.managedInput) && !isNaN(value)) {
+      this.value = value;
+      return;
+    }
+    event.stopPropagation();
+  }
+  handleNumberChange(event) {
+    var _a;
+    const { value } = event.target;
+    if (isNaN(value)) {
+      event.target.value = this.value;
+      event.stopPropagation();
+    } else {
+      this.value = value;
+      if (!((_a = event.target) == null ? void 0 : _a.managedInput)) {
+        this.dispatchInputEvent();
+      }
+    }
+    this.indeterminate = false;
+  }
+  trackSegmentStyles(start, end) {
+    const size = end - start;
+    const styles = {
+      width: `${size * 100}%`,
+      "--spectrum-slider-track-background-size": `${1 / size * 100}%`,
+      "--spectrum-slider-track-segment-position": `${start * 100}%`
+    };
+    return styles;
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    if (this.editable) {
+      await this._numberFieldInput;
+      await this.numberField.updateComplete;
+    }
+    await this.handleController.handleUpdatesComplete();
+    return complete;
+  }
+  willUpdate(changed) {
+    if (changed.has("value") && changed.has("fillStart")) {
+      this._cachedValue = Number(this.value);
+      if (this.getAttribute("fill-start") === "") {
+        this.centerPoint = (Number(this.max) - Number(this.min)) / 2 + Number(this.min);
+      } else if (!Number.isNaN(Number(this.fillStart))) {
+        this.centerPoint = Number(this.fillStart);
+      }
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Slider.prototype, "editable", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-stepper" })
+], Slider.prototype, "hideStepper", 2);
+__decorateClass([
+  property()
+], Slider.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], Slider.prototype, "dir", 2);
+__decorateClass([
+  property({ type: String })
+], Slider.prototype, "variant", 1);
+__decorateClass([
+  property({ attribute: false })
+], Slider.prototype, "getAriaValueText", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "label-visibility" })
+], Slider.prototype, "labelVisibility", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], Slider.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], Slider.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], Slider.prototype, "step", 2);
+__decorateClass([
+  property({ type: Number, attribute: "tick-step" })
+], Slider.prototype, "tickStep", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "tick-labels" })
+], Slider.prototype, "tickLabels", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Slider.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "fill-start" })
+], Slider.prototype, "fillStart", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Slider.prototype, "quiet", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Slider.prototype, "indeterminate", 2);
+__decorateClass([
+  query("#label")
+], Slider.prototype, "labelEl", 2);
+__decorateClass([
+  query("#number-field")
+], Slider.prototype, "numberField", 2);
+__decorateClass([
+  query("#track")
+], Slider.prototype, "track", 2);
+//# sourceMappingURL=Slider.dev.js.map

package/src/Slider.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Slider.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport {\n    classMap,\n    ifDefined,\n    repeat,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport sliderStyles from './slider.css.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { StyleInfo } from 'lit-html/directives/style-map';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport type { NumberField } from '@spectrum-web-components/number-field';\nimport { HandleController, HandleValueDictionary } from './HandleController.dev.js'\nimport { SliderHandle } from './SliderHandle.dev.js'\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport type { NumberFormatter } from '@internationalized/number';\n\nexport const variants = ['filled', 'ramp', 'range', 'tick'];\n\n/**\n * @element sp-slider\n *\n * @slot - text label for the Slider\n * @slot handle - optionally accepts two or more sp-slider-handle elements\n */\nexport class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {\n    noDefaultSize: true,\n    validSizes: ['s', 'm', 'l', 'xl'],\n}) {\n    public static override get styles(): CSSResultArray {\n        return [sliderStyles];\n    }\n\n    public override handleController: HandleController = new HandleController(\n        this\n    );\n\n    /**\n     * Whether to display a Number Field along side the slider UI\n     */\n    @property({ type: Boolean, reflect: true })\n    public get editable(): boolean {\n        return this._editable;\n    }\n\n    public set editable(editable: boolean) {\n        if (editable === this.editable) return;\n        const oldValue = this.editable;\n        this._editable = this.handleController.size < 2 ? editable : false;\n        if (this.editable) {\n            this._numberFieldInput = import(\n                '@spectrum-web-components/number-field/sp-number-field.js'\n            );\n        }\n        if (oldValue !== this.editable) {\n            this.requestUpdate('editable', oldValue);\n        }\n    }\n\n    private _editable = false;\n\n    /**\n     * Whether the stepper UI of the Number Field is hidden or not\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })\n    public hideStepper = false;\n\n    @property()\n    public type = '';\n\n    @property({ reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @property({ type: String })\n    public set variant(variant: string) {\n        const oldVariant = this.variant;\n        if (variant === this.variant) {\n            return;\n        }\n        if (variants.includes(variant) && this.fillStart === undefined) {\n            this._variant = variant;\n            this.setAttribute('variant', variant);\n        } else {\n            this._variant = '';\n            this.removeAttribute('variant');\n        }\n        this.requestUpdate('variant', oldVariant);\n    }\n\n    public get variant(): string {\n        return this._variant;\n    }\n\n    public get values(): HandleValueDictionary {\n        return this.handleController.values;\n    }\n\n    public override get handleName(): string {\n        return 'value';\n    }\n\n    /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n    private _variant = '';\n\n    @property({ attribute: false })\n    public getAriaValueText: (values: Map<string, string>) => string = (\n        values\n    ) => {\n        const valueArray = [...values.values()];\n        if (valueArray.length === 2)\n            return `${valueArray[0]} - ${valueArray[1]}`;\n        return valueArray.join(', ');\n    };\n\n    public override get ariaValueText(): string {\n        if (!this.getAriaValueText) {\n            return `${this.value}${this._forcedUnit}`;\n        }\n        return this.getAriaValueText(this.handleController.formattedValues);\n    }\n\n    @property({ type: String, reflect: true, attribute: 'label-visibility' })\n    public labelVisibility?: 'text' | 'value' | 'none';\n\n    @property({ type: Number, reflect: true })\n    public override min = 0;\n\n    @property({ type: Number, reflect: true })\n    public override max = 100;\n\n    @property({ type: Number })\n    public override step = 1;\n\n    @property({ type: Number, attribute: 'tick-step' })\n    public tickStep = 0;\n\n    @property({ type: Boolean, attribute: 'tick-labels' })\n    public tickLabels = false;\n\n    @property({ type: Boolean, reflect: true })\n    public override disabled = false;\n\n    @property({ type: Number, reflect: true, attribute: 'fill-start' })\n    public fillStart?: number | boolean;\n\n    /**\n     * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.\n     */\n    @property({ type: Boolean })\n    public quiet = false;\n\n    /**\n     * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.\n     */\n    @property({ type: Boolean })\n    public indeterminate = false;\n\n    @query('#label')\n    public labelEl!: HTMLLabelElement;\n\n    @query('#number-field')\n    public numberField!: NumberField;\n\n    @query('#track')\n    public track!: HTMLDivElement;\n\n    public override get numberFormat(): NumberFormatter {\n        return this.getNumberFormat();\n    }\n\n    public override get focusElement(): HTMLElement {\n        return this.handleController.focusElement;\n    }\n\n    protected handleLabelClick(event: Event): void {\n        if (this.editable) {\n            event.preventDefault();\n            this.focus();\n        }\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.renderLabel()} ${this.renderTrack()}\n            ${this.editable\n                ? html`\n                      <sp-number-field\n                          .formatOptions=${this.formatOptions || {}}\n                          id=\"number-field\"\n                          min=${this.min}\n                          max=${this.max}\n                          step=${this.step}\n                          size=${this.size}\n                          value=${this.value}\n                          ?hide-stepper=${this.hideStepper}\n                          ?disabled=${this.disabled}\n                          ?quiet=${this.quiet}\n                          ?indeterminate=${this.indeterminate}\n                          @input=${this.handleNumberInput}\n                          @change=${this.handleNumberChange}\n                      ></sp-number-field>\n                  `\n                : nothing}\n        `;\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.handleController.hostConnected();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.handleController.hostDisconnected();\n    }\n\n    public override update(changedProperties: Map<string, boolean>): void {\n        this.handleController.hostUpdate();\n        if (changedProperties.has('disabled') && this.disabled) {\n            this.handleController.cancelDrag();\n        }\n        super.update(changedProperties);\n    }\n\n    private renderLabel(): TemplateResult {\n        const textLabelVisible =\n            this.labelVisibility === 'none' || this.labelVisibility === 'value';\n        const valueLabelVisible =\n            this.labelVisibility === 'none' || this.labelVisibility === 'text';\n        return html`\n            <div id=\"label-container\">\n                <sp-field-label\n                    class=${classMap({\n                        'visually-hidden': textLabelVisible,\n                    })}\n                    ?disabled=${this.disabled}\n                    id=\"label\"\n                    for=${this.editable\n                        ? 'number-field'\n                        : this.handleController.activeHandleInputId}\n                    @click=${this.handleLabelClick}\n                    size=${this.size}\n                >\n                    ${this.slotHasContent ? nothing : this.label}\n                    <slot>${this.label}</slot>\n                </sp-field-label>\n                <sp-field-label\n                    class=${classMap({\n                        'visually-hidden': valueLabelVisible,\n                    })}\n                    ?disabled=${this.disabled}\n                    for=${this.editable\n                        ? 'number-field'\n                        : this.handleController.activeHandleInputId}\n                    size=${this.size}\n                >\n                    <output id=\"value\" aria-live=\"off\" for=\"input\">\n                        ${this.ariaValueText}\n                    </output>\n                </sp-field-label>\n            </div>\n        `;\n    }\n\n    private renderRamp(): TemplateResult {\n        if (this.variant !== 'ramp') {\n            return html``;\n        }\n        return html`\n            <div id=\"ramp\">\n                <svg\n                    viewBox=\"0 0 240 16\"\n                    preserveAspectRatio=\"none\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                >\n                    <path\n                        d=\"M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z\"\n                    ></path>\n                </svg>\n            </div>\n        `;\n    }\n\n    private renderTicks(): TemplateResult {\n        if (this.variant !== 'tick') {\n            return html``;\n        }\n        const tickStep = this.tickStep || this.step;\n        const tickCount =\n            ((this.max as number) - (this.min as number)) / tickStep;\n        const partialFit = tickCount % 1 !== 0;\n        const ticks = new Array(Math.floor(tickCount + 1));\n        ticks.fill(0, 0, tickCount + 1);\n        return html`\n            <div\n                class=\"${partialFit ? 'not-exact ' : ''}ticks\"\n                style=${ifDefined(\n                    partialFit\n                        ? `--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`\n                        : undefined\n                )}\n            >\n                ${ticks.map(\n                    (_tick, i) => html`\n                        <div class=\"tick\">\n                            ${this.tickLabels\n                                ? html`\n                                      <div class=\"tickLabel\">\n                                          ${i * tickStep + this.min}\n                                      </div>\n                                  `\n                                : nothing}\n                        </div>\n                    `\n                )}\n            </div>\n        `;\n    }\n\n    private renderTrackSegment(start: number, end: number): TemplateResult {\n        if (this.variant === 'ramp') {\n            return html``;\n        }\n        return html`\n            <div\n                class=\"track\"\n                style=${styleMap(this.trackSegmentStyles(start, end))}\n                role=\"presentation\"\n            ></div>\n        `;\n    }\n\n    private _cachedValue: number | undefined;\n    private centerPoint: number | undefined;\n\n    /**\n     * @description calculates the fill width\n     * @param fillStartValue\n     * @param currentValue\n     * @returns\n     */\n    private getOffsetWidth(\n        fillStartValue: number,\n        currentValue: number\n    ): number {\n        const distance = Math.abs(currentValue - fillStartValue);\n        return distance * 100;\n    }\n\n    private fillStyles(centerPoint: number): StyleInfo {\n        const activeModel = this.handleController.activeHandleModel;\n        const centerPointNormalized = activeModel.normalization.toNormalized(\n            centerPoint,\n            this.min,\n            this.max\n        );\n        const position = this.dir === 'rtl' ? 'right' : 'left';\n        const offsetPosition =\n            (this.value > centerPoint\n                ? centerPointNormalized\n                : activeModel.normalizedValue) * 100;\n        const offsetWidth = this.getOffsetWidth(\n            centerPointNormalized,\n            activeModel.normalizedValue\n        );\n        const styles = {\n            [position]: `${offsetPosition}%`,\n            width: `${offsetWidth}%`,\n        };\n        return styles;\n    }\n\n    private renderFillOffset(): TemplateResult {\n        if (this._cachedValue === undefined || this.centerPoint === undefined) {\n            return html``;\n        }\n        return html`\n            <div\n                class=${classMap({\n                    fill: true,\n                    offset: this.value > this.centerPoint,\n                })}\n                style=${styleMap(this.fillStyles(this.centerPoint))}\n            ></div>\n        `;\n    }\n    private renderHandle(): TemplateResult {\n        if (this.variant === 'tick') {\n            return html``;\n        }\n        return html`\n            ${this.handleController.render()}\n        `;\n    }\n\n    private renderTrack(): TemplateResult {\n        const segments = this.handleController.trackSegments();\n        const handleItems = [\n            { id: 'handles', html: this.handleController.render() },\n        ];\n        const trackItems = [\n            { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n            { id: 'fill', html: this.renderFillOffset() },\n            { id: 'ramp', html: this.renderRamp() },\n            { id: 'handles', html: this.renderHandle() },\n            ...segments.slice(1).map(([start, end], index) => ({\n                id: `track${index + 1}`,\n                html: this.renderTrackSegment(start, end),\n            })),\n        ];\n\n        return html`\n            <div\n                id=\"track\"\n                ${streamingListener({\n                    start: ['pointerdown', this.handlePointerdown],\n                    streamInside: ['pointermove', this.handlePointermove],\n                    end: [\n                        ['pointerup', 'pointercancel', 'pointerleave'],\n                        this.handlePointerup,\n                    ],\n                    streamOutside: ['dblclick', this.handleDoubleClick],\n                })}\n            >\n                <div id=\"controls\">\n                    ${this.variant === 'tick'\n                        ? html`\n                              ${this.renderTicks()}\n                              <div class=\"trackContainer\">\n                                  ${repeat(\n                                      trackItems,\n                                      (item) => item.id,\n                                      (item) => item.html\n                                  )}\n                              </div>\n                              <div class=\"handleContainer\">\n                                  ${repeat(\n                                      handleItems,\n                                      (item) => item.id,\n                                      (item) => item.html\n                                  )}\n                              </div>\n                          `\n                        : html`\n                              ${repeat(\n                                  trackItems,\n                                  (item) => item.id,\n                                  (item) => item.html\n                              )}\n                          `}\n                </div>\n            </div>\n        `;\n    }\n\n    protected handleDoubleClick(event: PointerEvent): void {\n        this.handleController.handleDoubleClick(event);\n    }\n\n    protected handlePointerdown(event: PointerEvent): void {\n        this.handleController.handlePointerdown(event);\n    }\n\n    protected handlePointermove(event: PointerEvent): void {\n        this.handleController.handlePointermove(event);\n    }\n\n    protected handlePointerup(event: PointerEvent): void {\n        this.handleController.handlePointerup(event);\n    }\n\n    private handleNumberInput(event: Event & { target: NumberField }): void {\n        const { value } = event.target;\n        if (event.target?.managedInput && !isNaN(value)) {\n            this.value = value;\n            return;\n        }\n        // Do not apply uncommited values to the parent element unless interacting with the stepper UI.\n        // Stop uncommitted input from being announced to the parent application.\n        event.stopPropagation();\n    }\n\n    private handleNumberChange(event: Event & { target: NumberField }): void {\n        const { value } = event.target;\n        if (isNaN(value)) {\n            event.target.value = this.value;\n            event.stopPropagation();\n        } else {\n            this.value = value;\n            if (!event.target?.managedInput) {\n                // When stepper is not active, sythesize an `input` event so that the\n                // `change` event isn't surprising.\n                this.dispatchInputEvent();\n            }\n        }\n        this.indeterminate = false;\n    }\n\n    private trackSegmentStyles(start: number, end: number): StyleInfo {\n        const size = end - start;\n        const styles: StyleInfo = {\n            width: `${size * 100}%`,\n            '--spectrum-slider-track-background-size': `${(1 / size) * 100}%`,\n            '--spectrum-slider-track-segment-position': `${start * 100}%`,\n        };\n        return styles;\n    }\n\n    private _numberFieldInput: Promise<unknown> = Promise.resolve();\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        if (this.editable) {\n            await this._numberFieldInput;\n            await this.numberField.updateComplete;\n        }\n        await this.handleController.handleUpdatesComplete();\n        return complete;\n    }\n\n    protected override willUpdate(changed: PropertyValues): void {\n        if (changed.has('value') && changed.has('fillStart')) {\n            this._cachedValue = Number(this.value);\n            // Test if fill-start is set without a value\n            if (this.getAttribute('fill-start') === '') {\n                this.centerPoint =\n                    (Number(this.max) - Number(this.min)) / 2 +\n                    Number(this.min);\n            } else if (!Number.isNaN(Number(this.fillStart))) {\n                this.centerPoint = Number(this.fillStart);\n            }\n        }\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/Slider.js

@@ -0,0 +1,105 @@
+"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(u,o,e,t)=>{for(var i=t>1?void 0:t?f(o,e):o,r=u.length-1,s;r>=0;r--)(s=u[r])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&v(o,e,i),i};import{html as a,nothing as h,SizedMixin as g}from"@spectrum-web-components/base";import{property as n,query as p}from"@spectrum-web-components/base/src/decorators.js";import{classMap as c,ifDefined as $,repeat as m,styleMap as b}from"@spectrum-web-components/base/src/directives.js";import y from"./slider.css.js";import{ObserveSlotText as k}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/field-label/sp-field-label.js";import{HandleController as C}from"./HandleController.js";import{SliderHandle as N}from"./SliderHandle.js";import{streamingListener as P}from"@spectrum-web-components/base/src/streaming-listener.js";export const variants=["filled","ramp","range","tick"];export class Slider extends g(k(N,""),{noDefaultSize:!0,validSizes:["s","m","l","xl"]}){constructor(){super(...arguments);this.handleController=new C(this);this._editable=!1;this.hideStepper=!1;this.type="";this._variant="";this.getAriaValueText=e=>{const t=[...e.values()];return t.length===2?`${t[0]} - ${t[1]}`:t.join(", ")};this.min=0;this.max=100;this.step=1;this.tickStep=0;this.tickLabels=!1;this.disabled=!1;this.quiet=!1;this.indeterminate=!1;this._numberFieldInput=Promise.resolve()}static get styles(){return[y]}get editable(){return this._editable}set editable(e){if(e===this.editable)return;const t=this.editable;this._editable=this.handleController.size<2?e:!1,this.editable&&(this._numberFieldInput=import("@spectrum-web-components/number-field/sp-number-field.js")),t!==this.editable&&this.requestUpdate("editable",t)}set variant(e){const t=this.variant;e!==this.variant&&(variants.includes(e)&&this.fillStart===void 0?(this._variant=e,this.setAttribute("variant",e)):(this._variant="",this.removeAttribute("variant")),this.requestUpdate("variant",t))}get variant(){return this._variant}get values(){return this.handleController.values}get handleName(){return"value"}get ariaValueText(){return this.getAriaValueText?this.getAriaValueText(this.handleController.formattedValues):`${this.value}${this._forcedUnit}`}get numberFormat(){return this.getNumberFormat()}get focusElement(){return this.handleController.focusElement}handleLabelClick(e){this.editable&&(e.preventDefault(),this.focus())}render(){return a`
+            ${this.renderLabel()} ${this.renderTrack()}
+            ${this.editable?a`
+                      <sp-number-field
+                          .formatOptions=${this.formatOptions||{}}
+                          id="number-field"
+                          min=${this.min}
+                          max=${this.max}
+                          step=${this.step}
+                          size=${this.size}
+                          value=${this.value}
+                          ?hide-stepper=${this.hideStepper}
+                          ?disabled=${this.disabled}
+                          ?quiet=${this.quiet}
+                          ?indeterminate=${this.indeterminate}
+                          @input=${this.handleNumberInput}
+                          @change=${this.handleNumberChange}
+                      ></sp-number-field>
+                  `:h}
+        `}connectedCallback(){super.connectedCallback(),this.handleController.hostConnected()}disconnectedCallback(){super.disconnectedCallback(),this.handleController.hostDisconnected()}update(e){this.handleController.hostUpdate(),e.has("disabled")&&this.disabled&&this.handleController.cancelDrag(),super.update(e)}renderLabel(){const e=this.labelVisibility==="none"||this.labelVisibility==="value",t=this.labelVisibility==="none"||this.labelVisibility==="text";return a`
+            <div id="label-container">
+                <sp-field-label
+                    class=${c({"visually-hidden":e})}
+                    ?disabled=${this.disabled}
+                    id="label"
+                    for=${this.editable?"number-field":this.handleController.activeHandleInputId}
+                    @click=${this.handleLabelClick}
+                    size=${this.size}
+                >
+                    ${this.slotHasContent?h:this.label}
+                    <slot>${this.label}</slot>
+                </sp-field-label>
+                <sp-field-label
+                    class=${c({"visually-hidden":t})}
+                    ?disabled=${this.disabled}
+                    for=${this.editable?"number-field":this.handleController.activeHandleInputId}
+                    size=${this.size}
+                >
+                    <output id="value" aria-live="off" for="input">
+                        ${this.ariaValueText}
+                    </output>
+                </sp-field-label>
+            </div>
+        `}renderRamp(){return this.variant!=="ramp"?a``:a`
+            <div id="ramp">
+                <svg
+                    viewBox="0 0 240 16"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    focusable="false"
+                >
+                    <path
+                        d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"
+                    ></path>
+                </svg>
+            </div>
+        `}renderTicks(){if(this.variant!=="tick")return a``;const e=this.tickStep||this.step,t=(this.max-this.min)/e,i=t%1!==0,r=new Array(Math.floor(t+1));return r.fill(0,0,t+1),a`
+            <div
+                class="${i?"not-exact ":""}ticks"
+                style=${$(i?`--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`:void 0)}
+            >
+                ${r.map((s,d)=>a`
+                        <div class="tick">
+                            ${this.tickLabels?a`
+                                      <div class="tickLabel">
+                                          ${d*e+this.min}
+                                      </div>
+                                  `:h}
+                        </div>
+                    `)}
+            </div>
+        `}renderTrackSegment(e,t){return this.variant==="ramp"?a``:a`
+            <div
+                class="track"
+                style=${b(this.trackSegmentStyles(e,t))}
+                role="presentation"
+            ></div>
+        `}getOffsetWidth(e,t){return Math.abs(t-e)*100}fillStyles(e){const t=this.handleController.activeHandleModel,i=t.normalization.toNormalized(e,this.min,this.max),r=this.dir==="rtl"?"right":"left",s=(this.value>e?i:t.normalizedValue)*100,d=this.getOffsetWidth(i,t.normalizedValue);return{[r]:`${s}%`,width:`${d}%`}}renderFillOffset(){return this._cachedValue===void 0||this.centerPoint===void 0?a``:a`
+            <div
+                class=${c({fill:!0,offset:this.value>this.centerPoint})}
+                style=${b(this.fillStyles(this.centerPoint))}
+            ></div>
+        `}renderHandle(){return this.variant==="tick"?a``:a`
+            ${this.handleController.render()}
+        `}renderTrack(){const e=this.handleController.trackSegments(),t=[{id:"handles",html:this.handleController.render()}],i=[{id:"track0",html:this.renderTrackSegment(...e[0])},{id:"fill",html:this.renderFillOffset()},{id:"ramp",html:this.renderRamp()},{id:"handles",html:this.renderHandle()},...e.slice(1).map(([r,s],d)=>({id:`track${d+1}`,html:this.renderTrackSegment(r,s)}))];return a`
+            <div
+                id="track"
+                ${P({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup],streamOutside:["dblclick",this.handleDoubleClick]})}
+            >
+                <div id="controls">
+                    ${this.variant==="tick"?a`
+                              ${this.renderTicks()}
+                              <div class="trackContainer">
+                                  ${m(i,r=>r.id,r=>r.html)}
+                              </div>
+                              <div class="handleContainer">
+                                  ${m(t,r=>r.id,r=>r.html)}
+                              </div>
+                          `:a`
+                              ${m(i,r=>r.id,r=>r.html)}
+                          `}
+                </div>
+            </div>
+        `}handleDoubleClick(e){this.handleController.handleDoubleClick(e)}handlePointerdown(e){this.handleController.handlePointerdown(e)}handlePointermove(e){this.handleController.handlePointermove(e)}handlePointerup(e){this.handleController.handlePointerup(e)}handleNumberInput(e){var i;const{value:t}=e.target;if((i=e.target)!=null&&i.managedInput&&!isNaN(t)){this.value=t;return}e.stopPropagation()}handleNumberChange(e){var i;const{value:t}=e.target;isNaN(t)?(e.target.value=this.value,e.stopPropagation()):(this.value=t,(i=e.target)!=null&&i.managedInput||this.dispatchInputEvent()),this.indeterminate=!1}trackSegmentStyles(e,t){const i=t-e;return{width:`${i*100}%`,"--spectrum-slider-track-background-size":`${1/i*100}%`,"--spectrum-slider-track-segment-position":`${e*100}%`}}async getUpdateComplete(){const e=await super.getUpdateComplete();return this.editable&&(await this._numberFieldInput,await this.numberField.updateComplete),await this.handleController.handleUpdatesComplete(),e}willUpdate(e){e.has("value")&&e.has("fillStart")&&(this._cachedValue=Number(this.value),this.getAttribute("fill-start")===""?this.centerPoint=(Number(this.max)-Number(this.min))/2+Number(this.min):Number.isNaN(Number(this.fillStart))||(this.centerPoint=Number(this.fillStart)))}}l([n({type:Boolean,reflect:!0})],Slider.prototype,"editable",1),l([n({type:Boolean,reflect:!0,attribute:"hide-stepper"})],Slider.prototype,"hideStepper",2),l([n()],Slider.prototype,"type",2),l([n({reflect:!0})],Slider.prototype,"dir",2),l([n({type:String})],Slider.prototype,"variant",1),l([n({attribute:!1})],Slider.prototype,"getAriaValueText",2),l([n({type:String,reflect:!0,attribute:"label-visibility"})],Slider.prototype,"labelVisibility",2),l([n({type:Number,reflect:!0})],Slider.prototype,"min",2),l([n({type:Number,reflect:!0})],Slider.prototype,"max",2),l([n({type:Number})],Slider.prototype,"step",2),l([n({type:Number,attribute:"tick-step"})],Slider.prototype,"tickStep",2),l([n({type:Boolean,attribute:"tick-labels"})],Slider.prototype,"tickLabels",2),l([n({type:Boolean,reflect:!0})],Slider.prototype,"disabled",2),l([n({type:Number,reflect:!0,attribute:"fill-start"})],Slider.prototype,"fillStart",2),l([n({type:Boolean})],Slider.prototype,"quiet",2),l([n({type:Boolean})],Slider.prototype,"indeterminate",2),l([p("#label")],Slider.prototype,"labelEl",2),l([p("#number-field")],Slider.prototype,"numberField",2),l([p("#track")],Slider.prototype,"track",2);
+//# sourceMappingURL=Slider.js.map