@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/ripple/directive.d.ts

@@ -1,63 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { Directive, DirectiveParameters, ElementPart, PartInfo } from 'lit/directive.js';
-import { Ripple } from './lib/ripple.js';
-/**
- * Normalized ripple accessor type.
- *
- * Use with `await rippleFunction()`
- */
-declare type RippleFunction = () => Ripple | null | Promise<Ripple | null>;
-declare class RippleDirective extends Directive {
-    private rippleGetter;
-    private element?;
-    private state;
-    private checkBoundsAfterContextMenu;
-    private rippleStartEvent;
-    private touchTimer;
-    private clickTimer;
-    constructor(partInfo: PartInfo);
-    render(ripple: RippleFunction | Promise<Ripple | null>): symbol;
-    handleEvent(event: Event): Promise<void>;
-    update(part: ElementPart, [ripple]: DirectiveParameters<this>): symbol;
-    /**
-     * Returns `true` if
-     *  - the ripple element is enabled
-     *  - the pointer is primary for the input type
-     *  - the pointer is the pointer that started the interaction, or will start
-     * the interaction
-     *  - the pointer is a touch, or the pointer state has the primary button
-     * held, or the pointer is hovering
-     */
-    private shouldReactToEvent;
-    private isTouch;
-    /**
-     * 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 beginPress;
-    private endPress;
-    private waitForTouchHold;
-    private click;
-    private contextMenu;
-    private pointerDown;
-    private pointerUp;
-    private pointerCancel;
-    private pointerEnter;
-    private pointerLeave;
-}
-/**
- * Connects a Ripple element to a node that drives the interaction
- *
- * @param rippleGetter A function that returns an `md-ripple` element
- * @param simulateKeyboardClick For elements that do not issue a click on
- *     keyboard interaction, pass `true` to enable press animations on Enter or
- *     Spacebar
- */
-export declare const ripple: (ripple: Promise<Ripple> | RippleFunction) => import("lit-html/directive.js").DirectiveResult<typeof RippleDirective>;
-export {};

package/ripple/directive.js

@@ -1,266 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { noChange } from 'lit';
-import { Directive, directive, PartType } from 'lit/directive.js';
-/**
- * Delay reacting to touch so that we do not show the ripple for a swipe or
- * scroll interaction.
- */
-const TOUCH_DELAY_MS = 150;
-/**
- * Interaction states for the ripple.
- *
- * On Touch:
- *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
- *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
- *
- * On Mouse or Pen:
- *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
- */
-var State;
-(function (State) {
-    /**
-     * Initial state of the control, no touch in progress.
-     *
-     * Transitions:
-     *   - on touch down: transition to `TOUCH_DELAY`.
-     *   - on mouse down: transition to `WAITING_FOR_CLICK`.
-     */
-    State[State["INACTIVE"] = 0] = "INACTIVE";
-    /**
-     * Touch down has been received, waiting to determine if it's a swipe or
-     * scroll.
-     *
-     * Transitions:
-     *   - on touch up: beginPress(); transition to `WAITING_FOR_CLICK`.
-     *   - on cancel: transition to `INACTIVE`.
-     *   - after `TOUCH_DELAY_MS`: beginPress(); transition to `HOLDING`.
-     */
-    State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY";
-    /**
-     * A touch has been deemed to be a press
-     *
-     * Transitions:
-     *  - on up: transition to `WAITING_FOR_CLICK`.
-     */
-    State[State["HOLDING"] = 2] = "HOLDING";
-    /**
-     * The user touch has finished, transition into rest state.
-     *
-     * Transitions:
-     *   - on click endPress(); transition to `INACTIVE`.
-     */
-    State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
-})(State || (State = {}));
-class RippleDirective extends Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        this.rippleGetter = async () => null;
-        this.state = State.INACTIVE;
-        this.checkBoundsAfterContextMenu = false;
-        this.rippleStartEvent = null;
-        this.touchTimer = null;
-        this.clickTimer = null;
-        if (partInfo.type !== PartType.ELEMENT) {
-            throw new Error('The `ripple` directive must be used on an element');
-        }
-    }
-    render(ripple) {
-        return noChange;
-    }
-    // Use EventListenerObject::handleEvent interface to handle events without
-    // generating bound event handlers
-    async handleEvent(event) {
-        const ripple = await this.rippleGetter();
-        if (!ripple) {
-            return;
-        }
-        switch (event.type) {
-            case 'click':
-                this.click(ripple);
-                break;
-            case 'contextmenu':
-                this.contextMenu(ripple);
-                break;
-            case 'pointercancel':
-                this.pointerCancel(ripple, event);
-                break;
-            case 'pointerdown':
-                this.pointerDown(ripple, event);
-                break;
-            case 'pointerenter':
-                this.pointerEnter(ripple, event);
-                break;
-            case 'pointerleave':
-                this.pointerLeave(ripple, event);
-                break;
-            case 'pointerup':
-                this.pointerUp(ripple, event);
-                break;
-            default:
-                break;
-        }
-    }
-    update(part, [ripple]) {
-        if (!this.element) {
-            // NOTE: addEventListener typing needs to be used with HTMLElements or a
-            // subclass
-            this.element = part.element;
-            this.element.addEventListener('click', this);
-            this.element.addEventListener('contextmenu', this);
-            this.element.addEventListener('pointercancel', this);
-            this.element.addEventListener('pointerdown', this);
-            this.element.addEventListener('pointerenter', this);
-            this.element.addEventListener('pointerleave', this);
-            this.element.addEventListener('pointerup', this);
-        }
-        // Normalize given ripple accessor
-        this.rippleGetter = typeof ripple === 'function' ? ripple : () => ripple;
-        return noChange;
-    }
-    /**
-     * Returns `true` if
-     *  - the ripple element is enabled
-     *  - the pointer is primary for the input type
-     *  - the pointer is the pointer that started the interaction, or will start
-     * the interaction
-     *  - the pointer is a touch, or the pointer state has the primary button
-     * held, or the pointer is hovering
-     */
-    shouldReactToEvent(ripple, ev, hovering = false) {
-        const enabled = !ripple.disabled;
-        const isPrimaryPointer = ev.isPrimary;
-        const isInteractionPointer = this.rippleStartEvent === null ||
-            this.rippleStartEvent.pointerId === ev.pointerId;
-        const isPrimaryButton = ev.buttons === 1;
-        return enabled && isPrimaryPointer && isInteractionPointer &&
-            (this.isTouch(ev) || isPrimaryButton || hovering);
-    }
-    isTouch({ pointerType }) {
-        return pointerType === 'touch';
-    }
-    /**
-     * Check if the event is within the bounds of the element.
-     *
-     * This is only needed for the "stuck" contextmenu longpress on Chrome.
-     */
-    inBounds({ x, y }) {
-        const { top, left, bottom, right } = this.element.getBoundingClientRect();
-        return x >= left && x <= right && y >= top && y <= bottom;
-    }
-    beginPress(ripple) {
-        ripple.beginPress(this.rippleStartEvent);
-    }
-    endPress(ripple) {
-        ripple.endPress();
-        this.state = State.INACTIVE;
-        this.rippleStartEvent = null;
-        if (this.touchTimer) {
-            clearTimeout(this.touchTimer);
-            this.touchTimer = null;
-        }
-        if (this.clickTimer) {
-            clearTimeout(this.clickTimer);
-            this.clickTimer = null;
-        }
-    }
-    waitForTouchHold() {
-        if (this.touchTimer !== null) {
-            clearTimeout(this.touchTimer);
-        }
-        this.state = State.TOUCH_DELAY;
-        this.touchTimer = setTimeout(async () => {
-            const ripple = await this.rippleGetter();
-            if (ripple === null || this.state !== State.TOUCH_DELAY) {
-                return;
-            }
-            this.state = State.HOLDING;
-            this.beginPress(ripple);
-        }, TOUCH_DELAY_MS);
-    }
-    click(ripple) {
-        // Click is a MouseEvent in Firefox and Safari, so we cannot use
-        // `shouldReactToEvent`
-        if (ripple.disabled) {
-            return;
-        }
-        if (this.state === State.WAITING_FOR_CLICK) {
-            this.endPress(ripple);
-        }
-        else if (this.state === State.INACTIVE) {
-            // keyboard synthesized click event
-            this.beginPress(ripple);
-            this.endPress(ripple);
-        }
-    }
-    contextMenu(ripple) {
-        if (!ripple.disabled) {
-            this.checkBoundsAfterContextMenu = true;
-            this.endPress(ripple);
-        }
-    }
-    pointerDown(ripple, ev) {
-        if (!this.shouldReactToEvent(ripple, ev)) {
-            return;
-        }
-        this.rippleStartEvent = ev;
-        if (this.isTouch(ev)) {
-            // 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(ev)) {
-                return;
-            }
-            this.checkBoundsAfterContextMenu = false;
-            this.waitForTouchHold();
-        }
-        else {
-            this.state = State.WAITING_FOR_CLICK;
-            this.beginPress(ripple);
-        }
-    }
-    pointerUp(ripple, ev) {
-        if (!this.isTouch(ev) || !this.shouldReactToEvent(ripple, ev)) {
-            return;
-        }
-        if (this.state === State.HOLDING) {
-            this.state = State.WAITING_FOR_CLICK;
-        }
-        else if (this.state === State.TOUCH_DELAY) {
-            this.state = State.WAITING_FOR_CLICK;
-            this.beginPress(ripple);
-        }
-    }
-    pointerCancel(ripple, ev) {
-        if (this.shouldReactToEvent(ripple, ev)) {
-            this.endPress(ripple);
-        }
-    }
-    pointerEnter(ripple, ev) {
-        if (this.shouldReactToEvent(ripple, ev, true)) {
-            ripple.beginHover(ev);
-        }
-    }
-    pointerLeave(ripple, ev) {
-        if (this.shouldReactToEvent(ripple, ev, true)) {
-            ripple.endHover();
-            // release a held mouse or pen press that moves outside the element
-            if (!this.isTouch(ev) && this.state !== State.INACTIVE) {
-                this.endPress(ripple);
-            }
-        }
-    }
-}
-/**
- * Connects a Ripple element to a node that drives the interaction
- *
- * @param rippleGetter A function that returns an `md-ripple` element
- * @param simulateKeyboardClick For elements that do not issue a click on
- *     keyboard interaction, pass `true` to enable press animations on Enter or
- *     Spacebar
- */
-export const ripple = directive(RippleDirective);
-//# sourceMappingURL=directive.js.map

