pyro
Version:
Pyro custom elements
95 lines (94 loc) • 3.37 kB
JavaScript
import { i as n, r as d, x as p, t as b } from "./custom-element-CWJsDAat.js";
import { n as h } from "./property-Bf-I6Ep_.js";
import { e as u } from "./query-Ddbd72Um.js";
import { o as k } from "./unsafe-html-DZSpJPU8.js";
const v = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
<path fill="currentColor" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/>
</svg>`;
var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (o, t, a, c) => {
for (var e = c > 1 ? void 0 : c ? y(t, a) : t, s = o.length - 1, l; s >= 0; s--)
(l = o[s]) && (e = (c ? l(t, a, e) : l(e)) || e);
return c && e && m(t, a, e), e;
};
let r = class extends d {
constructor() {
super(...arguments), this.checked = !1, this.disabled = !1, this.value = this.checked, this.handleClick = (o) => {
this.checked = !this.checked, this.value = this.checked, this.checked === !1 && (o.stopImmediatePropagation(), this._input.dispatchEvent(
new Event("input", {
bubbles: !0,
cancelable: !1,
composed: !0
})
));
};
}
connectedCallback() {
super.connectedCallback(), this.value = this.checked;
}
render() {
return p`
<slot name="icon" .hidden=${!this.checked}>${k(v)}</slot>
<input type="checkbox" .checked="${this.checked}" .disabled="${this.disabled}" =${this.handleClick} />
`;
}
};
r.styles = n`
:host {
display: grid;
grid-template-areas: 'stack';
margin: 0;
color: var(--pyro-checkbox-text-color, var(--pyro-text-color));
background: var(--pyro-checkbox-surface-color, var(--pyro-surface-color));
border: var(--pyro-checkbox-border, var(--pyro-border));
height: var(--pyro-checkbox-height, 1em);
width: var(--pyro-checkbox-width, 1em);
border-radius: var(--pyro-checkbox-border-radius, var(--pyro-border-radius));
}
input {
appearance: none;
font-size: inherit;
margin: 0;
width: 100%;
height: 100%;
}
:host(:not([disabled])[checked]) {
background: var(--pyro-checkbox-accent-color, var(--pyro-accent-color));
}
:host([disabled]) {
background: var(--pyro-checkbox-disabled-color, var(--pyro-disabled-color));
}
.pyro-checkbox {
display: grid;
align-items: center;
}
input,
::slotted([slot='icon']),
slot[name='icon'] > * {
grid-area: stack;
justify-content: center;
align-self: center;
justify-self: center;
}
slot[name='icon'] > * {
max-width: 0.8em;
max-height: 0.8em;
}
::slotted([slot='icon']) {
font-size: 0.8em;
}
`;
i([
h({ type: Boolean, reflect: !0 })
], r.prototype, "checked", 2);
i([
h({ type: Boolean, reflect: !0 })
], r.prototype, "disabled", 2);
i([
u("input")
], r.prototype, "_input", 2);
r = i([
b("pyro-checkbox")
], r);
export {
r as PyroCheckbox
};