chore: merge with master

attach component custom props on initialize without ToppyOverlay

Author: lokesh-coder

docs/app/app.component.html

@@ -91,8 +91,8 @@
             >
           </li>
           <li>
-            <a (click)="scrollTo('communication')" [ngClass]="{ active: currentSection === 'communication' }"
-              ><span class="toppy-icon icon-rss"></span> Communication</a
+            <a (click)="scrollTo('content-properties')" [ngClass]="{ active: currentSection === 'content-properties' }"
+              ><span class="toppy-icon icon-rss"></span> Content Properties</a
             >
           </li>
           <li>

docs/app/host-components/hero-screen/hero-screen.component.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
-import { ToppyOverlay } from 'toppy';
 
 @Component({
   selector: 'app-hero-screen',
   templateUrl: './hero-screen.component.html',
   styles: []
 })
 export class HeroScreenComponent {
-  constructor(public overlay: ToppyOverlay) {}
+  close;
+  constructor() {}
   dispose() {
-    this.overlay.close();
+    this.close();
   }
 }

docs/app/test/test.component.html

@@ -1,4 +1,4 @@
 <div class="box">
   <p>Hello Everyone!</p>
-  <span (click)="close()">close</span>
-</div>
+  <span (click)="dismiss()">close</span>
+</div>

docs/app/test/test.component.ts

@@ -1,18 +1,16 @@
 import { Component, OnInit } from '@angular/core';
-import { ToppyOverlay } from 'toppy';
 
 @Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.scss']
 })
 export class TestComponent implements OnInit {
-  constructor(private oc: ToppyOverlay) {}
+  close;
+  constructor() {}
 
-  ngOnInit() {
-    console.log('ID', this.oc);
-  }
-  close() {
-    this.oc.close();
+  ngOnInit() {}
+  dismiss() {
+    this.close();
   }
 }

docs/app/utils/content/content.component.html

@@ -120,9 +120,9 @@ <h5 id="fullscreen-position"><a href="#fullscreen-position">Fullscreen position<
 </p>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">new</span> FullscreenPosition();
 </code></pre>
-<h3 id="communication"><a href="#communication"><span class="toppy-icon icon-rss"></span> Communication</a></h3>
-<h5 id="component-data"><a href="#component-data">Component Data</a></h5>
-<p>When you host a component, you can control the overlay through <code>ToppyOverlay</code> service. Using this service you can access all properties that is provided in content. Also the properties comes with <code>close</code>.</p>
+<h3 id="content-properties"><a href="#content-properties"><span class="toppy-icon icon-rss"></span> Content Properties</a></h3>
+<p>When you are adding content, optionally you can add additional custom data to them. Which can be accessed later inside the content. This applies only if the content type is <strong>Component</strong> or <strong>TemplateRef</strong>. The data will be auto attached with the content and comes with <code>close</code> property, to dismiss the overlay programatically.</p>
+<h5 id="component-props"><a href="#component-props">Component Props</a></h5>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
   .position(position)
   .content(HelloComponent, &#123; propName: <span class="hljs-string">'toppy-test-prop'</span> &#125;)
@@ -133,30 +133,29 @@ <h5 id="component-data"><a href="#component-data">Component Data</a></h5>
   template: <span class="hljs-string">'&#x3C;div>Some text&#x3C;/div>'</span>
 &#125;)
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> HelloComponent &#123;
-  <span class="hljs-keyword">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> overlay: ToppyOverlay</span>) &#123;
-    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.overlay.props.propName); <span class="hljs-comment">// will return 'toppy-test-prop'</span>
+  propName; <span class="hljs-comment">// declare. Else TSlint throws error</span>
+  close; <span class="hljs-comment">// just declare</span>
+  <span class="hljs-keyword">constructor</span>(<span class="hljs-params"></span>) &#123;
+    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.propName); <span class="hljs-comment">// will return 'toppy-test-prop'</span>
   &#125;
 
-  close() &#123;
-    <span class="hljs-keyword">this</span>.overlay.close();
+  dismiss() &#123;
+    <span class="hljs-keyword">this</span>.close(); <span class="hljs-comment">// auto binded</span>
   &#125;
 &#125;
 </code></pre>
