Merge pull request #1133 from HealthCatalyst/dev

merge dev -> master
HealthCatalyst · Jan 24, 2020 · fb17196 · fb17196
2 parents 1129cdc + 4958bca
commit fb17196
Show file tree

Hide file tree

Showing 45 changed files with 588 additions and 207 deletions.
diff --git a/...ects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html b/...ects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html
@@ -1,3 +1,5 @@
 <hc-checkbox id="light">Standard Checkbox</hc-checkbox>
 
 <hc-checkbox id="disabled" disabled="true">Disabled Checkbox</hc-checkbox>
+
+<hc-checkbox id="disabled" [checked]="true" disabled="true">Disabled Checkbox (Checked)</hc-checkbox>
diff --git a/projects/cashmere-examples/src/lib/date-range/date-range-example.component.html b/projects/cashmere-examples/src/lib/date-range/date-range-example.component.html
@@ -7,7 +7,7 @@
         popperPlacement="bottom"
         (selectedDateRangeChanged)="updateRange($event)"
         (selectedPresetChanged)="updatePreset($event)"
-        [selectedDate]="range"
+        [selectedDate]="selected"
         [options]="options"
         #pickerOne
     >

diff --git a/projects/cashmere-examples/src/lib/date-range/date-range-example.component.ts b/projects/cashmere-examples/src/lib/date-range/date-range-example.component.ts
@@ -8,6 +8,7 @@ import {DateRangeOptions, PresetItem, DateRange} from '@healthcatalyst/cashmere'
 })
 export class DateRangeExampleComponent implements OnInit {
     range: DateRange = {fromDate: new Date(), toDate: new Date()};
+    selected: number | DateRange = this.range;
     options: DateRangeOptions;
     presets: Array<PresetItem> = [];
     presetSelection: string = 'None';
@@ -36,8 +37,10 @@ export class DateRangeExampleComponent implements OnInit {
     updatePreset(index: number | DateRange) {
         if (typeof index === 'number') {
             this.presetSelection = this.presets[index].presetLabel;
+            this.selected = index;
         } else {
             this.presetSelection = 'None';
+            this.selected = this.range;
         }
     }
 
@@ -73,6 +76,10 @@ export class DateRangeExampleComponent implements OnInit {
                 presetLabel: 'This Month',
                 range: {fromDate: currMonthStart, toDate: currMonthEnd}
             },
+            {
+                presetLabel: '1 Month to End',
+                range: {fromDate: currMonthStart, toDate: currMonthEnd}
+            },
             {
                 presetLabel: 'Last Month',
                 range: {fromDate: lastMonthStart, toDate: lastMonthEnd}

diff --git a/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.html b/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.html
@@ -2,7 +2,7 @@
     <div class="example-date-input">
         <hc-form-field>
             <hc-label>Date:</hc-label>
-            <input hcInput [hcDatepicker]="picker1" [(ngModel)]="date1" placeholder="Select date..." />
+            <input hcInput [hcDatepicker]="picker1" [max]="maxStr" [(ngModel)]="date1" placeholder="Select date..." />
             <hc-datepicker-toggle hcSuffix [for]="picker1"></hc-datepicker-toggle>
             <hc-datepicker #picker1></hc-datepicker>
             <hc-error>Please enter a valid date</hc-error>

diff --git a/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.ts b/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.ts
@@ -10,4 +10,6 @@ export class DatepickerExampleComponent {
     date2 = new Date();
     date3 = new Date("2010-01-01T20:15:00.00");
     hourCycle = false;
+
+    maxStr: string = this.date2.toISOString();
 }
diff --git a/.../cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html b/.../cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.html
@@ -1,4 +1,4 @@
-<hc-navbar appIcon="./assets/CashmereAppLogo.svg" brandIcon="./assets/TriFlame.svg" [homeUri]="undefined" [fixedTop]="false">
+<hc-navbar appIcon="./assets/CashmereAppLogo.svg" [brandIcon]="navIcon" [homeUri]="undefined" [fixedTop]="false">
     <hc-navbar-link [active]="true" uri="undefined" linkText="Home"></hc-navbar-link>
     <hc-navbar-link [active]="false" uri="undefined" linkText="Oncology"></hc-navbar-link>
     <hc-navbar-link [active]="false" uri="undefined" linkText="Surgery"></hc-navbar-link>

diff --git a/...ts/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.ts b/...ts/cashmere-examples/src/lib/navbar-app-switcher/navbar-app-switcher-example.component.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {HcIcon} from '@healthcatalyst/cashmere';
 
 /**
  * @title Navbar app switcher with mobile menu example
@@ -9,4 +10,5 @@ import {Component} from '@angular/core';
 })
 export class NavbarAppSwitcherExampleComponent {
     username = 'Christine K.';
+    navIcon: HcIcon = {fontSet: "hc-icons", fontIcon: "hci-catalyst-logo", fontSize: 37};
 }
diff --git a/.../cashmere-examples/src/lib/pagination-load-more/pagination-load-more-example.component.ts b/.../cashmere-examples/src/lib/pagination-load-more/pagination-load-more-example.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, ViewChild, AfterViewInit} from '@angular/core';
 import {LoadMorePaginationComponent, HcTableDataSource} from '@healthcatalyst/cashmere';
 
 export interface PeriodicElement {
@@ -39,7 +39,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
     templateUrl: 'pagination-load-more-example.component.html',
     styleUrls: ['pagination-load-more-example.component.scss']
 })
-export class PaginationLoadMoreExampleComponent implements OnInit {
+export class PaginationLoadMoreExampleComponent implements AfterViewInit {
     displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
     dataSource: HcTableDataSource<PeriodicElement>;
     get length(): number {
@@ -49,7 +49,7 @@ export class PaginationLoadMoreExampleComponent implements OnInit {
     @ViewChild(LoadMorePaginationComponent)
     loadMoreBtn: LoadMorePaginationComponent;
 
-    ngOnInit(): void {
+    ngAfterViewInit(): void {
         this.dataSource = new HcTableDataSource(ELEMENT_DATA);
         this.dataSource.paginator = this.loadMoreBtn;
     }

diff --git a/...ts/cashmere-examples/src/lib/pagination-standard/pagination-standard-example.component.ts b/...ts/cashmere-examples/src/lib/pagination-standard/pagination-standard-example.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, ViewChild, AfterViewInit} from '@angular/core';
 import {PaginationComponent, HcTableDataSource} from '@healthcatalyst/cashmere';
 
 export interface PeriodicElement {
@@ -39,7 +39,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
     templateUrl: 'pagination-standard-example.component.html',
     styleUrls: ['pagination-standard-example.component.scss']
 })
-export class PaginationStandardExampleComponent implements OnInit {
+export class PaginationStandardExampleComponent implements AfterViewInit {
     displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
     dataSource: HcTableDataSource<PeriodicElement>;
     pageNumber = 1;
@@ -51,7 +51,7 @@ export class PaginationStandardExampleComponent implements OnInit {
     @ViewChild(PaginationComponent)
     paginator: PaginationComponent;
 
-    ngOnInit(): void {
+    ngAfterViewInit(): void {
         this.dataSource = new HcTableDataSource(ELEMENT_DATA);
         this.dataSource.paginator = this.paginator;
     }

diff --git a/projects/cashmere-examples/src/lib/picklist-simple/picklist-simple-example.component.html b/projects/cashmere-examples/src/lib/picklist-simple/picklist-simple-example.component.html
@@ -1,4 +1,4 @@
 <hc-picklist
     [(ngModel)]="mySimpleModel"
-    [simpleOptions]="['North', 'South', 'East', 'West']">
+    [simpleOptions]="['North', 'East', 'South', 'West']">
 </hc-picklist>
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
@@ -2,25 +2,82 @@
 
 <hc-pop #menu [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="start">
     <div hcMenu>
-        <a hcMenuItem href="http://example.com">
-            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-floppy-o "></hc-icon>
+        <a hcMenuItem href="http://example.com" target="_blank">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-floppy-o"></hc-icon>
             <span hcMenuText>Save document</span>
             <span hcMenuSubText>Ctrl + S</span>
         </a>
+        <button hcMenuItem [hcPop]="editmenu">
+            <span hcMenuIcon></span>
+            <span hcMenuText>Edit document</span>
+            <!-- hcMenuItems with a subMenu will automatically add a caret to the right -->
+        </button>
+        <button hcMenuItem [hcPop]="themeMenu">
+            <span hcMenuIcon></span>
+            <span hcMenuText>Page theme</span>
+        </button>
+        <button hcMenuItem disabled>
+            <span hcMenuIcon></span>
+            <span hcMenuText>Disabled Item</span>
+            <span hcMenuSubText>I'm disabled</span>
+        </button>
+        <div hcMenuItem hcDivider></div>
         <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-arrow-circle-down"></hc-icon>
             <span hcMenuText>Press an arrow key</span>
         </button>
-        <div hcMenuItem hcDivider></div>
         <button hcMenuItem>
             <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-keyboard-o"></hc-icon>
             <span hcMenuText>Or the tab key</span>
             <span hcMenuSubText>Ctrl + P</span>
         </button>
-        <button hcMenuItem disabled>
-            <span hcMenuIcon></span>
-            <span hcMenuText>Disabled Item</span>
-            <span hcMenuSubText>I'm disabled</span>
+
+    </div>
+</hc-pop>
+
+<hc-pop #editmenu [autoCloseOnContentClick]="true" [showArrow]="false" [parent]="menu" horizontalAlign="after" verticalAlign="start">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-cut"></hc-icon>
+            <span hcMenuText>Cut</span>
+            <span hcMenuSubText>Ctrl + X</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-copy"></hc-icon>
+            <span hcMenuText>Copy</span>
+            <span hcMenuSubText>Ctrl + C</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-paste"></hc-icon>
+            <span hcMenuText>Paste</span>
+            <span hcMenuSubText>Ctrl + V</span>
+        </button>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem [hcPop]="searchMenu">
+            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-search"></hc-icon>
+            <span hcMenuText>Search</span>
+        </button>
+    </div>
+</hc-pop>
+
+<hc-pop #searchMenu [autoCloseOnContentClick]="true" [showArrow]="false" [parent]="editmenu" horizontalAlign="after" verticalAlign="start">
+    <div hcMenu>
+        <button hcMenuItem>
+            <span hcMenuText>Search this page</span>
+        </button>
+        <button hcMenuItem>
+            <span hcMenuText>Search all pages</span>
+        </button>
+    </div>
+</hc-pop>
+
+<hc-pop #themeMenu [autoCloseOnContentClick]="true" [showArrow]="false" [parent]="menu" horizontalAlign="after" verticalAlign="start">
+    <div hcMenu>
+        <button hcMenuItem>
+            <span hcMenuText>Light mode</span>
+        </button>
+        <button hcMenuItem>
+            <span hcMenuText>Dark mode</span>
         </button>
     </div>
 </hc-pop>

diff --git a/projects/cashmere/src/lib/app-switcher/app-switcher.component.html b/projects/cashmere/src/lib/app-switcher/app-switcher.component.html
@@ -18,7 +18,11 @@ <h4>Applications
                     [title]="appIsMe(app) ? 'Current Application' : app.Description"
                     [attr.href]="linkIfNotMe(app)"
                     target="_blank">
-                        <img class="thumbnail-img" [height]="iconHeight" [src]="app.Icon" [ngStyle]="{'max-width': iconHeight + 'px'}">
+                        <div class="thumbnail-img" [ngStyle]="{
+                            'width': iconHeight + 'px',
+                            'height': iconHeight + 'px',
+                            'background-image': 'url(' + app.Icon + ')' }">
+                        </div>
                         <div class="title">{{app?.FriendlyName | ellipsis:18}}</div>
                 </a>
             </div>

diff --git a/projects/cashmere/src/lib/app-switcher/app-switcher.component.scss b/projects/cashmere/src/lib/app-switcher/app-switcher.component.scss
@@ -40,7 +40,9 @@
                 }
 
                 & > .thumbnail-img {
-                    width: auto;
+                    background-size: cover;
+                    background-position: center;
+                    background-repeat: no-repeat;
                 }
             }
 

diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.scss b/projects/cashmere/src/lib/checkbox/checkbox.component.scss
@@ -35,17 +35,17 @@
         @include hc-checkbox-overlay-hover();
     }
 
-    .hc-checkbox-disabled & {
-        @include hc-checkbox-overlay-disabled();
-    }
-
     .hc-checkbox-indeterminate & {
         @include hc-checkbox-overlay-indeterminate();
     }
 
     input[type='checkbox']:checked + & {
         @include hc-checkbox-overlay-checked();
     }
+
+    .hc-checkbox-disabled input[type=checkbox] + & {
+        @include hc-checkbox-overlay-disabled();
+    }
 }
 
 .hc-form-field-invalid {

diff --git a/projects/cashmere/src/lib/date-range/date-range/date-range.directive.spec.ts b/projects/cashmere/src/lib/date-range/date-range/date-range.directive.spec.ts
@@ -25,7 +25,7 @@ class MockOverlayService {
 })
 class TestComponent {
     options: DateRangeOptions;
-    range: DateRange = {fromDate: new Date(), toDate: new Date()};
+    range: number | DateRange = {fromDate: new Date(), toDate: new Date()};
     constructor() {
         this.options = {
             presets: [
@@ -105,12 +105,9 @@ describe('DateRangeDirective', () => {
         expect(overlay.open).toHaveBeenCalled();
     });
 
-    it('should return the index of the selected preset', () => {
-        const resetRange = {fromDate: new Date(2000, 1, 1), toDate: new Date(2000, 1, 2)};
-        directive.selectedDate = resetRange;
-
+    it('should set the selected preset from an index', () => {
         spyOn(component, 'updatePreset');
-        component.range = resetRange;
+        component.range = 1;
         fixture.detectChanges();
 
         expect(component.updatePreset).toHaveBeenCalledWith(1);

diff --git a/projects/cashmere/src/lib/date-range/date-range/date-range.directive.ts b/projects/cashmere/src/lib/date-range/date-range/date-range.directive.ts
@@ -2,7 +2,7 @@ import {OnInit, Output, EventEmitter, Input, OnDestroy, ElementRef, Directive, H
 import {DatePipe} from '@angular/common';
 import {OverlayRef} from '@angular/cdk/overlay';
 import {CalendarOverlayService} from '../services/calendar-overlay.service';
-import {DateRange, DateRangeOptions, PresetItem} from '../model/model';
+import {DateRange, DateRangeOptions} from '../model/model';
 import {ConfigStoreService} from '../services/config-store.service';
 
 @Directive({
@@ -14,9 +14,9 @@ export class DateRangeDirective implements OnInit, OnDestroy, OnChanges {
     @Output()
     readonly selectedDateRangeChanged: EventEmitter<DateRange> = new EventEmitter<DateRange>();
 
-    /** Selected date range. */
+    /** Sets the selected date range. Accepts either a `DateRange` or a numerical index for preset. */
     @Input()
-    selectedDate: DateRange;
+    selectedDate: number | DateRange;
 
     /** Emits either a numerical index for the selected preset, or a `DateRange` if the selected value is not a preset */
     @Output()
@@ -55,22 +55,12 @@ export class DateRangeDirective implements OnInit, OnDestroy, OnChanges {
             this.configStoreService.updateDateRangeOptions(options);
         }
         if (changes['selectedDate']) {
-            const selectedDate: DateRange = changes['selectedDate'].currentValue;
-            this.configStoreService.updateRange(selectedDate);
+            const selectedDate: number | DateRange = changes['selectedDate'].currentValue;
 
-            if (this.options.presets) {
-                let selectedPreset = -1;
-                for (let i = 0; i < this.options.presets.length; i++) {
-                    let tempRange = this.options.presets[i].range;
-                    if ( tempRange.fromDate && selectedDate.fromDate &&
-                        tempRange.fromDate.toDateString() === selectedDate.fromDate.toDateString() &&
-                        tempRange.toDate && selectedDate.toDate &&
-                        tempRange.toDate.toDateString() === selectedDate.toDate.toDateString()
-                    ) {
-                        selectedPreset = i;
-                    }
-                }
-                this.configStoreService.updatePreset(selectedPreset >= 0 ? selectedPreset : selectedDate);
+            if ( typeof selectedDate === 'number' ) {
+                this.configStoreService.updatePreset(selectedDate);
+            } else {
+                this.configStoreService.updateRange(selectedDate);
             }
         }
     }

diff --git a/projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.html b/projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.html
@@ -32,13 +32,13 @@
     <div class="hc-date-range-calendar-item">
         <div class="hc-date-range-menu">
             <hc-radio-group class="presets" [(ngModel)]="_selectedPreset">
-                <hc-radio-button *ngFor="let p of options.presets; let i = index" [value]="p.range" [id]="'hc-date-range-preset-'+i" (change)="_updateRangeByPreset(p.range)">{{ p.presetLabel }}</hc-radio-button>
+                <hc-radio-button *ngFor="let p of options.presets; let i = index" [value]="i" (change)="_updateRangeByPreset(i)">{{ p.presetLabel }}</hc-radio-button>
             </hc-radio-group>
             <div class="hc-date-range-controls">
                 <button hc-button buttonStyle="link" type="button" (click)="_discardNewDates()">
                     {{ options.cancelLabel }}
                 </button>
-                <button hc-button buttonStyle="primary" type="button" [disabled]="_disabled" (click)="_applyNewDates()">
+                <button hc-button buttonStyle="primary" type="button" [disabled]="!(this._toDate && this._fromDate)" (click)="_applyNewDates()">
                     {{ options.applyLabel }}
                 </button>
             </div>

diff --git a/projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.spec.ts b/projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.spec.ts
@@ -48,14 +48,13 @@ describe('RangeComponent', () => {
     });
 
     it("should select a preset radio if the current dates match that preset's range", () => {
-        let radioDebugElement = fixture.debugElement.query(By.directive(RadioButtonComponent));
-        expect(radioDebugElement.componentInstance.checked).toBe(false);
+        expect(component._selectedPreset).toBeFalsy();
 
         component._updateFromDate(new Date(2010, 1, 1));
         component._updateToDate(new Date(2010, 1, 2));
         fixture.detectChanges();
 
-        expect(radioDebugElement.componentInstance.checked).toBe(true);
+        expect(component._selectedPreset).toBe(0);
     });
 
     describe('fromMaxDate', () => {