bootstrap and ng-bootstrap versions upgraded to v4.0.0-beta.3 and v1.…

…0.0-beta.8 respectively.
amit8-88 · Jan 3, 2018 · 90c5634 · 90c5634
1 parent ca3a2f5
commit 90c5634
Show file tree

Hide file tree

Showing 56 changed files with 911 additions and 780 deletions.
diff --git a/dist/0.049ab72a2b84f49fc9cb.chunk.js b/dist/0.049ab72a2b84f49fc9cb.chunk.js
diff --git a/dist/0.645962c66c3d8e7ace6d.chunk.js b/dist/0.645962c66c3d8e7ace6d.chunk.js
diff --git a/dist/10.1ccc52234c7f37295197.chunk.js b/dist/10.1ccc52234c7f37295197.chunk.js
diff --git a/dist/10.d1553e22dd2933ede63c.chunk.js b/dist/10.d1553e22dd2933ede63c.chunk.js
diff --git a/dist/12.9995c70ff6230ed9c531.chunk.js b/dist/12.9995c70ff6230ed9c531.chunk.js
diff --git a/dist/12.a0c17e303341766989ce.chunk.js b/dist/12.a0c17e303341766989ce.chunk.js
diff --git a/dist/3rdpartylicenses.txt b/dist/3rdpartylicenses.txt
@@ -1,4 +1,4 @@
-@ng-bootstrap/[email protected].7
+@ng-bootstrap/[email protected].8
 MIT
 MIT
 

diff --git a/dist/7.4243765b5035f986278f.chunk.js b/dist/7.4243765b5035f986278f.chunk.js
diff --git a/dist/7.676bb14858956a0c70a2.chunk.js b/dist/7.676bb14858956a0c70a2.chunk.js
diff --git a/dist/9.5faacf23d93387d150b9.chunk.js → dist/9.9e99756479991c834782.chunk.js b/dist/9.5faacf23d93387d150b9.chunk.js → dist/9.9e99756479991c834782.chunk.js
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SB Admin Angular5 BS4</title><base href="/start-angular/SB-Admin-BS4-Angular-5/master/dist/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.c3bb5d1adee76dcf60d2.bundle.css" rel="stylesheet"/></head><body><app-root><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></app-root><script type="text/javascript" src="inline.27459537bdd751d6634b.bundle.js"></script><script type="text/javascript" src="polyfills.5922fcd2e759fe4117ae.bundle.js"></script><script type="text/javascript" src="scripts.075de657c03483e461e9.bundle.js"></script><script type="text/javascript" src="main.ac200e38e987a4c87cb7.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SB Admin Angular5 BS4</title><base href="/start-angular/SB-Admin-BS4-Angular-5/master/dist/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.46da93d74c50ba791b3b.bundle.css" rel="stylesheet"/></head><body><app-root><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></app-root><script type="text/javascript" src="inline.d49a8c44644cf2c98e05.bundle.js"></script><script type="text/javascript" src="polyfills.5922fcd2e759fe4117ae.bundle.js"></script><script type="text/javascript" src="scripts.075de657c03483e461e9.bundle.js"></script><script type="text/javascript" src="main.ac200e38e987a4c87cb7.bundle.js"></script></body></html>
diff --git a/dist/inline.27459537bdd751d6634b.bundle.js → dist/inline.d49a8c44644cf2c98e05.bundle.js b/dist/inline.27459537bdd751d6634b.bundle.js → dist/inline.d49a8c44644cf2c98e05.bundle.js
diff --git a/dist/styles.46da93d74c50ba791b3b.bundle.css b/dist/styles.46da93d74c50ba791b3b.bundle.css
diff --git a/dist/styles.c3bb5d1adee76dcf60d2.bundle.css b/dist/styles.c3bb5d1adee76dcf60d2.bundle.css
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
         "@angular/platform-browser": "^5.0.1",
         "@angular/platform-browser-dynamic": "^5.0.1",
         "@angular/router": "^5.0.1",
