@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/slider/internal/slider.js

@@ -0,0 +1,621 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query, queryAsync, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../internal/controller/events.js';
+// Disable warning for classMap with destructuring
+// tslint:disable:quoted-properties-on-dictionary
+/**
+ * Slider component.
+ */
+export class Slider extends LitElement {
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    /**
+     * The HTML name to use in form submission for a range slider's starting
+     * value. Use `name` instead if both the start and end values should use the
+     * same name.
+     */
+    get nameStart() {
+        return this.getAttribute('name-start') ?? this.name;
+    }
+    set nameStart(name) {
+        this.setAttribute('name-start', name);
+    }
+    /**
+     * The HTML name to use in form submission for a range slider's ending value.
+     * Use `name` instead if both the start and end values should use the same
+     * name.
+     */
+    get nameEnd() {
+        return this.getAttribute('name-end') ?? this.nameStart;
+    }
+    set nameEnd(name) {
+        this.setAttribute('name-end', name);
+    }
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this.internals.form;
+    }
+    /**
+     * The labels this element is associated with.
+     */
+    get labels() {
+        return this.internals.labels;
+    }
+    constructor() {
+        super();
+        /**
+         * Whether or not the slider is disabled.
+         */
+        this.disabled = false;
+        /**
+         * The slider minimum value
+         */
+        this.min = 0;
+        /**
+         * The slider maximum value
+         */
+        this.max = 100;
+        /**
+         * The step between values.
+         */
+        this.step = 1;
+        /**
+         * Whether or not to show tick marks.
+         */
+        this.ticks = false;
+        /**
+         * Whether or not to show a value label when activated.
+         */
+        this.labeled = false;
+        /**
+         * Whether or not to show a value range. When false, the slider displays
+         * a slideable handle for the value property; when true, it displays
+         * slideable handles for the valueStart and valueEnd properties.
+         */
+        this.range = false;
+        // handle hover/pressed states are set manually since the handle
+        // does not receive pointer events so that the native inputs are
+        // interaction targets.
+        this.handleStartHover = false;
+        this.handleEndHover = false;
+        this.startOnTop = false;
+        this.handlesOverlapping = false;
+        // used in synthetic events generated to control ripple hover state.
+        this.ripplePointerId = 1;
+        // flag to prvent processing of re-dispatched input event.
+        this.isRedisptchingEvent = false;
+        this.internals = this /* needed for closure */.attachInternals();
+        if (!isServer) {
+            this.addEventListener('click', (event) => {
+                if (!isActivationClick(event) || !this.inputEnd) {
+                    return;
+                }
+                this.focus();
+                dispatchActivationClick(this.inputEnd);
+            });
+        }
+    }
+    focus() {
+        this.inputEnd?.focus();
+    }
+    willUpdate(changed) {
+        this.renderValueStart = changed.has('valueStart') ?
+            this.valueStart :
+            this.inputStart?.valueAsNumber;
+        const endValueChanged = (changed.has('valueEnd') && this.range) || changed.has('value');
+        this.renderValueEnd = endValueChanged ?
+            (this.range ? this.valueEnd : this.value) :
+            this.inputEnd?.valueAsNumber;
+        // manually handle ripple hover state since the handle is pointer events
+        // none.
+        if (changed.get('handleStartHover') !== undefined) {
+            this.toggleRippleHover(this.rippleStart, this.handleStartHover);
+        }
+        else if (changed.get('handleEndHover') !== undefined) {
+            this.toggleRippleHover(this.rippleEnd, this.handleEndHover);
+        }
+    }
+    update(changed) {
+        if (changed.has('value') || changed.has('range') ||
+            changed.has('valueStart') || changed.has('valueEnd')) {
+            if (this.range) {
+                const data = new FormData();
+                data.append(this.nameStart, String(this.valueStart));
+                data.append(this.nameEnd, String(this.valueEnd));
+                this.internals.setFormValue(data);
+            }
+            else {
+                this.internals.setFormValue(String(this.value));
+            }
+        }
+        super.update(changed);
+    }
+    updated(changed) {
+        // Validate input rendered value and re-render if necessary. This ensures
+        // the rendred handle stays in sync with the input thumb which is used for
+        // interaction. These can get out of sync if a supplied value does not
+        // map to an exactly stepped value between min and max.
+        if (this.range) {
+            this.renderValueStart = this.inputStart.valueAsNumber;
+        }
+        this.renderValueEnd = this.inputEnd.valueAsNumber;
+        // update values if they are unset
+        // when using a range, default to equi-distant between
+        // min - valueStart - valueEnd - max
+        if (this.range) {
+            const segment = (this.max - this.min) / 3;
+            if (this.valueStart === undefined) {
+                this.inputStart.valueAsNumber = this.min + segment;
+                // read actual value from input
+                const v = this.inputStart.valueAsNumber;
+                this.valueStart = this.renderValueStart = v;
+            }
+            if (this.valueEnd === undefined) {
+                this.inputEnd.valueAsNumber = this.min + 2 * segment;
+                // read actual value from input
+                const v = this.inputEnd.valueAsNumber;
+                this.valueEnd = this.renderValueEnd = v;
+            }
+        }
+        else {
+            this.value ?? (this.value = this.renderValueEnd);
+        }
+        if (changed.has('range') || changed.has('renderValueStart') ||
+            changed.has('renderValueEnd') || this.isUpdatePending) {
+            this.handlesOverlapping = isOverlapping(this.handleStart, this.handleEnd);
+        }
+        // called to finish the update imediately;
+        // note, this is a no-op unless an update is scheduled
+        this.performUpdate();
+    }
+    render() {
+        const step = this.step === 0 ? 1 : this.step;
+        const range = Math.max(this.max - this.min, step);
+        const startFraction = this.range ?
+            (((this.renderValueStart ?? this.min) - this.min) / range) :
+            0;
+        const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
+        const containerStyles = {
+            // for clipping inputs and active track.
+            '--slider-start-fraction': String(startFraction),
+            '--slider-end-fraction': String(endFraction),
+            // for generating tick marks
+            '--slider-tick-count': String(range / step),
+        };
+        const containerClasses = { ranged: this.range };
+        // optional label values to show in place of the value.
+        const labelStart = this.valueLabelStart ?? String(this.renderValueStart);
+        const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) ??
+            String(this.renderValueEnd);
+        const inputStartProps = {
+            start: true,
+            value: this.renderValueStart,
+            label: labelStart
+        };
+        const inputEndProps = {
+            start: false,
+            value: this.renderValueEnd,
+            label: labelEnd
+        };
+        const handleStartProps = {
+            start: true,
+            hover: this.handleStartHover,
+            label: labelStart
+        };
+        const handleEndProps = {
+            start: false,
+            hover: this.handleEndHover,
+            label: labelEnd
+        };
+        const handleContainerClasses = {
+            hover: this.handleStartHover || this.handleEndHover
+        };
+        return html `
+      <div
+        class="container ${classMap(containerClasses)}"
+        style=${styleMap(containerStyles)}
+      >
+        ${when(this.range, () => this.renderInput(inputStartProps))}
+        ${this.renderInput(inputEndProps)}
+        ${this.renderTrack()}
+        <div class="handleContainerPadded">
+          <div class="handleContainerBlock">
+            <div class="handleContainer ${classMap(handleContainerClasses)}">
+              ${when(this.range, () => this.renderHandle(handleStartProps))}
+              ${this.renderHandle(handleEndProps)}
+            </div>
+          </div>
+        </div>
+      </div>`;
+    }
+    renderTrack() {
+        const trackClasses = { 'tickmarks': this.ticks };
+        return html `<div class="track ${classMap(trackClasses)}"></div>`;
+    }
+    renderLabel(value) {
+        return html `<div class="label">
+        <span class="labelContent" part="label">${value}</span>
+      </div>`;
+    }
+    renderHandle({ start, hover, label }) {
+        const onTop = !this.disabled && start === this.startOnTop;
+        const isOverlapping = !this.disabled && this.handlesOverlapping;
+        const name = start ? 'start' : 'end';
+        return html `<div class="handle ${classMap({
+            [name]: true,
+            hover,
+            onTop,
+            isOverlapping
+        })}">
+      <div class="handleNub"><md-elevation></md-elevation></div>
+      ${when(this.labeled, () => this.renderLabel(label))}
+      <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
+      <md-ripple for=${name} class=${name} ?disabled=${this.disabled}></md-ripple>
+    </div>`;
+    }
+    renderInput({ start, value, label }) {
+        const name = start ? `start` : `end`;
+        // when ranged, ensure announcement includes value info.
+        // Needed for closure conformance
+        let { ariaLabel } = this;
+        const { range, ariaLabelStart, ariaLabelEnd } = this;
+        if (range) {
+            ariaLabel = (start ? ariaLabelStart : ariaLabelEnd) ?? null;
+        }
+        return html `<input type="range"
+      class="${classMap({
+            start,
+            end: !start
+        })}"
+      @focus=${this.handleFocus}
+      @pointerdown=${this.handleDown}
+      @pointerup=${this.handleUp}
+      @pointerenter=${this.handleEnter}
+      @pointermove=${this.handleMove}
+      @pointerleave=${this.handleLeave}
+      @keydown=${this.handleKeydown}
+      @keyup=${this.handleKeyup}
+      @input=${this.handleInput}
+      @change=${this.handleChange}
+      id=${name}
+      .disabled=${this.disabled}
+      .min=${String(this.min)}
+      .max=${String(this.max)}
+      .step=${String(this.step)}
+      .value=${String(value)}
+      .tabIndex=${start ? 1 : 0}
+      aria-label=${ariaLabel || nothing}
+      aria-valuetext=${label}>`;
+    }
+    async toggleRippleHover(ripple, hovering) {
+        const rippleEl = await ripple;
+        if (!rippleEl) {
+            return;
+        }
+        // TODO(b/269799771): improve slider ripple connection
+        if (hovering) {
+            rippleEl.handlePointerenter(new PointerEvent('pointerenter', { isPrimary: true, pointerId: this.ripplePointerId }));
+        }
+        else {
+            rippleEl.handlePointerleave(new PointerEvent('pointerleave', { isPrimary: true, pointerId: this.ripplePointerId }));
+        }
+    }
+    handleFocus(event) {
+        this.updateOnTop(event.target);
+    }
+    startAction(event) {
+        const target = event.target;
+        const fixed = (target === this.inputStart) ? this.inputEnd : this.inputStart;
+        this.action = {
+            canFlip: event.type === 'pointerdown',
+            flipped: false,
+            target,
+            fixed,
+            values: new Map([[target, target.valueAsNumber], [fixed, fixed?.valueAsNumber]])
+        };
+    }
+    finishAction(event) {
+        this.action = undefined;
+    }
+    handleKeydown(event) {
+        this.startAction(event);
+    }
+    handleKeyup(event) {
+        this.finishAction(event);
+    }
+    handleDown(event) {
+        this.startAction(event);
+        this.ripplePointerId = event.pointerId;
+        const isStart = event.target === this.inputStart;
+        // Since handle moves to pointer on down and there may not be a move,
+        // it needs to be considered hovered..
+        this.handleStartHover =
+            !this.disabled && isStart && Boolean(this.handleStart);
+        this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd);
+    }
+    async handleUp(event) {
+        const { target, values, flipped } = this.action ?? {};
+        //  Async here for Firefox because input can be after pointerup
+        //  when value is calmped.
+        await new Promise(requestAnimationFrame);
+        if (target !== undefined) {
+            // Ensure Safari focuses input so label renders.
+            // Ensure any flipped input is focused so the tab order is right.
+            target.focus();
+            // When action is flipped, change must be fired manually since the
+            // real event target did not change.
+            if (flipped && target.valueAsNumber !== values.get(target)) {
+                target.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        }
+        this.finishAction(event);
+    }
+    /**
+     * The move handler tracks handle hovering to facilitate proper ripple
+     * behavior on the slider handle. This is needed because user interaction with
+     * the native input is leveraged to position the handle. Because the separate
+     * displayed handle element has pointer events disabled (to allow interaction
+     * with the input) and the input's handle is a pseudo-element, neither can be
+     * the ripple's interactive element. Therefore the input is the ripple's
+     * interactive element and has a `ripple` directive; however the ripple
+     * is gated on the handle being hovered. In addition, because the ripple
+     * hover state is being specially handled, it must be triggered independent
+     * of the directive. This is done based on the hover state when the
+     * slider is updated.
+     */
+    handleMove(event) {
+        this.handleStartHover = !this.disabled && inBounds(event, this.handleStart);
+        this.handleEndHover = !this.disabled && inBounds(event, this.handleEnd);
+    }
+    handleEnter(event) {
+        this.handleMove(event);
+    }
+    handleLeave() {
+        this.handleStartHover = false;
+        this.handleEndHover = false;
+    }
+    updateOnTop(input) {
+        this.startOnTop = input.classList.contains('start');
+    }
+    needsClamping() {
+        const { target, fixed } = this.action;
+        const isStart = target === this.inputStart;
+        return isStart ? target.valueAsNumber > fixed.valueAsNumber :
+            target.valueAsNumber < fixed.valueAsNumber;
+    }
+    // if start/end start coincident and the first drag input would e.g. move
+    // start > end, avoid clamping and "flip" to use the other input
+    // as the action target.
+    isActionFlipped() {
+        const action = this.action;
+        const { target, fixed, values } = action;
+        if (action.canFlip) {
+            const coincident = values.get(target) === values.get(fixed);
+            if (coincident && this.needsClamping()) {
+                action.canFlip = false;
+                action.flipped = true;
+                action.target = fixed;
+                action.fixed = target;
+            }
+        }
+        return action.flipped;
+    }
+    // when flipped, apply the drag input to the flipped target and reset
+    // the actual target.
+    flipAction() {
+        const { target, fixed, values } = this.action;
+        const changed = target.valueAsNumber !== fixed.valueAsNumber;
+        target.valueAsNumber = fixed.valueAsNumber;
+        fixed.valueAsNumber = values.get(fixed);
+        return changed;
+    }
+    // clamp such that start does not move beyond end and visa versa.
+    clampAction() {
+        if (!this.needsClamping()) {
+            return false;
+        }
+        const { target, fixed } = this.action;
+        target.valueAsNumber = fixed.valueAsNumber;
+        return true;
+    }
+    handleInput(event) {
+        // avoid processing a re-dispatched event
+        if (this.isRedisptchingEvent) {
+            return;
+        }
+        let stopPropagation = false, redispatch = false;
+        if (this.range) {
+            if (this.isActionFlipped()) {
+                stopPropagation = true;
+                redispatch = this.flipAction();
+            }
+            if (this.clampAction()) {
+                stopPropagation = true;
+                redispatch = false;
+            }
+        }
+        const { target } = this.action;
+        this.updateOnTop(target);
+        // update value only on interaction
+        if (this.range) {
+            this.valueStart = this.inputStart.valueAsNumber;
+            this.valueEnd = this.inputEnd.valueAsNumber;
+        }
+        else {
+            this.value = this.inputEnd.valueAsNumber;
+        }
+        // control external visibility of input event
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        // ensure event path is correct when flipped.
+        if (redispatch) {
+            this.isRedisptchingEvent = true;
+            redispatchEvent(target, event);
+            this.isRedisptchingEvent = false;
+        }
+    }
+    handleChange(event) {
+        // prevent keyboard triggered changes from dispatching for
+        // clamped values; note, this only occurs for keyboard
+        const changeTarget = event.target;
+        const { target, values } = this.action ?? {};
+        const squelch = (target && (target.valueAsNumber === values.get(changeTarget)));
+        if (!squelch) {
+            redispatchEvent(this, event);
+        }
+        // ensure keyboard triggered change clears action.
+        this.finishAction(event);
+    }
+    /** @private */
+    formResetCallback() {
+        if (this.range) {
+            const valueStart = this.getAttribute('value-start');
+            this.valueStart = valueStart !== null ? Number(valueStart) : undefined;
+            const valueEnd = this.getAttribute('value-end');
+            this.valueEnd = valueEnd !== null ? Number(valueEnd) : undefined;
+            return;
+        }
+        const value = this.getAttribute('value');
+        this.value = value !== null ? Number(value) : undefined;
+    }
+    /** @private */
+    formStateRestoreCallback(state) {
+        if (Array.isArray(state)) {
+            const [[, valueStart], [, valueEnd]] = state;
+            this.valueStart = Number(valueStart);
+            this.valueEnd = Number(valueEnd);
+            this.range = true;
+            return;
+        }
+        this.value = Number(state);
+        this.range = false;
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Slider);
+})();
+/** @nocollapse */
+Slider.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+/** @nocollapse */
+Slider.formAssociated = true;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Slider.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-start' })
+], Slider.prototype, "valueStart", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-end' })
+], Slider.prototype, "valueEnd", void 0);
+__decorate([
+    property({ attribute: 'value-label' })
+], Slider.prototype, "valueLabel", void 0);
+__decorate([
+    property({ attribute: 'value-label-start' })
+], Slider.prototype, "valueLabelStart", void 0);
+__decorate([
+    property({ attribute: 'value-label-end' })
+], Slider.prototype, "valueLabelEnd", void 0);
+__decorate([
+    property({ attribute: 'aria-label-start' })
+], Slider.prototype, "ariaLabelStart", void 0);
+__decorate([
+    property({ attribute: 'aria-label-end' })
+], Slider.prototype, "ariaLabelEnd", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "ticks", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "labeled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "range", void 0);
+__decorate([
+    query('input.start')
+], Slider.prototype, "inputStart", void 0);
+__decorate([
+    query('.handle.start')
+], Slider.prototype, "handleStart", void 0);
+__decorate([
+    queryAsync('md-ripple.start')
+], Slider.prototype, "rippleStart", void 0);
+__decorate([
+    query('input.end')
+], Slider.prototype, "inputEnd", void 0);
+__decorate([
+    query('.handle.end')
+], Slider.prototype, "handleEnd", void 0);
+__decorate([
+    queryAsync('md-ripple.end')
+], Slider.prototype, "rippleEnd", void 0);
+__decorate([
+    state()
+], Slider.prototype, "handleStartHover", void 0);
+__decorate([
+    state()
+], Slider.prototype, "handleEndHover", void 0);
+__decorate([
+    state()
+], Slider.prototype, "startOnTop", void 0);
+__decorate([
+    state()
+], Slider.prototype, "handlesOverlapping", void 0);
+__decorate([
+    state()
+], Slider.prototype, "renderValueStart", void 0);
+__decorate([
+    state()
+], Slider.prototype, "renderValueEnd", void 0);
+function inBounds({ x, y }, element) {
+    if (!element) {
+        return false;
+    }
+    const { top, left, bottom, right } = element.getBoundingClientRect();
+    return x >= left && x <= right && y >= top && y <= bottom;
+}
+function isOverlapping(elA, elB) {
+    if (!(elA && elB)) {
+        return false;
+    }
+    const a = elA.getBoundingClientRect();
+    const b = elB.getBoundingClientRect();
+    return !(a.top > b.bottom || a.right < b.left || a.bottom < b.top ||
+        a.left > b.right);
+}
+//# sourceMappingURL=slider.js.map