feat(components): new component loader provided

.gitignore

@@ -33,3 +33,6 @@ testem.log
 #System Files
 .DS_Store
 Thumbs.db
+
+src/**/*.js
+src/**/*.map

LICENSE

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Valor Software
-Copyright (c) 2015 Dmitriy Shekhovtsov<[email protected]>
+Copyright (c) 2015-2017 Valor Software
+Copyright (c) 2015-2017 Dmitriy Shekhovtsov<[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

demo/src/app/app.component.ts

@@ -11,7 +11,7 @@ if (w && w.__theme === 'bs4') {
 
 @Component({
   selector: 'bs-demo',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent implements AfterContentInit {
   public isBs3:boolean = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3;

demo/src/app/components/accordion/demos/accordion-demo.component.html

@@ -32,7 +32,7 @@
     <div accordion-heading>
       I can have markup, too!
       <i class="pull-right glyphicon"
-         [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
+         [ngClass]="{'glyphicon-chevron-down': group?._isOpen, 'glyphicon-chevron-right': !group?._isOpen}"></i>
     </div>
     This is just some content to illustrate fancy headings.
   </accordion-group>

demo/src/app/components/modal/docs/title.md

@@ -1,20 +1 @@
 Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
-
-Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#modals) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/modal/)
-
-### **Important notes**:
-- Don't forget to add `hack` to your application root component ([why?](https://github.com/angular/angular/issues/6446#issuecomment-173459525))
-
-```typescript
-import { Component, ViewContainerRef } from '@angular/core';
-
-@Component({selector:'app-root'})
-class AppRoot {
-  protected viewContainerRef: ViewContainerRef;
-
-  public constructor(viewContainerRef:ViewContainerRef) {
-    // You need this small hack in order to catch application root view container ref
-    this.viewContainerRef = viewContainerRef;
-  }
-}
-```

demo/src/app/components/tooltip/demos/tooltip-demo.component.html

@@ -10,72 +10,97 @@
   Pellentesque <a href="#" [tooltip]="dynamicTooltip">{{dynamicTooltipText}}</a>,
   sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
   aliquam. Tincidunt lobortis feugiat vivamus at
-  <a href="#" tooltipPlacement="left" tooltip="On the Left!">left</a> eget
+  <a href="#" placement="left" tooltip="On the Left!">left</a> eget
   arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
-  <a href="#" tooltipPlacement="right" tooltip="On the Right!">right</a>
+  <a href="#" placement="right" tooltip="On the Right!">right</a>
   nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
-  <a href="#" tooltipPlacement="bottom" tooltip="On the Bottom!">bottom</a>
+  <a href="#" placement="bottom" tooltip="On the Bottom!">bottom</a>
   pharetra convallis posuere morbi leo urna,
   <a href="#" [tooltipAnimation]="false" tooltip="I don't fade. :-(">fading</a>
   at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
-  <a href="#" tooltipPopupDelay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
+  <a href="#" tooltipPopupDelay='1000' tooltip='appears with delay'>delayed</a>
+  turpis massa tincidunt dui ut.
   nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
 </p>
 
 <p>
-  I can even contain HTML. <a href="#" [tooltipPopupDelay]="500" [tooltipHtml]="htmlTooltip" (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
+  I can even contain HTML.
+  <a href="#" [tooltip]="tipContent">Check me out!</a>
+  <template #tipContent>Say, <b>{{dynamicTooltipText}}</b>!</template>
 </p>
 
-<template #toolTipTemplate let-model="model">
+<template #toolTipTemplate>
   <h4>Tool tip custom content defined inside a template</h4>
-  <h5>With context binding: {{model.text}}</h5>
+  <h5>With context binding: {{dynamicTooltip}}</h5>
 </template>
 
 <p>
-  Or use a TemplateRef. <a href="#" [tooltipHtml]="toolTipTemplate"
-                                    [tooltipContext]="tooltipModel"
-                                    (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
+  Or use a TemplateRef.
+  <a href="#" [tooltip]="toolTipTemplate">Check me out!</a>
 </p>
 <p>
   Programatically show/hide tooltip
-   <a href="#" [tooltip]="'Foo'"
-               (tooltipStateChanged)="tooltipStateChanged($event)"
-               #tooltip="bs-tooltip">Check me out!</a>
-   <button class="btn btn-primary" (click)="tooltip.show()">Show tooltip</button>
-   <button class="btn btn-danger" (click)="tooltip.hide()">Hide tooltip</button>
- </p>
-
-<p>
-  I can have a custom class. <a href="#" [tooltip]="'I can have a custom class applied to me!'" [tooltipClass]="'customClass'" [tooltipFadeDuration]="1000">Check me out!</a>
+  <a href="#" tooltip="Foo"
+     (onShown)="tooltipStateChanged($event)"
+     (onHidden)="tooltipStateChanged($event)"
+     #tooltip="bs-tooltip">Check me out!</a>
+  <button class="btn btn-primary" (click)="tooltip.show()">Show tooltip</button>
+  <button class="btn btn-danger" (click)="tooltip.hide()">Hide tooltip</button>
 </p>
 
+<!--<p>-->
+  <!--I can have a custom class.-->
+  <!--<a href="#"-->
+     <!--[tooltip]="'I can have a custom class applied to me!'"-->
+     <!--[tooltipClass]="'customClass'"-->
+     <!--[tooltipFadeDuration]="1000">Check me out!</a>-->
+<!--</p>-->
+
 <p>
-  I can triggered by the custom events. For example, by the click. <a href="#" tooltip="I displayed after click event" tooltipTrigger="click">Check me out</a>
+  I can triggered by the custom events. For example, by the click.
+  <a href="#"
+     onclick="return false"
+     tooltip="I displayed after click event"
+     triggers="click">Check
+    me out</a>
 </p>
 
 <p>
-  I can combine trigger events. Now I can be displayed by the "click" and "focus" events.
-  <a href="#" tooltip="I displayed after click or focus event" [tooltipTrigger]="['focusin', 'click']">Click or tab me.</a>
+  I can combine trigger events. Now I can be displayed by the "click" and
+  "focus" events.
+  <a href="#" tooltip="I displayed after click or focus event"
+     onclick="return false"
+     triggers="focus click">Click or tab me.</a>
 </p>
 
-
-<p style="overflow:hidden; position:relative; background-color: #f6f6f6" class="alert">
-  And if I am in <a href="#" tooltip="That ruins the tooltip">overflow: hidden</a> container, then just <a href="#" tooltip="So the tooltip is visible always correctly" [tooltipAppendToBody]="true">tooltipAppendToBody</a> me instead!
+<p style="overflow:hidden; position:relative; background-color: #f6f6f6"
+   class="alert">
+  And if I am in <a href="#" tooltip="That ruins the tooltip">overflow:
+  hidden</a> container, then just
+  <a href="#"
+     tooltip="So the tooltip is visible always correctly"
+     container="body">tooltipAppendToBody</a>
+  me instead!
 </p>
 
 <form role="form">
   <div class="form-group">
     <label>Or use custom triggers, like focus: </label>
-    <input type="text" name="clickMe" value="Click me!" tooltip="See? Now click away..."  tooltipTrigger="focus" tooltipPlacement="right" class="form-control" />
+    <input type="text" name="clickMe" value="Click me!"
+           tooltip="See? Now click away..."
+           triggers="focus"
+           placement="bottom" class="form-control"/>
   </div>
 
   <div class="form-group" ngClass="{'has-error' : !inputModel}">
     <label>Disable tooltips conditionally:</label>
-    <input type="text" name="inputModel" [(ngModel)]="inputModel" class="form-control"
+    <input type="text" name="inputModel"
+           [(ngModel)]="inputModel"
+           class="form-control"
            placeholder="Hover over this for a tooltip until this is filled"
            tooltip="Enter something in this input field to disable this tooltip"
-           tooltipPlacement="top"
-           tooltipTrigger="mouseenter"
-           [tooltipEnable]="!inputModel || inputModel.length==0" />
+           placement="top"
+           triggers="hover"
+           [isDisabled]="inputModel"/>
   </div>
 </form>

demo/src/app/components/tooltip/index.ts

@@ -15,7 +15,7 @@ import { TooltipModule } from 'ng2-bootstrap';
     CommonModule,
     FormsModule,
     SharedModule,
-    TooltipModule
+    TooltipModule.forRoot()
   ],
   exports: [TooltipSectionComponent]
 })

demo/src/typings.d.ts

@@ -1,10 +1,16 @@
 // Typings reference file, you can add your own global typings here
 // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
-
+// tslint:disable
 declare const System: any;
 declare const ENV:string;
 // google code-prettify
 declare const PR:any;
 
 declare const require:any;
 declare const global:any;
+
+declare module jasmine {
+  interface Matchers {
+    toHaveCssClass(expected: any): boolean;
+  }
+}

package.json

@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/valor-software/ng2-bootstrap#readme",
   "dependencies": {
-    "moment": "2.17.0"
+    "moment": "2.17.1"
   },
   "devDependencies": {
     "@angular/common": "^2.0.0",
@@ -61,7 +61,7 @@
     "@types/jasmine": "2.5.38",
     "@types/node": "6.0.48",
     "@types/webpack": "2.0.0",
-    "angular-cli": "1.0.0-beta.20-4",
+    "angular-cli": "1.0.0-beta.22-1",
     "bootstrap": "3.3.7",
     "chokidar-cli": "1.2.0",
     "classlist-polyfill": "1.0.3",
@@ -72,7 +72,7 @@
     "core-js": "2.4.1",
     "cpy": "5.0.0",
     "cpy-cli": "1.0.1",
-    "del-cli": "0.2.0",
+    "del-cli": "0.2.1",
     "gitignore-to-glob": "0.3.0",
     "google-code-prettify": "1.0.5",
     "html-loader": "0.4.4",
@@ -83,7 +83,7 @@
     "karma": "1.3.0",
     "karma-chrome-launcher": "2.0.0",
     "karma-cli": "1.0.1",
-    "karma-jasmine": "1.0.2",
+    "karma-jasmine": "1.1.0",
     "karma-remap-istanbul": "0.2.1",
     "karma-sauce-launcher": "1.1.0",
     "lite-server": "2.2.2",
@@ -92,14 +92,14 @@
     "marked": "0.3.6",
     "ngm-cli": "0.3.4",
     "npm-run-all": "3.1.2",
-    "pre-commit": "1.1.3",
-    "protractor": "4.0.11",
+    "pre-commit": "1.2.1",
+    "protractor": "4.0.13",
     "reflect-metadata": "0.1.8",
     "require-dir": "0.3.1",
     "rxjs": "5.0.0-beta.12",
     "systemjs-builder": "0.15.34",
     "ts-helpers": "1.1.2",
-    "ts-node": "1.7.0",
+    "ts-node": "1.7.2",
     "tslint": "^4.0.0",
     "tslint-config-valorsoft": "1.2.0",
     "typedoc": "0.5.1",

scripts/matchers.ts

@@ -0,0 +1,21 @@
+// tslint:disable
+/**
+ * @copyright Angular ng-bootstrap team
+ */
+beforeEach(() => {
+  jasmine.addMatchers({
+    toHaveCssClass(/*util, customEqualityTests*/) {
+      return {compare: buildError(false), negativeCompare: buildError(true)};
+
+      function buildError(isNot) {
+        return function (actual, className) {
+          const orNot = isNot ? 'not ' : '';
+          return {
+            pass: actual.classList.contains(className) === !isNot,
+            message: `Expected ${actual.outerHTML} ${orNot} to contain the CSS class "${className}"`
+          };
+        };
+      }
+    }
+  });
+});

scripts/test.ts

@@ -7,30 +7,40 @@ import 'zone.js/dist/jasmine-patch';
 import 'zone.js/dist/async-test';
 import 'zone.js/dist/fake-async-test';
 
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+import './matchers';
+
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
 declare var require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = Function.prototype;
 
-Promise.all([
-  System.import('@angular/core/testing'),
-  System.import('@angular/platform-browser-dynamic/testing')
-])
 // First, initialize the Angular testing environment.
-  .then(([testing, testingBrowser]:any[]) => {
-    testing.getTestBed().initTestEnvironment(
-      testingBrowser.BrowserDynamicTestingModule,
-      testingBrowser.platformBrowserDynamicTesting()
-    );
-  })
-  // Then we find all the tests.
-  .then(() => [
-    require.context('../src/spec', true, /\.spec\.ts/),
-    require.context('../demo/src', true, /\.spec\.ts/)
-  ])
-  // And load the modules.
-  .then((contexts: any) => [].concat.apply([], contexts.map((context: any) => context.keys().map(context))))
-  // Finally, start Karma to run the tests.
-  .then(__karma__.start, __karma__.error);
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+let context = require.context('../demo/src', true, /\.spec\.ts/);
+// And load the modules.
+context.keys().map(context);
+
+console.log(context.keys())
+let context2 = require.context('../src/spec', true, /\.spec\.ts/);
+context2.keys().map(context2);
+console.log(context2.keys())
+// Finally, start Karma to run the tests.
+__karma__.start();

scripts/typings.d.ts

@@ -1,9 +1,17 @@
 // Typings reference file, you can add your own global typings here
 // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
 
+// tslint:disable
+
 declare const System: any;
 declare const ENV:string;
 // google code-prettify
 declare const PR:any;
 
 declare const global:any;
+
+declare module jasmine {
+  interface Matchers {
+    toHaveCssClass(expected: any): boolean;
+  }
+}