@spectrum-web-components/slider 0.12.4 → 0.12.6

package/src/Slider.js

@@ -1,370 +0,0 @@
-/*
-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
- */
-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;
-        this._numberFieldInput = Promise.resolve();
-    }
-    static get styles() {
-        return [sliderStyles];
-    }
-    /**
-     * Whether to display a Number Field along side the slider UI
-     */
-    get editable() {
-        return this._editable;
-    }
-    set editable(editable) {
-        if (editable === this.editable)
-            return;
-        const oldValue = this.editable;
-        this._editable = this.handleController.size < 2 ? editable : false;
-        if (this.editable) {
-            this._numberFieldInput = import('@spectrum-web-components/number-field/sp-number-field.js');
-        }
-        if (oldValue !== this.editable) {
-            this.requestUpdate('editable', oldValue);
-        }
-    }
-    set variant(variant) {
-        const oldVariant = this.variant;
-        if (variant === this.variant) {
-            return;
-        }
-        if (variants.includes(variant)) {
-            this.setAttribute('variant', variant);
-            this._variant = variant;
-        }
-        else {
-            this.removeAttribute('variant');
-            this._variant = '';
-        }
-        this.requestUpdate('variant', oldVariant);
-    }
-    get variant() {
-        return this._variant;
-    }
-    get values() {
-        return this.handleController.values;
-    }
-    get handleName() {
-        return 'value';
-    }
-    get ariaValueText() {
-        if (!this.getAriaValueText) {
-            return `${this.value}${this._forcedUnit}`;
-        }
-        return this.getAriaValueText(this.handleController.formattedValues);
-    }
-    get numberFormat() {
-        return this.getNumberFormat();
-    }
-    get focusElement() {
-        return this.handleController.focusElement;
-    }
-    handleLabelClick(event) {
-        if (this.editable) {
-            event.preventDefault();
-            this.focus();
-        }
-    }
-    render() {
-        return html `
-            ${this.renderLabel()} ${this.renderTrack()}
-            ${this.editable
-            ? html `
-                      <sp-number-field
-                          .formatOptions=${this.formatOptions || {}}
-                          id="number-field"
-                          min=${this.min}
-                          max=${this.max}
-                          step=${this.step}
-                          value=${this.value}
-                          ?hide-stepper=${this.hideStepper}
-                          ?disabled=${this.disabled}
-                          @input=${this.handleNumberInput}
-                          @change=${this.handleNumberChange}
-                      ></sp-number-field>
-                  `
-            : html ``}
-        `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleController.hostConnected();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.handleController.hostDisconnected();
-    }
-    update(changedProperties) {
-        this.handleController.hostUpdate();
-        super.update(changedProperties);
-    }
-    renderLabel() {
-        const textLabelVisible = this.labelVisibility === 'none' || this.labelVisibility === 'value';
-        const valueLabelVisible = this.labelVisibility === 'none' || this.labelVisibility === 'text';
-        return html `
-            <div id="label-container">
-                <sp-field-label
-                    class=${classMap({
-            'visually-hidden': textLabelVisible,
-        })}
-                    ?disabled=${this.disabled}
-                    id="label"
-                    for=${this.editable
-            ? 'number-field'
-            : this.handleController.activeHandleInputId}
-                    @click=${this.handleLabelClick}
-                >
-                    ${this.slotHasContent ? html `` : this.label}
-                    <slot>${this.label}</slot>
-                </sp-field-label>
-                <output
-                    class=${classMap({
-            'visually-hidden': valueLabelVisible,
-        })}
-                    id="value"
-                    aria-live="off"
-                    for="input"
-                >
-                    ${this.ariaValueText}
-                </output>
-            </div>
-        `;
-    }
-    renderRamp() {
-        if (this.variant !== 'ramp') {
-            return html ``;
-        }
-        return html `
-            <div id="ramp">
-                <svg
-                    viewBox="0 0 240 16"
-                    preserveAspectRatio="none"
-                    aria-hidden="true"
-                    focusable="false"
-                >
-                    <path
-                        d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"
-                    ></path>
-                </svg>
-            </div>
-        `;
-    }
-    renderTicks() {
-        if (this.variant !== 'tick') {
-            return html ``;
-        }
-        const tickStep = this.tickStep || this.step;
-        const tickCount = (this.max - this.min) / tickStep;
-        const partialFit = tickCount % 1 !== 0;
-        const ticks = new Array(Math.floor(tickCount + 1));
-        ticks.fill(0, 0, tickCount + 1);
-        return html `
-            <div
-                class="${partialFit ? 'not-exact ' : ''}ticks"
-                style=${ifDefined(partialFit
-            ? `--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`
-            : undefined)}
-            >
-                ${ticks.map((_tick, i) => html `
-                        <div class="tick">
-                            ${this.tickLabels
-            ? html `
-                                      <div class="tickLabel">
-                                          ${i * tickStep}
-                                      </div>
-                                  `
-            : html ``}
-                        </div>
-                    `)}
-            </div>
-        `;
-    }
-    renderTrackSegment(start, end) {
-        if (this.variant === 'ramp') {
-            return html ``;
-        }
-        return html `
-            <div
-                class="track"
-                style=${styleMap(this.trackSegmentStyles(start, end))}
-                role="presentation"
-            ></div>
-        `;
-    }
-    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],
-        })}
-            >
-                <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 || _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();
-            }
-        }
-    }
-    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([
-    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

package/src/Slider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["Slider.ts"],"names":[],"mappings":"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","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';\n\nexport const variants = ['filled', 'ramp', 'range', 'tick'];\n\n/**\n * @element sp-slider\n *\n * @slot - text label for the Slider\n */\nexport class Slider extends ObserveSlotText(SliderHandle, '') {\n    public static get styles(): CSSResultArray {\n        return [sliderStyles];\n    }\n\n    public handleController: HandleController = new HandleController(this);\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 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 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 min = 0;\n\n    @property({ type: Number, reflect: true })\n    public max = 100;\n\n    @property({ type: Number })\n    public 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 disabled = 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 get numberFormat(): Intl.NumberFormat {\n        return this.getNumberFormat();\n    }\n\n    public 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 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                          @input=${this.handleNumberInput}\n                          @change=${this.handleNumberChange}\n                      ></sp-number-field>\n                  `\n                : html``}\n        `;\n    }\n\n    public connectedCallback(): void {\n        super.connectedCallback();\n        this.handleController.hostConnected();\n    }\n\n    public disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.handleController.hostDisconnected();\n    }\n\n    public update(changedProperties: Map<string, boolean>): void {\n        this.handleController.hostUpdate();\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}\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    }\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 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"]}

