ng2-datetime - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0

ng2-datetime.js

 "use strict";
-var ng2_datetime_1 = require('./src/ng2-datetime/ng2-datetime');
+Object.defineProperty(exports, "__esModule", { value: true });
+var ng2_datetime_1 = require("./src/ng2-datetime/ng2-datetime");
 exports.NKDatetime = ng2_datetime_1.NKDatetime;
-var ng2_datetime_module_1 = require('./src/ng2-datetime/ng2-datetime.module');
+var ng2_datetime_module_1 = require("./src/ng2-datetime/ng2-datetime.module");
 exports.NKDatetimeModule = ng2_datetime_module_1.NKDatetimeModule;
 //# sourceMappingURL=ng2-datetime.js.map

ng2-datetime.ts

 export { NKDatetime } from './src/ng2-datetime/ng2-datetime';
 export { NKDatetimeModule } from './src/ng2-datetime/ng2-datetime.module';

package.json

 {
   "name": "ng2-datetime",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Bootstrap datetime picker for Angular",
@@ -21,3 +21,3 @@ "main": "ng2-datetime.js",
     "tsc": "tsc",
-    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail && npm run tsc && cp .nojekyll dist/"
+    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail && npm run tsc"
   },
@@ -30,14 +30,14 @@ "license": "MIT",
   "dependencies": {
-    "jquery": ">=2.2.1",
     "bootstrap": ">=3.0.0",
     "bootstrap-datepicker": "1.7.0-RC1",
-    "bootstrap-timepicker": "^0.5.2"
+    "bootstrap-timepicker": "^0.5.2",
+    "jquery": ">=2.2.1"
   },
   "devDependencies": {
-    "@angular/common": "^2.4.1",
-    "@angular/compiler": "^2.4.1",
-    "@angular/core": "^2.4.1",
-    "@angular/forms": "^2.4.1",
-    "@angular/platform-browser": "^2.4.1",
-    "@angular/platform-browser-dynamic": "^2.4.1",
+    "@angular/common": "^4.0.3",
+    "@angular/compiler": "^4.0.3",
+    "@angular/core": "^4.0.3",
+    "@angular/forms": "^4.0.3",
+    "@angular/platform-browser": "^4.0.3",
+    "@angular/platform-browser-dynamic": "^4.0.3",
     "@types/core-js": "^0.9.35",
@@ -48,3 +48,3 @@ "@types/jasmine": "^2.5.40",
     "angular2-template-loader": "^0.4.0",
-    "awesome-typescript-loader": "^2.2.4",
+    "awesome-typescript-loader": "^3.1.2",
     "core-js": "^2.4.1",
@@ -69,9 +69,9 @@ "css-loader": "^0.23.1",
     "style-loader": "^0.13.1",
-    "tslint": "^4.2.0",
-    "typescript": "~2.0.10",
+    "tslint": "^4.5.1",
+    "typescript": "^2.2.2",
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.14.1",
     "webpack-merge": "^0.14.0",
-    "zone.js": "^0.7.4"
+    "zone.js": "^0.8.4"
   }
 }

README.md

@@ -0,0 +0,0 @@ # ng2-datetime

src/ng2-datetime/ITimepickerEvent.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=ITimepickerEvent.js.map

src/ng2-datetime/ng2-datetime.js

@@ -11,12 +11,14 @@ "use strict";
 };
