feat(stark-ui): implement the Stark-Slider component

ISSUES CLOSED: #448

packages/stark-ui/package.json

@@ -26,7 +26,9 @@
     "npm": ">=5.3.0"
   },
   "dependencies": {
-    "@mdi/angular-material": "2.4.85"
+    "@mdi/angular-material": "2.4.85",
+    "@types/nouislider": "9.0.4",
+    "nouislider": "11.1.0"
   },
   "devDependencies": {
     "@nationalbankbelgium/stark-testing": "../stark-testing"

packages/stark-ui/src/modules.ts

@@ -1,2 +1,3 @@
 export * from "./modules/app-logo";
+export * from "./modules/slider";
 export * from "./modules/svg-view-box";

packages/stark-ui/src/modules/slider.ts

@@ -0,0 +1,2 @@
+export * from "./slider/slider.module";
+export * from "./slider/components";

packages/stark-ui/src/modules/slider/components.ts

@@ -0,0 +1,3 @@
+export * from "./components/slider.component";
+export * from "./components/slider-config.intf";
+export * from "./components/slider-pips.intf";

packages/stark-ui/src/modules/slider/components/_slider-theme.scss

@@ -0,0 +1,105 @@
+/* Slider component css */
+/* stark: src/ui/components/slider/slider.component.scss */
+
+@import "~nouislider/distribute/nouislider.css";
+
+.stark-slider {
+  font-size: 12px;
+  & .noUi-horizontal,
+  & .noUi-vertical {
+    background-color: #d8e0f3;
+    border: 0;
+    box-shadow: none;
+    border-radius: 0;
+  }
+  & .noUi-horizontal {
+    height: 5px;
+    & .noUi-origin {
+      top: -15px;
+    }
+    & .noUi-tooltip {
+      padding: 2px 5px;
+      bottom: 40px;
+      border: solid 1px $divider-color;
+    }
+    & .noUi-pips-horizontal {
+      padding: 0;
+    }
+    & .noUi-value {
+      padding-top: 4px;
+    }
+  }
+  & .noUi-connect {
+    background-color: $md-primary;
+  }
+  & .noUi-handle {
+    top: 0;
+    border: 0;
+    width: 36px;
+    height: 36px;
+    background-color: $md-primary;
+    border-radius: 50%;
+    box-shadow: $elevation-2;
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: $md-primary-700;
+      outline: none;
+    }
+    &::before {
+      display: none;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 8px;
+      width: 8px;
+      background-color: #fff;
+      border-radius: 50%;
+    }
+  }
+  &.horizontal {
+    padding: 42px 32px 30px 16px;
+    margin-bottom: 16px;
+    & .noUi-pips-horizontal {
+      height: 30px;
+    }
+  }
+  &.vertical {
+    padding: 18px 60px 20px 80px;
+  }
+  & .noUi-vertical {
+    /* setting default height: without a height, the vertical slider will not work */
+    height: 300px;
+    width: 5px;
+    & .noUi-handle {
+      transform: translate(-10px, -50%);
+    }
+    & .noUi-tooltip {
+      right: 40px;
+    }
+    & .noUi-value {
+      transform: translate(0, -50%);
+    }
+  }
+  & .noUi-pips-vertical {
+    padding: 0;
+  }
+
+  /* disabled state */
+  & [disabled] {
+    &.noUi-target {
+      cursor: default;
+    }
+    & .noUi-handle {
+      background-color: #ccc;
+      box-shadow: none;
+      cursor: default;
+    }
+  }
+}
+
+/* END stark: src/ui/components/slider/slider.component.pcss */

packages/stark-ui/src/modules/slider/components/slider-config.intf.ts

@@ -0,0 +1,74 @@
+import { StarkSliderPips } from "./slider-pips.intf";
+
+/**
+ * The StarkSliderFormatter is an interface to be used together with the StarkSliderConfig
+ * when using advanced formatting options for the the Slider component.
+ */
+export interface StarkSliderFormatter {
+	/**
+	 * Create an instance of the slider component
+	 */
+	to(rawValue: number): string; // format a number
+
+	/**
+	 * Function to parse the formatted string back to a number
+	 */
+	from(formattedValue: string): number; // get a number back
+}
+
+/**
+ * StarkSliderConfig is an interface to implement when using the Slider component.
+ * It is in fact a subset of the options supported by the noUiSlider library
+ */
+export interface StarkSliderConfig {
+	/**
+	 * Several ways to handle user interaction.
+	 * See: https://refreshless.com/nouislider/behaviour-option/
+	 */
+	behaviour?: string;
+
+	/**
+	 * This can be used to control the (green) bar between the handles, or the edges of the slider.
+	 * See: https://refreshless.com/nouislider/slider-options/#section-Connect
+	 */
+	connect?: boolean | boolean[];
+
+	/**
+	 * Formatter containing to() function to encode the values and a from() function to decode them.
+	 */
+	format?: StarkSliderFormatter;
+
+	/**
+	 * Slider's orientation: "horizontal" or "vertical". Default: "horizontal".
+	 * In case of vertical sliders, Stark sets a default height with CSS rules which you can override if needed.
+	 */
+	orientation?: "horizontal" | "vertical";
+
+	/**
+	 * Config object to define how the pips will be displayed in the slider.
+	 */
+	pips?: StarkSliderPips;
+
+	/**
+	 * All the values that are part of the range. The object should contain at least "min" and "max" properties.
+	 * See: https://refreshless.com/nouislider/slider-values/#section-range
+	 */
+	range: {
+		min: number | number[];
+		max: number | number[];
+		[value: string]: number | number[];
+	};
+
+	/**
+	 * The minimum amount of units that an slider can change within the range.
+	 * See: https://refreshless.com/nouislider/slider-values/#section-step
+	 */
+	step?: number;
+
+	/**
+	 * Enable/disable the display of tooltips. Default: false.
+	 * You can also pass a formatter function to format the tooltips content.
+	 * See: https://refreshless.com/nouislider/slider-options/#section-tooltips
+	 */
+	tooltips?: boolean | boolean[] | StarkSliderFormatter;
+}

packages/stark-ui/src/modules/slider/components/slider-pips.intf.ts

@@ -0,0 +1,13 @@
+import * as noUiSlider from "nouislider";
+import { StarkSliderFormatter } from "./slider-config.intf";
+
+/**
+ * The StarkSliderFormatter is an interface to be used together with the StarkSliderConfig
+ * when using advanced options for the the Slider component. It is in fact a subset of the noUiSlider Pips options.
+ */
+export interface StarkSliderPips extends noUiSlider.PipsOptions {
+	/**
+	 * Formatter containing to() function to encode the values and a from() function to decode them.
+	 */
+	format?: StarkSliderFormatter;
+}

packages/stark-ui/src/modules/slider/components/slider.component.html

@@ -0,0 +1,3 @@
+<div class="stark-slider" [ngClass]="{'horizontal': isHorizontal, 'vertical': !isHorizontal}">
+	<div [id]="sliderId" class="slider" [attr.disabled]="isDisabled"></div>
+</div>