Merge pull request FuelInteractive#61 from coryshaw1/master

0.2.2 - Angular 2 rc1, Slider updates, bug fixes

bundles/fuel-ui.js

@@ -2701,9 +2701,19 @@ System.registerDynamic("fuel-ui/dist/components/Slider/Slider", ["@angular/core"
       this.margin = 10;
       this.value = 0;
       this.secondValue = null;
+      this.debounceTime = 150;
       this.valueChange = new core_1.EventEmitter();
       this.secondValueChange = new core_1.EventEmitter();
+      this.timeout = null;
     }
+    Slider.prototype.update = function(val) {
+      this.value = parseInt(val[0]);
+      this.secondValue = val.length > 1 ? parseInt(val[1]) : null;
+      this.valueChange.next(this.value);
+      this.secondValueChange.next(this.secondValue);
+      this.timeout = null;
+    };
+    ;
     Slider.prototype.ngAfterViewInit = function() {
       var _this = this;
       this._sliderElement = this._element.nativeElement.children[0];
@@ -2744,10 +2754,16 @@ System.registerDynamic("fuel-ui/dist/components/Slider/Slider", ["@angular/core"
         });
       }
       this._sliderElement.noUiSlider.on('slide', function(val) {
-        _this.value = val[0];
-        _this.secondValue = val.length > 1 ? val[1] : null;
-        _this.valueChange.next(val[0]);
-        _this.secondValueChange.next(_this.secondValue);
+        if (_this.timeout)
+          clearTimeout(_this.timeout);
+        _this.timeout = setTimeout(function() {
+          _this.update(val);
+        }, _this.debounceTime);
+      });
+      this._sliderElement.noUiSlider.on('end', function(val) {
+        if (_this.timeout)
+          clearTimeout(_this.timeout);
+        _this.update(val);
       });
     };
     Slider.prototype.ngOnChanges = function(changes) {
@@ -2771,6 +2787,7 @@ System.registerDynamic("fuel-ui/dist/components/Slider/Slider", ["@angular/core"
     __decorate([core_1.Input(), __metadata('design:type', Number)], Slider.prototype, "margin", void 0);
     __decorate([core_1.Input(), __metadata('design:type', Number)], Slider.prototype, "value", void 0);
     __decorate([core_1.Input(), __metadata('design:type', Number)], Slider.prototype, "secondValue", void 0);
+    __decorate([core_1.Input(), __metadata('design:type', Number)], Slider.prototype, "debounceTime", void 0);
     __decorate([core_1.Output(), __metadata('design:type', Object)], Slider.prototype, "valueChange", void 0);
     __decorate([core_1.Output(), __metadata('design:type', Object)], Slider.prototype, "secondValueChange", void 0);
     Slider = __decorate([core_1.Component({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuel-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A set of utilities and Angular2 components implementing Twitter's Bootstrap 4 components",
   "main": "dist/fuel-ui.js",
   "typings": "dist/fuel-ui.d.ts",
@@ -50,26 +50,26 @@
     "vinyl-source-stream": "^1.1.0"
   },
   "peerDependencies": {
-    "@angular/common": "^2.0.0-rc.0",
-    "@angular/compiler": "^2.0.0-rc.0",
-    "@angular/core": "^2.0.0-rc.0",
-    "@angular/http": "2.0.0-rc.0",
-    "@angular/platform-browser": "^2.0.0-rc.0",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.0",
-    "@angular/router": "2.0.0-rc.0",
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
     "bootstrap": "^4.0.0-alpha.2",
     "font-awesome": "^4.6.1",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
   },
   "dependencies": {
-    "@angular/common": "^2.0.0-rc.0",
-    "@angular/compiler": "^2.0.0-rc.0",
-    "@angular/core": "^2.0.0-rc.0",
-    "@angular/http": "2.0.0-rc.0",
-    "@angular/platform-browser": "^2.0.0-rc.0",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.0",
-    "@angular/router": "2.0.0-rc.0",
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
     "bootstrap": "^4.0.0-alpha.2",
     "core-js": "^2.2.1",
     "es6-shim": "^0.35.0",

src/components/Slider/Slider.Demo.ts

@@ -161,7 +161,8 @@ export class SliderDemo{
         new Attribute('secondValue', 'number', 'null', 'The value of the second number of the slider. When set to null the second handle will not display.'),
         new Attribute('step', 'number', '1', 'Slider increment on dragging'),
         new Attribute('value', 'number', '0', 'The value of the first number of the slider'),
-        new Attribute('width', 'string', 'null', 'Width of the slider element')
+        new Attribute('width', 'string', 'null', 'Width of the slider element'),
+        new Attribute('debounceTime', 'number', '150', 'The amount of debounce time in milliseconds for the values to emit while sliding. Setting a shorter debounce time may result in decreased performance of the sliding mechanism. Values emit instantly on tap, and when a user lets go of the slider.')
     ];
     attributesColumns:TableSortableColumn[] = AttributeColumns;
     attributesSort:TableSortableSorting = AttributesDefaultSort;

src/components/Slider/Slider.ts

@@ -26,13 +26,25 @@ export class Slider implements AfterViewInit, OnChanges {
     @Input() margin: number = 10;
     @Input() value: number = 0;
     @Input() secondValue: number = null;
+    @Input() debounceTime: number = 150;
     @Output() valueChange = new EventEmitter<any>();
     @Output() secondValueChange = new EventEmitter<any>();
     private _sliderElement: any;
     private _slider: any;
 
+    timeout: any = null;
+
     constructor(private _element: ElementRef) {}
 
+    update(val: any[]): any{
+        this.value = parseInt(val[0]);
+        this.secondValue = val.length > 1 ? parseInt(val[1]) : null;
+        this.valueChange.next(this.value);
+        this.secondValueChange.next(this.secondValue);
+
+        this.timeout = null;
+    };
+
     ngAfterViewInit(){
         this._sliderElement = this._element.nativeElement.children[0];
 
@@ -83,10 +95,19 @@ export class Slider implements AfterViewInit, OnChanges {
         }
 
         this._sliderElement.noUiSlider.on('slide', (val: number[]) => {
-            this.value = val[0];
-            this.secondValue = val.length > 1 ? val[1] : null;
-            this.valueChange.next(val[0]);
-            this.secondValueChange.next(this.secondValue);
+            if(this.timeout)
+                clearTimeout(this.timeout);
+
+            this.timeout = setTimeout(() => {
+                this.update(val);
+            }, this.debounceTime);
+        });
+
+        this._sliderElement.noUiSlider.on('end', (val: number[]) => {
+            if(this.timeout)
+                clearTimeout(this.timeout);
+
+            this.update(val);
         });
     }
 

src/components/Tab/Tab.Demo.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 import {TAB_PROVIDERS, Tab} from './Tab';
 import {CodeHighlighter} from '../../directives/CodeHighlighter/CodeHighlighter';
 import {TableSortable, TableSortableColumn, TableSortableSorting} from '../../components/TableSortable/TableSortable';
 import {Event, EventColumns, EventsDefaultSort, Attribute, AttributeColumns, AttributesDefaultSort} from '../../utilities/demoUtilities';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
 <div class="row">
     <div class="col-md-12">
@@ -20,8 +21,8 @@ import {Event, EventColumns, EventsDefaultSort, Attribute, AttributeColumns, Att
     <div (click)="$event.preventDefault()">
     <p>Select a tab by setting active binding to true:</p>
     <p>
-        <button type="button" class="btn btn-primary btn-sm" [disabled]="tabs[1].active" (click)="tabs[1].active = true">Select 2nd tab</button>
-        <button type="button" class="btn btn-primary btn-sm" [disabled]="tabs[2].active" (click)="tabs[2].active = true">Select 3rd tab</button>
+        <button type="button" class="btn btn-primary btn-sm" [disabled]="tabs[1].active" (click)="setActiveTab(1)">Select 2nd tab</button>
+        <button type="button" class="btn btn-primary btn-sm" [disabled]="tabs[2].active" (click)="setActiveTab(2)">Select 3rd tab</button>
     </p>
     <p>
         <button type="button" class="btn btn-primary btn-sm" (click)="tabs[2].disabled = ! tabs[2].disabled">Enable/Disable 3rd tab</button>
@@ -40,7 +41,7 @@ import {Event, EventColumns, EventsDefaultSort, Attribute, AttributeColumns, Att
         {{theTab?.content}}
         </tab>
     </tabset>
-
+    
     <hr />
 
     <tabset [vertical]="true" type="pills">