chore: merge with master

Author: lokesh-coder

.releaserc

@@ -48,7 +48,7 @@
           "docs/environments/version.ts",
           "docs/assets/archived-versions.json"
         ],
-        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+        "message": ":fire: chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
       }
     ]
   ],

README.md

@@ -1,52 +1,55 @@
-<div class="hero bg-white mb-3">
+<div class="hero bg-alt mb-3">
+  <div class="hero-bg"></div>
   <div class="container">
     <div class="row">
-      <div class="col-md-8 mx-auto">
-        <div class="brand d-flex flex-column justify-center align-items-center mt-5">
-          <img src="./assets/toppy-logo.png" alt="Toppy" width="100" />
-          <p class="text-center mt-3">
-            Toppy is a tiny library to create overlays for Angular applications. Overlays are used in
-            <span>tooltip</span>, <span>modal</span>, <span>sidemenu</span>, <span>dropdowns</span>, <span>popup</span>,
-            <span>context menu</span>, <span>toaster</span>, <span>alerts</span>, <span>datepicker</span>,
-            <span>popovers</span> etc
-          </p>
+      <div class="col-md-8 mx-auto my-4">
+        <div class="brand d-flex flex-column justify-center align-items-center my-5">
+          <img src="./assets/toppy-logo-white.png" alt="Toppy" width="150" />
+          <div class="text-center mt-3 desc">
+            <div class="mb-2">Tiny Overlay library for Angular apps. Easy and simple API</div>
+            <div class="tags px-5">
+              <span>tooltip</span>, <span>modal</span>, <span>sidemenu</span>, <span>dropdowns</span>,
+              <span>popup</span>, <span>menu</span>, <span>toaster</span>, <span>alerts</span>, <span>datepicker</span>,
+              <span>popovers</span>
+            </div>
+          </div>
         </div>
-        <div class="badges d-flex align-items-center mb-3 justify-content-center">
+        <div class="badges d-flex align-items-center my-0 justify-content-center">
           <!-- <div class="badge"><img src="https://badgen.net/badge/Angular/7.x/1b95e0" alt="" /></div> -->
           <div class="badge">
             <a href="https://www.npmjs.com/package/toppy" target="_blank">
               <img
-                src="https://img.shields.io/npm/v/toppy.svg?style=popout-square&colorA=585c6d&colorB=585c6d&label=&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0wIDcuMzM0djhoNi42NjZ2MS4zMzJIMTJ2LTEuMzMyaDEydi04SDB6bTYuNjY2IDYuNjY0SDUuMzM0di00SDMuOTk5djRIMS4zMzVWOC42NjdoNS4zMzF2NS4zMzF6bTQgMHYxLjMzNkg4LjAwMVY4LjY2N2g1LjMzNHY1LjMzMmgtMi42Njl2LS4wMDF6bTEyLjAwMSAwaC0xLjMzdi00aC0xLjMzNnY0aC0xLjMzNXYtNGgtMS4zM3Y0aC0yLjY3MVY4LjY2N2g4LjAwMnY1LjMzMXoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEwLjY2NSAxMEgxMnYyLjY2N2gtMS4zMzVWMTB6IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg=="
+                src="https://img.shields.io/npm/v/toppy.svg?style=popout-square&colorA=00738c&colorB=00738c&label=&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0wIDcuMzM0djhoNi42NjZ2MS4zMzJIMTJ2LTEuMzMyaDEydi04SDB6bTYuNjY2IDYuNjY0SDUuMzM0di00SDMuOTk5djRIMS4zMzVWOC42NjdoNS4zMzF2NS4zMzF6bTQgMHYxLjMzNkg4LjAwMVY4LjY2N2g1LjMzNHY1LjMzMmgtMi42Njl2LS4wMDF6bTEyLjAwMSAwaC0xLjMzdi00aC0xLjMzNnY0aC0xLjMzNXYtNGgtMS4zM3Y0aC0yLjY3MVY4LjY2N2g4LjAwMnY1LjMzMXoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEwLjY2NSAxMEgxMnYyLjY2N2gtMS4zMzVWMTB6IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg=="
                 alt=""
             /></a>
           </div>
           <div class="badge">
             <a href="https://www.npmtrends.com/toppy" target="_blank">
               <img
