Merge pull request #1201 from HealthCatalyst/dev

Merge dev -> master

guides/styles/login-page.md

@@ -111,11 +111,11 @@ The following example uses angular and cashmere and is the preffered method. It
         <div class="logo"><img src="../assets/HealthCatalyst_Horizontal.svg" alt="Health Catalyst Logo" /></div>
         <div>
             <hc-form-field>
-                <hc-label>Email</hc-label>
+                <hc-label>Email:</hc-label>
                 <input hcInput required />
             </hc-form-field>
             <hc-form-field>
-                <hc-label>Password</hc-label>
+                <hc-label>Password:</hc-label>
                 <input type="password" hcInput required />
             </hc-form-field>
             <a href="#" class="forgot-password" hidden="hidden">Forgot Password</a>

projects/cashmere-examples/src/lib/datepicker-selected-value/datepicker-selected-value-example.component.html

@@ -1,19 +1,19 @@
 <hc-form-field class="example-date-input">
-    <hc-label>Angular forms</hc-label>
+    <hc-label>Angular forms:</hc-label>
     <input hcInput [hcDatepicker]="picker1" placeholder="Angular forms" [formControl]="date" />
     <hc-datepicker-toggle hcSuffix [for]="picker1"></hc-datepicker-toggle>
     <hc-datepicker #picker1></hc-datepicker>
 </hc-form-field>
 
 <hc-form-field class="example-date-input">
-    <hc-label>Angular forms (w/ deserialization)</hc-label>
+    <hc-label>Angular forms (w/ deserialization):</hc-label>
     <input hcInput [hcDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)" [formControl]="serializedDate" />
     <hc-datepicker-toggle hcSuffix [for]="picker2"></hc-datepicker-toggle>
     <hc-datepicker #picker2></hc-datepicker>
 </hc-form-field>
 
 <hc-form-field class="example-date-input">
-    <hc-label>Value binding</hc-label>
+    <hc-label>Value binding:</hc-label>
     <input hcInput [hcDatepicker]="picker3" placeholder="Value binding" [value]="date.value" />
     <hc-datepicker-toggle hcSuffix [for]="picker3"></hc-datepicker-toggle>
     <hc-datepicker #picker3></hc-datepicker>

projects/cashmere-examples/src/lib/datepicker-sugar/datepicker-sugar-example.component.html

@@ -1,3 +1,11 @@
+<p class="example-date-description">
+    <a href="https://sugarjs.com/dates/#/Parsing">SugarJS</a> is a JavaScript
+    library used by many Health Catalyst applications to handle parsing user
+    input into <code>Date</code> objects.  It handles a wide variety of input formats and
+    supports multiple languages.  To use SugarJS with the Cashmere DatePicker,
+    you need to declare a Sugar Date Adapter.  See this example's Module code for
+    more information.
+</p>
 <div class="example-date-input">
     <hc-form-field>
         <hc-label>Date:</hc-label>
@@ -6,4 +14,4 @@
         </hc-datepicker-toggle>
         <hc-datepicker #picker1></hc-datepicker>
     </hc-form-field>
-</div>
+</div>

projects/cashmere-examples/src/lib/datepicker-sugar/datepicker-sugar-example.component.scss

@@ -1,3 +1,8 @@
 .example-date-input {
     width: 200px;
+    margin-top: 15px;
+}
+
+.example-date-description {
+    font-size: 14px;
 }

projects/cashmere-examples/src/lib/ellipsis-overview/ellipsis-overview-example.component.html

@@ -1,15 +1,15 @@
 <p>{{ value | ellipsis: length:mode }}</p>
 
 <hc-form-field>
-    <hc-label>Value</hc-label>
+    <hc-label>Value:</hc-label>
     <textarea hcInput [(ngModel)]="value"></textarea>
 </hc-form-field>
 <hc-form-field>
-    <hc-label>Length</hc-label>
+    <hc-label>Length:</hc-label>
     <input hcInput [(ngModel)]="length" type="number" />
 </hc-form-field>
 <hc-form-field>
