angular2-resizable - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

angular2-resizable.d.ts

@@ -1,6 +0,2 @@
-import { Resizable } from './src/resizable.directive';
-export * from './src/resizable.directive';
-declare var _default: {
-    directives: typeof Resizable[];
-};
-export default _default;
+export * from './src/resizable.module';
+export { ResizeEvent } from './src/resizable.directive';

angular2-resizable.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		root["angular2Resizable"] = factory(root["ng"]["core"], root["rx"]["Subject"], root["rx"]["Observable"]["merge"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -62,8 +62,3 @@ /******/ 	// The module cache
 	}
-	var resizable_directive_1 = __webpack_require__(1);
 	__export(__webpack_require__(1));
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.default = {
-	    directives: [resizable_directive_1.Resizable]
-	};
 
@@ -86,5 +81,41 @@
 	var core_1 = __webpack_require__(2);
-	var Subject_1 = __webpack_require__(3);
-	var merge_1 = __webpack_require__(4);
-	__webpack_require__(5);
+	var resizable_directive_1 = __webpack_require__(3);
+	var ResizableModule = (function () {
+	    function ResizableModule() {
+	    }
+	    ResizableModule = __decorate([
+	        core_1.NgModule({
+	            declarations: [resizable_directive_1.Resizable, resizable_directive_1.ResizeHandle],
+	            exports: [resizable_directive_1.Resizable, resizable_directive_1.ResizeHandle]
+	        }), 
+	        __metadata('design:paramtypes', [])
+	    ], ResizableModule);
+	    return ResizableModule;
+	}());
+	exports.ResizableModule = ResizableModule;
+
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
+	var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+	    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	    return c > 3 && r && Object.defineProperty(target, key, r), r;
+	};
+	var __metadata = (this && this.__metadata) || function (k, v) {
+	    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+	};
+	var core_1 = __webpack_require__(2);
+	var Subject_1 = __webpack_require__(4);
+	var merge_1 = __webpack_require__(5);
 	__webpack_require__(6);
@@ -95,2 +126,3 @@ __webpack_require__(7);
 	__webpack_require__(10);
+	__webpack_require__(11);
 	/**
@@ -197,3 +229,3 @@ * @private
 	/**
-	 * An element placed inside a `mwl-resizable` directive to be used as a drag and resize handle
+	 * An element placed inside a `mwlResizable` directive to be used as a drag and resize handle
 	 *
@@ -203,4 +235,4 @@ * For example
 	 * ```
-	 * <div mwl-resizable>
-	 *   <div mwl-resize-handle [resizeEdges]="{bottom: true, right: true}"></div>
+	 * <div mwlResizable>
+	 *   <div mwlResizeHandle [resizeEdges]="{bottom: true, right: true}"></div>
 	 * </div>
@@ -239,3 +271,3 @@ * ```
 	    __decorate([
-	        // set by the parent mwl-resizable directive
+	        // set by the parent mwlResizable directive
 	        core_1.HostListener('mouseup', ['$event.clientX', '$event.clientY']), 
@@ -260,3 +292,3 @@ __metadata('design:type', Function),
 	        core_1.Directive({
-	            selector: '[mwl-resize-handle]'
+	            selector: '[mwlResizeHandle]'
 	        }), 
@@ -274,3 +306,3 @@ __metadata('design:paramtypes', [])
 	 * ```
-	 * <div mwl-resizable [resizeEdges]="{bottom: true, right: true, top: true, left: true}" [enableGhostResize]="true"></div>
+	 * <div mwlResizable [resizeEdges]="{bottom: true, right: true, top: true, left: true}" [enableGhostResize]="true"></div>
 	 * ```
@@ -290,3 +322,3 @@ */
 	        /**
-	         * Set to `true` to enable a temporary resizing effect of the element in between the `onResizeStart` and `onResizeEnd` events.
+	         * Set to `true` to enable a temporary resizing effect of the element in between the `resizeStart` and `resizeEnd` events.
 	         */
@@ -303,11 +335,11 @@ this.enableGhostResize = false;
 	         */
-	        this.onResizeStart = new core_1.EventEmitter(false);
+	        this.resizeStart = new core_1.EventEmitter(false);
 	        /**
 	         * Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
 	         */
-	        this.onResize = new core_1.EventEmitter(false);
+	        this.resize = new core_1.EventEmitter(false);
 	        /**
 	         * Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
 	         */
