@spectrum-web-components/slider 0.14.1 → 0.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/slider",
3
- "version": "0.14.1",
3
+ "version": "0.14.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -77,9 +77,9 @@
77
77
  "@lit-labs/observers": "^1.0.1",
78
78
  "@spectrum-web-components/base": "^0.7.0",
79
79
  "@spectrum-web-components/field-label": "^0.8.0",
80
- "@spectrum-web-components/number-field": "^0.5.1",
80
+ "@spectrum-web-components/number-field": "^0.5.2",
81
81
  "@spectrum-web-components/shared": "^0.15.0",
82
- "@spectrum-web-components/theme": "^0.14.1",
82
+ "@spectrum-web-components/theme": "^0.14.2",
83
83
  "tslib": "^2.0.0"
84
84
  },
85
85
  "devDependencies": {
@@ -92,5 +92,5 @@
92
92
  "./**/*.dev.js",
93
93
  "./sync/sp-*.js"
94
94
  ],
95
- "gitHead": "1cfea66c39440232b9982509573801b8e3a9f692"
95
+ "gitHead": "60b2d3b7d9020d72f9ae930568670321a1918e6f"
96
96
  }
package/src/Slider.dev.js CHANGED
@@ -285,7 +285,7 @@ export class Slider extends ObserveSlotText(SliderHandle, "") {
285
285
  handleNumberInput(event) {
286
286
  var _a;
287
287
  const { value } = event.target;
288
- if (((_a = event.target) == null ? void 0 : _a.stepperActive) && !isNaN(value)) {
288
+ if (((_a = event.target) == null ? void 0 : _a.managedInput) && !isNaN(value)) {
289
289
  this.value = value;
290
290
  return;
291
291
  }
@@ -299,7 +299,7 @@ export class Slider extends ObserveSlotText(SliderHandle, "") {
299
299
  event.stopPropagation();
300
300
  } else {
301
301
  this.value = value;
302
- if (!((_a = event.target) == null ? void 0 : _a.stepperActive)) {
302
+ if (!((_a = event.target) == null ? void 0 : _a.managedInput)) {
303
303
  this.dispatchInputEvent();
304
304
  }
305
305
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Slider.ts"],
4
- "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 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 ObserveSlotText(SliderHandle, '') {\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({ 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)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._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]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;\n return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;\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 /**\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 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 : html``}\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 >\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <output\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n id=\"value\"\n aria-live=\"off\"\n for=\"input\"\n >\n ${this.ariaValueText}\n </output>\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 : html``}\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 renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'ramp', html: this.renderRamp() },\n { id: 'ticks', html: this.renderTicks() },\n { id: 'handles', html: this.handleController.render() },\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: [['pointerup', 'pointercancel'], this.handlePointerup],\n })}\n >\n <div id=\"controls\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n `;\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?.stepperActive && !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 uncommited input from being annoucned 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?.stepperActive) {\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"],
5
- "mappings": "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",
4
+ "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 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 ObserveSlotText(SliderHandle, '') {\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({ 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)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._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]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;\n return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;\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 /**\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 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 : html``}\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 >\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <output\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n id=\"value\"\n aria-live=\"off\"\n for=\"input\"\n >\n ${this.ariaValueText}\n </output>\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 : html``}\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 renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'ramp', html: this.renderRamp() },\n { id: 'ticks', html: this.renderTicks() },\n { id: 'handles', html: this.handleController.render() },\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: [['pointerup', 'pointercancel'], this.handlePointerup],\n })}\n >\n <div id=\"controls\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n `;\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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/src/Slider.js CHANGED
@@ -1,6 +1,6 @@
1
- "use strict";var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var r=(d,o,e,t)=>{for(var i=t>1?void 0:t?b(o,e):o,n=d.length-1,s;n>=0;n--)(s=d[n])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&h(o,e,i),i};import{html as l}from"@spectrum-web-components/base";import{property as a,query as u}from"@spectrum-web-components/base/src/decorators.js";import{classMap as p,ifDefined as m,repeat as v,styleMap as f}from"@spectrum-web-components/base/src/directives.js";import g 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 y}from"./HandleController.js";import{SliderHandle as $}from"./SliderHandle.js";import{streamingListener as C}from"@spectrum-web-components/base/src/streaming-listener.js";export const variants=["filled","ramp","range","tick"];export class Slider extends k($,""){constructor(){super(...arguments);this.handleController=new y(this);this._editable=!1;this.hideStepper=!1;this.type="";this._variant="";this.getAriaValueText=e=>{const t=[...e.values()];return t.length===2?`${t[0]}${this._forcedUnit} - ${t[1]}${this._forcedUnit}`:t.join(`${this._forcedUnit}, `)+this._forcedUnit};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[g]}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.setAttribute("variant",e),this._variant=e):(this.removeAttribute("variant"),this._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 l`
1
+ "use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(d,o,e,t)=>{for(var i=t>1?void 0:t?m(o,e):o,n=d.length-1,s;n>=0;n--)(s=d[n])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&h(o,e,i),i};import{html as a}from"@spectrum-web-components/base";import{property as l,query as u}from"@spectrum-web-components/base/src/decorators.js";import{classMap as p,ifDefined as b,repeat as v,styleMap as f}from"@spectrum-web-components/base/src/directives.js";import g 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 y}from"./HandleController.js";import{SliderHandle as $}from"./SliderHandle.js";import{streamingListener as C}from"@spectrum-web-components/base/src/streaming-listener.js";export const variants=["filled","ramp","range","tick"];export class Slider extends k($,""){constructor(){super(...arguments);this.handleController=new y(this);this._editable=!1;this.hideStepper=!1;this.type="";this._variant="";this.getAriaValueText=e=>{const t=[...e.values()];return t.length===2?`${t[0]}${this._forcedUnit} - ${t[1]}${this._forcedUnit}`:t.join(`${this._forcedUnit}, `)+this._forcedUnit};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[g]}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.setAttribute("variant",e),this._variant=e):(this.removeAttribute("variant"),this._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`
2
2
  ${this.renderLabel()} ${this.renderTrack()}
3
- ${this.editable?l`
3
+ ${this.editable?a`
4
4
  <sp-number-field
5
5
  .formatOptions=${this.formatOptions||{}}
6
6
  id="number-field"
@@ -15,8 +15,8 @@
15
15
  @input=${this.handleNumberInput}
16
16
  @change=${this.handleNumberChange}
17
17
  ></sp-number-field>
18
- `:l``}
19
- `}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 l`
18
+ `:a``}
19
+ `}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`
20
20
  <div id="label-container">
21
21
  <sp-field-label
22
22
  class=${p({"visually-hidden":e})}
@@ -25,7 +25,7 @@
25
25
  for=${this.editable?"number-field":this.handleController.activeHandleInputId}
26
26
  @click=${this.handleLabelClick}
27
27
  >
28
- ${this.slotHasContent?l``:this.label}
28
+ ${this.slotHasContent?a``:this.label}
29
29
  <slot>${this.label}</slot>
30
30
  </sp-field-label>
31
31
  <output
@@ -37,7 +37,7 @@
37
37
  ${this.ariaValueText}
38
38
  </output>
39
39
  </div>
40
- `}renderRamp(){return this.variant!=="ramp"?l``:l`
40
+ `}renderRamp(){return this.variant!=="ramp"?a``:a`
41
41
  <div id="ramp">
42
42
  <svg
43
43
  viewBox="0 0 240 16"
@@ -50,28 +50,28 @@
50
50
  ></path>
51
51
  </svg>
52
52
  </div>
53
- `}renderTicks(){if(this.variant!=="tick")return l``;const e=this.tickStep||this.step,t=(this.max-this.min)/e,i=t%1!==0,n=new Array(Math.floor(t+1));return n.fill(0,0,t+1),l`
53
+ `}renderTicks(){if(this.variant!=="tick")return a``;const e=this.tickStep||this.step,t=(this.max-this.min)/e,i=t%1!==0,n=new Array(Math.floor(t+1));return n.fill(0,0,t+1),a`
54
54
  <div
55
55
  class="${i?"not-exact ":""}ticks"
56
- style=${m(i?`--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`:void 0)}
56
+ style=${b(i?`--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`:void 0)}
57
57
  >
58
- ${n.map((s,c)=>l`
58
+ ${n.map((s,c)=>a`
59
59
  <div class="tick">
60
- ${this.tickLabels?l`
60
+ ${this.tickLabels?a`
61
61
  <div class="tickLabel">
62
62
  ${c*e+this.min}
63
63
  </div>
64
- `:l``}
64
+ `:a``}
65
65
  </div>
66
66
  `)}
67
67
  </div>
68
- `}renderTrackSegment(e,t){return this.variant==="ramp"?l``:l`
68
+ `}renderTrackSegment(e,t){return this.variant==="ramp"?a``:a`
69
69
  <div
70
70
  class="track"
71
71
  style=${f(this.trackSegmentStyles(e,t))}
72
72
  role="presentation"
73
73
  ></div>
74
- `}renderTrack(){const e=this.handleController.trackSegments(),t=[{id:"track0",html:this.renderTrackSegment(...e[0])},{id:"ramp",html:this.renderRamp()},{id:"ticks",html:this.renderTicks()},{id:"handles",html:this.handleController.render()},...e.slice(1).map(([i,n],s)=>({id:`track${s+1}`,html:this.renderTrackSegment(i,n)}))];return l`
74
+ `}renderTrack(){const e=this.handleController.trackSegments(),t=[{id:"track0",html:this.renderTrackSegment(...e[0])},{id:"ramp",html:this.renderRamp()},{id:"ticks",html:this.renderTicks()},{id:"handles",html:this.handleController.render()},...e.slice(1).map(([i,n],s)=>({id:`track${s+1}`,html:this.renderTrackSegment(i,n)}))];return a`
75
75
  <div
76
76
  id="track"
77
77
  ${C({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel"],this.handlePointerup]})}
@@ -80,5 +80,5 @@
80
80
  ${v(t,i=>i.id,i=>i.html)}
81
81
  </div>
82
82
  </div>
83
- `}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?void 0:i.stepperActive)&&!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.stepperActive||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}}r([a({type:Boolean,reflect:!0})],Slider.prototype,"editable",1),r([a({type:Boolean,reflect:!0,attribute:"hide-stepper"})],Slider.prototype,"hideStepper",2),r([a()],Slider.prototype,"type",2),r([a({type:String})],Slider.prototype,"variant",1),r([a({attribute:!1})],Slider.prototype,"getAriaValueText",2),r([a({type:String,reflect:!0,attribute:"label-visibility"})],Slider.prototype,"labelVisibility",2),r([a({type:Number,reflect:!0})],Slider.prototype,"min",2),r([a({type:Number,reflect:!0})],Slider.prototype,"max",2),r([a({type:Number})],Slider.prototype,"step",2),r([a({type:Number,attribute:"tick-step"})],Slider.prototype,"tickStep",2),r([a({type:Boolean,attribute:"tick-labels"})],Slider.prototype,"tickLabels",2),r([a({type:Boolean,reflect:!0})],Slider.prototype,"disabled",2),r([a({type:Boolean})],Slider.prototype,"quiet",2),r([a({type:Boolean})],Slider.prototype,"indeterminate",2),r([u("#label")],Slider.prototype,"labelEl",2),r([u("#number-field")],Slider.prototype,"numberField",2),r([u("#track")],Slider.prototype,"track",2);
83
+ `}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?void 0: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}}r([l({type:Boolean,reflect:!0})],Slider.prototype,"editable",1),r([l({type:Boolean,reflect:!0,attribute:"hide-stepper"})],Slider.prototype,"hideStepper",2),r([l()],Slider.prototype,"type",2),r([l({type:String})],Slider.prototype,"variant",1),r([l({attribute:!1})],Slider.prototype,"getAriaValueText",2),r([l({type:String,reflect:!0,attribute:"label-visibility"})],Slider.prototype,"labelVisibility",2),r([l({type:Number,reflect:!0})],Slider.prototype,"min",2),r([l({type:Number,reflect:!0})],Slider.prototype,"max",2),r([l({type:Number})],Slider.prototype,"step",2),r([l({type:Number,attribute:"tick-step"})],Slider.prototype,"tickStep",2),r([l({type:Boolean,attribute:"tick-labels"})],Slider.prototype,"tickLabels",2),r([l({type:Boolean,reflect:!0})],Slider.prototype,"disabled",2),r([l({type:Boolean})],Slider.prototype,"quiet",2),r([l({type:Boolean})],Slider.prototype,"indeterminate",2),r([u("#label")],Slider.prototype,"labelEl",2),r([u("#number-field")],Slider.prototype,"numberField",2),r([u("#track")],Slider.prototype,"track",2);
84
84
  //# sourceMappingURL=Slider.js.map
package/src/Slider.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Slider.ts"],
4
- "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 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.js';\nimport { SliderHandle } from './SliderHandle.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 ObserveSlotText(SliderHandle, '') {\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({ 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)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._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]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;\n return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;\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 /**\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 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 : html``}\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 >\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <output\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n id=\"value\"\n aria-live=\"off\"\n for=\"input\"\n >\n ${this.ariaValueText}\n </output>\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 : html``}\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 renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'ramp', html: this.renderRamp() },\n { id: 'ticks', html: this.renderTicks() },\n { id: 'handles', html: this.handleController.render() },\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: [['pointerup', 'pointercancel'], this.handlePointerup],\n })}\n >\n <div id=\"controls\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n `;\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?.stepperActive && !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 uncommited input from being annoucned 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?.stepperActive) {\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"],
5
- "mappings": "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",
4
+ "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 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.js';\nimport { SliderHandle } from './SliderHandle.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 ObserveSlotText(SliderHandle, '') {\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({ 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)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._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]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;\n return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;\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 /**\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 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 : html``}\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 >\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <output\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n id=\"value\"\n aria-live=\"off\"\n for=\"input\"\n >\n ${this.ariaValueText}\n </output>\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 : html``}\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 renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'ramp', html: this.renderRamp() },\n { id: 'ticks', html: this.renderTicks() },\n { id: 'handles', html: this.handleController.render() },\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: [['pointerup', 'pointercancel'], this.handlePointerup],\n })}\n >\n <div id=\"controls\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n `;\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"],
5
+ "mappings": "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",
6
6
  "names": ["html", "property", "query", "classMap", "ifDefined", "repeat", "styleMap", "sliderStyles", "ObserveSlotText", "HandleController", "SliderHandle", "streamingListener", "values", "valueArray", "editable", "oldValue", "variant", "oldVariant", "event", "changedProperties", "textLabelVisible", "valueLabelVisible", "tickStep", "tickCount", "partialFit", "ticks", "_tick", "i", "start", "end", "segments", "trackItems", "index", "item", "_a", "value", "size", "complete", "__decorateClass"]