-var core_1 = require('@angular/core');
-var forms_1 = require('@angular/forms');
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var forms_1 = require("@angular/forms");
+var CUSTOM_ACCESSOR = {
+    provide: forms_1.NG_VALUE_ACCESSOR,
+    useExisting: core_1.forwardRef(function () { return NKDatetime; }),
+    multi: true
+};
 var NKDatetime = (function () {
-    function NKDatetime(ngControl) {
-        this.dateChange = new core_1.EventEmitter();
+    function NKDatetime() {
         this.timepickerOptions = {};
         this.datepickerOptions = {};
-        this.hasClearButton = false;
-        this.readonly = null;
-        this.required = null;
         this.idDatePicker = uniqueId('q-datepicker_');
@@ -28,4 +30,10 @@ this.idTimePicker = uniqueId('q-timepicker_');
         };
-        ngControl.valueAccessor = this; // override valueAccessor
     }
+    Object.defineProperty(NKDatetime.prototype, "tabindexAttr", {
+        get: function () {
+            return this.tabindex === undefined ? '-1' : undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
     NKDatetime.prototype.ngAfterViewInit = function () {
@@ -89,7 +97,7 @@ this.init();
             (this.timeModel === '' && this.dateModel === ''))) {
-            this.dateChange.emit(null);
+            this.onChange(undefined);
         }
     };
     NKDatetime.prototype.clearModels = function () {
-        this.dateChange.emit(null);
+        this.onChange(undefined);
         if (this.timepicker) {
@@ -122,3 +130,3 @@ this.timepicker.timepicker('setTime', null);
                 _this.date = newDate;
-                _this.dateChange.emit(newDate);
+                _this.onChange(newDate);
             });
@@ -152,3 +160,3 @@ }
                 _this.date.setSeconds(e.time.seconds);
-                _this.dateChange.emit(_this.date);
+                _this.onChange(_this.date);
             });
@@ -188,42 +196,47 @@ }
     };
-    __decorate([
-        core_1.Output(), 
-        __metadata('design:type', core_1.EventEmitter)
-    ], NKDatetime.prototype, "dateChange", void 0);
-    __decorate([
-        core_1.Input('timepicker'), 
-        __metadata('design:type', Object)
-    ], NKDatetime.prototype, "timepickerOptions", void 0);
-    __decorate([
-        core_1.Input('datepicker'), 
-        __metadata('design:type', Object)
-    ], NKDatetime.prototype, "datepickerOptions", void 0);
-    __decorate([
-        core_1.Input('hasClearButton'), 
-        __metadata('design:type', Boolean)
-    ], NKDatetime.prototype, "hasClearButton", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
-    ], NKDatetime.prototype, "readonly", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Boolean)
-    ], NKDatetime.prototype, "required", void 0);
-    __decorate([
-        core_1.HostListener('dateChange', ['$event']), 
-        __metadata('design:type', Object)
-    ], NKDatetime.prototype, "onChange", void 0);
-    NKDatetime = __decorate([
-        core_1.Component({
-            selector: 'datetime',
-            template: "\n        <div class=\"form-inline ng2-datetime\">\n            <div class=\"input-group date\">\n                <input id=\"{{idDatePicker}}\" type=\"text\" class=\"form-control\"\n                       [attr.readonly]=\"readonly\"\n                       [attr.required]=\"required\"\n                       [attr.placeholder]=\"datepickerOptions.placeholder || 'Choose date'\"\n                       [(ngModel)]=\"dateModel\"\n                       (keyup)=\"checkEmptyValue($event)\"/>\n                <div [hidden]=\"datepickerOptions.hideIcon || datepickerOptions === false || false\"\n                     (click)=\"showDatepicker()\"\n                     class=\"input-group-addon\">\n                    <span [ngClass]=\"datepickerOptions.icon || 'glyphicon glyphicon-th'\"></span>\n                </div>\n            </div>\n            <div class=\"input-group bootstrap-timepicker timepicker\">\n                <input id=\"{{idTimePicker}}\" type=\"text\" class=\"form-control input-small\"\n                       [attr.readonly]=\"readonly\"\n                       [attr.required]=\"required\"\n                       [attr.placeholder]=\"timepickerOptions.placeholder || 'Set time'\"\n                       [(ngModel)]=\"timeModel\"\n                       (focus)=\"showTimepicker()\"\n                       (keyup)=\"checkEmptyValue($event)\">\n                <span [hidden]=\"timepickerOptions.hideIcon || false\" class=\"input-group-addon\">\n                    <i [ngClass]=\"timepickerOptions.icon || 'glyphicon glyphicon-time'\"></i>\n                </span>\n            </div>\n            <button *ngIf=\"hasClearButton\" type=\"button\" (click)=\"clearModels()\">Clear</button>\n        </div>\n    ",
-            styles: [
-                '.ng2-datetime *[hidden] { display: none; }'
-            ]
-        }), 
-        __metadata('design:paramtypes', [forms_1.NgControl])
-    ], NKDatetime);
     return NKDatetime;
 }());