-    <hc-label>Mode</hc-label>
+    <hc-label>Mode:</hc-label>
     <hc-select [(ngModel)]="mode">
         <option value="characters">Characters</option>
         <option value="words">Words</option>

projects/cashmere-examples/src/lib/input-prefix/input-prefix-example.component.html

@@ -1,14 +1,18 @@
-<div class="form-container">
-    <hc-form-field inline="true">
-        <hc-label>Username (usually your email):</hc-label>
-        <hc-icon hcPrefix fontSet="fa" fontIcon="fa-plus-circle"></hc-icon>
-        <input hcInput placeholder="Enter username" class="demo-input" disabled>
-        <hc-icon hcSuffix fontSet="fa" fontIcon="fa-user-circle-o"></hc-icon>
-    </hc-form-field>
-    <hc-form-field inline="true">
-        <hc-label>Password:</hc-label>
-        <hc-icon hcPrefix fontSet="fa" fontIcon="fa-plus-circle"></hc-icon>
-        <input hcInput placeholder="Enter password" class="demo-input" disabled>
-        <hc-icon hcSuffix fontSet="fa" fontIcon="fa-key"></hc-icon>
-    </hc-form-field>
-</div>
+<form>
+    <div class="form-container">
+        <!-- Disabling the form field via the 'disabled' attribute-->
+        <hc-form-field inline="true">
+            <hc-label>Username (usually your email):</hc-label>
+            <hc-icon hcPrefix fontSet="fa" fontIcon="fa-plus-circle"></hc-icon>
+            <input hcInput placeholder="Enter username" class="demo-input" disabled>
+            <hc-icon hcSuffix fontSet="fa" fontIcon="fa-user-circle-o"></hc-icon>
+        </hc-form-field>
+        <!-- Disabling the form field via formControl -->
+        <hc-form-field inline="true">
+            <hc-label>Password:</hc-label>
+            <hc-icon hcPrefix fontSet="fa" fontIcon="fa-plus-circle"></hc-icon>
+            <input hcInput placeholder="Enter password" class="demo-input" [formControl]='inputPrefix'>
+            <hc-icon hcSuffix fontSet="fa" fontIcon="fa-key"></hc-icon>
+        </hc-form-field>
+    </div>
+</form>