package/ripple/directive.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"directive.js","sourceRoot":"","sources":["directive.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAC,SAAS,EAAE,SAAS,EAA8C,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAI5G;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B;;;;;;;;;GASG;AACH,IAAK,KAiCJ;AAjCD,WAAK,KAAK;IACR;;;;;;OAMG;IACH,yCAAQ,CAAA;IACR;;;;;;;;OAQG;IACH,+CAAW,CAAA;IACX;;;;;OAKG;IACH,uCAAO,CAAA;IACP;;;;;OAKG;IACH,2DAAiB,CAAA;AACnB,CAAC,EAjCI,KAAK,KAAL,KAAK,QAiCT;AASD,MAAM,eAAgB,SAAQ,SAAS;IASrC,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;QATV,iBAAY,GAAmB,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC;QAEhD,UAAK,GAAU,KAAK,CAAC,QAAQ,CAAC;QAC9B,gCAA2B,GAAG,KAAK,CAAC;QACpC,qBAAgB,GAAsB,IAAI,CAAC;QAC3C,eAAU,GAAgB,IAAI,CAAC;QAC/B,eAAU,GAAgB,IAAI,CAAC;QAIrC,IAAI,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE;YACtC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;SACtE;IACH,CAAC;IAED,MAAM,CAAC,MAA2C;QAChD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,0EAA0E;IAC1E,kCAAkC;IAClC,KAAK,CAAC,WAAW,CAAC,KAAY;QAC5B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QACzC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,QAAQ,KAAK,CAAC,IAAI,EAAE;YAClB,KAAK,OAAO;gBACV,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBACnB,MAAM;YACR,KAAK,aAAa;gBAChB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;gBACzB,MAAM;YACR,KAAK,eAAe;gBAClB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,KAAqB,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,aAAa;gBAChB,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAqB,CAAC,CAAC;gBAChD,MAAM;YACR,KAAK,cAAc;gBACjB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAqB,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,cAAc;gBACjB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAqB,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,KAAqB,CAAC,CAAC;gBAC9C,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC;IAEQ,MAAM,CAAC,IAAiB,EAAE,CAAC,MAAM,CAA4B;QACpE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,wEAAwE;YACxE,WAAW;YACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAsB,CAAC;YAC3C,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YAC7C,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACpD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACpD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;SAClD;QACD,kCAAkC;QAClC,IAAI,CAAC,YAAY,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC;QACzE,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;;;;;;;OAQG;IACK,kBAAkB,CACtB,MAAc,EAAE,EAAgB,EAAE,QAAQ,GAAG,KAAK;QACpD,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC;QACjC,MAAM,gBAAgB,GAAG,EAAE,CAAC,SAAS,CAAC;QACtC,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,KAAK,IAAI;YACvD,IAAI,CAAC,gBAAgB,CAAC,SAAS,KAAK,EAAE,CAAC,SAAS,CAAC;QACrD,MAAM,eAAe,GAAG,EAAE,CAAC,OAAO,KAAK,CAAC,CAAC;QACzC,OAAO,OAAO,IAAI,gBAAgB,IAAI,oBAAoB;YACtD,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,eAAe,IAAI,QAAQ,CAAC,CAAC;IACxD,CAAC;IAEO,OAAO,CAAC,EAAC,WAAW,EAAe;QACzC,OAAO,WAAW,KAAK,OAAO,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACK,QAAQ,CAAC,EAAC,CAAC,EAAE,CAAC,EAAe;QACnC,MAAM,EAAC,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,OAAQ,CAAC,qBAAqB,EAAE,CAAC;QACzE,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,MAAM,CAAC;IAC5D,CAAC;IAEO,UAAU,CAAC,MAAc;QAC/B,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC;IAEO,QAAQ,CAAC,MAAc;QAC7B,MAAM,CAAC,QAAQ,EAAE,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;YAC5B,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC/B;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,IAAI,EAAE;YACtC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YACzC,IAAI,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,EAAE;gBACvD,OAAO;aACR;YACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC,EAAE,cAAc,CAAC,CAAC;IACrB,CAAC;IAEO,KAAK,CAAC,MAAc;QAC1B,gEAAgE;QAChE,uBAAuB;QACvB,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,OAAO;SACR;QACD,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,iBAAiB,EAAE;YAC1C,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACvB;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,EAAE;YACxC,mCAAmC;YACnC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACvB;IACH,CAAC;IAEO,WAAW,CAAC,MAAc;QAChC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YACpB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACvB;IACH,CAAC;IAEO,WAAW,CAAC,MAAc,EAAE,EAAgB;QAClD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YACxC,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;QAC3B,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YACpB,qEAAqE;YACrE,mEAAmE;YACnE,sCAAsC;YACtC,IAAI,IAAI,CAAC,2BAA2B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;gBAC1D,OAAO;aACR;YACD,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;YACzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;SACzB;IACH,CAAC;IAEO,SAAS,CAAC,MAAc,EAAE,EAAgB;QAChD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YAC7D,OAAO;SACR;QACD,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,EAAE;YAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;SACtC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,EAAE;YAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;SACzB;IACH,CAAC;IAEO,aAAa,CAAC,MAAc,EAAE,EAAgB;QACpD,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YACvC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACvB;IACH,CAAC;IAEO,YAAY,CAAC,MAAc,EAAE,EAAgB;QACnD,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;YAC7C,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;SACvB;IACH,CAAC;IAEO,YAAY,CAAC,MAAc,EAAE,EAAgB;QACnD,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;YAC7C,MAAM,CAAC,QAAQ,EAAE,CAAC;YAClB,mEAAmE;YACnE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,EAAE;gBACtD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;aACvB;SACF;IACH,CAAC;CACF;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {noChange} from 'lit';\nimport {Directive, directive, DirectiveParameters, ElementPart, PartInfo, PartType} from 'lit/directive.js';\n\nimport {Ripple} from './lib/ripple.js';\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: beginPress(); transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: beginPress(); transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click endPress(); transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK\n}\n\n/**\n * Normalized ripple accessor type.\n *\n * Use with `await rippleFunction()`\n */\ntype RippleFunction = () => Ripple|null|Promise<Ripple|null>;\n\nclass RippleDirective extends Directive {\n  private rippleGetter: RippleFunction = async () => null;\n  private element?: HTMLElement;\n  private state: State = State.INACTIVE;\n  private checkBoundsAfterContextMenu = false;\n  private rippleStartEvent: PointerEvent|null = null;\n  private touchTimer: number|null = null;\n  private clickTimer: number|null = null;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error('The `ripple` directive must be used on an element');\n    }\n  }\n\n  render(ripple: RippleFunction|Promise<Ripple|null>) {\n    return noChange;\n  }\n\n  // Use EventListenerObject::handleEvent interface to handle events without\n  // generating bound event handlers\n  async handleEvent(event: Event) {\n    const ripple = await this.rippleGetter();\n    if (!ripple) {\n      return;\n    }\n    switch (event.type) {\n      case 'click':\n        this.click(ripple);\n        break;\n      case 'contextmenu':\n        this.contextMenu(ripple);\n        break;\n      case 'pointercancel':\n        this.pointerCancel(ripple, event as PointerEvent);\n        break;\n      case 'pointerdown':\n        this.pointerDown(ripple, event as PointerEvent);\n        break;\n      case 'pointerenter':\n        this.pointerEnter(ripple, event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.pointerLeave(ripple, event as PointerEvent);\n        break;\n      case 'pointerup':\n        this.pointerUp(ripple, event as PointerEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  override update(part: ElementPart, [ripple]: DirectiveParameters<this>) {\n    if (!this.element) {\n      // NOTE: addEventListener typing needs to be used with HTMLElements or a\n      // subclass\n      this.element = part.element as HTMLElement;\n      this.element.addEventListener('click', this);\n      this.element.addEventListener('contextmenu', this);\n      this.element.addEventListener('pointercancel', this);\n      this.element.addEventListener('pointerdown', this);\n      this.element.addEventListener('pointerenter', this);\n      this.element.addEventListener('pointerleave', this);\n      this.element.addEventListener('pointerup', this);\n    }\n    // Normalize given ripple accessor\n    this.rippleGetter = typeof ripple === 'function' ? ripple : () => ripple;\n    return noChange;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(\n      ripple: Ripple, ev: PointerEvent, hovering = false) {\n    const enabled = !ripple.disabled;\n    const isPrimaryPointer = ev.isPrimary;\n    const isInteractionPointer = this.rippleStartEvent === null ||\n        this.rippleStartEvent.pointerId === ev.pointerId;\n    const isPrimaryButton = ev.buttons === 1;\n    return enabled && isPrimaryPointer && isInteractionPointer &&\n        (this.isTouch(ev) || isPrimaryButton || hovering);\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\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({x, y}: PointerEvent) {\n    const {top, left, bottom, right} = this.element!.getBoundingClientRect();\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private beginPress(ripple: Ripple) {\n    ripple.beginPress(this.rippleStartEvent);\n  }\n\n  private endPress(ripple: Ripple) {\n    ripple.endPress();\n    this.state = State.INACTIVE;\n    this.rippleStartEvent = null;\n    if (this.touchTimer) {\n      clearTimeout(this.touchTimer);\n      this.touchTimer = null;\n    }\n    if (this.clickTimer) {\n      clearTimeout(this.clickTimer);\n      this.clickTimer = null;\n    }\n  }\n\n  private waitForTouchHold() {\n    if (this.touchTimer !== null) {\n      clearTimeout(this.touchTimer);\n    }\n    this.state = State.TOUCH_DELAY;\n    this.touchTimer = setTimeout(async () => {\n      const ripple = await this.rippleGetter();\n      if (ripple === null || this.state !== State.TOUCH_DELAY) {\n        return;\n      }\n      this.state = State.HOLDING;\n      this.beginPress(ripple);\n    }, TOUCH_DELAY_MS);\n  }\n\n  private click(ripple: Ripple) {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (ripple.disabled) {\n      return;\n    }\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPress(ripple);\n    } else if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.beginPress(ripple);\n      this.endPress(ripple);\n    }\n  }\n\n  private contextMenu(ripple: Ripple) {\n    if (!ripple.disabled) {\n      this.checkBoundsAfterContextMenu = true;\n      this.endPress(ripple);\n    }\n  }\n\n  private pointerDown(ripple: Ripple, ev: PointerEvent) {\n    if (!this.shouldReactToEvent(ripple, ev)) {\n      return;\n    }\n    this.rippleStartEvent = ev;\n    if (this.isTouch(ev)) {\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(ev)) {\n        return;\n      }\n      this.checkBoundsAfterContextMenu = false;\n      this.waitForTouchHold();\n    } else {\n      this.state = State.WAITING_FOR_CLICK;\n      this.beginPress(ripple);\n    }\n  }\n\n  private pointerUp(ripple: Ripple, ev: PointerEvent) {\n    if (!this.isTouch(ev) || !this.shouldReactToEvent(ripple, ev)) {\n      return;\n    }\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n    } else if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.beginPress(ripple);\n    }\n  }\n\n  private pointerCancel(ripple: Ripple, ev: PointerEvent) {\n    if (this.shouldReactToEvent(ripple, ev)) {\n      this.endPress(ripple);\n    }\n  }\n\n  private pointerEnter(ripple: Ripple, ev: PointerEvent) {\n    if (this.shouldReactToEvent(ripple, ev, true)) {\n      ripple.beginHover(ev);\n    }\n  }\n\n  private pointerLeave(ripple: Ripple, ev: PointerEvent) {\n    if (this.shouldReactToEvent(ripple, ev, true)) {\n      ripple.endHover();\n      // release a held mouse or pen press that moves outside the element\n      if (!this.isTouch(ev) && this.state !== State.INACTIVE) {\n        this.endPress(ripple);\n      }\n    }\n  }\n}\n\n/**\n * Connects a Ripple element to a node that drives the interaction\n *\n * @param rippleGetter A function that returns an `md-ripple` element\n * @param simulateKeyboardClick For elements that do not issue a click on\n *     keyboard interaction, pass `true` to enable press animations on Enter or\n *     Spacebar\n */\nexport const ripple = directive(RippleDirective);"]}

