web-ui-pack
Version:
Web package with UI elements
63 lines (62 loc) • 2.08 kB
JavaScript
import { WUPCssIconHover, WUPcssIcon } from "../styles";
import WUPSwitchControl from "./switch";
const tagName = "wup-check";
export default class WUPCheckControl extends WUPSwitchControl {
#ctr = this.constructor;
static get $styleRoot() {
return `:root {
--ctrl-check-off-bg: #fff;
--ctrl-check-on-bg: #00778d;
--ctrl-check-on: #fff;
--ctrl-check-border-r: 3px;
--ctrl-check-shadow: #0003;
--ctrl-check-size: 16px;
}
[wupdark] {
--ctrl-check-off-bg: #e7e7e7;
--ctrl-check-shadow: #000;
}`;
}
static get $style() {
return `${super.$style}
:host [icon] {
position: initial;
height: var(--ctrl-check-size);
width: var(--ctrl-check-size);
min-width: var(--ctrl-check-size);
border-radius: var(--ctrl-check-border-r);
background: var(--ctrl-check-off-bg);
box-shadow: 0 0 2px 0 var(--ctrl-check-shadow);
}
:host[checked] [icon] {
background: var(--ctrl-check-on-bg);
}
:host[checked] [icon]:after {
--ctrl-icon: var(--ctrl-check-on);
--ctrl-icon-img: var(--wup-icon-check);
${WUPcssIcon}
content: "";
top: 0; left: 0;
padding: 0;
border-radius: 0;
height: 100%; width: 100%;
}
${WUPCssIconHover(":host", "[icon]")}
not all and (prefers-reduced-motion) {
:host [icon] { transition: background-color var(--anim); }
}`;
}
static $defaults = {
...WUPSwitchControl.$defaults,
};
renderControl() {
this.$refInput.id = this.#ctr.$uniqueId;
this.$refLabel.setAttribute("for", this.$refInput.id);
this.$refInput.type = "checkbox";
this.$refLabel.appendChild(this.$refInput);
this.$refLabel.appendChild(this.$refTitle);
this.$refLabel.appendChild(document.createElement("span")).setAttribute("icon", "");
this.appendChild(this.$refLabel);
}
}
customElements.define(tagName, WUPCheckControl);