WebComponent pane to dramatically speed up creating new widgets in Panel

.gitignore

@@ -119,3 +119,5 @@ builtdocs/
 .vscode/
 .vscode/panel.code-workspace
 discover/
+
+node_modules/*

examples/reference/components/wired.ipynb

@@ -0,0 +1,146 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "pn.extension()\n",
+    "pn.config.sizing_mode=\"stretch_width\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Wired Components - Reference Example\n",
+    "\n",
+    "[Wired Elements](https://github.com/wiredjs/wired-elements) is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.\n",
+    "\n",
+    "For a live demo see the [Wired Showcase](https://wiredjs.com/showcase.html)\n",
+    "\n",
+    "----\n",
+    "\n",
+    "<img src=\"https://wiredjs.com/images/logo_400.png\"></img>"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from panel.components import wired\n",
+    "js = \"\"\"\n",
+    "<script src=\"https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-loader.js\"></script>\n",
+    "<script src=\"https://wiredjs.com/dist/showcase.min.js\"></script\n",
+    "\"\"\"\n",
+    "js_files_pane = pn.pane.HTML(js)\n",
+    "style = \"\"\"\n",
+    "<style>\n",
+    "body {\n",
+    "    font-family: 'Gloria Hallelujah', sans-serif;\n",
+    "}\n",
+    "</style>\n",
+    "\"\"\"\n",
+    "style_pane = pn.pane.HTML(style)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "button = wired.Button()\n",
+    "radio_button = wired.RadioButton()\n",
+    "check_box = wired.CheckBox()\n",
+    "check_box_checked = wired.CheckBox(checked=True)\n",
+    "slider = wired.Slider()\n",
+    "wired_input = wired.Input()\n",
+    "combobox = wired.ComboBox(html=\"\"\"<wired-combo id=\"colorCombo\" selected=\"red\" role=\"combobox\" aria-haspopup=\"listbox\" tabindex=\"0\" class=\"wired-rendered\" aria-expanded=\"false\"><wired-item value=\"red\" aria-selected=\"true\" role=\"option\" class=\"wired-rendered\">Red</wired-item><wired-item value=\"green\" role=\"option\" class=\"wired-rendered\">Green</wired-item><wired-item value=\"blue\" role=\"option\" class=\"wired-rendered\">Blue</wired-item></wired-combo>\"\"\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "pn.Column(\n",
+    "    js_files_pane, style_pane,\n",
+    "    button, pn.Param(button, parameters=[\"html\"] + list(button._child_parameters())), pn.layout.Divider(),\n",
+    "    check_box, pn.Param(check_box, parameters=[\"html\"]+list(check_box._child_parameters())), pn.layout.Divider(),\n",
+    "    check_box_checked, pn.Param(check_box_checked, parameters=[\"html\"]+list(check_box_checked._child_parameters())), pn.layout.Divider(),\n",
+    "    radio_button, pn.Param(radio_button, parameters=[\"html\"]+list(radio_button._child_parameters())), pn.layout.Divider(),\n",
+    "    slider, pn.Param(slider, parameters=[\"html\"]+list(slider._child_parameters())), \"**The slider value cannot be set programmatically**. See [Wired Issue](https://github.com/wiredjs/wired-elements/issues/121#issue-573516963)\", pn.layout.Divider(),\n",
+    "    combobox, pn.Param(combobox, parameters=[\"html\"]+list(combobox._child_parameters())), pn.layout.Divider(),\n",
+    "    wired_input, pn.Param(wired_input, parameters=[\"html\"]+list(wired_input._child_parameters())), pn.layout.Divider(),\n",
+    "    background=None\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Adding Hand Drawn Plots to the mix\n",
+    "\n",
+    "Using `matplotlib.pyplot.xkcd` ([link](https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.xkcd.html)) you can actually sprinkle in some plots that look handdrawn.\n",
+    "\n",
+    "\n",
+    "![hand drawn plot](https://matplotlib.org/3.1.1/_images/sphx_glr_xkcd_001.png)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Contributors\n",
+    "\n",
+    "- [Marc Skov Madsen](https://datamodelsanalytics.com)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "str(type(button)).split(\".\")[3][:-2]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "panel",
+   "language": "python",
+   "name": "panel"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}