7
7
  }
@@ -63,6 +63,7 @@ describe("Slider - editable", () => {
63
63
  expect(el.shadowRoot.activeElement).to.equal(el.numberField);
64
64
  });
65
65
  it("edits via the `<sp-number-field>`", async () => {
66
+ var _a, _b, _c, _d;
66
67
  const inputSpy = spy();
67
68
  const changeSpy = spy();
68
69
  const el = await sliderFromFixture(editable);
@@ -91,6 +92,34 @@ describe("Slider - editable", () => {
91
92
  expect(el.value).to.equal(45);
92
93
  expect(inputSpy.callCount, "still one input").to.equal(1);
93
94
  expect(changeSpy.callCount, "still one change").to.equal(1);
95
+ (_a = el.shadowRoot.activeElement) == null ? void 0 : _a.dispatchEvent(
96
+ new WheelEvent("wheel", { deltaY: 1 })
97
+ );
98
+ await elementUpdated(el);
99
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
100
+ expect(el.value).to.equal(46);
101
+ expect(inputSpy.callCount, "still one input").to.equal(2);
102
+ (_b = el.shadowRoot.activeElement) == null ? void 0 : _b.dispatchEvent(
103
+ new WheelEvent("wheel", { deltaY: -1 })
104
+ );
105
+ await elementUpdated(el);
106
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
107
+ expect(el.value).to.equal(45);
108
+ expect(inputSpy.callCount, "still one input").to.equal(3);
109
+ (_c = el.shadowRoot.activeElement) == null ? void 0 : _c.dispatchEvent(
110
+ new WheelEvent("wheel", { deltaX: 1, shiftKey: true })
111
+ );
112
+ await elementUpdated(el);
113
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
114
+ expect(el.value).to.equal(55);
115
+ expect(inputSpy.callCount, "still one input").to.equal(4);
116
+ (_d = el.shadowRoot.activeElement) == null ? void 0 : _d.dispatchEvent(
117
+ new WheelEvent("wheel", { deltaX: -1, shiftKey: true })
118
+ );
119
+ await elementUpdated(el);
120
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
121
+ expect(el.value).to.equal(45);
122
+ expect(inputSpy.callCount, "still one input").to.equal(5);
94
123
  });
95
124
  it("focuses `<input>` after pointer interactions", async () => {
96
125
  let pointerId = -1;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["slider-editable.test.ts"],
4
- "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 '@spectrum-web-components/slider/sp-slider.js';\nimport { Slider } from '@spectrum-web-components/slider';\nimport {\n editable,\n hideStepper,\n Indeterminate,\n StoryArgs,\n} from '../stories/slider.stories.js';\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nasync function sliderFromFixture(\n sliderFixture: (args: StoryArgs) => TemplateResult\n): Promise<Slider> {\n const el = await fixture<Slider>(sliderFixture({}));\n const slider = el.querySelector('sp-slider') as Slider;\n return slider;\n}\n\ndescribe('Slider - editable', () => {\n testForLitDevWarnings(async () => await sliderFromFixture(editable));\n it('loads', async () => {\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [hide-stepper]', async () => {\n const el = await sliderFromFixture(hideStepper);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [disabled]', async () => {\n const el = document.createElement('sp-slider');\n el.editable = true;\n el.disabled = true;\n el.label = 'Disabled, editable, slider';\n\n try {\n document.body.append(el);\n } catch (error) {\n expect(true).to.be.false;\n }\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n el.remove();\n });\n\n it('toggles indeterminate when edited via the `<sp-number-field>`', async () => {\n const el = await sliderFromFixture(Indeterminate);\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(5);\n expect(el.indeterminate).to.be.true;\n\n el.focus();\n\n await elementUpdated(el);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ type: '15' });\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(15);\n expect(el.indeterminate).to.be.false;\n });\n\n it('focuses `<sp-number-field>` directly', async () => {\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n el.focus();\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n });\n\n it('edits via the `<sp-number-field>`', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await sliderFromFixture(editable);\n el.addEventListener('input', () => inputSpy());\n el.addEventListener('change', () => changeSpy());\n\n await elementUpdated(el);\n\n el.focus();\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(90);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ type: '45' });\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'one input').to.equal(1);\n expect(changeSpy.callCount, 'one change').to.equal(1);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Enter' });\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'still one input').to.equal(1);\n expect(changeSpy.callCount, 'still one change').to.equal(1);\n });\n\n it('focuses `<input>` after pointer interactions', async () => {\n let pointerId = -1;\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId).to.equal(-1);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '1').to.equal(-1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 1').to.be.true;\n expect(pointerId, '2').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 2,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId, '3').to.equal(2);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 2').to.be.true;\n expect(pointerId, '4').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointercancel', {\n pointerId: 3,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '5').to.equal(3);\n expect(el.shadowRoot.activeElement).to.equal(\n el.handleController.inputForHandle(el)\n );\n });\n});\n"],
5
- "mappings": "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",
4
+ "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 '@spectrum-web-components/slider/sp-slider.js';\nimport { Slider } from '@spectrum-web-components/slider';\nimport {\n editable,\n hideStepper,\n Indeterminate,\n StoryArgs,\n} from '../stories/slider.stories.js';\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nasync function sliderFromFixture(\n sliderFixture: (args: StoryArgs) => TemplateResult\n): Promise<Slider> {\n const el = await fixture<Slider>(sliderFixture({}));\n const slider = el.querySelector('sp-slider') as Slider;\n return slider;\n}\n\ndescribe('Slider - editable', () => {\n testForLitDevWarnings(async () => await sliderFromFixture(editable));\n it('loads', async () => {\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [hide-stepper]', async () => {\n const el = await sliderFromFixture(hideStepper);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [disabled]', async () => {\n const el = document.createElement('sp-slider');\n el.editable = true;\n el.disabled = true;\n el.label = 'Disabled, editable, slider';\n\n try {\n document.body.append(el);\n } catch (error) {\n expect(true).to.be.false;\n }\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n el.remove();\n });\n\n it('toggles indeterminate when edited via the `<sp-number-field>`', async () => {\n const el = await sliderFromFixture(Indeterminate);\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(5);\n expect(el.indeterminate).to.be.true;\n\n el.focus();\n\n await elementUpdated(el);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ type: '15' });\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(15);\n expect(el.indeterminate).to.be.false;\n });\n\n it('focuses `<sp-number-field>` directly', async () => {\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n el.focus();\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n });\n\n it('edits via the `<sp-number-field>`', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await sliderFromFixture(editable);\n el.addEventListener('input', () => inputSpy());\n el.addEventListener('change', () => changeSpy());\n\n await elementUpdated(el);\n\n el.focus();\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(90);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ type: '45' });\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'one input').to.equal(1);\n expect(changeSpy.callCount, 'one change').to.equal(1);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Enter' });\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'still one input').to.equal(1);\n expect(changeSpy.callCount, 'still one change').to.equal(1);\n\n el.shadowRoot.activeElement?.dispatchEvent(\n new WheelEvent('wheel', { deltaY: 1 })\n );\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(46);\n expect(inputSpy.callCount, 'still one input').to.equal(2);\n\n el.shadowRoot.activeElement?.dispatchEvent(\n new WheelEvent('wheel', { deltaY: -1 })\n );\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'still one input').to.equal(3);\n\n el.shadowRoot.activeElement?.dispatchEvent(\n new WheelEvent('wheel', { deltaX: 1, shiftKey: true })\n );\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(55);\n expect(inputSpy.callCount, 'still one input').to.equal(4);\n\n el.shadowRoot.activeElement?.dispatchEvent(\n new WheelEvent('wheel', { deltaX: -1, shiftKey: true })\n );\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'still one input').to.equal(5);\n });\n\n it('focuses `<input>` after pointer interactions', async () => {\n let pointerId = -1;\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId).to.equal(-1);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '1').to.equal(-1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 1').to.be.true;\n expect(pointerId, '2').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 2,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId, '3').to.equal(2);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 2').to.be.true;\n expect(pointerId, '4').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointercancel', {\n pointerId: 3,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '5').to.equal(3);\n expect(el.shadowRoot.activeElement).to.equal(\n el.handleController.inputForHandle(el)\n );\n });\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }