chore(all): add @Inject, add default value, fix style in demo

ng-web-apis · Apr 10, 2020 · ca5d66f · ca5d66f
1 parent 9e868c8
commit ca5d66f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/projects/demo/src/app/app.component.less b/projects/demo/src/app/app.component.less
@@ -28,52 +28,70 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    text-align: center;
+    padding: 10px;
     width: 80%;
     min-width: 124px;
     height: 200px;
     transition: background 0.1s;
 
-    &[data-ratio='0'] {
+    &[data-ratio='1'] {
+        background: #e885eb;
+    }
+
+    &[data-ratio='2'] {
+        background: #c685eb;
+    }
+
+    &[data-ratio='3'] {
+        background: #ac85eb;
+    }
+
+    &[data-ratio='4'] {
+        background: #9885eb;
+    }
+
+    &[data-ratio='5'] {
         background: #8591eb;
     }
 
-    &[data-ratio='1'] {
+    &[data-ratio='6'] {
         background: #85a0eb;
     }
 
-    &[data-ratio='2'] {
+    &[data-ratio='7'] {
         background: #84aeeb;
     }
 
-    &[data-ratio='3'] {
+    &[data-ratio='8'] {
         background: #83beeb;
     }
 
-    &[data-ratio='4'] {
+    &[data-ratio='9'] {
         background: #86d2eb;
     }
 
-    &[data-ratio='5'] {
+    &[data-ratio='10'] {
         background: #87ddeb;
     }
 
-    &[data-ratio='6'] {
+    &[data-ratio='11'] {
         background: #8ae5eb;
     }
 
-    &[data-ratio='7'] {
+    &[data-ratio='12'] {
         background: #8bebdf;
     }
 
-    &[data-ratio='8'] {
+    &[data-ratio='13'] {
         background: #83ebc8;
     }
 
-    &[data-ratio='9'] {
+    &[data-ratio='14'] {
         background: #6beb99;
     }
 
-    &[data-ratio='10'] {
+    &[data-ratio='15'] {
         background: #4ceb60;
     }
 }
diff --git a/projects/resize-observer/src/directives/resize-observer.directive.ts b/projects/resize-observer/src/directives/resize-observer.directive.ts
@@ -1,12 +1,12 @@
 import {Attribute, Directive, Inject, Output} from '@angular/core';
 import {Observable} from 'rxjs';
 import {ResizeObserverService} from '../services/resize-observer.service';
-import {RESIZE_OPTION_BOX} from '../tokens/resize-option-box';
+import {RESIZE_OPTION_BOX, RESIZE_OPTION_BOX_DEFAULT} from '../tokens/resize-option-box';
 
 export function boxFactory(
-    box: ResizeObserverOptions['box'],
+    box: ResizeObserverOptions['box'] | null,
 ): ResizeObserverOptions['box'] {
-    return box;
+    return box || RESIZE_OPTION_BOX_DEFAULT;
 }
 
 // @dynamic

diff --git a/projects/resize-observer/src/services/resize-observer.service.ts b/projects/resize-observer/src/services/resize-observer.service.ts
@@ -11,9 +11,9 @@ export class ResizeObserverService extends Observable<
 > {
     constructor(
         @Inject(ElementRef) {nativeElement}: ElementRef<Element>,
+        @Inject(NgZone) ngZone: NgZone,
         @Inject(RESIZE_OBSERVER_SUPPORT) support: boolean,
         @Inject(RESIZE_OPTION_BOX) box: ResizeObserverOptions['box'],
-        ngZone: NgZone,
     ) {
         let observer: ResizeObserver;
 

diff --git a/projects/resize-observer/src/services/tests/resize-observer.service.spec.ts b/projects/resize-observer/src/services/tests/resize-observer.service.spec.ts
@@ -8,9 +8,9 @@ describe('ResizeObserverService', () => {
             {
                 nativeElement: document.createElement('DIV'),
             },
+            new NgZone({}),
             false,
             'content-box',
-            new NgZone({}),
         );
 
         service.subscribe({

diff --git a/projects/resize-observer/src/tokens/resize-option-box.ts b/projects/resize-observer/src/tokens/resize-option-box.ts
@@ -1,9 +1,11 @@
 import {InjectionToken} from '@angular/core';
 
+export const RESIZE_OPTION_BOX_DEFAULT = 'content-box';
+
 export const RESIZE_OPTION_BOX = new InjectionToken<ResizeObserverOptions['box']>(
     'Box model to observe changes',
     {
         providedIn: 'root',
-        factory: () => 'content-box',
+        factory: () => RESIZE_OPTION_BOX_DEFAULT,
     },
 );