+__decorate([
+    core_1.Input('timepicker'),
+    __metadata("design:type", Object)
+], NKDatetime.prototype, "timepickerOptions", void 0);
+__decorate([
+    core_1.Input('datepicker'),
+    __metadata("design:type", Object)
+], NKDatetime.prototype, "datepickerOptions", void 0);
+__decorate([
+    core_1.Input('hasClearButton'),
+    __metadata("design:type", Boolean)
+], NKDatetime.prototype, "hasClearButton", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", Boolean)
+], NKDatetime.prototype, "readonly", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", Boolean)
+], NKDatetime.prototype, "required", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", String)
+], NKDatetime.prototype, "tabindex", void 0);
+__decorate([
+    core_1.HostListener('blur'),
+    __metadata("design:type", Object)
+], NKDatetime.prototype, "onTouched", void 0);
+__decorate([
+    core_1.HostBinding('attr.tabindex'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], NKDatetime.prototype, "tabindexAttr", null);
+NKDatetime = __decorate([
+    core_1.Component({
+        selector: 'datetime',
+        providers: [CUSTOM_ACCESSOR],
+        template: "\n        <div class=\"form-inline ng2-datetime\">\n            <div [ngClass]=\"{ 'form-group': true, 'input-group': !datepickerOptions.hideIcon, 'date': true }\">\n                <input id=\"{{idDatePicker}}\" type=\"text\" class=\"form-control\"\n                       [attr.readonly]=\"readonly\"\n                       [attr.required]=\"required\"\n                       [attr.placeholder]=\"datepickerOptions.placeholder || 'Choose date'\"\n                       [attr.tabindex]=\"tabindex\"\n                       [(ngModel)]=\"dateModel\"\n                       (blur)=\"onTouched()\"\n                       (keyup)=\"checkEmptyValue($event)\"/>\n                <div [hidden]=\"datepickerOptions.hideIcon || datepickerOptions === false\"\n                     (click)=\"showDatepicker()\"\n                     class=\"input-group-addon\">\n                    <span [ngClass]=\"datepickerOptions.icon || 'glyphicon glyphicon-th'\"></span>\n                </div>\n            </div>\n            <div [ngClass]=\"{ 'form-group': true, 'input-group': !timepickerOptions.hideIcon, 'bootstrap-timepicker timepicker': true }\">\n                <input id=\"{{idTimePicker}}\" type=\"text\" class=\"form-control input-small\"\n                       [attr.readonly]=\"readonly\"\n                       [attr.required]=\"required\"\n                       [attr.placeholder]=\"timepickerOptions.placeholder || 'Set time'\"\n                       [attr.tabindex]=\"tabindex\"\n                       [(ngModel)]=\"timeModel\"\n                       (focus)=\"showTimepicker()\"\n                       (blur)=\"onTouched()\"\n                       (keyup)=\"checkEmptyValue($event)\">\n                <span [hidden]=\"timepickerOptions.hideIcon || false\" class=\"input-group-addon\">\n                    <i [ngClass]=\"timepickerOptions.icon || 'glyphicon glyphicon-time'\"></i>\n                </span>\n            </div>\n            <button *ngIf=\"hasClearButton\" type=\"button\" (click)=\"clearModels()\">Clear</button>\n        </div>\n    ",
+        styles: [
+            '.ng2-datetime *[hidden] { display: none; }'
+        ]
+    })
+], NKDatetime);
 exports.NKDatetime = NKDatetime;
@@ -230,0 +243,0 @@ var id = 0;

src/ng2-datetime/ng2-datetime.module.js

@@ -8,23 +8,20 @@ "use strict";
 };
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var core_1 = require('@angular/core');
-var common_1 = require('@angular/common');
-var forms_1 = require('@angular/forms');
-var ng2_datetime_1 = require('./ng2-datetime');
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var common_1 = require("@angular/common");
+var forms_1 = require("@angular/forms");
+var ng2_datetime_1 = require("./ng2-datetime");
 var NKDatetimeModule = (function () {
     function NKDatetimeModule() {
     }
-    NKDatetimeModule = __decorate([
-        core_1.NgModule({
-            imports: [common_1.CommonModule, forms_1.FormsModule],
-            exports: [ng2_datetime_1.NKDatetime],
-            declarations: [ng2_datetime_1.NKDatetime]
-        }), 
-        __metadata('design:paramtypes', [])
-    ], NKDatetimeModule);
     return NKDatetimeModule;
 }());
