feat(bootstrap): add missing addons style. (#657)

fix #656

demo/src/styles.scss

@@ -5,6 +5,8 @@
 @import '~bootstrap/scss/root';
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/input-group';
+@import '~bootstrap/scss/utilities/display';
 @import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/card';
 

package.json

@@ -75,7 +75,7 @@
     "angular-cli-ghpages": "^0.5.2",
     "angular2-template-loader": "^0.6.2",
     "awesome-typescript-loader": "^3.4.0",
-    "bootstrap": "4.0.0-beta.2",
+    "bootstrap": "4.0.0-beta.3",
     "codecov": "^3.0.0",
     "codelyzer": "^4.0.1",
     "commitizen": "^2.9.6",

src/ui-bootstrap/src/wrappers/addons.ts

@@ -5,20 +5,20 @@ import { FieldWrapper } from '@ngx-formly/core';
   selector: 'formly-wrapper-addons',
   template: `
     <div class="input-group">
-      <div class="input-group-addon"
+      <div class="input-group-addon input-group-prepend"
         *ngIf="to.addonLeft"
         [ngStyle]="{cursor: to.addonLeft.onClick ? 'pointer' : 'inherit'}"
         (click)="addonLeftClick($event)">
-        <i [ngClass]="to.addonLeft.class" *ngIf="to.addonLeft.class"></i>
-        <span *ngIf="to.addonLeft.text">{{ to.addonLeft.text }}</span>
+        <i class="input-group-text" [ngClass]="to.addonLeft.class" *ngIf="to.addonLeft.class"></i>
+        <span *ngIf="to.addonLeft.text" class="input-group-text">{{ to.addonLeft.text }}</span>
       </div>
       <ng-template #fieldComponent></ng-template>
-      <div class="input-group-addon"
+      <div class="input-group-addon input-group-append"
         *ngIf="to.addonRight"
         [ngStyle]="{cursor: to.addonRight.onClick ? 'pointer' : 'inherit'}"
         (click)="addonRightClick($event)">
-        <i [ngClass]="to.addonRight.class" *ngIf="to.addonRight.class"></i>
-        <span *ngIf="to.addonRight.text">{{ to.addonRight.text }}</span>
+        <i class="input-group-text" [ngClass]="to.addonRight.class" *ngIf="to.addonRight.class"></i>
+        <span *ngIf="to.addonRight.text" class="input-group-text">{{ to.addonRight.text }}</span>
       </div>
     </div>
   `,

yarn.lock

@@ -847,9 +847,9 @@ [email protected]:
   dependencies:
     hoek "4.x.x"
 
-[email protected].2:
-  version "4.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.2.tgz#4d67d2aa2219f062cd90bc1247e6747b9e8fd051"
+[email protected].3:
+  version "4.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.3.tgz#60f0660bc3d121176514b361f6f83201c7ff8874"
 
 brace-expansion@^1.1.7:
   version "1.1.8"