Add SkyProgressIndicatorMessage

package.json

@@ -29,8 +29,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.38.0",
-    "@blackbaud/skyux-builder": "1.30.0",
-    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.5"
+    "@blackbaud/skyux": "2.48.3",
+    "@blackbaud/skyux-builder": "1.34.1",
+    "@skyux-sdk/builder-plugin-skyux": "1.0.0"
   }
 }

skyuxconfig.json

@@ -3,6 +3,11 @@
   "name": "skyux-progress-indicator",
   "mode": "easy",
   "compileMode": "aot",
+  "app": {
+    "styles": [
+      "src/app/visual-styles.scss"
+    ]
+  },
   "skyuxModules": [
     "SkyErrorModule"
   ],

src/app/app-extras.module.ts

@@ -2,47 +2,37 @@ import {
   NgModule
 } from '@angular/core';
 
-import {
-  CommonModule
-} from '@angular/common';
-
 import {
   SkyCheckboxModule
 } from '@skyux/forms';
 
 import {
-  SkyModalModule,
-  SkyModalService
+  SkyModalModule
 } from '@skyux/modals';
 
 import {
   SkyPopoverModule
 } from '@skyux/popovers';
 
+import {
+  SkyAppLinkModule
+} from '@skyux/router';
+
 import {
   SkyProgressIndicatorModule
-} from './public/modules/progress-indicator';
+} from './public';
 
 import {
   ProgressIndicatorWizardDemoComponent
 } from './visual/progress-indicator/progress-indicator-horizontal-visual.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    SkyProgressIndicatorModule,
-    SkyCheckboxModule,
-    SkyModalModule,
-    SkyPopoverModule
-  ],
   exports: [
-    SkyProgressIndicatorModule,
+    SkyAppLinkModule,
     SkyCheckboxModule,
     SkyModalModule,
-    SkyPopoverModule
-  ],
-  providers: [
-    SkyModalService
+    SkyPopoverModule,
+    SkyProgressIndicatorModule
   ],
   entryComponents: [
     ProgressIndicatorWizardDemoComponent

src/app/public/modules/progress-indicator/fixtures/progress-indicator.component.fixture.html

@@ -1,7 +1,7 @@
 <sky-progress-indicator
-  style="display: block; background-color: white;"
   [displayMode]="displayMode"
   [isPassive]="isPassive"
+  [messageStream]="messageStream"
   [startingIndex]="startingIndex"
   (progressChanges)="updateIndex($event)"
   #progressIndicator

src/app/public/modules/progress-indicator/fixtures/progress-indicator.component.fixture.ts

@@ -1,35 +1,44 @@
 import {
   Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   ViewChild,
-  QueryList,
   ViewChildren,
-  ChangeDetectorRef,
-  ChangeDetectionStrategy
+  QueryList
 } from '@angular/core';
 
 import {
-  SkyProgressIndicatorComponent,
-  SkyProgressIndicatorMessageType,
-  SkyProgressIndicatorChange
-} from '..';
+  Subject
+} from 'rxjs/Subject';
+
 import {
   SkyProgressIndicatorNavButtonComponent
-} from '../progress-indicator-nav-button';
+} from '../progress-indicator-nav-button/progress-indicator-nav-button.component';
+
 import {
   SkyProgressIndicatorResetButtonComponent
-} from '../progress-indicator-reset-button';
+} from '../progress-indicator-reset-button/progress-indicator-reset-button.component';
+
 import {
-  SkyProgressIndicatorDisplayMode
-} from '../types/progress-indicator-mode';
+  SkyProgressIndicatorDisplayMode,
+  SkyProgressIndicatorMessage,
+  SkyProgressIndicatorMessageType,
+  SkyProgressIndicatorChange
+} from '../types';
+
+import {
+  SkyProgressIndicatorComponent
+} from '../progress-indicator.component';
 
 @Component({
   selector: 'test-progress-indicator',
   templateUrl: './progress-indicator.component.fixture.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ProgressIndicatorTestComponent {
+export class SkyProgressIndicatorFixtureComponent {
   public displayMode: SkyProgressIndicatorDisplayMode;
   public isPassive: boolean;
+  public messageStream = new Subject<SkyProgressIndicatorMessage | SkyProgressIndicatorMessageType>();
   public startingIndex: number;
 
   public previousButtonText: string;
@@ -73,6 +82,10 @@ export class ProgressIndicatorTestComponent {
     this.resetWasClicked = true;
   }
 
+  public sendMessage(message: SkyProgressIndicatorMessage): void {
+    this.messageStream.next(message);
+  }
+
   public updateIndex(changes: SkyProgressIndicatorChange): void {
     this.progressChangesEmitted = true;
     this.activeIndex = changes.activeIndex;

src/app/public/modules/progress-indicator/fixtures/progress-indicator.module.fixture.ts

@@ -0,0 +1,29 @@
+import {
+  CommonModule
+} from '@angular/common';
+
+ import {
+  NgModule
+} from '@angular/core';
+
+ import {
+  SkyProgressIndicatorModule
+} from '../progress-indicator.module';
+
+ import {
+  SkyProgressIndicatorFixtureComponent
+} from './progress-indicator.component.fixture';
+
+ @NgModule({
+  declarations: [
+    SkyProgressIndicatorFixtureComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyProgressIndicatorModule
+  ],
+  exports: [
+    SkyProgressIndicatorFixtureComponent
+  ]
+})
+export class SkyProgressIndicatorFixtureModule { }

src/app/public/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.ts

@@ -90,9 +90,13 @@ export class SkyProgressIndicatorNavButtonComponent implements OnInit, OnDestroy
 
   public buttonClick(): void {
     if (this.buttonType === 'previous') {
-      this.progressIndicator.messageStream.next(SkyProgressIndicatorMessageType.Regress);
+      this.progressIndicator.sendMessage({
+        type: SkyProgressIndicatorMessageType.Regress
+      });
     } else {
-      this.progressIndicator.messageStream.next(SkyProgressIndicatorMessageType.Progress);
+      this.progressIndicator.sendMessage({
+        type: SkyProgressIndicatorMessageType.Progress
+      });
     }
   }
 

src/app/public/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.ts

@@ -40,7 +40,9 @@ export class SkyProgressIndicatorResetButtonComponent implements OnDestroy {
 
   public resetProgress(): void {
     this.resetClick.emit();
-    this.progressIndicator.messageStream.next(SkyProgressIndicatorMessageType.Reset);
+    this.progressIndicator.sendMessage({
+      type: SkyProgressIndicatorMessageType.Reset
+    });
   }
 
   public ngOnDestroy(): void {

src/app/public/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.html

@@ -1,4 +1,6 @@
-<h3
-  class="sky-section-heading sky-progress-indicator-title">
+<div
+  class="sky-progress-indicator-title sky-section-heading"
+  role="heading"
+>
   <ng-content></ng-content>
-</h3>
+</div>

src/app/public/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.scss

@@ -1,4 +1,8 @@
-:host() {
-  display: flex;
-  justify-content: center;
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
+
+.sky-progress-indicator-title {
+  line-height: 1.1;
+  margin: 0 0 $sky-margin-triple;
+  text-align: center;
 }

src/app/public/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.ts

@@ -1,10 +1,12 @@
 import {
+  ChangeDetectionStrategy,
   Component
 } from '@angular/core';
 
 @Component({
   selector: 'sky-progress-indicator-title',
   templateUrl: './progress-indicator-title.component.html',
-  styleUrls: ['./progress-indicator-title.component.scss']
+  styleUrls: ['./progress-indicator-title.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SkyProgressIndicatorTitleComponent { }