@spectrum-web-components/slider 0.12.14 → 0.12.15-devmode.0

package/src/Slider.js

@@ -1,133 +1,121 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate } from "tslib";
-import { html, } 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.js';
-import { SliderHandle } from './SliderHandle.js';
-import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
-export const variants = ['filled', 'ramp', 'range', 'tick'];
-/**
- * @element sp-slider
- *
- * @slot - text label for the Slider
- * @slot handle - optionally accepts two or more sp-slider-handle elements
- */
-export class Slider extends ObserveSlotText(SliderHandle, '') {
-    constructor() {
-        super(...arguments);
-        this.handleController = new HandleController(this);
-        this._editable = false;
-        /**
-         * Whether the stepper UI of the Number Field is hidden or not
-         */
-        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]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;
-            return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;
-        };
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
-        this.tickStep = 0;
-        this.tickLabels = false;
-        this.disabled = false;
-        /**
-         * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.
-         */
-        this.quiet = false;
-        /**
-         * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.
-         */
-        this.indeterminate = false;
-        this._numberFieldInput = Promise.resolve();
+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
+} 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.js";
+import { SliderHandle } from "./SliderHandle.js";
+import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";
+export const variants = ["filled", "ramp", "range", "tick"];
+export class Slider extends ObserveSlotText(SliderHandle, "") {
+  constructor() {
+    super(...arguments);
+    this.handleController = new HandleController(this);
+    this._editable = false;
+    this.hideStepper = false;
+    this.type = "";
+    this._variant = "";
+    this.getAriaValueText = (values) => {
+      const valueArray = [...values.values()];
+      if (valueArray.length === 2)
+        return `${valueArray[0]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;
+      return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;
+    };
+    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");
     }
-    static get styles() {
-        return [sliderStyles];
+    if (oldValue !== this.editable) {
+      this.requestUpdate("editable", oldValue);
     }
-    /**
-     * Whether to display a Number Field along side the slider UI
-     */
-    get editable() {
-        return this._editable;
+  }
+  set variant(variant) {
+    const oldVariant = this.variant;
+    if (variant === this.variant) {
+      return;
     }
-    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);
-        }
+    if (variants.includes(variant)) {
+      this.setAttribute("variant", variant);
+      this._variant = variant;
+    } else {
+      this.removeAttribute("variant");
+      this._variant = "";
     }
-    set variant(variant) {
-        const oldVariant = this.variant;
-        if (variant === this.variant) {
-            return;
-        }
-        if (variants.includes(variant)) {
-            this.setAttribute('variant', variant);
-            this._variant = variant;
-        }
-        else {
-            this.removeAttribute('variant');
-            this._variant = '';
-        }
-        this.requestUpdate('variant', oldVariant);
+    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}`;
     }
-    get variant() {
-        return this._variant;
+    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();
     }
-    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 `
+  }
+  render() {
+    return html`
             ${this.renderLabel()} ${this.renderTrack()}
-            ${this.editable
-            ? html `
+            ${this.editable ? html`
                       <sp-number-field
                           .formatOptions=${this.formatOptions || {}}
                           id="number-field"
@@ -142,48 +130,45 @@ export class Slider extends ObserveSlotText(SliderHandle, '') {
                           @input=${this.handleNumberInput}
                           @change=${this.handleNumberChange}
                       ></sp-number-field>
-                  `
-            : html ``}
+                  ` : html``}
         `;
+  }
+  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();
     }
-    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 `
+    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,
-        })}
+      "visually-hidden": textLabelVisible
+    })}
                     ?disabled=${this.disabled}
                     id="label"
-                    for=${this.editable
-            ? 'number-field'
-            : this.handleController.activeHandleInputId}
+                    for=${this.editable ? "number-field" : this.handleController.activeHandleInputId}
                     @click=${this.handleLabelClick}
                 >
-                    ${this.slotHasContent ? html `` : this.label}
+                    ${this.slotHasContent ? html`` : this.label}
                     <slot>${this.label}</slot>
                 </sp-field-label>
                 <output
                     class=${classMap({
-            'visually-hidden': valueLabelVisible,
-        })}
+      "visually-hidden": valueLabelVisible
+    })}
                     id="value"
                     aria-live="off"
                     for="input"
