From 895559d431a91f9f13e75571d4db1b7baad43fc9 Mon Sep 17 00:00:00 2001
From: Isaac Lyman <isaac.lyman@healthcatalyst.com>
Date: Wed, 25 Sep 2019 12:15:04 -0600
Subject: [PATCH 01/14] style(tile): remove underscore from css file

fixes #530
---
 projects/cashmere/src/lib/sass/{_tile.scss => tile.scss} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename projects/cashmere/src/lib/sass/{_tile.scss => tile.scss} (100%)

diff --git a/projects/cashmere/src/lib/sass/_tile.scss b/projects/cashmere/src/lib/sass/tile.scss
similarity index 100%
rename from projects/cashmere/src/lib/sass/_tile.scss
rename to projects/cashmere/src/lib/sass/tile.scss

From cce14bedb7088cf9f4e6aa4427a75aa591caf315 Mon Sep 17 00:00:00 2001
From: Isaac Lyman <isaac.lyman@healthcatalyst.com>
Date: Wed, 25 Sep 2019 13:18:30 -0600
Subject: [PATCH 02/14] refactor(tab): convert tabs to mixins

fixes #529
---
 projects/cashmere/src/lib/sass/tab.scss       | 88 +++++++++++++++++++
 .../lib/tabs/tab-set/tab-set.component.scss   | 27 ++----
 .../src/lib/tabs/tab/tab.component.scss       | 37 ++------
 3 files changed, 103 insertions(+), 49 deletions(-)
 create mode 100644 projects/cashmere/src/lib/sass/tab.scss