package/src/SliderHandle.d.ts

@@ -1,57 +0,0 @@
-import { PropertyValues } from '@spectrum-web-components/base';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { NumberFormatOptions, NumberFormatter } from '@internationalized/number';
-export declare type HandleMin = number | 'previous';
-export declare type HandleMax = number | 'next';
-export declare type HandleValues = {
-    name: string;
-    value: number;
-}[];
-export interface Controller {
-    inputForHandle(handle: SliderHandle): HTMLInputElement | undefined;
-    requestUpdate(): void;
-    setValueFromHandle(handle: SliderHandle): void;
-    handleHasChanged(handle: SliderHandle): void;
-}
-export declare type SliderNormalization = {
-    toNormalized: (value: number, min: number, max: number) => number;
-    fromNormalized: (value: number, min: number, max: number) => number;
-};
-export declare const defaultNormalization: SliderNormalization;
-/**
- * @element sp-slider-handle
- *
- * @fires input - The value of the element has changed.
- * @fires change - An alteration to the value of the element has been committed by the user.
- */
-export declare class SliderHandle extends Focusable {
-    handleController?: Controller;
-    get handleName(): string;
-    get focusElement(): HTMLElement;
-    _forcedUnit: string;
-    value: number;
-    dragging: boolean;
-    highlight: boolean;
-    name: string;
-    min?: number | 'previous';
-    max?: number | 'next';
-    private resolvedLanguage;
-    step?: number;
-    formatOptions?: NumberFormatOptions;
-    label: string;
-    getAriaHandleText: (value: number, numberFormat: NumberFormatter) => string;
-    protected update(changes: PropertyValues): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    normalization: SliderNormalization;
-    dispatchInputEvent(): void;
-    protected _numberFormatCache: {
-        numberFormat: NumberFormatter;
-        language: string;
-    } | undefined;
-    protected getNumberFormat(): Intl.NumberFormat;
-    get numberFormat(): NumberFormatter | undefined;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private resolveLanguage;
-}

package/src/SliderHandle.js

