From b8ea15b263788593402f05f48bae7fb40f424346 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Thu, 26 Mar 2020 12:11:22 +0000
Subject: [PATCH] Complete Material Slider

---
 .../materialdesign-components/package.json    |   1 +
 .../src/Slider/Slider.svelte                  | 119 ++++++++++++++++++
 .../src/Slider/_style.scss                    |   1 +
 .../src/Slider/index.js                       |   2 +
 .../src/Test/TestApp.svelte                   |   2 +
 .../src/Test/props.js                         |   6 +-
 .../materialdesign-components/src/index.js    |   1 +
 7 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 packages/materialdesign-components/src/Slider/Slider.svelte
 create mode 100644 packages/materialdesign-components/src/Slider/_style.scss
 create mode 100644 packages/materialdesign-components/src/Slider/index.js

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 93b4e3e233..7328dcfa0b 100644
--- a/packages/materialdesign-components/package.json
+++ b/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/slider": "4.0.0",
     "@material/switch": "4.0.0",
     "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
diff --git a/packages/materialdesign-components/src/Slider/Slider.svelte b/packages/materialdesign-components/src/Slider/Slider.svelte
new file mode 100644
index 0000000000..9c3f1a6f38
--- /dev/null
+++ b/packages/materialdesign-components/src/Slider/Slider.svelte
@@ -0,0 +1,119 @@
+<script>
+  import { MDCSlider } from "@material/slider"
+  import { onMount } from "svelte"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("slider", ["continuous"])
+
+  let slider
+  let instance
+
+  export let variant = "continuous" //or discrete
+  export let showTicks = false
+  export let min = "0"
+  export let max = "100"
+  export let value = "1"
+  export let step = "1"
+  export let label = ""
+  export let disabled = false
+
+  onMount(() => {
+    let s = MDCSlider.attachTo(slider)
+    return () => instance.destroy()
+  })
+
+  $: {
+    if (instance) {
+      instance.value = value
+    }
+  }
+
+  $: instance && console.log("instance dot value: ", instance.value)
+
+  $: isDiscrete = variant === "discrete"
+  $: displayMarkers = isDiscrete && showTicks
+
+  $: modifiers = { variant, displayMarkers }
+  $: props = { modifiers }
+  $: sliderCls = cb.build({ props })
+
+  $: console.log("VALUE", value)
+</script>
+
+<div
+  bind:this={slider}
+  class="mdc-slider mdc-slider--discrete"
+  tabindex="0"
+  role="slider"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuenow="0"
+  aria-label="Select Value"
+  on:MDCSlider:change={e => console.log('SLIDER VAL', e.detail.value)}>
+  <div class="mdc-slider__track-container">
+    <div class="mdc-slider__track" />
+  </div>
+  <div class="mdc-slider__thumb-container">
+    <div class="mdc-slider__pin">
+      <span class="mdc-slider__pin-value-marker" />
+    </div>
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875" />
+    </svg>
+    <div class="mdc-slider__focus-ring" />
+  </div>
+</div>
+
+<!-- 
+<div
+  bind:this={slider}
+  class={sliderCls}
+  tabindex="0"
+  role="slider"
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  data-step={step}
+  aria-label={label}
+  on:MDCSlider:input={e => console.log('INPUT', e.detail.value)}
+  on:MDCSlider:change={e => console.log('CHANGE', e.detail.value)}
+  aria-disabled={disabled}>
+  <div class="mdc-slider__track-container">
+    {#if displayMarkers}
+      <div class="mdc-slider__track-container">
+        <div class="mdc-slider__track" />
+        <div class="mdc-slider__track-marker-container" />
+      </div>
+    {:else}
+      <div class="mdc-slider__track" />
+    {/if}
+  </div>
+  <div class="mdc-slider__thumb-container">
+    {#if isDiscrete}
+      <div class="mdc-slider__pin">
+        <span class="mdc-slider__pin-value-marker" />
+      </div>
+    {/if}
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875" />
+    </svg>
+    <div class="mdc-slider__focus-ring" />
+  </div>
+</div> -->
+
+<!-- <div class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider"
+     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
+     aria-label="Select Value">
+  <div class="mdc-slider__track-container">
+    <div class="mdc-slider__track"></div>
+  </div>
+  <div class="mdc-slider__thumb-container">
+    <div class="mdc-slider__pin">
+      <span class="mdc-slider__pin-value-marker"></span>
+    </div>
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875"></circle>
+    </svg>
+    <div class="mdc-slider__focus-ring"></div>
+  </div>
+</div> -->
diff --git a/packages/materialdesign-components/src/Slider/_style.scss b/packages/materialdesign-components/src/Slider/_style.scss
new file mode 100644
index 0000000000..0be8b2ea70
--- /dev/null
+++ b/packages/materialdesign-components/src/Slider/_style.scss
@@ -0,0 +1 @@
+@import "@material/slider/mdc-slider.scss"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Slider/index.js b/packages/materialdesign-components/src/Slider/index.js
new file mode 100644
index 0000000000..d59f34d7fe
--- /dev/null
+++ b/packages/materialdesign-components/src/Slider/index.js
@@ -0,0 +1,2 @@
+import "./_style.scss"
+export {default as Slider} from "./Slider.svelte"
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index 0391a4d9b2..d839988147 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -22,6 +22,7 @@
     Card,
     Dialog,
     Switch,
+    Slider,
   } = props
 
   let currentComponent
@@ -41,6 +42,7 @@
             DatePicker,
             IconButton,
             Switch,
+            Slider,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index c5bf709045..75244cf0c8 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -313,5 +313,9 @@ export const props = {
     checked: true,
     onChange: () => console.log("Switch Changed"),
     _children: [],
-  }
+  },
+  Slider: {
+    _component: "@budibase/materialdesign-components/Slider",
+    _children: [],
+  },
 }
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 1fe55d3fa6..14a5c6f583 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -24,3 +24,4 @@ export { IconButton } from "./IconButton"
 export { Card, CardHeader, CardImage, CardBody, CardFooter } from "./Card"
 export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
 export { Switch } from "./Switch"
+export { Slider } from "./Slider"