Merge pull request #1036 from HealthCatalyst/dev

Merge dev -> master
HealthCatalyst · Oct 18, 2019 · e60d02e · e60d02e
2 parents b25b1de + ddeec7e
commit e60d02e
Show file tree

Hide file tree

Showing 34 changed files with 240 additions and 75 deletions.
diff --git a/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.html b/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.html
@@ -5,5 +5,6 @@
         <hc-datepicker-toggle hcSuffix [for]="picker1">
         </hc-datepicker-toggle>
         <hc-datepicker #picker1></hc-datepicker>
+        <hc-error>Please enter valid date</hc-error>
     </hc-form-field>
-</div>
+</div>
diff --git a/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.ts b/projects/cashmere-examples/src/lib/datepicker/datepicker-example.component.ts
@@ -1,15 +1,10 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
     selector: 'hc-datepicker-example',
     templateUrl: './datepicker-example.component.html',
     styleUrls: ['datepicker-example.component.scss']
 })
-export class DatepickerExampleComponent implements OnInit {
-    constructor() {}
-
+export class DatepickerExampleComponent {
     date1 = new Date(2010, 1, 1);
-    date2 = new Date(2010, 1, 1);
-
-    ngOnInit() {}
 }
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
@@ -72,7 +72,7 @@
 <hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
         <button hcMenuItem>
-            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
+            <hc-icon hcMenuIcon fontSet="hc-icons" fontIcon="hci-sign-out"></hc-icon>
             <span hcMenuText>Log out of this App</span>
         </button>
     </div>

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
@@ -47,7 +47,7 @@
 <hc-pop #user [autoCloseOnContentClick]="true" [showArrow]="false" horizontalAlign="end">
     <div hcMenu>
         <button hcMenuItem>
-            <hc-icon hcMenuIcon fontSet="fa" fontIcon="fa-sign-out"></hc-icon>
+            <hc-icon hcMenuIcon fontSet="hc-icons" fontIcon="hci-sign-out"></hc-icon>
             <span hcMenuText>Log out of this App</span>
         </button>
     </div>

diff --git a/projects/cashmere-examples/src/lib/popover-overview/popover-overview-example.component.html b/projects/cashmere-examples/src/lib/popover-overview/popover-overview-example.component.html
@@ -26,6 +26,7 @@
             <option value="center">Center</option>
             <option value="end">End</option>
             <option value="below">Below</option>
+            <option value="mouse">Mouse Position</option>
         </hc-select>
     </hc-form-field>
 
@@ -37,6 +38,7 @@
             <option value="center">Center</option>
             <option value="end">End</option>
             <option value="after">After</option>
+            <option value="mouse">Mouse Position</option>
         </hc-select>
     </hc-form-field>
 
@@ -56,6 +58,7 @@
             <option value="click">Click</option>
             <option value="mousedown">Mousedown</option>
             <option value="hover">Hover</option>
+            <option value="rightclick">Right-Click</option>
             <option value="none">None</option>
         </hc-select>
     </hc-form-field>

diff --git a/.../cashmere-examples/src/lib/popover-right-click/popover-right-click-example.component.html b/.../cashmere-examples/src/lib/popover-right-click/popover-right-click-example.component.html
@@ -0,0 +1,37 @@
+<table class="hc-table">
+    <thead>
+        <tr>
+            <th>Item Name</th>
+            <th>Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let item of items">
+            <td>{{ item.name }}</td>
+            <td [hcPop]="contextmenu" trigger="rightclick" [context]="item">{{ item.subtext }}</td>
+        </tr>
+    </tbody>
+</table>
+
+<hc-pop #contextmenu
+    horizontalAlign="mouse"
+    verticalAlign="mouse"
+    (opened)="context = $event"
+    [autoCloseOnContentClick]="true"
+    [showArrow]="false">
+    <div hcMenu>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="hc-icons" fontIcon="hci-copy"></hc-icon>
+            <span hcMenuText>Duplicate {{ context.name }}</span>
+        </button>
+        <div hcMenuItem hcDivider></div>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="hc-icons" fontIcon="hci-archive"></hc-icon>
+            <span hcMenuText>Archive {{ context.name }}</span>
+        </button>
+        <button hcMenuItem>
+            <hc-icon hcMenuIcon fontSet="hc-icons" fontIcon="hci-delete"></hc-icon>
+            <span hcMenuText>Delete {{ context.name }}</span>
+        </button>
+    </div>
+</hc-pop>
diff --git a/...ts/cashmere-examples/src/lib/popover-right-click/popover-right-click-example.component.ts b/...ts/cashmere-examples/src/lib/popover-right-click/popover-right-click-example.component.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Popover Menu
+ */
+@Component({
+    selector: 'hc-popover-right-click-example',
+    templateUrl: 'popover-right-click-example.component.html'
+})
+export class PopoverRightClickExampleComponent {
+    items: Object[] = [
+        {name: 'List Item One', subtext: 'Right-click on this cell for a context menu'},
+        {name: 'List Item Two', subtext: 'Right-click on this cell for another context menu'}
+    ];
+    context = {name: '', subtext: ''};
+}
diff --git a/projects/cashmere/src/lib/date-range/calendar-wrapper/calendar-wrapper.component.scss b/projects/cashmere/src/lib/date-range/calendar-wrapper/calendar-wrapper.component.scss
@@ -3,6 +3,6 @@
     height: 70px;
 }
 
