fix tests

README.md

@@ -3,24 +3,37 @@
 [![npm](https://img.shields.io/npm/v/ngx-popper.svg?style=flat-square)](https://www.npmjs.com/package/ngx-popper) 
 [![npm](https://img.shields.io/npm/dm/ngx-popper.svg?style=flat-square)](https://www.npmjs.com/package/ngx-popper) 
 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/MrFrankel/ngx-popper/blob/master/LICENSE)
-  <img src="http://badge-size.now.sh/https://unpkg.com/ngx-popper@2.0.1/ngx-popper.js?compression=brotli" alt="Stable Release Size"/>
-  <img src="http://badge-size.now.sh/https://unpkg.com/ngx-popper@2.0.1/ngx-popper.js?compression=gzip" alt="Stable Release Size"/>
+  <img src="http://badge-size.now.sh/https://unpkg.com/ngx-popper@3.0.1/bundles/ngx-popper.umd.js?compression=brotli" alt="Stable Release Size"/>
+  <img src="http://badge-size.now.sh/https://unpkg.com/ngx-popper@3.0.1/bundles/ngx-popper.umd.js?compression=gzip" alt="Stable Release Size"/>
 
 ngx-popper is an angular wrapper for the [Popper.js](https://popper.js.org/) library.
 
+## Changes
+
+As of version 4.0.0 ngx-popper now use innerHTML binding for string popper i.e:
+```HTML
+<div popper="some text"></div>
+```
+
+This should make no difference but you should be aware.
+
+As of version 4.0.0 popper.model is now popper-model, due to some angular-cli issues, if you are referencing this please update your references.
+
 ### Installation
 
 node and npm are required to run this package.
 
 1. Use npm/yarn to install the package:
 
   ```terminal
+  $ npm install popper.js --save
   $ npm install ngx-popper --save 
   ```
 
   Or 
 
    ```terminal
+    $ yarn add popper.js --save
     $ yarn add ngx-popper --save 
   ```
 

example/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "outDir": "./dist-tsc",
     "module": "commonjs",
     "target": "es5",
     "sourceMap": true,
@@ -18,8 +19,8 @@
     ]
   },
   "typeRoots": [
-    "./node_modules/@types",
-    "./node_modules"
+    "../node_modules/@types",
+    "../node_modules"
   ],
   "types": [
     "node"
@@ -28,11 +29,9 @@
     "."
   ],
   "exclude": [
-    "node_modules",
-    "dist",
-    "dist-tsc",
-    "test",
-    "example-cli"
+    "../dist",
+    "../dist-tsc",
+    "../test"
   ],
   "angularCompilerOptions": {
     "preserveWhiteSpace": false

example/webpack.config.js

@@ -21,7 +21,7 @@ module.exports = {
     rules: [
       {
         test: /\.ts?$/,
-        use: ['awesome-typescript-loader', 'angular2-template-loader'],
+        use: ['awesome-typescript-loader?configFileName="./tsconfig.json"', 'angular2-template-loader'],
         exclude: ['node_modules', 'dist', 'dist-tsc', 'test', 'public_api']
       },
       {
@@ -33,15 +33,9 @@ module.exports = {
   },
   plugins: [
     new CheckerPlugin(),
-    new AngularCompilerPlugin({
-      tsConfigPath: './example/tsconfig.json',
-      entryModule: 'example/app/app.module#AppModule',
-      sourceMap: true
-    }),
-
     new HtmlWebpackPlugin({
       inject: true,
-      template: 'example/index.html'
+      template: './example/index.html'
     }),
     new ProgressBarPlugin({
       format: '  build [' + chalk.blue.bold(':bar') + ']' + chalk.green.bold(':percent') + ' (:elapsed seconds) => :msg...  ',

package.json

@@ -1,13 +1,13 @@
 {
   "name": "ngx-popper",
-  "version": "3.0.1",
+  "version": "4.0.1",
   "description": "ngx-popper is an angular wrapper for popper.js",
   "directories": {
     "test": "test"
   },
   "scripts": {
     "test-server": "http-server test_dist -p 8888",
-    "create_test_server": "rm -rf test_dist && webpack --config ./test/webpack.test.config.js && npm run test-server",
+    "create_test_server": "rm -rf test_dist && webpack --config ./test/webpack.config.js && npm run test-server",
     "test": "jest",
     "start_test": "start-server-and-test create_test_server http://localhost:8888 test",
     "build": "ng-packagr -p ng-package.json",
@@ -58,7 +58,7 @@
     "install": "^0.11.0",
     "jest": "^23.0.0",
     "jest-puppeteer": "^3.0.1",
-    "ng-packagr": "^3.0.1",
+    "ng-packagr": "^3.0.3",
     "ng2draggable": "^1.3.2",
     "open-browser-webpack-plugin": "^0.0.5",
     "progress-bar-webpack-plugin": "^1.10.0",

src/index.ts

@@ -1,4 +1,4 @@
+export * from './popper-model';
 export * from './popper-directive';
-export * from './popper.model';
 export * from './popper-content';
 export * from './popper.module';

src/popper-content.ts

@@ -8,7 +8,7 @@ import {
   HostListener, Renderer2,
 } from "@angular/core";
 import Popper from 'popper.js';
-import {Placements, Triggers, PopperContentOptions} from './popper.model';
+import {Placements, Triggers, PopperContentOptions} from './popper-model';
 
 @Component({
   selector: "popper-content",
@@ -24,9 +24,11 @@ import {Placements, Triggers, PopperContentOptions} from './popper.model';
          attr.aria-hidden="{{ariaHidden}}"
          [attr.aria-describedby]="popperOptions.ariaDescribe || null"
          attr.role="{{popperOptions.ariaRole}}">
-      <div class="ngxp__inner">
+      <div class="ngxp__inner" *ngIf="text" [innerHTML]="text">
+        <ng-content></ng-content>
+      </div>
+      <div class="ngxp__inner" *ngIf="!text">
         <ng-content></ng-content>
-        {{ text }}
       </div>
       <div class="ngxp__arrow" [style.border-color]="arrowColor" [class.__force-arrow]="arrowColor" [ngClass]="extractAppliedClassListExpr(popperOptions.applyArrowClass)"></div>
 

src/popper-directive.ts

@@ -9,8 +9,8 @@ import {
   Output,
   EventEmitter, OnInit, Renderer2, ChangeDetectorRef, Inject, ElementRef
 } from '@angular/core';
+import {Placement, Placements, PopperContentOptions, Trigger, Triggers} from './popper-model';
 import {PopperContent} from './popper-content';
-import {Placement, Placements, PopperContentOptions, Trigger, Triggers} from './popper.model';
 
 @Directive({
   selector: '[popper]',
@@ -338,7 +338,7 @@ export class PopperController implements OnInit, OnChanges {
     this.globalEventListeners.forEach(evt => {
       evt && typeof evt === 'function' && evt();
     });
-    this.eventListeners.length = 0;
+    this.globalEventListeners.length = 0;
   }
 
   private overrideShowTimeout() {

src/popper.module.ts

@@ -1,8 +1,8 @@
 import {CommonModule} from "@angular/common";
 import {ModuleWithProviders, NgModule} from "@angular/core";
+import {PopperContentOptions} from './popper-model';
 import {PopperController} from './popper-directive';
 import {PopperContent} from './popper-content';
-import {PopperContentOptions} from './popper.model';
 
 @NgModule({
   imports: [

test/app/app.component.html

@@ -25,5 +25,5 @@
   <popper-content #popper1>testing</popper-content>
 </div>
 <div>
-  <div class="popperTarget" popper="testing" [popperTrigger]="'click'" [popperDelay]="5000" popperPlacement]="'right'">click</div>
+  <div class="popperTarget" popper="testing" [popperTrigger]="'click'" [popperDelay]="5000" [popperPlacement]="'right'">click</div>
 </div>

test/tsconfig.json

@@ -18,8 +18,8 @@
     ]
   },
   "typeRoots": [
-    "./node_modules/@types",
-    "./node_modules"
+    "../node_modules/@types",
+    "../node_modules"
   ],
   "types": [
     "node"
@@ -28,11 +28,11 @@
     "."
   ],
   "exclude": [
-    "node_modules",
-    "dist",
-    "dist-tsc",
-    "example",
-    "example-cli"
+    "../node_modules",
+    "../dist",
+    "../dist-tsc",
+    "../example",
+    "../example-cli"
   ],
   "angularCompilerOptions": {
     "preserveWhiteSpace": false

test/webpack.test.config.js → test/webpack.config.js

@@ -21,7 +21,7 @@ module.exports = {
     rules: [
       {
         test: /\.ts?$/,
-        use: ['awesome-typescript-loader', 'angular2-template-loader'],
+        use: ['awesome-typescript-loader?configFileName="./tsconfig.json"', 'angular2-template-loader'],
         exclude: ['node_modules', /__tests__/, 'example', 'dist', 'dist_tsc']
       },
       {
@@ -33,28 +33,22 @@ module.exports = {
   },
   plugins: [
     new CheckerPlugin(),
-    new AngularCompilerPlugin({
-      tsConfigPath: './test/tsconfig.json',
-      entryModule: 'test/app/app.module#AppModule',
-      sourceMap: true
-    }),
-
     new HtmlWebpackPlugin({
       inject: true,
-      template: 'test/index.html'
+      template: './test/index.html'
     }),
     new ProgressBarPlugin({
       format: '  build [' + chalk.blue.bold(':bar') + ']' + chalk.green.bold(':percent') + ' (:elapsed seconds) => :msg...  ',
       clear: false
     }),
     new OpenBrowserPlugin({
       url: `http://localhost:8888`
-    }),
-    new webpack.HotModuleReplacementPlugin()
+    })
+
   ],
   devServer: {
     // https: true,
-    hot: true,
+    //hot: true,
     stats: 'errors-only',
     port: 8888,
     inline: true,

tsconfig.json

@@ -26,7 +26,7 @@
     "node"
   ],
   "include": [
-    "example"
+    "src"
   ],
   "exclude": [
     "node_modules",

yarn.lock

@@ -5070,9 +5070,9 @@ [email protected]:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
-ng-packagr@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-3.0.1.tgz#16f8c108d06f8dfcfb6c90c250c7b8a46889468c"
+ng-packagr@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-3.0.3.tgz#389d72ddc76fd67bb8e8965852d2025b76efa048"
   dependencies:
     "@ngtools/json-schema" "^1.1.0"
     autoprefixer "^8.0.0"
@@ -5701,10 +5701,6 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
-popper.js@^1.14.3:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
-
 portfinder@^1.0.13, portfinder@^1.0.9, portfinder@~1.0.12:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"