From 315666aa45f994eeaa7b5c03f6a31a56d68dff5b Mon Sep 17 00:00:00 2001
From: Lex Zhukov <lexzhukovpro@gmail.com>
Date: Wed, 19 Jul 2017 16:28:35 +0300
Subject: [PATCH] feat(buttons): add the dropdown overrides (#16)

---
 .../button-groups.component.html              | 101 +++++++++---------
 .../button-groups.component.scss              |  17 ++-
 .../button-groups/button-groups.component.ts  |  15 ++-
 .../buttons/buttons.component.html            |  10 +-
 .../dropdown-button.component.html            |  65 +++++------
 .../dropdown-button.component.scss            |  15 ++-
 .../pages/ui-features/tabs/tabs.component.ts  |   6 +-
 7 files changed, 125 insertions(+), 104 deletions(-)

diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
index 885e283f..84104ca2 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
@@ -4,114 +4,115 @@
     <div class="row">
       <div class="col-md-12">
         <div class="example-container">
-          <div class="container-title">Toogle Types</div>
-          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group-block btn-group-divider" data-toggle="buttons">
-            <label class="btn btn-primary">
-              <input type="radio" value="Left"/> Left
+          <div class="container-title">Toggle Types</div>
+          <div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons">
+            <label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
+              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
             </label>
-            <label class="btn btn-primary">
-              <input type="radio" value="Middle"/> Middle
+            <label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
+              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
             </label>
-            <label class="btn btn-primary">
-              <input type="radio" value="Right"/> Right
+            <label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
+              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
             </label>
           </div>
-          <div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
+          <div class="btn-group btn-toggle-group" data-toggle="buttons">
             <label class="btn btn-primary" [class.active]="checkboxModel.left">
-              <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
+              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
             </label>
             <label class="btn btn-primary" [class.active]="checkboxModel.middle">
-              <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
+              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
             </label>
             <label class="btn btn-primary" [class.active]="checkboxModel.right">
-              <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
+              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
             </label>
           </div>
         </div>
         <div class="example-container toolbars-container">
           <div class="pagination-container">
             <div class="container-title">Pagination</div>
-            <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
-              <label class="btn btn-success">
-                <input type="radio"/> 1
+            <div class="btn-group btn-group-pagination btn-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel"
+              ngbRadioGroup>
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="1"> 1
               </label>
-              <label class="btn btn-success">
-                <input type="radio"/> 2
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="2"> 2
               </label>
-              <label class="btn btn-success">
-                <input type="radio"/> 3
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="3"> 3
               </label>
-              <label class="btn btn-success">
-                <input type="radio"/> 4
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="4"> 4
               </label>
-              <label class="btn btn-success">
-                <input type="radio" /> 5
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="5"> 5
               </label>
             </div>
           </div>
           <div class="icon-toolbar-container">
             <div class="container-title">Icon Toolbar</div>
-            <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
-              <label class="btn btn-success">
-                <input type="radio"/> <i class="ion-ionic"></i>
+            <div class="btn-group btn-group-pagination" data-toggle="buttons">
+              <label class="btn btn-success" [class.active]="iconToolbarModel.one">
+                <input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
               </label>
-              <label class="btn btn-success">
-                <input type="radio"/> <i class="ion-ionic"></i>
+              <label class="btn btn-success" [class.active]="iconToolbarModel.two">
+                <input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
               </label>
-              <label class="btn btn-success">
-                <input type="radio"/> <i class="ion-ionic"></i>
+              <label class="btn btn-success" [class.active]="iconToolbarModel.three">
+                <input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
               </label>
-              <label class="btn btn-success">
-                <input type="radio"/> <i class="ion-ionic"></i>
+              <label class="btn btn-success" [class.active]="iconToolbarModel.four">
+                <input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
               </label>
             </div>
           </div>
         </div>
         <div class="example-container">
           <div class="container-title">Divided Button Group</div>
-          <div class="btn-group btn-group-block btn-group-divided" data-toggle="buttons">
+          <div class="btn-group btn-divided-group" data-toggle="buttons">
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"/> <i class="ion-paper-airplane"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i class="ion-paper-airplane"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"/> <i class="ion-paper-airplane"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i class="ion-paper-airplane"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"/> <i class="ion-paper-airplane"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-paper-airplane"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"/> <i class="ion-paper-airplane"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i class="ion-paper-airplane"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"/> <i class="ion-paper-airplane"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="ion-paper-airplane"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"/> <i class="ion-paper-airplane"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i class="ion-paper-airplane"></i>
             </label>
           </div>
         </div>
         <div class="example-container">
           <div class="container-title">Divided Button Group</div>
-          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
-            <label class="btn btn-primary">
-              <input type="radio" value="Left"/> Left
+          <div class="btn-group btn-divided-group btn-divided-group-block " data-toggle="buttons">
+            <label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
+              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
             </label>
-            <label class="btn btn-primary">
-              <input type="radio" value="Middle"/> Middle
+            <label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
+              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
             </label>
-            <label class="btn btn-primary">
-              <input type="radio" value="Right"/> Right
+            <label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
+              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
             </label>
           </div>
-          <div class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
+          <div class="btn-group btn-divided-group btn-divided-group-block " data-toggle="buttons">
             <label class="btn btn-primary" [class.active]="checkboxModel.left">
-              <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
+              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
             </label>
             <label class="btn btn-primary" [class.active]="checkboxModel.middle">
-              <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
+              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
             </label>
             <label class="btn btn-primary" [class.active]="checkboxModel.right">
-              <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
+              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
             </label>
           </div>
         </div>
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
index e00bb758..0c3cae95 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
@@ -1,5 +1,4 @@
 @import '../../../../@theme/styles/variables';
-@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
 
 @include nga-install-component() {
 
@@ -19,4 +18,20 @@
   .example-container:not(:last-child) {
     margin-bottom: 2rem;
   }
+
+  .btn-toggle-group {
+    width: 100%;
+
+    .btn {
+      width: 100%;
+    }
+  }
+
+  .btn-divided-group-block {
+    width: 100%;
+
+    .btn {
+      width: 100%;
+    }
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
index 166ee21c..bbc51495 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
@@ -7,12 +7,10 @@ import { Component } from '@angular/core';
 })
 export class ButtonGroupsComponent {
 
-  radioModel = 'Left';
-
   checkboxModel = {
-    left: true,
+    left: false,
     middle: false,
-    right: true,
+    right: false,
   };
 
   dividedCheckboxModel = {
@@ -23,4 +21,13 @@ export class ButtonGroupsComponent {
     friday: false,
     saturday: false,
   };
+
+  paginationModel = 1;
+
+  iconToolbarModel = {
+    one: false,
+    two: false,
+    three: true,
+    four: false,
+  };
 }
diff --git a/src/app/pages/ui-features/buttons/buttons.component.html b/src/app/pages/ui-features/buttons/buttons.component.html
index 9e0e2dc8..f13a0f0a 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.html
+++ b/src/app/pages/ui-features/buttons/buttons.component.html
@@ -1,24 +1,24 @@
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-lg-12">
     <ngx-hero-buttons></ngx-hero-buttons>
   </div>
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <ngx-shape-buttons></ngx-shape-buttons>
     <ngx-actions-groups></ngx-actions-groups>
     <nga-card>
       <nga-card-body>Disconect</nga-card-body>
     </nga-card>
     <div class="row">
-      <div class="col-md-4">
+      <div class="col-lg-4">
         <ngx-dropdown-buttons></ngx-dropdown-buttons>
         <ngx-icon-buttons></ngx-icon-buttons>
       </div>
-      <div class="col-md-8">
+      <div class="col-lg-8">
         <ngx-button-groups></ngx-button-groups>
       </div>
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <ngx-size-buttons></ngx-size-buttons>
     <ngx-default-buttons></ngx-default-buttons>
     <ngx-block-level-buttons></ngx-block-level-buttons>
diff --git a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html b/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html
index 06d67445..f1c32002 100644
--- a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html
+++ b/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html
@@ -1,56 +1,43 @@
 <nga-card>
   <nga-card-header>Button Dropdowns</nga-card-header>
   <nga-card-body>
-    <div class="btn-group btn-group-dropdown-divider" ngbDropdown>
-      <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary" ngbDropdownToggle>
-        <span class="sr-only">Dropdown</span>
-      </button>
-      <div class="dropdown-menu">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Separated link</a>
-      </div>
-    </div>
     <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary" ngbDropdownToggle>
-        <span class="sr-only">Dropdown</span>
-      </button>
+      <button type="button" class="btn btn-primary" ngbDropdownToggle></button>
       <div class="dropdown-menu">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Separated link</a>
+        <a class="dropdown-item" href="#">Icon Button</a>
+        <a class="dropdown-item" href="#">Hero Button</a>
+        <a class="dropdown-item" href="#">Default</a>
       </div>
     </div>
-    <div class="btn-group" ngbDropdown>
-      <button type="button" class="btn btn-outline-primary">Dropdown</button>
-      <button type="button" class="btn btn-outline-primary" ngbDropdownToggle>
-        <span class="sr-only">Dropdown</span>
+    <div ngbDropdown>
+      <button class="btn btn-primary" type="button" ngbDropdownToggle>
+        Dropdown
       </button>
       <div class="dropdown-menu">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Separated link</a>
+        <a class="dropdown-item" href="#">Icon Button</a>
+        <a class="dropdown-item" href="#">Hero Button</a>
+        <a class="dropdown-item" href="#">Default</a>
       </div>
     </div>
-    <div class="btn-group btn-group-hidden" ngbDropdown>
-      <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary" ngbDropdownToggle>
-        <span class="sr-only">Dropdown</span>
+    <div class="outline-dropdown" ngbDropdown>
+      <button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
+        Dropdown
       </button>
       <div class="dropdown-menu">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">Separated link</a>
+        <a class="dropdown-item" href="#">Icon Button</a>
+        <a class="dropdown-item" href="#">Hero Button</a>
+        <a class="dropdown-item" href="#">Default</a>
+      </div>
+    </div>
+    <div class="ghost-dropdown" ngbDropdown>
+      <button class="btn btn-primary" type="button" ngbDropdownToggle>
+        Dropdown
+      </button>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Icon Button</a>
+        <a class="dropdown-item" href="#">Hero Button</a>
+        <a class="dropdown-item" href="#">Default</a>
       </div>
     </div>
   </nga-card-body>
diff --git a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss b/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss
index 35106346..05893a29 100644
--- a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss
+++ b/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss
@@ -1,3 +1,14 @@
-.dropdown, .btn-group {
-  margin-bottom: 1rem;
+@import '../../../../@theme/styles/variables';
+
+@include nga-install-component() {
+  text-align: center;
+
+  .dropdown, .btn-group {
+    margin-bottom: 1rem;
+  }
+
+  nga-card {
+    overflow-x: visible;
+    overflow-y: visible;
+  }
 }
diff --git a/src/app/pages/ui-features/tabs/tabs.component.ts b/src/app/pages/ui-features/tabs/tabs.component.ts
index a72a80cc..88ebd452 100644
--- a/src/app/pages/ui-features/tabs/tabs.component.ts
+++ b/src/app/pages/ui-features/tabs/tabs.component.ts
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-tab1',
   template: `
-    <p>Early home automation began with labor-saving machines. Self-contained electric or gas powered 
-      <a href="/wiki/Home_appliances">home appliances</a> became viable in the 1900s with the introduction of 
+    <p>Early home automation began with labor-saving machines. Self-contained electric or gas powered
+      <a href="/wiki/Home_appliances">home appliances</a> became viable in the 1900s with the introduction of
       <a href="/wiki/Electric_power_distribution">electric power distribution</a>
-      and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines, 
+      and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines,
       dishwashers, and clothes dryers.
     </p>
   `,