@material/web 0.1.0-alpha.0

package/compat/touchtarget/_touch-target.scss

@@ -0,0 +1,56 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:math';
+
+$height: 48px !default;
+$width: $height !default;
+
+/// Styles applied to the component's inner touch target element.
+/// By default, only sets the inner element height to the minimum touch target
+/// height ($mdc-touch-target-height).
+/// @param {Boolean} $set-width [false] - Sets the inner element width to the
+///     minimum touch target width ($mdc-touch-target-width).
+/// @param $height [$mdc-touch-target-height] - Touch target height.
+/// @param $width [$mdc-touch-target-width] - Touch target width.
+@mixin touch-target($set-width: false, $height: $height, $width: $width) {
+  position: absolute;
+  top: 50%;
+  height: $height;
+  @if $set-width {
+    /* @noflip */ /*rtl:ignore*/
+    left: 50%;
+    width: $width;
+    transform: translate(-50%, -50%);
+  } @else {
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+  }
+}
+
+/// Applies margin to the component with the increased touch target,
+/// to compensate for the touch target.
+@mixin margin(
+  $component-height,
+  $component-width: null,
+  $touch-target-height: $height,
+  $touch-target-width: $width
+) {
+  $vertical-margin-value: math.div($touch-target-height - $component-height, 2);
+
+  margin-top: $vertical-margin-value;
+  margin-bottom: $vertical-margin-value;
+
+  @if $component-width {
+    $horizontal-margin-value: math.div(
+      $touch-target-width - $component-width,
+      2
+    );
+
+    margin-right: $horizontal-margin-value;
+    margin-left: $horizontal-margin-value;
+  }
+}

package/controller/action-controller.d.ts

@@ -0,0 +1,147 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Delay time from touchstart to when element#beginPress is invoked.
+ */
+export declare const TOUCH_DELAY_MS = 150;
+/**
+ * Delay time from beginning to wait for synthetic mouse events till giving up.
+ */
+export declare const WAIT_FOR_MOUSE_CLICK_MS = 500;
+/**
+ * Interface for argument to beginPress.
+ */
+export interface BeginPressConfig {
+    /**
+     * Event that was recorded at the start of the interaction.
+     * `null` if the press happened via keyboard.
+     */
+    positionEvent: Event | null;
+}
+/**
+ * Interface for argument to endPress.
+ */
+export interface EndPressConfig {
+    /**
+     * `true` if the press was cancelled.
+     */
+    cancelled: boolean;
+    /**
+     * Data object to pass along to clients in the `action` event, if relevant.
+     */
+    actionData?: {};
+}
+/**
+ * The necessary interface for using an ActionController
+ */
+export interface ActionControllerHost extends ReactiveControllerHost, HTMLElement {
+    disabled: boolean;
+    /**
+     * Determines if pointerdown or click events containing modifier keys should
+     * be ignored.
+     */
+    ignoreClicksWithModifiers?: boolean;
+    /**
+     * Called when a user interaction is determined to be a press.
+     */
+    beginPress(config: BeginPressConfig): void;
+    /**
+     * Called when a press ends or is cancelled.
+     */
+    endPress(config: EndPressConfig): void;
+}
+/**
+ * ActionController normalizes user interaction on components and distills it
+ * into calling `beginPress` and `endPress` on the component.
+ *
+ * `beginPress` is a good hook to affect visuals for pressed state, including
+ * ripple.
+ *
+ * `endPress` is a good hook for firing events based on user interaction, and
+ * cleaning up the pressed visual state.
+ *
+ * A component using an ActionController need only implement the ActionElement
+ * interface and add the ActionController's event listeners to understand user
+ * interaction.
+ */
+export declare class ActionController implements ReactiveController {
+    private readonly element;
+    constructor(element: ActionControllerHost);
+    private get disabled();
+    private get ignoreClicksWithModifiers();
+    private phase;
+    private touchTimer;
+    private clickTimer;
+    private lastPositionEvent;
+    private pressed;
+    private checkBoundsAfterContextMenu;
+    private setPhase;
+    /**
+     * Calls beginPress and then endPress. Allows us to programmatically click
+     * on the element.
+     */
+    private press;
+    /**
+     * Call `beginPress` on element with triggering event, if applicable.
+     */
+    private beginPress;
+    /**
+     * Call `endPress` on element, and clean up timers.
+     */
+    private endPress;
+    private cleanup;
+    /**
+     * Call `endPress` with cancelled state on element, and cleanup timers.
+     */
+    private cancelPress;
+    private isTouch;
+    private touchDelayFinished;
+    private waitForClick;
+    /**
+     * Check if event should trigger actions on the element.
+     */
+    private shouldRespondToEvent;
+    /**
+     * Check if the event is within the bounds of the element.
+     *
+     * This is only needed for the "stuck" contextmenu longpress on Chrome.
+     */
+    private inBounds;
+    private eventHasModifiers;
+    /**
+     * Cancel interactions if the element is removed from the DOM.
+     */
+    hostDisconnected(): void;
+    /**
+     * If the element becomes disabled, cancel interactions.
+     */
+    hostUpdated(): void;
+    /**
+     * Pointer down event handler.
+     */
+    pointerDown: (e: PointerEvent) => void;
+    /**
+     * Pointer up event handler.
+     */
+    pointerUp: (e: PointerEvent) => void;
+    /**
+     * Click event handler.
+     */
+    click: (e: MouseEvent) => void;
+    /**
+     * Pointer leave event handler.
+     */
+    pointerLeave: (e: PointerEvent) => void;
+    /**
+     * Pointer cancel event handler.
+     */
+    pointerCancel: (e: PointerEvent) => void;
+    /**
+     * Contextmenu event handler.
+     */
+    contextMenu: () => void;
+}