-        "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
+        "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
         "@ngx-translate/core": "^8.0.0",
         "@ngx-translate/http-loader": "^2.0.0",
         "chart.js": "^2.7.1",

diff --git a/src/app/layout/bs-component/components/buttons/buttons.component.html b/src/app/layout/bs-component/components/buttons/buttons.component.html
@@ -5,7 +5,7 @@
                 Radio Button group (<strong>Using ngModel</strong>)
             </div>
             <div class="card-body">
-                <div class="btn-group mb-3" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
+                <div class="btn-group btn-group-toggle mb-3" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                     <label ngbButtonLabel class="btn-primary">
                         <input ngbButton type="radio" [value]="1"> Left (pre-checked)
                     </label>
@@ -29,7 +29,7 @@
             </div>
             <div class="card-body">
                 <form [formGroup]="radioGroupForm" class="mb-3">
-                    <div class="btn-group" ngbRadioGroup name="radioBasic" formControlName="model">
+                    <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="model">
                         <label ngbButtonLabel class="btn-primary">
                             <input ngbButton type="radio" [value]="1"> Left (pre-checked)
                         </label>

diff --git a/src/app/layout/bs-component/components/date-picker/date-picker.component.html b/src/app/layout/bs-component/components/date-picker/date-picker.component.html
@@ -8,9 +8,10 @@
                         <div class="input-group datepicker-input">
                             <input class="form-control" placeholder="yyyy-mm-dd"
                                 name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
-                            <div class="input-group-addon" (click)="d.toggle()" >
+                            <button class="input-group-addon" (click)="d.toggle()" type="button">
+                                <!-- <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/> -->
                                 <span class="fa fa-calendar"></span>
-                            </div>
+                            </button>
                         </div>
                     </div>
                 </form>

diff --git a/src/app/layout/bs-component/components/date-picker/date-picker.component.scss b/src/app/layout/bs-component/components/date-picker/date-picker.component.scss
@@ -0,0 +1,5 @@
+:host /deep/ .datepicker-input {
+    .custom-select {
+        width: 50%;
+    }
+}
diff --git a/src/app/layout/bs-component/components/dropdown/dropdown.component.html b/src/app/layout/bs-component/components/dropdown/dropdown.component.html
@@ -5,7 +5,7 @@
             <div class="col">
                 <div ngbDropdown class="d-inline-block dropdown">
                     <button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
-                    <div class="dropdown-menu">
+                    <div ngbDropdownMenu>
                         <button class="dropdown-item">Action</button>
                         <button class="dropdown-item">Another Action</button>
                         <button class="dropdown-item">Something else is here</button>
@@ -27,7 +27,7 @@
         <p class="mb-2">You can easily control dropdowns programmatically using the exported dropdown instance.</p>
         <div class="d-inline-block dropdown" ngbDropdown #myDrop="ngbDropdown">
             <button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
-            <div class="dropdown-menu">
+            <div ngbDropdownMenu>
                 <button class="dropdown-item">Action</button>
                 <button class="dropdown-item">Another Action</button>
                 <button class="dropdown-item">Something else is here</button>

diff --git a/src/app/layout/components/header/header.component.html b/src/app/layout/components/header/header.component.html
@@ -30,7 +30,7 @@
                 <a class="nav-link" href="javascript:void(0)" ngbDropdownToggle>
                     <i class="fa fa-envelope"></i> <b class="caret"></b><span class="sr-only">(current)</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-right messages">
+                <ul class="dropdown-menu-right messages" ngbDropdownMenu>
                     <li class="media">
                         <img class="d-flex align-self-center mr-3"
                             src="http://i.huffpost.com/gadgets/slideshows/461162/slide_461162_6224974_sq50.jpg" alt="Generic placeholder image"
@@ -69,7 +69,7 @@ <h5 class="mt-0 mb-1">John Smith</h5>
                 <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
                     <i class="fa fa-bell"></i> <b class="caret"></b><span class="sr-only">(current)</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-right">
