feat(daterangepicker): added daterangepicker wrapper

#801

build/tasks/build.js

@@ -219,7 +219,7 @@ gulp.task('doc', function(callback){
 
 
 gulp.task('bindables:download', function () {
-  return request('https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/kendo-ui/index.d.ts')
+  return request('https://raw.githubusercontent.com/telerik/kendo-ui-core/master/typescript/kendo.all.d.ts')
   .pipe(source('kendo-ui.d.ts'))
   .pipe(gulp.dest('./temp'));
 });
@@ -363,24 +363,11 @@ function iterativeOptionsLookup(_class, optionClasses) {
    }
 }
 
-gulp.task('bindables', function (cb) {
-  return runSequence(
+gulp.task('bindables', gulp.series(
     // 'bindables:download',
     'bindables:typedoc',
-    'bindables:extract',
-    cb);
-});
-
-gulp.task('default', function(callback) {
-  return runSequence(
-    'lint',
-    'build',
-    'test',
-    callback
-  );
-});
-
-gulp.task('ci', gulp.series('default'));
+    'bindables:extract')
+);
 
 gulp.task('bump-version', function(){
   return gulp.src(['./package.json', './bower.json'], { allowEmpty : true })
@@ -487,3 +474,13 @@ gulp.task('watch', gulp.series(
     gulp.watch(paths.sample + '/src/**/*', { interval: 500 }, gulp.series(bs.reload)).on('change', reportChange)
   }
 ));
+
+
+gulp.task('default', gulp.series(
+  'lint',
+  'build',
+  'test'
+)
+);
+
+gulp.task('ci', gulp.series('default'));

src/config-builder.js

@@ -48,6 +48,7 @@ export class KendoConfigBuilder {
       .kendoDropDownList()
       .kendoDateTimePicker()
       .kendoDatePicker()
+      .kendoDateRangePicker()
       .kendoDraggable()
       .kendoDropTarget()
       .kendoFlatColorPicker()
@@ -87,7 +88,7 @@ export class KendoConfigBuilder {
 	  .kendoChart()
 	  .kendoChat()
 	  .kendoDiagram()
-	  .kendoDropdownTree()
+	  .kendoDropDownTree()
       .kendoEditor()
       .kendoFilterMenu()
       .kendoGantt()
@@ -228,6 +229,11 @@ export class KendoConfigBuilder {
     return this;
   }
 
+  kendoDateRangePicker(): KendoConfigBuilder {
+    this.resources.push(PLATFORM.moduleName('./daterangepicker/daterangepicker'));
+    return this;
+  }
+
   kendoDiagram(): KendoConfigBuilder {
     this.resources.push(PLATFORM.moduleName('./diagram/diagram'));
     return this;

src/daterangepicker/daterangepicker.js

@@ -0,0 +1,55 @@
+import {inject} from 'aurelia-dependency-injection';
+import {customAttribute, bindable} from 'aurelia-templating';
+import {WidgetBase} from '../common/widget-base';
+import {generateBindables} from '../common/decorators';
+import {constants} from '../common/constants';
+
+@customAttribute(`${constants.attributePrefix}daterangepicker`)
+@generateBindables('kendoDateRangePicker')
+@inject(Element, WidgetBase)
+export class DateRangePicker {
+  @bindable kEnabled;
+  @bindable kReadOnly;
+  @bindable({defaultBindingMode: 2}) kRange;
+
+  constructor(element, widgetBase) {
+    this.element = element;
+    this.widgetBase = widgetBase
+      .control('kendoDateRangePicker')
+      .useElement(this.element)
+      .linkViewModel(this)
+      .useValueBinding('kRange', 'range')
+      .bindToKendo('kEnabled', 'enable')
+      .bindToKendo('kReadOnly', 'readonly');
+  }
+
+  subscribe(event, callback) {
+    return this.widgetBase.subscribe(event, callback);
+  }
+
+  bind(ctx, overrideCtx) {
+    this.widgetBase.useParentCtx(overrideCtx);
+  }
+
+  attached() {
+    if (!this.kNoInit) {
+      this.recreate();
+    }
+  }
+
+  recreate() {
+    this.kWidget = this.widgetBase.recreate();
+  }
+
+  propertyChanged(property, newValue, oldValue) {
+    this.widgetBase.handlePropertyChanged(this.kWidget, property, newValue, oldValue);
+  }
+
+  destroy() {
+    this.widgetBase.destroy(this.kWidget);
+  }
+
+  detached() {
+    this.destroy();
+  }
+}