{"version":3,"sources":["jsdelivr-header.js","/gh/Young-Einstein10/messaging-widget@main/main.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OCNS,WAAY,aAAc,WAAc,cAEjD,MAAM,cACJ,WAAA,CAAY,EAAW,gBACrB,KAAK,SAAW,KAAK,YAAY,GACjC,KAAK,MAAO,EACZ,KAAK,aACL,KAAK,cACP,CAEA,SAAW,GACX,MAAO,EACP,gBAAkB,KAElB,WAAA,CAAY,GACV,MAAO,EAAU,GAAc,EAAS,MAAM,KAC9C,MAAO,CACL,CAAC,GAAW,OACZ,CAAC,GAAa,OAElB,CAEA,gBAAM,GAIJ,MAAM,EAAY,SAAS,cAAc,OACzC,EAAU,MAAM,SAAW,QAC3B,OAAO,KAAK,KAAK,UAAU,QACxB,GAAS,EAAU,MAAM,GAAO,KAAK,SAAS,IAEjD,SAAS,KAAK,YAAY,GAK1B,MAAM,EAAkB,SAAS,cAAc,UAC/C,EAAgB,UAAU,IAAI,qBAK9B,MAAM,EAAoB,SAAS,cAAc,QACjD,EAAkB,UAAY,aAC9B,EAAkB,UAAU,IAAI,gBAChC,KAAK,WAAa,EAKlB,MAAM,EAAmB,SAAS,cAAc,QAChD,EAAiB,UAAY,WAC7B,EAAiB,UAAU,IAAI,eAAgB,kBAC/C,KAAK,UAAY,EAKjB,EAAgB,YAAY,KAAK,YACjC,EAAgB,YAAY,KAAK,WACjC,EAAgB,iBAAiB,QAAS,KAAK,WAAW,KAAK,OAK/D,KAAK,gBAAkB,SAAS,cAAc,OAC9C,KAAK,gBAAgB,UAAU,IAAI,iBAAkB,qBAKrD,KAAK,sBAKL,EAAU,YAAY,KAAK,iBAC3B,EAAU,YAAY,EACxB,CAEA,mBAAA,GACE,KAAK,gBAAgB,UAAY,45CAkDnC,CAEA,YAAA,GACE,MAAM,EAAW,SAAS,cAAc,SACxC,EAAS,UAAY,OAAO,QAAQ,YAAa,IAEjD,SAAS,KAAK,YAAY,EAC5B,CAEA,UAAA,GACE,KAAK,MAAQ,KAAK,KACd,KAAK,MACP,KAAK,WAAW,UAAU,IAAI,kBAC9B,KAAK,UAAU,UAAU,OAAO,kBAChC,KAAK,gBAAgB,UAAU,OAAO,oBAEtC,KAAK,sBACL,KAAK,WAAW,UAAU,OAAO,kBACjC,KAAK,UAAU,UAAU,IAAI,kBAC7B,KAAK,gBAAgB,UAAU,IAAI,kBAEvC,EAGF,SAAS,mBACP,OAAO,IAAI,aACb,CAEA","file":"/gh/Young-Einstein10/messaging-widget@main/main.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.48.0.\n * Original file: /gh/Young-Einstein10/messaging-widget@main/main.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","import { CLOSE_ICON, MESSAGE_ICON, styles } from \"./assets.js\";\n\nclass MessageWidget {\n  constructor(position = \"bottom-right\") {\n    this.position = this.getPosition(position);\n    this.open = false;\n    this.initialize();\n    this.injectStyles();\n  }\n\n  position = \"\";\n  open = false;\n  widgetContainer = null;\n\n  getPosition(position) {\n    const [vertical, horizontal] = position.split(\"-\");\n    return {\n      [vertical]: \"30px\",\n      [horizontal]: \"30px\",\n    };\n  }\n\n  async initialize() {\n    /**\n     * Create and append a div element to the document body\n     */\n    const container = document.createElement(\"div\");\n    container.style.position = \"fixed\";\n    Object.keys(this.position).forEach(\n      (key) => (container.style[key] = this.position[key])\n    );\n    document.body.appendChild(container);\n\n    /**\n     * Create a button element and give it a class of button__container\n     */\n    const buttonContainer = document.createElement(\"button\");\n    buttonContainer.classList.add(\"button__container\");\n\n    /**\n     * Create a span element for the widget icon, give it a class of 'widget__icon', update it's innerHTML property to an icon which would serve as the widget icon.\n     */\n    const widgetIconElement = document.createElement(\"span\");\n    widgetIconElement.innerHTML = MESSAGE_ICON;\n    widgetIconElement.classList.add(\"widget__icon\");\n    this.widgetIcon = widgetIconElement;\n\n    /**\n     * Create a span element for the close icon, give it a class of 'widget__icon' and 'widget__hidden' which would be removed whenever the widget is closed, update it's innerHTML property to an icon which would serve as the widget icon during that state.\n     */\n    const closeIconElement = document.createElement(\"span\");\n    closeIconElement.innerHTML = CLOSE_ICON;\n    closeIconElement.classList.add(\"widget__icon\", \"widget__hidden\");\n    this.closeIcon = closeIconElement;\n\n    /**\n     * Append both icons created to the button element and add a `click` event listener on the button to toggle the widget open and close.\n     */\n    buttonContainer.appendChild(this.widgetIcon);\n    buttonContainer.appendChild(this.closeIcon);\n    buttonContainer.addEventListener(\"click\", this.toggleOpen.bind(this));\n\n    /**\n     * Create a container for the widget and add the following classes:- \"widget__hidden\", \"widget__container\"\n     */\n    this.widgetContainer = document.createElement(\"div\");\n    this.widgetContainer.classList.add(\"widget__hidden\", \"widget__container\");\n\n    /**\n     * Invoke the `createWidget()` method\n     */\n    this.createWidgetContent();\n\n    /**\n     * Append the widget's content and the button to the container\n     */\n    container.appendChild(this.widgetContainer);\n    container.appendChild(buttonContainer);\n  }\n\n  createWidgetContent() {\n    this.widgetContainer.innerHTML = `\n        <header class=\"widget__header\">\n            <h3>Start a conversation</h3>\n            <p>We usually respond within a few hours</p>\n        </header>\n\n        <form>\n            <div class=\"form__field\">\n                <label for=\"name\">Name</label>\n                <input\n                type=\"text\"\n                id=\"name\"\n                name=\"name\"\n                placeholder=\"Enter your name\"\n                />\n            </div>\n\n            <div class=\"form__field\">\n                <label for=\"email\">Email</label>\n                <input\n                type=\"email\"\n                id=\"email\"\n                name=\"email\"\n                placeholder=\"Enter your email\"\n                />\n            </div>\n\n            <div class=\"form__field\">\n                <label for=\"subject\">Subject</label>\n                <input\n                type=\"text\"\n                id=\"subject\"\n                name=\"subject\"\n                placeholder=\"Enter Message Subject\"\n                />\n            </div>\n\n            <div class=\"form__field\">\n                <label for=\"message\">Message</label>\n                <textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Enter your message\"\n                rows=\"6\"\n                ></textarea>\n            </div>\n\n            <button>Send Message</button>\n        </form>\n    `;\n  }\n\n  injectStyles() {\n    const styleTag = document.createElement(\"style\");\n    styleTag.innerHTML = styles.replace(/^\\s+|\\n/gm, \"\");\n\n    document.head.appendChild(styleTag);\n  }\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.widgetIcon.classList.add(\"widget__hidden\");\n      this.closeIcon.classList.remove(\"widget__hidden\");\n      this.widgetContainer.classList.remove(\"widget__hidden\");\n    } else {\n      this.createWidgetContent();\n      this.widgetIcon.classList.remove(\"widget__hidden\");\n      this.closeIcon.classList.add(\"widget__hidden\");\n      this.widgetContainer.classList.add(\"widget__hidden\");\n    }\n  }\n}\n\nfunction initializeWidget() {\n  return new MessageWidget();\n}\n\ninitializeWidget();\n"]}