@skyux/progress-indicator 4.0.0-rc.0 → 4.1.1

package/fesm2015/skyux-progress-indicator.js

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { SkyAppWindowRef } from '@skyux/core';
 import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule } from '@skyux/i18n';
 import { SkyIconModule } from '@skyux/indicators';
+import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { Subject } from 'rxjs';
 import { takeUntil, delay, distinctUntilChanged } from 'rxjs/operators';
 
@@ -33,12 +34,28 @@ SkyProgressIndicatorResourcesModule = __decorate([
 
 var SkyProgressIndicatorItemStatus;
 (function (SkyProgressIndicatorItemStatus) {
+    /**
+     * Indicates the item is active.
+     */
     SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Active"] = 0] = "Active";
+    /**
+     * Indicates the item is complete.
+     */
     SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Complete"] = 1] = "Complete";
+    /**
+     * Indicates the item is incomplete.
+     */
     SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Incomplete"] = 2] = "Incomplete";
+    /**
+     * Indicates the item is pending.
+     */
     SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Pending"] = 3] = "Pending";
 })(SkyProgressIndicatorItemStatus || (SkyProgressIndicatorItemStatus = {}));
 
+/**
+ * Specifies a step to include in the progress indicator. Each step requires a label,
+ * and you can also specify step details within the `sky-progress-indicator-item` element.
+ */
 let SkyProgressIndicatorItemComponent = class SkyProgressIndicatorItemComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
@@ -98,24 +115,49 @@ __decorate([
 SkyProgressIndicatorItemComponent = __decorate([
     Component({
         selector: 'sky-progress-indicator-item',
-        template: "<div *ngIf=\"isVisible\"\n  class=\"sky-progress-indicator-item\"\n  [ngClass]=\"'sky-progress-indicator-item-status-' + statusName\"\n>\n  <sky-progress-indicator-status-marker *ngIf=\"showStatusMarker\"\n    [status]=\"status\"\n  >\n  </sky-progress-indicator-status-marker>\n\n  <div\n    class=\"sky-progress-indicator-item-content\"\n  >\n    <div *ngIf=\"showTitle\"\n      aria-level=\"2\"\n      class=\"sky-progress-indicator-item-heading\"\n      role=\"heading\"\n      [ngClass]=\"{ 'sky-deemphasized': statusName === 'pending' }\"\n    >\n      {{ formattedTitle }}\n    </div>\n    <div\n      class=\"sky-progress-indicator-item-body\"\n    >\n      <ng-template [ngIf]=\"statusName !== 'incomplete'\">\n        <ng-content></ng-content>\n      </ng-template>\n    </div>\n  </div>\n</div>\n",
+        template: "<div *ngIf=\"isVisible\"\n  class=\"sky-progress-indicator-item\"\n  [ngClass]=\"'sky-progress-indicator-item-status-' + statusName\"\n>\n  <sky-progress-indicator-status-marker *ngIf=\"showStatusMarker\"\n    [status]=\"status\"\n  >\n  </sky-progress-indicator-status-marker>\n\n  <div\n    class=\"sky-progress-indicator-item-content\"\n  >\n    <div *ngIf=\"showTitle\"\n      aria-level=\"2\"\n      class=\"sky-progress-indicator-item-heading\"\n      role=\"heading\"\n      [ngClass]=\"{\n        'sky-deemphasized': statusName === 'pending'\n      }\"\n      [skyThemeClass]=\"{\n        'sky-font-display-3': 'modern'\n      }\"\n    >\n      {{ formattedTitle }}\n    </div>\n    <div\n      class=\"sky-progress-indicator-item-body\"\n    >\n      <ng-template [ngIf]=\"statusName !== 'incomplete'\">\n        <ng-content></ng-content>\n      </ng-template>\n    </div>\n  </div>\n</div>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-progress-indicator-item{display:flex;margin-bottom:-1px}.sky-progress-indicator-item-content{flex:1 1 100%}.sky-progress-indicator-item-body{min-height:20px;padding-top:10px;padding-bottom:30px}.sky-progress-indicator-item-status-incomplete .sky-progress-indicator-item-body{padding:0}"]
+        styles: [".sky-progress-indicator-item{display:flex;margin-bottom:-1px}.sky-progress-indicator-item-content{flex:1 1 100%}.sky-progress-indicator-item-body{min-height:20px;padding-top:10px;padding-bottom:30px}.sky-progress-indicator-item-status-incomplete .sky-progress-indicator-item-body{padding:0}:host-context(.sky-theme-modern) .sky-progress-indicator-item{margin:0}:host-context(.sky-theme-modern) .sky-progress-indicator-item-body{padding:20px 0 30px}:host-context(.sky-theme-modern) .sky-progress-indicator-item-body:empty{padding:0}.sky-theme-modern .sky-progress-indicator-item{margin:0}.sky-theme-modern .sky-progress-indicator-item-body{padding:20px 0 30px}.sky-theme-modern .sky-progress-indicator-item-body:empty{padding:0}"]
     })
 ], SkyProgressIndicatorItemComponent);
 
 var SkyProgressIndicatorDisplayMode;
 (function (SkyProgressIndicatorDisplayMode) {
+    /**
+     * Specifies a vertical layout for the progress indicator.
+     */
     SkyProgressIndicatorDisplayMode[SkyProgressIndicatorDisplayMode["Vertical"] = 0] = "Vertical";
+    /**
+     * Specifies a horizontal layout for the progress indicator.
+     */
     SkyProgressIndicatorDisplayMode[SkyProgressIndicatorDisplayMode["Horizontal"] = 1] = "Horizontal";
 })(SkyProgressIndicatorDisplayMode || (SkyProgressIndicatorDisplayMode = {}));
 
 var SkyProgressIndicatorMessageType;
 (function (SkyProgressIndicatorMessageType) {
+    /**
+     * Indicates that the current step is complete.
+     * This completes the active item and moves to the next item.
+     */
     SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Progress"] = 0] = "Progress";
+    /**
+     * Indicates that progress should return to the previous step.
+     * This moves from the active item to the item that precedes it.
+     */
     SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Regress"] = 1] = "Regress";
+    /**
+     * Indicates that progress is incomplete.
+     * This marks all items as incomplete and sets the first item as the active item.
+     */
     SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Reset"] = 2] = "Reset";
+    /**
+     * Indicates that progress is complete.
+     * This marks all items as complete and sets the last item as the active item.
+     */
     SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Finish"] = 3] = "Finish";
+    /**
+     * Indicates that progress should move to the item indicated by the `data.activeIndex` property.
+     */
     SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["GoTo"] = 4] = "GoTo";
 })(SkyProgressIndicatorMessageType || (SkyProgressIndicatorMessageType = {}));
 
@@ -123,10 +165,21 @@ let SkyProgressIndicatorComponent = class SkyProgressIndicatorComponent {
     constructor(changeDetector, windowRef) {
         this.changeDetector = changeDetector;
         this.windowRef = windowRef;
+        /**
+         * Fires when the progress indicator changes the status of an item.
+         */
         this.progressChanges = new EventEmitter();
         this.ngUnsubscribe = new Subject();
         this._messageStream = new Subject();
     }
+    /**
+     * Specifies whether to display the progress indicator vertically or horizontally.
+     * For [passive progress indicators](https://developer.blackbaud.com/skyux-progress-indicator/docs/passive-indicator)
+     * and [waterfall progress indicators](https://developer.blackbaud.com/skyux/components/progress-indicator/waterfall-progress-indicator),
+     * use the vertical display mode. For [modal wizards](https://developer.blackbaud.com/skyux/components/wizard),
+     * use the horizontal display mode.
+     * @default vertical
+     */
     set displayMode(value) {
         this._displayMode = value;
     }
@@ -136,6 +189,11 @@ let SkyProgressIndicatorComponent = class SkyProgressIndicatorComponent {
         }
         return this._displayMode;
     }
+    /**
+     * Indicates whether the progress indicator is passive. Passive progress indicators inform users of
+     * progress that concerns them but that they are not responsible for, and they must use the vertical display mode.
+     * @default false
+     */
     set isPassive(value) {
         this._isPassive = value;
     }
@@ -146,11 +204,21 @@ let SkyProgressIndicatorComponent = class SkyProgressIndicatorComponent {
         }
         return this._isPassive || false;
     }
+    /**
+     * Specifies an observable of `SkyProgressIndicatorMessage` that determines the status to
+     * display for items in the progress indicator. The message stream is a queue of
+     * commanding messages to change the state of the progress indicator based on the message type.
+     */
     set messageStream(value) {
         if (value) {
             this._messageStream = value;
         }
     }
+    /**
+     * Specifies the index for the item to make active when the progress indicator
+     * loads. All steps that precede the active item are marked as complete, and all steps
+     * that follow the active item are marked as incomplete.
+     */
     set startingIndex(value) {
         this._startingIndex = value;
     }
@@ -387,12 +455,13 @@ SkyProgressIndicatorComponent = __decorate([
         selector: 'sky-progress-indicator',
         template: "<div\n  class=\"sky-progress-indicator\"\n  [ngClass]=\"cssClassNames\"\n>\n  <div *ngIf=\"displayModeName === 'horizontal'\"\n    class=\"sky-progress-indicator-horizontal-status-markers\"\n  >\n    <sky-progress-indicator-status-marker *ngFor=\"let status of itemStatuses\"\n      [displayMode]=\"displayMode\"\n      [status]=\"status\"\n    >\n    </sky-progress-indicator-status-marker>\n  </div>\n  <ng-content></ng-content>\n</div>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-progress-indicator ::ng-deep sky-progress-indicator-item:last-of-type .sky-progress-indicator-status-marker-line{display:none}.sky-progress-indicator-mode-vertical{max-width:400px;min-width:250px;margin:0 auto}.sky-progress-indicator-mode-vertical ::ng-deep .sky-progress-indicator-item-body{text-align:center;margin-left:-30px}.sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-nav-button,.sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-reset-button{display:block;padding-top:30px;padding-left:15px}.sky-progress-indicator-mode-horizontal ::ng-deep .sky-progress-indicator-item-heading{font-weight:600;font-size:16px}.sky-progress-indicator-horizontal-status-markers{display:flex;margin-bottom:10px}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker{flex-basis:45px;flex-grow:0}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:first-of-type{margin-left:-5px}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:first-of-type .sky-progress-indicator-status-marker .sky-progress-indicator-status-marker-icon:before{display:none!important}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:last-of-type .sky-progress-indicator-status-marker-line{display:none}"]
+        styles: [".sky-progress-indicator ::ng-deep sky-progress-indicator-item:last-of-type .sky-progress-indicator-status-marker-line{display:none}.sky-progress-indicator-mode-vertical{max-width:400px;min-width:250px;margin:0 auto}.sky-progress-indicator-mode-vertical ::ng-deep .sky-progress-indicator-item-body{text-align:center;margin-left:-30px}.sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-nav-button,.sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-reset-button{display:block;padding-top:30px;padding-left:15px}::ng-deep .sky-popover ::ng-deep .sky-progress-indicator-mode-vertical{min-width:auto}.sky-progress-indicator-mode-horizontal ::ng-deep .sky-progress-indicator-item-heading{font-weight:600;font-size:16px}.sky-progress-indicator-horizontal-status-markers{display:flex;margin-bottom:10px}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker{flex-basis:45px;flex-grow:0}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:first-of-type{margin-left:-5px}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:first-of-type .sky-progress-indicator-status-marker .sky-progress-indicator-status-marker-icon:before{display:none!important}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:last-of-type .sky-progress-indicator-status-marker-line{display:none}:host-context(.sky-theme-modern) .sky-progress-indicator-mode-horizontal ::ng-deep .sky-progress-indicator-item-heading{font-weight:inherit;font-size:inherit}:host-context(.sky-theme-modern) .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-nav-button,:host-context(.sky-theme-modern) .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-reset-button{padding:0;margin:60px 0 0;text-align:center}.sky-theme-modern .sky-progress-indicator-mode-horizontal ::ng-deep .sky-progress-indicator-item-heading{font-weight:inherit;font-size:inherit}.sky-theme-modern .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-nav-button,.sky-theme-modern .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-reset-button{padding:0;margin:60px 0 0;text-align:center}"]
     })
 ], SkyProgressIndicatorComponent);
 
 /**
- * Allows the consumer to trigger step advancement manually.
+ * Allows the consumer to decide whether the button's action should be completed successfully.
+ * The handler is provided with all nav button types.
  */
 class SkyProgressIndicatorActionClickProgressHandler {
     /**
@@ -404,13 +473,27 @@ class SkyProgressIndicatorActionClickProgressHandler {
     }
 }
 
+/**
+ * Displays a button to navigate the steps in modal wizards. We recommend against using it in
+ * passive progress indicators and waterfall progress indicators.
+ */
 let SkyProgressIndicatorNavButtonComponent = class SkyProgressIndicatorNavButtonComponent {
     constructor(changeDetector, parentComponent) {
         this.changeDetector = changeDetector;
         this.parentComponent = parentComponent;
+        /**
+         * Fires when users select the nav button and emits a `SkyProgressIndicatorActionClickArgs`
+         * object that is passed into the callback function to allow consumers to decide whether
+         * the button’s action should complete successfully.
+         */
         this.actionClick = new EventEmitter();
         this.ngUnsubscribe = new Subject();
     }
+    /**
+     * Specifies the type of nav button to include.
+     * The valid options are `finish`, `next`, `previous`, and `reset`.
+     * @default next
+     */
     set buttonType(value) {
         this._buttonType = value;
     }
@@ -420,6 +503,10 @@ let SkyProgressIndicatorNavButtonComponent = class SkyProgressIndicatorNavButton
         }
         return this._buttonType;
     }