package/controller/action-controller.js

@@ -0,0 +1,286 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Enumeration to keep track of the lifecycle of a touch event.
+ */
+// State transition diagram:
+//     +-----------------------------+
+//     |                             v
+//     |    +------+------ WAITING_FOR_MOUSE_CLICK<----+
+//     |    |      |                ^                  |
+//     |    V      |                |                  |
+// => INACTIVE -> TOUCH_DELAY -> RELEASING          HOLDING
+//                 |                                   ^
+//                 |                                   |
+//                 +-----------------------------------+
+var Phase;
+(function (Phase) {
+    // Initial state of the control, no touch in progress.
+    // Transitions:
+    //     on touch down: transition to TOUCH_DELAY.
+    //     on mouse down: transition to WAITING_FOR_MOUSE_CLICK.
+    Phase["INACTIVE"] = "INACTIVE";
+    // Touch down has been received, waiting to determine if it's a swipe.
+    // Transitions:
+    //     on touch up: beginPress(); transition to RELEASING.
+    //     on cancel: transition to INACTIVE.
+    //     after TOUCH_DELAY_MS: beginPress(); transition to HOLDING.
+    Phase["TOUCH_DELAY"] = "TOUCH_DELAY";
+    // A touch has been deemed to be a press
+    // Transitions:
+    //     on pointerup: endPress(); transition to WAITING_FOR_MOUSE_CLICK.
+    Phase["HOLDING"] = "HOLDING";
+    // The user has released the mouse / touch, but we want to delay calling
+    // endPress for a little bit to avoid double clicks.
+    // Transitions:
+    //    mouse sequence after debounceDelay: endPress(); transition to INACTIVE
+    //    when in touch sequence: transitions directly to WAITING_FOR_MOUSE_CLICK
+    Phase["RELEASING"] = "RELEASING";
+    // The user has touched, but we want to delay endPress until synthetic mouse
+    // click event occurs. Stay in this state for a fixed amount of time before
+    // giving up and transitioning into rest state.
+    // Transitions:
+    //     on click: endPress(); transition to INACTIVE.
+    //     after WAIT_FOR_MOUSE_CLICK_MS: transition to INACTIVE.
+    Phase["WAITING_FOR_MOUSE_CLICK"] = "WAITING_FOR_MOUSE_CLICK";
+})(Phase || (Phase = {}));
+/**
+ * Delay time from touchstart to when element#beginPress is invoked.
+ */
+export const TOUCH_DELAY_MS = 150;
+/**
+ * Delay time from beginning to wait for synthetic mouse events till giving up.
+ */
+export const WAIT_FOR_MOUSE_CLICK_MS = 500;
+/**
+ * ActionController normalizes user interaction on components and distills it
+ * into calling `beginPress` and `endPress` on the component.
+ *
+ * `beginPress` is a good hook to affect visuals for pressed state, including
+ * ripple.
+ *
+ * `endPress` is a good hook for firing events based on user interaction, and
+ * cleaning up the pressed visual state.
+ *
+ * A component using an ActionController need only implement the ActionElement
+ * interface and add the ActionController's event listeners to understand user
+ * interaction.
+ */
+export class ActionController {
+    constructor(element) {
+        this.element = element;
+        this.phase = Phase.INACTIVE;
+        this.touchTimer = null;
+        this.clickTimer = null;
+        this.lastPositionEvent = null;
+        this.pressed = false;
+        this.checkBoundsAfterContextMenu = false;
+        // event listeners
+        /**
+         * Pointer down event handler.
+         */
+        this.pointerDown = (e) => {
+            if (!this.shouldRespondToEvent(e) || this.phase !== Phase.INACTIVE) {
+                return;
+            }
+            if (this.isTouch(e)) {
+                // after a longpress contextmenu event, an extra `pointerdown` can be
+                // dispatched to the pressed element. Check that the down is within
+                // bounds of the element in this case.
+                if (this.checkBoundsAfterContextMenu && !this.inBounds(e)) {
+                    return;
+                }
+                this.checkBoundsAfterContextMenu = false;
+                this.lastPositionEvent = e;
+                this.setPhase(Phase.TOUCH_DELAY);
+                this.touchTimer = setTimeout(() => {
+                    this.touchDelayFinished();
+                }, TOUCH_DELAY_MS);
+            }
+            else {
+                const leftButtonPressed = e.button === 0;
+                if (!leftButtonPressed ||
+                    (this.ignoreClicksWithModifiers && this.eventHasModifiers(e))) {
+                    return;
+                }
+                this.setPhase(Phase.WAITING_FOR_MOUSE_CLICK);
+                this.beginPress(e);
+            }
+        };
+        /**
+         * Pointer up event handler.
+         */
+        this.pointerUp = (e) => {
+            if (!this.isTouch(e) || !this.shouldRespondToEvent(e)) {
+                return;
+            }
+            if (this.phase === Phase.HOLDING) {
+                this.waitForClick();
+            }
+            else if (this.phase === Phase.TOUCH_DELAY) {
+                this.setPhase(Phase.RELEASING);
+                this.beginPress();
+                this.waitForClick();
+            }
+        };
+        /**
+         * Click event handler.
+         */
+        this.click = (e) => {
+            if (this.disabled ||
+                (this.ignoreClicksWithModifiers && this.eventHasModifiers(e))) {
+                return;
+            }
+            if (this.phase === Phase.WAITING_FOR_MOUSE_CLICK) {
+                this.endPress();
+                this.setPhase(Phase.INACTIVE);
+                return;
+            }
+            // keyboard synthesized click event
+            if (this.phase === Phase.INACTIVE && !this.pressed) {
+                this.press();
+            }
+        };
+        /**
+         * Pointer leave event handler.
+         */
+        this.pointerLeave = (e) => {
+            // cancel a held press that moves outside the element
+            if (this.shouldRespondToEvent(e) && !this.isTouch(e) && this.pressed) {
+                this.cancelPress();
+            }
+        };
+        /**
+         * Pointer cancel event handler.
+         */
+        this.pointerCancel = (e) => {
+            if (this.shouldRespondToEvent(e)) {
+                this.cancelPress();
+            }
+        };
+        /**
+         * Contextmenu event handler.
+         */
+        this.contextMenu = () => {
+            if (!this.disabled) {
+                this.checkBoundsAfterContextMenu = true;
+                this.cancelPress();
+            }
+        };
+        this.element.addController(this);
+    }
+    get disabled() {
+        return this.element.disabled;
+    }
+    get ignoreClicksWithModifiers() {
+        return this.element.ignoreClicksWithModifiers ?? false;
+    }
+    setPhase(newPhase) {
+        this.phase = newPhase;
+    }
+    /**
+     * Calls beginPress and then endPress. Allows us to programmatically click
+     * on the element.
+     */
+    press() {
+        this.beginPress(/* positionEvent= */ null);
+        this.setPhase(Phase.INACTIVE);
+        this.endPress();
+    }
+    /**
+     * Call `beginPress` on element with triggering event, if applicable.
+     */
+    beginPress(positionEvent = this.lastPositionEvent) {
+        this.pressed = true;
+        this.element.beginPress({ positionEvent });
+    }
+    /**
+     * Call `endPress` on element, and clean up timers.
+     */
+    endPress() {
+        this.pressed = false;
+        this.element.endPress({ cancelled: false });
+        this.cleanup();
+    }
+    cleanup() {
+        if (this.touchTimer) {
+            clearTimeout(this.touchTimer);
+        }
+        this.touchTimer = null;
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+        }
+        this.clickTimer = null;
+        this.lastPositionEvent = null;
+    }
+    /**
+     * Call `endPress` with cancelled state on element, and cleanup timers.
+     */
+    cancelPress() {
+        this.pressed = false;
+        this.cleanup();
+        if (this.phase === Phase.TOUCH_DELAY) {
+            this.setPhase(Phase.INACTIVE);
+        }
+        else if (this.phase !== Phase.INACTIVE) {
+            this.setPhase(Phase.INACTIVE);
+            this.element.endPress({ cancelled: true });
+        }
+    }
+    isTouch(e) {
+        return e.pointerType === 'touch';
+    }
+    touchDelayFinished() {
+        if (this.phase !== Phase.TOUCH_DELAY) {
+            return;
+        }
+        this.setPhase(Phase.HOLDING);
+        this.beginPress();
+    }
+    waitForClick() {
+        this.setPhase(Phase.WAITING_FOR_MOUSE_CLICK);
+        this.clickTimer = setTimeout(() => {
+            // If a click event does not occur, clean up the interaction state.
+            if (this.phase === Phase.WAITING_FOR_MOUSE_CLICK) {
+                this.cancelPress();
+            }
+        }, WAIT_FOR_MOUSE_CLICK_MS);
+    }
+    /**
+     * Check if event should trigger actions on the element.
+     */
+    shouldRespondToEvent(e) {
+        return !this.disabled && e.isPrimary;
+    }
+    /**
+     * Check if the event is within the bounds of the element.
+     *
+     * This is only needed for the "stuck" contextmenu longpress on Chrome.
+     */
+    inBounds(ev) {
+        const { top, left, bottom, right } = this.element.getBoundingClientRect();
+        const { x, y } = ev;
+        return x >= left && x <= right && y >= top && y <= bottom;
+    }
+    eventHasModifiers(e) {
+        return e.altKey || e.ctrlKey || e.shiftKey || e.metaKey;
+    }
+    /**
+     * Cancel interactions if the element is removed from the DOM.
+     */
+    hostDisconnected() {
+        this.cancelPress();
+    }
+    /**
+     * If the element becomes disabled, cancel interactions.
+     */
+    hostUpdated() {
+        if (this.disabled) {
+            this.cancelPress();
+        }
+    }
+}
+//# sourceMappingURL=action-controller.js.map

