Merge pull request #747 from Bounteous-Inc/master

Add Bootstrap 4 template

docs/demos/bsdate/desc.md

@@ -1,8 +1,12 @@
 Date control is implemented via [Angular-ui bootstrap datepicker](http://angular-ui.github.io/bootstrap/#/datepicker).  
-You should include additional `ui-bootstrap-tpls.min.js`:
+You should include additional `ui-bootstrap-tpls.min.js` for Bootstrap 3:
 
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
 
+For Bootstrap 4, include:
+
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ui-bootstrap-tpls.js"></script>
+
 Add `ui.bootstrap` as module dependency:
 
 	var app = angular.module("app", ["xeditable", "ui.bootstrap"]);

docs/demos/bstime/desc.md

@@ -1,33 +1,15 @@
 Time control is implemented via [Angular-ui bootstrap timepicker](http://angular-ui.github.io/bootstrap/#/timepicker).  
-**Currently it has only Bootstrap 2 version**, Bootstrap 3 version is [in progress](https://github.com/angular-ui/bootstrap/issues?milestone=6).  
-You should include additional `ui-bootstrap-tpls.min.js`:
+You should include additional `ui-bootstrap-tpls.min.js`for Bootstrap 3:
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
 
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
+For Bootstrap 4, include:
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ui-bootstrap-tpls.js"></script>
+
 Add `ui.bootstrap` as module dependency:
 
 	var app = angular.module("app", ["xeditable", "ui.bootstrap"]);
 
 And set `editable-bstime` attribute in editable element.
-Other parameters can be defined via `e-*` syntax, e.g. `e-minute-step="10"`.
-
-To get it working with **Bootstrap 3** you should add following css:
-
-	/* temporary workaround for display editable-bstime in bs3 - up/down symbols not shown */
-	.editable-bstime .editable-input i.icon-chevron-up:before {
-	  content: '\e113';
-	}
-	.editable-bstime .editable-input i.icon-chevron-down:before {
-	  content: '\e114';
-	}
-	.editable-bstime .editable-input i.icon-chevron-up,
-	.editable-bstime .editable-input i.icon-chevron-down {
-	  position: relative;
-	  top: 1px;
-	  display: inline-block;
-	  font-family: 'Glyphicons Halflings';
-	  -webkit-font-smoothing: antialiased;
-	  font-style: normal;
-	  font-weight: normal;
-	  line-height: 1;
-	}
+Other parameters can be defined via `e-*` syntax, e.g. `e-minute-step="10"`.

docs/demos/checklist/controller.js

@@ -1,26 +1,26 @@
 app.controller('ChecklistCtrl', function($scope, $filter) {
   $scope.user = {
     status: [2, 3]
-  }; 
+  };
 
   $scope.statuses = [
     {value: 1, text: 'status1'},
     {value: 2, text: 'status2'},
     {value: 3, text: 'status3'}
-  ]; 
+  ];
 
   $scope.showStatus = function() {
     var selected = [];
-    angular.forEach($scope.statuses, function(s) { 
+    angular.forEach($scope.statuses, function(s) {
       if ($scope.user.status.indexOf(s.value) >= 0) {
         selected.push(s.text);
       }
     });
     return selected.length ? selected.join(', ') : 'Not set';
   };
-  
+
   $scope.disableCheckbox = function (v) {
-    if ($scope.user.status.indexOf(v) == -1) {
+    if ($scope.user.status.indexOf(v) === -1) {
       return true
     }
     return false;

docs/demos/checklist/test.js

@@ -12,17 +12,15 @@ describe('checklist', function() {
 
     expect(element(s+'a').css('display')).toBe('none');
     expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
-    expect(element(s+'form input[type="checkbox"]:visible:enabled').count()).toBe(3);
+    expect(element(s+'form input[type="checkbox"]:visible:enabled').count()).toBe(2);
     expect(element(s+'form input[type="checkbox"]:checked').count()).toBe(2);
 
-    // check status1
-    using(s+'label:eq(0)').input('checked').check();
     // uncheck status3
     using(s+'label:eq(2)').input('checked').check();
     element(s+'form button[type="submit"]').click();
 
     expect(element(s+'a').css('display')).not().toBe('none');
-    expect(element(s+'a').text()).toMatch('status1, status2');
+    expect(element(s+'a').text()).toMatch('status2');
     expect(element(s+'form').count()).toBe(0);
   });
 

docs/demos/dev-theme/test.js

@@ -6,7 +6,7 @@ describe('dev-theme', function() {
 
   it('should have bs3 theme classes', function() {
     var s = '[ng-controller="DevTheme"] ';
-    var a = s + 'a#e-attrs '
+    var a = s + 'a#e-attrs ';
 
     // click on body
     element(a).click();
@@ -24,7 +24,7 @@ describe('dev-theme', function() {
 
   it('should have default theme classes', function() {
     var s = '[ng-controller="DevTheme"] ';
-    var a = s + 'a.cancel '
+    var a = s + 'a.cancel ';
 
     expect(element(a).text()).toMatch('awesome user');
     element(a).click();
@@ -34,7 +34,7 @@ describe('dev-theme', function() {
 
   it('should have bs2 icons', function() {
     var s = '[ng-controller="DevTheme"] ';
-    var a = s + 'a.bs2-test '
+    var a = s + 'a.bs2-test ';
 
     expect(element(a).text()).toMatch('awesome user');
     element(a).click();
@@ -44,13 +44,22 @@ describe('dev-theme', function() {
 
   it('should have font-awesome icons', function() {
     var s = '[ng-controller="DevTheme"] ';
-    var a = s + 'a.fa-test '
+    var a = s + 'a.fa-test ';
 
     expect(element(a).text()).toMatch('awesome user');
     element(a).click();
 
     expect(element(s+'form .editable-buttons button[type="submit"] span').attr('class')).toBe('fa fa-check')
   });
 
+  it('should have bs4 icons', function() {
+    var s = '[ng-controller="DevTheme"] ';
+    var a = s + 'a.bs4-test ';
+
+    expect(element(a).text()).toMatch('awesome user');
+    element(a).click();
+
+    expect(element(s+'form .editable-buttons button[type="submit"] span').attr('class')).toBe('fa fa-check')
+  });
 
-});
+});

docs/demos/dev-theme/view.html

@@ -14,4 +14,8 @@
   <a href="#" class="fa-test" editable-text="user.name" editable-icon-set="font-awesome" blur="cancel">
     {{ user.name }}
   </a>
+  &nbsp;
+  <a href="#" class="bs4-test" editable-text="user.name" editable-theme="bs4" blur="cancel">
+    {{ user.name }}
+  </a>
 </div>

docs/demos/typeahead/desc.md

@@ -1,8 +1,12 @@
 Typeahead control is implemented via [Angular-ui bootstrap typeahead](http://angular-ui.github.io/bootstrap/#/typeahead).  
 Basically it is normal `editable-text` control with additional `e-typeahead` attributes.  
-You should include additional `ui-bootstrap-tpls.min.js`:
+You should include additional `ui-bootstrap-tpls.min.js`for Bootstrap 3:
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
 
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
+For Bootstrap 4, include:
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ui-bootstrap-tpls.js"></script>
 
 Then add `ui.bootstrap` as module dependency:
 

docs/demos/uidate/test.js

@@ -17,6 +17,8 @@ describe('uidate', function() {
     expect(element(s+'form input').val()).toBe('04/11/1985');
     expect(element(s+'form .editable-buttons button[type="submit"]:visible').count()).toBe(1);
     expect(element(s+'form .editable-buttons button[type="button"]:visible').count()).toBe(1);
+    sleep(delay);
+    sleep(delay);
     expect(element('div#ui-datepicker-div:visible').count()).toBe(1);
     expect(element('a.ui-state-active').text()).toMatch('11');
 

docs/jade/getstarted.jade

@@ -1,5 +1,5 @@
 ol
-  li 
+  li
     :markdown
       Include [Angular.js](http://angularjs.org) in your project
 
@@ -9,15 +9,23 @@ ol
     :markdown
       Optionally include [Bootstrap](http://getbootstrap.com) CSS for theming
 
+    :markdown
+      Bootstrap 3
+
     pre.prettyprint
       = '<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">'
 
-  li 
-    span Install angular-xeditable via 
+    :markdown
+      Boostrap 4
+
+    pre.prettyprint
+      = '<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">'
+  li
+    span Install angular-xeditable via
     a(href="http://bower.io", target="_blank") bower
-    span  or  
-    a(href="zip/angular-xeditable-"+version+".zip") download latest zip    
-    pre.prettyprint bower install angular-xeditable 
+    span  or
+    a(href="zip/angular-xeditable-"+version+".zip") download latest zip
+    pre.prettyprint bower install angular-xeditable
 
 
   li Include angular-xeditable into your project
@@ -33,10 +41,10 @@ ol
   li Set theme in app.run:
     pre.prettyprint.
       app.run(['editableOptions', function(editableOptions) {
-        editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
+        editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs4', 'bs2', 'default'
       }]);
 
-  li Markup element that should be editable 
+  li Markup element that should be editable
     pre.prettyprint(ng-non-bindable)
       = '<div ng-controller="Ctrl">\n'
       = '  <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>\n'
@@ -47,9 +55,9 @@ ol
       app.controller('Ctrl', function($scope) {
         $scope.user = {
           name: 'awesome user'
-        };  
+        };
       });
   li Enjoy!
-    div(style="padding-top: 5px")    
+    div(style="padding-top: 5px")
       a.btn.btn-success(href="starter", target="_blank") View starter template
       a.btn.btn-primary(href="zip/angular-xeditable-starter.zip", style="margin-left: 10px") Download starter zip

docs/jade/overview.jade

@@ -1,33 +1,34 @@
 :markdown
   **Angular-xeditable** is a bundle of [AngularJS](http://angularjs.org) directives that allows you to create
-  *editable elements*.  
-  Such technique is also known as *click-to-edit* or *edit-in-place*.  
+  *editable elements*.
+  Such technique is also known as *click-to-edit* or *edit-in-place*.
   It is based on ideas of [x-editable](http://vitalets.github.io/x-editable) but was written from scratch
   to use power of angular and support complex forms / editable grids.
 
 h4 Dependencies
 :markdown
-  Basically it does not depend on any libraries except [AngularJS](http://angularjs.org) itself.    
-  For themes you may need to include [Twitter Bootstrap](http://getbootstrap.com) CSS.  
-  For some extra controls (e.g. datepicker) you may need to include [angular-ui bootstrap](http://angular-ui.github.io/bootstrap/).  
-  For ui-select you may need to include [angular-ui ui-select](https://github.com/angular-ui/ui-select/).  
-  For ngTagsInput you may need to include [mbenford ngTagsInput](https://github.com/mbenford/ngTagsInput).  
+  Basically it does not depend on any libraries except [AngularJS](http://angularjs.org) itself.
+  For themes you may need to include [Twitter Bootstrap](http://getbootstrap.com) CSS.
+  For some extra controls (e.g. datepicker) you may need to include [angular-ui bootstrap](http://angular-ui.github.io/bootstrap/) for Bootstrap 2/3.
+  Include [ui-bootstrap4](https://morgul.github.io/ui-bootstrap4/) for Bootstrap 4.
+  For ui-select you may need to include [angular-ui ui-select](https://github.com/angular-ui/ui-select/).
+  For ngTagsInput you may need to include [mbenford ngTagsInput](https://github.com/mbenford/ngTagsInput).
   If installing via NPM, jQuery and moment js will also be installed.
 
 h4 Controls & Features
 table(style="width: 50%; min-width: 200px")
   tr
     td(style="width: 50%; vertical-align: top")
       :markdown
-        * [text](#text-simple)        
+        * [text](#text-simple)
         * [textarea](#textarea)
         * [select](#select-local)
         * [checkbox](#checklist)
         * [radio](#radiolist)
         * [date](#bsdate)
         * [time](#bstime)
         * [datetime](#combodate)
-        * [html5 inputs](#html5-inputs)        
+        * [html5 inputs](#html5-inputs)
         * [typeahead](#typeahead)
         * [ui-select](#uiselect)
         * [ngTagsInput](#ngtags)

docs/jade/scripts-dev.jade

@@ -1,7 +1,7 @@
 //theme: Bootstrap 3
 link(ng-repeat="c in css", ng-href="{{c}}", rel="stylesheet", media="screen")
 link(href="bower_components/bootstrap/dist/css/bootstrap.css", rel="stylesheet", media="screen")
-link(href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css", rel="stylesheet", media="screen")
+link(href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel="stylesheet", media="screen")
 
 //ui-select css
 link(href="bower_components/angular-ui-select/dist/select.css", rel="stylesheet", media="screen")
@@ -29,7 +29,7 @@ script(src="bower_components/jquery-ui/jquery-ui.js")
 script(src='bower_components/angular/angular.js')
 script(src='bower_components/angular-mocks/angular-mocks.js')
 script(src='bower_components/angular-sanitize/angular-sanitize.js')
-    
+
 //bootstrap
 script(src="bower_components/bootstrap/dist/js/bootstrap.js")
 
@@ -47,7 +47,7 @@ script(src="bower_components/ng-tags-input/ng-tags-input.js")
 
 //moment
 script(src="bower_components/moment/moment.js")
-    
+
 //google-code-prettify
 script(src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js')
 

docs/jade/scripts-prod.jade

@@ -19,22 +19,22 @@ link(href="docs/css/docs.css", rel="stylesheet", media="screen")
 
 //jquery (needed for bootstrap)
 script(src="bower_components/jquery/dist/jquery.js")
-    
+
 //jquery ui
 script(src="bower_components/jquery-ui/jquery-ui.js")
-        
+
 //angular
 script(src='bower_components/angular/angular.js')
 script(src='bower_components/angular-mocks/angular-mocks.js')
 script(src='bower_components/angular-sanitize/angular-sanitize.js')
-    
+
 
 //bootstrap
 script(src="bower_components/bootstrap/dist/js/bootstrap.js")
-    
+
 //angular-ui-date
 script(src="bower_components/angular-ui-date/dist/date.js")
-    
+
 //angular-ui-bootstrap
 script(src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js")