Completed MD Switch component

packages/materialdesign-components/package.json

@@ -24,6 +24,7 @@
     "@material/menu": "4.0.0",
     "@material/radio": "^4.0.0",
     "@material/select": "4.0.0",
+    "@material/switch": "4.0.0",
     "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",

packages/materialdesign-components/src/Switch/Switch.svelte

@@ -0,0 +1,41 @@
+<script>
+  import ClassBuilder from "../ClassBuilder.js"
+  import Formfield from "../Common/Formfield.svelte"
+  import Label from "../Common/Label.svelte"
+  export let onChange = checked => {}
+
+  export let _bb
+  export let alignEnd = true
+  export let disabled = false
+  export let checked = false
+  export let label = ""
+  export let id = "my-switch-component"
+
+  const cb = new ClassBuilder("switch")
+
+  function handleChange() {
+    checked = !checked
+    onChange(checked)
+  }
+
+  $: modifiers = { disabled, checked }
+  $: props = { modifiers }
+  $: switchCls = cb.build({ props })
+</script>
+
+<Formfield {_bb} {label} {alignEnd}>
+  <div class={switchCls} on:change={handleChange} style="margin: 0px 5px">
+    <div class="mdc-switch__track" />
+    <div class="mdc-switch__thumb-underlay">
+      <div class="mdc-switch__thumb" />
+      <input
+        type="checkbox"
+        {id}
+        class="mdc-switch__native-control"
+        role="switch"
+        aria-checked={checked}
+        {disabled}
+        {checked} />
+    </div>
+  </div>
+</Formfield>

packages/materialdesign-components/src/Switch/_style.scss

@@ -0,0 +1 @@
+@import "@material/switch/mdc-switch.scss";

packages/materialdesign-components/src/Switch/index.js

@@ -0,0 +1,2 @@
+import "./_style.scss"
+export { default as Switch } from "./Switch.svelte"

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -21,6 +21,7 @@
     IconButton,
     Card,
     Dialog,
+    Switch,
   } = props
 
   let currentComponent
@@ -39,7 +40,7 @@
             Radiobuttongroup,
             DatePicker,
             IconButton,
-            Dialog,
+            Switch,
           ],
         },
       }

packages/materialdesign-components/src/Test/props.js

@@ -307,4 +307,11 @@ export const props = {
       },
     ],
   },
+  Switch: {
+    _component: "@budibase/materialdesign-components/Switch",
+    label: "On / Off",
+    checked: true,
+    onChange: () => console.log("Switch Changed"),
+    _children: [],
+  }
 }

packages/materialdesign-components/src/index.js

@@ -21,10 +21,6 @@ export { Menu } from "./Menu"
 export { Select } from "./Select"
 export { DatePicker } from "./DatePicker"
 export { IconButton } from "./IconButton"
-export { Card } from "./Card"
-export { CardHeader } from "./Card"
-export { CardImage } from "./Card"
-export { CardBody } from "./Card"
-export { CardFooter } from "./Card"
+export { Card, CardHeader, CardImage, CardBody, CardFooter } from "./Card"
 export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
-
+export { Switch } from "./Switch"