package/controller/action-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-controller.js","sourceRoot":"","sources":["action-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\n/**\n * Enumeration to keep track of the lifecycle of a touch event.\n */\n\n// State transition diagram:\n//     +-----------------------------+\n//     |                             v\n//     |    +------+------ WAITING_FOR_MOUSE_CLICK<----+\n//     |    |      |                ^                  |\n//     |    V      |                |                  |\n// => INACTIVE -> TOUCH_DELAY -> RELEASING          HOLDING\n//                 |                                   ^\n//                 |                                   |\n//                 +-----------------------------------+\nenum Phase {\n  // Initial state of the control, no touch in progress.\n  // Transitions:\n  //     on touch down: transition to TOUCH_DELAY.\n  //     on mouse down: transition to WAITING_FOR_MOUSE_CLICK.\n  INACTIVE = 'INACTIVE',\n\n  // Touch down has been received, waiting to determine if it's a swipe.\n  // Transitions:\n  //     on touch up: beginPress(); transition to RELEASING.\n  //     on cancel: transition to INACTIVE.\n  //     after TOUCH_DELAY_MS: beginPress(); transition to HOLDING.\n  TOUCH_DELAY = 'TOUCH_DELAY',\n\n  // A touch has been deemed to be a press\n  // Transitions:\n  //     on pointerup: endPress(); transition to WAITING_FOR_MOUSE_CLICK.\n  HOLDING = 'HOLDING',\n\n  // The user has released the mouse / touch, but we want to delay calling\n  // endPress for a little bit to avoid double clicks.\n  // Transitions:\n  //    mouse sequence after debounceDelay: endPress(); transition to INACTIVE\n  //    when in touch sequence: transitions directly to WAITING_FOR_MOUSE_CLICK\n  RELEASING = 'RELEASING',\n\n  // The user has touched, but we want to delay endPress until synthetic mouse\n  // click event occurs. Stay in this state for a fixed amount of time before\n  // giving up and transitioning into rest state.\n  // Transitions:\n  //     on click: endPress(); transition to INACTIVE.\n  //     after WAIT_FOR_MOUSE_CLICK_MS: transition to INACTIVE.\n  WAITING_FOR_MOUSE_CLICK = 'WAITING_FOR_MOUSE_CLICK'\n}\n\n/**\n * Delay time from touchstart to when element#beginPress is invoked.\n */\nexport const TOUCH_DELAY_MS = 150;\n\n/**\n * Delay time from beginning to wait for synthetic mouse events till giving up.\n */\nexport const WAIT_FOR_MOUSE_CLICK_MS = 500;\n\n/**\n * Interface for argument to beginPress.\n */\nexport interface BeginPressConfig {\n  /**\n   * Event that was recorded at the start of the interaction.\n   * `null` if the press happened via keyboard.\n   */\n  positionEvent: Event|null;\n}\n\n/**\n * Interface for argument to endPress.\n */\nexport interface EndPressConfig {\n  /**\n   * `true` if the press was cancelled.\n   */\n  cancelled: boolean;\n  /**\n   * Data object to pass along to clients in the `action` event, if relevant.\n   */\n  actionData?: {};\n}\n\n/**\n * The necessary interface for using an ActionController\n */\nexport interface ActionControllerHost extends ReactiveControllerHost,\n                                              HTMLElement {\n  disabled: boolean;\n  /**\n   * Determines if pointerdown or click events containing modifier keys should\n   * be ignored.\n   */\n  ignoreClicksWithModifiers?: boolean;\n  /**\n   * Called when a user interaction is determined to be a press.\n   */\n  beginPress(config: BeginPressConfig): void;\n  /**\n   * Called when a press ends or is cancelled.\n   */\n  endPress(config: EndPressConfig): void;\n}\n\n/**\n * ActionController normalizes user interaction on components and distills it\n * into calling `beginPress` and `endPress` on the component.\n *\n * `beginPress` is a good hook to affect visuals for pressed state, including\n * ripple.\n *\n * `endPress` is a good hook for firing events based on user interaction, and\n * cleaning up the pressed visual state.\n *\n * A component using an ActionController need only implement the ActionElement\n * interface and add the ActionController's event listeners to understand user\n * interaction.\n */\nexport class ActionController implements ReactiveController {\n  constructor(private readonly element: ActionControllerHost) {\n    this.element.addController(this);\n  }\n\n  private get disabled() {\n    return this.element.disabled;\n  }\n\n  private get ignoreClicksWithModifiers() {\n    return this.element.ignoreClicksWithModifiers ?? false;\n  }\n\n  private phase = Phase.INACTIVE;\n\n  private touchTimer: number|null = null;\n\n  private clickTimer: number|null = null;\n\n  private lastPositionEvent: PointerEvent|null = null;\n\n  private pressed = false;\n\n  private checkBoundsAfterContextMenu = false;\n\n  private setPhase(newPhase: Phase) {\n    this.phase = newPhase;\n  }\n\n  /**\n   * Calls beginPress and then endPress. Allows us to programmatically click\n   * on the element.\n   */\n  private press() {\n    this.beginPress(/* positionEvent= */ null);\n    this.setPhase(Phase.INACTIVE);\n    this.endPress();\n  }\n\n  /**\n   * Call `beginPress` on element with triggering event, if applicable.\n   */\n  private beginPress(positionEvent: Event|null = this.lastPositionEvent) {\n    this.pressed = true;\n    this.element.beginPress({positionEvent});\n  }\n\n  /**\n   * Call `endPress` on element, and clean up timers.\n   */\n  private endPress() {\n    this.pressed = false;\n    this.element.endPress({cancelled: false});\n    this.cleanup();\n  }\n\n  private cleanup() {\n    if (this.touchTimer) {\n      clearTimeout(this.touchTimer);\n    }\n    this.touchTimer = null;\n    if (this.clickTimer) {\n      clearTimeout(this.clickTimer);\n    }\n    this.clickTimer = null;\n    this.lastPositionEvent = null;\n  }\n\n  /**\n   * Call `endPress` with cancelled state on element, and cleanup timers.\n   */\n  private cancelPress() {\n    this.pressed = false;\n    this.cleanup();\n    if (this.phase === Phase.TOUCH_DELAY) {\n      this.setPhase(Phase.INACTIVE);\n    } else if (this.phase !== Phase.INACTIVE) {\n      this.setPhase(Phase.INACTIVE);\n      this.element.endPress({cancelled: true});\n    }\n  }\n\n  private isTouch(e: PointerEvent) {\n    return e.pointerType === 'touch';\n  }\n\n  private touchDelayFinished() {\n    if (this.phase !== Phase.TOUCH_DELAY) {\n      return;\n    }\n    this.setPhase(Phase.HOLDING);\n    this.beginPress();\n  }\n\n  private waitForClick() {\n    this.setPhase(Phase.WAITING_FOR_MOUSE_CLICK);\n    this.clickTimer = setTimeout(() => {\n      // If a click event does not occur, clean up the interaction state.\n      if (this.phase === Phase.WAITING_FOR_MOUSE_CLICK) {\n        this.cancelPress();\n      }\n    }, WAIT_FOR_MOUSE_CLICK_MS);\n  }\n\n  /**\n   * Check if event should trigger actions on the element.\n   */\n  private shouldRespondToEvent(e: PointerEvent) {\n    return !this.disabled && e.isPrimary;\n  }\n\n  /**\n   * Check if the event is within the bounds of the element.\n   *\n   * This is only needed for the \"stuck\" contextmenu longpress on Chrome.\n   */\n  private inBounds(ev: PointerEvent) {\n    const {top, left, bottom, right} = this.element.getBoundingClientRect();\n    const {x, y} = ev;\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private eventHasModifiers(e: MouseEvent) {\n    return e.altKey || e.ctrlKey || e.shiftKey || e.metaKey;\n  }\n\n  /**\n   * Cancel interactions if the element is removed from the DOM.\n   */\n  hostDisconnected() {\n    this.cancelPress();\n  }\n\n  /**\n   * If the element becomes disabled, cancel interactions.\n   */\n  hostUpdated() {\n    if (this.disabled) {\n      this.cancelPress();\n    }\n  }\n\n  // event listeners\n  /**\n   * Pointer down event handler.\n   */\n  pointerDown =\n      (e: PointerEvent) => {\n        if (!this.shouldRespondToEvent(e) || this.phase !== Phase.INACTIVE) {\n          return;\n        }\n        if (this.isTouch(e)) {\n          // after a longpress contextmenu event, an extra `pointerdown` can be\n          // dispatched to the pressed element. Check that the down is within\n          // bounds of the element in this case.\n          if (this.checkBoundsAfterContextMenu && !this.inBounds(e)) {\n            return;\n          }\n          this.checkBoundsAfterContextMenu = false;\n          this.lastPositionEvent = e;\n          this.setPhase(Phase.TOUCH_DELAY);\n          this.touchTimer = setTimeout(() => {\n            this.touchDelayFinished();\n          }, TOUCH_DELAY_MS);\n        } else {\n          const leftButtonPressed = e.button === 0;\n          if (!leftButtonPressed ||\n              (this.ignoreClicksWithModifiers && this.eventHasModifiers(e))) {\n            return;\n          }\n          this.setPhase(Phase.WAITING_FOR_MOUSE_CLICK);\n          this.beginPress(e);\n        }\n      }\n\n  /**\n   * Pointer up event handler.\n   */\n  pointerUp =\n      (e: PointerEvent) => {\n        if (!this.isTouch(e) || !this.shouldRespondToEvent(e)) {\n          return;\n        }\n        if (this.phase === Phase.HOLDING) {\n          this.waitForClick();\n        } else if (this.phase === Phase.TOUCH_DELAY) {\n          this.setPhase(Phase.RELEASING);\n          this.beginPress();\n          this.waitForClick();\n        }\n      }\n\n  /**\n   * Click event handler.\n   */\n  click =\n      (e: MouseEvent) => {\n        if (this.disabled ||\n            (this.ignoreClicksWithModifiers && this.eventHasModifiers(e))) {\n          return;\n        }\n        if (this.phase === Phase.WAITING_FOR_MOUSE_CLICK) {\n          this.endPress();\n          this.setPhase(Phase.INACTIVE);\n          return;\n        }\n\n        // keyboard synthesized click event\n        if (this.phase === Phase.INACTIVE && !this.pressed) {\n          this.press();\n        }\n      }\n\n  /**\n   * Pointer leave event handler.\n   */\n  pointerLeave =\n      (e: PointerEvent) => {\n        // cancel a held press that moves outside the element\n        if (this.shouldRespondToEvent(e) && !this.isTouch(e) && this.pressed) {\n          this.cancelPress();\n        }\n      }\n\n  /**\n   * Pointer cancel event handler.\n   */\n  pointerCancel =\n      (e: PointerEvent) => {\n        if (this.shouldRespondToEvent(e)) {\n          this.cancelPress();\n        }\n      }\n\n  /**\n   * Contextmenu event handler.\n   */\n  contextMenu = () => {\n    if (!this.disabled) {\n      this.checkBoundsAfterContextMenu = true;\n      this.cancelPress();\n    }\n  }\n}\n"]}