-.form-container {
+.hc-calendar-wrapper > .form-container {
     padding-left: 13px;
 }
diff --git a/projects/cashmere/src/lib/date-range/calendar-wrapper/calendar-wrapper.component.ts b/projects/cashmere/src/lib/date-range/calendar-wrapper/calendar-wrapper.component.ts
@@ -7,7 +7,8 @@ import {
     Output,
     EventEmitter,
     OnChanges,
-    SimpleChanges
+    SimpleChanges,
+    HostBinding
 } from '@angular/core';
 import {ConfigStoreService} from '../services/config-store.service';
 import {CalendarComponent} from '../../datepicker/calendar/calendar.component';
@@ -23,6 +24,9 @@ import {D} from '../../datepicker/datetime/date-formats';
     encapsulation: ViewEncapsulation.None
 })
 export class CalendarWrapperComponent implements OnChanges {
+    @HostBinding('class.hc-calendar-wrapper')
+    _hostClass = true;
+
     @ViewChild(CalendarComponent)
     hcCalendar: CalendarComponent;
 

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
@@ -1,11 +1,12 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-
 import {ConfigStoreService} from '../services/config-store.service';
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {OverlayRef} from '@angular/cdk/overlay';
 import {PickerOverlayComponent} from './picker-overlay.component';
 import {tap} from 'rxjs/operators';
+import {By} from '@angular/platform-browser';
+import {RadioButtonComponent} from '../../radio-button/radio';
 
 class MockOverlayRef {
     dispose() {}
@@ -18,7 +19,7 @@ describe('RangeComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [PickerOverlayComponent],
+            declarations: [PickerOverlayComponent, RadioButtonComponent],
             imports: [BrowserAnimationsModule],
             providers: [{provide: OverlayRef, useClass: MockOverlayRef}, ConfigStoreService],
             schemas: [NO_ERRORS_SCHEMA]
@@ -28,7 +29,10 @@ describe('RangeComponent', () => {
     beforeEach(() => {
         configStoreService = TestBed.get(ConfigStoreService);
         configStoreService.updateDateRangeOptions({
-            presets: [],
+            presets: [{
+                presetLabel: 'Test preset',
+                range: {fromDate: new Date(2010, 1, 1), toDate: new Date(2010, 1, 2)}
+            }],
             format: 'mediumDate',
             applyLabel: 'Submit'
         });
@@ -41,6 +45,17 @@ describe('RangeComponent', () => {
         expect(component).toBeTruthy();
     });
 
+    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);
+
+        component._updateFromDate( new Date(2010, 1, 1) );
+        component._updateToDate( new Date(2010, 1, 2) );
+        fixture.detectChanges();
+
+        expect(radioDebugElement.componentInstance.checked).toBe(true);
+    });
+
     describe('fromMaxDate', () => {
         it('should be undefined if toDate and fromMinMax.toDate are null', async(() => {
             return component._fromMaxDate

diff --git a/projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.ts b/projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.ts
@@ -7,6 +7,7 @@ import {D} from '../../datepicker/datetime/date-formats';
 import {CalendarWrapperComponent} from '../calendar-wrapper/calendar-wrapper.component';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {RadioButtonComponent} from '../../radio-button/radio';
 
 // ** Date range wrapper component */
 @Component({
@@ -25,6 +26,9 @@ export class PickerOverlayComponent implements OnInit, AfterViewInit {
     @ViewChildren(CalendarWrapperComponent)
     calendarWrappers: QueryList<CalendarWrapperComponent>;
 
+    @ViewChildren(RadioButtonComponent)
+    _presetRadios: QueryList<RadioButtonComponent>;
+
     constructor(public configStoreService: ConfigStoreService, private overlayRef: OverlayRef, private cd: ChangeDetectorRef) {
         this.options$ = configStoreService.dateRangeOptions$;
     }
@@ -46,6 +50,9 @@ export class PickerOverlayComponent implements OnInit, AfterViewInit {
         if (this.calendarWrappers.first) {
             this.calendarWrappers.first.focusInput();
         }
+        setTimeout(() => {
+            this._isRangePreset();
+        });
     }
 
     _updateFromDate(date?: D) {
@@ -57,6 +64,7 @@ export class PickerOverlayComponent implements OnInit, AfterViewInit {
             });
         }
         this._setValidity();
+        this._isRangePreset();
     }
 
     _updateToDate(date?: D) {
@@ -68,6 +76,7 @@ export class PickerOverlayComponent implements OnInit, AfterViewInit {
             });
         }
         this._setValidity();
+        this._isRangePreset();
     }
 
     _updateRangeByPreset(range: DateRange) {
@@ -76,6 +85,19 @@ export class PickerOverlayComponent implements OnInit, AfterViewInit {
         this._setValidity();
     }
 
+    _isRangePreset() {
+        if (this._presetRadios) {
+            this._presetRadios.forEach((radio: RadioButtonComponent) => {
+                let radioRange: DateRange = radio.value;
+                if (this._fromDate && radioRange.fromDate && this._toDate && radioRange.toDate) {
+                    radio.checked =
+                        this._fromDate.toDateString() === radioRange.fromDate.toDateString() &&
+                        this._toDate.toDateString() === radioRange.toDate.toDateString();
+                 }
+            });
+        }
+    }
+
     _applyNewDates() {
         if (!!this._toDate && !!this._fromDate) {
             this.configStoreService.updateRange({fromDate: this._fromDate, toDate: this._toDate});

diff --git a/projects/cashmere/src/lib/datepicker/calendar-body/calendar-body.component.html b/projects/cashmere/src/lib/datepicker/calendar-body/calendar-body.component.html
@@ -11,8 +11,6 @@
         aria-hidden="true"
         class="hc-calendar-body-label"
         [attr.colspan]="_firstRowOffset"
-        [style.paddingTop]="_cellPadding"
-        [style.paddingBottom]="_cellPadding"
     >
     </td>
     <td

diff --git a/projects/cashmere/src/lib/datepicker/datepicker-input/datepicker-input.directive.ts b/projects/cashmere/src/lib/datepicker/datepicker-input/datepicker-input.directive.ts
@@ -337,7 +337,7 @@ export class DatepickerInputDirective implements ControlValueAccessor, OnDestroy
     /** Handles blur events on the input. */
     _onBlur() {
         // Reformat the input only if we have a valid value.
-        if (this.value) {
+        if (this.value || this._elementRef.nativeElement.value) {
             this._formatValue(this.value);
         }
 

diff --git a/projects/cashmere/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.html b/projects/cashmere/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.html
@@ -1,4 +1,5 @@
 <button
+    hc-icon-button
     #button
     class="calendar-button"
     type="button"

diff --git a/projects/cashmere/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.scss b/projects/cashmere/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.scss
@@ -17,4 +17,6 @@
     color: inherit;
     background: 0 0;
     line-height: 1.5;
+    width: 32px;
+    height: 32px;
 }
diff --git a/projects/cashmere/src/lib/datepicker/datepicker.component.spec.ts b/projects/cashmere/src/lib/datepicker/datepicker.component.spec.ts
@@ -1082,17 +1082,17 @@ describe('DatepickerComponent', () => {
                 expect(inputEl.value).toBe('1/1/2001');
             });
 
-            it('should not reformat invalid dates on blur', () => {
+            it('should not reformat invalid dates on blur if there is an empty string in the input', () => {
                 const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
 
-                inputEl.value = 'very-valid-date';
+                inputEl.value = '';
                 dispatchFakeEvent(inputEl, 'input');
                 fixture.detectChanges();
 
                 dispatchFakeEvent(inputEl, 'blur');
                 fixture.detectChanges();
 
-                expect(inputEl.value).toBe('very-valid-date');
+                expect(inputEl.value).toBe('');
             });
 
             it('should mark input touched on calendar selection', fakeAsync(() => {

diff --git a/projects/cashmere/src/lib/datepicker/datepicker.md b/projects/cashmere/src/lib/datepicker/datepicker.md
@@ -124,7 +124,7 @@ As with other types of `<input>`, the datepicker works with `@angular/forms` dir
 
 ### Date validation
 
-There are three properties that add date validation to the datepicker input. The first two are the
+Date validation will only occur if the `input` element is bound via `ngModel` or `formControl`. The validator will check to see if the value entered is a valid date. Beyond that, there are three properties that add additional date validation to the datepicker input. The first two are the
 `min` and `max` properties. In addition to enforcing validation on the input, these properties will
 disable all dates on the calendar popup before or after the respective values and prevent the user
 from advancing the calendar past the `month` or `year` (depending on current view) containing the

diff --git a/projects/cashmere/src/lib/icon-font/hcicons.eot b/projects/cashmere/src/lib/icon-font/hcicons.eot
diff --git a/projects/cashmere/src/lib/icon-font/hcicons.scss b/projects/cashmere/src/lib/icon-font/hcicons.scss
@@ -84,6 +84,7 @@
     &.hci-data-mart:before {
         content: '\e936';
     }
+    &.hci-new-DM:before,
     &.hci-new-SM:before {
         content: '\e97c';
     }
@@ -351,6 +352,12 @@
     &.hci-ungroup:before {
         content: '\e9c0';
     }
+    &.hci-run:before {
+        content: "\e90d";
+    }
+    &.hci-run-options:before {
+        content: "\e912";
+    }
     &.hci-ambulance:before {
         content: '\e902';
     }