@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
66 lines (65 loc) • 2.61 kB
JavaScript
import { property as o } from "lit/decorators.js";
import { unsafeCSS as h, LitElement as d, html as p } from "lit";
import "../typography/register.mjs";
import { classMap as b } from "lit/directives/class-map.js";
import "../typography/typography.mjs";
const u = `:host{display:inline-block;position:relative;width:44px;height:20px;cursor:pointer}.track{position:relative;display:inline-block;width:100%;height:100%;background-color:var(--wolf-switch-color, var(--wolf-background-color-darker));border-radius:20px;transition:background-color .15s ease-out}.track .thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background-color:#fff;border-radius:50%;box-shadow:0 2px 5px #0003;transition:transform .15s}.track.checked{background-color:var(--wolf-switch-color, var(--wolf-color-primary))}.track.checked .thumb{transform:translate(24px)}.thumb-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.thumb-content>*{pointer-events:none}:host([disabled]){pointer-events:none;opacity:.5}
`;
var k = Object.defineProperty, f = Object.getOwnPropertyDescriptor, c = (s, i, n, r) => {
for (var e = r > 1 ? void 0 : r ? f(i, n) : i, a = s.length - 1, l; a >= 0; a--)
(l = s[a]) && (e = (r ? l(i, n, e) : l(e)) || e);
return r && e && k(i, n, e), e;
};
const g = "wolf-switch";
class t extends d {
constructor() {
super(...arguments), this.checked = !1, this.disabled = !1, this.color = "var(--wolf-color-primary)", this.label = "", this.activeIcon = "check", this.inactiveIcon = "close";
}
connectedCallback() {
super.connectedCallback(), this.onclick = this.handleClick;
}
handleClick() {
this.disabled || (this.checked = !this.checked, this.dispatchEvent(
new CustomEvent("change", {
bubbles: !0,
composed: !0,
detail: { checked: this.checked }
})
));
}
render() {
return p`
<div class="track" class=${b({ track: !0, checked: this.checked, disabled: this.disabled })}>
<div class="thumb">
<div class="thumb-content">
<slot name="checked-icon" ?hidden=${!this.checked}></slot>
<slot name="unchecked-icon" ?hidden=${this.checked}></slot>
</div>
</div>
</div>
`;
}
}
t.styles = h(u);
c([
o({ type: Boolean })
], t.prototype, "checked", 2);
c([
o({ type: Boolean })
], t.prototype, "disabled", 2);
c([
o()
], t.prototype, "color", 2);
c([
o()
], t.prototype, "label", 2);
c([
o()
], t.prototype, "activeIcon", 2);
c([
o()
], t.prototype, "inactiveIcon", 2);
export {
t as WolfSwitch,
g as tagName
};