@material/web 1.0.1 → 1.0.2-nightly.6a1fb38.0

package/slider/internal/slider.d.ts

@@ -7,18 +7,22 @@ import '../../elevation/elevation.js';
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement, PropertyValues } from 'lit';
+import { getFormValue } from '../../labs/behaviors/form-associated.js';
+declare const sliderBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>;
 /**
  * Slider component.
+ *
+ *
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
  */
-export declare class Slider extends LitElement {
+export declare class Slider extends sliderBaseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
-    /** @nocollapse */
-    static readonly formAssociated = true;
-    /**
-     * Whether or not the slider is disabled.
-     */
-    disabled: boolean;
     /**
      * The slider minimum value
      */
@@ -92,11 +96,6 @@ export declare class Slider extends LitElement {
      * slideable handles for the valueStart and valueEnd properties.
      */
     range: boolean;
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name(): string;
-    set name(name: string);
     /**
      * 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
@@ -111,14 +110,6 @@ export declare class Slider extends LitElement {
      */
     get nameEnd(): string;
     set nameEnd(name: string);
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * The labels this element is associated with.
-     */
-    get labels(): NodeList;
     private readonly inputStart;
     private readonly handleStart;
     private readonly rippleStart;
@@ -136,13 +127,11 @@ export declare class Slider extends LitElement {
     private get renderAriaLabelEnd();
     private get renderAriaValueTextEnd();
     private ripplePointerId;
-    private isRedisptchingEvent;
+    private isRedispatchingEvent;
     private action?;
-    private readonly internals;
     constructor();
     focus(): void;
     protected willUpdate(changed: PropertyValues): void;
-    protected update(changed: PropertyValues<Slider>): void;
     protected updated(changed: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
     private renderTrack;
@@ -180,8 +169,10 @@ export declare class Slider extends LitElement {
     private clampAction;
     private handleInput;
     private handleChange;
-    /** @private */
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string | FormData;
     formResetCallback(): void;
-    /** @private */
     formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
 }
+export {};

package/slider/internal/slider.js

@@ -13,22 +13,25 @@ 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';
+import { dispatchActivationClick, isActivationClick, redispatchEvent, } from '../../internal/controller/events.js';
+import { mixinElementInternals } from '../../labs/behaviors/element-internals.js';
+import { getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
 // Disable warning for classMap with destructuring
 // tslint:disable:no-implicit-dictionary-conversion
+// Separate variable needed for closure.
+const sliderBaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
 /**
  * Slider component.
+ *
+ *
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
  */
-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);
-    }
+export class Slider extends sliderBaseClass {
     /**
      * 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
@@ -51,29 +54,18 @@ export class Slider extends LitElement {
     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;
-    }
     // Note: start aria-* properties are only applied when range=true, which is
     // why they do not need to handle both cases.
     get renderAriaLabelStart() {
         // Needed for closure conformance
         const { ariaLabel } = this;
-        return this.ariaLabelStart || ariaLabel && `${ariaLabel} start` ||
-            this.valueLabelStart || String(this.valueStart);
+        return (this.ariaLabelStart ||
+            (ariaLabel && `${ariaLabel} start`) ||
+            this.valueLabelStart ||
+            String(this.valueStart));
     }
     get renderAriaValueTextStart() {
-        return this.ariaValueTextStart || this.valueLabelStart ||
-            String(this.valueStart);
+        return (this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart));
     }
     // Note: end aria-* properties are applied for single and range sliders, which
     // is why it needs to handle `this.range` (while start aria-* properties do
@@ -82,15 +74,16 @@ export class Slider extends LitElement {
         // Needed for closure conformance
         const { ariaLabel } = this;
         if (this.range) {
-            return this.ariaLabelEnd || ariaLabel && `${ariaLabel} end` ||
-                this.valueLabelEnd || String(this.valueEnd);
+            return (this.ariaLabelEnd ||
+                (ariaLabel && `${ariaLabel} end`) ||
+                this.valueLabelEnd ||
+                String(this.valueEnd));
         }
         return ariaLabel || this.valueLabel || String(this.value);
     }
     get renderAriaValueTextEnd() {
         if (this.range) {
-            return this.ariaValueTextEnd || this.valueLabelEnd ||
-                String(this.valueEnd);
+            return (this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd));
         }
         // Needed for conformance
         const { ariaValueText } = this;
@@ -98,10 +91,6 @@ export class Slider extends LitElement {
     }
     constructor() {
         super();
-        /**
-         * Whether or not the slider is disabled.
-         */
-        this.disabled = false;
         /**
          * The slider minimum value
          */
@@ -172,9 +161,8 @@ export class Slider extends LitElement {
         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();
+        // flag to prevent processing of re-dispatched input event.
+        this.isRedispatchingEvent = false;
         if (!isServer) {
             this.addEventListener('click', (event) => {
                 if (!isActivationClick(event) || !this.inputEnd) {
@@ -189,13 +177,15 @@ export class Slider extends LitElement {
         this.inputEnd?.focus();
     }
     willUpdate(changed) {
-        this.renderValueStart = changed.has('valueStart') ?
-            this.valueStart :
-            this.inputStart?.valueAsNumber;
+        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;
+        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) {
@@ -205,21 +195,6 @@ export class Slider extends LitElement {
             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
@@ -250,8 +225,10 @@ export class Slider extends LitElement {
         else {
             this.value ?? (this.value = this.renderValueEnd);
         }
-        if (changed.has('range') || changed.has('renderValueStart') ||
-            changed.has('renderValueEnd') || this.isUpdatePending) {
+        if (changed.has('range') ||
+            changed.has('renderValueStart') ||
+            changed.has('renderValueEnd') ||
+            this.isUpdatePending) {
             // Only check if the handle nubs are overlapping, as the ripple touch
             // target extends subtantially beyond the boundary of the handle nub.
             const startNub = this.handleStart?.querySelector('.handleNub');
@@ -265,9 +242,9 @@ export class Slider extends LitElement {
     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 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.
@@ -300,70 +277,72 @@ export class Slider extends LitElement {
         const handleStartProps = {
             start: true,
             hover: this.handleStartHover,
-            label: labelStart
+            label: labelStart,
         };
         const handleEndProps = {
             start: false,
             hover: this.handleEndHover,
-            label: labelEnd
+            label: labelEnd,
         };
         const handleContainerClasses = {
-            hover: this.handleStartHover || this.handleEndHover
+            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>
+        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>
+    </div>`;
     }
     renderTrack() {
         return html `
-        <div class="track"></div>
-        ${this.ticks ? html `<div class="tickmarks"></div>` : nothing}
-      `;
+      <div class="track"></div>
+      ${this.ticks ? html `<div class="tickmarks"></div>` : nothing}
+    `;
     }
     renderLabel(value) {
         return html `<div class="label" aria-hidden="true">
-        <span class="labelContent" part="label">${value}</span>
-      </div>`;
+      <span class="labelContent" part="label">${value}</span>
+    </div>`;
     }
-    renderHandle({ start, hover, label }) {
+    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({
+        return html `<div
+      class="handle ${classMap({
             [name]: true,
             hover,
             onTop,
-            isOverlapping
+            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>
+      <md-ripple
+        for=${name}
+        class=${name}
+        ?disabled=${this.disabled}></md-ripple>
     </div>`;
     }
-    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax }) {
+    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }) {
         // Slider requires min/max set to the overall min/max for both inputs.
         // This is reported to screen readers, which is why we need aria-valuemin
         // and aria-valuemax.
         const name = start ? `start` : `end`;
-        return html `<input type="range"
+        return html `<input
+      type="range"
       class="${classMap({
             start,
-            end: !start
+            end: !start,
         })}"
       @focus=${this.handleFocus}
       @pointerdown=${this.handleDown}
@@ -385,7 +364,7 @@ export class Slider extends LitElement {
       .value=${String(value)}
       .tabIndex=${start ? 1 : 0}
       aria-label=${ariaLabel || nothing}
-      aria-valuetext=${ariaValueText}>`;
+      aria-valuetext=${ariaValueText} />`;
     }
     async toggleRippleHover(ripple, hovering) {
         const rippleEl = await ripple;
@@ -394,10 +373,16 @@ export class Slider extends LitElement {
         }
         // TODO(b/269799771): improve slider ripple connection
         if (hovering) {
-            rippleEl.handlePointerenter(new PointerEvent('pointerenter', { isPrimary: true, pointerId: this.ripplePointerId }));
+            rippleEl.handlePointerenter(new PointerEvent('pointerenter', {
+                isPrimary: true,
+                pointerId: this.ripplePointerId,
+            }));
         }
         else {
-            rippleEl.handlePointerleave(new PointerEvent('pointerleave', { isPrimary: true, pointerId: this.ripplePointerId }));
+            rippleEl.handlePointerleave(new PointerEvent('pointerleave', {
+                isPrimary: true,
+                pointerId: this.ripplePointerId,
+            }));
         }
     }
     handleFocus(event) {
@@ -405,13 +390,16 @@ export class Slider extends LitElement {
     }
     startAction(event) {
         const target = event.target;
-        const fixed = (target === this.inputStart) ? this.inputEnd : this.inputStart;
+        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]])
+            values: new Map([
+                [target, target.valueAsNumber],
+                [fixed, fixed?.valueAsNumber],
+            ]),
         };
     }
     finishAction(event) {
@@ -486,8 +474,9 @@ export class Slider extends LitElement {
         }
         const { target, fixed } = this.action;
         const isStart = target === this.inputStart;
-        return isStart ? target.valueAsNumber > fixed.valueAsNumber :
-            target.valueAsNumber < fixed.valueAsNumber;
+        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
@@ -532,7 +521,7 @@ export class Slider extends LitElement {
     }
     handleInput(event) {
         // avoid processing a re-dispatched event
-        if (this.isRedisptchingEvent) {
+        if (this.isRedispatchingEvent) {
             return;
         }
         let stopPropagation = false;
@@ -563,9 +552,9 @@ export class Slider extends LitElement {
         }
         // ensure event path is correct when flipped.
         if (redispatch) {
-            this.isRedisptchingEvent = true;
+            this.isRedispatchingEvent = true;
             redispatchEvent(target, event);
-            this.isRedisptchingEvent = false;
+            this.isRedispatchingEvent = false;
         }
     }
     handleChange(event) {
@@ -573,14 +562,22 @@ export class Slider extends LitElement {
         // 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)));
+        const squelch = target && target.valueAsNumber === values.get(changeTarget);
         if (!squelch) {
             redispatchEvent(this, event);
         }
         // ensure keyboard triggered change clears action.
         this.finishAction(event);
     }
-    /** @private */
+    [getFormValue]() {
+        if (this.range) {
+            const data = new FormData();
+            data.append(this.nameStart, String(this.valueStart));
+            data.append(this.nameEnd, String(this.valueEnd));
+            return data;
+        }
+        return String(this.value);
+    }
     formResetCallback() {
         if (this.range) {
             const valueStart = this.getAttribute('value-start');
@@ -592,7 +589,6 @@ export class Slider extends LitElement {
         const value = this.getAttribute('value');
         this.value = value !== null ? Number(value) : undefined;
     }
-    /** @private */
     formStateRestoreCallback(state) {
         if (Array.isArray(state)) {
             const [[, valueStart], [, valueEnd]] = state;
@@ -609,12 +605,10 @@ export class Slider extends LitElement {
     requestUpdateOnAriaChange(Slider);
 })();
 /** @nocollapse */
-Slider.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-/** @nocollapse */
-Slider.formAssociated = true;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Slider.prototype, "disabled", void 0);
+Slider.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ type: Number })
 ], Slider.prototype, "min", void 0);
@@ -712,7 +706,9 @@ function isOverlapping(elA, elB) {
     }
     const a = elA.getBoundingClientRect();
     const b = elB.getBoundingClientRect();
-    return !(a.top > b.bottom || a.right < b.left || a.bottom < b.top ||
+    return !(a.top > b.bottom ||
+        a.right < b.left ||
+        a.bottom < b.top ||
         a.left > b.right);
 }
 //# sourceMappingURL=slider.js.map