package/ripple/lib/_md-comp-ripple.scss

@@ -1,29 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '../../tokens';
-
-@function values($exclude-hardcoded-values: false) {
-  $state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
-  $default-shape: map.get(
-    tokens.md-sys-shape-values($exclude-hardcoded-values),
-    corner-none
-  );
-  $default-color: if($exclude-hardcoded-values, null, black);
-  // add missing tokens
-  $values: map.merge(
-    $state-values,
-    (
-      state-layer-shape: $default-shape,
-      focus-state-layer-color: $default-color,
-      hover-state-layer-color: $default-color,
-      pressed-state-layer-color: $default-color,
-      dragged-state-layer-color: $default-color,
-    )
-  );
-
-  @return $values;
-}

package/sass/_assert.scss

@@ -1,21 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:meta';
-
-///
-/// is-type returns the given value if it matches the given type. If not, it
-/// throws an error.
-/// @param {*} $val - the value to check the type of.
-/// @param {String} $type - the type we expect $val to be.
-/// @return {*} returns $val assuming it is of type $type.
-///
-@function is-type($val, $type) {
-  $actual: meta.type-of($val);
-  @if $actual != $type {
-    @error 'expected "#{$val}" to be of type "#{$type}"; was type "#{$actual}"';
-  }
-  @return $val;
-}