diff --git a/projects/cashmere/src/lib/sass/tab.scss b/projects/cashmere/src/lib/sass/tab.scss
new file mode 100644
index 000000000..cc12a4930
--- /dev/null
+++ b/projects/cashmere/src/lib/sass/tab.scss
@@ -0,0 +1,88 @@
+@import './colors';
+
+// tab
+
+@mixin hc-tab() {
+    min-width: 0;
+}
+
+@mixin hc-tab-vertical() {
+    background-color: $white;
+    color: $offblack;
+    display: block;
+    padding: 20px;
+    text-decoration: none;
+    
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+@mixin hc-tab-vertical-active() {
+    background-color: $slate-gray-100;
+    border-left: $blue 8px solid;
+    color: $blue;
+    font-weight: 600;
+    padding-left: 12px;
+}
+
+@mixin hc-tab-horizontal() {
+    background-color: inherit;
+    color: $offblack;
+    display: block;
+    font-size: 14px;
+    min-width: 100px;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+@mixin hc-tab-horizontal-active() {
+    border-bottom: $blue 4px solid;
+    color: $offblack;
+    font-weight: bold;
+}
+
+
+// tab-set
+
+@mixin hc-tab-set-container-horizontal() {
+    height: auto;
+    width: 100%;
+}
+
+@mixin hc-tab-set-bar-horizontal() {
+    align-items: baseline;
+    background-color: inherit;
+    border-bottom: 1px solid $slate-gray-300;
+    display: flex;
+    flex-direction: row;
+}
+
+@mixin hc-tab-set-content-horizontal() {
+    background-color: inherit;
+    height: 100%;
+    overflow: auto;
+    width: 100%;
+}
+
+@mixin hc-tab-set-container-vertical() {
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
+@mixin hc-tab-set-bar-vertical() {
+    background-color: $white;
+    padding: 15px 0;
+    width: 20%;
+}
+
+@mixin hc-tab-set-content-vertical() {
+    background-color: $slate-gray-100;
+    width: 80%;
+}
diff --git a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.scss b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.scss
index 9b43d5df4..0af39385b 100644
--- a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.scss
+++ b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.scss
@@ -1,38 +1,25 @@
-@import '../../sass/colors';
+@import '../../sass/tab.scss';
 
 .hc-horizontal-tab-container {
-    height: auto;
-    width: 100%;
+    @include hc-tab-set-container-horizontal();
 }
 
 .hc-tab-bar-horizontal {
-    background-color: inherit;
-    display: flex;
-    flex-direction: row;
-    border-bottom: 1px solid $slate-gray-300;
-    align-items: baseline;
+    @include hc-tab-set-bar-horizontal();
 }
 
 .hc-tab-content-horizontal {
-    background-color: inherit;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
+    @include hc-tab-set-content-horizontal();
 }
 
 .hc-vertical-tab-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
+    @include hc-tab-set-container-vertical();
 }
 
 .hc-tab-bar-vertical {
-    padding: 15px 0;
-    background-color: $white;
-    width: 20%;
+    @include hc-tab-set-bar-vertical();
 }
 
 .hc-tab-content-vertical {
-    background-color: $slate-gray-100;
-    width: 80%;
+    @include hc-tab-set-content-vertical();
 }
\ No newline at end of file
diff --git a/projects/cashmere/src/lib/tabs/tab/tab.component.scss b/projects/cashmere/src/lib/tabs/tab/tab.component.scss
index 5c7023b64..ee9d5bdd2 100644
--- a/projects/cashmere/src/lib/tabs/tab/tab.component.scss
+++ b/projects/cashmere/src/lib/tabs/tab/tab.component.scss
@@ -1,42 +1,21 @@
-@import '../../sass/colors';
+@import '../../sass/tab.scss';
 
 :host {
-    min-width: 0;
+    @include hc-tab();
 }
 
 .hc-tab-vertical {
-    background-color: $white;
-    color: $offblack;
-    padding: 20px;
-    display: block;
-    text-decoration: none;
-    &:hover {
-        cursor: pointer;
-    }
+    @include hc-tab-vertical();
+    
     &.active {
-        background-color: $slate-gray-100;
-        border-left: $blue 8px solid;
-        color: $blue;
-        font-weight: 600;
-        padding-left: 12px;
+        @include hc-tab-vertical-active();
     }
 }
 
 .hc-tab-horizontal {
-    background-color: inherit;
-    color: $offblack;
-    font-size: 14px;
-    padding: 10px 20px;
-    text-decoration: none;
-    display: block;
-    min-width: 100px;
-    text-align: center;
-    &:hover {
-        cursor: pointer;
-    }
+    @include hc-tab-horizontal();
+
     &.active {
-        border-bottom: $blue 4px solid;
-        color: $offblack;
-        font-weight: bold;
+        @include hc-tab-horizontal-active();
     }
 }
\ No newline at end of file

From bf654a6a827a07344b80a0a56fafe6dc55b29d1a Mon Sep 17 00:00:00 2001
From: Isaac Lyman <isaac.lyman@healthcatalyst.com>
Date: Wed, 25 Sep 2019 14:13:14 -0600
Subject: [PATCH 03/14] refactor(radio): convert radio to mixins

fixes #524
---
 .../radio-button/radio-button.component.html  |  8 +-
 .../radio-button/radio-button.component.scss  | 85 ++++++-------------
 .../cashmere/src/lib/sass/radio-button.scss   | 80 +++++++++++++++++
 3 files changed, 109 insertions(+), 64 deletions(-)
 create mode 100644 projects/cashmere/src/lib/sass/radio-button.scss

diff --git a/projects/cashmere/src/lib/radio-button/radio-button.component.html b/projects/cashmere/src/lib/radio-button/radio-button.component.html
index a14b4bae0..b897150c3 100644
--- a/projects/cashmere/src/lib/radio-button/radio-button.component.html
+++ b/projects/cashmere/src/lib/radio-button/radio-button.component.html
@@ -1,5 +1,7 @@
-<label class="hc-radio-container" [ngClass]="{'disabled': disabled}">
-    <input type="radio"
+<label class="hc-radio-container" [class.disabled]="disabled">
+    <input class="hc-radio-input"
+           [class.disabled]="disabled"
+           type="radio"
            [id]="_inputId"
            [attr.value]="value"
            [attr.name]="name"
@@ -8,7 +10,7 @@
            [checked]="checked"
            (change)="_onInputChange($event)"
            (click)="_onInputClick($event)"/>
-    <span class="hc-radio-overlay"></span>
+    <span class="hc-radio-overlay" [class.disabled]="disabled"></span>
     <div class="hc-radio-content">
         <ng-content></ng-content>
     </div>
diff --git a/projects/cashmere/src/lib/radio-button/radio-button.component.scss b/projects/cashmere/src/lib/radio-button/radio-button.component.scss
index 4c46bb9bb..7c9ff00ff 100644
--- a/projects/cashmere/src/lib/radio-button/radio-button.component.scss
+++ b/projects/cashmere/src/lib/radio-button/radio-button.component.scss
@@ -1,78 +1,41 @@
-@import '../sass/colors';
+@import '../sass/radio-button.scss';
 
 .hc-radio-container {
-    display: block;
-    position: relative;
-    padding-left: 35px;
-    margin: 7px 0;
-    line-height: 1.5;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    @include hc-radio-container();
 
-    &:hover input ~ .hc-radio-overlay {
-        border-color: $primary-brand;
+    &.disabled {
+        @include hc-radio-container-disabled();
     }
+}
 
-    input {
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
+.hc-radio-overlay {
+    @include hc-radio-overlay();
+
+    &.disabled {
+        @include hc-radio-overlay-disabled();
+    }
 
-        &:checked ~ .hc-radio-overlay {
-            background-color: $primary-brand;
-            border-color: $primary-brand;
+    .hc-radio-container:hover & {
+        @include hc-radio-overlay-hover();
 
-            &:after {
-                display: block;
-            }
+        &.disabled {
+            @include hc-radio-overlay-disabled();
         }
     }
 
-    .hc-radio-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 22px;
-        width: 22px;
-        border: 2px solid $gray-300;
-        background-color: $white;
-        border-radius: 50%;
+    .hc-radio-input:checked ~ & {
+        @include hc-radio-overlay-checked();
     }
 
-    .hc-radio-overlay:after {
-        top: 5px;
-        left: 5px;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: $white;
-        content: '';
-        position: absolute;
-        display: none;
+    .hc-radio-input:checked ~ &.disabled {
+        @include hc-radio-overlay-checked-disabled();
     }
+}
 
-    &.disabled {
-        cursor: not-allowed;
-        color: $gray-300;
-
-        &:hover input ~ .hc-radio-overlay {
-            border-color: $gray-300;
-        }
-
-        input:checked ~ .hc-radio-overlay {
-            background-color: $gray-200;
-            border-color: $gray-300;
-        }
+.hc-radio-input {
+    @include hc-radio-input();
 
-        .hc-radio-overlay {
-            background-color: $gray-200;
-        }
-
-        .hc-radio-overlay:after {
-            background: $gray-200;
-        }
+    &.disabled {
+        @include hc-radio-input-disabled();
     }
 }
diff --git a/projects/cashmere/src/lib/sass/radio-button.scss b/projects/cashmere/src/lib/sass/radio-button.scss
new file mode 100644
index 000000000..db4500864
--- /dev/null
+++ b/projects/cashmere/src/lib/sass/radio-button.scss
@@ -0,0 +1,80 @@
+@import './colors';
+
+@mixin hc-radio-container() {
+    cursor: pointer;
+    display: block;
+    line-height: 1.5;
+    margin: 7px 0;
+    padding-left: 35px;
+    position: relative;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+@mixin hc-radio-container-disabled() {
+    color: $gray-300;
+    cursor: not-allowed;
+}
+
+@mixin hc-radio-overlay() {
+    background-color: $white;
+    border: 2px solid $gray-300;
+    border-radius: 50%;
+    height: 22px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 22px;
+
+    &:after {
+        background: $white;
+        border-radius: 50%;
+        content: '';
+        display: none;
+        height: 8px;
+        left: 5px;
+        position: absolute;
+        top: 5px;
+        width: 8px;
+    }
+}
+
+@mixin hc-radio-overlay-hover() {
+    border-color: $primary-brand;    
+}
+
+@mixin hc-radio-overlay-checked() {
+    background-color: $primary-brand;
+    border-color: $primary-brand;
+
+    &:after {
+        display: block;
+    }
+}
+
+@mixin hc-radio-overlay-disabled {
+    background-color: $gray-200;
+    border-color: $gray-300;
+    cursor: not-allowed;
+
+    &:after {
+        background: $gray-200;
+    }
+}
+
+@mixin hc-radio-overlay-checked-disabled() {
+    background-color: $gray-200;
+    border-color: $gray-300;
+}
+
+@mixin hc-radio-input() {
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+}
+
+@mixin hc-radio-input-disabled() {
+    cursor: not-allowed;
+}

From 3139cb3ffc522a7e4a528aac205c4201ddcf4848 Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Fri, 27 Sep 2019 20:35:19 -0600
Subject: [PATCH 04/14] fix(modal): click drag outside modal

prevents a click drag outside a modal from accidentally closing it

closes #998
---
 projects/cashmere/src/lib/modal/modal-window.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/cashmere/src/lib/modal/modal-window.component.ts b/projects/cashmere/src/lib/modal/modal-window.component.ts
index c96e54eef..9c59fadb4 100644
--- a/projects/cashmere/src/lib/modal/modal-window.component.ts
+++ b/projects/cashmere/src/lib/modal/modal-window.component.ts
@@ -34,7 +34,7 @@ export class ModalWindowComponent {
         return state;
     }
 
-    @HostListener('click', ['$event'])
+    @HostListener('mousedown', ['$event'])
     _overlayClick(event: any) {
         let modalContentNotPresent = true;
         let path = this._eventPath(event);

From 86e4aad9f14590b58167810bb1a5d970a3dbd901 Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Fri, 27 Sep 2019 21:42:18 -0600
Subject: [PATCH 05/14] fix(radio): match margins to checkbox

adjusts the spacing between radio buttons to match checkboxes

closes #955
---
 projects/cashmere/src/lib/sass/checkbox.scss     | 2 +-
 projects/cashmere/src/lib/sass/radio-button.scss | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/cashmere/src/lib/sass/checkbox.scss b/projects/cashmere/src/lib/sass/checkbox.scss
index ae0ca4c45..90b8a1a05 100644
--- a/projects/cashmere/src/lib/sass/checkbox.scss
+++ b/projects/cashmere/src/lib/sass/checkbox.scss
@@ -3,7 +3,6 @@
 @mixin hc-checkbox-container() {
     overflow: hidden;
     display: flex;
-    padding: 3px 0;
 }
 
 @mixin hc-checkbox-content() {
@@ -27,6 +26,7 @@
 
 @mixin hc-checkbox-label() {
     padding: 4px 0 4px 12px;
+    line-height: 1.5;
 }
 
 @mixin hc-checkbox-overlay() {
diff --git a/projects/cashmere/src/lib/sass/radio-button.scss b/projects/cashmere/src/lib/sass/radio-button.scss
index db4500864..2a6c89e8c 100644
--- a/projects/cashmere/src/lib/sass/radio-button.scss
+++ b/projects/cashmere/src/lib/sass/radio-button.scss
@@ -4,7 +4,7 @@
     cursor: pointer;
     display: block;
     line-height: 1.5;
-    margin: 7px 0;
+    margin: 4px 0;
     padding-left: 35px;
     position: relative;
     -webkit-user-select: none;
@@ -42,7 +42,7 @@
 }
 
 @mixin hc-radio-overlay-hover() {
-    border-color: $primary-brand;    
+    border-color: $primary-brand;
 }
 
 @mixin hc-radio-overlay-checked() {

From d28fc994623c7d4dd2a80e0f3f384bbd4d8a305f Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Sat, 28 Sep 2019 13:54:59 -0600
Subject: [PATCH 06/14] refactor(popover): menu directives

moves split button menu directives to popover and updates examples

closes #676
---
 .../popover-menu-example.component.html       |  8 +--
 .../cashmere/src/lib/button/button.module.ts  | 29 +--------
 projects/cashmere/src/lib/button/index.ts     |  1 -
 .../split-button/split-button.component.html  |  4 +-
 .../src/lib/navbar/navbar.component.ts        |  2 +-
 .../directives/button-item.directive.ts       |  0
 .../directives/divider.directive.ts           |  0
 .../directives/menu-icon.directive.ts         |  0
 .../directives/menu-sub-text.directive.ts     |  0
 .../directives/menu-text.directive.ts         |  0
 .../src/lib/pop/directives/menu.directive.ts  | 10 ++++
 .../popover-anchor.directive.ts               | 10 ++--
 projects/cashmere/src/lib/pop/index.ts        |  4 +-
 .../src/lib/pop/popover-anchoring.service.ts  |  5 +-
 .../cashmere/src/lib/pop/popover.component.ts |  4 +-
 .../cashmere/src/lib/pop/popover.module.ts    | 60 ++++++++++++-------
 src/app/core/document-items.service.ts        |  2 +-
 17 files changed, 70 insertions(+), 69 deletions(-)
 rename projects/cashmere/src/lib/{button/split-button => pop}/directives/button-item.directive.ts (100%)
 rename projects/cashmere/src/lib/{button/split-button => pop}/directives/divider.directive.ts (100%)
 rename projects/cashmere/src/lib/{button/split-button => pop}/directives/menu-icon.directive.ts (100%)
 rename projects/cashmere/src/lib/{button/split-button => pop}/directives/menu-sub-text.directive.ts (100%)
 rename projects/cashmere/src/lib/{button/split-button => pop}/directives/menu-text.directive.ts (100%)
 create mode 100644 projects/cashmere/src/lib/pop/directives/menu.directive.ts
 rename projects/cashmere/src/lib/pop/{ => directives}/popover-anchor.directive.ts (95%)

diff --git a/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html b/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
index 8667e9f81..193654684 100644
--- a/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
+++ b/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
@@ -1,7 +1,7 @@
 <button hc-button buttonStyle="secondary" [hcPop]="menu">Menu</button>
 
 <hc-pop #menu [autoCloseOnContentClick]="true" [showArrow]="false">
-    <div class="hc-menu-panel">
+    <div hcMenu>
         <button hcButtonItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-snowflake-o"></hc-icon>
             <span hcMenuText>Snowflake</span>
@@ -26,6 +26,6 @@
 </hc-pop>
 
 <p class="hc-font-sm">
-    Note: Must import Cashmere's <code>ButtonModule</code> to use the
-    <code>hcButtonItem</code> & <code>hcMenu*</code> directives.
-</p>
\ No newline at end of file
+    The directives <code>hcMenu</code>, <code>hcButtonItem</code>, <code>hcMenuIcon</code>,
+    <code>hcMenuText</code>, and <code>hcMenuSubText</code> may be used to create menus using the popover component.
+</p>
diff --git a/projects/cashmere/src/lib/button/button.module.ts b/projects/cashmere/src/lib/button/button.module.ts
index 29c68282c..b4eb275ac 100644
--- a/projects/cashmere/src/lib/button/button.module.ts
+++ b/projects/cashmere/src/lib/button/button.module.ts
@@ -2,35 +2,12 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ButtonComponent} from './button.component';
 import {AnchorComponent} from './anchor.component';
-import {ButtonItemDirective} from './split-button/directives/button-item.directive';
-import {MenuIconDirective} from './split-button/directives/menu-icon.directive';
-import {MenuTextDirective} from './split-button/directives/menu-text.directive';
-import {MenuSubTextDirective} from './split-button/directives/menu-sub-text.directive';
-import {DividerDirective} from './split-button/directives/divider.directive';
 import {SplitButtonComponent} from './split-button/split-button.component';
-import { PopModule } from '../pop/popover.module';
+import {PopModule} from '../pop/popover.module';
 
 @NgModule({
     imports: [CommonModule, PopModule],
-    declarations: [
-        AnchorComponent,
-        ButtonComponent,
-        ButtonItemDirective,
-        SplitButtonComponent,
-        MenuIconDirective,
-        MenuTextDirective,
-        MenuSubTextDirective,
-        DividerDirective
-    ],
-    exports: [
-        AnchorComponent,
-        ButtonComponent,
-        ButtonItemDirective,
-        SplitButtonComponent,
-        MenuIconDirective,
-        MenuTextDirective,
-        MenuSubTextDirective,
-        DividerDirective
-    ]
+    declarations: [AnchorComponent, ButtonComponent, SplitButtonComponent],
+    exports: [AnchorComponent, ButtonComponent, SplitButtonComponent]
 })
 export class ButtonModule {}
diff --git a/projects/cashmere/src/lib/button/index.ts b/projects/cashmere/src/lib/button/index.ts
index 603db751b..b74be309e 100644
--- a/projects/cashmere/src/lib/button/index.ts
+++ b/projects/cashmere/src/lib/button/index.ts
@@ -1,5 +1,4 @@
 export {AnchorComponent} from './anchor.component';
 export {ButtonComponent} from './button.component';
 export {ButtonModule} from './button.module';
-export {ButtonItemDirective} from './split-button/directives/button-item.directive';
 export {SplitButtonComponent, SplitButtonClickEvent} from './split-button/split-button.component';
diff --git a/projects/cashmere/src/lib/button/split-button/split-button.component.html b/projects/cashmere/src/lib/button/split-button/split-button.component.html
index 05d67576a..721a2f7d4 100644
--- a/projects/cashmere/src/lib/button/split-button/split-button.component.html
+++ b/projects/cashmere/src/lib/button/split-button/split-button.component.html
@@ -28,7 +28,7 @@
 </span>
 
 <hc-pop #splitMenu [xAlign]="menuPosition" [autoCloseOnContentClick]="autoCloseMenuOnClick" [showArrow]="false">
-    <div class="hc-menu-panel">
+    <div hcMenu>
         <ng-content select="[hcButtonItem]"></ng-content>
     </div>
-</hc-pop>
\ No newline at end of file
+</hc-pop>
diff --git a/projects/cashmere/src/lib/navbar/navbar.component.ts b/projects/cashmere/src/lib/navbar/navbar.component.ts
index 8eeadf74d..f0253750d 100644
--- a/projects/cashmere/src/lib/navbar/navbar.component.ts
+++ b/projects/cashmere/src/lib/navbar/navbar.component.ts
@@ -13,7 +13,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import {forkJoin, Subject} from 'rxjs';
-import {HcPopoverAnchorDirective} from '../pop/popover-anchor.directive';
+import {HcPopoverAnchorDirective} from '../pop/directives/popover-anchor.directive';
 import {MoreItem} from './more-item';
 import {NavbarLinkComponent} from './navbar-link/navbar-link.component';
 import {NavbarMobileMenuComponent} from './navbar-mobile-menu/navbar-mobile-menu.component';
diff --git a/projects/cashmere/src/lib/button/split-button/directives/button-item.directive.ts b/projects/cashmere/src/lib/pop/directives/button-item.directive.ts
similarity index 100%
rename from projects/cashmere/src/lib/button/split-button/directives/button-item.directive.ts
rename to projects/cashmere/src/lib/pop/directives/button-item.directive.ts
diff --git a/projects/cashmere/src/lib/button/split-button/directives/divider.directive.ts b/projects/cashmere/src/lib/pop/directives/divider.directive.ts
similarity index 100%
rename from projects/cashmere/src/lib/button/split-button/directives/divider.directive.ts
rename to projects/cashmere/src/lib/pop/directives/divider.directive.ts
diff --git a/projects/cashmere/src/lib/button/split-button/directives/menu-icon.directive.ts b/projects/cashmere/src/lib/pop/directives/menu-icon.directive.ts
similarity index 100%
rename from projects/cashmere/src/lib/button/split-button/directives/menu-icon.directive.ts
rename to projects/cashmere/src/lib/pop/directives/menu-icon.directive.ts
diff --git a/projects/cashmere/src/lib/button/split-button/directives/menu-sub-text.directive.ts b/projects/cashmere/src/lib/pop/directives/menu-sub-text.directive.ts
similarity index 100%
rename from projects/cashmere/src/lib/button/split-button/directives/menu-sub-text.directive.ts
rename to projects/cashmere/src/lib/pop/directives/menu-sub-text.directive.ts
diff --git a/projects/cashmere/src/lib/button/split-button/directives/menu-text.directive.ts b/projects/cashmere/src/lib/pop/directives/menu-text.directive.ts
similarity index 100%
rename from projects/cashmere/src/lib/button/split-button/directives/menu-text.directive.ts
rename to projects/cashmere/src/lib/pop/directives/menu-text.directive.ts
diff --git a/projects/cashmere/src/lib/pop/directives/menu.directive.ts b/projects/cashmere/src/lib/pop/directives/menu.directive.ts
new file mode 100644
index 000000000..26acab482
--- /dev/null
+++ b/projects/cashmere/src/lib/pop/directives/menu.directive.ts
@@ -0,0 +1,10 @@
+import {Directive, HostBinding} from '@angular/core';
+
+/** The Menu directive provides a standard way of displaying a series of selectable elements in a popover */
+@Directive({
+    selector: '[hcMenu]'
+})
+export class MenuDirective {
+    @HostBinding('class.hc-menu-panel')
+    _hostClass = true;
+}
diff --git a/projects/cashmere/src/lib/pop/popover-anchor.directive.ts b/projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts
similarity index 95%
rename from projects/cashmere/src/lib/pop/popover-anchor.directive.ts
rename to projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts
index 0017e0c8a..d4c445746 100644
--- a/projects/cashmere/src/lib/pop/popover-anchor.directive.ts
+++ b/projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts
@@ -12,11 +12,11 @@ import {
 import { Subject, merge } from 'rxjs';
 import { tap, takeUntil } from 'rxjs/operators';
 
-import { HcPopComponent } from './popover.component';
-import { getInvalidPopoverError, getInvalidTriggerError } from './popover.errors';
-import { HcPopoverAnchoringService } from './popover-anchoring.service';
-import { HcPopoverOpenOptions, HcPopoverTrigger, VALID_TRIGGER } from './types';
-import { PopoverNotification, PopoverNotificationService, NotificationAction } from './notification.service';
+import { HcPopComponent } from '../popover.component';
+import { getInvalidPopoverError, getInvalidTriggerError } from '../popover.errors';
+import { HcPopoverAnchoringService } from '../popover-anchoring.service';
+import { HcPopoverOpenOptions, HcPopoverTrigger, VALID_TRIGGER } from '../types';
+import { PopoverNotification, PopoverNotificationService, NotificationAction } from '../notification.service';
 
 @Directive({
   selector: '[hcPop]',
diff --git a/projects/cashmere/src/lib/pop/index.ts b/projects/cashmere/src/lib/pop/index.ts
index 3f73c8cb8..3a016f633 100644
--- a/projects/cashmere/src/lib/pop/index.ts
+++ b/projects/cashmere/src/lib/pop/index.ts
@@ -1,3 +1,3 @@
-export {HcPopoverAnchorDirective} from './popover-anchor.directive';
+export {HcPopoverAnchorDirective} from './directives/popover-anchor.directive';
 export {PopModule} from './popover.module';
-export {HcPopComponent} from './popover.component';
\ No newline at end of file
+export {HcPopComponent} from './popover.component';
diff --git a/projects/cashmere/src/lib/pop/popover-anchoring.service.ts b/projects/cashmere/src/lib/pop/popover-anchoring.service.ts
index 0ad99f4d4..c479da5e2 100644
--- a/projects/cashmere/src/lib/pop/popover-anchoring.service.ts
+++ b/projects/cashmere/src/lib/pop/popover-anchoring.service.ts
@@ -31,7 +31,7 @@ import {
 } from './types';
 
 import { PopoverNotificationService, NotificationAction } from './notification.service';
-import { HcPopoverAnchorDirective } from './popover-anchor.directive';
+import { HcPopoverAnchorDirective } from './directives/popover-anchor.directive';
 
 /**
  * Configuration provided by the popover for the anchoring service
@@ -349,7 +349,8 @@ export class HcPopoverAnchoringService implements OnDestroy {
       scrollStrategy: this._getScrollStrategyInstance(config.scrollStrategy),
       direction: this._getDirection(),
 
-      panelClass: 'overlay-pointer-events'
+      // disable pointer events for hover popovers to avoid potential flickering issues
+      panelClass: anchor.trigger === "hover" ? 'overlay-pointer-events' : ''
     });
   }
 
diff --git a/projects/cashmere/src/lib/pop/popover.component.ts b/projects/cashmere/src/lib/pop/popover.component.ts
index f4c760d9f..baf04755c 100644
--- a/projects/cashmere/src/lib/pop/popover.component.ts
+++ b/projects/cashmere/src/lib/pop/popover.component.ts
@@ -241,8 +241,8 @@ export class HcPopComponent implements OnInit, OnDestroy {
 
   constructor(
       public _elementRef: ElementRef,
-    private _focusTrapFactory: FocusTrapFactory,
-    @Optional() @Inject(DOCUMENT) private _document: any
+    public _focusTrapFactory: FocusTrapFactory,
+    @Optional() @Inject(DOCUMENT) public _document: any
   ) { }
 
   ngOnInit() {
diff --git a/projects/cashmere/src/lib/pop/popover.module.ts b/projects/cashmere/src/lib/pop/popover.module.ts
index 1d6346e15..591ab1a30 100644
--- a/projects/cashmere/src/lib/pop/popover.module.ts
+++ b/projects/cashmere/src/lib/pop/popover.module.ts
@@ -1,27 +1,41 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { A11yModule } from '@angular/cdk/a11y';
-import { BidiModule } from '@angular/cdk/bidi';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {A11yModule} from '@angular/cdk/a11y';
+import {BidiModule} from '@angular/cdk/bidi';
 
-import { HcPopComponent } from './popover.component';
-import { HcPopoverAnchorDirective } from './popover-anchor.directive';
+import {HcPopComponent} from './popover.component';
+import {HcPopoverAnchorDirective} from './directives/popover-anchor.directive';
+
+import {ButtonItemDirective} from './directives/button-item.directive';
+import {MenuDirective} from './directives/menu.directive';
+import {MenuIconDirective} from './directives/menu-icon.directive';
+import {MenuTextDirective} from './directives/menu-text.directive';
+import {MenuSubTextDirective} from './directives/menu-sub-text.directive';
+import {DividerDirective} from './directives/divider.directive';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    OverlayModule,
-    A11yModule,
-    BidiModule,
-  ],
-  declarations: [
-    HcPopComponent,
-    HcPopoverAnchorDirective,
-  ],
-  exports: [
-    HcPopComponent,
-    HcPopoverAnchorDirective,
-    BidiModule,
-  ]
+    imports: [CommonModule, OverlayModule, A11yModule, BidiModule],
+    declarations: [
+        HcPopComponent,
+        HcPopoverAnchorDirective,
+        MenuDirective,
+        ButtonItemDirective,
+        MenuIconDirective,
+        MenuTextDirective,
+        MenuSubTextDirective,
+        DividerDirective
+    ],
+    exports: [
+        HcPopComponent,
+        HcPopoverAnchorDirective,
+        BidiModule,
+        MenuDirective,
+        ButtonItemDirective,
+        MenuIconDirective,
+        MenuTextDirective,
+        MenuSubTextDirective,
+        DividerDirective
+    ]
 })
-export class PopModule { }
+export class PopModule {}
diff --git a/src/app/core/document-items.service.ts b/src/app/core/document-items.service.ts
index eafc7aebf..406e910f1 100644
--- a/src/app/core/document-items.service.ts
+++ b/src/app/core/document-items.service.ts
@@ -82,7 +82,7 @@ const docs: DocItem[] = [
         id: 'pop',
         name: 'Popover',
         category: 'popups',
-        examples: ['popover-simple', 'popover-overview', 'popover-menu', 'popover-tooltip'],
+        examples: ['popover-simple', 'popover-menu', 'popover-tooltip', 'popover-overview'  ],
         usageDoc: true
     },
     {

From 1a48982496ed8fb17d74d04dc8faede16d47467a Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Sat, 28 Sep 2019 15:39:43 -0600
Subject: [PATCH 07/14] style(navbar): updated menus

updates suggested help menu and converts navbar menus to hcMenu

closes #961
---
 ...navbar-app-switcher-example.component.html | 51 ++++++++++++----
 .../navbar-overview-example.component.html    | 59 +++++++++++--------
 .../popover-menu-example.component.html       |  2 +-
 .../split-button.component.spec.ts            |  2 +-
 .../src/lib/navbar/navbar.component.html      | 13 ++--
 .../src/lib/navbar/navbar.component.scss      |  7 ---
 projects/cashmere/src/lib/navbar/navbar.md    | 50 +++++++++++-----
 .../pop/directives/button-item.directive.ts   |  2 +-
 .../lib/pop/directives/divider.directive.ts   |  2 +-
 .../lib/pop/directives/menu-icon.directive.ts |  2 +-
 .../pop/directives/menu-sub-text.directive.ts |  2 +-
 .../lib/pop/directives/menu-text.directive.ts |  2 +-
 .../src/lib/pop/directives/menu.directive.ts  |  2 +-
 projects/cashmere/src/lib/pop/index.ts        |  6 ++
 projects/cashmere/src/lib/sass/_popover.scss  |  3 +-
 15 files changed, 134 insertions(+), 71 deletions(-)

diff --git a/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html b/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
index 0d9a95af5..8eaf40c97 100644
--- a/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
+++ b/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
@@ -35,20 +35,45 @@
     </hc-navbar-mobile-menu>
 </hc-navbar>
 
-<hc-pop #appSwitcher><hc-app-switcher iconHeight="100"></hc-app-switcher></hc-pop>
+<hc-pop #appSwitcher [showArrow]="false" horizontalAlign="end">
+    <hc-app-switcher iconHeight="50"></hc-app-switcher>
+</hc-pop>
 
-<hc-pop #options>
-    <ul class="list-options">
-        <li><a href="" target="_blank">Help Topics</a></li>
-        <li><a href="" target="_blank">Release Notes</a></li>
-        <li><a href="" target="_blank">About</a></li>
-        <li><a href="https://community.healthcatalyst.com/" target="_blank">Health Catalyst Community</a></li>
-        <li><a href="" target="_blank">Send us your feedback</a></li>
-    </ul>
+<hc-pop #options [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
+            <span hcMenuText>Read the docs</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
+            <span hcMenuText>Request a feature</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
+            <span hcMenuText>Ask the community</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
+            <span hcMenuText>Find out what's new</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
+            <span hcMenuText>Send feedback</span>
+        </button>
+        <div hcButtonItem hcDivider></div>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
+            <span hcMenuText>About</span>
+        </button>
+    </div>
 </hc-pop>
 
-<hc-pop #user>
-    <ul class="list-options">
-        <li><a href="" target="_blank">Logout</a></li>
-    </ul>
+<hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
+            <span hcMenuText>Log out of this App</span>
+        </button>
+    </div>
 </hc-pop>
diff --git a/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html b/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html
index 7c70f9e63..6171d692f 100644
--- a/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html
+++ b/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html
@@ -14,30 +14,41 @@
     </div>
 </hc-navbar>
 
-<hc-pop #options>
-    <ul class="list-options">
-        <li>
-            <a href="" target="_blank">Help Topics</a>
-        </li>
-        <li>
-            <a href="" target="_blank">Release Notes</a>
-        </li>
-        <li>
-            <a href="" target="_blank">About</a>
-        </li>
-        <li>
-            <a href="https://community.healthcatalyst.com/" target="_blank">Health Catalyst Community</a>
-        </li>
-        <li>
-            <a href="" target="_blank">Send us your feedback</a>
-        </li>
-    </ul>
+<hc-pop #options [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
+            <span hcMenuText>Read the docs</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
+            <span hcMenuText>Request a feature</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
+            <span hcMenuText>Ask the community</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
+            <span hcMenuText>Find out what's new</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
+            <span hcMenuText>Send feedback</span>
+        </button>
+        <div hcButtonItem hcDivider></div>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
+            <span hcMenuText>About</span>
+        </button>
+    </div>
 </hc-pop>
 
-<hc-pop #user>
-    <ul class="list-options">
-        <li>
-            <a href="" target="_blank">Logout</a>
-        </li>
-    </ul>
+<hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
+            <span hcMenuText>Log out of this App</span>
+        </button>
+    </div>
 </hc-pop>
diff --git a/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html b/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
index 193654684..593cd736a 100644
--- a/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
+++ b/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
@@ -24,7 +24,7 @@
         </button>
     </div>
 </hc-pop>
-
+<br><br>
 <p class="hc-font-sm">
     The directives <code>hcMenu</code>, <code>hcButtonItem</code>, <code>hcMenuIcon</code>,
     <code>hcMenuText</code>, and <code>hcMenuSubText</code> may be used to create menus using the popover component.
diff --git a/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts b/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts
index f24d5f235..52481cbaa 100644
--- a/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts
+++ b/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts
@@ -6,7 +6,7 @@ import {SplitButtonComponent} from './split-button.component';
 import {ButtonModule} from '../button.module';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {ButtonItemDirective} from './directives/button-item.directive';
+import {ButtonItemDirective} from '../../pop/directives/button-item.directive';
 
 describe('SplitButtonComponent', () => {
     let fixture: ComponentFixture<any>;
diff --git a/projects/cashmere/src/lib/navbar/navbar.component.html b/projects/cashmere/src/lib/navbar/navbar.component.html
index 3ee21ab51..7ff22cb46 100644
--- a/projects/cashmere/src/lib/navbar/navbar.component.html
+++ b/projects/cashmere/src/lib/navbar/navbar.component.html
@@ -27,8 +27,13 @@
     <ng-content select="hc-navbar-mobile-menu"></ng-content>
 </div>
 
-<hc-pop #navbarMore class="more-popover">
-    <ul class="list-options">
-        <li *ngFor="let item of _moreList"><a routerLinkActive="active" [routerLink]="item.uri" (click)="_moreClick()">{{item.name}}</a></li>
-    </ul>
+<hc-pop #navbarMore [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <ng-container *ngFor="let item of _moreList; let i = index">
+            <button hcButtonItem routerLinkActive="active" [routerLink]="item.uri" (click)="_moreClick()">
+                <span hcMenuText>{{item.name}}</span>
+            </button>
+            <div *ngIf="i != _moreList.length - 1" hcButtonItem hcDivider></div>
+        </ng-container>
+    </div>
 </hc-pop>
diff --git a/projects/cashmere/src/lib/navbar/navbar.component.scss b/projects/cashmere/src/lib/navbar/navbar.component.scss
index 0b73df36e..22a60cfc1 100644
--- a/projects/cashmere/src/lib/navbar/navbar.component.scss
+++ b/projects/cashmere/src/lib/navbar/navbar.component.scss
@@ -47,10 +47,3 @@
         @include hc-navbar-mobile-menu();
     }
 }
-
-.more-popover a {
-    &.active {
-        color: $text;
-        cursor: default;
-    }
-}
diff --git a/projects/cashmere/src/lib/navbar/navbar.md b/projects/cashmere/src/lib/navbar/navbar.md
index 326a07daa..a7d1f2cb6 100644
--- a/projects/cashmere/src/lib/navbar/navbar.md
+++ b/projects/cashmere/src/lib/navbar/navbar.md
@@ -14,21 +14,43 @@ All Health Catalyst apps should include a help menu in their navbar. This guide
 
 You may not have all these items available. However, include what you have in this order:
 
--   **Help Topics** (if available—reach out to the Content Team for support)
--   **Release Notes** (if applicable, again reach out to the Content Team for support)
--   **About** (a modal containing app reference information - see the [associated style page](https://cashmere.healthcatalyst.net/styles/about) for guidelines)
--   **Health Catalyst Community** (link to community space specific to the app)
--   **Send us your feedback** (see the [User Feedback Guide](https://cashmere.healthcatalyst.net/components/typeform-survey/usage))
+- [fa-book] **Read the docs** (link to the [docs site](https://www.healthcatalyst.com/docs/) or your help docs repository on HCC)
+- [fa-lightbulb] **Request a feature** (link to your feature request page on Health Catalyst Community)
+- [fa-users] **Ask the community** (link to your Q&A page on Health Catalyst Community)
+- [fa-bullhorn] **Find out what's new** (link to your release notes on Health Catalyst Community)
+- [fa-comments] **Send feedback**  (see the [User Feedback Guide](https://cashmere.healthcatalyst.net/components/typeform-survey/examples))
+- [fa-info-circle] **About** see the [associated style page](https://cashmere.healthcatalyst.net/styles/about) for guidelines)
+
 
 ```html
-<hc-pop #helpMenu>
-    <ul class="list-options">
-        <li><a href="" target="_blank">Help Topics</a></li>
-        <li><a href="" target="_blank">Release Notes</a></li>
-        <li><button (click)="aboutClick($event)">About</button></li>
-        <li><a href="https://community.healthcatalyst.com/" target="_blank">Health Catalyst Community</a></li>
-        <li><button (click)="feedbackClick($event)">Send us your feedback</button></li>
-    </ul>
+<hc-pop #helpMenu [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
+    <div hcMenu>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
+            <span hcMenuText>Read the docs</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
+            <span hcMenuText>Request a feature</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
+            <span hcMenuText>Ask the community</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
+            <span hcMenuText>Find out what's new</span>
+        </button>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
+            <span hcMenuText>Send feedback</span>
+        </button>
+        <div hcButtonItem hcDivider></div>
+        <button hcButtonItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
+            <span hcMenuText>About</span>
+        </button>
+    </div>
 </hc-pop>
 ```
 
@@ -48,7 +70,7 @@ In addition to the help menu, all Heath Catalyst applications should also includ
         <hc-app-switcher-links></hc-app-switcher-links>
     </hc-navbar-mobile-menu>
     ...
-    <hc-pop #appSwitcher><hc-app-switcher iconHeight="100"></hc-app-switcher></hc-pop>
+    <hc-pop #appSwitcher><hc-app-switcher iconHeight="50"></hc-app-switcher></hc-pop>
 </hc-navbar>
 ```
 
diff --git a/projects/cashmere/src/lib/pop/directives/button-item.directive.ts b/projects/cashmere/src/lib/pop/directives/button-item.directive.ts
index 69dee7112..0656a0c0e 100644
--- a/projects/cashmere/src/lib/pop/directives/button-item.directive.ts
+++ b/projects/cashmere/src/lib/pop/directives/button-item.directive.ts
@@ -1,6 +1,6 @@
 import {Directive, HostBinding} from '@angular/core';
 
-/** Secondary button menu item */
+/** Use `hcButtonItem` for a secondary button menu item. */
 @Directive({
     selector: '[hcButtonItem]'
 })
diff --git a/projects/cashmere/src/lib/pop/directives/divider.directive.ts b/projects/cashmere/src/lib/pop/directives/divider.directive.ts
index e8633fe5b..3f018dd55 100644
--- a/projects/cashmere/src/lib/pop/directives/divider.directive.ts
+++ b/projects/cashmere/src/lib/pop/directives/divider.directive.ts
@@ -1,6 +1,6 @@
 import {Directive, HostBinding} from '@angular/core';
 
-/** Adds a class to the host applying simple divider styles. */
+/** Use `hcDivider` for a horizontal divider in a menu. */
 @Directive({
     selector: '[hcDivider]'
 })
diff --git a/projects/cashmere/src/lib/pop/directives/menu-icon.directive.ts b/projects/cashmere/src/lib/pop/directives/menu-icon.directive.ts
index 01348047d..d5a37f53e 100644
--- a/projects/cashmere/src/lib/pop/directives/menu-icon.directive.ts
+++ b/projects/cashmere/src/lib/pop/directives/menu-icon.directive.ts
@@ -1,6 +1,6 @@
 import {Directive, HostBinding} from '@angular/core';
 
-/** Prefixes an icon to the beginning of a button inside of an split button menu. */
+/** Use `hcMenuIcon` to prefix an icon to the beginning of a button inside of a menu. */
 @Directive({
     selector: '[hcMenuIcon]'
 })
diff --git a/projects/cashmere/src/lib/pop/directives/menu-sub-text.directive.ts b/projects/cashmere/src/lib/pop/directives/menu-sub-text.directive.ts
index 870a92753..73ee440d1 100644
--- a/projects/cashmere/src/lib/pop/directives/menu-sub-text.directive.ts
+++ b/projects/cashmere/src/lib/pop/directives/menu-sub-text.directive.ts
@@ -1,6 +1,6 @@
 import {Directive, HostBinding} from '@angular/core';
 
-/** Styles subtext for a button inside of an split button menu. */
+/** Use `hcMenuSubText` for right-aligned subtext of a button inside of a menu. Often used for keyboard shortcuts. */
 @Directive({
     selector: '[hcMenuSubText]'
 })
diff --git a/projects/cashmere/src/lib/pop/directives/menu-text.directive.ts b/projects/cashmere/src/lib/pop/directives/menu-text.directive.ts
index ac3d3afb6..f11deacf7 100644
--- a/projects/cashmere/src/lib/pop/directives/menu-text.directive.ts
+++ b/projects/cashmere/src/lib/pop/directives/menu-text.directive.ts
@@ -1,6 +1,6 @@
 import {Directive, HostBinding} from '@angular/core';
 
-/** Applies class to properly style main button text inside of an split button menu. */
+/** Use `hcMenuText` for main button text inside of a menu. */
 @Directive({
     selector: '[hcMenuText]'
 })
diff --git a/projects/cashmere/src/lib/pop/directives/menu.directive.ts b/projects/cashmere/src/lib/pop/directives/menu.directive.ts
index 26acab482..9c0d6dc70 100644
--- a/projects/cashmere/src/lib/pop/directives/menu.directive.ts
+++ b/projects/cashmere/src/lib/pop/directives/menu.directive.ts
@@ -1,6 +1,6 @@
 import {Directive, HostBinding} from '@angular/core';
 
-/** The Menu directive provides a standard way of displaying a series of selectable elements in a popover */
+/** The `hcMenu` directive provides a standard way of displaying a series of selectable elements in a popover. */
 @Directive({
     selector: '[hcMenu]'
 })
diff --git a/projects/cashmere/src/lib/pop/index.ts b/projects/cashmere/src/lib/pop/index.ts
index 3a016f633..a651fd73c 100644
--- a/projects/cashmere/src/lib/pop/index.ts
+++ b/projects/cashmere/src/lib/pop/index.ts
@@ -1,3 +1,9 @@
 export {HcPopoverAnchorDirective} from './directives/popover-anchor.directive';
 export {PopModule} from './popover.module';
 export {HcPopComponent} from './popover.component';
+export {MenuDirective} from './directives/menu.directive';
+export {ButtonItemDirective} from './directives/button-item.directive';
+export {MenuIconDirective} from './directives/menu-icon.directive';
+export {MenuTextDirective} from './directives/menu-text.directive';
+export {MenuSubTextDirective} from './directives/menu-sub-text.directive';
+export {DividerDirective} from './directives/divider.directive';
diff --git a/projects/cashmere/src/lib/sass/_popover.scss b/projects/cashmere/src/lib/sass/_popover.scss
index 93aa2979a..d720673ef 100644
--- a/projects/cashmere/src/lib/sass/_popover.scss
+++ b/projects/cashmere/src/lib/sass/_popover.scss
@@ -1,3 +1,4 @@
+/* DEPRECATED - for Cashmere styled menus, use the collection of hcMenu directives on hcPop */
 .hc-pop-container ul.list-options {
     padding-left: 0;
     margin: 0;
@@ -25,4 +26,4 @@
         cursor: pointer;
         font-size: inherit;
     }
-}
\ No newline at end of file
+}

From d4e62820850710592d802af3ca7f214e59e40c46 Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Sat, 28 Sep 2019 15:48:37 -0600
Subject: [PATCH 08/14] refactor(pop): revert constructor

revert changes made to constructor
---
 projects/cashmere/src/lib/pop/popover.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/cashmere/src/lib/pop/popover.component.ts b/projects/cashmere/src/lib/pop/popover.component.ts
index baf04755c..f4c760d9f 100644
--- a/projects/cashmere/src/lib/pop/popover.component.ts
+++ b/projects/cashmere/src/lib/pop/popover.component.ts
@@ -241,8 +241,8 @@ export class HcPopComponent implements OnInit, OnDestroy {
 
   constructor(
       public _elementRef: ElementRef,
-    public _focusTrapFactory: FocusTrapFactory,
-    @Optional() @Inject(DOCUMENT) public _document: any
+    private _focusTrapFactory: FocusTrapFactory,
+    @Optional() @Inject(DOCUMENT) private _document: any
   ) { }
 
   ngOnInit() {

From 73f388d599cc0c88b92523b52aeb61c5cb78f733 Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Thu, 3 Oct 2019 21:05:49 -0600
Subject: [PATCH 09/14] fix(pagination): initial value of pageSize

stops initial value of pageSize from being overwritten to the default

closes #776
---
 .../pagination-simple/pagination-simple-example.component.ts  | 4 ++--
 projects/cashmere/src/lib/pagination/base-pagination.ts       | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/cashmere-examples/src/lib/pagination-simple/pagination-simple-example.component.ts b/projects/cashmere-examples/src/lib/pagination-simple/pagination-simple-example.component.ts
index dec1bb1e3..1a78c1f62 100644
--- a/projects/cashmere-examples/src/lib/pagination-simple/pagination-simple-example.component.ts
+++ b/projects/cashmere-examples/src/lib/pagination-simple/pagination-simple-example.component.ts
@@ -8,8 +8,8 @@ import {Component} from '@angular/core';
     templateUrl: 'pagination-simple-example.component.html'
 })
 export class PaginationSimpleExampleComponent {
-    _pageNumber: number = 15;
-    pageSize: number = 20;
+    _pageNumber: number = 8;
+    pageSize: number = 100;
     totalItems: number = 1000;
 
     get pageNumber() {
diff --git a/projects/cashmere/src/lib/pagination/base-pagination.ts b/projects/cashmere/src/lib/pagination/base-pagination.ts
index 0d9682028..45ec6a0e0 100644
--- a/projects/cashmere/src/lib/pagination/base-pagination.ts
+++ b/projects/cashmere/src/lib/pagination/base-pagination.ts
@@ -52,6 +52,7 @@ export class BasePaginationComponent extends Initializable implements OnInit {
     set pageSize(value: number) {
         this._pageSize = coerceNumberProperty(value);
         this._pageSizeUpdated();
+        this._emitPageEvent(this.pageNumber);
     }
     private _pageSize: number = BasePaginationComponent._DEFAULT_PAGE_SIZE;
 

From cf36a5901a467de296adca821b40bc277e12b996 Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Fri, 4 Oct 2019 15:12:25 -0600
Subject: [PATCH 10/14] fix(pagination): corrected emitters

corrects behavior of pageNumberChange and pageSizeChange
---
 projects/cashmere/src/lib/pagination/base-pagination.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/projects/cashmere/src/lib/pagination/base-pagination.ts b/projects/cashmere/src/lib/pagination/base-pagination.ts
index 45ec6a0e0..4839f6914 100644
--- a/projects/cashmere/src/lib/pagination/base-pagination.ts
+++ b/projects/cashmere/src/lib/pagination/base-pagination.ts
@@ -40,6 +40,7 @@ export class BasePaginationComponent extends Initializable implements OnInit {
         if (sanitizedValue !== value) {
             setTimeout(() => (this.pageNumber = sanitizedValue));
         } else {
+            this.pageNumberChange.emit(this.pageNumber);
             this._emitPageEvent(prevPageNumber);
         }
     }
@@ -52,6 +53,7 @@ export class BasePaginationComponent extends Initializable implements OnInit {
     set pageSize(value: number) {
         this._pageSize = coerceNumberProperty(value);
         this._pageSizeUpdated();
+        this.pageSizeChange.emit(this.pageSize);
         this._emitPageEvent(this.pageNumber);
     }
     private _pageSize: number = BasePaginationComponent._DEFAULT_PAGE_SIZE;
@@ -60,10 +62,12 @@ export class BasePaginationComponent extends Initializable implements OnInit {
     @Output()
     readonly page: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
 
+    /** Emits the new page number when the page number changes. */
     @Output()
-    readonly pageNumberChange: Observable<number> = this.page.pipe(map(e => e.pageNumber));
+    readonly pageNumberChange: EventEmitter<number> = new EventEmitter<number>();
+    /** Emits the new page size when the page size changes. */
     @Output()
-    readonly pageSizeChange: Observable<number> = this.page.pipe(map(e => e.pageSize));
+    readonly pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
 
     ngOnInit() {
         this._markInitialized();

From 0bef04fb8b406e914d59bd0b05e00cf8376d5d05 Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Mon, 7 Oct 2019 11:39:41 -0600
Subject: [PATCH 11/14] refactor(popover): button-item to menu-item

converts hcButtonItem to hcMenuItem in hcMenu for consistency
---
 .../navbar-app-switcher-example.component.html   | 16 ++++++++--------
 .../navbar-overview-example.component.html       | 16 ++++++++--------
 .../popover-menu-example.component.html          | 14 +++++++-------
 .../cashmere/src/lib/button/button.module.ts     |  2 +-
 .../split-button/split-button.component.spec.ts  |  4 ++--
 .../src/lib/navbar/navbar.component.html         |  4 ++--
 projects/cashmere/src/lib/navbar/navbar.md       | 14 +++++++-------
 .../lib/pop/directives/button-item.directive.ts  | 10 ----------
 .../lib/pop/directives/menu-item.directive.ts    | 10 ++++++++++
 projects/cashmere/src/lib/pop/index.ts           |  2 +-
 .../cashmere/src/lib/pop/popover.component.ts    |  3 ++-
 projects/cashmere/src/lib/pop/popover.module.ts  |  6 +++---
 12 files changed, 51 insertions(+), 50 deletions(-)
 delete mode 100644 projects/cashmere/src/lib/pop/directives/button-item.directive.ts
 create mode 100644 projects/cashmere/src/lib/pop/directives/menu-item.directive.ts

diff --git a/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html b/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
index 8eaf40c97..d776d0889 100644
--- a/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
+++ b/projects/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
@@ -41,28 +41,28 @@
 
 <hc-pop #options [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
             <span hcMenuText>Read the docs</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
             <span hcMenuText>Request a feature</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
             <span hcMenuText>Ask the community</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
             <span hcMenuText>Find out what's new</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
             <span hcMenuText>Send feedback</span>
         </button>
-        <div hcButtonItem hcDivider></div>
-        <button hcButtonItem>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
             <span hcMenuText>About</span>
         </button>
@@ -71,7 +71,7 @@
 
 <hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
             <span hcMenuText>Log out of this App</span>
         </button>
diff --git a/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html b/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html
index 6171d692f..62cd11248 100644
--- a/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html
+++ b/projects/cashmere-examples/src/lib/navbar-overview/navbar-overview-example.component.html
@@ -16,28 +16,28 @@
 
 <hc-pop #options [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
             <span hcMenuText>Read the docs</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
             <span hcMenuText>Request a feature</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
             <span hcMenuText>Ask the community</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
             <span hcMenuText>Find out what's new</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
             <span hcMenuText>Send feedback</span>
         </button>
-        <div hcButtonItem hcDivider></div>
-        <button hcButtonItem>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
             <span hcMenuText>About</span>
         </button>
@@ -46,7 +46,7 @@
 
 <hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
             <span hcMenuText>Log out of this App</span>
         </button>
diff --git a/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html b/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
index 593cd736a..883501ed2 100644
--- a/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
+++ b/projects/cashmere-examples/src/lib/popover-menu/popover-menu-example.component.html
@@ -1,23 +1,23 @@
 <button hc-button buttonStyle="secondary" [hcPop]="menu">Menu</button>
 
-<hc-pop #menu [autoCloseOnContentClick]="true" [showArrow]="false">
+<hc-pop #menu [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="start">
     <div hcMenu>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-snowflake-o"></hc-icon>
             <span hcMenuText>Snowflake</span>
             <span hcMenuSubText>Ctrl + S</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-plus"></hc-icon>
             <span hcMenuText>Add a new one</span>
         </button>
-        <div hcButtonItem hcDivider></div>
-        <button hcButtonItem>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-camera-retro"></hc-icon>
             <span hcMenuText>Hip Photo</span>
             <span hcMenuSubText>Ctrl + P</span>
         </button>
-        <button hcButtonItem disabled>
+        <button hcMenuItem disabled>
             <span hcMenuIcon></span>
             <span hcMenuText>Menu item 3</span>
             <span hcMenuSubText>I'm disabled</span>
@@ -26,6 +26,6 @@
 </hc-pop>
 <br><br>
 <p class="hc-font-sm">
-    The directives <code>hcMenu</code>, <code>hcButtonItem</code>, <code>hcMenuIcon</code>,
+    The directives <code>hcMenu</code>, <code>hcMenuItem</code>, <code>hcMenuIcon</code>,
     <code>hcMenuText</code>, and <code>hcMenuSubText</code> may be used to create menus using the popover component.
 </p>
diff --git a/projects/cashmere/src/lib/button/button.module.ts b/projects/cashmere/src/lib/button/button.module.ts
index b4eb275ac..8c1926606 100644
--- a/projects/cashmere/src/lib/button/button.module.ts
+++ b/projects/cashmere/src/lib/button/button.module.ts
@@ -8,6 +8,6 @@ import {PopModule} from '../pop/popover.module';
 @NgModule({
     imports: [CommonModule, PopModule],
     declarations: [AnchorComponent, ButtonComponent, SplitButtonComponent],
-    exports: [AnchorComponent, ButtonComponent, SplitButtonComponent]
+    exports: [AnchorComponent, ButtonComponent, SplitButtonComponent, PopModule]
 })
 export class ButtonModule {}
diff --git a/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts b/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts
index 52481cbaa..2b7918d1b 100644
--- a/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts
+++ b/projects/cashmere/src/lib/button/split-button/split-button.component.spec.ts
@@ -6,7 +6,7 @@ import {SplitButtonComponent} from './split-button.component';
 import {ButtonModule} from '../button.module';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {ButtonItemDirective} from '../../pop/directives/button-item.directive';
+import {MenuItemDirective} from '../../pop/directives/menu-item.directive';
 
 describe('SplitButtonComponent', () => {
     let fixture: ComponentFixture<any>;
@@ -39,7 +39,7 @@ describe('SplitButtonComponent', () => {
             triggerButton.click();
             fixture.detectChanges();
 
-            let buttonItems = fixture.debugElement.queryAll(By.directive(ButtonItemDirective));
+            let buttonItems = fixture.debugElement.queryAll(By.directive(MenuItemDirective));
             buttonItems[0].nativeElement.click();
             fixture.detectChanges();
 
diff --git a/projects/cashmere/src/lib/navbar/navbar.component.html b/projects/cashmere/src/lib/navbar/navbar.component.html
index 7ff22cb46..3f0c13ad9 100644
--- a/projects/cashmere/src/lib/navbar/navbar.component.html
+++ b/projects/cashmere/src/lib/navbar/navbar.component.html
@@ -30,10 +30,10 @@
 <hc-pop #navbarMore [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
         <ng-container *ngFor="let item of _moreList; let i = index">
-            <button hcButtonItem routerLinkActive="active" [routerLink]="item.uri" (click)="_moreClick()">
+            <button hcMenuItem routerLinkActive="active" [routerLink]="item.uri" (click)="_moreClick()">
                 <span hcMenuText>{{item.name}}</span>
             </button>
-            <div *ngIf="i != _moreList.length - 1" hcButtonItem hcDivider></div>
+            <div *ngIf="i != _moreList.length - 1" hcMenuItem hcDivider></div>
         </ng-container>
     </div>
 </hc-pop>
diff --git a/projects/cashmere/src/lib/navbar/navbar.md b/projects/cashmere/src/lib/navbar/navbar.md
index a7d1f2cb6..994e3b2cb 100644
--- a/projects/cashmere/src/lib/navbar/navbar.md
+++ b/projects/cashmere/src/lib/navbar/navbar.md
@@ -25,28 +25,28 @@ You may not have all these items available. However, include what you have in th
 ```html
 <hc-pop #helpMenu [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-book"></hc-icon>
             <span hcMenuText>Read the docs</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-lightbulb-o"></hc-icon>
             <span hcMenuText>Request a feature</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-users"></hc-icon>
             <span hcMenuText>Ask the community</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-bullhorn"></hc-icon>
             <span hcMenuText>Find out what's new</span>
         </button>
-        <button hcButtonItem>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-comments"></hc-icon>
             <span hcMenuText>Send feedback</span>
         </button>
-        <div hcButtonItem hcDivider></div>
-        <button hcButtonItem>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-info-circle"></hc-icon>
             <span hcMenuText>About</span>
         </button>
diff --git a/projects/cashmere/src/lib/pop/directives/button-item.directive.ts b/projects/cashmere/src/lib/pop/directives/button-item.directive.ts
deleted file mode 100644
index 0656a0c0e..000000000
--- a/projects/cashmere/src/lib/pop/directives/button-item.directive.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {Directive, HostBinding} from '@angular/core';
-
-/** Use `hcButtonItem` for a secondary button menu item. */
-@Directive({
-    selector: '[hcButtonItem]'
-})
-export class ButtonItemDirective {
-    @HostBinding('class.hc-menu-item')
-    _hostClass = true;
-}
diff --git a/projects/cashmere/src/lib/pop/directives/menu-item.directive.ts b/projects/cashmere/src/lib/pop/directives/menu-item.directive.ts
new file mode 100644
index 000000000..f15db3f7c
--- /dev/null
+++ b/projects/cashmere/src/lib/pop/directives/menu-item.directive.ts
@@ -0,0 +1,10 @@
+import {Directive, HostBinding} from '@angular/core';
+
+/** Use `hcMenuItem` for a selectable item in an hcMenu. */
+@Directive({
+    selector: '[hcMenuItem], [hcButtonItem]'
+})
+export class MenuItemDirective {
+    @HostBinding('class.hc-menu-item')
+    _hostClass = true;
+}
diff --git a/projects/cashmere/src/lib/pop/index.ts b/projects/cashmere/src/lib/pop/index.ts
index a651fd73c..63c3e573a 100644
--- a/projects/cashmere/src/lib/pop/index.ts
+++ b/projects/cashmere/src/lib/pop/index.ts
@@ -2,7 +2,7 @@ export {HcPopoverAnchorDirective} from './directives/popover-anchor.directive';
 export {PopModule} from './popover.module';
 export {HcPopComponent} from './popover.component';
 export {MenuDirective} from './directives/menu.directive';
-export {ButtonItemDirective} from './directives/button-item.directive';
+export {MenuItemDirective} from './directives/menu-item.directive';
 export {MenuIconDirective} from './directives/menu-icon.directive';
 export {MenuTextDirective} from './directives/menu-text.directive';
 export {MenuSubTextDirective} from './directives/menu-sub-text.directive';
diff --git a/projects/cashmere/src/lib/pop/popover.component.ts b/projects/cashmere/src/lib/pop/popover.component.ts
index f4c760d9f..ea9291e61 100644
--- a/projects/cashmere/src/lib/pop/popover.component.ts
+++ b/projects/cashmere/src/lib/pop/popover.component.ts
@@ -58,7 +58,8 @@ export class HcPopComponent implements OnInit, OnDestroy {
   /** Whether or not to show a connection arrow when possible. *Defaults to `true`.* */
   @Input() showArrow = true;
 
-  /** Alignment of the popover on the horizontal axis. *Defaults to `"center"`.* */
+  /** Alignment of the popover on the horizontal axis. Can be `before`, `start`, `center`, `end`, or `after`.
+   * *Defaults to `center`.* */
   @Input()
   get horizontalAlign() { return this._horizontalAlign; }
   set horizontalAlign(val: HcPopoverHorizontalAlign) {
diff --git a/projects/cashmere/src/lib/pop/popover.module.ts b/projects/cashmere/src/lib/pop/popover.module.ts
index 591ab1a30..1a5103190 100644
--- a/projects/cashmere/src/lib/pop/popover.module.ts
+++ b/projects/cashmere/src/lib/pop/popover.module.ts
@@ -7,7 +7,7 @@ import {BidiModule} from '@angular/cdk/bidi';
 import {HcPopComponent} from './popover.component';
 import {HcPopoverAnchorDirective} from './directives/popover-anchor.directive';
 
-import {ButtonItemDirective} from './directives/button-item.directive';
+import {MenuItemDirective} from './directives/menu-item.directive';
 import {MenuDirective} from './directives/menu.directive';
 import {MenuIconDirective} from './directives/menu-icon.directive';
 import {MenuTextDirective} from './directives/menu-text.directive';
@@ -20,7 +20,7 @@ import {DividerDirective} from './directives/divider.directive';
         HcPopComponent,
         HcPopoverAnchorDirective,
         MenuDirective,
-        ButtonItemDirective,
+        MenuItemDirective,
         MenuIconDirective,
         MenuTextDirective,
         MenuSubTextDirective,
@@ -31,7 +31,7 @@ import {DividerDirective} from './directives/divider.directive';
         HcPopoverAnchorDirective,
         BidiModule,
         MenuDirective,
-        ButtonItemDirective,
+        MenuItemDirective,
         MenuIconDirective,
         MenuTextDirective,
         MenuSubTextDirective,

From 911c62cb7259d7e54c63f219b0e46cbd717a894b Mon Sep 17 00:00:00 2001
From: PJ Heebner <philip.heebner@healthcatalyst.com>
Date: Mon, 7 Oct 2019 13:40:56 -0500
Subject: [PATCH 12/14] feat(tab): remove tabs service

Remove dependency on TabsService
---
 .../src/lib/tabs/tab-set/tab-set.component.ts | 35 +++++++------------
 .../src/lib/tabs/tab/tab.component.html       | 16 +++++----
 .../src/lib/tabs/tab/tab.component.ts         | 11 ++----
 .../cashmere/src/lib/tabs/tabs.service.ts     |  6 ----
 4 files changed, 24 insertions(+), 44 deletions(-)
 delete mode 100644 projects/cashmere/src/lib/tabs/tabs.service.ts

diff --git a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts
index 1d699d3bd..13c06cc7c 100644
--- a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts
+++ b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts
@@ -1,8 +1,7 @@
 import {AfterContentInit, Component, ContentChildren, Input, QueryList, Output } from '@angular/core';
-import { EventEmitter, TemplateRef, Self, OnInit } from '@angular/core';
+import { EventEmitter, TemplateRef } from '@angular/core';
 import {TabComponent} from '../tab/tab.component';
 import {ActivatedRoute, Router} from '@angular/router';
-import { TabsService } from '../tabs.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -34,10 +33,9 @@ export function invalidDefaultTab(tabVal: string) {
 @Component({
     selector: `hc-tab-set`,
     templateUrl: './tab-set.component.html',
-    styleUrls: ['./tab-set.component.scss'],
-    providers: [TabsService]
+    styleUrls: ['./tab-set.component.scss']
 })
-export class TabSetComponent implements OnInit, AfterContentInit {
+export class TabSetComponent implements AfterContentInit {
     _routerEnabled: boolean = false;
     private _direction: string = 'vertical';
     private _defaultTab: string = '0';
@@ -82,13 +80,14 @@ export class TabSetComponent implements OnInit, AfterContentInit {
         }
     }
 
-    constructor(private router: Router, private route: ActivatedRoute, @Self() private _tabsService: TabsService) {}
+    constructor(private router: Router, private route: ActivatedRoute) {}
 
-    ngOnInit(): void {
-        this._tabsService.direction = this.direction;
+    ngAfterContentInit(): void {
+        this.setUpTabs();
+        this._tabs.changes.subscribe(() => this.setUpTabs());
     }
 
-    ngAfterContentInit(): void {
+    private setUpTabs(): void {
         if (this._tabs.length === 0) {
             throw tabComponentMissing();
         }
@@ -97,19 +96,14 @@ export class TabSetComponent implements OnInit, AfterContentInit {
             this.defaultToFirstTab();
         }
         this.checkForRouterUse();
-
-        this._tabs.changes.subscribe(() => {
-            if (this.defaultTab !== 'none') {
-                this.defaultToFirstTab();
-            }
-            this.checkForRouterUse();
-
-            this.subscribeToTabClicks();
-        });
-
+        this.setTabDirection();
         this.subscribeToTabClicks();
     }
 
+    private setTabDirection(): void {
+        setTimeout(() => this._tabs.forEach(t => t._direction = this.direction));
+    }
+
     private subscribeToTabClicks(): void {
         this._stopTabSubscriptionSubject.next();
         this._tabs.forEach(t => t.tabClick
@@ -168,9 +162,6 @@ export class TabSetComponent implements OnInit, AfterContentInit {
     }
 
     private checkForRouterUse() {
-        if (this._tabs.length === 0) {
-            return;
-        }
         const countUsingRouter = this._tabs.filter(tab => tab.routerLink !== undefined).length;
         if (countUsingRouter > 0 && countUsingRouter < this._tabs.length) {
             const tabsMissingRouterLink = this._tabs.filter(tab => tab.routerLink === undefined);
diff --git a/projects/cashmere/src/lib/tabs/tab/tab.component.html b/projects/cashmere/src/lib/tabs/tab/tab.component.html
index b774ad903..521cb9cf5 100644
--- a/projects/cashmere/src/lib/tabs/tab/tab.component.html
+++ b/projects/cashmere/src/lib/tabs/tab/tab.component.html
@@ -1,10 +1,12 @@
-<a *ngIf="routerLink; else tabWithoutRouting" class="hc-tab-{{_direction}} hc-text-ellipsis"
-    [routerLink]="routerLink"
-    routerLinkActive="active"
-    (click)="tabClick.emit()">
-    <ng-container *ngIf="_htmlTitle" [ngTemplateOutlet]="_htmlTitle.tabTitle"></ng-container>
-    {{tabTitle}}
-</a>
+<ng-container *ngIf="_direction">
+    <a *ngIf="routerLink; else tabWithoutRouting" class="hc-tab-{{_direction}} hc-text-ellipsis"
+        [routerLink]="routerLink"
+        routerLinkActive="active"
+        (click)="tabClick.emit()">
+        <ng-container *ngIf="_htmlTitle" [ngTemplateOutlet]="_htmlTitle.tabTitle"></ng-container>
+        {{tabTitle}}
+    </a>
+</ng-container>
 <ng-template #tabWithoutRouting>
     <a class="hc-tab-{{_direction}} hc-text-ellipsis"
         [class.active]="_active"
diff --git a/projects/cashmere/src/lib/tabs/tab/tab.component.ts b/projects/cashmere/src/lib/tabs/tab/tab.component.ts
index a803f8101..98ba28c61 100644
--- a/projects/cashmere/src/lib/tabs/tab/tab.component.ts
+++ b/projects/cashmere/src/lib/tabs/tab/tab.component.ts
@@ -1,14 +1,13 @@
 import { Component, Input, ContentChildren, QueryList, AfterContentInit, Output } from '@angular/core';
-import { EventEmitter, TemplateRef, ViewChild, OnInit } from '@angular/core';
+import { EventEmitter, TemplateRef, ViewChild } from '@angular/core';
 import { HcTabTitleComponent } from './tab-title.component';
-import { TabsService } from '../tabs.service';
 
 @Component({
     templateUrl: './tab.component.html',
     selector: `hc-tab`,
     styleUrls: ['./tab.component.scss']
 })
-export class TabComponent implements OnInit, AfterContentInit {
+export class TabComponent implements AfterContentInit {
     /** Plain text title of the tab; for HTML support include a `hc-tab-title` element */
     @Input()
     tabTitle: string = '';
@@ -34,15 +33,9 @@ export class TabComponent implements OnInit, AfterContentInit {
     @ContentChildren(HcTabTitleComponent)
     _tabTitle: QueryList<HcTabTitleComponent>;
 
-    ngOnInit(): void {
-        this._direction = this._tabsService.direction;
-    }
-
     ngAfterContentInit() {
         if (this._tabTitle) {
             this._htmlTitle = this._tabTitle.first;
         }
     }
-
-    constructor(private _tabsService: TabsService) {}
 }
diff --git a/projects/cashmere/src/lib/tabs/tabs.service.ts b/projects/cashmere/src/lib/tabs/tabs.service.ts
deleted file mode 100644
index 3930db9f5..000000000
--- a/projects/cashmere/src/lib/tabs/tabs.service.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Injectable } from "@angular/core";
-
-@Injectable()
-export class TabsService {
-    direction: string;
-}
\ No newline at end of file

From 65c0af7e9f1417128e1c1df343d67e85dcb0feef Mon Sep 17 00:00:00 2001
From: PJ Heebner <philip.heebner@healthcatalyst.com>
Date: Mon, 7 Oct 2019 14:27:44 -0500
Subject: [PATCH 13/14] feat(tab): fix tests

Fix tests so that they do not reference TabService
---
 .../lib/tabs/tab-set/tab-set.component.spec.ts    |  8 ++++++--
 .../src/lib/tabs/tab/tab.component.spec.ts        | 15 +--------------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.spec.ts b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.spec.ts
index 85bb8448c..61569f16c 100644
--- a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.spec.ts
+++ b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.spec.ts
@@ -56,8 +56,12 @@ describe('TabSetComponent', () => {
             expect(component.direction).toBe(expectedDirection);
         });
 
-        it('should be set for all children from parent input', () => {
-            component._tabs.forEach(t => expect(t._direction).toBe(expectedDirection));
+        it('should be set for all children from parent input after second change detection cycle', (done: any) => {
+            setTimeout(() => {
+                fixture.detectChanges();
+                component._tabs.forEach(t => expect(t._direction).toBe(expectedDirection));
+                done();
+            });
         });
 
         it('should throw for unsupported direction', () => {
diff --git a/projects/cashmere/src/lib/tabs/tab/tab.component.spec.ts b/projects/cashmere/src/lib/tabs/tab/tab.component.spec.ts
index 1dc86b46e..a5bc3de0c 100644
--- a/projects/cashmere/src/lib/tabs/tab/tab.component.spec.ts
+++ b/projects/cashmere/src/lib/tabs/tab/tab.component.spec.ts
@@ -1,24 +1,20 @@
 import {TabComponent} from './tab.component';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {RouterTestingModule} from '@angular/router/testing';
-import { TabsService } from '../tabs.service';
 
 describe('TabComponent', () => {
 
     let component: TabComponent;
     let fixture: ComponentFixture<TabComponent>;
-    let tabsService: TabsService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [RouterTestingModule],
-            declarations: [TabComponent],
-            providers: [TabsService]
+            declarations: [TabComponent]
         }).compileComponents();
 
         fixture = TestBed.createComponent(TabComponent);
         component = fixture.componentInstance;
-        tabsService = fixture.debugElement.injector.get(TabsService);
 
         fixture.detectChanges();
     }));
@@ -26,13 +22,4 @@ describe('TabComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
-
-    describe('ngOnInit', () => {
-        it('sets direction to value from TabsService', () => {
-            tabsService.direction = 'vertical';
-            component.ngOnInit();
-
-            expect(component._direction).toEqual(tabsService.direction);
-        });
-    });
 });
\ No newline at end of file

From 704b13e54483a055f41484722360fbba6228c0cf Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Mon, 7 Oct 2019 19:21:27 -0600
Subject: [PATCH 14/14] fix(toasts): closing multiple toasts

ensures cleanup functions are called on close with multiple toasts

closes #1018
---
 .../toaster-overview/toaster-overview-example.component.scss  | 1 +
 projects/cashmere/src/lib/toaster/hc-toaster.service.ts       | 4 ----
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-example.component.scss b/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-example.component.scss
index db880f9c0..d4913becf 100644
--- a/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-example.component.scss
+++ b/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-example.component.scss
@@ -33,6 +33,7 @@
 
 .progress-row {
     display: flex;
+    align-items: end;
     width: 100%;
 }
 
diff --git a/projects/cashmere/src/lib/toaster/hc-toaster.service.ts b/projects/cashmere/src/lib/toaster/hc-toaster.service.ts
index 70e0f860f..a96b9deee 100644
--- a/projects/cashmere/src/lib/toaster/hc-toaster.service.ts
+++ b/projects/cashmere/src/lib/toaster/hc-toaster.service.ts
@@ -15,8 +15,6 @@ export type ToastContentType<T> = Type<T> | TemplateRef<any>;
 @Injectable()
 export class HcToasterService {
     _toasts: HcToastRef[] = [];
-    endedToastAnim = new Subject<void>();
-    private get endedToastAnim$(): Observable<void> { return this.endedToastAnim.asObservable(); }
 
     // Inject overlay service
     constructor(private injector: Injector, private _overlay: Overlay) {}
@@ -122,14 +120,12 @@ export class HcToasterService {
                 filter(event => event.phaseName === 'done' && event.toState === 'leave'),
                 take(1)
             )
-            .pipe(takeUntil(this.endedToastAnim$))
             .subscribe(() => {
                 this._removeToastPointer(_toastRef);
                 if (options.toastClosed) {
                     options.toastClosed();
                 }
                 this._updateToastPositions();
-                this.endedToastAnim.next();
                 _toastRef.componentInstance._closeClick.unsubscribe();
             });