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}"  @change="${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};