package/sass/_color-scheme.scss

@@ -1,88 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '../tokens';
-@use './color';
-@use './theme';
-@use './var';
-
-// TODO(b/213571555): Following Sass mixins will call color scheme APIs which
-// are generated using tokens compiler when ready.
-
-/// Declares set of CSS custom properties for baseline dark color scheme
-/// overrides.
-@mixin dark-color-scheme(
-  $color-values-dark: tokens.md-sys-color-values-dark()
-) {
-  @include color-scheme(
-    _get-color-scheme-var-fallbacks($color-values-dark),
-    $color-values-dark
-  );
-}
-
-/// Declares set of CSS custom properties for baseline light color scheme
-/// overrides.
-@mixin light-color-scheme(
-  $color-values-light: tokens.md-sys-color-values-light()
-) {
-  @include color-scheme(
-    _get-color-scheme-var-fallbacks($color-values-light),
-    $color-values-light
-  );
-}
-
-$_baseline-color-scheme: tokens.md-sys-color-values-light();
-
-/// Declares set of CSS custom properties for custom color scheme override.
-/// @param {Map} $color-scheme - Map containing custom color scheme values.
-/// @example
-///   @include color-scheme((background: #f00));
-///   // --md-sys-color-background: #f00;
-///
-///   @include color-scheme((background: var(--foo-custom-color, #f00));
-///   // --md-sys-color-background: var(--foo-custom-color, #f00)
-@mixin color-scheme(
-  $color-scheme,
-  $baseline-color-scheme: $_baseline-color-scheme,
-  $prefix: var.create-name(sys-color)
-) {
-  $color-scheme: theme.validate-theme($baseline-color-scheme, $color-scheme);
-
-  @each $key, $value in $color-scheme {
-    #{$prefix}-#{$key}: #{$value};
-    @include _declare-color-in-rgb($key, $value, $prefix);
-  }
-}
-
-/// @param {Map} $color-scheme - Baseline color scheme map containing CSS vars
-///     with fallback values.
-/// @return {Map} - Returns a color scheme map with fallback values (concrete
-///     color values) of provided CSS vars.
-/// @example
-///   _get-color-scheme-var-fallbacks((
-///     background: var(--md-sys-color-background, #f00),
-///   )
-///   // (background: #f00)
-@function _get-color-scheme-var-fallbacks($color-scheme) {
-  @each $key, $value in $color-scheme {
-    @if var.is-var($value) {
-      $color-scheme: map.set($color-scheme, $key, var.fallback($value));
-    }
-  }
-
-  @return $color-scheme;
-}
-
-// TODO(b/213331407): Following colors are set in rgb (comma separated format)
-// to enable mixing with alpha value.
-// (e.g., rgb(var(--foo-sys-color-on-surface-rgb, 31,31,31), 0.38))
-// Remove once the attached bug is resolved.
-@mixin _declare-color-in-rgb($color-key, $value, $prefix) {
-  @if var.is-var($value) {
-    $value: var.deep-fallback($value);
-  }
-  #{$prefix}-#{$color-key}-rgb: #{color.hex-to-rgb(#{$value})};
-}