+    /**
+     * Indicates whether to disable the nav button.
+     * @default false
+     */
     set disabled(value) {
         this._disabled = value;
         this.changeDetector.markForCheck();
@@ -438,6 +525,48 @@ let SkyProgressIndicatorNavButtonComponent = class SkyProgressIndicatorNavButton
         }
         return this._disabled || false;
     }
+    /**
+     * Specifies the progress indicator component to associate with the nav button.
+     * @required
+     */
+    set progressIndicator(value) {
+        this._progressIndicator = value;
+        if (value) {
+            if (this.buttonType === 'finish') {
+                // The `hasFinishButton` field was added to support legacy API.
+                // Some implementations only include a next button; we cannot
+                // assume that every implementation includes both a finish button and a next button.
+                this._progressIndicator.hasFinishButton = true;
+            }
+            this._progressIndicator.progressChanges
+                .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+                .subscribe((change) => {
+                this.lastProgressChange = change;
+                this.updateButtonVisibility(change);
+            });
+        }
+        else {
+            if (!this.parentTimeout) {
+                this.parentTimeout = window.setTimeout(() => {
+                    if (!this.progressIndicator) {
+                        throw new Error('The `<sky-progress-indicator-nav-button>` component requires a reference to ' +
+                            'the `<sky-progress-indicator>` component it controls. For example:\n' +
+                            '<sky-progress-indicator\n' +
+                            '  #myProgressIndicator\n' +
+                            '>\n' +
+                            '</sky-progress-indicator>\n' +
+                            '<sky-progress-indicator-nav-button\n' +
+                            '  [progressIndicator]="myProgressIndicator"\n' +
+                            '>\n' +
+                            '</sky-progress-indicator-nav-button>');
+                    }
+                }, 50);
+            }
+        }
+    }
+    get progressIndicator() {
+        return this._progressIndicator;
+    }
     get cssClassNames() {
         const buttonType = this.buttonType;
         const classNames = [
@@ -467,34 +596,13 @@ let SkyProgressIndicatorNavButtonComponent = class SkyProgressIndicatorNavButton
     get isVisible() {
         return this._isVisible || false;
     }
-    ngOnInit() {
-        if (!this.progressIndicator) {
-            if (!this.parentComponent) {
-                throw new Error('The `<sky-progress-indicator-nav-button>` component requires a reference to ' +
-                    'the `<sky-progress-indicator>` component it controls. For example:\n' +
-                    '<sky-progress-indicator\n' +
-                    '  #myProgressIndicator\n' +
-                    '>\n' +
-                    '</sky-progress-indicator>\n' +
-                    '<sky-progress-indicator-nav-button\n' +
-                    '  [progressIndicator]="myProgressIndicator"\n' +
-                    '>\n' +
-                    '</sky-progress-indicator-nav-button>');
-            }
+    ngAfterViewInit() {
+        if (!this.progressIndicator && this.parentComponent) {
             this.progressIndicator = this.parentComponent;
         }
-        if (this.buttonType === 'finish') {
-            // The `hasFinishButton` field was added to support legacy API.
-            // Some implementations only include a next button; we cannot
-            // assume that every implementation includes both a finish button and a next button.
-            this.progressIndicator.hasFinishButton = true;
-        }
-        this.progressIndicator.progressChanges
-            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
-            .subscribe((change) => {
-            this.lastProgressChange = change;
-            this.updateButtonVisibility(change);
-        });
+        else if (!this.progressIndicator) {
+            this.progressIndicator = undefined;
+        }
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
@@ -503,7 +611,6 @@ let SkyProgressIndicatorNavButtonComponent = class SkyProgressIndicatorNavButton
     }
     onClick(event) {
         event.preventDefault();
-        event.stopPropagation();
         let type;
         switch (this.buttonType) {
             case 'finish':
@@ -574,27 +681,40 @@ __decorate([
 ], SkyProgressIndicatorNavButtonComponent.prototype, "disabled", null);
 __decorate([
     Input()
-], SkyProgressIndicatorNavButtonComponent.prototype, "progressIndicator", void 0);
+], SkyProgressIndicatorNavButtonComponent.prototype, "progressIndicator", null);
 __decorate([
     Output()
 ], SkyProgressIndicatorNavButtonComponent.prototype, "actionClick", void 0);
 SkyProgressIndicatorNavButtonComponent = __decorate([
     Component({
         selector: 'sky-progress-indicator-nav-button',
-        template: "<button *ngIf=\"isVisible\"\n  class=\"sky-btn sky-margin-inline-compact\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"cssClassNames\"\n  (click)=\"onClick($event)\"\n>\n  {{ buttonText || (buttonLabelResourceString | skyLibResources) }}\n</button>\n",
+        template: "<button *ngIf=\"isVisible\"\n  class=\"sky-btn\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"cssClassNames\"\n  [skyThemeClass]=\"{\n    'sky-margin-inline-compact' : 'default',\n    'sky-btn-link' : 'modern'\n  }\"\n  (click)=\"onClick($event)\"\n>\n  {{ buttonText || (buttonLabelResourceString | skyLibResources) }}\n</button>\n",
         changeDetection: ChangeDetectionStrategy.OnPush
     }),
     __param(1, Optional())
 ], SkyProgressIndicatorNavButtonComponent);
 
+/**
+ * Displays a button to mark all items in the progress indicator as incomplete and set the
+ * first item as the active item. The steps after the active item remain incomplete until
+ * users reach them in their sequential order.
+ */
 let SkyProgressIndicatorResetButtonComponent = class SkyProgressIndicatorResetButtonComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
+        /**
+         * Fires when users select the reset button that marks all items as incomplete and sets the
+         * first item as the active item.
+         */
         this.resetClick = new EventEmitter();
         console.warn('[Deprecation warning] The `<sky-progress-indicator-reset-button>` component is ' +
             'deprecated. Please use the `<sky-progress-indicator-nav-button>` component instead, with ' +
             '`buttonType` set to "reset".');
     }
+    /**
+     * Indicates whether to disable the reset button.
+     * @default false
+     */
     set disabled(value) {
         this._disabled = value;
         this.changeDetector.markForCheck();
@@ -632,9 +752,18 @@ SkyProgressIndicatorResetButtonComponent = __decorate([
     })
 ], SkyProgressIndicatorResetButtonComponent);
 
+/**
+ * Specifies the content to display in the status marker.
+ * @internal
+ */
 let SkyProgressIndicatorStatusMarkerComponent = class SkyProgressIndicatorStatusMarkerComponent {
-    constructor(changeDetector) {
+    constructor(changeDetector, themeSvc) {
         this.changeDetector = changeDetector;
+        this.ngUnsubscribe = new Subject();
+        // Update icons when theme changes.
+        themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
     }
     set displayMode(value) {
         this._displayMode = value;
@@ -681,9 +810,14 @@ let SkyProgressIndicatorStatusMarkerComponent = class SkyProgressIndicatorStatus
         }
         return name;
     }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
 };
 SkyProgressIndicatorStatusMarkerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: SkyThemeService, decorators: [{ type: Optional }] }
 ];
 __decorate([
     Input()
@@ -694,20 +828,24 @@ __decorate([
 SkyProgressIndicatorStatusMarkerComponent = __decorate([
     Component({
         selector: 'sky-progress-indicator-status-marker',
-        template: "<div\n  class=\"sky-progress-indicator-status-marker\"\n  role=\"presentation\"\n  [ngClass]=\"cssClassNames\"\n>\n  <div\n    class=\"sky-progress-indicator-status-marker-icon\"\n  >\n    <sky-icon *ngIf=\"statusName === 'complete'\"\n      icon=\"check\"\n    >\n    </sky-icon>\n  </div>\n  <div\n    class=\"sky-progress-indicator-status-marker-line\"\n  >\n  </div>\n</div>\n",
+        template: "<div\n  class=\"sky-progress-indicator-status-marker\"\n  role=\"presentation\"\n  [ngClass]=\"cssClassNames\"\n>\n  <div *skyThemeIf=\"'default'\"\n    class=\"sky-progress-indicator-status-marker-icon\"\n  >\n    <sky-icon *ngIf=\"statusName === 'complete'\"\n      icon=\"check\"\n    >\n    </sky-icon>\n  </div>\n  <div *skyThemeIf=\"'modern'\"\n    class=\"sky-progress-indicator-status-marker-icon\"\n  >\n    <sky-icon *ngIf=\"statusName === 'complete'\"\n      icon=\"check\"\n      iconType=\"skyux\"\n    >\n    </sky-icon>\n  </div>\n  <div\n    class=\"sky-progress-indicator-status-marker-line\"\n  >\n  </div>\n</div>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-progress-indicator-status-marker{display:flex;height:100%}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical{flex-basis:15px;flex-grow:0;flex-direction:column;margin-right:15px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-icon{margin-top:1px;width:15px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-icon>::ng-deep sky-icon{margin-left:-1px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-line{margin:0 auto;width:1px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal{flex-direction:row;width:100%;padding-left:5px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal .sky-progress-indicator-status-marker-icon{height:15px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal .sky-progress-indicator-status-marker-line{margin:auto 0;height:1px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border:0;margin-right:5px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-active .sky-progress-indicator-status-marker-icon{position:relative}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-active .sky-progress-indicator-status-marker-icon:before{content:\"\";display:block;width:5px;height:1px;background-color:#72bf44;position:absolute;left:-7px;top:5px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-incomplete .sky-progress-indicator-status-marker-icon{position:relative}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-incomplete .sky-progress-indicator-status-marker-icon:before{content:\"\";display:block;width:5px;height:1px;background-color:#cdcfd2;position:absolute;left:-7px;top:5px}.sky-progress-indicator-status-marker-icon{border-radius:15px;border:2px solid #cdcfd2;flex:0 0 15px}.sky-progress-indicator-status-marker-line{background-color:#cdcfd2;flex:1 0 auto}.sky-progress-indicator-status-marker-status-active .sky-progress-indicator-status-marker-icon{background-color:#72bf44;border-color:transparent}.sky-progress-indicator-status-marker-status-pending .sky-progress-indicator-status-marker-icon{border-color:#72bf44}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border-color:transparent;color:#72bf44;margin-top:0}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon>::ng-deep sky-icon{display:inline-flex;vertical-align:top}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-line{background-color:#72bf44}"]
-    })
+        styles: [".sky-progress-indicator-status-marker{display:flex;height:100%}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical{flex-basis:15px;flex-grow:0;flex-direction:column;margin-right:15px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-icon{margin-top:1px;width:15px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-icon>::ng-deep sky-icon{margin-left:-1px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-line{margin:0 auto;width:1px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal{flex-direction:row;width:100%;padding-left:5px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal .sky-progress-indicator-status-marker-icon{height:15px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal .sky-progress-indicator-status-marker-line{margin:auto 0;height:1px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border:0;margin-right:5px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-active .sky-progress-indicator-status-marker-icon{position:relative}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-active .sky-progress-indicator-status-marker-icon:before{content:\"\";display:block;width:5px;height:1px;background-color:#72bf44;position:absolute;left:-7px;top:5px}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-incomplete .sky-progress-indicator-status-marker-icon{position:relative}.sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal.sky-progress-indicator-status-marker-status-incomplete .sky-progress-indicator-status-marker-icon:before{content:\"\";display:block;width:5px;height:1px;background-color:#cdcfd2;position:absolute;left:-7px;top:5px}.sky-progress-indicator-status-marker-icon{border-radius:15px;border:2px solid #cdcfd2;flex:0 0 15px}.sky-progress-indicator-status-marker-line{background-color:#cdcfd2;flex:1 0 auto}.sky-progress-indicator-status-marker-status-active .sky-progress-indicator-status-marker-icon{background-color:#72bf44;border-color:transparent}.sky-progress-indicator-status-marker-status-pending .sky-progress-indicator-status-marker-icon{border-color:#72bf44}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border-color:transparent;color:#72bf44;margin-top:0}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon>::ng-deep sky-icon{display:inline-flex;vertical-align:top}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-line{background-color:#72bf44}:host-context(.sky-theme-modern) .sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical{position:relative;top:3px;margin-right:20px}:host-context(.sky-theme-modern) .sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-icon{width:17px}:host-context(.sky-theme-modern) .sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal .sky-progress-indicator-status-marker-icon{height:17px;top:1px}:host-context(.sky-theme-modern) .sky-progress-indicator-status-marker-icon{border-radius:17px;flex:0 0 17px}.sky-theme-modern .sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical{position:relative;top:3px;margin-right:20px}.sky-theme-modern .sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-vertical .sky-progress-indicator-status-marker-icon{width:17px}.sky-theme-modern .sky-progress-indicator-status-marker.sky-progress-indicator-status-marker-mode-horizontal .sky-progress-indicator-status-marker-icon{height:17px;top:1px}.sky-theme-modern .sky-progress-indicator-status-marker-icon{border-radius:17px;flex:0 0 17px}"]
+    }),
+    __param(1, Optional())
 ], SkyProgressIndicatorStatusMarkerComponent);
 
+/**
+ * Specifies a header to display above the progress indicator.
+ */
 let SkyProgressIndicatorTitleComponent = class SkyProgressIndicatorTitleComponent {
 };
 SkyProgressIndicatorTitleComponent = __decorate([
     Component({
         selector: 'sky-progress-indicator-title',
-        template: "<div\n  aria-level=\"1\"\n  class=\"sky-progress-indicator-title sky-section-heading\"\n  role=\"heading\"\n>\n  <ng-content></ng-content>\n</div>\n",
+        template: "<div\n  aria-level=\"1\"\n  class=\"sky-progress-indicator-title\"\n  role=\"heading\"\n  [skyThemeClass]=\"{\n    'sky-section-heading': 'default',\n    'sky-font-heading-1' : 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-progress-indicator-title{line-height:1.1;margin:0 0 30px;text-align:center}"]
+        styles: [".sky-progress-indicator-title{line-height:1.1;margin:0 0 30px;text-align:center}:host-context(.sky-theme-modern) .sky-progress-indicator-title{line-height:inherit;margin:0 0 60px}.sky-theme-modern .sky-progress-indicator-title{line-height:inherit;margin:0 0 60px}"]
     })
 ], SkyProgressIndicatorTitleComponent);
 
@@ -727,7 +865,8 @@ SkyProgressIndicatorModule = __decorate([
             CommonModule,
             SkyI18nModule,
             SkyIconModule,
-            SkyProgressIndicatorResourcesModule
+            SkyProgressIndicatorResourcesModule,
+            SkyThemeModule
         ],
         exports: [
             SkyProgressIndicatorComponent,