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

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# 4.1.1 (2022-01-04)
+
+- Added bug fixes and features from the `master` branch. [#81](https://github.com/blackbaud/skyux-progress-indicator/pull/81)
+
+# 4.1.0 (2021-04-21)
+
+- Added modern theme styles to the progress indicator component. [#66](https://github.com/blackbaud/skyux-progress-indicator/pull/66)
+
+# 4.0.1 (2020-08-05)
+
+- Fixed the progress indicator component to prevent errors when the progress indicator and its external navigation buttons are hidden at the same time. [#40](https://github.com/blackbaud/skyux-progress-indicator/pull/46)
+
+# 4.0.0 (2020-05-20)
+
+### New features
+
+- Updated the pipeline to transpile to the [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview). [#39](https://github.com/blackbaud/skyux-progress-indicator/pull/39)
+
+### Breaking changes
+
+- Dropped support for `rxjs@5`. Consumers can install `rxjs-compat@^6` to support older versions of `rxjs`. [#39](https://github.com/blackbaud/skyux-progress-indicator/pull/39)
+
 # 4.0.0-rc.0 (2020-04-20)
 
 ### New features
@@ -6,7 +28,7 @@
 
 ### Breaking changes
 
-- Dropped support for `rxjs@5`. Consumers may install `rxjs-compat@^6` to support older versions of `rxjs`. [#39](https://github.com/blackbaud/skyux-progress-indicator/pull/39)
+- Dropped support for `rxjs@5`. Consumers can install `rxjs-compat@^6` to support older versions of `rxjs`. [#39](https://github.com/blackbaud/skyux-progress-indicator/pull/39)
 
 # 3.3.0 (2020-03-30)
 

package/README.md

@@ -1,5 +1,5 @@
 # @skyux/progress-indicator
 
 [![npm](https://img.shields.io/npm/v/@skyux/progress-indicator.svg)](https://www.npmjs.com/package/@skyux/progress-indicator)
-[![status](https://travis-ci.org/blackbaud/skyux-progress-indicator.svg?branch=master)](https://travis-ci.org/blackbaud/skyux-indicator)
+![SKY UX CI](https://github.com/blackbaud/skyux-progress-indicator/workflows/SKY%20UX%20CI/badge.svg)
 [![coverage](https://codecov.io/gh/blackbaud/skyux-progress-indicator/branch/master/graphs/badge.svg?branch=master)](https://codecov.io/gh/blackbaud/skyux-progress-indicator/branch/master)

package/bundles/skyux-progress-indicator.umd.js

@@ -1,22 +1,22 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/core'), require('@skyux/i18n'), require('@skyux/indicators'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@skyux/progress-indicator', ['exports', '@angular/core', '@angular/common', '@skyux/core', '@skyux/i18n', '@skyux/indicators', 'rxjs', 'rxjs/operators'], factory) :
-    (global = global || self, factory((global.skyux = global.skyux || {}, global.skyux['progress-indicator'] = {}), global.ng.core, global.ng.common, global.core$1, global.i18n, global.indicators, global.rxjs, global.rxjs.operators));
-}(this, (function (exports, core, common, core$1, i18n, indicators, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/core'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/theme'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@skyux/progress-indicator', ['exports', '@angular/core', '@angular/common', '@skyux/core', '@skyux/i18n', '@skyux/indicators', '@skyux/theme', 'rxjs', 'rxjs/operators'], factory) :
+    (global = global || self, factory((global.skyux = global.skyux || {}, global.skyux['progress-indicator'] = {}), global.ng.core, global.ng.common, global.core$1, global.i18n, global.indicators, global.theme, global.rxjs, global.rxjs.operators));
+}(this, (function (exports, core, common, core$1, i18n, indicators, theme, rxjs, operators) { 'use strict';
 
     /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
+    Copyright (c) Microsoft Corporation.
 
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
 
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
     /* global Reflect, Promise */
 
@@ -109,8 +109,13 @@
         }
     }
 
+    function __createBinding(o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+    }
+
     function __exportStar(m, exports) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
     }
 
     function __values(o) {
@@ -248,12 +253,28 @@
 
 
     (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";
     })(exports.SkyProgressIndicatorItemStatus || (exports.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;
@@ -324,9 +345,9 @@
         SkyProgressIndicatorItemComponent = __decorate([
             core.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: core.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;
@@ -334,16 +355,41 @@
 
 
     (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";
     })(exports.SkyProgressIndicatorDisplayMode || (exports.SkyProgressIndicatorDisplayMode = {}));
 
 
     (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";
     })(exports.SkyProgressIndicatorMessageType || (exports.SkyProgressIndicatorMessageType = {}));
 
@@ -351,6 +397,9 @@
         function SkyProgressIndicatorComponent(changeDetector, windowRef) {
             this.changeDetector = changeDetector;
             this.windowRef = windowRef;
+            /**
+             * Fires when the progress indicator changes the status of an item.
+             */
             this.progressChanges = new core.EventEmitter();
             this.ngUnsubscribe = new rxjs.Subject();
             this._messageStream = new rxjs.Subject();
@@ -362,6 +411,14 @@
                 }
                 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;
             },
@@ -376,6 +433,11 @@
                 }
                 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;
             },
@@ -383,6 +445,11 @@
             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;
@@ -395,6 +462,11 @@
             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;
             },
@@ -652,14 +724,15 @@
                 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: core.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 () {
         /**
@@ -672,10 +745,19 @@
         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 core.EventEmitter();
             this.ngUnsubscribe = new rxjs.Subject();
         }
@@ -686,6 +768,11 @@
                 }
                 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;
             },
@@ -707,6 +794,10 @@
                 }
                 return this._disabled || false;
             },
+            /**
+             * Indicates whether to disable the nav button.
+             * @default false
+             */
             set: function (value) {
                 this._disabled = value;
                 this.changeDetector.markForCheck();
@@ -714,6 +805,53 @@
             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(operators.distinctUntilChanged(), operators.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;
@@ -755,35 +893,13 @@
             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(operators.distinctUntilChanged(), operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (change) {
-                _this.lastProgressChange = change;
-                _this.updateButtonVisibility(change);
-            });
         };
         SkyProgressIndicatorNavButtonComponent.prototype.ngOnDestroy = function () {
             this.ngUnsubscribe.next();
@@ -793,7 +909,6 @@
         SkyProgressIndicatorNavButtonComponent.prototype.onClick = function (event) {
             var _this = this;
             event.preventDefault();
-            event.stopPropagation();
             var type;
             switch (this.buttonType) {
                 case 'finish':
@@ -863,14 +978,14 @@
         ], SkyProgressIndicatorNavButtonComponent.prototype, "disabled", null);
         __decorate([
             core.Input()
-        ], SkyProgressIndicatorNavButtonComponent.prototype, "progressIndicator", void 0);
+        ], SkyProgressIndicatorNavButtonComponent.prototype, "progressIndicator", null);
         __decorate([
             core.Output()
         ], SkyProgressIndicatorNavButtonComponent.prototype, "actionClick", void 0);
         SkyProgressIndicatorNavButtonComponent = __decorate([
             core.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: core.ChangeDetectionStrategy.OnPush
             }),
             __param(1, core.Optional())
@@ -878,9 +993,18 @@
         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 core.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 ' +
@@ -890,6 +1014,10 @@
             get: function () {
                 return this._disabled || false;
             },
+            /**
+             * Indicates whether to disable the reset button.
+             * @default false
+             */
             set: function (value) {
                 this._disabled = value;
                 this.changeDetector.markForCheck();
@@ -928,9 +1056,19 @@
         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 rxjs.Subject();
+            // Update icons when theme changes.
+            themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                _this.changeDetector.markForCheck();
+            });
         }
         Object.defineProperty(SkyProgressIndicatorStatusMarkerComponent.prototype, "displayMode", {
             get: function () {
@@ -997,8 +1135,13 @@
             enumerable: true,
             configurable: true
         });
+        SkyProgressIndicatorStatusMarkerComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         SkyProgressIndicatorStatusMarkerComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef }
+            { type: core.ChangeDetectorRef },
+            { type: theme.SkyThemeService, decorators: [{ type: core.Optional }] }
         ]; };
         __decorate([
             core.Input()
@@ -1009,23 +1152,27 @@
         SkyProgressIndicatorStatusMarkerComponent = __decorate([
             core.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: core.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, core.Optional())
         ], SkyProgressIndicatorStatusMarkerComponent);
         return SkyProgressIndicatorStatusMarkerComponent;
     }());
 
+    /**
+     * Specifies a header to display above the progress indicator.
+     */
     var SkyProgressIndicatorTitleComponent = /** @class */ (function () {
         function SkyProgressIndicatorTitleComponent() {
         }
         SkyProgressIndicatorTitleComponent = __decorate([
             core.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: core.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;
@@ -1048,7 +1195,8 @@
                     common.CommonModule,
                     i18n.SkyI18nModule,
                     indicators.SkyIconModule,
-                    SkyProgressIndicatorResourcesModule
+                    SkyProgressIndicatorResourcesModule,
+                    theme.SkyThemeModule
                 ],
                 exports: [
                     SkyProgressIndicatorComponent,