-	        this.onResizeEnd = new core_1.EventEmitter(false);
+	        this.resizeEnd = new core_1.EventEmitter(false);
 	        /**
@@ -417,3 +449,3 @@ * @private
 	            }
-	            _this.onResize.emit({
+	            _this.resize.emit({
 	                edges: getEdgesDiff({
@@ -453,3 +485,3 @@ edges: currentResize.edges,
 	            }
-	            _this.onResizeStart.emit({
+	            _this.resizeStart.emit({
 	                edges: getEdgesDiff({ edges: edges, initialRectangle: startingRect, newRectangle: startingRect }),
@@ -461,3 +493,3 @@ rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
 	            if (currentResize) {
-	                _this.onResizeEnd.emit({
+	                _this.resizeEnd.emit({
 	                    edges: getEdgesDiff({
@@ -521,11 +553,11 @@ edges: currentResize.edges,
 	        __metadata('design:type', core_1.EventEmitter)
-	    ], Resizable.prototype, "onResizeStart", void 0);
+	    ], Resizable.prototype, "resizeStart", void 0);
 	    __decorate([
 	        core_1.Output(), 
 	        __metadata('design:type', core_1.EventEmitter)
-	    ], Resizable.prototype, "onResize", void 0);
+	    ], Resizable.prototype, "resize", void 0);
 	    __decorate([
 	        core_1.Output(), 
 	        __metadata('design:type', core_1.EventEmitter)
-	    ], Resizable.prototype, "onResizeEnd", void 0);
+	    ], Resizable.prototype, "resizeEnd", void 0);
 	    __decorate([
@@ -555,3 +587,3 @@ core_1.ContentChildren(ResizeHandle),
 	        core_1.Directive({
-	            selector: '[mwl-resizable]'
+	            selector: '[mwlResizable]'
 	        }), 
@@ -566,14 +598,2 @@ __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef])
 /***/ },
-/* 2 */
-/***/ function(module, exports) {
-
-	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
-
-/***/ },
-/* 3 */
-/***/ function(module, exports) {
-
-	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
-
-/***/ },
 /* 4 */
@@ -620,2 +640,8 @@ /***/ function(module, exports) {
 
+/***/ },
+/* 11 */
+/***/ function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
+
 /***/ }
@@ -622,0 +648,0 @@ /******/ ])

CHANGELOG.md

@@ -5,2 +5,27 @@ # Change Log
 
