@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
50 lines • 3.09 kB
JavaScript
var e=this&&this.__decorate||function(e,t,o,i){var s,r=arguments.length,n=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(n=(r<3?s(n):r>3?s(t,o,n):s(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n},t=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};import{WiredBase as o,BaseCSS as i}from"./wired-base.js";import{rectangle as s,hachureEllipseFill as r,ellipse as n,svgNode as d}from"./wired-lib.js";import{css as c,html as a}from"../../lit/index.js";import{customElement as h,property as l,query as p}from"../../lit/decorators.js";let b=class WiredToggle extends o{constructor(){super(...arguments),this.checked=!1,this.disabled=!1}static get styles(){return[i,c`
:host {
display: inline-block;
cursor: pointer;
position: relative;
outline: none;
}
:host([disabled]) {
opacity: 0.4 !important;
cursor: default;
pointer-events: none;
}
:host([disabled]) svg {
background: rgba(0, 0, 0, 0.07);
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
cursor: pointer;
opacity: 0;
}
.knob {
transition: transform 0.3s ease;
}
.knob path {
stroke-width: 0.7;
}
.knob.checked {
transform: translateX(48px);
}
path.knobfill {
stroke-width: 3 !important;
fill: transparent;
}
.knob.unchecked path.knobfill {
stroke: var(--wired-toggle-off-color, gray);
}
.knob.checked path.knobfill {
stroke: var(--wired-toggle-on-color, rgb(63, 81, 181));
}
`]}render(){return a`
<div style="position: relative;">
<svg></svg>
<input type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ="${this.onChange}">
</div>
`}focus(){this.input?this.input.focus():super.focus()}wiredRender(e=!1){super.wiredRender(e),this.refreshKnob()}onChange(){this.checked=this.input.checked,this.refreshKnob(),this.fire("change",{checked:this.checked})}canvasSize(){return[80,34]}draw(e,t){s(e,16,8,t[0]-32,18,this.seed).classList.add("toggle-bar"),this.knob=d("g"),this.knob.classList.add("knob"),e.appendChild(this.knob);const o=r(16,16,32,32,this.seed);o.classList.add("knobfill"),this.knob.appendChild(o),n(this.knob,16,16,32,32,this.seed)}refreshKnob(){if(this.knob){const e=this.knob.classList;this.checked?(e.remove("unchecked"),e.add("checked")):(e.remove("checked"),e.add("unchecked"))}}};e([l({type:Boolean}),t("design:type",Object)],b.prototype,"checked",void 0),e([l({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"disabled",void 0),e([p("input"),t("design:type",HTMLInputElement)],b.prototype,"input",void 0),b=e([h("wired-toggle")],b);export{b as WiredToggle};