{"version":3,"sources":["elements/toggle-switch.ts"],"names":["ToggleSwitch","HTMLElement","constructor","useDefaultStyles","super","this","_useDefaultStyles","_checked","_disabled","readAttributes","undefined","attachShadow","mode","container","shadowRoot","checked","value","setAttribute","removeAttribute","disabled","buildDom","link","document","createElement","rel","href","import","meta","resolve","appendChild","surface","knob","classList","add","tabIndex","addEventListener","e","key","preventDefault","publishOnChangeEvent","dispatchEvent","Event","bubbles","onDisabledChanged","hasAttribute","getAttribute","toLowerCase","connectedCallback","attributeChangedCallback","name","_","newValue","observedAttributes","customElements","define"],"mappings":"MAAaA,qBAAqBC,YAC9BC,YAAYC,GACRC,MAAK,EAiDDC,KAAAC,kBAAoB,CAAA,EACpBD,KAAAE,SAAoB,CAAA,EACpBF,KAAAG,UAAqB,CAAA,EAlDzBH,KAAKI,eAAc,EAEMC,KAAAA,IAArBP,IACAE,KAAKC,kBAAoBH,GAGzBE,KAAKC,mBACLD,KAAKM,aAAa,CAACC,KAAM,MAAM,CAAC,EAChCP,KAAKQ,UAAYR,KAAKS,YAEtBT,KAAKQ,UAAYR,IAEzB,CAKAU,cACI,OAAOV,KAAKE,QAChB,CAEAQ,YAAmBC,IACfX,KAAKE,SAAWS,GAGZX,KAAKY,aAAa,UAAW,EAAE,EAE/BZ,KAAKa,gBAAgB,SAAS,CAEtC,CAEAC,eACI,OAAOd,KAAKG,SAChB,CAEAW,aAAoBH,IAChBX,KAAKG,UAAYQ,GAGbX,KAAKY,aAAa,WAAY,EAAE,EAEhCZ,KAAKa,gBAAgB,UAAU,CAEvC,CAUQE,WAEAf,KAAKC,qBACCe,EAAOC,SAASC,cAAc,MAAM,GACrCC,IAAM,aACXH,EAAKI,KAAOC,OAAOC,KAAKC,QAAQ,qBAAqB,EACrDvB,KAAKQ,UAAUgB,YAAYR,CAAI,GAJnC,IAQMS,EAAUR,SAASC,cAAc,KAAK,EAItCQ,GAHND,EAAQE,UAAUC,IAAI,SAAS,EAC/B5B,KAAKQ,UAAUgB,YAAYC,CAAO,EAErBR,SAASC,cAAc,KAAK,GACzCQ,EAAKC,UAAUC,IAAI,MAAM,EACzB5B,KAAKQ,UAAUgB,YAAYE,CAAI,EAG1B1B,KAAKc,WACNd,KAAK6B,SAAW,GAIpB7B,KAAK8B,iBAAiB,QAAS,KACtB9B,KAAKc,WACNd,KAAKU,QAAU,CAACV,KAAKU,QAE7B,CAAC,EAEDV,KAAK8B,iBAAiB,UAAW,IACxB9B,KAAKc,UAAuB,MAAViB,EAAEC,KAAyB,UAAVD,EAAEC,MACtCD,EAAEE,eAAc,EAChBjC,KAAKU,QAAU,CAACV,KAAKU,QAE7B,CAAC,CACL,CAEQwB,uBACJlC,KAAKmC,cAAc,IAAIC,MAAM,SAAU,CAACC,QAAS,CAAA,CAAI,CAAC,CAAC,CAC3D,CAEQC,oBACAtC,KAAKG,UACLH,KAAKa,gBAAgB,UAAU,EAE/Bb,KAAK6B,SAAW,CAExB,CAEQzB,iBACJJ,KAAKC,kBACD,CAACD,KAAKuC,aAAa,QAAQ,GACsB,UAA9CvC,KAAKwC,aAAa,QAAQ,EAAEC,YAAW,EAE1CzC,KAAKuC,aAAa,SAAS,IAC3BvC,KAAKE,SAAW,CAAA,GAGhBF,KAAKuC,aAAa,UAAU,IAC5BvC,KAAKG,UAAY,CAAA,EAEzB,CAIAuC,oBACI1C,KAAKe,SAAQ,CACjB,CAEA4B,yBAAyBC,EAAcC,EAAUC,GAChC,YAATF,IACA5C,KAAKE,SAAwB,OAAb4C,EAChB9C,KAAKkC,qBAAoB,GAGhB,aAATU,IACA5C,KAAKG,UAAyB,OAAb2C,EACjB9C,KAAKsC,kBAAiB,EAE9B,C,CAtHc3C,aAAAoD,mBAAqB,CAAC,UAAW,YAyHnDC,eAAeC,OAAO,gBAAiBtD,YAAY,SA3ItCA,YA2IuC","file":"toggle-switch.js","sourcesContent":["export class ToggleSwitch extends HTMLElement {\n    constructor(useDefaultStyles?: boolean) {\n        super();\n        this.readAttributes();\n\n        if (useDefaultStyles !== undefined) {\n            this._useDefaultStyles = useDefaultStyles;\n        }\n\n        if (this._useDefaultStyles) {\n            this.attachShadow({mode: \"open\"});\n            this.container = this.shadowRoot;\n        } else {\n            this.container = this;\n        }\n    }\n\n    /* #region Public */\n    public static observedAttributes = [\"checked\", \"disabled\"];\n\n    public get checked() {\n        return this._checked;\n    }\n\n    public set checked(value) {\n        this._checked = value;\n        \n        if (value) {\n            this.setAttribute(\"checked\", \"\");\n        } else {\n            this.removeAttribute(\"checked\");\n        }\n    }\n\n    public get disabled() {\n        return this._disabled;\n    }\n\n    public set disabled(value) {\n        this._disabled = value;\n\n        if (value) {\n            this.setAttribute(\"disabled\", \"\");\n        } else {\n            this.removeAttribute(\"disabled\");\n        }\n    }\n\n    /* #endregion */\n\n    /* #region Private */\n    private _useDefaultStyles = true;\n    private _checked: boolean = false;\n    private _disabled: boolean = false;\n    private container: Node;\n\n    private buildDom() {\n        // Styles\n        if (this._useDefaultStyles) {\n            const link = document.createElement(\"link\");\n            link.rel = \"stylesheet\";\n            link.href = import.meta.resolve(\"./toggle-switch.css\");\n            this.container.appendChild(link);\n        }\n\n        // Elements\n        const surface = document.createElement(\"div\");\n        surface.classList.add(\"surface\");\n        this.container.appendChild(surface);\n\n        const knob = document.createElement(\"div\");\n        knob.classList.add(\"knob\");\n        this.container.appendChild(knob);\n\n        // Tab order handling\n        if (!this.disabled) {\n            this.tabIndex = 0;\n        }\n        \n        // Event handling\n        this.addEventListener(\"click\", () => {\n            if (!this.disabled) {\n                this.checked = !this.checked;\n            }\n        });\n\n        this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n            if (!this.disabled && (e.key === \" \" || e.key === \"Enter\")) {\n                e.preventDefault();\n                this.checked = !this.checked;\n            }\n        });\n    }\n\n    private publishOnChangeEvent() {\n        this.dispatchEvent(new Event(\"change\", {bubbles: true}));\n    }\n\n    private onDisabledChanged() {\n        if (this._disabled) {\n            this.removeAttribute(\"tabindex\");\n        } else {\n            this.tabIndex = 0;\n        }\n    }\n\n    private readAttributes() {\n        this._useDefaultStyles = \n            !this.hasAttribute(\"styles\") \n            || this.getAttribute(\"styles\").toLowerCase() !== \"false\";\n\n        if (this.hasAttribute(\"checked\")) {\n            this._checked = true;\n        }\n\n        if (this.hasAttribute(\"disabled\")) {\n            this._disabled = true;\n        }\n    }\n\n    /* #endregion */\n\n    connectedCallback() {\n        this.buildDom();\n    }\n\n    attributeChangedCallback(name: string, _:string, newValue: string) {\n        if (name === \"checked\") {\n            this._checked = newValue !== null;\n            this.publishOnChangeEvent();\n        }\n\n        if (name === \"disabled\") {\n            this._disabled = newValue !== null;\n            this.onDisabledChanged();\n        }\n    }\n}\n\ncustomElements.define(\"toggle-switch\", ToggleSwitch);"]}