-                src="https://img.shields.io/npm/dt/toppy.svg?style=flat&colorA=585c6d&colorB=585c6d&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIj48L3BvbHlsaW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PC9zdmc+&label="
+                src="https://img.shields.io/npm/dt/toppy.svg?style=flat-square&colorA=00738c&colorB=00738c&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIj48L3BvbHlsaW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PC9zdmc+&label="
                 alt=""
               />
             </a>
           </div>
           <div class="badge">
             <a href="https://github.com/lokesh-coder/toppy" target="_blank">
               <img
-                src="https://img.shields.io/github/stars/lokesh-coder/toppy.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=github&logoColor=fff"
+                src="https://img.shields.io/github/stars/lokesh-coder/toppy.svg?style=flat-square&colorA=00738c&colorB=00738c&label=&logo=github&logoColor=fff"
                 alt=""
               />
             </a>
           </div>
           <div class="badge">
             <a href="https://codecov.io/gh/lokesh-coder/toppy" target="_blank">
               <img
-                src="https://img.shields.io/codecov/c/github/lokesh-coder/toppy/master.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=codecov&logoColor=fff"
+                src="https://img.shields.io/codecov/c/github/lokesh-coder/toppy/master.svg?style=flat-square&colorA=00738c&colorB=00738c&label=&logo=codecov&logoColor=fff"
                 alt=""
               />
             </a>
           </div>
           <div class="badge">
             <img
-              src="https://img.shields.io/badge/share-tweet-aaa.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=twitter&logoColor=fff"
+              src="https://img.shields.io/badge/share-tweet-aaa.svg?style=flat-square&colorA=00738c&colorB=00738c&label=&logo=twitter&logoColor=fff"
               (click)="tweet($event)"
               alt=""
             />

docs/app/app.component.html

@@ -84,7 +84,7 @@ export class AppComponent {
       return ['resizable,scrollbars,status', 'height=' + height, 'width=' + width, 'left=' + left, 'top=' + top].join();
     };
     // const text = encodeURIComponent('Hey everyone, come & see how good I look!');
-    const shareUrl = `https://twitter.com/intent/tweet?hashtags=angular&original_referer=http%3A%2F%2Flocalhost%3A4200%2F&ref_src=twsrc%5Etfw&text=Cute%20overlay%20library%20for%20Angular%20-%20tooltips%2C%20modals%2C%20toastr%2C%20menu%2C%20dropdowns%2C%20alerts%2C%20popovers%2C%20sidebar%20and%20more...%20&tw_p=tweetbutton&url=https%3A%2F%2Flokesh-coder.github.io%2Ftoppy%2F&via=lokesh-coder`;
+    const shareUrl = `https://twitter.com/intent/tweet?hashtags=angular&original_referer=http%3A%2F%2Flocalhost%3A4200%2F&ref_src=twsrc%5Etfw&text=Cute%20overlay%20library%20for%20Angular%20-%20tooltips%2C%20modals%2C%20toastr%2C%20menu%2C%20dropdowns%2C%20alerts%2C%20popovers%2C%20sidebar%20and%20more...%20&tw_p=tweetbutton&url=https%3A%2F%2Flokesh-coder.github.io%2Ftoppy%2F&via=lokesh_coder`;
 
     e.preventDefault();
     const win = window.open(shareUrl, 'ShareOnTwitter', getWindowOptions());

docs/app/app.component.ts

@@ -7,7 +7,7 @@
 -->
 <div class="drag-element-holder">
   <img
-    src="./assets/img/fly.png"
+    src="./assets/icons/icons8-scooter-50.png"
     draggable="true"
     #el
     class="drag-element"

docs/app/examples/drag-example/drag-example.component.html

@@ -1,15 +1,15 @@
 <div class="dropdown-field" #el (click)="open()" [ngClass]="{ open: isOpen }">
-  <img src="./assets/img/{{ selectedData.icon }}.png" alt="" /> {{ selectedData.name }}
+  <img src="./assets/icons/{{ selectedData.icon }}.png" alt="" /> {{ selectedData.name }}
 </div>
 
 <div class="text-selection" #el2 (click)="open2()">
-  Do you like it? <span>{{ selectedEatable.name }}</span>
+  I like <span>{{ selectedEatable.name }}</span>
 </div>
 
 <ng-template #tpl let-toppy>
   <ul class="dropdown-ist">
     <li (click)="select(item)" *ngFor="let item of items" [ngClass]="{ selected: item.name == selectedData.name }">
