feat: directive selectors are now camel case instead of dash case

BREAKING CHANGE: `mwl-resizable` is now `mwlResizable` and `mwl-resize-handle` is now `mwlResizeHandle`
mattlewis92 · Aug 12, 2016 · ffad2ca · ffad2ca
1 parent 9557c0a
commit ffad2ca
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ import {ResizeEvent} from 'angular2-resizable';
 @Component({
   selector: 'demo-app',
   // you should add some styles to the element. See the demo folder for a more fleshed out example
-  template: '<div mwl-resizable (resizeEnd)="onResizeEnd($event)"></div>'
+  template: '<div mwlResizable (resizeEnd)="onResizeEnd($event)"></div>'
 })
 export class MyComponent {
 

diff --git a/demo/demo.component.ts b/demo/demo.component.ts
@@ -30,7 +30,7 @@ import {ResizeEvent} from './../angular2-resizable';
       <div
         class="rectangle"
         [ngStyle]="style"
-        mwl-resizable
+        mwlResizable
         [validateResize]="validate"
         [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
         [enableGhostResize]="true"
@@ -39,7 +39,7 @@ import {ResizeEvent} from './../angular2-resizable';
         <img
           src="http://i.imgur.com/eqzz2dl.gif"
           class="resize-handle"
-          mwl-resize-handle
+          mwlResizeHandle
           [resizeEdges]="{bottom: true, right: true}">
       </div>
     </div>

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -163,18 +163,18 @@ const getEdgesDiff: Function = ({edges, initialRectangle, newRectangle}): Edges
 };
 
 /**
- * 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
  *
  * 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>
  * ```
  */
 @Directive({
-  selector: '[mwl-resize-handle]'
+  selector: '[mwlResizeHandle]'
 })
 export class ResizeHandle {
 
@@ -186,7 +186,7 @@ export class ResizeHandle {
   /**
    * @private
    */
-  public resizable: Resizable; // set by the parent mwl-resizable directive
+  public resizable: Resizable; // set by the parent mwlResizable directive
 
   /**
    * @private
@@ -220,11 +220,11 @@ export class ResizeHandle {
  * For example
  *
  * ```
- * <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>
  * ```
  */
 @Directive({
-  selector: '[mwl-resizable]'
+  selector: '[mwlResizable]'
 })
 export class Resizable implements OnInit, AfterViewInit {
 

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -21,7 +21,7 @@ describe('resizable directive', () => {
       <div
         class="rectangle"
         [ngStyle]="style"
-        mwl-resizable
+        mwlResizable
         [validateResize]="validate"
         [resizeEdges]="resizeEdges"
         [enableGhostResize]="enableGhostResize"
@@ -785,14 +785,14 @@ describe('resizable directive', () => {
       <div
         class="rectangle"
         [ngStyle]="style"
-        mwl-resizable
+        mwlResizable
         (resizeStart)="resizeStart($event)"
         (resize)="resize($event)"
         (resizeEnd)="resizeEnd($event)">
         <span
           style="width: 5px; height: 5px; position: absolute; bottom: 5px; right: 5px"
           class="resize-handle"
-          mwl-resize-handle
+          mwlResizeHandle
           [resizeEdges]="{bottom: true, right: true}">
         </span>
       </div>