feat: add support for loading without CSS

- Add support for loading components without bringing along the CSS,
  which is necessary for SystemJS/JSPM users

Closes angular-ui#5696

Author: Wei Wang

README.md

@@ -31,12 +31,12 @@ Do you want to see directives in action? Visit http://angular-ui.github.io/boots
 
 # Angular 2
 
-Are you interested in Angular 2? We are on our way! Check out [ng-bootstrap](https://github.com/ui-bootstrap/core). 
+Are you interested in Angular 2? We are on our way! Check out [ng-bootstrap](https://github.com/ui-bootstrap/core).
 
 # Installation
 
 Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required.
-*Notes:* 
+*Notes:*
 * Since version 0.13.0, UI Bootstrap depends on [ngAnimate](https://docs.angularjs.org/api/ngAnimate) for transitions and animations, such as the accordion, carousel, etc. Include `ngAnimate` in the module dependencies for your app in order to enable animation.
 * UI Bootstrap depends on [ngTouch](https://docs.angularjs.org/api/ngTouch) for swipe actions. Include `ngTouch` in the module dependencies for your app in order to enable swiping.
 
@@ -89,9 +89,10 @@ When you are done downloading all the dependencies and project files the only re
 angular.module('myModule', ['ui.bootstrap']);
 ```
 
-# Webpack
+# Webpack / JSPM
 
-To use this project with webpack, follow the [NPM](#install-with-npm) instructions. Now, if you want to use only the accordion, you can do:
+To use this project with webpack, follow the [NPM](#install-with-npm) instructions.
+Now, if you want to use only the accordion, you can do:
 
 ```js
 import accordion from 'angular-ui-bootstrap/src/accordion';
@@ -112,6 +113,24 @@ This will load all the dependencies (if any) and also the templates (if any).
 
 Be sure to have a loader able to process `css` files like `css-loader`.
 
+If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the `index-nocss.js` file instead, which is available for the modules:
+* carousel
+* datepicker
+* datepickerPopup
+* position
+* timepicker
+* tooltip
+* typeahead
+
+The other modules, such as `accordion` in the example below, do not have CSS resources to load, so you should continue to import them as normal:
+
+```js
+import accordion from 'angular-ui-bootstrap/src/accordion';
+import typeahead from 'angular-ui-bootstrap/src/typeahead/index-nocss.js';
+
+angular.module('myModule', [accordion, datepicker]);
+```
+
 # Support
 
 ## FAQ

karma.conf.js

@@ -28,6 +28,7 @@ module.exports = function(config) {
     // list of files to exclude
     exclude: [
       'src/**/index.js',
+      'src/**/index-nocss.js',
       'src/**/docs/*'
     ],
 

src/carousel/index-nocss.js

@@ -0,0 +1,9 @@
+require('../../template/carousel/carousel.html.js');
+require('../../template/carousel/slide.html.js');
+require('./carousel');
+
+var MODULE_NAME = 'ui.bootstrap.module.carousel';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.carousel', 'uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html']);
+
+module.exports = MODULE_NAME;

src/carousel/index.js

@@ -1,11 +1,2 @@
-require('../../template/carousel/carousel.html.js');
-require('../../template/carousel/slide.html.js');
-require('./carousel');
-
 require('./carousel.css');
-
-var MODULE_NAME = 'ui.bootstrap.module.carousel';
-
-angular.module(MODULE_NAME, ['ui.bootstrap.carousel', 'uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html']);
-
-module.exports = MODULE_NAME;
+module.exports = require('./index-nocss.js');

src/datepicker/index-nocss.js

@@ -0,0 +1,13 @@
+require('../dateparser');
+require('../isClass');
+require('../../template/datepicker/datepicker.html.js');
+require('../../template/datepicker/day.html.js');
+require('../../template/datepicker/month.html.js');
+require('../../template/datepicker/year.html.js');
+require('./datepicker');
+
+var MODULE_NAME = 'ui.bootstrap.module.datepicker';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.datepicker', 'uib/template/datepicker/datepicker.html', 'uib/template/datepicker/day.html', 'uib/template/datepicker/month.html', 'uib/template/datepicker/year.html']);
+
+module.exports = MODULE_NAME;

src/datepicker/index.js

@@ -1,15 +1,2 @@
-require('../dateparser');
-require('../isClass');
-require('../../template/datepicker/datepicker.html.js');
-require('../../template/datepicker/day.html.js');
-require('../../template/datepicker/month.html.js');
-require('../../template/datepicker/year.html.js');
-require('./datepicker');
-
 require('./datepicker.css');
-
-var MODULE_NAME = 'ui.bootstrap.module.datepicker';
-
-angular.module(MODULE_NAME, ['ui.bootstrap.datepicker', 'uib/template/datepicker/datepicker.html', 'uib/template/datepicker/day.html', 'uib/template/datepicker/month.html', 'uib/template/datepicker/year.html']);
-
-module.exports = MODULE_NAME;
+module.exports = require('./index-nocss.js');

src/datepickerPopup/index-nocss.js

@@ -0,0 +1,9 @@
+require('../datepicker');
+require('../position');
+require('../../template/datepickerPopup/popup.html.js');
+
+var MODULE_NAME = 'ui.bootstrap.module.datepickerPopup';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.datepickerPopup', 'uib/template/datepickerPopup/popup.html']);
+
+module.exports = MODULE_NAME;

src/datepickerPopup/index.js

@@ -1,11 +1,2 @@
-require('../datepicker');
-require('../position');
-require('../../template/datepickerPopup/popup.html.js');
-
 require('./popup.css');
-
-var MODULE_NAME = 'ui.bootstrap.module.datepickerPopup';
-
-angular.module(MODULE_NAME, ['ui.bootstrap.datepickerPopup', 'uib/template/datepickerPopup/popup.html']);
-
-module.exports = MODULE_NAME;
+module.exports = require('./index-nocss.js');

src/position/index-nocss.js

@@ -0,0 +1,7 @@
+require('./position');
+
+var MODULE_NAME = 'ui.bootstrap.module.position';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.position']);
+
+module.exports = MODULE_NAME;

src/position/index.js

@@ -1,9 +1,2 @@
-require('./position');
-
 require('./position.css');
-
-var MODULE_NAME = 'ui.bootstrap.module.position';
-
-angular.module(MODULE_NAME, ['ui.bootstrap.position']);
-
-module.exports = MODULE_NAME;
+module.exports = require('./index-nocss.js');

src/timepicker/index-nocss.js

@@ -0,0 +1,10 @@
+require('../../template/timepicker/timepicker.html.js');
+require('./timepicker');
+
+require('./timepicker.css');
+
+var MODULE_NAME = 'ui.bootstrap.module.timepicker';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.timepicker', 'uib/template/timepicker/timepicker.html']);
+
+module.exports = MODULE_NAME;

src/timepicker/index.js

@@ -1,10 +1,2 @@
-require('../../template/timepicker/timepicker.html.js');
-require('./timepicker');
-
 require('./timepicker.css');
-
-var MODULE_NAME = 'ui.bootstrap.module.timepicker';
-
-angular.module(MODULE_NAME, ['ui.bootstrap.timepicker', 'uib/template/timepicker/timepicker.html']);
-
-module.exports = MODULE_NAME;
+module.exports = require('./index-nocss.js');

src/tooltip/index-nocss.js

@@ -0,0 +1,12 @@
+require('../position');
+require('../stackedMap');
+require('../../template/tooltip/tooltip-popup.html.js');
+require('../../template/tooltip/tooltip-html-popup.html.js');
+require('../../template/tooltip/tooltip-template-popup.html.js');
+require('./tooltip');
+
+var MODULE_NAME = 'ui.bootstrap.module.tooltip';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.tooltip', 'uib/template/tooltip/tooltip-popup.html', 'uib/template/tooltip/tooltip-html-popup.html', 'uib/template/tooltip/tooltip-template-popup.html']);
+
+module.exports = MODULE_NAME;

src/tooltip/index.js

@@ -1,14 +1,2 @@
-require('../position');
-require('../stackedMap');
-require('../../template/tooltip/tooltip-popup.html.js');
-require('../../template/tooltip/tooltip-html-popup.html.js');
-require('../../template/tooltip/tooltip-template-popup.html.js');
-require('./tooltip');
-
 require('./tooltip.css');
-
-var MODULE_NAME = 'ui.bootstrap.module.tooltip';
-
-angular.module(MODULE_NAME, ['ui.bootstrap.tooltip', 'uib/template/tooltip/tooltip-popup.html', 'uib/template/tooltip/tooltip-html-popup.html', 'uib/template/tooltip/tooltip-template-popup.html']);
-
-module.exports = MODULE_NAME;
+module.exports = require('./index-nocss.js');

src/typeahead/index-nocss.js

@@ -0,0 +1,11 @@
+require('../debounce');
+require('../position');
+require('../../template/typeahead/typeahead-match.html.js');
+require('../../template/typeahead/typeahead-popup.html.js');
+require('./typeahead');
+
+var MODULE_NAME = 'ui.bootstrap.module.typeahead';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.typeahead', 'uib/template/typeahead/typeahead-match.html', 'uib/template/typeahead/typeahead-popup.html']);
+
+module.exports = MODULE_NAME;

src/typeahead/index.js

@@ -1,13 +1,2 @@
-require('../debounce');
-require('../position');
-require('../../template/typeahead/typeahead-match.html.js');
-require('../../template/typeahead/typeahead-popup.html.js');
-require('./typeahead');
-
 require('./typeahead.css');
-
-var MODULE_NAME = 'ui.bootstrap.module.typeahead';
-
-angular.module(MODULE_NAME, ['ui.bootstrap.typeahead', 'uib/template/typeahead/typeahead-match.html', 'uib/template/typeahead/typeahead-popup.html']);
-
-module.exports = MODULE_NAME;
+module.exports = require('./index-nocss.js');