Merge 32 (#816)

* AppSettings and config files docs.

* appSettings and config files docs.

* Doc tweaks.

* Code sample cleanup

* Max height transition (#804)

* update builder version for skyux documentation

* pass string to expandmode

* Update container for component search

* Use class instead of inline styles

* work on text expand firefox bug

* continue work on firefox transitions

* Adjust text expand animation for firefox

* Update tests for new text expand animation

* Fix tslint errors

* Update master plunker to point to beta release (#812)

* List paging first page (#814)

* Only set page number on search when paging exists

* Add tests for search paging bug

* Updates for beta.32 (#815)

* Fix typo for iso8601

* Update dependencies for spa visual tests

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2.0.0-beta.32 (2017-06-20)
+
+  - Tweaked animation for text-expand in firefox. (#695)
+  - Handle search when paging does not exist. (#813)
+
 # 2.0.0-rc.0 (2017-06-16)
 
   - Updated dependencies to support Angular 4.1.3. (#549) See http://angularjs.blogspot.com/2017/03/angular-400-now-available.html and https://github.com/angular/angular/blob/master/CHANGELOG.md for more information.

package.json

@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "4.1.3",
-    "@blackbaud/skyux-builder": "blackbaud/skyux-builder#update-angular",
+    "@blackbaud/skyux-builder": "1.0.0-rc.1",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",
     "@types/node": "7.0.18",

skyux-spa-visual-tests/package.json

@@ -18,8 +18,8 @@
   "author": "Blackbaud",
   "license": "ISC",
   "devDependencies": {
-    "@blackbaud/skyux-builder": "blackbaud/skyux-builder#update-angular",
-    "@blackbaud/skyux": "blackbaud/skyux2#rc-ng4-upgrade",
+    "@blackbaud/skyux-builder": "1.0.0-rc.1",
+    "@blackbaud/skyux": "2.0.0-rc.0",
     "codelyzer": "3.0.1",
     "moment": "2.18.1",
     "dragula": "3.7.2",

src/app/components/demo-components.component.scss

@@ -8,6 +8,7 @@
   flex-wrap: wrap;
 }
 
+
 .sky-demo-components-search-container {
   position: relative;
   display: flex;

src/app/components/shared/demo-page-plunker-service.ts

@@ -72,7 +72,7 @@ export class SkyDemoPagePlunkerService {
 
     'rxjs': 'npm:rxjs@5.1.0',
     'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
-    '@blackbaud/skyux/dist/core': 'npm:@blackbaud/skyux/dist/bundles/core.umd.js',
+    '@blackbaud/skyux/dist/core': 'npm:@blackbaud/skyux@2.0.0-beta.31/dist/bundles/core.umd.js',
 
     'moment': 'npm:moment/moment.js',
 

src/app/learn/reference/configuration/additional-config-files/index.html

@@ -0,0 +1,24 @@
+<sky-demo-nav></sky-demo-nav>
+<stache
+    pageTitle="Additional configuration files">
+    <stache-page-summary>
+      <p>The SKY UX template provides the <stache-code>skyuxconfig.json</stache-code> file to specify configuration settings. In addition, you can create additional configuration files with the <stache-code>skyuxconfig.[COMMAND].json</stache-code> naming convention to apply configuration settings specifically to <a routerLink="/learn/reference/cli-commands">SKY UX CLI commands</a>.</p>
+      <p>Use these instructions to apply configuration settings to CLI commands.</p>
+    </stache-page-summary>
+
+  <stache-page-anchor>
+    Apply configuration settings to a SKY UX CLI command
+  </stache-page-anchor>
+  <ol>
+      <li><p>In a local editor, create a configuration file in the root directory alongside the project's default <stache-code>skyuxconfig.json</stache-code> file. Follow the <stache-code>skyuxconfig.[COMMAND].json</stache-code> naming convention.</p>
+        <p>For example, to apply configuration settings when <stache-code>skyux e2e</stache-code> runs, create <stache-code>skyuxconfig.e2e.json</stache-code>.</p></li>
+      <li><p>In the new file, specify the configuration settings to apply when the command runs.</p>
+        <p>For example, you can specify a mock server URL to use when you run <stache-code>skyux e2e</stache-code>.</p>
+        <stache-code-block languageType="js">"appSettings": {
+  "mockServerURL": "https://localhost:9000"
+}
+      </stache-code-block></li>
+    <li><p>Save your changes. When you run SKY UX CLI commands, SKY UX automatically reads any files with the <stache-code>skyuxconfig.[COMMAND].json</stache-code> naming convention. For example, SKY UX includes and merges the settings in <stache-code>skyuxconfig.e2e.json</stache-code> when you run <stache-code>skyux e2e</stache-code>.</p></li>
+  </ol>
+
+</stache>

src/app/learn/reference/configuration/apply-appsettings/index.html

@@ -0,0 +1,58 @@
+<sky-demo-nav></sky-demo-nav>
+<stache
+    pageTitle="Apply appSettings properties"
+    showTableOfContents="true">
+  <stache-page-summary>
+    <p>The <stache-code>appSettings</stache-code> property in <stache-code>skyuxconfig.json</stache-code> enables you to reuse data throughout a SPA. The <stache-code>appSettings</stache-code> property accepts strings, arrays, and any other type of configuration setting that is necessary. Use these instructions to access the <stache-code>appSettings</stache-code> data throughout your application.</p>
+  </stache-page-summary>
+  <sky-alert alertType="info">If you <a routerLink="/learn/reference/configuration/additional-config-files">create files to apply configuration settings</a> to specific SKY UX CLI commands, you can provide command-specific <stache-code>appSettings</stache-code> data in those configuration files.</sky-alert>
+
+  <stache-page-anchor>
+    Reference appSettings in an index.html file
+  </stache-page-anchor>
+  <ol>
+    <li><p>In a local editor, open the project's <stache-code>skyuxconfig.json</stache-code> file in the root directory.</p></li>
+    <li><p>Insert the <stache-code>appSettings</stache-code> property and specify the data to reuse throughout the application. For example:</p>
+      <stache-code-block languageType="js">"appSettings": {
+  "exampleSetting1": "foobar"
+}</stache-code-block>
+    </li>
+    <li><p>Open the <stache-code>index.html</stache-code> file where you want to reference the <stache-code>appSettings</stache-code> value.</p></li>
+    <li><p>Pull in the config service and reference the <stache-code>appSetting</stache-code> value to access it in the <stache-code>index.html</stache-code> file. For example:</p>
+      <stache-code-block>{{ config.skyux.appSettings.exampleSetting1 &#125;&#125;</stache-code-block>
+    </li>
+    <li><p>Save your changes. When you build or serve your application, the <stache-code>appSettings</stache-code> value appears on the page for the <stache-code>index.html</stache-code> file.</p></li>
+  </ol>
+
+  <stache-page-anchor>
+    Reference appSettings in component or service files
+  </stache-page-anchor>
+  <ol>
+    <li><p>In a local editor, open the project's <stache-code>skyuxconfig.json</stache-code> file in the root directory.</p></li>
+    <li><p>Insert the <stache-code>appSettings</stache-code> property and specify the data to reuse throughout the application. For example:</p>
+      <stache-code-block languageType="js">"appSettings": {
+  "exampleSetting2": "barfoo"
+}</stache-code-block>
+    </li>
+    <li><p>Open the component or service files where you want to reference the <stache-code>appSettings</stache-code> value.</p></li>
+    <li><p>In the <stache-code>component.ts</stache-code> file for the component or the <stache-code>service.ts</stache-code> file for the service, import <stache-code>SkyAppConfig</stache-code> from <stache-code>@blackbaud/skyux-builder/runtime</stache-code>:</p>
+      <stache-code-block languageType="js">import { SkyAppConfig } from '@blackbaud/skyux-builder/runtime';</stache-code-block>
+    </li>
+    <li><p>Add <stache-code>SkyAppConfig</stache-code> as a private property in the constructor for the component or service: <stache-code>constructor(private skyAppConfig: SkyAppConfig) &#123;&#125;</stache-code>.</p>
+      <stache-code-block languageType="js">import { Component } from '@angular/core';
+import { SkyAppConfig } from '@blackbaud/skyux-builder/runtime';
+
+@Component({
+  selector: 'my-home',
+  templateUrl: './home.component.html'
+})
+export class HomeComponent {
+  constructor(private skyAppConfig: SkyAppConfig) {}
+}</stache-code-block>
+    </li>
+    <li><p>In the template file for the component or service, pull in the config service and reference the <stache-code>appSettings</stache-code> value to access it in the <stache-code>.html</stache-code> file. For example:</p></li>
+      <stache-code-block languageType="markup">&#60;p&#62;Sample text: {{ skyAppConfig.skyux.appSettings.exampleSetting2 &#125;&#125;&#60;/p&#62;</stache-code-block>
+    <li><p>Save your changes. The <stache-code>appSettings</stache-code> value is now available to the component or service.</p></li>
+  </ol>
+
+</stache>