+<a name="0.3.0"></a>
+# [0.3.0](https://github.com/mattlewis92/angular2-resizable/compare/v0.2.1...v0.3.0) (2016-08-12)
+
+
+### Features
+
+* **events:** rename all outputs to drop the on prefix ([9c76aac](https://github.com/mattlewis92/angular2-resizable/commit/9c76aac))
+* directive selectors are now camel case instead of dash case ([ffad2ca](https://github.com/mattlewis92/angular2-resizable/commit/ffad2ca))
+* upgrade to angular RC5 ([9557c0a](https://github.com/mattlewis92/angular2-resizable/commit/9557c0a))
+
+
+### BREAKING CHANGES
+
+* `mwl-resizable` is now `mwlResizable` and `mwl-resize-handle` is now `mwlResizeHandle`
+* Angular RC5 is now required
+
+The Resizable and ResizeHandle directives are now no longer exported. Instead you must use the ResizableModule. See the readme or the demo app for an example of how to do this.
+* events: The `onResizeStart` output has been renamed to `resizeStart`
+
+The `onResize` output has been renamed to `resize`
+
+The `onResizeEnd` output has been renamed to `resizeEnd`
+
+
+
 <a name="0.2.1"></a>
@@ -7,0 +32,0 @@ ## [0.2.1](https://github.com/mattlewis92/angular2-resizable/compare/v0.2.0...v0.2.1) (2016-07-15)

package.json

 {
   "name": "angular2-resizable",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "An angular2 directive that allows an element to be dragged and resized",
@@ -9,3 +9,3 @@ "main": "./angular2-resizable.js",
     "prestart": "typings install",
-    "start": "concurrently \"webpack-dev-server\" \"npm run test:watch\" \"open http://localhost:8000\"",
+    "start": "concurrently --raw \"webpack-dev-server\" \"npm run test:watch\" \"open http://localhost:8000\"",
     "build:demo": "webpack -p",
@@ -30,3 +30,4 @@ "build:dist": "webpack --config webpack.config.dist.js",
   "keywords": [
-    "angular2"
+    "angular2",
+    "resizable"
   ],
@@ -40,7 +41,7 @@ "author": "Matt Lewis",
   "devDependencies": {
-    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/common": "2.0.0-rc.5",
+    "@angular/compiler": "2.0.0-rc.5",
+    "@angular/core": "2.0.0-rc.5",
+    "@angular/platform-browser": "2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
     "chai": "~3.5.0",
@@ -56,12 +57,11 @@ "commitizen": "~2.8.1",
     "imports-loader": "~0.6.5",
-    "istanbul-instrumenter-loader": "~0.2.0",
-    "karma": "~1.1.1",
+    "karma": "~1.2.0",
     "karma-coverage": "~1.1.0",
     "karma-mocha": "~1.1.1",
     "karma-phantomjs-launcher": "~1.0.0",
-    "karma-remap-istanbul": "~0.1.1",
+    "karma-remap-istanbul": "~0.2.1",
     "karma-source-map-support": "~1.1.0",
     "karma-sourcemap-loader": "~0.3.7",
-    "karma-webpack": "~1.7.0",
-    "mocha": "~2.5.3",
+    "karma-webpack": "~1.8.0",
+    "mocha": "~3.0.2",
     "phantomjs-prebuilt": "~2.1.7",
@@ -72,5 +72,6 @@ "reflect-metadata": "~0.1.3",
     "sinon-chai": "~2.8.0",
+    "sourcemap-istanbul-instrumenter-loader": "~0.2.0",
     "standard-version": "~2.4.0",
     "ts-loader": "~0.8.2",
-    "tslint": "~3.13.0",
+    "tslint": "~3.14.0",
     "tslint-loader": "~2.1.4",
@@ -86,3 +87,3 @@ "typedoc": "~0.4.1",
   "peerDependencies": {
-    "@angular/core": "2.0.0-rc.4"
+    "@angular/core": "2.0.0-rc.5"
   },
@@ -89,0 +90,0 @@ "files": [

README.md

@@ -35,13 +35,12 @@ # angular2 resizable
 import {Component} from '@angular/core';
-import {Resizable} from 'angular2-resizable';
+import {ResizeEvent} from 'angular2-resizable';
 
 @Component({
   selector: 'demo-app',
-  directives: [Resizable],
   // you should add some styles to the element. See the demo folder for a more fleshed out example
-  template: '<div mwl-resizable (onResizeEnd)="onResizeEnd($event)"></div>'
+  template: '<div mwlResizable (resizeEnd)="onResizeEnd($event)"></div>'
 })
-export class DemoApp {
+export class MyComponent {
 
-  onResizeEnd(event: any): void {
+  onResizeEnd(event: ResizeEvent): void {
     console.log('Element was resized', event);
@@ -52,2 +51,13 @@ }
 
+// now use within your apps module
+import {NgModule} from '@angular/core';
+import {ResizableModule} from 'angular2-resizable';
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [ResizableModule],
+  bootstrap: [MyComponent]
+})
+class MyModule {}
+
 ```
@@ -76,3 +86,3 @@
 ### Development server
-Run `npm start` to start a development server on port 8000 with auto reload + tests. 
+Run `npm start` to start a development server on port 8000 with auto reload + tests.
 
@@ -79,0 +89,0 @@ ### Testing

src/resizable.directive.d.ts

@@ -37,3 +37,3 @@ import { Renderer, ElementRef, OnInit, AfterViewInit, EventEmitter } from '@angular/core';
 /**
- * An element placed inside a `mwl-resizable` directive to be used as a drag and resize handle
+ * An element placed inside a `mwlResizable` directive to be used as a drag and resize handle
  *
@@ -43,4 +43,4 @@ * For example
  * ```
- * <div mwl-resizable>
- *   <div mwl-resize-handle [resizeEdges]="{bottom: true, right: true}"></div>
+ * <div mwlResizable>
+ *   <div mwlResizeHandle [resizeEdges]="{bottom: true, right: true}"></div>
  * </div>
@@ -77,3 +77,3 @@ * ```
  * ```
- * <div mwl-resizable [resizeEdges]="{bottom: true, right: true, top: true, left: true}" [enableGhostResize]="true"></div>
+ * <div mwlResizable [resizeEdges]="{bottom: true, right: true, top: true, left: true}" [enableGhostResize]="true"></div>
  * ```
@@ -83,3 +83,3 @@ */
     private renderer;
-    private elm;
+    elm: ElementRef;
     /**
@@ -94,3 +94,3 @@ * A function that will be called before each resize event. Return `true` to allow the resize event to propagate or `false` to cancel it
     /**
-     * Set to `true` to enable a temporary resizing effect of the element in between the `onResizeStart` and `onResizeEnd` events.
+     * Set to `true` to enable a temporary resizing effect of the element in between the `resizeStart` and `resizeEnd` events.
      */
@@ -107,11 +107,11 @@ enableGhostResize: boolean;
      */
-    onResizeStart: EventEmitter<Object>;
+    resizeStart: EventEmitter<Object>;
     /**
      * Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
      */
-    onResize: EventEmitter<Object>;
+    resize: EventEmitter<Object>;
     /**
      * Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
      */
-    onResizeEnd: EventEmitter<Object>;
+    resizeEnd: EventEmitter<Object>;
     /**
@@ -118,0 +118,0 @@ * @private

No alert changes

Improved metrics

Total package byte prevSize

80682

increased by3.73%

Number of package files

9

increased by12.5%

Lines of code

764

increased by2.83%

Number of lines in readme file

98

increased by11.36%

No dependency changes