+                <div class="dropdown-menu-right" ngbDropdownMenu>
                     <a href="javascript:void(0)" class="dropdown-item">
                         {{ 'Pending Task' | translate }} <span class="badge badge-info">6</span>
                     </a>
@@ -83,13 +83,13 @@ <h5 class="mt-0 mb-1">John Smith</h5>
                     <a href="javascript:void(0)" class="dropdown-item">
                         {{ 'View All' | translate }}
                     </a>
-                </ul>
+                </div>
             </li>
             <li class="nav-item dropdown" ngbDropdown>
                 <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
                     <i class="fa fa-language"></i> {{ 'Language' | translate }} <b class="caret"></b>
                 </a>
-                <div class="dropdown-menu dropdown-menu-right">
+                <div class="dropdown-menu-right" ngbDropdownMenu>
                     <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('en')">
                         {{ 'English' | translate }}
                     </a>
@@ -117,7 +117,7 @@ <h5 class="mt-0 mb-1">John Smith</h5>
                 <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
                     <i class="fa fa-user"></i> John Smith <b class="caret"></b>
                 </a>
-                <div class="dropdown-menu dropdown-menu-right">
+                <div class="dropdown-menu-right" ngbDropdownMenu>
                     <a class="dropdown-item" href="javascript:void(0)">
                         <i class="fa fa-fw fa-user"></i> {{ 'Profile' | translate }}
                     </a>

diff --git a/src/app/layout/form/form.component.html b/src/app/layout/form/form.component.html
@@ -181,29 +181,42 @@ <h4>Input Groups</h4>
             <form role="form">
 
                 <div class="form-group input-group">
-                    <span class="input-group-addon">@</span>
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon1">@</span>
+                    </div>
+                    <!-- <span class="input-group-addon">@</span> -->
                     <input type="text" class="form-control" placeholder="Username">
                 </div>
 
                 <div class="form-group input-group">
                     <input type="text" class="form-control">
-                    <span class="input-group-addon">.00</span>
+                    <div class="input-group-append">
+                        <span class="input-group-text">.00</span>
+                    </div>
                 </div>
 
                 <div class="form-group input-group">
-                    <span class="input-group-addon"><i class="fa fa-eur"></i></span>
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon1"><i class="fa fa-eur"></i></span>
+                    </div>
                     <input type="text" class="form-control" placeholder="Font Awesome Icon">
                 </div>
 
                 <div class="form-group input-group">
-                    <span class="input-group-addon">$</span>
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon1">$</span>
+                    </div>
                     <input type="text" class="form-control">
-                    <span class="input-group-addon">.00</span>
+                    <div class="input-group-append">
+                        <span class="input-group-text">.00</span>
+                    </div>
                 </div>
 
                 <div class="form-group input-group">
                     <input type="text" class="form-control">
-                    <span class="input-group-btn"><button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button></span>
+                    <div class="input-group-append">
+                        <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
+                    </div>
                 </div>
 
             </form>

diff --git a/src/styles/bootstrap/_alert.scss b/src/styles/bootstrap/_alert.scss
@@ -27,6 +27,8 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
+  padding-right: ($close-font-size + $alert-padding-x * 2);
+
   // Adjust close link position
   .close {
     position: absolute;

diff --git a/src/styles/bootstrap/_button-group.scss b/src/styles/bootstrap/_button-group.scss
@@ -14,12 +14,12 @@
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
     @include hover {
-      z-index: 2;
+      z-index: 1;
     }
     &:focus,
     &:active,
     &.active {
-      z-index: 2;
+      z-index: 1;
     }
   }
 
@@ -28,7 +28,7 @@
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    margin-left: -$input-btn-border-width;
+    margin-left: -$btn-border-width;
   }
 }
 
@@ -43,48 +43,23 @@
   }
 }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-  border-radius: 0;
