177 lines
11 KiB
JavaScript
177 lines
11 KiB
JavaScript
import { jsx as R } from "react/jsx-runtime";
|
|
import V from "react";
|
|
import { o as _ } from "./create-component-CVXl33PD.mjs";
|
|
import { r as v, _ as t, n as d, c as q, x as E, E as m, a as F, b as T } from "./class-map-CwiboTfb.mjs";
|
|
import "./ripple-pQcEjR05.mjs";
|
|
import { r as b, a as M } from "./animation-DjClVFum.mjs";
|
|
import { m as S } from "./delegate-BXi1gVeU.mjs";
|
|
import { i as G, d as L } from "./form-label-activation-ed0HgVsy.mjs";
|
|
import { r as N } from "./redispatch-event-taWUbWUt.mjs";
|
|
import { m as O, c as Y, g as j } from "./validator-DZt1_yHv.mjs";
|
|
import { m as H } from "./element-internals-3IY9gE4L.mjs";
|
|
import { m as J, g as K, a as P } from "./form-associated-CyYeHPMb.mjs";
|
|
import { C as Q } from "./checkbox-validator-Cy4iemH_.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2019 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const U = S(O(J(H(v))));
|
|
let r = class extends U {
|
|
constructor() {
|
|
super(), this.checked = !1, this.indeterminate = !1, this.required = !1, this.value = "on", this.prevChecked = !1, this.prevDisabled = !1, this.prevIndeterminate = !1, this.addEventListener("click", (e) => {
|
|
!G(e) || !this.input || (this.focus(), L(this.input));
|
|
});
|
|
}
|
|
update(e) {
|
|
(e.has("checked") || e.has("disabled") || e.has("indeterminate")) && (this.prevChecked = e.get("checked") ?? this.checked, this.prevDisabled = e.get("disabled") ?? this.disabled, this.prevIndeterminate = e.get("indeterminate") ?? this.indeterminate), super.update(e);
|
|
}
|
|
render() {
|
|
const e = !this.prevChecked && !this.prevIndeterminate, o = this.prevChecked && !this.prevIndeterminate, n = this.prevIndeterminate, a = this.checked && !this.indeterminate, i = this.indeterminate, l = q({
|
|
disabled: this.disabled,
|
|
selected: a || i,
|
|
unselected: !a && !i,
|
|
checked: a,
|
|
indeterminate: i,
|
|
"prev-unselected": e,
|
|
"prev-checked": o,
|
|
"prev-indeterminate": n,
|
|
"prev-disabled": this.prevDisabled
|
|
}), { ariaLabel: h, ariaInvalid: p } = this;
|
|
return E`
|
|
<div class="container ${l}">
|
|
<input
|
|
type="checkbox"
|
|
id="input"
|
|
aria-checked=${i ? "mixed" : m}
|
|
aria-label=${h || m}
|
|
aria-invalid=${p || m}
|
|
?disabled=${this.disabled}
|
|
?required=${this.required}
|
|
.indeterminate=${this.indeterminate}
|
|
.checked=${this.checked}
|
|
@input=${this.handleInput}
|
|
@change=${this.handleChange} />
|
|
|
|
<div class="outline"></div>
|
|
<div class="background"></div>
|
|
<md-focus-ring part="focus-ring" for="input"></md-focus-ring>
|
|
<md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
|
|
<svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
|
|
<rect class="mark short" />
|
|
<rect class="mark long" />
|
|
</svg>
|
|
</div>
|
|
`;
|
|
}
|
|
handleInput(e) {
|
|
const o = e.target;
|
|
this.checked = o.checked, this.indeterminate = o.indeterminate;
|
|
}
|
|
handleChange(e) {
|
|
N(this, e);
|
|
}
|
|
[K]() {
|
|
return !this.checked || this.indeterminate ? null : this.value;
|
|
}
|
|
[P]() {
|
|
return String(this.checked);
|
|
}
|
|
formResetCallback() {
|
|
this.checked = this.hasAttribute("checked");
|
|
}
|
|
formStateRestoreCallback(e) {
|
|
this.checked = e === "true";
|
|
}
|
|
[Y]() {
|
|
return new Q(() => this);
|
|
}
|
|
[j]() {
|
|
return this.input;
|
|
}
|
|
};
|
|
r.shadowRootOptions = {
|
|
...v.shadowRootOptions,
|
|
delegatesFocus: !0
|
|
};
|
|
t([
|
|
d({ type: Boolean })
|
|
], r.prototype, "checked", void 0);
|
|
t([
|
|
d({ type: Boolean })
|
|
], r.prototype, "indeterminate", void 0);
|
|
t([
|
|
d({ type: Boolean })
|
|
], r.prototype, "required", void 0);
|
|
t([
|
|
d()
|
|
], r.prototype, "value", void 0);
|
|
t([
|
|
b()
|
|
], r.prototype, "prevChecked", void 0);
|
|
t([
|
|
b()
|
|
], r.prototype, "prevDisabled", void 0);
|
|
t([
|
|
b()
|
|
], r.prototype, "prevIndeterminate", void 0);
|
|
t([
|
|
M("input")
|
|
], r.prototype, "input", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const W = F`:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2018 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let s = class extends r {
|
|
};
|
|
s.styles = [W];
|
|
s = t([
|
|
T("md-checkbox")
|
|
], s);
|
|
const X = _({
|
|
tagName: "md-checkbox",
|
|
react: V,
|
|
elementClass: s
|
|
}), be = ({ checked: c, indeterminate: e, id: o, disabled: n, hidden: a, ariaLabel: i, ariaLabelledBy: l, ariaDescribedBy: h, ariaControls: p, required: u, onInput: k, onChange: x, onClick: f, onMouseDown: y, onMouseUp: g, onMouseEnter: w, onFocus: C, onBlur: z, className: $, style: I, tabIndex: A, name: B, ...D }) => /* @__PURE__ */ R(
|
|
X,
|
|
{
|
|
...D,
|
|
id: o,
|
|
value: c ? "on" : "off",
|
|
indeterminate: e,
|
|
disabled: n || !1,
|
|
required: u,
|
|
checked: c,
|
|
hidden: a,
|
|
"touch-target": "wrapper",
|
|
"aria-label": i,
|
|
"aria-labelledby": l,
|
|
"aria-describedby": h,
|
|
"aria-controls": p,
|
|
"aria-required": u,
|
|
onInput: k,
|
|
onChange: x,
|
|
onClick: f,
|
|
onMouseDown: y,
|
|
onMouseUp: g,
|
|
onMouseEnter: w,
|
|
onFocus: C,
|
|
onBlur: z,
|
|
className: $,
|
|
style: I,
|
|
tabIndex: A,
|
|
name: B || void 0
|
|
}
|
|
);
|
|
export {
|
|
be as Checkbox
|
|
};
|