@@ -1,192 +0,0 @@
-/*
-Copyright 2021 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, __rest } from "tslib";
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { NumberFormatter, } from '@internationalized/number';
-export const defaultNormalization = {
-    toNormalized(value, min, max) {
-        return (value - min) / (max - min);
-    },
-    fromNormalized(value, min, max) {
-        return value * (max - min) + min;
-    },
-};
-const MinConverter = {
-    fromAttribute: (value) => {
-        if (value === 'previous')
-            return value;
-        return parseFloat(value);
-    },
-    toAttribute: (value) => {
-        return value.toString();
-    },
-};
-const MaxConverter = {
-    fromAttribute: (value) => {
-        if (value === 'next')
-            return value;
-        return parseFloat(value);
-    },
-    toAttribute: (value) => {
-        return value.toString();
-    },
-};
-/**
- * @element sp-slider-handle
- *
- * @fires input - The value of the element has changed.
- * @fires change - An alteration to the value of the element has been committed by the user.
- */
-export class SliderHandle extends Focusable {
-    constructor() {
-        super(...arguments);
-        this._forcedUnit = '';
-        this.value = 10;
-        this.dragging = false;
-        this.highlight = false;
-        this.name = '';
-        this.resolvedLanguage = document.documentElement.lang || navigator.language;
-        this.label = '';
-        this.getAriaHandleText = (value, numberFormat) => {
-            return numberFormat.format(value);
-        };
-        this.normalization = defaultNormalization;
-    }
-    get handleName() {
-        return this.name;
-    }
-    get focusElement() {
-        var _a, _b;
-        /* c8 ignore next */
-        return (_b = (_a = this.handleController) === null || _a === void 0 ? void 0 : _a.inputForHandle(this)) !== null && _b !== void 0 ? _b : this;
-    }
-    update(changes) {
-        if (changes.has('formatOptions') || changes.has('resolvedLanguage')) {
-            delete this._numberFormatCache;
-        }
-        super.update(changes);
-    }
-    updated(changedProperties) {
-        var _a, _b;
-        if (changedProperties.has('value')) {
-            const oldValue = changedProperties.get('value');
-            if (oldValue != null) {
-                (_a = this.handleController /* c8 ignore next */) === null || _a === void 0 ? void 0 : _a.setValueFromHandle(this);
-            }
-        }
-        (_b = this.handleController) === null || _b === void 0 ? void 0 : _b.handleHasChanged(this);
-        super.updated(changedProperties);
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.dispatchEvent(new CustomEvent('sp-slider-handle-ready'));
-    }
-    dispatchInputEvent() {
-        const inputEvent = new Event('input', {
-            bubbles: true,
-            composed: true,
-        });
-        this.dispatchEvent(inputEvent);
-    }
-    getNumberFormat() {
-        var _a;
-        /* c8 ignore next */
-        if (!this._numberFormatCache ||
-            this.resolvedLanguage !== this._numberFormatCache.language) {
-            let numberFormatter;
-            try {
-                numberFormatter = new NumberFormatter(this.resolvedLanguage, this.formatOptions);
-                this._forcedUnit = '';
-                // numberFormatter.format(1);
-            }
-            catch (error) {
-                const _b = this.formatOptions || {}, { style, unit, 
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                unitDisplay } = _b, formatOptionsNoUnit = __rest(_b, ["style", "unit", "unitDisplay"]);
-                if (style === 'unit') {
-                    this._forcedUnit = unit;
-                }
-                numberFormatter = new NumberFormatter(this.resolvedLanguage, formatOptionsNoUnit);
-            }
-            this._numberFormatCache = {
-                language: this.resolvedLanguage,
-                numberFormat: numberFormatter,
-            };
-        }
-        /* c8 ignore next */
-        return (_a = this._numberFormatCache) === null || _a === void 0 ? void 0 : _a.numberFormat;
-    }
-    get numberFormat() {
-        if (!this.formatOptions)
-            return;
-        return this.getNumberFormat();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.resolveLanguage();
-    }
-    disconnectedCallback() {
-        this.resolveLanguage();
-        super.disconnectedCallback();
-    }
-    resolveLanguage() {
-        const queryThemeEvent = new CustomEvent('sp-language-context', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                callback: (lang) => {
-                    this.resolvedLanguage = lang;
-                },
-            },
-            cancelable: true,
-        });
-        this.dispatchEvent(queryThemeEvent);
-    }
-}
-__decorate([
-    property({ type: Number })
-], SliderHandle.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SliderHandle.prototype, "dragging", void 0);
-__decorate([
-    property({ type: Boolean })
-], SliderHandle.prototype, "highlight", void 0);
-__decorate([
-    property({ type: String })
-], SliderHandle.prototype, "name", void 0);
-__decorate([
-    property({ reflect: true, converter: MinConverter })
-], SliderHandle.prototype, "min", void 0);
-__decorate([
-    property({ reflect: true, converter: MaxConverter })
-], SliderHandle.prototype, "max", void 0);
-__decorate([
-    property({ attribute: false })
-], SliderHandle.prototype, "resolvedLanguage", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], SliderHandle.prototype, "step", void 0);
-__decorate([
-    property({ type: Object, attribute: 'format-options' })
-], SliderHandle.prototype, "formatOptions", void 0);
-__decorate([
-    property({ type: String })
-], SliderHandle.prototype, "label", void 0);
-__decorate([
-    property({ attribute: false })
-], SliderHandle.prototype, "getAriaHandleText", void 0);
-__decorate([
-    property({ attribute: false })
-], SliderHandle.prototype, "normalization", void 0);
-//# sourceMappingURL=SliderHandle.js.map