Merging master branch, Release 2.0.0-beta.2

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 2.0.0-rc.2 (2017-06-23)
+
+- Merged `master` branch.
+- Added support for SKY UX Builder 1.0.0-rc.3.
+
+# 2.0.0-beta.33 (2017-06-23)
+
+  - Added the SkyNumeric Pipe. (#764) (Thanks @Blackbaud-AdamSc)
+  - Added the email validation directive. (#379) (Thanks @Blackbaud-SandhyaRajasabeson)
+
 # 2.0.0-rc.1 (2017-06-20)
 
   - All the updates for 2.0.0-beta.32.
@@ -6,8 +16,6 @@
 
   - Fixed typo to change SkyTimepickerTimeOutput `ios8601` property to be `iso8601`.
 
-
-
 # 2.0.0-beta.32 (2017-06-20)
 
   - Tweaked animation for text-expand in firefox. (#695)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blackbaud/skyux",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "description": "SKY UX built on Angular 2",
   "author": "Blackbaud, Inc.",
   "homepage": "https://github.com/blackbaud/skyux2",
@@ -48,20 +48,20 @@
     "@angular/platform-browser": "4.1.3",
     "@angular/platform-browser-dynamic": "4.1.3",
     "@angular/router": "4.1.3",
-    "core-js": "~2.4.1",
+    "core-js": "2.4.1",
     "dragula": "3.7.2",
     "font-awesome": "4.7.0",
     "intl": "1.2.5",
     "microedge-rxstate": "1.0.3",
     "moment": "2.18.1",
     "ng2-dragula": "1.3.1",
     "ng2-toastr": "4.0.1",
-    "rxjs": "~5.4.0",
-    "zone.js": "~0.8.10"
+    "rxjs": "5.4.0",
+    "zone.js": "0.8.10"
   },
   "devDependencies": {
     "@angular/compiler-cli": "4.1.3",
-    "@blackbaud/skyux-builder": "1.0.0-rc.2",
+    "@blackbaud/skyux-builder": "1.0.0-rc.3",
     "@blackbaud/stache": "2.0.0-beta.7",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",

scripts/travis-script.sh

@@ -4,14 +4,16 @@ set -e
 # Necessary to stop pull requests from forks from running outside of Savage
 # Override default of `npm test`
 if [ "$TRAVIS_SECURE_ENV_VARS" == "true" ]; then
-  ./scripts/browserstack-cleanup.sh && npm run ci
-
-  # Remove this line after stache and builder update to ng4:
+  # Remove duplicate libraries due to circular dependency:
   rimraf ./node_modules/@blackbaud/skyux/node_modules/@angular
+  rimraf ./node_modules/@blackbaud/skyux/node_modules/@blackbaud
   rimraf ./node_modules/@blackbaud/skyux-builder/node_modules/@angular
   rimraf ./node_modules/@blackbaud/stache/node_modules/@angular
 
+  ./scripts/browserstack-cleanup.sh && npm run ci
+
   skyux build && ./scripts/visual-baseline.sh
+
 else
   echo -e "Pull requests from forks are run via Savage."
 fi

src/app/components/demo-components.service.ts

@@ -184,6 +184,29 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Email Validation',
+        icon: 'check',
+        // tslint:disable-next-line
+        summary: `The email validation module allows the user to validate email format.`,
+        url: '/components/email-validation',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'email-validation-demo.component.html',
+              fileContents: require
+              ('!!raw-loader!./email-validation/email-validation-demo.component.html')
+            },
+            {
+              name: 'email-validation.component.ts',
+              fileContents: require
+              ('!!raw-loader!./email-validation/email-validation-demo.component.ts'),
+              componentName: 'SkyEmailValidationDemoComponent',
+              bootstrapSelector: 'sky-email-validation-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Error',
         icon: 'exclamation',
@@ -591,6 +614,26 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Numeric',
+        icon: 'calculator',
+        summary: 'The Skynumeric Pipe shortens long numbers and can format as currency.',
+        url: '/components/numeric',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'numeric-demo.component.html',
+              fileContents: require('!!raw-loader!./numeric/numeric-demo.component.html')
+            },
+            {
+              name: 'numeric-demo.component.ts',
+              fileContents: require('!!raw-loader!./numeric/numeric-demo.component.ts'),
+              componentName: 'SkyNumericDemoComponent',
+              bootstrapSelector: 'sky-numeric-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Page summary',
         icon: 'newspaper-o',

src/app/components/email-validation/email-validation-demo.component.html

@@ -0,0 +1,12 @@
+<div style="max-width: 50%">
+    <input 
+        [(ngModel)]="emailValidator"
+        class="sky-form-control"
+        skyEmailValidation
+        #email="ngModel"/>
+    <div class="sky-error-label" *ngIf="email.errors && email.errors.skyEmail && (email.dirty && email.touched)">
+        <div [hidden]="!email.errors.skyEmail.invalid">
+            Please enter valid email with format joe@abc.com
+        </div>
+    </div>
+</div>

src/app/components/email-validation/email-validation-demo.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'sky-email-validation-demo',
+    templateUrl: './email-validation-demo.component.html'
+})
+export class SkyEmailValidationDemoComponent {
+    public emailValidator: string;
+}

src/app/components/email-validation/index.html

@@ -0,0 +1,17 @@
+<sky-demo-page title="Email Validation">
+    <sky-demo-page-summary>
+    The email validation module allows the user to validate email format.
+    </sky-demo-page-summary>  
+
+    <sky-demo-page-properties sectionHeading="Email validation input directive properties">
+        <sky-demo-page-property propertyName="skyEmailValidation">
+        When this attribute is placed on an input element, the input with validation properties is created. The error message will display if the input is not in the correct format. This directive will use <code>NgModel</code> for binding data.
+        </sky-demo-page-property>
+    </sky-demo-page-properties>  
+
+    <sky-demo-page-example>
+        <sky-email-validation-demo></sky-email-validation-demo>
+        <sky-demo-page-code demoName="Email Validation"></sky-demo-page-code>
+    </sky-demo-page-example>
+
+</sky-demo-page>

src/app/components/numeric/index.html

@@ -0,0 +1,56 @@
+<sky-demo-page title="Numeric">
+  <sky-demo-page-summary>
+    The numeric pipe formats numbers to a shortened value if it is 1000 or more to a rounded number plus an abbreviation character. K for thousands, M for millions, B for billions and T for trillion. It will also format the shortened number as a currency as an option, with proper localization including currency symbol placement.
+    <br/><br/>
+    Pipe Usage: number_expression | skyNumeric[:NumericOptions] ]]
+    <br/>
+    Note: When creating the NumericOptions object in the template, You MUST have the space between the end of the options object bracket and the closing brackets for the pipe or it won't work.  See HTML code file below for examples.
+    <br/><br/>
+    It can also be imported as SkyNumericService and the formatNumber method called.  It uses a new NumericOptions class, which contains the three properties.  Create a new instance of the class with its parameters set and pass it in as the NumericOptions parameter.
+    <br/>
+    Method Usage: this.skyNumeric.formatNumber(value, NumericOptions)
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties>
+    <sky-demo-page-property
+        propertyName="value"
+    >
+      Number. This is the number_expression to be shortened.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="Numeric Options"
+        isOptional="true"
+    >
+      NumericOptions object. This object contains arguments for the following options:
+    </sky-demo-page-property>
+    <div style="margin-left: 40px">
+    <sky-demo-page-property
+        propertyName="digits"
+        defaultValue="1"
+        isOptional="true"
+    >
+      Number. Specifies the maximum number of digits after the decimal separator.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="format"
+        defaultValue="number"
+        isOptional="true"
+    >
+      String. Specifies if it should be formatted as currency. Options are 'currency' or 'number'.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="iso"
+        defaultValue="USD"
+        isOptional="true"
+    >
+      String. Specifies the ISO4217 currency code to be used for currency formatting.
+    </sky-demo-page-property>
+    </div>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-example>
+    <sky-numeric-demo></sky-numeric-demo>
+    <sky-demo-page-code demoName="Numeric"></sky-demo-page-code>
+  </sky-demo-page-example>
+
+</sky-demo-page>