-      <img src="./assets/img/{{ item.icon }}.png" alt="" /> {{ item.name }}
+      <img src="./assets/icons/{{ item.icon }}.png" alt="" /> {{ item.name }}
     </li>
   </ul>
 </ng-template>
@@ -21,7 +21,7 @@
       *ngFor="let item of eatables"
       [ngClass]="{ selected: item.name == selectedEatable.name }"
     >
-      <img src="./assets/img/{{ item.icon }}.png" alt="" />
+      <img src="./assets/icons/{{ item.icon }}.png" alt="" />
     </li>
   </ul>
 </ng-template>

docs/app/examples/dropdown-example/dropdown-example.component.html

@@ -14,13 +14,20 @@ export class DropdownExampleComponent implements OnInit {
   private _toppyControl2: ToppyControl;
   @ViewChild('tpl', { read: TemplateRef }) tpl: TemplateRef<any>;
   @ViewChild('tpl2', { read: TemplateRef }) tpl2: TemplateRef<any>;
-  items = [{ name: 'Cow', icon: 'cow' }, { name: 'Goat', icon: 'goat' }, { name: 'Snake', icon: 'snake' }];
+  items = [
+    { name: 'Beer', icon: 'icons8-beer-50' },
+    { name: 'Coffee', icon: 'icons8-cafe-50' },
+    { name: 'Cocktail', icon: 'icons8-cocktail-50' },
+    { name: 'Cola', icon: 'icons8-cola-50' },
+    { name: 'Tequila', icon: 'icons8-tequila-shot-50' },
+    { name: 'Whiskey', icon: 'icons8-whiskey-50' }
+  ];
   eatables = [
-    { name: 'Nah!', icon: 'one' },
-    { name: 'Not so much', icon: 'two' },
-    { name: 'Okay', icon: 'three' },
-    { name: 'looks good!', icon: 'four' },
-    { name: 'Yes, it is cool!!', icon: 'five' }
+    { name: 'French fries', icon: 'icons8-french-fries-50' },
+    { name: 'Fried chicken', icon: 'icons8-fried-chicken-50' },
+    { name: 'Hamburger', icon: 'icons8-hamburger-50' },
+    { name: 'Pizza', icon: 'icons8-pizza-50' },
+    { name: 'Sandwich', icon: 'icons8-sandwich-50' }
   ];
   selectedData;
   selectedEatable;

docs/app/examples/dropdown-example/dropdown-example.component.ts

@@ -1,3 +1,3 @@
 <div class="drag-element-holder">
-  <img src="./assets/img/clock.png" #el (mouseenter)="onMouseOver()" (mouseleave)="onMouseLeave()" />
+  <img src="./assets/icons/icons8-watch-50.png" #el (mouseenter)="onMouseOver()" (mouseleave)="onMouseLeave()" />
 </div>

docs/app/examples/dynamic-text-example/dynamic-text-example.component.html

@@ -4,11 +4,9 @@ import { HeroScreenComponent } from '../../host-components/hero-screen/hero-scre
 
 @Component({
   selector: 'app-fullscreen-position-example',
-  templateUrl: './fullscreen-position-example.component.html',
-  styles: []
+  templateUrl: './fullscreen-position-example.component.html'
 })
 export class FullscreenPositionExampleComponent implements OnInit {
-  selectedPlacement = null;
   private _toppyControl: ToppyControl;
   constructor(private toppy: Toppy) {}
 
@@ -20,13 +18,12 @@ export class FullscreenPositionExampleComponent implements OnInit {
       })
       .content(HeroScreenComponent)
       .create();
+    this._toppyControl.listen('t_compins').subscribe(d => {
+      console.log('HeroScreenComponent initiated', d);
+    });
   }
 
   open() {
     this._toppyControl.open();
   }
-
-  onOptionChange() {
-    console.log('option changed');
-  }
 }

docs/app/examples/fullscreen-position-example/fullscreen-position-example.component.ts

@@ -9,13 +9,12 @@ import { SimpleModalComponent } from '../../host-components/simple-modal/simple-
   styles: [
     `
       .global-content-wrapper {
-        background: #ff5722;
+        background: #e91e63;
         padding: 1rem 2rem;
-        border: 2px solid #c4532f;
+        border: 2px solid #cc1a57;
         border-radius: 3px;
         color: #fff;
-        text-transform: uppercase;
-        font-weight: 700;
+        font-weight: 500;
       }
     `
   ]