Merge pull request #1001 from HealthCatalyst/dev

Release
HealthCatalyst · Sep 25, 2019 · 89e7113 · 89e7113
2 parents 6bdf429 + 171f596
commit 89e7113
Show file tree

Hide file tree

Showing 40 changed files with 530 additions and 190 deletions.
diff --git a/...ects/cashmere-examples/src/lib/checkbox-disabled/checkbox-disabled-example.component.html b/...ects/cashmere-examples/src/lib/checkbox-disabled/checkbox-disabled-example.component.html
diff --git a/projects/cashmere-examples/src/lib/checkbox-disabled/checkbox-disabled-example.component.ts b/projects/cashmere-examples/src/lib/checkbox-disabled/checkbox-disabled-example.component.ts
diff --git a/...ere-examples/src/lib/checkbox-indeterminate/checkbox-indeterminate-example.component.html b/...ere-examples/src/lib/checkbox-indeterminate/checkbox-indeterminate-example.component.html
@@ -0,0 +1,10 @@
+<hc-checkbox [checked]="isChecked()" [indeterminate]="isIndeterminate()" (change)="parentClick()">
+    Parent Checkbox (indeterminate)
+</hc-checkbox>
+
+<form [formGroup]="checkboxGroup" class="checkbox-group">
+    <div *ngFor="let control of getChecks()">
+        <hc-checkbox [formControl]="control">Child Checkbox</hc-checkbox>
+    </div>
+</form>
+
diff --git a/...ere-examples/src/lib/checkbox-indeterminate/checkbox-indeterminate-example.component.scss b/...ere-examples/src/lib/checkbox-indeterminate/checkbox-indeterminate-example.component.scss
@@ -0,0 +1,4 @@
+.checkbox-group {
+    margin-left: 25px;
+    margin-top: 5px;
+}
diff --git a/...hmere-examples/src/lib/checkbox-indeterminate/checkbox-indeterminate-example.component.ts b/...hmere-examples/src/lib/checkbox-indeterminate/checkbox-indeterminate-example.component.ts
@@ -0,0 +1,51 @@
+import {Component} from '@angular/core';
+import {CheckboxChangeEvent} from '@healthcatalyst/cashmere';
+import {FormGroup, FormArray, FormControl, FormBuilder} from '@angular/forms';
+
+/**
+ * @title Indeterminate Checkbox
+ */
+@Component({
+    selector: 'hc-checkbox-indeterminate-example',
+    templateUrl: 'checkbox-indeterminate-example.component.html',
+    styleUrls: ['checkbox-indeterminate-example.component.scss']
+})
+export class CheckboxIndeterminateExampleComponent {
+    checkboxGroup: FormGroup;
+
+    constructor(_fb: FormBuilder) {
+        let checkboxArray = new FormArray([new FormControl(false), new FormControl(true), new FormControl(false), new FormControl(true)]);
+        this.checkboxGroup = _fb.group({
+            checkValues: checkboxArray
+        });
+    }
+
+    getChecks() {
+        const formArray = this.checkboxGroup.get('checkValues') as FormArray;
+        const controls = formArray.controls as FormControl[];
+        return controls;
+    }
+
+    isChecked() {
+        const checkedCount = this.checkboxGroup.controls['checkValues'].value.filter(c => c).length;
+        return checkedCount === this.checkboxGroup.controls['checkValues'].value.length;
+    }
+
+    isIndeterminate() {
+        const checkedCount = this.checkboxGroup.controls['checkValues'].value.filter(c => c).length;
+        return !(checkedCount === 0 || checkedCount === this.checkboxGroup.controls['checkValues'].value.length);
+    }
+
+    parentClick() {
+        const checkedCount = this.checkboxGroup.controls['checkValues'].value.filter(c => c).length;
+        const valueArray = new Array(this.checkboxGroup.controls['checkValues'].value.length);
+
+        if (checkedCount !== this.checkboxGroup.controls['checkValues'].value.length) {
+            valueArray.fill(true);
+        } else {
+            valueArray.fill(false);
+        }
+
+        this.checkboxGroup.controls['checkValues'].setValue(valueArray);
+    }
+}
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 +1,3 @@
 <hc-checkbox id="light">Standard Checkbox</hc-checkbox>