src/app/components/numeric/numeric-demo.component.html

@@ -0,0 +1,167 @@
+<sky-definition-list labelWidth="200px">
+  <sky-definition-list-heading>
+    This is a sample of numeric formatting.
+  </sky-definition-list-heading>
+  <sky-definition-list-content>
+    <p>
+      <sky-definition-list-label>
+        1 with zero digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1 | skyNumeric:{digits: 0} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1000 with zero digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1000 | skyNumeric:{digits: 0} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1000 with one digit:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1000 | skyNumeric}}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1100 with zero digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1100 | skyNumeric:{digits: 0} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1100 with one digit:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1100 | skyNumeric}}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1500 with zero digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1500 | skyNumeric:{digits: 0} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1500 with one digit:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1500 | skyNumeric}}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1000000 with any digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1000000 | skyNumeric:{digits: 0} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1000000000 with any digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1000000000 | skyNumeric:{digits: 0} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1000000000000 with any digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1000000000000 | skyNumeric:{digits: 0} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1234000 with 2 digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1234000 | skyNumeric:{digits: 2} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1235000000 with 2 digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1235000000 | skyNumeric:{digits: 2} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1.45 with 1 digit:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1.45 | skyNumeric}}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1234567 with 1 digit:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1234567 | skyNumeric}}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        15.50 as US dollar currency with 2 digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{15.50 | skyNumeric:{digits: 2, format: 'currency', iso: 'USD'} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        -15.50 as US dollar currency with 2 digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{-15.50 | skyNumeric:{digits: 2, format: 'currency', iso: 'USD'} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1234567 as Euro currency with 2 digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1234567 | skyNumeric:{digits: 2, format: 'currency', iso: 'EUR'} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1450 as UK Pound currency with 2 digits:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1450 | skyNumeric:{digits: 2, format: 'currency', iso: 'GBP'} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1750 as Hong Kong Dollar currency with 1 digit:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1750 | skyNumeric:{digits: 1, format: 'currency', iso: 'HKD'} }}
+      </sky-definition-list-value>
+    </p>
+    <p>
+      <sky-definition-list-label>
+        1234567 as Japanese Yen currency with 3 digit:
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        {{1234567 | skyNumeric:{digits: 3, format: 'currency', iso: 'JPY'} }}
+      </sky-definition-list-value>
+    </p>
+  </sky-definition-list-content>
+</sky-definition-list>