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

package/fesm5/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';
 
@@ -37,12 +38,28 @@ var SkyProgressIndicatorResourcesModule = /** @class */ (function () {
 
 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.
+ */
 var SkyProgressIndicatorItemComponent = /** @class */ (function () {
     function SkyProgressIndicatorItemComponent(changeDetector) {
         this.changeDetector = changeDetector;
@@ -113,9 +130,9 @@ var SkyProgressIndicatorItemComponent = /** @class */ (function () {
     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);
     return SkyProgressIndicatorItemComponent;
@@ -123,16 +140,41 @@ var SkyProgressIndicatorItemComponent = /** @class */ (function () {
 
 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 = {}));
 
@@ -140,6 +182,9 @@ var SkyProgressIndicatorComponent = /** @class */ (function () {
     function SkyProgressIndicatorComponent(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();
@@ -151,6 +196,14 @@ var SkyProgressIndicatorComponent = /** @class */ (function () {
             }
             return this._displayMode;
         },
+        /**
+         * 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: function (value) {
             this._displayMode = value;
         },
@@ -165,6 +218,11 @@ var SkyProgressIndicatorComponent = /** @class */ (function () {
             }
             return this._isPassive || false;
         },
+        /**
+         * 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: function (value) {
             this._isPassive = value;
         },
@@ -172,6 +230,11 @@ var SkyProgressIndicatorComponent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(SkyProgressIndicatorComponent.prototype, "messageStream", {
+        /**
+         * 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: function (value) {
             if (value) {
                 this._messageStream = value;
@@ -184,6 +247,11 @@ var SkyProgressIndicatorComponent = /** @class */ (function () {
         get: function () {
             return this._startingIndex || 0;
         },
+        /**
+         * 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: function (value) {
             this._startingIndex = value;
         },
@@ -441,14 +509,15 @@ var SkyProgressIndicatorComponent = /** @class */ (function () {
             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);
     return 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.
  */
 var SkyProgressIndicatorActionClickProgressHandler = /** @class */ (function () {
     /**
@@ -461,10 +530,19 @@ var SkyProgressIndicatorActionClickProgressHandler = /** @class */ (function ()
     return SkyProgressIndicatorActionClickProgressHandler;
 }());
 
+/**
+ * Displays a button to navigate the steps in modal wizards. We recommend against using it in
+ * passive progress indicators and waterfall progress indicators.
+ */
 var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
     function SkyProgressIndicatorNavButtonComponent(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();
     }
@@ -475,6 +553,11 @@ var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
             }
             return this._buttonType;
         },
+        /**
+         * Specifies the type of nav button to include.
+         * The valid options are `finish`, `next`, `previous`, and `reset`.
+         * @default next
+         */
         set: function (value) {
             this._buttonType = value;
         },
@@ -496,6 +579,10 @@ var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
             }
             return this._disabled || false;
         },
+        /**
+         * Indicates whether to disable the nav button.
+         * @default false
+         */
         set: function (value) {
             this._disabled = value;
             this.changeDetector.markForCheck();
@@ -503,6 +590,53 @@ var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(SkyProgressIndicatorNavButtonComponent.prototype, "progressIndicator", {
+        get: function () {
+            return this._progressIndicator;
+        },
+        /**
+         * Specifies the progress indicator component to associate with the nav button.
+         * @required
+         */
+        set: function (value) {
+            var _this = this;
+            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(function (change) {
+                    _this.lastProgressChange = change;
+                    _this.updateButtonVisibility(change);
+                });
+            }
+            else {
+                if (!this.parentTimeout) {
+                    this.parentTimeout = window.setTimeout(function () {
+                        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);
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SkyProgressIndicatorNavButtonComponent.prototype, "cssClassNames", {
         get: function () {
             var buttonType = this.buttonType;
@@ -544,35 +678,13 @@ var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    SkyProgressIndicatorNavButtonComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        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>');
-            }
+    SkyProgressIndicatorNavButtonComponent.prototype.ngAfterViewInit = function () {
+        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;
+        else if (!this.progressIndicator) {
+            this.progressIndicator = undefined;
         }
-        this.progressIndicator.progressChanges
-            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
-            .subscribe(function (change) {
-            _this.lastProgressChange = change;
-            _this.updateButtonVisibility(change);
-        });
     };
     SkyProgressIndicatorNavButtonComponent.prototype.ngOnDestroy = function () {
         this.ngUnsubscribe.next();
@@ -582,7 +694,6 @@ var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
     SkyProgressIndicatorNavButtonComponent.prototype.onClick = function (event) {
         var _this = this;
         event.preventDefault();
-        event.stopPropagation();
         var type;
         switch (this.buttonType) {
             case 'finish':
@@ -652,14 +763,14 @@ var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
     ], 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())
@@ -667,9 +778,18 @@ var SkyProgressIndicatorNavButtonComponent = /** @class */ (function () {
     return 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.
+ */
 var SkyProgressIndicatorResetButtonComponent = /** @class */ (function () {
     function SkyProgressIndicatorResetButtonComponent(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 ' +
@@ -679,6 +799,10 @@ var SkyProgressIndicatorResetButtonComponent = /** @class */ (function () {
         get: function () {
             return this._disabled || false;
         },
+        /**
+         * Indicates whether to disable the reset button.
+         * @default false
+         */
         set: function (value) {
             this._disabled = value;
             this.changeDetector.markForCheck();
@@ -717,9 +841,19 @@ var SkyProgressIndicatorResetButtonComponent = /** @class */ (function () {
     return SkyProgressIndicatorResetButtonComponent;
 }());
 
+/**
+ * Specifies the content to display in the status marker.
+ * @internal
+ */
 var SkyProgressIndicatorStatusMarkerComponent = /** @class */ (function () {
-    function SkyProgressIndicatorStatusMarkerComponent(changeDetector) {
+    function SkyProgressIndicatorStatusMarkerComponent(changeDetector, themeSvc) {
+        var _this = this;
         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(function () {
+            _this.changeDetector.markForCheck();
+        });
     }
     Object.defineProperty(SkyProgressIndicatorStatusMarkerComponent.prototype, "displayMode", {
         get: function () {
@@ -786,8 +920,13 @@ var SkyProgressIndicatorStatusMarkerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    SkyProgressIndicatorStatusMarkerComponent.prototype.ngOnDestroy = function () {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    };
     SkyProgressIndicatorStatusMarkerComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
+        { type: ChangeDetectorRef },
+        { type: SkyThemeService, decorators: [{ type: Optional }] }
     ]; };
     __decorate([
         Input()
@@ -798,23 +937,27 @@ var SkyProgressIndicatorStatusMarkerComponent = /** @class */ (function () {
     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);
     return SkyProgressIndicatorStatusMarkerComponent;
 }());
 
+/**
+ * Specifies a header to display above the progress indicator.
+ */
 var SkyProgressIndicatorTitleComponent = /** @class */ (function () {
     function 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);
     return SkyProgressIndicatorTitleComponent;
@@ -837,7 +980,8 @@ var SkyProgressIndicatorModule = /** @class */ (function () {
                 CommonModule,
                 SkyI18nModule,
                 SkyIconModule,
-                SkyProgressIndicatorResourcesModule
+                SkyProgressIndicatorResourcesModule,
+                SkyThemeModule
             ],
             exports: [
                 SkyProgressIndicatorComponent,