package/controller/events.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * This function is useful for forwarding non-composed events, such as `change`
+ * events.
+ *
+ * @example
+ * class MyInput extends LitElement {
+ *   render() {
+ *     return html`<input @change=${this.redispatchEvent}>`;
+ *   }
+ *
+ *   protected redispatchEvent(event: Event) {
+ *     redispatchEvent(this, event);
+ *   }
+ * }
+ *
+ * @param element The element to dispatch the event from.
+ * @param event The event to re-dispatch.
+ * @return Whether or not the event was dispatched (if cancelable).
+ */
+export declare function redispatchEvent(element: Element, event: Event): boolean;

package/controller/events.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * This function is useful for forwarding non-composed events, such as `change`
+ * events.
+ *
+ * @example
+ * class MyInput extends LitElement {
+ *   render() {
+ *     return html`<input @change=${this.redispatchEvent}>`;
+ *   }
+ *
+ *   protected redispatchEvent(event: Event) {
+ *     redispatchEvent(this, event);
+ *   }
+ * }
+ *
+ * @param element The element to dispatch the event from.
+ * @param event The event to re-dispatch.
+ * @return Whether or not the event was dispatched (if cancelable).
+ */
+export function redispatchEvent(element, event) {
+    // For bubbling events in SSR light DOM (or composed), stop their propagation
+    // and dispatch the copy.
+    if (event.bubbles && (!element.shadowRoot || event.composed)) {
+        event.stopPropagation();
+    }
+    const copy = Reflect.construct(event.constructor, [event.type, event]);
+    const dispatched = element.dispatchEvent(copy);
+    if (!dispatched) {
+        event.preventDefault();
+    }
+    return dispatched;
+}
+//# sourceMappingURL=events.js.map