@@ -192,12 +177,12 @@ export class Slider extends ObserveSlotText(SliderHandle, '') {
                 </output>
             </div>
         `;
+  }
+  renderRamp() {
+    if (this.variant !== "ramp") {
+      return html``;
     }
-    renderRamp() {
-        if (this.variant !== 'ramp') {
-            return html ``;
-        }
-        return html `
+    return html`
             <div id="ramp">
                 <svg
                     viewBox="0 0 240 16"
@@ -211,181 +196,172 @@ export class Slider extends ObserveSlotText(SliderHandle, '') {
                 </svg>
             </div>
         `;
+  }
+  renderTicks() {
+    if (this.variant !== "tick") {
+      return html``;
     }
-    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 `
+    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}`
-            : undefined)}
+                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 `
+                ${ticks.map((_tick, i) => html`
                         <div class="tick">
-                            ${this.tickLabels
-            ? html `
+                            ${this.tickLabels ? html`
                                       <div class="tickLabel">
                                           ${i * tickStep + this.min}
                                       </div>
-                                  `
-            : html ``}
+                                  ` : html``}
                         </div>
                     `)}
             </div>
         `;
+  }
+  renderTrackSegment(start, end) {
+    if (this.variant === "ramp") {
+      return html``;
     }
-    renderTrackSegment(start, end) {
-        if (this.variant === 'ramp') {
-            return html ``;
-        }
-        return html `
+    return html`
             <div
                 class="track"
                 style=${styleMap(this.trackSegmentStyles(start, end))}
                 role="presentation"
             ></div>
         `;
-    }
-    renderTrack() {
-        const segments = this.handleController.trackSegments();
-        const trackItems = [
-            { id: 'track0', html: this.renderTrackSegment(...segments[0]) },
-            { id: 'ramp', html: this.renderRamp() },
-            { id: 'ticks', html: this.renderTicks() },
-            { id: 'handles', html: this.handleController.render() },
-            ...segments.slice(1).map(([start, end], index) => ({
-                id: `track${index + 1}`,
-                html: this.renderTrackSegment(start, end),
-            })),
-        ];
-        return html `
+  }
+  renderTrack() {
+    const segments = this.handleController.trackSegments();
+    const trackItems = [
+      { id: "track0", html: this.renderTrackSegment(...segments[0]) },
+      { id: "ramp", html: this.renderRamp() },
+      { id: "ticks", html: this.renderTicks() },
+      { id: "handles", html: this.handleController.render() },
+      ...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'], this.handlePointerup],
-        })}
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [["pointerup", "pointercancel"], this.handlePointerup]
+    })}
             >
                 <div id="controls">
                     ${repeat(trackItems, (item) => item.id, (item) => item.html)}
                 </div>
             </div>
         `;
+  }
+  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.stepperActive) && !isNaN(value)) {
+      this.value = value;
+      return;
     }
-    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 || _a === void 0 ? void 0 : _a.stepperActive) && !isNaN(value)) {
-            this.value = value;
-            return;
-        }
-        // Do not apply uncommited values to the parent element unless interacting with the stepper UI.
-        // Stop uncommited input from being annoucned to the parent application.
-        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 || _a === void 0 ? void 0 : _a.stepperActive)) {
-                // When stepper is not active, sythesize an `input` event so that the
-                // `change` event isn't surprising.
-                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;
+    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.stepperActive)) {
+        this.dispatchInputEvent();
+      }
     }
-    async getUpdateComplete() {
-        const complete = (await super.getUpdateComplete());
-        if (this.editable) {
-            await this._numberFieldInput;
-            await this.numberField.updateComplete;
-        }
-        await this.handleController.handleUpdatesComplete();
-        return complete;
+    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;
+  }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Slider.prototype, "editable", null);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })
-], Slider.prototype, "hideStepper", void 0);
-__decorate([
-    property()
-], Slider.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], Slider.prototype, "variant", null);
-__decorate([
-    property({ attribute: false })
-], Slider.prototype, "getAriaValueText", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'label-visibility' })
-], Slider.prototype, "labelVisibility", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], Slider.prototype, "min", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], Slider.prototype, "max", void 0);
-__decorate([
-    property({ type: Number })
-], Slider.prototype, "step", void 0);
-__decorate([
-    property({ type: Number, attribute: 'tick-step' })
-], Slider.prototype, "tickStep", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'tick-labels' })
-], Slider.prototype, "tickLabels", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Slider.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], Slider.prototype, "quiet", void 0);
-__decorate([
-    property({ type: Boolean })
-], Slider.prototype, "indeterminate", void 0);
-__decorate([
-    query('#label')
-], Slider.prototype, "labelEl", void 0);
-__decorate([
-    query('#number-field')
-], Slider.prototype, "numberField", void 0);
-__decorate([
-    query('#track')
-], Slider.prototype, "track", void 0);
-//# sourceMappingURL=Slider.js.map
+__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({ 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: 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.js.map