392 lines
15 KiB
JavaScript
392 lines
15 KiB
JavaScript
import { _ as a, n as m, r as C, a as w, b as y, x as S, c as P } from "./class-map-CwiboTfb.mjs";
|
|
import { r as A, a as _, E as N } from "./animation-DjClVFum.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const I = Symbol("attachableController");
|
|
let c;
|
|
c = new MutationObserver((i) => {
|
|
var t;
|
|
for (const e of i)
|
|
(t = e.target[I]) == null || t.hostConnected();
|
|
});
|
|
class E {
|
|
get htmlFor() {
|
|
return this.host.getAttribute("for");
|
|
}
|
|
set htmlFor(t) {
|
|
t === null ? this.host.removeAttribute("for") : this.host.setAttribute("for", t);
|
|
}
|
|
get control() {
|
|
return this.host.hasAttribute("for") ? !this.htmlFor || !this.host.isConnected ? null : this.host.getRootNode().querySelector(`#${this.htmlFor}`) : this.currentControl || this.host.parentElement;
|
|
}
|
|
set control(t) {
|
|
t ? this.attach(t) : this.detach();
|
|
}
|
|
/**
|
|
* Creates a new controller for an `Attachable` element.
|
|
*
|
|
* @param host The `Attachable` element.
|
|
* @param onControlChange A callback with two parameters for the previous and
|
|
* next control. An `Attachable` element may perform setup or teardown
|
|
* logic whenever the control changes.
|
|
*/
|
|
constructor(t, e) {
|
|
this.host = t, this.onControlChange = e, this.currentControl = null, t.addController(this), t[I] = this, c == null || c.observe(t, { attributeFilter: ["for"] });
|
|
}
|
|
attach(t) {
|
|
t !== this.currentControl && (this.setCurrentControl(t), this.host.removeAttribute("for"));
|
|
}
|
|
detach() {
|
|
this.setCurrentControl(null), this.host.setAttribute("for", "");
|
|
}
|
|
/** @private */
|
|
hostConnected() {
|
|
this.setCurrentControl(this.control);
|
|
}
|
|
/** @private */
|
|
hostDisconnected() {
|
|
this.setCurrentControl(null);
|
|
}
|
|
setCurrentControl(t) {
|
|
this.onControlChange(this.currentControl, t), this.currentControl = t;
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const R = ["focusin", "focusout", "pointerdown"];
|
|
class v extends C {
|
|
constructor() {
|
|
super(...arguments), this.visible = !1, this.inward = !1, this.attachableController = new E(this, this.onControlChange.bind(this));
|
|
}
|
|
get htmlFor() {
|
|
return this.attachableController.htmlFor;
|
|
}
|
|
set htmlFor(t) {
|
|
this.attachableController.htmlFor = t;
|
|
}
|
|
get control() {
|
|
return this.attachableController.control;
|
|
}
|
|
set control(t) {
|
|
this.attachableController.control = t;
|
|
}
|
|
attach(t) {
|
|
this.attachableController.attach(t);
|
|
}
|
|
detach() {
|
|
this.attachableController.detach();
|
|
}
|
|
connectedCallback() {
|
|
super.connectedCallback(), this.setAttribute("aria-hidden", "true");
|
|
}
|
|
/** @private */
|
|
handleEvent(t) {
|
|
var e;
|
|
if (!t[b]) {
|
|
switch (t.type) {
|
|
default:
|
|
return;
|
|
case "focusin":
|
|
this.visible = ((e = this.control) == null ? void 0 : e.matches(":focus-visible")) ?? !1;
|
|
break;
|
|
case "focusout":
|
|
case "pointerdown":
|
|
this.visible = !1;
|
|
break;
|
|
}
|
|
t[b] = !0;
|
|
}
|
|
}
|
|
onControlChange(t, e) {
|
|
for (const r of R)
|
|
t == null || t.removeEventListener(r, this), e == null || e.addEventListener(r, this);
|
|
}
|
|
update(t) {
|
|
t.has("visible") && this.dispatchEvent(new Event("visibility-changed")), super.update(t);
|
|
}
|
|
}
|
|
a([
|
|
m({ type: Boolean, reflect: !0 })
|
|
], v.prototype, "visible", void 0);
|
|
a([
|
|
m({ type: Boolean, reflect: !0 })
|
|
], v.prototype, "inward", void 0);
|
|
const b = Symbol("handledByFocusRing");
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const k = w`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let f = class extends v {
|
|
};
|
|
f.styles = [k];
|
|
f = a([
|
|
y("md-focus-ring")
|
|
], f);
|
|
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const L = 450, g = 225, F = 0.2, M = 10, O = 75, z = 0.35, D = "::after", G = "forwards";
|
|
var o;
|
|
(function(i) {
|
|
i[i.INACTIVE = 0] = "INACTIVE", i[i.TOUCH_DELAY = 1] = "TOUCH_DELAY", i[i.HOLDING = 2] = "HOLDING", i[i.WAITING_FOR_CLICK = 3] = "WAITING_FOR_CLICK";
|
|
})(o || (o = {}));
|
|
const B = [
|
|
"click",
|
|
"contextmenu",
|
|
"pointercancel",
|
|
"pointerdown",
|
|
"pointerenter",
|
|
"pointerleave",
|
|
"pointerup"
|
|
], $ = 150, u = window.matchMedia("(forced-colors: active)");
|
|
class h extends C {
|
|
constructor() {
|
|
super(...arguments), this.disabled = !1, this.hovered = !1, this.pressed = !1, this.rippleSize = "", this.rippleScale = "", this.initialSize = 0, this.state = o.INACTIVE, this.checkBoundsAfterContextMenu = !1, this.attachableController = new E(this, this.onControlChange.bind(this));
|
|
}
|
|
get htmlFor() {
|
|
return this.attachableController.htmlFor;
|
|
}
|
|
set htmlFor(t) {
|
|
this.attachableController.htmlFor = t;
|
|
}
|
|
get control() {
|
|
return this.attachableController.control;
|
|
}
|
|
set control(t) {
|
|
this.attachableController.control = t;
|
|
}
|
|
attach(t) {
|
|
this.attachableController.attach(t);
|
|
}
|
|
detach() {
|
|
this.attachableController.detach();
|
|
}
|
|
connectedCallback() {
|
|
super.connectedCallback(), this.setAttribute("aria-hidden", "true");
|
|
}
|
|
render() {
|
|
const t = {
|
|
hovered: this.hovered,
|
|
pressed: this.pressed
|
|
};
|
|
return S`<div class="surface ${P(t)}"></div>`;
|
|
}
|
|
update(t) {
|
|
t.has("disabled") && this.disabled && (this.hovered = !1, this.pressed = !1), super.update(t);
|
|
}
|
|
/**
|
|
* TODO(b/269799771): make private
|
|
* @private only public for slider
|
|
*/
|
|
handlePointerenter(t) {
|
|
this.shouldReactToEvent(t) && (this.hovered = !0);
|
|
}
|
|
/**
|
|
* TODO(b/269799771): make private
|
|
* @private only public for slider
|
|
*/
|
|
handlePointerleave(t) {
|
|
this.shouldReactToEvent(t) && (this.hovered = !1, this.state !== o.INACTIVE && this.endPressAnimation());
|
|
}
|
|
handlePointerup(t) {
|
|
if (this.shouldReactToEvent(t)) {
|
|
if (this.state === o.HOLDING) {
|
|
this.state = o.WAITING_FOR_CLICK;
|
|
return;
|
|
}
|
|
if (this.state === o.TOUCH_DELAY) {
|
|
this.state = o.WAITING_FOR_CLICK, this.startPressAnimation(this.rippleStartEvent);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
async handlePointerdown(t) {
|
|
if (this.shouldReactToEvent(t)) {
|
|
if (this.rippleStartEvent = t, !this.isTouch(t)) {
|
|
this.state = o.WAITING_FOR_CLICK, this.startPressAnimation(t);
|
|
return;
|
|
}
|
|
this.checkBoundsAfterContextMenu && !this.inBounds(t) || (this.checkBoundsAfterContextMenu = !1, this.state = o.TOUCH_DELAY, await new Promise((e) => {
|
|
setTimeout(e, $);
|
|
}), this.state === o.TOUCH_DELAY && (this.state = o.HOLDING, this.startPressAnimation(t)));
|
|
}
|
|
}
|
|
handleClick() {
|
|
if (!this.disabled) {
|
|
if (this.state === o.WAITING_FOR_CLICK) {
|
|
this.endPressAnimation();
|
|
return;
|
|
}
|
|
this.state === o.INACTIVE && (this.startPressAnimation(), this.endPressAnimation());
|
|
}
|
|
}
|
|
handlePointercancel(t) {
|
|
this.shouldReactToEvent(t) && this.endPressAnimation();
|
|
}
|
|
handleContextmenu() {
|
|
this.disabled || (this.checkBoundsAfterContextMenu = !0, this.endPressAnimation());
|
|
}
|
|
determineRippleSize() {
|
|
const { height: t, width: e } = this.getBoundingClientRect(), r = Math.max(t, e), n = Math.max(z * r, O), s = Math.floor(r * F), d = Math.sqrt(e ** 2 + t ** 2) + M;
|
|
this.initialSize = s, this.rippleScale = `${(d + n) / s}`, this.rippleSize = `${s}px`;
|
|
}
|
|
getNormalizedPointerEventCoords(t) {
|
|
const { scrollX: e, scrollY: r } = window, { left: n, top: s } = this.getBoundingClientRect(), l = e + n, d = r + s, { pageX: x, pageY: T } = t;
|
|
return { x: x - l, y: T - d };
|
|
}
|
|
getTranslationCoordinates(t) {
|
|
const { height: e, width: r } = this.getBoundingClientRect(), n = {
|
|
x: (r - this.initialSize) / 2,
|
|
y: (e - this.initialSize) / 2
|
|
};
|
|
let s;
|
|
return t instanceof PointerEvent ? s = this.getNormalizedPointerEventCoords(t) : s = {
|
|
x: r / 2,
|
|
y: e / 2
|
|
}, s = {
|
|
x: s.x - this.initialSize / 2,
|
|
y: s.y - this.initialSize / 2
|
|
}, { startPoint: s, endPoint: n };
|
|
}
|
|
startPressAnimation(t) {
|
|
var l;
|
|
if (!this.mdRoot)
|
|
return;
|
|
this.pressed = !0, (l = this.growAnimation) == null || l.cancel(), this.determineRippleSize();
|
|
const { startPoint: e, endPoint: r } = this.getTranslationCoordinates(t), n = `${e.x}px, ${e.y}px`, s = `${r.x}px, ${r.y}px`;
|
|
this.growAnimation = this.mdRoot.animate({
|
|
top: [0, 0],
|
|
left: [0, 0],
|
|
height: [this.rippleSize, this.rippleSize],
|
|
width: [this.rippleSize, this.rippleSize],
|
|
transform: [
|
|
`translate(${n}) scale(1)`,
|
|
`translate(${s}) scale(${this.rippleScale})`
|
|
]
|
|
}, {
|
|
pseudoElement: D,
|
|
duration: L,
|
|
easing: N.STANDARD,
|
|
fill: G
|
|
});
|
|
}
|
|
async endPressAnimation() {
|
|
this.rippleStartEvent = void 0, this.state = o.INACTIVE;
|
|
const t = this.growAnimation;
|
|
let e = 1 / 0;
|
|
if (typeof (t == null ? void 0 : t.currentTime) == "number" ? e = t.currentTime : t != null && t.currentTime && (e = t.currentTime.to("ms").value), e >= g) {
|
|
this.pressed = !1;
|
|
return;
|
|
}
|
|
await new Promise((r) => {
|
|
setTimeout(r, g - e);
|
|
}), this.growAnimation === t && (this.pressed = !1);
|
|
}
|
|
/**
|
|
* 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(t) {
|
|
if (this.disabled || !t.isPrimary || this.rippleStartEvent && this.rippleStartEvent.pointerId !== t.pointerId)
|
|
return !1;
|
|
if (t.type === "pointerenter" || t.type === "pointerleave")
|
|
return !this.isTouch(t);
|
|
const e = t.buttons === 1;
|
|
return this.isTouch(t) || e;
|
|
}
|
|
/**
|
|
* Check if the event is within the bounds of the element.
|
|
*
|
|
* This is only needed for the "stuck" contextmenu longpress on Chrome.
|
|
*/
|
|
inBounds({ x: t, y: e }) {
|
|
const { top: r, left: n, bottom: s, right: l } = this.getBoundingClientRect();
|
|
return t >= n && t <= l && e >= r && e <= s;
|
|
}
|
|
isTouch({ pointerType: t }) {
|
|
return t === "touch";
|
|
}
|
|
/** @private */
|
|
async handleEvent(t) {
|
|
if (!(u != null && u.matches))
|
|
switch (t.type) {
|
|
case "click":
|
|
this.handleClick();
|
|
break;
|
|
case "contextmenu":
|
|
this.handleContextmenu();
|
|
break;
|
|
case "pointercancel":
|
|
this.handlePointercancel(t);
|
|
break;
|
|
case "pointerdown":
|
|
await this.handlePointerdown(t);
|
|
break;
|
|
case "pointerenter":
|
|
this.handlePointerenter(t);
|
|
break;
|
|
case "pointerleave":
|
|
this.handlePointerleave(t);
|
|
break;
|
|
case "pointerup":
|
|
this.handlePointerup(t);
|
|
break;
|
|
}
|
|
}
|
|
onControlChange(t, e) {
|
|
for (const r of B)
|
|
t == null || t.removeEventListener(r, this), e == null || e.addEventListener(r, this);
|
|
}
|
|
}
|
|
a([
|
|
m({ type: Boolean, reflect: !0 })
|
|
], h.prototype, "disabled", void 0);
|
|
a([
|
|
A()
|
|
], h.prototype, "hovered", void 0);
|
|
a([
|
|
A()
|
|
], h.prototype, "pressed", void 0);
|
|
a([
|
|
_(".surface")
|
|
], h.prototype, "mdRoot", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const H = w`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let p = class extends h {
|
|
};
|
|
p.styles = [H];
|
|
p = a([
|
|
y("md-ripple")
|
|
], p);
|