package/sass/_color.scss

@@ -1,166 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use './assert';
-@use './string-ext';
-@use './var';
-
-$_hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
-
-///
-/// @example - scss
-///   @debug color-var-hex-to-rgba(var(--foo-color-on-surface, #8ab4f8), 0.38);
-///   // rgb(var(--foo-color-on-surface-rgb, 138, 180, 248), 0.38))
-/// @param {String} $var - CSS custom property string in var(--foo, #hex) format.
-/// @param {Number} $opacity - Opacity to mix with given color.
-/// @return {String} Returns color string in rgb() format containing
-///     CSS custom property for comma separated rgb color.
-@function color-var-hex-to-rgba($var, $opacity) {
-  @if not var.is-var($var) {
-    @error '"#{$var}" is not a valid custom property.';
-  }
-
-  @if meta.type-of($opacity) != 'number' {
-    @error '"#{$opacity}" is not a valid number. Expecting to combine it with "#{$var}"';
-  }
-
-  $fallback: var.fallback($var);
-  // var(--foo-color-rgb, 31,31,31)
-  $var-rgb: var.create('#{var.name($var)}-rgb', hex-to-rgb($fallback));
-  @return string.unquote('rgb(#{$var-rgb}, #{$opacity})');
-}
-
-/// @example - scss
-///   @debug hex-to-rgb('#8ab4f8'); // 138, 180, 248
-/// @param {String} $string - CSS hex color in string format including '#'.
-/// @return {String} Returns comma separated rgb values in string format.
-@function hex-to-rgb($string) {
-  @if not string-ext.has-prefix($string, '#') {
-    @error '#{$string} is not in CSS hex color format.';
-  }
-
-  $string-lower: string.to-lower-case($string);
-  $r: '';
-  $g: '';
-  $b: '';
-  $length: string.length($string);
-  $max: if($length == 4, 1, 2);
-
-  // Check for length accuracy
-  @if $length != 4 and $length != 7 {
-    @return $string;
-  }
-
-  // Loop from the second character (omitting #)
-  @for $i from 2 through $length {
-    $c: string.slice($string-lower, $i, $i);
-
-    // If wrong character, return
-    @if list.index($_hex, $c) == null {
-      @return $string;
-    }
-
-    @if string.length($r) < $max {
-      $r: $r + $c;
-    } @else if string.length($g) < $max {
-      $g: $g + $c;
-    } @else if string.length($b) < $max {
-      $b: $b + $c;
-    }
-  }
-
-  @if $length == 4 {
-    $r: $r + $r;
-    $g: $g + $g;
-    $b: $b + $b;
-  }
-
-  @return #{_hex-to-dec($r), _hex-to-dec($g), _hex-to-dec($b)};
-}
-
-///
-/// join-color-and-opacity-pairs returns a map with all given color and opacity
-/// keys joined to create an RGBA color value. This function is non-destructive
-/// and returns a new instance of the given map. It should only be used for
-/// disabled colors.
-///
-/// @example
-///   join-color-and-opacity-pairs((
-///     foo-color: red,
-///     foo-opacity: 0.2,
-///     bar-color: green,
-///     bar-opacity: 0.3,
-///   ), (
-///     (color-key: 'foo-color', opacity-key: 'foo-opacity'),
-///     (color-key: 'bar-color', opacity-key: 'bar-opacity'),
-///   )) = (foo-color: rgba(255, 0, 0, 0.2), bar-color: rgba(0, 255, 0, 0.3))
-///
-/// @param {Map} $map - the map with the values to modify.
-/// @param {List<Map>} $color-opacity-key-pairs - the list of color/opacity key
-///   pairs to join on the list.
-/// @return {$Map} The map with the given color/opacity key pairs replaced by
-///   RGBA representations.
-///
-@function join-color-and-opacity-pairs($map, $color-opacity-key-pairs) {
-  // Make a copy of the map.
-  $original: $map;
-  $out: $map;
-  @if meta.type-of($color-opacity-key-pairs) == 'map' {
-    // Sass will automatically turn double paren lists of maps into a single
-    // map. Convert them back to a list.
-    $color-opacity-key-pairs: list.append((), $color-opacity-key-pairs);
-  }
-  @each $pair in $color-opacity-key-pairs {
-    $color-key: map.get($pair, color-key);
-    $opacity-key: map.get($pair, opacity-key);
-    // Check if the $original map has the color/opacity keys, since $out may
-    // have removed opacity keys.
-    $has-keys: map.has-key($original, $color-key) and
-      map.has-key($original, $opacity-key);
-    @if $has-keys {
-      $color: map.get($original, $color-key);
-      @if var.is-var($color) {
-        // TODO(b/213331407): Convert color from hex to rgba CSS color format to
-        // enable mixing rgb value with alpha using custom properties.
-        // (e.g., rgb(var(--foo-sys-color-on-surface-rgb, 31,31,31), 0.38))
-        // Remove once the attached bug is resolved.
-        $color: color-var-hex-to-rgba($color, map.get($original, $opacity-key));
-      } @else if meta.type-of($color) == 'color' {
-        $opacity: assert.is-type(map.get($original, $opacity-key), 'number');
-        $color: rgba($color, $opacity);
-      }
-
-      $out: map.set($out, $color-key, $color);
-
-      // Remove opacity keys from the $out map, but keep them in the
-      // $original map in case there are subsequent color/opacity pairs that
-      // need to reference the same opacity.
-      $out: map.remove($out, $opacity-key);
-    }
-  }
-  @return $out;
-}
-
-/// @example - scss
-///   @debug _hex-to-dec('f8'); // 248
-/// @param {String} $string - Hex number in string format.
-/// @return {Number} Returns decimal number for given hex number.
-@function _hex-to-dec($string) {
-  $string: string.to-lower-case($string);
-  $length: string.length($string);
-
-  $dec: 0;
-  @for $i from 1 through $length {
-    $factor: 1 + (15 * ($length - $i));
-    $index: list.index($_hex, string.slice($string, $i, $i));
-    $dec: $dec + $factor * ($index - 1);
-  }
-
-  @return $dec;
-}