package/controller/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["events.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,eAAe,CAAC,OAAgB,EAAE,KAAY;IAC5D,6EAA6E;IAC7E,yBAAyB;IACzB,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;QAC5D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,UAAU,EAAE;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Re-dispatches an event from the provided element.\n *\n * This function is useful for forwarding non-composed events, such as `change`\n * events.\n *\n * @example\n * class MyInput extends LitElement {\n *   render() {\n *     return html`<input @change=${this.redispatchEvent}>`;\n *   }\n *\n *   protected redispatchEvent(event: Event) {\n *     redispatchEvent(this, event);\n *   }\n * }\n *\n * @param element The element to dispatch the event from.\n * @param event The event to re-dispatch.\n * @return Whether or not the event was dispatched (if cancelable).\n */\nexport function redispatchEvent(element: Element, event: Event) {\n  // For bubbling events in SSR light DOM (or composed), stop their propagation\n  // and dispatch the copy.\n  if (event.bubbles && (!element.shadowRoot || event.composed)) {\n    event.stopPropagation();\n  }\n\n  const copy = Reflect.construct(event.constructor, [event.type, event]);\n  const dispatched = element.dispatchEvent(copy);\n  if (!dispatched) {\n    event.preventDefault();\n  }\n\n  return dispatched;\n}\n"]}

