@material/web 1.0.0-pre.6 → 1.0.0-pre.8

package/slider/lib/slider.d.ts

@@ -8,7 +8,6 @@ import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement, PropertyValues } from 'lit';
 import { getFormValue } from '../../controller/form-controller.js';
-import { MdRipple } from '../../ripple/ripple.js';
 /**
  * Slider component.
  */
@@ -18,7 +17,6 @@ export declare class Slider extends LitElement {
      * @nocollapse
      */
     static formAssociated: boolean;
-    ariaLabel: string;
     /**
      * Whether or not the slider is disabled.
      */
@@ -68,35 +66,21 @@ export declare class Slider extends LitElement {
      * single fraction or a tuple if the value specifies start and end values.
      */
     get valueAsFraction(): number | number[];
-    protected getMetrics(): {
-        step: number;
-        range: number;
-        lower: number;
-        upper: number;
-        lowerFraction: number;
-        upperFraction: number;
-    };
-    protected readonly inputA: HTMLInputElement;
-    protected readonly handleA: HTMLDivElement;
-    protected readonly rippleA: Promise<MdRipple | null>;
-    protected readonly inputB: HTMLInputElement;
-    protected readonly handleB: HTMLDivElement;
-    protected readonly rippleB: Promise<MdRipple | null>;
-    protected valueA: number;
-    protected valueB: number;
-    private focusRingAShowing;
-    private focusRingBShowing;
-    private focusRingARequested;
-    private focusRingBRequested;
+    private getMetrics;
+    private readonly inputA;
+    private readonly handleA;
+    private readonly rippleA;
+    private readonly inputB;
+    private readonly handleB;
+    private readonly rippleB;
+    private valueA;
+    private valueB;
     private rippleAShowing;
     private rippleBShowing;
     private handleAHover;
     private handleBHover;
-    private handleAPressed;
-    private handleBPressed;
     private onTopId;
     private handlesOverlapping;
-    private isInteracting;
     constructor();
     focus(): void;
     get valueAsString(): string;
@@ -106,36 +90,18 @@ export declare class Slider extends LitElement {
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): Promise<void>;
     protected render(): import("lit-html").TemplateResult<1>;
-    protected renderTrack(): import("lit-html").TemplateResult<1>;
-    protected renderFocusRing(visible: boolean): import("lit-html").TemplateResult<1>;
-    protected renderLabel(value: string): import("lit-html").TemplateResult<1>;
-    protected renderHandle({ id, lesser, showRipple, focusRequested, showFocus, hover, pressed, label }: {
-        id: string;
-        lesser: boolean;
-        focusRequested: boolean;
-        showRipple: boolean;
-        showFocus: boolean;
-        hover: boolean;
-        pressed: boolean;
-        label: string;
-    }): import("lit-html").TemplateResult<1>;
-    protected renderInput({ id, lesser, value, label, getRipple }: {
-        id: string;
-        lesser: boolean;
-        value: number;
-        label: string;
-        getRipple: () => Promise<MdRipple | null> | null;
-    }): import("lit-html").TemplateResult<1>;
-    protected renderRipple: (id: string) => import("lit-html").TemplateResult<1>;
+    private renderTrack;
+    private renderLabel;
+    private renderHandle;
+    private renderInput;
+    private readonly renderRipple;
     private readonly getRippleA;
     private readonly getRippleB;
     private toggleRippleHover;
-    protected isEventOnA({ target }: Event): boolean;
-    protected updateFocusVisible(e: Event): void;
-    protected handleFocus(e: Event): void;
-    protected handleBlur(e: Event): void;
-    protected handleDown(e: PointerEvent): void;
-    protected handleUp(e: PointerEvent): void;
+    private isEventOnA;
+    private handleFocus;
+    private ripplePointerId;
+    private handleDown;
     /**
      * The move handler tracks handle hovering to facilitate proper ripple
      * behavior on the slider handle. This is needed because user interaction with
@@ -149,10 +115,10 @@ export declare class Slider extends LitElement {
      * of the directive. This is done based on the hover state when the
      * slider is updated.
      */
-    protected handleMove(e: PointerEvent): void;
-    protected handleEnter(e: PointerEvent): void;
-    protected handleLeave(): void;
+    private handleMove;
+    private handleEnter;
+    private handleLeave;
     private updateOnTop;
-    protected handleInput(e: InputEvent): void;
-    protected handleChange(event: Event): void;
+    private handleInput;
+    private handleChange;
 }

package/slider/lib/slider.js

@@ -3,23 +3,21 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+var _a;
+import { __decorate } from "tslib";
 import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { html, LitElement, nothing } from 'lit';
+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 '../../aria/delegate.js';
 import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../controller/events.js';
 import { FormController, getFormValue } from '../../controller/form-controller.js';
 import { stringConverter } from '../../controller/string-converter.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
-import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
-// This is required for decorators.
-// tslint:disable:no-new-decorators
 // Disable warning for classMap with destructuring
 // tslint:disable:quoted-properties-on-dictionary
 function inBounds({ x, y }, element) {
@@ -128,12 +126,6 @@ export class Slider extends LitElement {
         this.name = '';
         this.valueA = 0;
         this.valueB = 0;
-        this.focusRingAShowing = false;
-        this.focusRingBShowing = false;
-        // allows for lazy rendering of the focus ring by latchin to true when the
-        // focus ring should be rendered.
-        this.focusRingARequested = false;
-        this.focusRingBRequested = false;
         this.rippleAShowing = false;
         this.rippleBShowing = false;
         // handle hover/pressed states are set manually since the handle
@@ -141,11 +133,8 @@ export class Slider extends LitElement {
         // interaction targets.
         this.handleAHover = false;
         this.handleBHover = false;
-        this.handleAPressed = false;
-        this.handleBPressed = false;
         this.onTopId = 'b';
         this.handlesOverlapping = false;
-        this.isInteracting = false;
         // If range should be allowed (detected via value format).
         this.allowRange = false;
         this.renderRipple = (id) => html `<md-ripple class=${id} ?disabled=${this.disabled} unbounded></md-ripple>`;
@@ -163,14 +152,18 @@ export class Slider extends LitElement {
             this.rippleBShowing = true;
             return this.rippleB;
         };
+        // used in synthetic events generated to control ripple hover state.
+        this.ripplePointerId = 1;
         this.addController(new FormController(this));
-        this.addEventListener('click', (event) => {
-            if (!isActivationClick(event)) {
-                return;
-            }
-            this.focus();
-            dispatchActivationClick(this.inputB);
-        });
+        if (!isServer) {
+            this.addEventListener('click', (event) => {
+                if (!isActivationClick(event) || !this.inputB) {
+                    return;
+                }
+                this.focus();
+                dispatchActivationClick(this.inputB);
+            });
+        }
     }
     focus() {
         this.inputB?.focus();
@@ -210,9 +203,6 @@ export class Slider extends LitElement {
             this.rippleBShowing = true;
             this.toggleRippleHover(this.rippleB, this.handleBHover);
         }
-        // facilitates lazy rendering of the focus ring.
-        this.focusRingARequested || (this.focusRingARequested = this.focusRingAShowing);
-        this.focusRingBRequested || (this.focusRingBRequested = this.focusRingBShowing);
     }
     async updated(changed) {
         if (changed.has('value') || changed.has('valueA') ||
@@ -226,15 +216,12 @@ export class Slider extends LitElement {
         const isFlipped = this.isFlipped();
         const containerStyles = {
             // for clipping inputs and active track.
-            '--lowerFraction': String(lowerFraction),
-            '--upperFraction': String(upperFraction),
+            '--slider-lower-fraction': String(lowerFraction),
+            '--slider-upper-fraction': String(upperFraction),
             // for generating tick marks
-            '--tickCount': String(range / step)
-        };
-        const containerClasses = {
-            interacting: this.isInteracting,
-            ranged: this.allowRange
+            '--slider-tick-count': String(range / step),
         };
+        const containerClasses = { ranged: this.allowRange };
         // optional label values to show in place of the value.
         const labelA = String(this.valueLabel?.[isFlipped ? 1 : 0] ?? this.valueA);
         const labelB = String((this.allowRange ? this.valueLabel?.[isFlipped ? 0 : 1] :
@@ -258,102 +245,87 @@ export class Slider extends LitElement {
             id: 'a',
             lesser: !isFlipped,
             showRipple: this.rippleAShowing,
-            focusRequested: this.focusRingARequested,
-            showFocus: this.focusRingAShowing,
             hover: this.handleAHover,
-            pressed: this.handleAPressed,
             label: labelA
         };
         const handleBProps = {
             id: 'b',
             lesser: isFlipped,
             showRipple: this.rippleBShowing,
-            focusRequested: this.focusRingBRequested,
-            showFocus: this.focusRingBShowing,
             hover: this.handleBHover,
-            pressed: this.handleBPressed,
             label: labelB
         };
         const handleContainerClasses = {
             hover: this.handleAHover || this.handleBHover
         };
         return html `
-    <div
-      class="container ${classMap(containerClasses)}"
-      style=${styleMap(containerStyles)}
-    >
-      ${when(this.allowRange, () => this.renderInput(inputAProps))}
-      ${this.renderInput(inputBProps)}
-      ${this.renderTrack()}
-      <div class="handleContainerPadded">
-        <div class="handleContainerBlock">
-          <div class="handleContainer ${classMap(handleContainerClasses)}">
-            ${when(this.allowRange, () => this.renderHandle(handleAProps))}
-            ${this.renderHandle(handleBProps)}
+      <div
+        class="container ${classMap(containerClasses)}"
+        style=${styleMap(containerStyles)}
+      >
+        ${when(this.allowRange, () => this.renderInput(inputAProps))}
+        ${this.renderInput(inputBProps)}
+        ${this.renderTrack()}
+        <div class="handleContainerPadded">
+          <div class="handleContainerBlock">
+            <div class="handleContainer ${classMap(handleContainerClasses)}">
+              ${when(this.allowRange, () => this.renderHandle(handleAProps))}
+              ${this.renderHandle(handleBProps)}
+            </div>
           </div>
         </div>
-      </div>
-    </div>`;
+      </div>`;
     }
     renderTrack() {
         const trackClasses = { 'tickMarks': this.withTickMarks };
-        return html `
-    <slot name="track">
-      <div class="track ${classMap(trackClasses)}"></div>
-    </slot>`;
-    }
-    renderFocusRing(visible) {
-        return html `<md-focus-ring .visible=${visible}></md-focus-ring>`;
+        return html `<div class="track ${classMap(trackClasses)}"></div>`;
     }
     renderLabel(value) {
         return html `<div class="label">
         <span class="labelContent" part="label">${value}</span>
       </div>`;
     }
-    renderHandle({ id, lesser, showRipple, focusRequested, showFocus, hover, pressed, label }) {
+    renderHandle({ id, lesser, showRipple, hover, label }) {
         const onTop = !this.disabled && id === this.onTopId;
         const isOverlapping = !this.disabled && this.handlesOverlapping;
         return html `<div class="handle ${classMap({
             [id]: true,
             lesser,
             hover,
-            pressed,
             onTop,
             isOverlapping
         })}">
-      <slot name="handle${this.allowRange ? (lesser ? 'Lesser' : 'Greater') : ''}">
         <div class="handleNub"><md-elevation></md-elevation></div>
         ${when(this.withLabel, () => this.renderLabel(label))}
-
-      </slot>
       ${when(showRipple, () => this.renderRipple(id))}
-      ${when(focusRequested, () => this.renderFocusRing(showFocus))}
+      <md-focus-ring for=${id}></md-focus-ring>
     </div>`;
     }
     renderInput({ id, lesser, value, label, getRipple }) {
         // when ranged, ensure announcement includes value info.
         const ariaLabelDescriptor = this.allowRange ? ` - ${lesser ? `start` : `end`} handle` : '';
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `<input type="range"
       class="${classMap({
             lesser,
             [id]: true
         })}"
       @focus=${this.handleFocus}
-      @blur=${this.handleBlur}
       @pointerdown=${this.handleDown}
-      @pointerup=${this.handleUp}
       @pointerenter=${this.handleEnter}
       @pointermove=${this.handleMove}
       @pointerleave=${this.handleLeave}
       @input=${this.handleInput}
       @change=${this.handleChange}
+      id=${id}
       .disabled=${this.disabled}
       .min=${String(this.min)}
       .max=${String(this.max)}
       .step=${String(this.step)}
       .value=${String(value)}
       .tabIndex=${lesser ? 1 : 0}
-      aria-label=${`${this.ariaLabel}${ariaLabelDescriptor}` || nothing}
+      aria-label=${`${ariaLabel}${ariaLabelDescriptor}` || nothing}
       aria-valuetext=${label}
       ${ripple(getRipple)}>`;
     }
@@ -364,48 +336,31 @@ export class Slider extends LitElement {
         }
         // TODO(b/269799771): improve slider ripple connection
         if (hovering) {
-            rippleEl.handlePointerenter(new PointerEvent('pointerenter', { isPrimary: true, pointerId: 1 }));
+            rippleEl.handlePointerenter(new PointerEvent('pointerenter', { isPrimary: true, pointerId: this.ripplePointerId }));
         }
         else {
-            rippleEl.handlePointerleave(new PointerEvent('pointerleave', { isPrimary: true, pointerId: 1 }));
+            rippleEl.handlePointerleave(new PointerEvent('pointerleave', { isPrimary: true, pointerId: this.ripplePointerId }));
         }
     }
     isEventOnA({ target }) {
         return target === this.inputA;
     }
-    updateFocusVisible(e) {
-        const isA = this.isEventOnA(e);
-        const showFocus = shouldShowStrongFocus();
-        this.focusRingAShowing = showFocus && isA;
-        this.focusRingBShowing = showFocus && !isA;
-    }
     handleFocus(e) {
-        this.updateFocusVisible(e);
         this.updateOnTop(e);
     }
-    handleBlur(e) {
-        this.focusRingAShowing = false;
-        this.focusRingBShowing = false;
-    }
     handleDown(e) {
-        pointerPress();
-        this.isInteracting = true;
+        this.ripplePointerId = e.pointerId;
         const isA = this.isEventOnA(e);
-        const isPrimaryButton = Boolean(e.buttons & 1);
         // Since handle moves to pointer on down and there may not be a move,
         // it needs to be considered hovered..
         this.handleAHover = !this.disabled && isA && Boolean(this.handleA);
-        this.handleAPressed = isPrimaryButton && this.handleAHover;
         this.handleBHover = !this.disabled && !isA && Boolean(this.handleB);
-        this.handleBPressed = isPrimaryButton && this.handleBHover;
-        this.updateFocusVisible(e);
-    }
-    handleUp(e) {
-        this.handleAPressed = this.handleBPressed = false;
-        // used to remove animations after interactions...
-        this.renderRoot.addEventListener('transitionend', () => {
-            this.isInteracting = false;
-        }, { once: true });
+        // Force Safari to focus input so the label stays displayed; note,
+        // Macs don't normally focus non-text type inputs.
+        const target = e.target;
+        requestAnimationFrame(() => {
+            target.focus();
+        });
     }
     /**
      * The move handler tracks handle hovering to facilitate proper ripple
@@ -440,7 +395,7 @@ export class Slider extends LitElement {
         }
         this.valueB = this.inputB.valueAsNumber;
         this.updateOnTop(e);
-        //  update value only on interaction
+        // update value only on interaction
         const lower = Math.min(this.valueA, this.valueB);
         const upper = Math.max(this.valueA, this.valueB);
         this.value = this.allowRange ? [lower, upper] : this.valueB;
@@ -449,127 +404,82 @@ export class Slider extends LitElement {
         redispatchEvent(this, event);
     }
 }
+_a = Slider;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 Slider.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 /**
  * @nocollapse
  */
 Slider.formAssociated = true;
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], Slider.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], Slider.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], Slider.prototype, "min", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], Slider.prototype, "max", void 0);
 __decorate([
-    property({ converter: valueConverter }),
-    __metadata("design:type", Object)
+    property({ converter: valueConverter })
 ], Slider.prototype, "value", void 0);
 __decorate([
-    property({ type: String, converter: tupleConverter }),
-    __metadata("design:type", Object)
+    property({ converter: tupleConverter })
 ], Slider.prototype, "valueLabel", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], Slider.prototype, "step", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Slider.prototype, "withTickMarks", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Slider.prototype, "withLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true, converter: stringConverter }),
-    __metadata("design:type", Object)
+    property({ reflect: true, converter: stringConverter })
 ], Slider.prototype, "name", void 0);
 __decorate([
-    query('input.a'),
-    __metadata("design:type", HTMLInputElement)
+    query('input.a')
 ], Slider.prototype, "inputA", void 0);
 __decorate([
-    query('.handle.a'),
-    __metadata("design:type", HTMLDivElement)
+    query('.handle.a')
 ], Slider.prototype, "handleA", void 0);
 __decorate([
-    queryAsync('md-ripple.a'),
-    __metadata("design:type", Promise)
+    queryAsync('md-ripple.a')
 ], Slider.prototype, "rippleA", void 0);
 __decorate([
-    query('input.b'),
-    __metadata("design:type", HTMLInputElement)
+    query('input.b')
 ], Slider.prototype, "inputB", void 0);
 __decorate([
-    query('.handle.b'),
-    __metadata("design:type", HTMLDivElement)
+    query('.handle.b')
 ], Slider.prototype, "handleB", void 0);
 __decorate([
-    queryAsync('md-ripple.b'),
-    __metadata("design:type", Promise)
+    queryAsync('md-ripple.b')
 ], Slider.prototype, "rippleB", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "valueA", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "valueB", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "focusRingAShowing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "focusRingBShowing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "rippleAShowing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "rippleBShowing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "handleAHover", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "handleBHover", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "handleAPressed", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "handleBPressed", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "onTopId", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "handlesOverlapping", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "isInteracting", void 0);
 //# sourceMappingURL=slider.js.map