+
+<hc-checkbox id="disabled" disabled="true">Disabled Checkbox</hc-checkbox>
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
@@ -15,9 +15,9 @@ export class DateRangeExampleComponent implements OnInit {
     ngOnInit() {
         const today = new Date();
         const fromMin = new Date(today.getFullYear(), today.getMonth() - 2, 1);
-        const fromMax = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+        const fromMax = new Date(today.getFullYear(), today.getMonth() + 1, 1);
         const toMin = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-        const toMax = new Date(today.getFullYear(), today.getMonth() + 2, 0);
+        const toMax = new Date(today.getFullYear(), today.getMonth() + 2, 1);
 
         this.setupPresets();
         this.options = {

diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html
@@ -1,6 +1,6 @@
 <div class="tab-demo">
     <hc-tab-set defaultTab="1">
-        <hc-tab tabTitle="Tab 1">
+        <hc-tab tabTitle="Nested Tabs">
             <hc-tab-set direction="horizontal">
                 <hc-tab tabTitle="Tab 1">
                     <div class="tab-content">
@@ -17,13 +17,22 @@
                         Horizontal Tab content 3
                     </div>
                 </hc-tab>
+                <div class="tab-bar-content">
+                    <div>
+                        <hc-icon fontSet="fa" fontIcon="fa-info"></hc-icon>
+                        <span>You can place additional content after the tabs</span>
+                    </div>
+                </div>
             </hc-tab-set>
         </hc-tab>
-        <hc-tab tabTitle="Tab 2">
+        <hc-tab tabTitle="Tooltip Tab" [hcPop]="tabTooltip" trigger="hover">
             <div class="tab-content">
-                Vertical Tab content 2
+                This tab shows a Cashmere popover tooltip when you hover over it.
             </div>
         </hc-tab>
+        <hc-pop #tabTooltip verticalAlign="center" horizontalAlign="after">
+            You found the tooltip!
+        </hc-pop>
         <hc-tab>
             <hc-tab-title>
                 <i class="fa fa-file-code-o"></i> HTML <span style="font-style: italic;">Title</span>

diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss
@@ -5,3 +5,16 @@
 .tab-demo {
     border: 1px solid #e0e0e0;
 }
+
+.tab-bar-content {
+    display: flex;
+    align-content: center;
+    align-self: stretch;
+    flex-grow: 1;
+    background: rgba(0, 0, 0, .1);
+    font-weight: bold;
+
+    div {
+        margin: auto 0;
+    }
+}
diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.scss b/projects/cashmere/src/lib/checkbox/checkbox.component.scss
@@ -39,6 +39,10 @@
         @include hc-checkbox-overlay-disabled();
     }
 
+    .hc-checkbox-indeterminate & {
+        @include hc-checkbox-overlay-indeterminate();
+    }
+
     input[type='checkbox']:checked + & {
         @include hc-checkbox-overlay-checked();
     }

diff --git a/projects/cashmere/src/lib/datepicker/calendar/calendar-header.html b/projects/cashmere/src/lib/datepicker/calendar/calendar-header.html
@@ -1,21 +1,5 @@
 <div class="hc-calendar-header">
     <div class="hc-calendar-controls">
-        <button
-            hc-button
-            buttonStyle="link"
-            type="button"
-            class="hc-calendar-period-button"
-            (click)="currentPeriodClicked()"
-            [attr.aria-label]="periodButtonLabel"
-        >
-            {{ periodButtonText }}
-            <div class="hc-calendar-arrow" [class.hc-calendar-invert]="calendar.currentView != 'month'"></div>
-        </button>
-
-        <div class="hc-calendar-spacer"></div>
-
-        <ng-content></ng-content>
-
         <button
             hc-button
             buttonStyle="link"
@@ -25,16 +9,9 @@
             (click)="previousClicked()"
             [attr.aria-label]="prevButtonLabel"
         ></button>
-        <button
-            hc-button
-            buttonStyle="link"
-            type="button"
-            class="hc-calendar-today-button"
-            [disabled]="!todayEnabled()"
-            (click)="todayClicked()"
-            [attr.aria-label]="prevButtonLabel">
-            Today
-        </button>
+        <span class="hc-calendar-today-button">
+            {{ monthButtonText }}
+        </span>
         <button
             hc-button
             buttonStyle="link"
@@ -44,5 +21,22 @@
             (click)="nextClicked()"
             [attr.aria-label]="nextButtonLabel"
         ></button>
+
+        <div class="hc-calendar-spacer"></div>
+
+        <ng-content></ng-content>
+
+        <button
+            hc-button
+            buttonStyle="link"
+            type="button"
+            class="hc-calendar-period-button"
+            (click)="currentPeriodClicked()"
+            [attr.aria-label]="periodButtonLabel"
+        >
+            {{ periodButtonText }}
+            <div class="hc-calendar-arrow" [class.hc-calendar-invert]="calendar.currentView != 'month'"></div>
+        </button>
+
     </div>
 </div>
diff --git a/projects/cashmere/src/lib/datepicker/calendar/calendar.component.html b/projects/cashmere/src/lib/datepicker/calendar/calendar.component.html
@@ -36,3 +36,17 @@
       (selectedChange)="_goToDateInView($event, 'year')">
   </hc-multi-year-view>
 </div>
+
+<div *ngIf="currentView=== 'month'" class="hc-calendar-today-container">
+    <button
+        hc-button
+        buttonStyle="link"
+        size="sm"
+        type="button"
+        (click)="_todayClicked()"
+        [disabled]="!_todayEnabled()"
+        [attr.aria-label]="_todayButtonLabel"
+    >
+        Jump to Today
+    </button>
+</div>
diff --git a/projects/cashmere/src/lib/datepicker/calendar/calendar.component.scss b/projects/cashmere/src/lib/datepicker/calendar/calendar.component.scss
@@ -44,7 +44,7 @@ $hc-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .hc-calendar-period-button.hc-md.hc-button.hc-link {
     min-width: 0;
-    padding: 10px;
+    padding: 13px 10px 10px 10px;
     min-width: inherit;
 }
 
@@ -103,12 +103,22 @@ $hc-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     transform: $hc-calendar-next-icon-transform;
 }
 
-.hc-calendar-today-button.hc-md.hc-button.hc-link {
+.hc-calendar-today-button {
     font-weight: 600;
     color: $primary-brand;
-    min-width: inherit;
-    padding: 2px 0 0 0;
+    min-width: 35px;
+    padding: 3px 0 0 0;
     vertical-align: baseline;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 35px;
+    font-size: calculateRem(15px);
+    line-height: 15px;
+}
+
+.hc-calendar-today-container {
+    text-align: center;
 }
 
 .hc-calendar-table {

diff --git a/projects/cashmere/src/lib/datepicker/calendar/calendar.component.ts b/projects/cashmere/src/lib/datepicker/calendar/calendar.component.ts
@@ -55,12 +55,14 @@ export class CalendarHeaderComponent {
         this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
     }
 
+    /** The label for the currently visible month */
+    get monthButtonText(): string {
+        return this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.calendar.activeDate)];
+    }
+
     /** The label for the current calendar view. */
     get periodButtonText(): string {
-        if (this.calendar.currentView === 'month') {
-            return this._dateAdapter.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase();
-        }
-        if (this.calendar.currentView === 'year') {
+        if (this.calendar.currentView === 'year' || this.calendar.currentView === 'month') {
             return this._dateAdapter.getYearName(this.calendar.activeDate);
         }
         const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
@@ -75,6 +77,11 @@ export class CalendarHeaderComponent {
         return this.calendar.currentView === 'month' ? this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
     }
 
+    /** The label for the currently displayed month */
+    get monthButtonLabel(): string {
+        return this._intl.currentMonthLabel;
+    }
+
     /** The label for the the previous button. */
     get prevButtonLabel(): string {
         return {
@@ -114,19 +121,6 @@ export class CalendarHeaderComponent {
                 : this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView === 'year' ? 1 : yearsPerPage);
     }
 
-    todayClicked(): void {
-        this.calendar.currentView = 'month';
-        this.calendar._dateSelected(this._dateAdapter.today());
-        this.calendar._userSelection.emit();
-    }
-
-    todayEnabled(): boolean {
-        return (
-            (!this.calendar.minDate || this._dateAdapter.compareDate(this._dateAdapter.today(), this.calendar.minDate) < 0) &&
-            (!this.calendar.maxDate || this._dateAdapter.compareDate(this._dateAdapter.today(), this.calendar.maxDate) > 0)
-        );
-    }
-
     /** Whether the previous period button is enabled. */
     previousEnabled(): boolean {
         if (!this.calendar.minDate) {
@@ -304,7 +298,7 @@ export class CalendarComponent implements AfterContentInit, AfterViewChecked, On
     stateChanges = new Subject<void>();
 
     constructor(
-        _intl: HcDatepickerIntl,
+        private _intl: HcDatepickerIntl,
         @Optional() private _dateAdapter: DateAdapter<D>,
         @Optional()
         @Inject(HC_DATE_FORMATS)
@@ -373,6 +367,24 @@ export class CalendarComponent implements AfterContentInit, AfterViewChecked, On
         view.ngAfterContentInit();
     }
 
+    /** The label for the jump to today button */
+    get _todayButtonLabel(): string {
+        return this._intl.switchToTodayLabel;
+    }
+
+    /** Handles clicks on the Jump to current date button */
+
+    _todayClicked(): void {
+        this.activeDate = this._dateAdapter.today();
+    }
+
+    _todayEnabled(): boolean {
+        return (
+            (!this.minDate || this._dateAdapter.compareDate(this.minDate, this._dateAdapter.today()) < 1) &&
+            (!this.maxDate || this._dateAdapter.compareDate(this.maxDate, this._dateAdapter.today()) > -1)
+        );
+    }
+
     /** Handles date selection in the month view. */
     _dateSelected(date: D): void {
         if (!this._dateAdapter.sameDate(date, this.selected)) {

diff --git a/projects/cashmere/src/lib/datepicker/datepicker-intl.ts b/projects/cashmere/src/lib/datepicker/datepicker-intl.ts
@@ -24,6 +24,9 @@ export class HcDatepickerIntl {
     /** A label for the button used to open the calendar popup (used by screen readers). */
     openCalendarLabel: string = 'Open calendar';
 
+    /** A label for the current month button (used by screen readers). */
+    currentMonthLabel: string = 'Current month';
+
     /** A label for the previous month button (used by screen readers). */
     prevMonthLabel: string = 'Previous month';
 
@@ -47,4 +50,7 @@ export class HcDatepickerIntl {
 
     /** A label for the 'switch to year view' button (used by screen readers). */
     switchToMultiYearViewLabel: string = 'Choose month and year';
+
+    /** A label for the 'jump to the current date' button (used by screen readers). */
+    switchToTodayLabel: string = 'Jump to the current date';
 }
diff --git a/projects/cashmere/src/lib/datepicker/datepicker.component.scss b/projects/cashmere/src/lib/datepicker/datepicker.component.scss
@@ -5,7 +5,7 @@
 
 .hc-datepicker-content {
     width: 310px;
-    height: 360px;
+    height: 400px;
 }
 
 .hc-datepicker-header {
@@ -214,7 +214,7 @@
 // ********************************************************************** MATERIAL ****************************************************************************************************
 // ************************************************************************************************************************************************************************************
 
-$hc-datepicker-calendar-padding: 8px;
+$hc-datepicker-calendar-padding: 15px;
 $hc-datepicker-non-touch-calendar-cell-size: 40px;
 $hc-datepicker-non-touch-calendar-width: $hc-datepicker-non-touch-calendar-cell-size * 7 + $hc-datepicker-calendar-padding * 2;
 // Based on the natural height of the calendar in a month with 6 rows of dates