feat(stark-demo): add Slider component to the Showcase Demo

ISSUES CLOSED: #561

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

@@ -1,3 +1,4 @@
 <div [ngClass]="{'horizontal': isHorizontal, 'vertical': !isHorizontal}">
-	<div [id]="sliderId" class="slider" [attr.disabled]="isDisabled"></div>
+	<div [id]="sliderId" class="slider" [attr.disabled]="isDisabled ? '' : null"></div>
+	<!-- for the disabled attribute solution see: https://github.com/angular/angular/issues/13940 answer by Zec2703 -->
 </div>

showcase/src/app/app.component.html

@@ -98,6 +98,9 @@ <h1>STARK</h1>
 			<a mat-list-item uiSref="demo-pretty-print" uiSrefActive="active">
 				<span matLine>Pretty Print</span>
 			</a>
+			<a mat-list-item uiSref="demo-slider" uiSrefActive="active">
+				<span matLine>Slider</span>
+			</a>
 			<a mat-list-item uiSref="demo-table" uiSrefActive="active">
 				<span matLine>Table</span>
 			</a>

showcase/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { MatIconRegistry } from "@angular/material";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
+import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatIconModule } from "@angular/material/icon";
 import { MatListModule } from "@angular/material/list";
 import { MatSidenavModule } from "@angular/material/sidenav";
