275 lines
11 KiB
JavaScript
275 lines
11 KiB
JavaScript
import { jsx as x } from "react/jsx-runtime";
|
|
import w from "react";
|
|
import { o as C } from "./create-component-CVXl33PD.mjs";
|
|
import { _ as h, n as y, r as E, x as I, c as R, a as S, b as A } from "./class-map-CwiboTfb.mjs";
|
|
import "./ripple-pQcEjR05.mjs";
|
|
import { a as q } from "./animation-DjClVFum.mjs";
|
|
import { i as L } from "./form-label-activation-ed0HgVsy.mjs";
|
|
import { V as $, m as F, c as z, g as D } from "./validator-DZt1_yHv.mjs";
|
|
import { m as T, i as k } from "./element-internals-3IY9gE4L.mjs";
|
|
import { m as V } from "./focusable-CDJoU7XD.mjs";
|
|
import { m as K, g as M, a as _ } from "./form-associated-CyYeHPMb.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
class B extends $ {
|
|
computeValidity(e) {
|
|
this.radioElement || (this.radioElement = document.createElement("input"), this.radioElement.type = "radio", this.radioElement.name = "group");
|
|
let i = !1, t = !1;
|
|
for (const { checked: o, required: r } of e)
|
|
r && (i = !0), o && (t = !0);
|
|
return this.radioElement.checked = t, this.radioElement.required = i, {
|
|
validity: {
|
|
valueMissing: i && !t
|
|
},
|
|
validationMessage: this.radioElement.validationMessage
|
|
};
|
|
}
|
|
equals(e, i) {
|
|
if (e.length !== i.length)
|
|
return !1;
|
|
for (let t = 0; t < e.length; t++) {
|
|
const o = e[t], r = i[t];
|
|
if (o.checked !== r.checked || o.required !== r.required)
|
|
return !1;
|
|
}
|
|
return !0;
|
|
}
|
|
copy(e) {
|
|
return e.map(({ checked: i, required: t }) => ({
|
|
checked: i,
|
|
required: t
|
|
}));
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
class O {
|
|
/**
|
|
* All single selection elements in the host element's root with the same
|
|
* `name` attribute, including the host element.
|
|
*/
|
|
get controls() {
|
|
const e = this.host.getAttribute("name");
|
|
return !e || !this.root || !this.host.isConnected ? [this.host] : Array.from(this.root.querySelectorAll(`[name="${e}"]`));
|
|
}
|
|
constructor(e) {
|
|
this.host = e, this.focused = !1, this.root = null, this.handleFocusIn = () => {
|
|
this.focused = !0, this.updateTabIndices();
|
|
}, this.handleFocusOut = () => {
|
|
this.focused = !1, this.updateTabIndices();
|
|
}, this.handleKeyDown = (i) => {
|
|
const t = i.key === "ArrowDown", o = i.key === "ArrowUp", r = i.key === "ArrowLeft", u = i.key === "ArrowRight";
|
|
if (!r && !u && !t && !o)
|
|
return;
|
|
const a = this.controls;
|
|
if (!a.length)
|
|
return;
|
|
i.preventDefault();
|
|
const p = getComputedStyle(this.host).direction === "rtl" ? r || t : u || t, l = a.indexOf(this.host);
|
|
let s = p ? l + 1 : l - 1;
|
|
for (; s !== l; ) {
|
|
s >= a.length ? s = 0 : s < 0 && (s = a.length - 1);
|
|
const c = a[s];
|
|
if (c.hasAttribute("disabled")) {
|
|
p ? s++ : s--;
|
|
continue;
|
|
}
|
|
for (const n of a)
|
|
n !== c && (n.checked = !1, n.tabIndex = -1, n.blur());
|
|
c.checked = !0, c.tabIndex = 0, c.focus(), c.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
break;
|
|
}
|
|
};
|
|
}
|
|
hostConnected() {
|
|
this.root = this.host.getRootNode(), this.host.addEventListener("keydown", this.handleKeyDown), this.host.addEventListener("focusin", this.handleFocusIn), this.host.addEventListener("focusout", this.handleFocusOut), this.host.checked && this.uncheckSiblings(), this.updateTabIndices();
|
|
}
|
|
hostDisconnected() {
|
|
this.host.removeEventListener("keydown", this.handleKeyDown), this.host.removeEventListener("focusin", this.handleFocusIn), this.host.removeEventListener("focusout", this.handleFocusOut), this.updateTabIndices(), this.root = null;
|
|
}
|
|
/**
|
|
* Should be called whenever the host's `checked` property changes
|
|
* synchronously.
|
|
*/
|
|
handleCheckedChange() {
|
|
this.host.checked && (this.uncheckSiblings(), this.updateTabIndices());
|
|
}
|
|
uncheckSiblings() {
|
|
for (const e of this.controls)
|
|
e !== this.host && (e.checked = !1);
|
|
}
|
|
/**
|
|
* Updates the `tabindex` of the host and its siblings.
|
|
*/
|
|
updateTabIndices() {
|
|
const e = this.controls, i = e.find((t) => t.checked);
|
|
if (i || this.focused) {
|
|
const t = i || this.host;
|
|
t.tabIndex = 0;
|
|
for (const o of e)
|
|
o !== t && (o.tabIndex = -1);
|
|
return;
|
|
}
|
|
for (const t of e)
|
|
t.tabIndex = 0;
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2018 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
var g;
|
|
const v = Symbol("checked");
|
|
let N = 0;
|
|
const U = F(K(T(V(E))));
|
|
let m = class extends U {
|
|
/**
|
|
* Whether or not the radio is selected.
|
|
*/
|
|
get checked() {
|
|
return this[v];
|
|
}
|
|
set checked(e) {
|
|
const i = this.checked;
|
|
i !== e && (this[v] = e, this.requestUpdate("checked", i), this.selectionController.handleCheckedChange());
|
|
}
|
|
constructor() {
|
|
super(), this.maskId = `cutout${++N}`, this[g] = !1, this.required = !1, this.value = "on", this.selectionController = new O(this), this.addController(this.selectionController), this[k].role = "radio", this.addEventListener("click", this.handleClick.bind(this)), this.addEventListener("keydown", this.handleKeydown.bind(this));
|
|
}
|
|
render() {
|
|
const e = { checked: this.checked };
|
|
return I`
|
|
<div class="container ${R(e)}" aria-hidden="true">
|
|
<md-ripple
|
|
part="ripple"
|
|
.control=${this}
|
|
?disabled=${this.disabled}></md-ripple>
|
|
<md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
|
|
<svg class="icon" viewBox="0 0 20 20">
|
|
<mask id="${this.maskId}">
|
|
<rect width="100%" height="100%" fill="white" />
|
|
<circle cx="10" cy="10" r="8" fill="black" />
|
|
</mask>
|
|
<circle
|
|
class="outer circle"
|
|
cx="10"
|
|
cy="10"
|
|
r="10"
|
|
mask="url(#${this.maskId})" />
|
|
<circle class="inner circle" cx="10" cy="10" r="5" />
|
|
</svg>
|
|
|
|
<div class="touch-target"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
updated() {
|
|
this[k].ariaChecked = String(this.checked);
|
|
}
|
|
async handleClick(e) {
|
|
this.disabled || (await 0, !e.defaultPrevented && (L(e) && this.focus(), this.checked = !0, this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }))));
|
|
}
|
|
async handleKeydown(e) {
|
|
await 0, !(e.key !== " " || e.defaultPrevented) && this.click();
|
|
}
|
|
[(g = v, M)]() {
|
|
return this.checked ? this.value : null;
|
|
}
|
|
[_]() {
|
|
return String(this.checked);
|
|
}
|
|
formResetCallback() {
|
|
this.checked = this.hasAttribute("checked");
|
|
}
|
|
formStateRestoreCallback(e) {
|
|
this.checked = e === "true";
|
|
}
|
|
[z]() {
|
|
return new B(() => this.selectionController ? this.selectionController.controls : [this]);
|
|
}
|
|
[D]() {
|
|
return this.container;
|
|
}
|
|
};
|
|
h([
|
|
y({ type: Boolean })
|
|
], m.prototype, "checked", null);
|
|
h([
|
|
y({ type: Boolean })
|
|
], m.prototype, "required", void 0);
|
|
h([
|
|
y()
|
|
], m.prototype, "value", void 0);
|
|
h([
|
|
q(".container")
|
|
], m.prototype, "container", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const P = S`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let f = class extends m {
|
|
};
|
|
f.styles = [P];
|
|
f = h([
|
|
A("md-radio")
|
|
], f);
|
|
const j = C({
|
|
react: w,
|
|
tagName: "md-radio",
|
|
elementClass: f
|
|
}), re = (d) => {
|
|
const {
|
|
checked: e,
|
|
value: i,
|
|
required: t,
|
|
disabled: o,
|
|
name: r,
|
|
ariaLabel: u,
|
|
className: a,
|
|
style: b,
|
|
id: p,
|
|
iconColor: l,
|
|
selectedIconColor: s,
|
|
iconSize: c,
|
|
...n
|
|
} = d;
|
|
return /* @__PURE__ */ x(
|
|
j,
|
|
{
|
|
checked: e,
|
|
value: i,
|
|
required: t,
|
|
disabled: o || !1,
|
|
name: r,
|
|
className: a,
|
|
style: {
|
|
...b,
|
|
"--md-radio-icon-color": l || "var(--md-sys-on-surface-variant)",
|
|
"--md-radio-selected-icon-color": s || "var(--md-sys-color-primary)",
|
|
"--md-radio-icon-size": c || "20px"
|
|
},
|
|
id: p,
|
|
"aria-label": u,
|
|
...n
|
|
}
|
|
);
|
|
};
|
|
export {
|
|
re as Radio
|
|
};
|