-<h5 id="template-data"><a href="#template-data">Template Data</a></h5>
-<p>This is very similar to above one. When you use template as a content, you can pass additional data to it.</p>
+<h5 id="template-props"><a href="#template-props">Template props</a></h5>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
   .position(position)
   .content(template, &#123; name: <span class="hljs-string">'Johny'</span> &#125;)
   .create();
 </code></pre>
-<p>Then in your template you can refer the data like this,</p>
 <pre><code class="hljs language-html" id="tpl"><span class="hljs-tag">&#x3C;<span class="hljs-name">ng-template</span> #<span class="hljs-attr">tpl</span> <span class="hljs-attr">let-toppy</span>></span>
   <span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>Hello <span class="hljs-tag">&#x3C;<span class="hljs-name">span</span> [<span class="hljs-attr">innerText</span>]=<span class="hljs-string">"toppy.name"</span>></span><span class="hljs-tag">&#x3C;/<span class="hljs-name">span</span>></span> !<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
   <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"toppy.close()"</span>></span>Close<span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
 <span class="hljs-tag">&#x3C;/<span class="hljs-name">ng-template</span>></span>
 </code></pre>
-<p>Method <code>close</code> is automatically binded.</p>
-<h5 id="plain-text"><a href="#plain-text">Plain text</a></h5>
+<h5 id="plain-text-props"><a href="#plain-text-props">Plain text props</a></h5>
 <p>When you use Plain text as a content, optionally you can able to set a class name to that <code>div</code> block.</p>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
   .position(position)

docs/markdown/main.md

@@ -157,11 +157,11 @@ new SlidePosition({
 new FullscreenPosition();
 ```
 
-### [ ]{.toppy-icon .icon-rss} Communication
+### [ ]{.toppy-icon .icon-rss} Content Properties
 
-##### Component Data
+When you are adding content, optionally you can add additional custom data to them. Which can be accessed later inside the content. This applies only if the content type is **Component** or **TemplateRef**. The data will be auto attached with the content and comes with `close` property, to dismiss the overlay programatically.
 
-When you host a component, you can control the overlay through `ToppyOverlay` service. Using this service you can access all properties that is provided in content. Also the properties comes with `close`.
+##### Component Props
 
 ```typescript
 this.overlay = this._toppy
@@ -176,19 +176,19 @@ this.overlay = this._toppy
   template: '<div>Some text</div>'
 })
 export class HelloComponent {
-  constructor(public overlay: ToppyOverlay) {
-    console.log(this.overlay.props.propName); // will return 'toppy-test-prop'
+  propName; // declare. Else TSlint throws error
+  close; // just declare
+  constructor() {
+    console.log(this.propName); // will return 'toppy-test-prop'
   }
 
-  close() {
-    this.overlay.close();
+  dismiss() {
+    this.close(); // auto binded
   }
 }
 ```
 
-##### Template Data
-
-This is very similar to above one. When you use template as a content, you can pass additional data to it.
+##### Template props
 
 ```typescript
 this.overlay = this._toppy
@@ -197,18 +197,14 @@ this.overlay = this._toppy
   .create();
 ```
 
-Then in your template you can refer the data like this,
-
 ```html
 <ng-template #tpl let-toppy>
   <div>Hello <span [innerText]="toppy.name"></span> !</div>
   <button (click)="toppy.close()">Close</button>
 </ng-template>
 ```
 
-Method `close` is automatically binded.
-
-##### Plain text
+##### Plain text props
 
 When you use Plain text as a content, optionally you can able to set a class name to that `div` block.
 

projects/toppy/src/lib/template.html

@@ -8,8 +8,6 @@
     <ng-container *ngSwitchCase="'t'">
       <ng-container *ngTemplateOutlet="content.data; context: { $implicit: content.props }"></ng-container>
     </ng-container>
-    <ng-container *ngSwitchCase="'c'">
-      <ng-container *ngComponentOutlet="content.data; injector: overlayInj || createInj"></ng-container>
-    </ng-container>
+    <ng-container *ngSwitchCase="'c'"> <ng-container *ngComponentOutlet="content.data"></ng-container> </ng-container>
   </ng-container>
 </div>

projects/toppy/src/lib/toppy-overlay.ts

@@ -12,8 +12,7 @@ import { Observable, Subject } from 'rxjs';
 import { startWith, takeUntil, tap } from 'rxjs/operators';
 import { Content, ContentType, TID, ToppyConfig } from './models';
 import { ToppyPosition } from './position/position';
-import { ToppyOverlay } from './toppy-overlay';
-import { Bus, cssClass, newInjector, toCss } from './utils';
+import { Bus, cssClass, toCss } from './utils';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -34,7 +33,6 @@ export class ToppyComponent implements OnInit, AfterViewInit, OnDestroy {
   el: HTMLElement | any;
   wrapperEl: HTMLElement | any;
   extra: string;
-  overlayInj: Injector = null;
   private die: Subject<1> = new Subject();
 
   constructor(private inj: Injector, private cd: ChangeDetectorRef, private elRef: ElementRef) {}
@@ -49,24 +47,15 @@ export class ToppyComponent implements OnInit, AfterViewInit, OnDestroy {
     this.el.setAttribute('data-tid', this.tid);
     cssClass('add', cls, `[data-tid='${[this.tid]}']`);
     cssClass('add', [this.config.bodyClass]);
+    if (this.content.type === ContentType.COMPONENT) {
+      Object.assign(this.content.data['prototype'], this.content.props);
+    }
   }
 
   ngAfterViewInit() {
     this.listenPos().subscribe();
   }
 
-  get createInj(): Injector {
-    this.overlayInj = newInjector(
-      {
-        provide: ToppyOverlay,
-        useFactory: () => new ToppyOverlay(this.content.props),
-        deps: []
-      },
-      this.inj
-    );
-    return this.overlayInj;
-  }
-
   updateTextContent(data: string): void {
     if (this.content.type === ContentType.STRING) {
       this.content.data = data;

projects/toppy/src/lib/toppy.component.ts

@@ -4,7 +4,7 @@ import { ContentData, ContentProps, ContentType, Inputs, InsidePlacement, TID, T
 import { GlobalPosition } from './position';
 import { ToppyPosition } from './position/position';
 import { ToppyControl } from './toppy-control';
-import { Bus, createId, getContent, newInjector } from './utils';
+import { Bus, createId, getContent } from './utils';
 
 @Injectable({
   providedIn: 'root'
@@ -41,13 +41,16 @@ export class Toppy {
   create(key: string = null): ToppyControl {
     this.tid = this.inputs.tid = key || createId();
 
-    const injector = newInjector(
-      {
-        provide: ToppyControl,
-        deps: [ApplicationRef, ComponentFactoryResolver, Injector]
-      },
+    const injector = Injector.create(
+      [
+        {
+          provide: ToppyControl,
+          deps: [ApplicationRef, ComponentFactoryResolver, Injector]
+        }
+      ],
       this.injector
     );
+
     const tc = injector.get(ToppyControl);
     if (Toppy.controls[this.tid]) {
       this.tid = createId();