Skip to content

Commit

Permalink
Merge pull request #1318 from valor-software/feat-new-component-loader
Browse files Browse the repository at this point in the history
feat(components): new component loader provided
  • Loading branch information
valorkin authored Dec 13, 2016
2 parents bd5a43a + 7cc31d4 commit 93ea88d
Show file tree
Hide file tree
Showing 50 changed files with 2,208 additions and 589 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,6 @@ testem.log
#System Files
.DS_Store
Thumbs.db

src/**/*.js
src/**/*.map
4 changes: 2 additions & 2 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
The MIT License (MIT)

Copyright (c) 2015 Valor Software
Copyright (c) 2015 Dmitriy Shekhovtsov<valorkin@gmail.com>
Copyright (c) 2015-2017 Valor Software
Copyright (c) 2015-2017 Dmitriy Shekhovtsov<valorkin@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
2 changes: 1 addition & 1 deletion demo/src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 0 additions & 19 deletions demo/src/app/components/modal/docs/title.md
Original file line number Diff line number Diff line change
@@ -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;
}
}
```
85 changes: 55 additions & 30 deletions demo/src/app/components/tooltip/demos/tooltip-demo.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion demo/src/app/components/tooltip/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { TooltipModule } from 'ng2-bootstrap';
CommonModule,
FormsModule,
SharedModule,
TooltipModule
TooltipModule.forRoot()
],
exports: [TooltipSectionComponent]
})
Expand Down
8 changes: 7 additions & 1 deletion demo/src/typings.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
21 changes: 21 additions & 0 deletions scripts/matchers.ts
Original file line number Diff line number Diff line change
@@ -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}"`
};
};
}
}
});
});
48 changes: 29 additions & 19 deletions scripts/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
8 changes: 8 additions & 0 deletions scripts/typings.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit 93ea88d

Please sign in to comment.