projects/cashmere-examples/src/lib/input-prefix/input-prefix-example.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 /**
  * @title Disabled Inputs with Prefix and Suffix
@@ -8,4 +9,6 @@ import {Component} from '@angular/core';
     templateUrl: 'input-prefix-example.component.html',
     styleUrls: ['input-prefix-example.component.scss']
 })
-export class InputPrefixExampleComponent {}
+export class InputPrefixExampleComponent {
+    inputPrefix = new FormControl({value: 'disable working', disabled: true});
+}

projects/cashmere-examples/src/lib/input-required/input-required-example.component.html

@@ -1,7 +1,7 @@
 <form>
     <div class="form-container">
         <hc-form-field>
-            <hc-label>Validate an email address</hc-label>
+            <hc-label>Validate an email address:</hc-label>
             <input hcInput [formControl]="formDemo" required>
             <hc-error>A valid email address is required</hc-error>
         </hc-form-field>

projects/cashmere-examples/src/lib/pagination-simple/pagination-simple-example.component.html

@@ -1,5 +1,5 @@
-<hc-form-field> <hc-label>Total number of items</hc-label> <input hcInput type="number" [(ngModel)]="totalItems" /> </hc-form-field>
-<hc-form-field> <hc-label>Page number</hc-label> <input hcInput type="number" [(ngModel)]="pageNumber" /> </hc-form-field>
-<hc-form-field> <hc-label>Page size</hc-label> <input hcInput type="number" [(ngModel)]="pageSize" /> </hc-form-field>
+<hc-form-field> <hc-label>Total number of items:</hc-label> <input hcInput type="number" [(ngModel)]="totalItems" /> </hc-form-field>
+<hc-form-field> <hc-label>Page number:</hc-label> <input hcInput type="number" [(ngModel)]="pageNumber" /> </hc-form-field>
+<hc-form-field> <hc-label>Page size:</hc-label> <input hcInput type="number" [(ngModel)]="pageSize" /> </hc-form-field>
 
 <hc-pagination [(pageNumber)]="pageNumber" [(pageSize)]="pageSize" [length]="totalItems"></hc-pagination>

projects/cashmere-examples/src/lib/select-forms/select-forms-example.component.html

@@ -1,15 +1,15 @@
 <form>
     <hc-select [formControl]="selectControl">
-        <option value="corn">Corn on the cob</option>
-        <option value="chicken">Deep fried chicken</option>
-        <option value="taters">Mashed taters</option>
+        <option *ngFor="let location of locations" [ngValue]="location">{{location.dbaName}}</option>
     </hc-select>
 </form>
 
-<button hc-button class="demo-button" (click)="setTaters()">
-    Yummy Taters
+<button hc-button class="demo-button" (click)="setInsurance()">
+    Select Insurance Department
 </button>
 
 <button hc-button class="demo-button" (click)="toggleActive()">
     Enable/Disable Select
 </button>
+
+<p class="example-results">Form control value: <code>{{selectControl.value | json}}</code></p>

projects/cashmere-examples/src/lib/select-forms/select-forms-example.component.scss

@@ -1,3 +1,8 @@
 form {
     max-width: 350px;
 }
+
+.example-results {
+    margin-top: 20px;
+    font-size: 14px;
+}

projects/cashmere-examples/src/lib/select-forms/select-forms-example.component.ts

@@ -10,10 +10,16 @@ import {FormControl} from '@angular/forms';
     styleUrls: ['select-forms-example.component.scss']
 })
 export class SelectFormsExampleComponent {
-    selectControl = new FormControl('chicken');
+    locations = [
+        {id: 1, dbaName: 'Tax Commission'},
+        {id: 2, dbaName: 'Insurance Department'},
+        {id: 3, dbaName: 'Environmental Quality'},
+    ];
 
-    setTaters() {
-        this.selectControl.setValue('taters');
+    selectControl = new FormControl(this.locations[0]);
+
+    setInsurance() {
+        this.selectControl.setValue(this.locations[1], {onlySelf: true});
     }
 
     toggleActive() {

projects/cashmere-examples/src/lib/table-filter/table-filter-example.component.html

@@ -1,5 +1,5 @@
 <hc-form-field>
-    <hc-label>Filter</hc-label>
+    <hc-label>Filter:</hc-label>
     <input hcInput (keyup)="applyFilter($event.target.value)">
 </hc-form-field>
 

projects/cashmere/src/lib/checkbox/checkbox.md

@@ -6,6 +6,12 @@ Capitalize first word only, except in cases where the selection is an actual pro
 
  
 
+##### Checkbox Labels
+
+Use a colon at the end of checkbox labels (e.g. Email address:). A colon implies a direct connection between the label text and a particular control or set of controls. The only situation where a colon should not be used is when the label and control work together to form a single sentence.
+
+ 
+
 ##### Form Fields
 
 hc-checkbox components may be nested within a hc-form-field component. hc-form-field acts as a coordinator between multiple components including label and error elements.

projects/cashmere/src/lib/date-range/services/config-store.service.ts

@@ -15,8 +15,8 @@ export class ConfigStoreService {
         locale: 'en-us',
         applyLabel: 'Apply',
         cancelLabel: 'Cancel',
-        startDatePrefix: 'Start date',
-        endDatePrefix: 'End date',
+        startDatePrefix: 'Start date:',
+        endDatePrefix: 'End date:',
         invalidDateLabel: 'Please enter valid date'
     };
 

projects/cashmere/src/lib/datepicker/datepicker.md

@@ -1,4 +1,4 @@
-The datepicker allows users to enter a date either through text input, or by choosing a date from
+The datepicker allows users to enter a date, time, or both either through text input, or by choosing a date from
 the calendar. It is made up of several components and directives that work together.
 
 ### Connecting a datepicker to an input
@@ -20,7 +20,7 @@ An optional datepicker toggle button is available. A toggle can be added to the
 ```
 
 This works exactly the same with an input that is part of an `<hc-form-field>` and the toggle
-can easily be used as a prefix or suffix on the material input:
+can easily be used as a prefix or suffix on the `hcInput`:
 
 ```html
 <hc-form-field>
@@ -37,12 +37,19 @@ by using the `hcDatepickerToggleIcon` directive:
 <hc-form-field>
   <input hcInput [hcDatepicker]="picker" placeholder="Choose a date">
   <hc-datepicker-toggle hcSuffix [for]="picker">
-    <hc-icon fontSet="fa" fontIcon="fa-snowflake-o">
+    <hc-icon hcDatepickerToggleIcon fontSet="fa" fontIcon="fa-snowflake-o">
   </hc-datepicker-toggle>
   <hc-datepicker #picker></hc-datepicker>
 </hc-form-field>
 ```
 
+### Setting the datepicker mode
+
+The datepicker may be used to select a calendar date, a time, or both. This is set via the `mode`
+parameter on the `hc-datepicker` element. The three available options are  `date`, `time`, or `date-time`.
+If using either `time` or `date-time` modes, you may also set the `hourCycle` property to 12 or 24 depending
+on whether you would like a clock with AM/PM.
+
 ### Setting the calendar starting view
 
 The `startView` property of `<hc-datepicker>` can be used to set the view that will show up when
@@ -96,23 +103,14 @@ after choosing a year in `multi-view` mode (by pressing the `ESC` key, for examp
 year, emitted by `yearSelected` output, will not cause any change in the value of the date in the
 associated `<input>`.
 
-The following example uses `yearSelected` and `monthSelected` outputs to emulate a month and year
-picker (if you're not familiar with the usage of `MomentDateAdapter` and `HC_DATE_FORMATS`
-you can [read more about them](/components/datepicker/usage#choosing-date-implementation) below in
-this document to fully understand the example).
-
 ### Setting the selected date
 
 The type of values that the datepicker expects depends on the type of `DateAdapter` provided in your
 application. The `NativeDateAdapter`, for example, works directly with plain JavaScript `Date`
-objects. When using the `MomentDateAdapter`, however, the values will all be Moment.js instances.
-This use of the adapter pattern allows the datepicker component to work with any arbitrary date
-representation with a custom `DateAdapter`.
-See [Choosing a date implementation](/components/datepicker/usage#choosing-date-implementation)
-for more information.
+objects.
 
 Depending on the `DateAdapter` being used, the datepicker may automatically deserialize certain date
-formats for you as well. For example, both the `NativeDateAdapter` and `MomentDateAdapter` allow
+formats for you as well. For example, the `NativeDateAdapter` allows
 [ISO 8601](https://tools.ietf.org/html/rfc3339) strings to be passed to the datepicker and
 automatically converted to the proper object type. This can be convenient when binding data directly
 from your backend to the datepicker. However, the datepicker will not accept date strings formatted
@@ -205,19 +203,13 @@ The easiest way to ensure this is just to import one of the pre-made modules:
 
 | Module               | Date type | Supported locales | Dependencies | Import from         |
 | -------------------- | --------- | ----------------- | ------------ | ------------------- |
-| `HcNativeDateModule` | `Date`    | en-US             | None         | `@angular/material` |
-
-_Please note: `HcNativeDateModule` is based off of the functionality available in JavaScript's
-native `Date` object, and is thus not suitable for many locales. One of the biggest shortcomings of
-the native `Date` object is the inability to set the parse format. We highly recommend using the
-`MomentDateAdapter` or a custom `DateAdapter` that works with the formatting/parsing library of your
-choice._
+| `HcNativeDateModule` | `Date`    | en-US             | None         | `@healthcatalyst/cashmere` |
 
 These modules include providers for `DateAdapter` and `HC_DATE_FORMATS`
 
 ```ts
 @NgModule({
-    imports: [HcDatepickerModule, HcNativeDateModule]
+    imports: [DatepickerModule, HcNativeDateModule]
 })
 export class MyApp {}
 ```
@@ -234,27 +226,34 @@ export class MyComponent {
 }
 ```
 
-By default the `MomentDateAdapter` will creates dates in your time zone specific locale. You can change the default behaviour to parse dates as UTC by providing the `HC_MOMENT_DATE_ADAPTER_OPTIONS` and setting it to `useUtc: true`.
+_Please note: `HcNativeDateModule` is based off of the functionality available in JavaScript's
+native `Date` object, and is thus not suitable for many locales. One of the biggest shortcomings of
+the native `Date` object is the inability to set the parse format.
+
+<a href="https://sugarjs.com/dates/#/Parsing">SugarJS</a> is a JavaScript library used by many Health
+Catalyst applications to handle parsing user input into Date objects.  It handles a wide variety of
+input formats and supports multiple languages.  To use SugarJS with the Cashmere DatePicker,
+you need to declare a Sugar Date Adapter as demonstrated in the example below.  See the **Datepicker Sugar**
+example on the examples tab for more information.
 
 ```ts
-@NgModule({
-  imports: [HcDatepickerModule, HcMomentDateModule],
-  providers: [
-    { provide: HC_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
-  ]
-})
+export class SugarDateAdapter extends NativeDateAdapter {
+    parse(value: any): Date | null {
+        return createDate(value);
+    }
+}
 ```
 
 It is also possible to create your own `DateAdapter` that works with any date format your app
 requires. This is accomplished by subclassing `DateAdapter` and providing your subclass as the
 `DateAdapter` implementation. You will also want to make sure that the `HC_DATE_FORMATS` provided
 in your app are formats that can be understood by your date implementation. See
 [Customizing the parse and display formats](/components/datepicker/usage#customizing-parse) for more
-information about `HC_DATE_FORMATS`. <!-- TODO(mmalerba): Add a guide about this -->
+information about `HC_DATE_FORMATS`.
 
 ```ts
 @NgModule({
-    imports: [HcDatepickerModule],
+    imports: [DatepickerModule],
     providers: [
         {provide: DateAdapter, useClass: MyDateAdapter},
         {provide: HC_DATE_FORMATS, useValue: MY_DATE_FORMATS}
@@ -271,14 +270,14 @@ The `HC_DATE_FORMATS` object is just a collection of formats that the datepicker
 and displaying dates. These formats are passed through to the `DateAdapter` so you will want to make
 sure that the format objects you're using are compatible with the `DateAdapter` used in your app.
 
-If you want use one of the `DateAdapters` that ships with Angular Hcerial, but use your own
-`HC_DATE_FORMATS`, you can import the `NativeDateModule` or `MomentDateModule`. These modules are
-identical to the "Hc"-prefixed versions (`HcNativeDateModule` and `HcMomentDateModule`) except
+If you want use one of the `DateAdapters` that ships with Cashmere, but use your own
+`HC_DATE_FORMATS`, you can import the `NativeDateModule`. This module is
+identical to the "Hc"-prefixed version (`HcNativeDateModule`) except
 they do not include the default formats. For example:
 
 ```ts
 @NgModule({
-    imports: [HcDatepickerModule, NativeDateModule],
+    imports: [DatepickerModule, NativeDateModule],
     providers: [{provide: HC_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}]
 })
 export class MyApp {}
@@ -304,7 +303,7 @@ application root module.
 
 ```ts
 @NgModule({
-    imports: [HcDatepickerModule, HcNativeDateModule],
+    imports: [DatepickerModule, HcNativeDateModule],
     providers: [{provide: HcDatepickerIntl, useClass: MyIntl}]
 })
 export class MyApp {}
@@ -389,7 +388,7 @@ In multi-year view:
 #### Error: HcDatepicker: No provider found for DateAdapter/HC_DATE_FORMATS
 
 This error is thrown if you have not provided all of the injectables the datepicker needs to work.
-The easiest way to resolve this is to import the `HcNativeDateModule` or `HcMomentDateModule` in
+The easiest way to resolve this is to import the `HcNativeDateModule` in
 your application's root module. See
 [Choosing a date implementation](/components/datepicker/usage#choosing-date-implementation) for
 more information.