@@ -146,6 +147,7 @@ export const metaReducers: MetaReducer<State>[] = ENV !== "production" ? [logger
 		FormsModule,
 		MatButtonModule,
 		MatCardModule,
+		MatCheckboxModule,
 		MatIconModule,
 		MatListModule,
 		MatSidenavModule,

showcase/src/app/app.routes.ts

@@ -1,16 +1,17 @@
 import {
 	ActionBarComponent,
-	DemoBreadcrumbComponent,
 	ButtonComponent,
 	DatePickerComponent,
 	DateRangePickerComponent,
+	DemoBreadcrumbComponent,
 	DropdownComponent,
 	ExampleViewerComponent,
 	HeaderComponent,
 	KeyboardDirectivesComponent,
+	LogoutComponent,
 	PrettyPrintComponent,
-	TableComponent,
-	LogoutComponent
+	SliderComponent,
+	TableComponent
 } from "./demo";
 import { HomeComponent } from "./home";
 import { NoContentComponent } from "./no-content";
@@ -30,6 +31,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [
 	{ name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent },
 	{ name: "demo-logout", url: "/demo/logout", component: LogoutComponent },
 	{ name: "demo-pretty-print", url: "/demo/pretty-print", component: PrettyPrintComponent },
+	{ name: "demo-slider", url: "/demo/slider", component: SliderComponent },
 	{ name: "demo-table", url: "/demo/table", component: TableComponent },
 	{ name: "demo-dropdown", url: "/demo/dropdown", component: DropdownComponent },
 	{ name: "otherwise", url: "/otherwise", component: NoContentComponent }

showcase/src/app/demo/demo.module.ts

@@ -19,26 +19,27 @@ import { ButtonComponent } from "./button/button.component";
 import { DatePickerComponent } from "./date-picker/date-picker.component";
 import { DateRangePickerComponent } from "./date-range-picker/date-range-picker.component";
 import { DropdownComponent } from "./dropdown/dropdown.component";
-import { LogoutComponent } from "./logout/logout.component";
 import { ExampleViewerComponent } from "./example-viewer/example-viewer.component";
 import { HeaderComponent } from "./header/header.component";
 import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component";
+import { LogoutComponent } from "./logout/logout.component";
 import { PrettyPrintComponent } from "./pretty-print/pretty-print.component";
+import { SliderComponent } from "./slider/slider.component";
 import { TableComponent } from "./table/table.component";
 import { SharedModule } from "../shared/shared.module";
 import {
+	STARK_DATE_FORMATS,
 	StarkActionBarModule,
+	StarkAppLogoutModule,
 	StarkBreadcrumbModule,
-	STARK_DATE_FORMATS,
 	StarkDatePickerModule,
 	StarkDateRangePickerModule,
 	StarkDropdownModule,
 	StarkKeyboardDirectivesModule,
 	StarkPrettyPrintModule,
 	StarkSliderModule,
-	StarkTableModule,
 	StarkSvgViewBoxModule,
-	StarkAppLogoutModule
+	StarkTableModule
 } from "@nationalbankbelgium/stark-ui";
 import { MAT_DATE_FORMATS } from "@angular/material/core";
 
@@ -73,16 +74,15 @@ import { MAT_DATE_FORMATS } from "@angular/material/core";
 		ActionBarComponent,
 		DemoBreadcrumbComponent,
 		ButtonComponent,
+		DatePickerComponent,
+		DateRangePickerComponent,
 		DropdownComponent,
-		LogoutComponent,
 		ExampleViewerComponent,
 		HeaderComponent,
 		KeyboardDirectivesComponent,
+		LogoutComponent,
 		PrettyPrintComponent,
-		DatePickerComponent,
-		DateRangePickerComponent,
-		ExampleViewerComponent,
-		KeyboardDirectivesComponent,
+		SliderComponent,
 		TableComponent
 	],
 	exports: [
@@ -92,11 +92,12 @@ import { MAT_DATE_FORMATS } from "@angular/material/core";
 		DatePickerComponent,
 		DateRangePickerComponent,
 		DropdownComponent,
-		LogoutComponent,
 		ExampleViewerComponent,
 		HeaderComponent,
 		KeyboardDirectivesComponent,
+		LogoutComponent,
 		PrettyPrintComponent,
+		SliderComponent,
 		TableComponent
 	],
 	providers: [{ provide: MAT_DATE_FORMATS, useValue: STARK_DATE_FORMATS }]

showcase/src/app/demo/index.ts

@@ -8,6 +8,7 @@ export * from "./example-viewer";
 export * from "./header";
 export * from "./keyboard-directives";
 export * from "./pretty-print";
+export * from "./slider";
 export * from "./table";
 export * from "./demo.module";
 export * from "./logout";

showcase/src/app/demo/slider/index.ts

@@ -0,0 +1 @@
+export * from "./slider.component";

showcase/src/app/demo/slider/slider.component.html

@@ -0,0 +1,133 @@
+<example-viewer [extensions]="['HTML', 'SCSS', 'TS']" 
+				filesPath="slider/simple-horizontal-slider"
+				exampleTitle="SHOWCASE.DEMO.SLIDER.SIMPLE_HORIZONTAL_SLIDER">
+	<div>
+		<stark-slider [values]="simpleHorizontalSliderValues"
+					  sliderId="simple-horizontal-slider"
+					  [sliderConfig]="simpleHorizontalSliderConfig"
+					  [isDisabled]="!isSimpleHorizontalSliderEnabled"
+					  (changed)="onChangeSimpleHorizontalSlider($event)">
+		</stark-slider>
+		<div>
+			<mat-checkbox class="slider-enabled-field"
+						  (change)="$event ? toggleSimpleHorizontalSliderEnable() : null" 
+						  [checked]="isSimpleHorizontalSliderEnabled">
+				{{ 'SHOWCASE.COMMON.ENABLED' | translate }}
+			</mat-checkbox>
+			<mat-form-field class="slider-value-field">
+				<input matInput
+					   placeholder="{{ 'SHOWCASE.COMMON.VALUE' | translate }}"
+					   type="number"
+					   step="10"
+					   [(ngModel)]="valueForSimpleHorizontalSlider"
+					   [disabled]="!isSimpleHorizontalSliderEnabled"
+					   (change)="onChangeValueForSimpleHorizontalSlider($event)">
+			</mat-form-field>
+		</div>
+	</div>
+</example-viewer>
+
+<example-viewer [extensions]="['HTML', 'SCSS', 'TS']"
+				filesPath="slider/horizontal-range-slider"
+				exampleTitle="SHOWCASE.DEMO.SLIDER.HORIZONTAL_RANGE_SLIDER">
+	<div>
+		<stark-slider [values]="horizontalRangeSliderValues"
+					  sliderId="horizontal-range-slider"
+					  [sliderConfig]="horizontalRangeSliderConfig"
+					  [isDisabled]="!isHorizontalRangeSliderEnabled"
+					  (changed)="onChangeHorizontalRangeSlider($event)">
+		</stark-slider>
+		<div>
+			<mat-checkbox class="slider-enabled-field"
+						  (change)="$event ? toggleHorizontalRangeSliderEnable() : null" 
+						  [checked]="isHorizontalRangeSliderEnabled">
+				{{ 'SHOWCASE.COMMON.ENABLED' | translate }}
+			</mat-checkbox>	
+			<mat-form-field class="slider-value-field">
+				<input matInput 
+					   placeholder="{{ 'SHOWCASE.COMMON.VALUE' | translate }} 1" 
+					   type="number"
+					   step="10"
+					   [(ngModel)]="lowerValueForHorizontalRangeSlider"
+					   [disabled]="!isHorizontalRangeSliderEnabled"
+					   (change)="onChangeValueForHorizontalRangeSlider($event, SLIDER_HANDLES.lower)">
+			</mat-form-field>
+			<mat-form-field class="slider-value-field">
+				<input matInput
+					   placeholder="{{ 'SHOWCASE.COMMON.VALUE' | translate }} 2"
+					   type="number"
+					   step="10"
+					   [(ngModel)]="upperValueForHorizontalRangeSlider"
+					   [disabled]="!isHorizontalRangeSliderEnabled"
+					   (change)="onChangeValueForHorizontalRangeSlider($event, SLIDER_HANDLES.upper)">
+			</mat-form-field>
+		</div>
+	</div>
+</example-viewer>
+
+<example-viewer [extensions]="['HTML', 'SCSS', 'TS']"
+				filesPath="slider/simple-vertical-slider"
+				exampleTitle="SHOWCASE.DEMO.SLIDER.SIMPLE_VERTICAL_SLIDER">
+	<div>
+		<stark-slider [values]="simpleVerticalSliderValues"
+					  sliderId="simple-vertical-slider"
+					  [sliderConfig]="simpleVerticalSliderConfig"
+					  [isDisabled]="!isSimpleVerticalSliderEnabled"
+					  (changed)="onChangeSimpleVerticalSlider($event)">
+		</stark-slider>
+		<div>
+			<mat-checkbox class="slider-enabled-field"
+						  (change)="$event ? toggleSimpleVerticalSliderEnable() : null"
+						  [checked]="isSimpleVerticalSliderEnabled">
+				{{ 'SHOWCASE.COMMON.ENABLED' | translate }}
+			</mat-checkbox>
+			<mat-form-field class="slider-value-field">
+				<input matInput
+					   placeholder="{{ 'SHOWCASE.COMMON.VALUE' | translate }}"
+					   type="number"
+					   step="10"
+					   [(ngModel)]="valueForSimpleVerticalSlider"
+					   [disabled]="!isSimpleVerticalSliderEnabled"
+					   (change)="onChangeValueForSimpleVerticalSlider($event)">
+			</mat-form-field>
+		</div>
+	</div>
+</example-viewer>
+
+<example-viewer [extensions]="['HTML', 'SCSS', 'TS']"
+				filesPath="slider/vertical-range-slider"
+				exampleTitle="SHOWCASE.DEMO.SLIDER.VERTICAL_RANGE_SLIDER">
+	<div>
+		<stark-slider [values]="verticalRangeSliderValues"
+					  sliderId="vertical-range-slider"
+					  [sliderConfig]="verticalRangeSliderConfig"
+					  [isDisabled]="!isVerticalRangeSliderEnabled"
+					  (changed)="onChangeVerticalRangeSlider($event)">
+		</stark-slider>
+		<div>
+			<mat-checkbox class="slider-enabled-field"
+						  (change)="$event ? toggleVerticalRangeSliderEnable() : null"
+						  [checked]="isVerticalRangeSliderEnabled">
+				{{ 'SHOWCASE.COMMON.ENABLED' | translate }}
+			</mat-checkbox>
+			<mat-form-field class="slider-value-field">
+				<input matInput
+					   placeholder="{{ 'SHOWCASE.COMMON.VALUE' | translate }} 1"
+					   type="number"
+					   step="10"
+					   [(ngModel)]="lowerValueForVerticalRangeSlider"
+					   [disabled]="!isVerticalRangeSliderEnabled"
+					   (change)="onChangeValueForVerticalRangeSlider($event, SLIDER_HANDLES.lower)">
+			</mat-form-field>
+			<mat-form-field class="slider-value-field">
+				<input matInput
+					   placeholder="{{ 'SHOWCASE.COMMON.VALUE' | translate }} 2"
+					   type="number"
+					   step="10"
+					   [(ngModel)]="upperValueForVerticalRangeSlider"
+					   [disabled]="!isVerticalRangeSliderEnabled"
+					   (change)="onChangeValueForVerticalRangeSlider($event, SLIDER_HANDLES.upper)">
+			</mat-form-field>
+		</div>
+	</div>
+</example-viewer>

showcase/src/app/demo/slider/slider.component.scss

@@ -0,0 +1,8 @@
+.slider-enabled-field {
+  margin-right: 16px;
+}
+
+.slider-value-field {
+  margin-top: 8px;
+  margin-right: 16px;
+}