@skyux/progress-indicator 5.7.2 → 6.0.0-beta.2

package/fesm2015/skyux-progress-indicator.mjs

@@ -0,0 +1,905 @@
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, Optional, Input, EventEmitter, Output, ContentChildren } from '@angular/core';
+import * as i4 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i2 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import * as i1 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import { Subject } from 'rxjs';
+import { takeUntil, delay, distinctUntilChanged } from 'rxjs/operators';
+import * as i1$1 from '@skyux/core';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-progress-indicator' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_progress_indicator_navigator_finish: { message: 'Finish' },
+        skyux_progress_indicator_navigator_next: { message: 'Next' },
+        skyux_progress_indicator_navigator_previous: { message: 'Previous' },
+        skyux_progress_indicator_navigator_reset: { message: 'Reset' },
+    },
+};
+class SkyProgressIndicatorResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyProgressIndicatorResourcesModule {
+}
+SkyProgressIndicatorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyProgressIndicatorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorResourcesModule, exports: [SkyI18nModule] });
+SkyProgressIndicatorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyProgressIndicatorResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyProgressIndicatorResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+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 the content to display in the status marker.
+ * @internal
+ */
+class SkyProgressIndicatorStatusMarkerComponent {
+    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;
+    }
+    get displayMode() {
+        if (this._displayMode === undefined) {
+            return 'vertical';
+        }
+        return this._displayMode;
+    }
+    set status(value) {
+        this._status = value;
+        this.changeDetector.markForCheck();
+    }
+    get cssClassNames() {
+        const classNames = [
+            `sky-progress-indicator-status-marker-mode-${this.displayMode}`,
+            `sky-progress-indicator-status-marker-status-${this.statusName}`,
+        ];
+        return classNames.join(' ');
+    }
+    get statusName() {
+        let name;
+        /* tslint:disable-next-line:switch-default */
+        switch (this._status) {
+            case SkyProgressIndicatorItemStatus.Active:
+                name = 'active';
+                break;
+            case SkyProgressIndicatorItemStatus.Complete:
+                name = 'complete';
+                break;
+            case SkyProgressIndicatorItemStatus.Incomplete:
+                name = 'incomplete';
+                break;
+            case SkyProgressIndicatorItemStatus.Pending:
+                name = 'pending';
+                break;
+        }
+        return name;
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+SkyProgressIndicatorStatusMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyProgressIndicatorStatusMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: { displayMode: "displayMode", status: "status" }, ngImport: i0, template: "<div\n  class=\"sky-progress-indicator-status-marker\"\n  role=\"presentation\"\n  [ngClass]=\"cssClassNames\"\n>\n  <div\n    *skyThemeIf=\"'default'\"\n    class=\"sky-progress-indicator-status-marker-icon\"\n  >\n    <sky-icon *ngIf=\"statusName === 'complete'\" icon=\"check\"> </sky-icon>\n  </div>\n  <div *skyThemeIf=\"'modern'\" class=\"sky-progress-indicator-status-marker-icon\">\n    <sky-icon *ngIf=\"statusName === 'complete'\" icon=\"check\" iconType=\"skyux\">\n    </sky-icon>\n  </div>\n  <div class=\"sky-progress-indicator-status-marker-line\"></div>\n</div>\n", 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:#5a9936;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:#5a9936;border-color:transparent}.sky-progress-indicator-status-marker-status-pending .sky-progress-indicator-status-marker-icon{border-color:#5a9936}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border-color:transparent;color:#5a9936;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:#5a9936}: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}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-progress-indicator-status-marker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-progress-indicator-status-marker\"\n  role=\"presentation\"\n  [ngClass]=\"cssClassNames\"\n>\n  <div\n    *skyThemeIf=\"'default'\"\n    class=\"sky-progress-indicator-status-marker-icon\"\n  >\n    <sky-icon *ngIf=\"statusName === 'complete'\" icon=\"check\"> </sky-icon>\n  </div>\n  <div *skyThemeIf=\"'modern'\" class=\"sky-progress-indicator-status-marker-icon\">\n    <sky-icon *ngIf=\"statusName === 'complete'\" icon=\"check\" iconType=\"skyux\">\n    </sky-icon>\n  </div>\n  <div class=\"sky-progress-indicator-status-marker-line\"></div>\n</div>\n", 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:#5a9936;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:#5a9936;border-color:transparent}.sky-progress-indicator-status-marker-status-pending .sky-progress-indicator-status-marker-icon{border-color:#5a9936}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border-color:transparent;color:#5a9936;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:#5a9936}: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}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyThemeService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { displayMode: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }] } });
+
+/**
+ * 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.
+ */
+class SkyProgressIndicatorItemComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.isVisible = false;
+        this.showStatusMarker = true;
+        this.showTitle = true;
+    }
+    get formattedTitle() {
+        return `${this.titlePrefix}${this.title}`;
+    }
+    get status() {
+        /* istanbul ignore next */
+        if (this._status === undefined) {
+            return SkyProgressIndicatorItemStatus.Incomplete;
+        }
+        return this._status;
+    }
+    set status(value) {
+        if (value === this._status) {
+            return;
+        }
+        this._status = value;
+        this.changeDetector.markForCheck();
+    }
+    get statusName() {
+        let name;
+        /* tslint:disable-next-line:switch-default */
+        switch (this.status) {
+            case SkyProgressIndicatorItemStatus.Active:
+                name = 'active';
+                break;
+            case SkyProgressIndicatorItemStatus.Complete:
+                name = 'complete';
+                break;
+            case SkyProgressIndicatorItemStatus.Incomplete:
+                name = 'incomplete';
+                break;
+            case SkyProgressIndicatorItemStatus.Pending:
+                name = 'pending';
+                break;
+        }
+        return name;
+    }
+    showStepNumber(step) {
+        this.titlePrefix = `${step} - `;
+    }
+    hideStepNumber() {
+        this.titlePrefix = '';
+    }
+}
+SkyProgressIndicatorItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyProgressIndicatorItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyProgressIndicatorItemComponent, selector: "sky-progress-indicator-item", inputs: { title: "title" }, ngImport: i0, template: "<div\n  *ngIf=\"isVisible\"\n  class=\"sky-progress-indicator-item\"\n  [ngClass]=\"'sky-progress-indicator-item-status-' + statusName\"\n>\n  <sky-progress-indicator-status-marker\n    *ngIf=\"showStatusMarker\"\n    [status]=\"status\"\n  >\n  </sky-progress-indicator-status-marker>\n\n  <div class=\"sky-progress-indicator-item-content\">\n    <div\n      *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 class=\"sky-progress-indicator-item-body\">\n      <ng-template [ngIf]=\"statusName !== 'incomplete'\">\n        <ng-content></ng-content>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", 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}\n"], components: [{ type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: ["displayMode", "status"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-progress-indicator-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"isVisible\"\n  class=\"sky-progress-indicator-item\"\n  [ngClass]=\"'sky-progress-indicator-item-status-' + statusName\"\n>\n  <sky-progress-indicator-status-marker\n    *ngIf=\"showStatusMarker\"\n    [status]=\"status\"\n  >\n  </sky-progress-indicator-status-marker>\n\n  <div class=\"sky-progress-indicator-item-content\">\n    <div\n      *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 class=\"sky-progress-indicator-item-body\">\n      <ng-template [ngIf]=\"statusName !== 'incomplete'\">\n        <ng-content></ng-content>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
+                type: Input
+            }] } });
+
+/**
+ * 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 {
+    /**
+     *
+     * @param advance Advances the progress indicator to the next step.
+     */
+    constructor(advance) {
+        this.advance = advance;
+    }
+}
+
+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 = {}));
+
+/**
+ * @deprecated Use `SkyProgressIndicatorDisplayModeType` instead.
+ * @internal
+ */
+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 = {}));
+
+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.initialized = false;
+        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;
+    }
+    get displayMode() {
+        if (this._displayMode === undefined) {
+            return 'vertical';
+        }
+        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;
+    }
+    get isPassive() {
+        // Currently, passive mode is not supported for horizontal displays.
+        if (this.displayModeResolved === 'horizontal') {
+            return false;
+        }
+        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) {
+        this._messageStream = value;
+        this.subscribeToMessageStream();
+    }
+    /**
+     * 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;
+    }
+    get startingIndex() {
+        return this._startingIndex || 0;
+    }
+    get cssClassNames() {
+        const classNames = [
+            `sky-progress-indicator-mode-${this.displayModeResolved}`,
+        ];
+        if (this.isPassive) {
+            classNames.push('sky-progress-indicator-passive');
+        }
+        return classNames.join(' ');
+    }
+    /**
+     * Returns the newly-supported string union type value to be used by the template.
+     * @internal
+     */
+    get displayModeResolved() {
+        switch (this.displayMode) {
+            case SkyProgressIndicatorDisplayMode.Vertical:
+            case 'vertical':
+                return 'vertical';
+            default:
+                return 'horizontal';
+        }
+    }
+    get hasFinishButton() {
+        return this._hasFinishButton || false;
+    }
+    set hasFinishButton(value) {
+        this._hasFinishButton = value;
+    }
+    get itemStatuses() {
+        if (!this.itemComponents) {
+            return [];
+        }
+        return this.itemComponents.map((c) => c.status);
+    }
+    get activeIndex() {
+        return this._activeIndex || 0;
+    }
+    set activeIndex(value) {
+        const lastIndex = this.itemComponents.length - 1;
+        let newIndex = value;
+        if (value > lastIndex) {
+            newIndex = lastIndex;
+        }
+        else if (value < 0) {
+            newIndex = 0;
+        }
+        this._activeIndex = newIndex;
+    }
+    ngOnInit() {
+        this.initialized = true;
+        this.subscribeToMessageStream();
+    }
+    ngAfterContentInit() {
+        this.activeIndex = this.startingIndex;
+        this.updateSteps();
+        // Note: The delay here is to ensure all change detection on the items has finished. Without
+        // the delay we receive a changed before checked error for vertical progress indicators
+        this.itemComponents.changes
+            .pipe(takeUntil(this.ngUnsubscribe), delay(0))
+            .subscribe(() => {
+            this.updateSteps();
+            this.notifyChange();
+        });
+        // Wait for item components' change detection to complete
+        // before notifying changes to the consumer.
+        this.windowRef.nativeWindow.setTimeout(() => {
+            this.notifyChange();
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    sendMessage(message) {
+        this._messageStream.next(message);
+    }
+    gotoNextStep() {
+        const nextIndex = this.activeIndex + 1;
+        const lastIndex = this.itemComponents.length - 1;
+        if (nextIndex > lastIndex) {
+            return;
+        }
+        this.gotoStep(nextIndex);
+    }
+    gotoPreviousStep() {
+        const previousIndex = this.activeIndex - 1;
+        if (previousIndex < 0) {
+            return;
+        }
+        this.gotoStep(previousIndex);
+    }
+    gotoStep(index) {
+        this.activeIndex = index;
+        this.updateSteps();
+        this.notifyChange();
+    }
+    finishSteps() {
+        this.activeIndex = this.itemComponents.length - 1;
+        this.itemComponents.forEach((component) => {
+            component.status = SkyProgressIndicatorItemStatus.Complete;
+        });
+        this.notifyChange({
+            isComplete: true,
+        });
+    }
+    resetSteps() {
+        this.gotoStep(0);
+    }
+    updateSteps() {
+        if (this.activeIndex > this.itemComponents.length - 1) {
+            this.activeIndex--;
+        }
+        const activeIndex = this.activeIndex;
+        const isPassive = this.isPassive;
+        const isVertical = this.displayModeResolved === 'vertical';
+        this.itemComponents.forEach((component, i) => {
+            // Set visibility.
+            component.isVisible = activeIndex === i || isVertical;
+            // Set status.
+            let status;
+            if (activeIndex === i) {
+                if (isPassive) {
+                    status = SkyProgressIndicatorItemStatus.Pending;
+                }
+                else {
+                    status = SkyProgressIndicatorItemStatus.Active;
+                }
+            }
+            else if (activeIndex > i) {
+                status = SkyProgressIndicatorItemStatus.Complete;
+            }
+            else {
+                status = SkyProgressIndicatorItemStatus.Incomplete;
+            }
+            component.status = status;
+            // Show or hide the status markers.
+            component.showStatusMarker = isVertical;
+            // Show or hide the step number.
+            if (isPassive) {
+                component.hideStepNumber();
+            }
+            else {
+                component.showStepNumber(i + 1);
+            }
+            // If we're in passive mode, don't show titles for incomplete items.
+            component.showTitle = !(isPassive && activeIndex < i);
+        });
+    }
+    handleIncomingMessage(message) {
+        const value = message;
+        let type;
+        // Prints a deprecation warning if the consumer provides only `SkyProgressIndicatorMessageType`.
+        if (value.type === undefined) {
+            console.warn("[Deprecation warning] The progress indicator component's `messageStream` input is set " +
+                'to `Subject<SkyProgressIndicatorMessageType>`. We will remove this deprecated type in ' +
+                'the next major version release. Instead, set the `messageStream` input to a value of ' +
+                '`Subject<SkyProgressIndicatorMessage>`.');
+            type = value;
+        }
+        else {
+            type = value.type;
+        }
+        switch (type) {
+            case SkyProgressIndicatorMessageType.Progress:
+                this.gotoNextStep();
+                break;
+            case SkyProgressIndicatorMessageType.Regress:
+                this.gotoPreviousStep();
+                break;
+            case SkyProgressIndicatorMessageType.Finish:
+                this.finishSteps();
+                break;
+            case SkyProgressIndicatorMessageType.Reset:
+                this.resetSteps();
+                break;
+            case SkyProgressIndicatorMessageType.GoTo:
+                if (!value.data || value.data.activeIndex === undefined) {
+                    console.warn('A message type of `SkyProgressIndicatorMessageType.GoTo` was passed to the progress ' +
+                        'indicator, but no step index was provided. You can pass the desired active ' +
+                        'index via:\n' +
+                        '{\n' +
+                        '  type: SkyProgressIndicatorMessageType.GoTo,\n' +
+                        '  data: { activeIndex: 0 }\n' +
+                        '}');
+                    return;
+                }
+                this.gotoStep(value.data.activeIndex);
+                break;
+            default:
+                break;
+        }
+        // Update the view after a message is received.
+        this.changeDetector.markForCheck();
+    }
+    subscribeToMessageStream() {
+        if (this.initialized) {
+            if (this.messageStreamSub) {
+                this.messageStreamSub.unsubscribe();
+                this.messageStreamSub = undefined;
+            }
+            if (this._messageStream) {
+                this.messageStreamSub = this._messageStream
+                    .pipe(takeUntil(this.ngUnsubscribe))
+                    .subscribe((message) => {
+                    this.handleIncomingMessage(message);
+                });
+            }
+        }
+    }
+    notifyChange(change) {
+        this.progressChanges.next(Object.assign({}, {
+            activeIndex: this.activeIndex,
+            itemStatuses: this.itemStatuses,
+        }, change));
+    }
+}
+SkyProgressIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyProgressIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyProgressIndicatorComponent, selector: "sky-progress-indicator", inputs: { displayMode: "displayMode", isPassive: "isPassive", messageStream: "messageStream", startingIndex: "startingIndex" }, outputs: { progressChanges: "progressChanges" }, queries: [{ propertyName: "itemComponents", predicate: SkyProgressIndicatorItemComponent }], ngImport: i0, template: "<div class=\"sky-progress-indicator\" [ngClass]=\"cssClassNames\">\n  <div\n    *ngIf=\"displayModeResolved === 'horizontal'\"\n    class=\"sky-progress-indicator-horizontal-status-markers\"\n  >\n    <sky-progress-indicator-status-marker\n      *ngFor=\"let status of itemStatuses\"\n      [displayMode]=\"displayModeResolved\"\n      [status]=\"status\"\n    >\n    </sky-progress-indicator-status-marker>\n  </div>\n  <ng-content></ng-content>\n</div>\n", 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}\n"], components: [{ type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: ["displayMode", "status"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-progress-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-progress-indicator\" [ngClass]=\"cssClassNames\">\n  <div\n    *ngIf=\"displayModeResolved === 'horizontal'\"\n    class=\"sky-progress-indicator-horizontal-status-markers\"\n  >\n    <sky-progress-indicator-status-marker\n      *ngFor=\"let status of itemStatuses\"\n      [displayMode]=\"displayModeResolved\"\n      [status]=\"status\"\n    >\n    </sky-progress-indicator-status-marker>\n  </div>\n  <ng-content></ng-content>\n</div>\n", 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyAppWindowRef }]; }, propDecorators: { displayMode: [{
+                type: Input
+            }], isPassive: [{
+                type: Input
+            }], messageStream: [{
+                type: Input
+            }], startingIndex: [{
+                type: Input
+            }], progressChanges: [{
+                type: Output
+            }], itemComponents: [{
+                type: ContentChildren,
+                args: [SkyProgressIndicatorItemComponent]
+            }] } });
+
+/**
+ * Displays a button to navigate the steps in modal wizards. We recommend against using it in
+ * passive progress indicators and waterfall progress indicators.
+ */
+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;
+    }
+    get buttonType() {
+        if (this._buttonType === undefined) {
+            return 'next';
+        }
+        return this._buttonType;
+    }
+    /**
+     * Indicates whether to disable the nav button.
+     * @default false
+     */
+    set disabled(value) {
+        this._disabled = value;
+        this.changeDetector.markForCheck();
+    }
+    get disabled() {
+        const buttonType = this.buttonType;
+        const activeIndex = this.lastProgressChange.activeIndex;
+        const isLastStep = activeIndex === this.lastProgressChange.itemStatuses.length - 1;
+        if (buttonType === 'previous' && activeIndex === 0) {
+            return true;
+        }
+        if (buttonType === 'next' && isLastStep) {
+            return true;
+        }
+        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(() => {
+                    /* istanbul ignore else */
+                    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 = [`sky-progress-indicator-nav-button-${this.buttonType}`];
+        switch (buttonType) {
+            case 'next':
+            case 'finish':
+                classNames.push('sky-btn-primary');
+                break;
+            case 'reset':
+                classNames.push('sky-btn-link');
+                break;
+            default:
+                classNames.push('sky-btn-default');
+                break;
+        }
+        return classNames.join(' ');
+    }
+    get buttonLabelResourceString() {
+        return `skyux_progress_indicator_navigator_${this.buttonType}`;
+    }
+    set isVisible(value) {
+        this._isVisible = value;
+        this.changeDetector.markForCheck();
+    }
+    get isVisible() {
+        return this._isVisible || false;
+    }
+    ngAfterViewInit() {
+        if (!this.progressIndicator && this.parentComponent) {
+            this.progressIndicator = this.parentComponent;
+        }
+        else if (!this.progressIndicator) {
+            this.progressIndicator = undefined;
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.actionClick.complete();
+    }
+    onClick(event) {
+        event.preventDefault();
+        let type;
+        switch (this.buttonType) {
+            case 'finish':
+                type = SkyProgressIndicatorMessageType.Finish;
+                break;
+            case 'next':
+                type = SkyProgressIndicatorMessageType.Progress;
+                break;
+            case 'previous':
+                type = SkyProgressIndicatorMessageType.Regress;
+                break;
+            case 'reset':
+                type = SkyProgressIndicatorMessageType.Reset;
+                break;
+            default:
+                break;
+        }
+        // If the consumer has subscribed to the `actionClick` event,
+        // allow them to decide when to advance to the next step.
+        if (this.actionClick.observers.length > 0) {
+            this.actionClick.emit({
+                event,
+                progressHandler: new SkyProgressIndicatorActionClickProgressHandler(() => {
+                    this.progressIndicator.sendMessage({ type });
+                }),
+            });
+        }
+        else {
+            this.progressIndicator.sendMessage({ type });
+        }
+    }
+    updateButtonVisibility(change) {
+        const isLastStep = change.activeIndex === change.itemStatuses.length - 1;
+        const buttonType = this.buttonType;
+        // Hide the button if all steps are complete
+        // (except for the reset button)
+        if (buttonType !== 'reset' && change.isComplete) {
+            this.isVisible = false;
+            return;
+        }
+        if (buttonType === 'finish') {
+            this.isVisible = isLastStep;
+            return;
+        }
+        // Hide the next button on the last step only if a finish button exists.
+        if (buttonType === 'next' &&
+            isLastStep &&
+            this.progressIndicator.hasFinishButton) {
+            this.isVisible = false;
+            return;
+        }
+        this.isVisible = true;
+    }
+}
+SkyProgressIndicatorNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyProgressIndicatorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyProgressIndicatorNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyProgressIndicatorNavButtonComponent, selector: "sky-progress-indicator-nav-button", inputs: { buttonText: "buttonText", buttonType: "buttonType", disabled: "disabled", progressIndicator: "progressIndicator" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<button\n  *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", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-progress-indicator-nav-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *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" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: SkyProgressIndicatorComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { buttonText: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], progressIndicator: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+/**
+ * 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.
+ */
+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();
+    }
+    get disabled() {
+        return this._disabled || false;
+    }
+    ngOnDestroy() {
+        this.resetClick.complete();
+    }
+    onClick() {
+        this.resetClick.emit();
+        this.progressIndicator.sendMessage({
+            type: SkyProgressIndicatorMessageType.Reset,
+        });
+    }
+}
+SkyProgressIndicatorResetButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyProgressIndicatorResetButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyProgressIndicatorResetButtonComponent, selector: "sky-progress-indicator-reset-button", inputs: { disabled: "disabled", progressIndicator: "progressIndicator" }, outputs: { resetClick: "resetClick" }, ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-link\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-progress-indicator-reset-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"sky-btn sky-btn-link\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</button>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], progressIndicator: [{
+                type: Input
+            }], resetClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Specifies a header to display above the progress indicator.
+ */
+class SkyProgressIndicatorTitleComponent {
+}
+SkyProgressIndicatorTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyProgressIndicatorTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyProgressIndicatorTitleComponent, selector: "sky-progress-indicator-title", ngImport: i0, 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", 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}\n"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-progress-indicator-title', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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}\n"] }]
+        }] });
+
+class SkyProgressIndicatorModule {
+}
+SkyProgressIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorModule, declarations: [SkyProgressIndicatorComponent,
+        SkyProgressIndicatorItemComponent,
+        SkyProgressIndicatorNavButtonComponent,
+        SkyProgressIndicatorResetButtonComponent,
+        SkyProgressIndicatorStatusMarkerComponent,
+        SkyProgressIndicatorTitleComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyProgressIndicatorResourcesModule,
+        SkyThemeModule], exports: [SkyProgressIndicatorComponent,
+        SkyProgressIndicatorItemComponent,
+        SkyProgressIndicatorNavButtonComponent,
+        SkyProgressIndicatorResetButtonComponent,
+        SkyProgressIndicatorTitleComponent] });
+SkyProgressIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyProgressIndicatorResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyProgressIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyProgressIndicatorComponent,
+                        SkyProgressIndicatorItemComponent,
+                        SkyProgressIndicatorNavButtonComponent,
+                        SkyProgressIndicatorResetButtonComponent,
+                        SkyProgressIndicatorStatusMarkerComponent,
+                        SkyProgressIndicatorTitleComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyProgressIndicatorResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyProgressIndicatorComponent,
+                        SkyProgressIndicatorItemComponent,
+                        SkyProgressIndicatorNavButtonComponent,
+                        SkyProgressIndicatorResetButtonComponent,
+                        SkyProgressIndicatorTitleComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyProgressIndicatorActionClickProgressHandler, SkyProgressIndicatorDisplayMode, SkyProgressIndicatorItemStatus, SkyProgressIndicatorMessageType, SkyProgressIndicatorModule, SkyProgressIndicatorItemComponent as λ1, SkyProgressIndicatorComponent as λ2, SkyProgressIndicatorNavButtonComponent as λ3, SkyProgressIndicatorResetButtonComponent as λ4, SkyProgressIndicatorTitleComponent as λ5 };
+//# sourceMappingURL=skyux-progress-indicator.mjs.map