-}
-
-// Set corners individual because sometimes a single button can be in a .btn-group
-// and we need :first-child and :last-child to both match
-.btn-group > .btn:first-child {
-  margin-left: 0;
-
-  &:not(:last-child):not(.dropdown-toggle) {
-    @include border-right-radius(0);
+.btn-group {
+  > .btn:first-child {
+    margin-left: 0;
   }
-}
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
-// immediately after it
-.btn-group > .btn:last-child:not(:first-child),
-.btn-group > .dropdown-toggle:not(:first-child) {
-  @include border-left-radius(0);
-}
 
-// Custom edits for including btn-groups within btn-groups (useful for including
-// dropdown buttons within a btn-group)
-.btn-group > .btn-group {
-  float: left;
-}
-
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
-  border-radius: 0;
-}
-
-.btn-group > .btn-group:first-child:not(:last-child) {
-  > .btn:last-child,
-  > .dropdown-toggle {
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
     @include border-right-radius(0);
   }
-}
 
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  @include border-left-radius(0);
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
 }
 
-
 // Sizing
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
@@ -97,23 +72,23 @@
 // Split button dropdowns
 //
 
-.btn + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x * .75;
-  padding-left: $input-btn-padding-x * .75;
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
 
   &::after {
     margin-left: 0;
   }
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-sm * .75;
-  padding-left: $input-btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-lg * .75;
-  padding-left: $input-btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
 }
 
 
@@ -147,36 +122,18 @@
   > .btn + .btn-group,
   > .btn-group + .btn,
   > .btn-group + .btn-group {
-    margin-top: -$input-btn-border-width;
+    margin-top: -$btn-border-width;
     margin-left: 0;
   }
 
-  > .btn {
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-
-    &:first-child:not(:last-child) {
-      @include border-bottom-radius(0);
-    }
-
-    &:last-child:not(:first-child) {
-      @include border-top-radius(0);
-    }
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
   }
 
-  > .btn-group:not(:first-child):not(:last-child) > .btn {
-    border-radius: 0;
-  }
-
-  > .btn-group:first-child:not(:last-child) {
-    > .btn:last-child,
-    > .dropdown-toggle {
-      @include border-bottom-radius(0);
-    }
-  }
-
-  > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }
 }
@@ -194,13 +151,15 @@
 // See https://github.com/twbs/bootstrap/pull/12794 and
 // https://github.com/twbs/bootstrap/pull/14559 for more information.
 
-[data-toggle="buttons"] {
+.btn-group-toggle {
   > .btn,
   > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
     input[type="radio"],
     input[type="checkbox"] {
       position: absolute;
-      clip: rect(0,0,0,0);
+      clip: rect(0, 0, 0, 0);
       pointer-events: none;
     }
   }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SB Admin Angular5 BS4</title><base href="/start-angular/SB-Admin-BS4-Angular-5/master/dist/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.c3bb5d1adee76dcf60d2.bundle.css" rel="stylesheet"/></head><body><app-root><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></app-root><script type="text/javascript" src="inline.27459537bdd751d6634b.bundle.js"></script><script type="text/javascript" src="polyfills.5922fcd2e759fe4117ae.bundle.js"></script><script type="text/javascript" src="scripts.075de657c03483e461e9.bundle.js"></script><script type="text/javascript" src="main.ac200e38e987a4c87cb7.bundle.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SB Admin Angular5 BS4</title><base href="/start-angular/SB-Admin-BS4-Angular-5/master/dist/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.46da93d74c50ba791b3b.bundle.css" rel="stylesheet"/></head><body><app-root><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></app-root><script type="text/javascript" src="inline.d49a8c44644cf2c98e05.bundle.js"></script><script type="text/javascript" src="polyfills.5922fcd2e759fe4117ae.bundle.js"></script><script type="text/javascript" src="scripts.075de657c03483e461e9.bundle.js"></script><script type="text/javascript" src="main.ac200e38e987a4c87cb7.bundle.js"></script></body></html>