package/controller/form-controller.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+declare global {
+    interface Window {
+        ShadyDOM?: {
+            inUse: boolean;
+        };
+    }
+}
+/**
+ * An element that `FormController` may use.
+ */
+export interface FormElement extends ReactiveControllerHost, HTMLElement {
+    /**
+     * The `<form>` that this element is associated with.
+     */
+    readonly form: HTMLFormElement | null;
+    /**
+     * The name of the element in the form. This property should reflect to a
+     * `name` attribute.
+     */
+    name: string;
+    /**
+     * Whether or not this element is disabled. If present, this property should
+     * reflect to a `disabled` attribute.
+     */
+    disabled?: boolean;
+    /**
+     * A function that retrieves the current form value for this element.
+     *
+     * @return The current form value, or `null` if there is no value.
+     */
+    [getFormValue](): string | File | FormData | null;
+}
+/**
+ * A unique symbol key for `FormController` elements to implement their
+ * `getFormValue()` function.
+ */
+export declare const getFormValue: unique symbol;
+/**
+ * A `ReactiveController` that adds `<form>` support to an element.
+ */
+export declare class FormController implements ReactiveController {
+    private readonly element;
+    private form?;
+    /**
+     * Creates a new `FormController` for the given element.
+     *
+     * @param element The element to add `<form>` support to.
+     */
+    constructor(element: FormElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private formDataListener;
+}