@skyux/progress-indicator 8.7.2 → 9.0.0-alpha.1

package/fesm2022/skyux-progress-indicator.mjs

@@ -0,0 +1,1006 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Pipe, Component, ChangeDetectionStrategy, Optional, Input, EventEmitter, Output, ContentChildren } from '@angular/core';
+import * as i1$1 from '@skyux/core';
+import { SkyTrimModule } from '@skyux/core';
+import * as i3$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i3 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';
+
+/**
+ * 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyProgressIndicatorResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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) {
+    /**
+     * The item is active.
+     */
+    SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Active"] = 0] = "Active";
+    /**
+     * The item is complete.
+     */
+    SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Complete"] = 1] = "Complete";
+    /**
+     * The item is incomplete.
+     */
+    SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Incomplete"] = 2] = "Incomplete";
+    /**
+     * The item is pending.
+     */
+    SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Pending"] = 3] = "Pending";
+})(SkyProgressIndicatorItemStatus || (SkyProgressIndicatorItemStatus = {}));
+
+class SkyProgressIndicatorMarkerClassPipe {
+    transform(displayMode, status) {
+        let statusName;
+        switch (status) {
+            case SkyProgressIndicatorItemStatus.Complete:
+                statusName = 'complete';
+                break;
+            case SkyProgressIndicatorItemStatus.Incomplete:
+                statusName = 'incomplete';
+                break;
+            case SkyProgressIndicatorItemStatus.Pending:
+                statusName = 'pending';
+                break;
+            default:
+                statusName = 'active';
+        }
+        return `sky-progress-indicator-status-marker-mode-${displayMode} sky-progress-indicator-status-marker-status-${statusName}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorMarkerClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorMarkerClassPipe, name: "skyProgressIndicatorMarkerClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorMarkerClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyProgressIndicatorMarkerClass',
+                }]
+        }] });
+
+/**
+ * Specifies the content to display in the status marker.
+ * @internal
+ */
+class SkyProgressIndicatorStatusMarkerComponent {
+    set displayMode(value) {
+        this.#_displayMode = value;
+    }
+    get displayMode() {
+        return this.#_displayMode;
+    }
+    set status(value) {
+        this.#_status = value;
+        this.isComplete = this.#_status === SkyProgressIndicatorItemStatus.Complete;
+    }
+    get status() {
+        return this.#_status;
+    }
+    #ngUnsubscribe;
+    #changeDetector;
+    #_status;
+    #_displayMode;
+    constructor(changeDetector, themeSvc) {
+        this.isComplete = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#_status = SkyProgressIndicatorItemStatus.Active;
+        this.#_displayMode = 'vertical';
+        this.#changeDetector = changeDetector;
+        // Update icons when theme changes.
+        themeSvc?.settingsChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.#changeDetector.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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]=\"displayMode | skyProgressIndicatorMarkerClass : status\"\n>\n  <div\n    *skyThemeIf=\"'default'\"\n    class=\"sky-progress-indicator-status-marker-icon\"\n  >\n    <sky-icon *ngIf=\"isComplete\" icon=\"check\"></sky-icon>\n  </div>\n  <div *skyThemeIf=\"'modern'\" class=\"sky-progress-indicator-status-marker-icon\">\n    <sky-icon *ngIf=\"isComplete\" icon=\"check\" iconType=\"skyux\"></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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: SkyProgressIndicatorMarkerClassPipe, name: "skyProgressIndicatorMarkerClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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]=\"displayMode | skyProgressIndicatorMarkerClass : status\"\n>\n  <div\n    *skyThemeIf=\"'default'\"\n    class=\"sky-progress-indicator-status-marker-icon\"\n  >\n    <sky-icon *ngIf=\"isComplete\" icon=\"check\"></sky-icon>\n  </div>\n  <div *skyThemeIf=\"'modern'\" class=\"sky-progress-indicator-status-marker-icon\">\n    <sky-icon *ngIf=\"isComplete\" icon=\"check\" iconType=\"skyux\"></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
+            }] } });
+
+const STATUS_DEFAULT = SkyProgressIndicatorItemStatus.Incomplete;
+const STATUS_NAME_DEFAULT = 'incomplete';
+/**
+ * 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 {
+    /**
+     * The step label for the step in the progress indicator.
+     * @required
+     */
+    set title(value) {
+        this.#_title = value;
+        this.#updateFormattedTitle();
+    }
+    get title() {
+        return this.#_title;
+    }
+    set status(value) {
+        if (value === this.#_status) {
+            return;
+        }
+        /* istanbul ignore next */
+        this.#_status = value ?? STATUS_DEFAULT;
+        switch (this.#_status) {
+            case SkyProgressIndicatorItemStatus.Active:
+                this.statusName = 'active';
+                break;
+            case SkyProgressIndicatorItemStatus.Complete:
+                this.statusName = 'complete';
+                break;
+            case SkyProgressIndicatorItemStatus.Incomplete:
+                this.statusName = 'incomplete';
+                break;
+            case SkyProgressIndicatorItemStatus.Pending:
+                this.statusName = 'pending';
+                break;
+        }
+        this.#changeDetector.markForCheck();
+    }
+    get status() {
+        return this.#_status;
+    }
+    set isVisible(value) {
+        this.#_isVisible = !!value;
+        this.#changeDetector.markForCheck();
+    }
+    get isVisible() {
+        return this.#_isVisible;
+    }
+    set showStatusMarker(value) {
+        this.#_showStatusMarker = !!value;
+        this.#changeDetector.markForCheck();
+    }
+    get showStatusMarker() {
+        return this.#_showStatusMarker;
+    }
+    set showTitle(value) {
+        this.#_showTitle = !!value;
+        this.#changeDetector.markForCheck();
+    }
+    get showTitle() {
+        return this.#_showTitle;
+    }
+    #titlePrefix;
+    #changeDetector;
+    #_isVisible;
+    #_title;
+    #_showStatusMarker;
+    #_showTitle;
+    #_status;
+    constructor(changeDetector) {
+        this.statusName = STATUS_NAME_DEFAULT;
+        this.#_isVisible = false;
+        this.#_showStatusMarker = true;
+        this.#_showTitle = true;
+        this.#_status = STATUS_DEFAULT;
+        this.#changeDetector = changeDetector;
+    }
+    ngOnInit() {
+        this.#updateFormattedTitle();
+    }
+    showStepNumber(step) {
+        this.#titlePrefix = `${step} - `;
+        this.#updateFormattedTitle();
+    }
+    hideStepNumber() {
+        this.#titlePrefix = '';
+        this.#updateFormattedTitle();
+    }
+    #updateFormattedTitle() {
+        this.formattedTitle = `${this.#titlePrefix}${this.title}`;
+        this.#changeDetector.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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      skyTrim\n    >\n      {{ formattedTitle }}\n      <span class=\"sky-control-help-container\" skyTrim\n        ><ng-content select=\".sky-control-help\"></ng-content\n      ></span>\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }, { kind: "component", type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: ["displayMode", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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      skyTrim\n    >\n      {{ formattedTitle }}\n      <span class=\"sky-control-help-container\" skyTrim\n        ><ng-content select=\".sky-control-help\"></ng-content\n      ></span>\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
+            }] } });
+
+class SkyProgressIndicatorNavButtonClass {
+    transform(buttonType) {
+        const classNames = [`sky-progress-indicator-nav-button-${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');
+        }
+        return classNames;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorNavButtonClass, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorNavButtonClass, name: "skyProgressIndicatorNavButtonClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorNavButtonClass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyProgressIndicatorNavButtonClass',
+                }]
+        }] });
+
+class SkyProgressIndicatorNavButtonDisabledPipe {
+    transform(disabled, buttonType, activeIndex, itemStatuses) {
+        const isLastStep = itemStatuses && activeIndex === itemStatuses.length - 1;
+        return ((buttonType === 'next' && isLastStep) ||
+            (buttonType === 'previous' && activeIndex === 0) ||
+            disabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorNavButtonDisabledPipe, name: "skyProgressIndicatorNavButtonDisabled" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorNavButtonDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyProgressIndicatorNavButtonDisabled',
+                }]
+        }] });
+
+/**
+ * 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) {
+    /**
+     * The current step is complete.
+     * This completes the active item and moves to the next item.
+     */
+    SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Progress"] = 0] = "Progress";
+    /**
+     * Returns progress to the previous step.
+     * This moves from the active item to the item that precedes it.
+     */
+    SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Regress"] = 1] = "Regress";
+    /**
+     * Progress is incomplete.
+     * This marks all items as incomplete and sets the first item as the active item.
+     */
+    SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Reset"] = 2] = "Reset";
+    /**
+     * Progress is complete.
+     * This marks all items as complete and sets the last item as the active item.
+     */
+    SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Finish"] = 3] = "Finish";
+    /**
+     * Moves progress 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) {
+    /**
+     * The vertical layout for the progress indicator.
+     */
+    SkyProgressIndicatorDisplayMode[SkyProgressIndicatorDisplayMode["Vertical"] = 0] = "Vertical";
+    /**
+     * The horizontal layout for the progress indicator.
+     */
+    SkyProgressIndicatorDisplayMode[SkyProgressIndicatorDisplayMode["Horizontal"] = 1] = "Horizontal";
+})(SkyProgressIndicatorDisplayMode || (SkyProgressIndicatorDisplayMode = {}));
+
+class SkyProgressIndicatorComponent {
+    /**
+     * The orientation of the progress indicator, which can be vertical or horizontal.
+     * 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.
+     * @deprecated The property was designed to create wizards by setting `displayMode="horizontal"` on progress indicators in modals,
+     * but this wizard implementation was replaced by the
+     * [Wizard (Tabs) component](https://developer.blackbaud.com/skyux/components/progress-indicator).
+     * @default "vertical"
+     */
+    set displayMode(value) {
+        switch (value) {
+            case SkyProgressIndicatorDisplayMode.Horizontal:
+            case 'horizontal':
+                this.#_displayMode = 'horizontal';
+                break;
+            default:
+                this.#_displayMode = 'vertical';
+        }
+        this.#updateCssClassNames();
+        if (this.#_displayMode === 'horizontal') {
+            this.#logger.deprecated('SkyProgressIndicator wizard', {
+                deprecationMajorVersion: 6,
+                replacementRecommendation: 'Use Wizard (Tabs) instead.',
+            });
+        }
+    }
+    get displayMode() {
+        return this.#_displayMode;
+    }
+    /**
+     * 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;
+        this.#updateCssClassNames();
+    }
+    get isPassive() {
+        return this.#_isPassive;
+    }
+    /**
+     * The 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 || new Subject();
+        this.#subscribeToMessageStream();
+    }
+    /**
+     * 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 || 0;
+    }
+    get startingIndex() {
+        return this.#_startingIndex;
+    }
+    get hasFinishButton() {
+        return this.#_hasFinishButton;
+    }
+    set hasFinishButton(value) {
+        this.#_hasFinishButton = value;
+    }
+    set #activeIndex(value) {
+        const lastIndex = (this.itemComponents?.length || 0) - 1;
+        this.#_activeIndex = Math.max(Math.min(value || 0, lastIndex), 0);
+    }
+    get #activeIndex() {
+        return this.#_activeIndex;
+    }
+    #_activeIndex;
+    #_displayMode;
+    #_hasFinishButton;
+    #_isPassive;
+    #_startingIndex;
+    #messageStreamSub;
+    #initialized;
+    #ngUnsubscribe;
+    #messageStream;
+    #changeDetector;
+    #windowRef;
+    #logger;
+    constructor(changeDetector, windowRef, logger) {
+        /**
+         * Fires when the progress indicator changes the status of an item.
+         */
+        this.progressChanges = new EventEmitter();
+        this.cssClassNames = [];
+        this.itemStatuses = [];
+        this.#_activeIndex = 0;
+        this.#_displayMode = 'vertical';
+        this.#_isPassive = false;
+        this.#_startingIndex = 0;
+        this.#initialized = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#messageStream = new Subject();
+        this.#changeDetector = changeDetector;
+        this.#windowRef = windowRef;
+        this.#logger = logger;
+    }
+    ngOnInit() {
+        this.#initialized = true;
+        this.#updateCssClassNames();
+        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.#updateStatusesAndNotify();
+        });
+        // Wait for item components' change detection to complete
+        // before notifying changes to the consumer.
+        this.#windowRef.nativeWindow.setTimeout(() => {
+            this.#updateStatusesAndNotify();
+        });
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    sendMessage(message) {
+        this.#messageStream.next(message);
+    }
+    #isPassiveAndVertical() {
+        // Currently, passive mode is not supported for horizontal displays.
+        if (this.displayMode === 'horizontal') {
+            return false;
+        }
+        return this.isPassive;
+    }
+    #gotoNextStep() {
+        const nextIndex = this.#activeIndex + 1;
+        const lastIndex = this.#getLastIndex();
+        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.#updateStatusesAndNotify();
+    }
+    #finishSteps() {
+        this.#activeIndex = this.#getLastIndex();
+        this.itemComponents?.forEach((component) => {
+            component.status = SkyProgressIndicatorItemStatus.Complete;
+        });
+        this.#updateStatusesAndNotify({
+            isComplete: true,
+        });
+    }
+    #resetSteps() {
+        this.#gotoStep(0);
+    }
+    #updateSteps() {
+        if (this.#activeIndex > this.#getLastIndex()) {
+            this.#activeIndex = this.#activeIndex - 1;
+        }
+        const activeIndex = this.#activeIndex;
+        const isPassiveAndVertical = this.#isPassiveAndVertical();
+        const isVertical = this.displayMode === 'vertical';
+        this.itemComponents?.forEach((component, i) => {
+            // Set visibility.
+            component.isVisible = activeIndex === i || isVertical;
+            // Set status.
+            let status;
+            if (activeIndex === i) {
+                if (isPassiveAndVertical) {
+                    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 (isPassiveAndVertical) {
+                component.hideStepNumber();
+            }
+            else {
+                component.showStepNumber(i + 1);
+            }
+            // If we're in passive mode, don't show titles for incomplete items.
+            component.showTitle = !(isPassiveAndVertical && activeIndex < i);
+        });
+    }
+    #updateItemStatuses() {
+        /* istanbul ignore next */
+        this.itemStatuses = this.itemComponents?.map((c) => c.status) || [];
+    }
+    #updateCssClassNames() {
+        const classNames = [`sky-progress-indicator-mode-${this.displayMode}`];
+        if (this.#isPassiveAndVertical()) {
+            classNames.push('sky-progress-indicator-passive');
+        }
+        this.cssClassNames = classNames;
+    }
+    #handleIncomingMessage(message) {
+        const indicatorMessage = message;
+        let type;
+        // Prints a deprecation warning if the consumer provides only `SkyProgressIndicatorMessageType`.
+        if (indicatorMessage.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 = message;
+        }
+        else {
+            type = indicatorMessage.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 (!indicatorMessage.data ||
+                    indicatorMessage.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(indicatorMessage.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);
+                });
+            }
+        }
+    }
+    #updateStatusesAndNotify(change) {
+        this.#updateItemStatuses();
+        this.progressChanges.next(Object.assign({}, {
+            activeIndex: this.#activeIndex,
+            itemStatuses: this.itemStatuses,
+        }, change));
+    }
+    #getLastIndex() {
+        return (this.itemComponents?.length || 0) - 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyAppWindowRef }, { token: i1$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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=\"displayMode === 'horizontal'\"\n    class=\"sky-progress-indicator-horizontal-status-markers\"\n  >\n    <sky-progress-indicator-status-marker\n      *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", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: ["displayMode", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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=\"displayMode === 'horizontal'\"\n    class=\"sky-progress-indicator-horizontal-status-markers\"\n  >\n    <sky-progress-indicator-status-marker\n      *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", 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 }, { type: i1$1.SkyLogService }]; }, propDecorators: { displayMode: [{
+                type: Input
+            }], isPassive: [{
+                type: Input
+            }], messageStream: [{
+                type: Input
+            }], startingIndex: [{
+                type: Input
+            }], progressChanges: [{
+                type: Output
+            }], itemComponents: [{
+                type: ContentChildren,
+                args: [SkyProgressIndicatorItemComponent]
+            }] } });
+
+const BUTTON_TYPE_DEFAULT = 'next';
+/**
+ * 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 {
+    /**
+     * The type of nav button to include.
+     * @default "next"
+     */
+    set buttonType(value) {
+        this.#_buttonType = value || BUTTON_TYPE_DEFAULT;
+    }
+    get buttonType() {
+        return this.#_buttonType;
+    }
+    /**
+     * Whether to disable the nav button.
+     * @default false
+     */
+    set disabled(value) {
+        this.#_disabled = value;
+        this.#changeDetector.markForCheck();
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    /**
+     * The progress indicator component to associate with the nav button.
+     * @required
+     */
+    set progressIndicator(value) {
+        this.#_progressIndicator = value;
+        if (this.#_progressIndicator) {
+            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;
+    }
+    set isVisible(value) {
+        this.#_isVisible = value;
+        this.#changeDetector.markForCheck();
+    }
+    get isVisible() {
+        return this.#_isVisible;
+    }
+    #ngUnsubscribe;
+    #parentTimeout;
+    #_buttonType;
+    #_disabled;
+    #_isVisible;
+    #_progressIndicator;
+    #changeDetector;
+    #parentComponent;
+    constructor(changeDetector, 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();
+        this.#_buttonType = BUTTON_TYPE_DEFAULT;
+        this.#changeDetector = changeDetector;
+        this.#parentComponent = parentComponent;
+    }
+    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;
+        }
+        // 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.#sendMessage(type);
+                }),
+            });
+        }
+        else {
+            this.#sendMessage(type);
+        }
+    }
+    #sendMessage(type) {
+        if (type !== undefined) {
+            this.progressIndicator?.sendMessage({ type });
+        }
+    }
+    #updateButtonVisibility(change) {
+        const isLastStep = change.itemStatuses &&
+            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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyProgressIndicatorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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 sky-margin-inline-sm\"\n  type=\"button\"\n  [disabled]=\"\n    disabled\n      | skyProgressIndicatorNavButtonDisabled\n        : buttonType\n        : lastProgressChange?.activeIndex\n        : lastProgressChange?.itemStatuses\n  \"\n  [ngClass]=\"buttonType | skyProgressIndicatorNavButtonClass\"\n  (click)=\"onClick($event)\"\n>\n  {{\n    buttonText ||\n      ('skyux_progress_indicator_navigator_' + buttonType | skyLibResources)\n  }}\n</button>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyProgressIndicatorNavButtonClass, name: "skyProgressIndicatorNavButtonClass" }, { kind: "pipe", type: SkyProgressIndicatorNavButtonDisabledPipe, name: "skyProgressIndicatorNavButtonDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 sky-margin-inline-sm\"\n  type=\"button\"\n  [disabled]=\"\n    disabled\n      | skyProgressIndicatorNavButtonDisabled\n        : buttonType\n        : lastProgressChange?.activeIndex\n        : lastProgressChange?.itemStatuses\n  \"\n  [ngClass]=\"buttonType | skyProgressIndicatorNavButtonClass\"\n  (click)=\"onClick($event)\"\n>\n  {{\n    buttonText ||\n      ('skyux_progress_indicator_navigator_' + buttonType | skyLibResources)\n  }}\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 {
+    /**
+     * Whether to disable the reset button.
+     * @default false
+     */
+    set disabled(value) {
+        this.#_disabled = value;
+        this.#changeDetector.markForCheck();
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    #_disabled;
+    #changeDetector;
+    constructor(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();
+        this.#changeDetector = changeDetector;
+        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".');
+    }
+    ngOnDestroy() {
+        this.resetClick.complete();
+    }
+    onClick() {
+        this.resetClick.emit();
+        this.progressIndicator?.sendMessage({
+            type: SkyProgressIndicatorMessageType.Reset,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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-font-heading-2': '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"], dependencies: [{ kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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-font-heading-2': '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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorModule, declarations: [SkyProgressIndicatorComponent,
+            SkyProgressIndicatorItemComponent,
+            SkyProgressIndicatorMarkerClassPipe,
+            SkyProgressIndicatorNavButtonClass,
+            SkyProgressIndicatorNavButtonDisabledPipe,
+            SkyProgressIndicatorNavButtonComponent,
+            SkyProgressIndicatorResetButtonComponent,
+            SkyProgressIndicatorStatusMarkerComponent,
+            SkyProgressIndicatorTitleComponent], imports: [CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyProgressIndicatorResourcesModule,
+            SkyThemeModule,
+            SkyTrimModule], exports: [SkyProgressIndicatorComponent,
+            SkyProgressIndicatorItemComponent,
+            SkyProgressIndicatorNavButtonComponent,
+            SkyProgressIndicatorResetButtonComponent,
+            SkyProgressIndicatorTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorModule, imports: [CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyProgressIndicatorResourcesModule,
+            SkyThemeModule,
+            SkyTrimModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyProgressIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyProgressIndicatorComponent,
+                        SkyProgressIndicatorItemComponent,
+                        SkyProgressIndicatorMarkerClassPipe,
+                        SkyProgressIndicatorNavButtonClass,
+                        SkyProgressIndicatorNavButtonDisabledPipe,
+                        SkyProgressIndicatorNavButtonComponent,
+                        SkyProgressIndicatorResetButtonComponent,
+                        SkyProgressIndicatorStatusMarkerComponent,
+                        SkyProgressIndicatorTitleComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyProgressIndicatorResourcesModule,
+                        SkyThemeModule,
+                        SkyTrimModule,
+                    ],
+                    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