+NKDatetimeModule = __decorate([
+    core_1.NgModule({
+        imports: [common_1.CommonModule, forms_1.FormsModule, forms_1.ReactiveFormsModule],
+        exports: [ng2_datetime_1.NKDatetime],
+        declarations: [ng2_datetime_1.NKDatetime]
+    })
+], NKDatetimeModule);
 exports.NKDatetimeModule = NKDatetimeModule;
 //# sourceMappingURL=ng2-datetime.module.js.map

src/ng2-datetime/ng2-datetime.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NKDatetime } from './ng2-datetime';
 
 @NgModule({
-    imports: [CommonModule, FormsModule],
+    imports: [CommonModule, FormsModule, ReactiveFormsModule],
     exports: [NKDatetime],
@@ -9,0 +9,0 @@ declarations: [NKDatetime]

src/ng2-datetime/ng2-datetime.ts

 import {
-    Component, Output, Input, EventEmitter, HostListener, AfterViewInit, OnDestroy,
-    SimpleChanges, OnChanges
+    Component, Input, HostListener, AfterViewInit, OnDestroy,
+    SimpleChanges, OnChanges, HostBinding, forwardRef
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { ITimepickerEvent } from './ITimepickerEvent';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {ITimepickerEvent} from './ITimepickerEvent';
 
+const CUSTOM_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => NKDatetime),
+    multi: true
+};
+
 @Component({
     selector: 'datetime',
+    providers: [CUSTOM_ACCESSOR],
     template: `
         <div class="form-inline ng2-datetime">
-            <div class="input-group date">
+            <div [ngClass]="{ 'form-group': true, 'input-group': !datepickerOptions.hideIcon, 'date': true }">
                 <input id="{{idDatePicker}}" type="text" class="form-control"
@@ -17,5 +24,7 @@ [attr.readonly]="readonly"
                        [attr.placeholder]="datepickerOptions.placeholder || 'Choose date'"
+                       [attr.tabindex]="tabindex"
                        [(ngModel)]="dateModel"
+                       (blur)="onTouched()"
                        (keyup)="checkEmptyValue($event)"/>
-                <div [hidden]="datepickerOptions.hideIcon || datepickerOptions === false || false"
+                <div [hidden]="datepickerOptions.hideIcon || datepickerOptions === false"
                      (click)="showDatepicker()"
@@ -26,3 +35,3 @@ class="input-group-addon">
             </div>
-            <div class="input-group bootstrap-timepicker timepicker">
+            <div [ngClass]="{ 'form-group': true, 'input-group': !timepickerOptions.hideIcon, 'bootstrap-timepicker timepicker': true }">
                 <input id="{{idTimePicker}}" type="text" class="form-control input-small"
@@ -32,4 +41,6 @@ [attr.readonly]="readonly"
                        [attr.placeholder]="timepickerOptions.placeholder || 'Set time'"
+                       [attr.tabindex]="tabindex"
                        [(ngModel)]="timeModel"
                        (focus)="showTimepicker()"
+                       (blur)="onTouched()"
                        (keyup)="checkEmptyValue($event)">
@@ -49,8 +60,8 @@ <span [hidden]="timepickerOptions.hideIcon || false" class="input-group-addon">
 export class NKDatetime implements ControlValueAccessor, AfterViewInit, OnDestroy, OnChanges {
-    @Output() dateChange: EventEmitter<Date> = new EventEmitter<Date>();
     @Input('timepicker') timepickerOptions: any = {};
     @Input('datepicker') datepickerOptions: any = {};
-    @Input('hasClearButton') hasClearButton: boolean = false;
-    @Input() readonly: boolean = null;
-    @Input() required: boolean = null;
+    @Input('hasClearButton') hasClearButton: boolean;
+    @Input() readonly: boolean;
+    @Input() required: boolean;
+    @Input() tabindex: string;
 
@@ -68,10 +79,12 @@ date: Date; // ngModel
 
-    @HostListener('dateChange', ['$event'])
     onChange = (_: any) => {
     }
+
+    @HostListener('blur')
     onTouched = () => {
     }
 
-    constructor(ngControl: NgControl) {
-        ngControl.valueAccessor = this; // override valueAccessor
+    @HostBinding('attr.tabindex')
+    get tabindexAttr(): string | undefined {
+        return this.tabindex === undefined ? '-1' : undefined;
     }
@@ -117,3 +130,3 @@
 
-    writeValue(value: any): void {
+    writeValue(value: any) {
         this.date = value;
@@ -129,7 +142,7 @@ if (isDate(this.date)) {
 
-    registerOnChange(fn: (_: any) => void): void {
+    registerOnChange(fn: (_: any) => void) {
         this.onChange = fn;
     }
 
-    registerOnTouched(fn: () => void): void {
+    registerOnTouched(fn: () => void) {
         this.onTouched = fn;
@@ -145,3 +158,3 @@ }
             )) {
-            this.dateChange.emit(null);
+            this.onChange(undefined);
         }
@@ -151,3 +164,3 @@ }
     clearModels() {
-        this.dateChange.emit(null);
+        this.onChange(undefined);
         if (this.timepicker) {
@@ -171,3 +184,3 @@ this.timepicker.timepicker('setTime', null);
         if (!this.datepicker && this.datepickerOptions !== false) {
-            let options = jQuery.extend({ enableOnReadonly: !this.readonly }, this.datepickerOptions);
+            let options = jQuery.extend({enableOnReadonly: !this.readonly}, this.datepickerOptions);
             this.datepicker = (<any>$('#' + this.idDatePicker)).datepicker(options);
@@ -186,3 +199,3 @@ this.datepicker
                     this.date = newDate;
-                    this.dateChange.emit(newDate);
+                    this.onChange(newDate);
                 });
@@ -194,7 +207,7 @@ } else if (this.datepickerOptions === false) {
         if (!this.timepicker && this.timepickerOptions !== false) {
-            let options = jQuery.extend({ defaultTime: false }, this.timepickerOptions);
+            let options = jQuery.extend({defaultTime: false}, this.timepickerOptions);
             this.timepicker = (<any>$('#' + this.idTimePicker)).timepicker(options);
             this.timepicker
                 .on('changeTime.timepicker', (e: ITimepickerEvent) => {
-                    let { meridian, hours } = e.time;
+                    let {meridian, hours} = e.time;
 
@@ -220,3 +233,3 @@ if (meridian) {
                     this.date.setSeconds(e.time.seconds);
-                    this.dateChange.emit(this.date);
+                    this.onChange(this.date);
                 });
@@ -223,0 +236,0 @@ } else if (this.timepickerOptions === false) {

tslint.json

@@ -0,0 +0,0 @@ {

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47478

increased by25.22%

Lines of code

756

increased by25.37%

No dependency changes