@skyux/progress-indicator 8.7.0 → 9.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.mjs +111 -0
- package/{esm2020 → esm2022}/lib/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button-class.pipe.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button-disabled.pipe.mjs +4 -4
- package/esm2022/lib/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.mjs +200 -0
- package/esm2022/lib/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.mjs +56 -0
- package/{esm2020 → esm2022}/lib/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker-class.pipe.mjs +4 -4
- package/esm2022/lib/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.mjs +62 -0
- package/{esm2020 → esm2022}/lib/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.mjs +4 -4
- package/esm2022/lib/modules/progress-indicator/progress-indicator.component.mjs +330 -0
- package/{esm2020 → esm2022}/lib/modules/progress-indicator/progress-indicator.module.mjs +27 -27
- package/esm2022/lib/modules/shared/sky-progress-indicator-resources.module.mjs +50 -0
- package/fesm2022/skyux-progress-indicator.mjs +1006 -0
- package/{fesm2020 → fesm2022}/skyux-progress-indicator.mjs.map +1 -1
- package/lib/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.d.ts +1 -1
- package/lib/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.d.ts +1 -1
- package/lib/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.d.ts +1 -1
- package/lib/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.d.ts +1 -1
- package/lib/modules/progress-indicator/progress-indicator.component.d.ts +1 -1
- package/package.json +11 -17
- package/esm2020/lib/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.mjs +0 -110
- package/esm2020/lib/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.mjs +0 -200
- package/esm2020/lib/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.mjs +0 -59
- package/esm2020/lib/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.mjs +0 -62
- package/esm2020/lib/modules/progress-indicator/progress-indicator.component.mjs +0 -312
- package/esm2020/lib/modules/shared/sky-progress-indicator-resources.module.mjs +0 -50
- package/fesm2015/skyux-progress-indicator.mjs +0 -995
- package/fesm2015/skyux-progress-indicator.mjs.map +0 -1
- package/fesm2020/skyux-progress-indicator.mjs +0 -986
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-action-click-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-action-click-progress-handler.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-change.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-display-mode-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-item-status.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-message-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-message.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/progress-indicator/types/progress-indicator-nav-button-type.mjs +0 -0
- /package/{esm2020 → esm2022}/skyux-progress-indicator.mjs +0 -0
|
@@ -1,986 +0,0 @@
|
|
|
1
|
-
import * as i2 from '@angular/common';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Pipe, Component, ChangeDetectionStrategy, Optional, Input, EventEmitter, Output, ContentChildren } from '@angular/core';
|
|
5
|
-
import * as i1$1 from '@skyux/core';
|
|
6
|
-
import { SkyTrimModule } from '@skyux/core';
|
|
7
|
-
import * as i3$1 from '@skyux/i18n';
|
|
8
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
9
|
-
import * as i3 from '@skyux/indicators';
|
|
10
|
-
import { SkyIconModule } from '@skyux/indicators';
|
|
11
|
-
import * as i1 from '@skyux/theme';
|
|
12
|
-
import { SkyThemeModule } from '@skyux/theme';
|
|
13
|
-
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
14
|
-
import { Subject } from 'rxjs';
|
|
15
|
-
import { takeUntil, delay, distinctUntilChanged } from 'rxjs/operators';
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
19
|
-
* The contents of this file were automatically generated by
|
|
20
|
-
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-progress-indicator' schematic.
|
|
21
|
-
* To update this file, simply rerun the command.
|
|
22
|
-
*/
|
|
23
|
-
const RESOURCES = {
|
|
24
|
-
'EN-US': {
|
|
25
|
-
skyux_progress_indicator_navigator_finish: { message: 'Finish' },
|
|
26
|
-
skyux_progress_indicator_navigator_next: { message: 'Next' },
|
|
27
|
-
skyux_progress_indicator_navigator_previous: { message: 'Previous' },
|
|
28
|
-
skyux_progress_indicator_navigator_reset: { message: 'Reset' },
|
|
29
|
-
},
|
|
30
|
-
};
|
|
31
|
-
class SkyProgressIndicatorResourcesProvider {
|
|
32
|
-
getString(localeInfo, name) {
|
|
33
|
-
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Import into any component library module that needs to use resource strings.
|
|
38
|
-
*/
|
|
39
|
-
class SkyProgressIndicatorResourcesModule {
|
|
40
|
-
}
|
|
41
|
-
SkyProgressIndicatorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
42
|
-
SkyProgressIndicatorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorResourcesModule, exports: [SkyI18nModule] });
|
|
43
|
-
SkyProgressIndicatorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorResourcesModule, providers: [
|
|
44
|
-
{
|
|
45
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
46
|
-
useClass: SkyProgressIndicatorResourcesProvider,
|
|
47
|
-
multi: true,
|
|
48
|
-
},
|
|
49
|
-
], imports: [SkyI18nModule] });
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorResourcesModule, decorators: [{
|
|
51
|
-
type: NgModule,
|
|
52
|
-
args: [{
|
|
53
|
-
exports: [SkyI18nModule],
|
|
54
|
-
providers: [
|
|
55
|
-
{
|
|
56
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
57
|
-
useClass: SkyProgressIndicatorResourcesProvider,
|
|
58
|
-
multi: true,
|
|
59
|
-
},
|
|
60
|
-
],
|
|
61
|
-
}]
|
|
62
|
-
}] });
|
|
63
|
-
|
|
64
|
-
var SkyProgressIndicatorItemStatus;
|
|
65
|
-
(function (SkyProgressIndicatorItemStatus) {
|
|
66
|
-
/**
|
|
67
|
-
* The item is active.
|
|
68
|
-
*/
|
|
69
|
-
SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Active"] = 0] = "Active";
|
|
70
|
-
/**
|
|
71
|
-
* The item is complete.
|
|
72
|
-
*/
|
|
73
|
-
SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Complete"] = 1] = "Complete";
|
|
74
|
-
/**
|
|
75
|
-
* The item is incomplete.
|
|
76
|
-
*/
|
|
77
|
-
SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Incomplete"] = 2] = "Incomplete";
|
|
78
|
-
/**
|
|
79
|
-
* The item is pending.
|
|
80
|
-
*/
|
|
81
|
-
SkyProgressIndicatorItemStatus[SkyProgressIndicatorItemStatus["Pending"] = 3] = "Pending";
|
|
82
|
-
})(SkyProgressIndicatorItemStatus || (SkyProgressIndicatorItemStatus = {}));
|
|
83
|
-
|
|
84
|
-
class SkyProgressIndicatorMarkerClassPipe {
|
|
85
|
-
transform(displayMode, status) {
|
|
86
|
-
let statusName;
|
|
87
|
-
switch (status) {
|
|
88
|
-
case SkyProgressIndicatorItemStatus.Complete:
|
|
89
|
-
statusName = 'complete';
|
|
90
|
-
break;
|
|
91
|
-
case SkyProgressIndicatorItemStatus.Incomplete:
|
|
92
|
-
statusName = 'incomplete';
|
|
93
|
-
break;
|
|
94
|
-
case SkyProgressIndicatorItemStatus.Pending:
|
|
95
|
-
statusName = 'pending';
|
|
96
|
-
break;
|
|
97
|
-
default:
|
|
98
|
-
statusName = 'active';
|
|
99
|
-
}
|
|
100
|
-
return `sky-progress-indicator-status-marker-mode-${displayMode} sky-progress-indicator-status-marker-status-${statusName}`;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
SkyProgressIndicatorMarkerClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorMarkerClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
104
|
-
SkyProgressIndicatorMarkerClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorMarkerClassPipe, name: "skyProgressIndicatorMarkerClass" });
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorMarkerClassPipe, decorators: [{
|
|
106
|
-
type: Pipe,
|
|
107
|
-
args: [{
|
|
108
|
-
name: 'skyProgressIndicatorMarkerClass',
|
|
109
|
-
}]
|
|
110
|
-
}] });
|
|
111
|
-
|
|
112
|
-
var _SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe, _SkyProgressIndicatorStatusMarkerComponent_changeDetector, _SkyProgressIndicatorStatusMarkerComponent__status, _SkyProgressIndicatorStatusMarkerComponent__displayMode;
|
|
113
|
-
/**
|
|
114
|
-
* Specifies the content to display in the status marker.
|
|
115
|
-
* @internal
|
|
116
|
-
*/
|
|
117
|
-
class SkyProgressIndicatorStatusMarkerComponent {
|
|
118
|
-
set displayMode(value) {
|
|
119
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorStatusMarkerComponent__displayMode, value, "f");
|
|
120
|
-
}
|
|
121
|
-
get displayMode() {
|
|
122
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent__displayMode, "f");
|
|
123
|
-
}
|
|
124
|
-
set status(value) {
|
|
125
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorStatusMarkerComponent__status, value, "f");
|
|
126
|
-
this.isComplete = __classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent__status, "f") === SkyProgressIndicatorItemStatus.Complete;
|
|
127
|
-
}
|
|
128
|
-
get status() {
|
|
129
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent__status, "f");
|
|
130
|
-
}
|
|
131
|
-
constructor(changeDetector, themeSvc) {
|
|
132
|
-
this.isComplete = false;
|
|
133
|
-
_SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe.set(this, new Subject());
|
|
134
|
-
_SkyProgressIndicatorStatusMarkerComponent_changeDetector.set(this, void 0);
|
|
135
|
-
_SkyProgressIndicatorStatusMarkerComponent__status.set(this, SkyProgressIndicatorItemStatus.Active);
|
|
136
|
-
_SkyProgressIndicatorStatusMarkerComponent__displayMode.set(this, 'vertical');
|
|
137
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorStatusMarkerComponent_changeDetector, changeDetector, "f");
|
|
138
|
-
// Update icons when theme changes.
|
|
139
|
-
themeSvc?.settingsChange
|
|
140
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe, "f")))
|
|
141
|
-
.subscribe(() => {
|
|
142
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_changeDetector, "f").markForCheck();
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
ngOnDestroy() {
|
|
146
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe, "f").next();
|
|
147
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe, "f").complete();
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
_SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe = new WeakMap(), _SkyProgressIndicatorStatusMarkerComponent_changeDetector = new WeakMap(), _SkyProgressIndicatorStatusMarkerComponent__status = new WeakMap(), _SkyProgressIndicatorStatusMarkerComponent__displayMode = new WeakMap();
|
|
151
|
-
SkyProgressIndicatorStatusMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
152
|
-
SkyProgressIndicatorStatusMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 });
|
|
153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, decorators: [{
|
|
154
|
-
type: Component,
|
|
155
|
-
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"] }]
|
|
156
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyThemeService, decorators: [{
|
|
157
|
-
type: Optional
|
|
158
|
-
}] }]; }, propDecorators: { displayMode: [{
|
|
159
|
-
type: Input
|
|
160
|
-
}], status: [{
|
|
161
|
-
type: Input
|
|
162
|
-
}] } });
|
|
163
|
-
|
|
164
|
-
var _SkyProgressIndicatorItemComponent_instances, _SkyProgressIndicatorItemComponent_titlePrefix, _SkyProgressIndicatorItemComponent_changeDetector, _SkyProgressIndicatorItemComponent__isVisible, _SkyProgressIndicatorItemComponent__title, _SkyProgressIndicatorItemComponent__showStatusMarker, _SkyProgressIndicatorItemComponent__showTitle, _SkyProgressIndicatorItemComponent__status, _SkyProgressIndicatorItemComponent_updateFormattedTitle;
|
|
165
|
-
const STATUS_DEFAULT = SkyProgressIndicatorItemStatus.Incomplete;
|
|
166
|
-
const STATUS_NAME_DEFAULT = 'incomplete';
|
|
167
|
-
/**
|
|
168
|
-
* Specifies a step to include in the progress indicator. Each step requires a label,
|
|
169
|
-
* and you can also specify step details within the `sky-progress-indicator-item` element.
|
|
170
|
-
*/
|
|
171
|
-
class SkyProgressIndicatorItemComponent {
|
|
172
|
-
/**
|
|
173
|
-
* The step label for the step in the progress indicator.
|
|
174
|
-
* @required
|
|
175
|
-
*/
|
|
176
|
-
set title(value) {
|
|
177
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent__title, value, "f");
|
|
178
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_instances, "m", _SkyProgressIndicatorItemComponent_updateFormattedTitle).call(this);
|
|
179
|
-
}
|
|
180
|
-
get title() {
|
|
181
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent__title, "f");
|
|
182
|
-
}
|
|
183
|
-
set status(value) {
|
|
184
|
-
if (value === __classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent__status, "f")) {
|
|
185
|
-
return;
|
|
186
|
-
}
|
|
187
|
-
/* istanbul ignore next */
|
|
188
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent__status, value ?? STATUS_DEFAULT, "f");
|
|
189
|
-
switch (__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent__status, "f")) {
|
|
190
|
-
case SkyProgressIndicatorItemStatus.Active:
|
|
191
|
-
this.statusName = 'active';
|
|
192
|
-
break;
|
|
193
|
-
case SkyProgressIndicatorItemStatus.Complete:
|
|
194
|
-
this.statusName = 'complete';
|
|
195
|
-
break;
|
|
196
|
-
case SkyProgressIndicatorItemStatus.Incomplete:
|
|
197
|
-
this.statusName = 'incomplete';
|
|
198
|
-
break;
|
|
199
|
-
case SkyProgressIndicatorItemStatus.Pending:
|
|
200
|
-
this.statusName = 'pending';
|
|
201
|
-
break;
|
|
202
|
-
}
|
|
203
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_changeDetector, "f").markForCheck();
|
|
204
|
-
}
|
|
205
|
-
get status() {
|
|
206
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent__status, "f");
|
|
207
|
-
}
|
|
208
|
-
set isVisible(value) {
|
|
209
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent__isVisible, !!value, "f");
|
|
210
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_changeDetector, "f").markForCheck();
|
|
211
|
-
}
|
|
212
|
-
get isVisible() {
|
|
213
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent__isVisible, "f");
|
|
214
|
-
}
|
|
215
|
-
set showStatusMarker(value) {
|
|
216
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent__showStatusMarker, !!value, "f");
|
|
217
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_changeDetector, "f").markForCheck();
|
|
218
|
-
}
|
|
219
|
-
get showStatusMarker() {
|
|
220
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent__showStatusMarker, "f");
|
|
221
|
-
}
|
|
222
|
-
set showTitle(value) {
|
|
223
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent__showTitle, !!value, "f");
|
|
224
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_changeDetector, "f").markForCheck();
|
|
225
|
-
}
|
|
226
|
-
get showTitle() {
|
|
227
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent__showTitle, "f");
|
|
228
|
-
}
|
|
229
|
-
constructor(changeDetector) {
|
|
230
|
-
_SkyProgressIndicatorItemComponent_instances.add(this);
|
|
231
|
-
this.statusName = STATUS_NAME_DEFAULT;
|
|
232
|
-
_SkyProgressIndicatorItemComponent_titlePrefix.set(this, void 0);
|
|
233
|
-
_SkyProgressIndicatorItemComponent_changeDetector.set(this, void 0);
|
|
234
|
-
_SkyProgressIndicatorItemComponent__isVisible.set(this, false);
|
|
235
|
-
_SkyProgressIndicatorItemComponent__title.set(this, void 0);
|
|
236
|
-
_SkyProgressIndicatorItemComponent__showStatusMarker.set(this, true);
|
|
237
|
-
_SkyProgressIndicatorItemComponent__showTitle.set(this, true);
|
|
238
|
-
_SkyProgressIndicatorItemComponent__status.set(this, STATUS_DEFAULT);
|
|
239
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent_changeDetector, changeDetector, "f");
|
|
240
|
-
}
|
|
241
|
-
ngOnInit() {
|
|
242
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_instances, "m", _SkyProgressIndicatorItemComponent_updateFormattedTitle).call(this);
|
|
243
|
-
}
|
|
244
|
-
showStepNumber(step) {
|
|
245
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent_titlePrefix, `${step} - `, "f");
|
|
246
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_instances, "m", _SkyProgressIndicatorItemComponent_updateFormattedTitle).call(this);
|
|
247
|
-
}
|
|
248
|
-
hideStepNumber() {
|
|
249
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorItemComponent_titlePrefix, '', "f");
|
|
250
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_instances, "m", _SkyProgressIndicatorItemComponent_updateFormattedTitle).call(this);
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
_SkyProgressIndicatorItemComponent_titlePrefix = new WeakMap(), _SkyProgressIndicatorItemComponent_changeDetector = new WeakMap(), _SkyProgressIndicatorItemComponent__isVisible = new WeakMap(), _SkyProgressIndicatorItemComponent__title = new WeakMap(), _SkyProgressIndicatorItemComponent__showStatusMarker = new WeakMap(), _SkyProgressIndicatorItemComponent__showTitle = new WeakMap(), _SkyProgressIndicatorItemComponent__status = new WeakMap(), _SkyProgressIndicatorItemComponent_instances = new WeakSet(), _SkyProgressIndicatorItemComponent_updateFormattedTitle = function _SkyProgressIndicatorItemComponent_updateFormattedTitle() {
|
|
254
|
-
this.formattedTitle = `${__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_titlePrefix, "f")}${this.title}`;
|
|
255
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorItemComponent_changeDetector, "f").markForCheck();
|
|
256
|
-
};
|
|
257
|
-
SkyProgressIndicatorItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
258
|
-
SkyProgressIndicatorItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 });
|
|
259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorItemComponent, decorators: [{
|
|
260
|
-
type: Component,
|
|
261
|
-
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"] }]
|
|
262
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
263
|
-
type: Input
|
|
264
|
-
}] } });
|
|
265
|
-
|
|
266
|
-
class SkyProgressIndicatorNavButtonClass {
|
|
267
|
-
transform(buttonType) {
|
|
268
|
-
const classNames = [`sky-progress-indicator-nav-button-${buttonType}`];
|
|
269
|
-
switch (buttonType) {
|
|
270
|
-
case 'next':
|
|
271
|
-
case 'finish':
|
|
272
|
-
classNames.push('sky-btn-primary');
|
|
273
|
-
break;
|
|
274
|
-
case 'reset':
|
|
275
|
-
classNames.push('sky-btn-link');
|
|
276
|
-
break;
|
|
277
|
-
default:
|
|
278
|
-
classNames.push('sky-btn-default');
|
|
279
|
-
}
|
|
280
|
-
return classNames;
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
SkyProgressIndicatorNavButtonClass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonClass, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
284
|
-
SkyProgressIndicatorNavButtonClass.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonClass, name: "skyProgressIndicatorNavButtonClass" });
|
|
285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonClass, decorators: [{
|
|
286
|
-
type: Pipe,
|
|
287
|
-
args: [{
|
|
288
|
-
name: 'skyProgressIndicatorNavButtonClass',
|
|
289
|
-
}]
|
|
290
|
-
}] });
|
|
291
|
-
|
|
292
|
-
class SkyProgressIndicatorNavButtonDisabledPipe {
|
|
293
|
-
transform(disabled, buttonType, activeIndex, itemStatuses) {
|
|
294
|
-
const isLastStep = itemStatuses && activeIndex === itemStatuses.length - 1;
|
|
295
|
-
return ((buttonType === 'next' && isLastStep) ||
|
|
296
|
-
(buttonType === 'previous' && activeIndex === 0) ||
|
|
297
|
-
disabled);
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
SkyProgressIndicatorNavButtonDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
301
|
-
SkyProgressIndicatorNavButtonDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonDisabledPipe, name: "skyProgressIndicatorNavButtonDisabled" });
|
|
302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonDisabledPipe, decorators: [{
|
|
303
|
-
type: Pipe,
|
|
304
|
-
args: [{
|
|
305
|
-
name: 'skyProgressIndicatorNavButtonDisabled',
|
|
306
|
-
}]
|
|
307
|
-
}] });
|
|
308
|
-
|
|
309
|
-
/**
|
|
310
|
-
* Allows the consumer to decide whether the button's action should be completed successfully.
|
|
311
|
-
* The handler is provided with all nav button types.
|
|
312
|
-
*/
|
|
313
|
-
class SkyProgressIndicatorActionClickProgressHandler {
|
|
314
|
-
/**
|
|
315
|
-
*
|
|
316
|
-
* @param advance Advances the progress indicator to the next step.
|
|
317
|
-
*/
|
|
318
|
-
constructor(advance) {
|
|
319
|
-
this.advance = advance;
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
var SkyProgressIndicatorMessageType;
|
|
324
|
-
(function (SkyProgressIndicatorMessageType) {
|
|
325
|
-
/**
|
|
326
|
-
* The current step is complete.
|
|
327
|
-
* This completes the active item and moves to the next item.
|
|
328
|
-
*/
|
|
329
|
-
SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Progress"] = 0] = "Progress";
|
|
330
|
-
/**
|
|
331
|
-
* Returns progress to the previous step.
|
|
332
|
-
* This moves from the active item to the item that precedes it.
|
|
333
|
-
*/
|
|
334
|
-
SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Regress"] = 1] = "Regress";
|
|
335
|
-
/**
|
|
336
|
-
* Progress is incomplete.
|
|
337
|
-
* This marks all items as incomplete and sets the first item as the active item.
|
|
338
|
-
*/
|
|
339
|
-
SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Reset"] = 2] = "Reset";
|
|
340
|
-
/**
|
|
341
|
-
* Progress is complete.
|
|
342
|
-
* This marks all items as complete and sets the last item as the active item.
|
|
343
|
-
*/
|
|
344
|
-
SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["Finish"] = 3] = "Finish";
|
|
345
|
-
/**
|
|
346
|
-
* Moves progress to the item indicated by the `data.activeIndex` property.
|
|
347
|
-
*/
|
|
348
|
-
SkyProgressIndicatorMessageType[SkyProgressIndicatorMessageType["GoTo"] = 4] = "GoTo";
|
|
349
|
-
})(SkyProgressIndicatorMessageType || (SkyProgressIndicatorMessageType = {}));
|
|
350
|
-
|
|
351
|
-
/**
|
|
352
|
-
* @deprecated Use `SkyProgressIndicatorDisplayModeType` instead.
|
|
353
|
-
* @internal
|
|
354
|
-
*/
|
|
355
|
-
var SkyProgressIndicatorDisplayMode;
|
|
356
|
-
(function (SkyProgressIndicatorDisplayMode) {
|
|
357
|
-
/**
|
|
358
|
-
* The vertical layout for the progress indicator.
|
|
359
|
-
*/
|
|
360
|
-
SkyProgressIndicatorDisplayMode[SkyProgressIndicatorDisplayMode["Vertical"] = 0] = "Vertical";
|
|
361
|
-
/**
|
|
362
|
-
* The horizontal layout for the progress indicator.
|
|
363
|
-
*/
|
|
364
|
-
SkyProgressIndicatorDisplayMode[SkyProgressIndicatorDisplayMode["Horizontal"] = 1] = "Horizontal";
|
|
365
|
-
})(SkyProgressIndicatorDisplayMode || (SkyProgressIndicatorDisplayMode = {}));
|
|
366
|
-
|
|
367
|
-
var _SkyProgressIndicatorComponent_instances, _SkyProgressIndicatorComponent_activeIndex_set, _SkyProgressIndicatorComponent_activeIndex_get, _SkyProgressIndicatorComponent__activeIndex, _SkyProgressIndicatorComponent__displayMode, _SkyProgressIndicatorComponent__hasFinishButton, _SkyProgressIndicatorComponent__isPassive, _SkyProgressIndicatorComponent__startingIndex, _SkyProgressIndicatorComponent_messageStreamSub, _SkyProgressIndicatorComponent_initialized, _SkyProgressIndicatorComponent_ngUnsubscribe, _SkyProgressIndicatorComponent_messageStream, _SkyProgressIndicatorComponent_changeDetector, _SkyProgressIndicatorComponent_windowRef, _SkyProgressIndicatorComponent_logger, _SkyProgressIndicatorComponent_isPassiveAndVertical, _SkyProgressIndicatorComponent_gotoNextStep, _SkyProgressIndicatorComponent_gotoPreviousStep, _SkyProgressIndicatorComponent_gotoStep, _SkyProgressIndicatorComponent_finishSteps, _SkyProgressIndicatorComponent_resetSteps, _SkyProgressIndicatorComponent_updateSteps, _SkyProgressIndicatorComponent_updateItemStatuses, _SkyProgressIndicatorComponent_updateCssClassNames, _SkyProgressIndicatorComponent_handleIncomingMessage, _SkyProgressIndicatorComponent_subscribeToMessageStream, _SkyProgressIndicatorComponent_updateStatusesAndNotify, _SkyProgressIndicatorComponent_getLastIndex;
|
|
368
|
-
class SkyProgressIndicatorComponent {
|
|
369
|
-
/**
|
|
370
|
-
* The orientation of the progress indicator, which can be vertical or horizontal.
|
|
371
|
-
* For [passive progress indicators](https://developer.blackbaud.com/skyux-progress-indicator/docs/passive-indicator)
|
|
372
|
-
* and [waterfall progress indicators](https://developer.blackbaud.com/skyux/components/progress-indicator/waterfall-progress-indicator),
|
|
373
|
-
* use the vertical display mode. For [modal wizards](https://developer.blackbaud.com/skyux/components/wizard),
|
|
374
|
-
* use the horizontal display mode.
|
|
375
|
-
* @deprecated The property was designed to create wizards by setting `displayMode="horizontal"` on progress indicators in modals,
|
|
376
|
-
* but this wizard implementation was replaced by the
|
|
377
|
-
* [Wizard (Tabs) component](https://developer.blackbaud.com/skyux/components/progress-indicator).
|
|
378
|
-
* @default "vertical"
|
|
379
|
-
*/
|
|
380
|
-
set displayMode(value) {
|
|
381
|
-
switch (value) {
|
|
382
|
-
case SkyProgressIndicatorDisplayMode.Horizontal:
|
|
383
|
-
case 'horizontal':
|
|
384
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__displayMode, 'horizontal', "f");
|
|
385
|
-
break;
|
|
386
|
-
default:
|
|
387
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__displayMode, 'vertical', "f");
|
|
388
|
-
}
|
|
389
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateCssClassNames).call(this);
|
|
390
|
-
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent__displayMode, "f") === 'horizontal') {
|
|
391
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_logger, "f").deprecated('SkyProgressIndicator wizard', {
|
|
392
|
-
deprecationMajorVersion: 6,
|
|
393
|
-
replacementRecommendation: 'Use Wizard (Tabs) instead.',
|
|
394
|
-
});
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
get displayMode() {
|
|
398
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__displayMode, "f");
|
|
399
|
-
}
|
|
400
|
-
/**
|
|
401
|
-
* Whether the progress indicator is passive. Passive progress indicators inform users of
|
|
402
|
-
* progress that concerns them but that they are not responsible for, and they must use the vertical display mode.
|
|
403
|
-
* @default false
|
|
404
|
-
*/
|
|
405
|
-
set isPassive(value) {
|
|
406
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__isPassive, value, "f");
|
|
407
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateCssClassNames).call(this);
|
|
408
|
-
}
|
|
409
|
-
get isPassive() {
|
|
410
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__isPassive, "f");
|
|
411
|
-
}
|
|
412
|
-
/**
|
|
413
|
-
* The observable of `SkyProgressIndicatorMessage` that determines the status to
|
|
414
|
-
* display for items in the progress indicator. The message stream is a queue of
|
|
415
|
-
* commanding messages to change the state of the progress indicator based on the message type.
|
|
416
|
-
*/
|
|
417
|
-
set messageStream(value) {
|
|
418
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_messageStream, value || new Subject(), "f");
|
|
419
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_subscribeToMessageStream).call(this);
|
|
420
|
-
}
|
|
421
|
-
/**
|
|
422
|
-
* The index for the item to make active when the progress indicator
|
|
423
|
-
* loads. All steps that precede the active item are marked as complete, and all steps
|
|
424
|
-
* that follow the active item are marked as incomplete.
|
|
425
|
-
*/
|
|
426
|
-
set startingIndex(value) {
|
|
427
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__startingIndex, value || 0, "f");
|
|
428
|
-
}
|
|
429
|
-
get startingIndex() {
|
|
430
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__startingIndex, "f");
|
|
431
|
-
}
|
|
432
|
-
get hasFinishButton() {
|
|
433
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__hasFinishButton, "f");
|
|
434
|
-
}
|
|
435
|
-
set hasFinishButton(value) {
|
|
436
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__hasFinishButton, value, "f");
|
|
437
|
-
}
|
|
438
|
-
constructor(changeDetector, windowRef, logger) {
|
|
439
|
-
_SkyProgressIndicatorComponent_instances.add(this);
|
|
440
|
-
/**
|
|
441
|
-
* Fires when the progress indicator changes the status of an item.
|
|
442
|
-
*/
|
|
443
|
-
this.progressChanges = new EventEmitter();
|
|
444
|
-
this.cssClassNames = [];
|
|
445
|
-
this.itemStatuses = [];
|
|
446
|
-
_SkyProgressIndicatorComponent__activeIndex.set(this, 0);
|
|
447
|
-
_SkyProgressIndicatorComponent__displayMode.set(this, 'vertical');
|
|
448
|
-
_SkyProgressIndicatorComponent__hasFinishButton.set(this, void 0);
|
|
449
|
-
_SkyProgressIndicatorComponent__isPassive.set(this, false);
|
|
450
|
-
_SkyProgressIndicatorComponent__startingIndex.set(this, 0);
|
|
451
|
-
_SkyProgressIndicatorComponent_messageStreamSub.set(this, void 0);
|
|
452
|
-
_SkyProgressIndicatorComponent_initialized.set(this, false);
|
|
453
|
-
_SkyProgressIndicatorComponent_ngUnsubscribe.set(this, new Subject());
|
|
454
|
-
_SkyProgressIndicatorComponent_messageStream.set(this, new Subject());
|
|
455
|
-
_SkyProgressIndicatorComponent_changeDetector.set(this, void 0);
|
|
456
|
-
_SkyProgressIndicatorComponent_windowRef.set(this, void 0);
|
|
457
|
-
_SkyProgressIndicatorComponent_logger.set(this, void 0);
|
|
458
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_changeDetector, changeDetector, "f");
|
|
459
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_windowRef, windowRef, "f");
|
|
460
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_logger, logger, "f");
|
|
461
|
-
}
|
|
462
|
-
ngOnInit() {
|
|
463
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_initialized, true, "f");
|
|
464
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateCssClassNames).call(this);
|
|
465
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_subscribeToMessageStream).call(this);
|
|
466
|
-
}
|
|
467
|
-
ngAfterContentInit() {
|
|
468
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_instances, this.startingIndex, "a", _SkyProgressIndicatorComponent_activeIndex_set);
|
|
469
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateSteps).call(this);
|
|
470
|
-
// Note: The delay here is to ensure all change detection on the items has finished. Without
|
|
471
|
-
// the delay we receive a changed before checked error for vertical progress indicators
|
|
472
|
-
this.itemComponents?.changes
|
|
473
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f")), delay(0))
|
|
474
|
-
.subscribe(() => {
|
|
475
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateSteps).call(this);
|
|
476
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateStatusesAndNotify).call(this);
|
|
477
|
-
});
|
|
478
|
-
// Wait for item components' change detection to complete
|
|
479
|
-
// before notifying changes to the consumer.
|
|
480
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_windowRef, "f").nativeWindow.setTimeout(() => {
|
|
481
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateStatusesAndNotify).call(this);
|
|
482
|
-
});
|
|
483
|
-
}
|
|
484
|
-
ngOnDestroy() {
|
|
485
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f").next();
|
|
486
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f").complete();
|
|
487
|
-
}
|
|
488
|
-
sendMessage(message) {
|
|
489
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStream, "f").next(message);
|
|
490
|
-
}
|
|
491
|
-
}
|
|
492
|
-
_SkyProgressIndicatorComponent__activeIndex = new WeakMap(), _SkyProgressIndicatorComponent__displayMode = new WeakMap(), _SkyProgressIndicatorComponent__hasFinishButton = new WeakMap(), _SkyProgressIndicatorComponent__isPassive = new WeakMap(), _SkyProgressIndicatorComponent__startingIndex = new WeakMap(), _SkyProgressIndicatorComponent_messageStreamSub = new WeakMap(), _SkyProgressIndicatorComponent_initialized = new WeakMap(), _SkyProgressIndicatorComponent_ngUnsubscribe = new WeakMap(), _SkyProgressIndicatorComponent_messageStream = new WeakMap(), _SkyProgressIndicatorComponent_changeDetector = new WeakMap(), _SkyProgressIndicatorComponent_windowRef = new WeakMap(), _SkyProgressIndicatorComponent_logger = new WeakMap(), _SkyProgressIndicatorComponent_instances = new WeakSet(), _SkyProgressIndicatorComponent_activeIndex_set = function _SkyProgressIndicatorComponent_activeIndex_set(value) {
|
|
493
|
-
const lastIndex = (this.itemComponents?.length || 0) - 1;
|
|
494
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__activeIndex, Math.max(Math.min(value || 0, lastIndex), 0), "f");
|
|
495
|
-
}, _SkyProgressIndicatorComponent_activeIndex_get = function _SkyProgressIndicatorComponent_activeIndex_get() {
|
|
496
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__activeIndex, "f");
|
|
497
|
-
}, _SkyProgressIndicatorComponent_isPassiveAndVertical = function _SkyProgressIndicatorComponent_isPassiveAndVertical() {
|
|
498
|
-
// Currently, passive mode is not supported for horizontal displays.
|
|
499
|
-
if (this.displayMode === 'horizontal') {
|
|
500
|
-
return false;
|
|
501
|
-
}
|
|
502
|
-
return this.isPassive;
|
|
503
|
-
}, _SkyProgressIndicatorComponent_gotoNextStep = function _SkyProgressIndicatorComponent_gotoNextStep() {
|
|
504
|
-
const nextIndex = __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get) + 1;
|
|
505
|
-
const lastIndex = __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_getLastIndex).call(this);
|
|
506
|
-
if (nextIndex > lastIndex) {
|
|
507
|
-
return;
|
|
508
|
-
}
|
|
509
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoStep).call(this, nextIndex);
|
|
510
|
-
}, _SkyProgressIndicatorComponent_gotoPreviousStep = function _SkyProgressIndicatorComponent_gotoPreviousStep() {
|
|
511
|
-
const previousIndex = __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get) - 1;
|
|
512
|
-
if (previousIndex < 0) {
|
|
513
|
-
return;
|
|
514
|
-
}
|
|
515
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoStep).call(this, previousIndex);
|
|
516
|
-
}, _SkyProgressIndicatorComponent_gotoStep = function _SkyProgressIndicatorComponent_gotoStep(index) {
|
|
517
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_instances, index, "a", _SkyProgressIndicatorComponent_activeIndex_set);
|
|
518
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateSteps).call(this);
|
|
519
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateStatusesAndNotify).call(this);
|
|
520
|
-
}, _SkyProgressIndicatorComponent_finishSteps = function _SkyProgressIndicatorComponent_finishSteps() {
|
|
521
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_instances, __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_getLastIndex).call(this), "a", _SkyProgressIndicatorComponent_activeIndex_set);
|
|
522
|
-
this.itemComponents?.forEach((component) => {
|
|
523
|
-
component.status = SkyProgressIndicatorItemStatus.Complete;
|
|
524
|
-
});
|
|
525
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateStatusesAndNotify).call(this, {
|
|
526
|
-
isComplete: true,
|
|
527
|
-
});
|
|
528
|
-
}, _SkyProgressIndicatorComponent_resetSteps = function _SkyProgressIndicatorComponent_resetSteps() {
|
|
529
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoStep).call(this, 0);
|
|
530
|
-
}, _SkyProgressIndicatorComponent_updateSteps = function _SkyProgressIndicatorComponent_updateSteps() {
|
|
531
|
-
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get) > __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_getLastIndex).call(this)) {
|
|
532
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_instances, __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get) - 1, "a", _SkyProgressIndicatorComponent_activeIndex_set);
|
|
533
|
-
}
|
|
534
|
-
const activeIndex = __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get);
|
|
535
|
-
const isPassiveAndVertical = __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_isPassiveAndVertical).call(this);
|
|
536
|
-
const isVertical = this.displayMode === 'vertical';
|
|
537
|
-
this.itemComponents?.forEach((component, i) => {
|
|
538
|
-
// Set visibility.
|
|
539
|
-
component.isVisible = activeIndex === i || isVertical;
|
|
540
|
-
// Set status.
|
|
541
|
-
let status;
|
|
542
|
-
if (activeIndex === i) {
|
|
543
|
-
if (isPassiveAndVertical) {
|
|
544
|
-
status = SkyProgressIndicatorItemStatus.Pending;
|
|
545
|
-
}
|
|
546
|
-
else {
|
|
547
|
-
status = SkyProgressIndicatorItemStatus.Active;
|
|
548
|
-
}
|
|
549
|
-
}
|
|
550
|
-
else if (activeIndex > i) {
|
|
551
|
-
status = SkyProgressIndicatorItemStatus.Complete;
|
|
552
|
-
}
|
|
553
|
-
else {
|
|
554
|
-
status = SkyProgressIndicatorItemStatus.Incomplete;
|
|
555
|
-
}
|
|
556
|
-
component.status = status;
|
|
557
|
-
// Show or hide the status markers.
|
|
558
|
-
component.showStatusMarker = isVertical;
|
|
559
|
-
// Show or hide the step number.
|
|
560
|
-
if (isPassiveAndVertical) {
|
|
561
|
-
component.hideStepNumber();
|
|
562
|
-
}
|
|
563
|
-
else {
|
|
564
|
-
component.showStepNumber(i + 1);
|
|
565
|
-
}
|
|
566
|
-
// If we're in passive mode, don't show titles for incomplete items.
|
|
567
|
-
component.showTitle = !(isPassiveAndVertical && activeIndex < i);
|
|
568
|
-
});
|
|
569
|
-
}, _SkyProgressIndicatorComponent_updateItemStatuses = function _SkyProgressIndicatorComponent_updateItemStatuses() {
|
|
570
|
-
/* istanbul ignore next */
|
|
571
|
-
this.itemStatuses = this.itemComponents?.map((c) => c.status) || [];
|
|
572
|
-
}, _SkyProgressIndicatorComponent_updateCssClassNames = function _SkyProgressIndicatorComponent_updateCssClassNames() {
|
|
573
|
-
const classNames = [`sky-progress-indicator-mode-${this.displayMode}`];
|
|
574
|
-
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_isPassiveAndVertical).call(this)) {
|
|
575
|
-
classNames.push('sky-progress-indicator-passive');
|
|
576
|
-
}
|
|
577
|
-
this.cssClassNames = classNames;
|
|
578
|
-
}, _SkyProgressIndicatorComponent_handleIncomingMessage = function _SkyProgressIndicatorComponent_handleIncomingMessage(message) {
|
|
579
|
-
const indicatorMessage = message;
|
|
580
|
-
let type;
|
|
581
|
-
// Prints a deprecation warning if the consumer provides only `SkyProgressIndicatorMessageType`.
|
|
582
|
-
if (indicatorMessage.type === undefined) {
|
|
583
|
-
console.warn("[Deprecation warning] The progress indicator component's `messageStream` input is set " +
|
|
584
|
-
'to `Subject<SkyProgressIndicatorMessageType>`. We will remove this deprecated type in ' +
|
|
585
|
-
'the next major version release. Instead, set the `messageStream` input to a value of ' +
|
|
586
|
-
'`Subject<SkyProgressIndicatorMessage>`.');
|
|
587
|
-
type = message;
|
|
588
|
-
}
|
|
589
|
-
else {
|
|
590
|
-
type = indicatorMessage.type;
|
|
591
|
-
}
|
|
592
|
-
switch (type) {
|
|
593
|
-
case SkyProgressIndicatorMessageType.Progress:
|
|
594
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoNextStep).call(this);
|
|
595
|
-
break;
|
|
596
|
-
case SkyProgressIndicatorMessageType.Regress:
|
|
597
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoPreviousStep).call(this);
|
|
598
|
-
break;
|
|
599
|
-
case SkyProgressIndicatorMessageType.Finish:
|
|
600
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_finishSteps).call(this);
|
|
601
|
-
break;
|
|
602
|
-
case SkyProgressIndicatorMessageType.Reset:
|
|
603
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_resetSteps).call(this);
|
|
604
|
-
break;
|
|
605
|
-
case SkyProgressIndicatorMessageType.GoTo:
|
|
606
|
-
if (!indicatorMessage.data ||
|
|
607
|
-
indicatorMessage.data.activeIndex === undefined) {
|
|
608
|
-
console.warn('A message type of `SkyProgressIndicatorMessageType.GoTo` was passed to the progress ' +
|
|
609
|
-
'indicator, but no step index was provided. You can pass the desired active ' +
|
|
610
|
-
'index via:\n' +
|
|
611
|
-
'{\n' +
|
|
612
|
-
' type: SkyProgressIndicatorMessageType.GoTo,\n' +
|
|
613
|
-
' data: { activeIndex: 0 }\n' +
|
|
614
|
-
'}');
|
|
615
|
-
return;
|
|
616
|
-
}
|
|
617
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoStep).call(this, indicatorMessage.data.activeIndex);
|
|
618
|
-
break;
|
|
619
|
-
default:
|
|
620
|
-
break;
|
|
621
|
-
}
|
|
622
|
-
// Update the view after a message is received.
|
|
623
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_changeDetector, "f").markForCheck();
|
|
624
|
-
}, _SkyProgressIndicatorComponent_subscribeToMessageStream = function _SkyProgressIndicatorComponent_subscribeToMessageStream() {
|
|
625
|
-
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_initialized, "f")) {
|
|
626
|
-
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStreamSub, "f")) {
|
|
627
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStreamSub, "f").unsubscribe();
|
|
628
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_messageStreamSub, undefined, "f");
|
|
629
|
-
}
|
|
630
|
-
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStream, "f")) {
|
|
631
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_messageStreamSub, __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStream, "f")
|
|
632
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f")))
|
|
633
|
-
.subscribe((message) => {
|
|
634
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_handleIncomingMessage).call(this, message);
|
|
635
|
-
}), "f");
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
|
-
}, _SkyProgressIndicatorComponent_updateStatusesAndNotify = function _SkyProgressIndicatorComponent_updateStatusesAndNotify(change) {
|
|
639
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateItemStatuses).call(this);
|
|
640
|
-
this.progressChanges.next(Object.assign({}, {
|
|
641
|
-
activeIndex: __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get),
|
|
642
|
-
itemStatuses: this.itemStatuses,
|
|
643
|
-
}, change));
|
|
644
|
-
}, _SkyProgressIndicatorComponent_getLastIndex = function _SkyProgressIndicatorComponent_getLastIndex() {
|
|
645
|
-
return (this.itemComponents?.length || 0) - 1;
|
|
646
|
-
};
|
|
647
|
-
SkyProgressIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyAppWindowRef }, { token: i1$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
648
|
-
SkyProgressIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 });
|
|
649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorComponent, decorators: [{
|
|
650
|
-
type: Component,
|
|
651
|
-
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"] }]
|
|
652
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyLogService }]; }, propDecorators: { displayMode: [{
|
|
653
|
-
type: Input
|
|
654
|
-
}], isPassive: [{
|
|
655
|
-
type: Input
|
|
656
|
-
}], messageStream: [{
|
|
657
|
-
type: Input
|
|
658
|
-
}], startingIndex: [{
|
|
659
|
-
type: Input
|
|
660
|
-
}], progressChanges: [{
|
|
661
|
-
type: Output
|
|
662
|
-
}], itemComponents: [{
|
|
663
|
-
type: ContentChildren,
|
|
664
|
-
args: [SkyProgressIndicatorItemComponent]
|
|
665
|
-
}] } });
|
|
666
|
-
|
|
667
|
-
var _SkyProgressIndicatorNavButtonComponent_instances, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, _SkyProgressIndicatorNavButtonComponent_parentTimeout, _SkyProgressIndicatorNavButtonComponent__buttonType, _SkyProgressIndicatorNavButtonComponent__disabled, _SkyProgressIndicatorNavButtonComponent__isVisible, _SkyProgressIndicatorNavButtonComponent__progressIndicator, _SkyProgressIndicatorNavButtonComponent_changeDetector, _SkyProgressIndicatorNavButtonComponent_parentComponent, _SkyProgressIndicatorNavButtonComponent_sendMessage, _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility;
|
|
668
|
-
const BUTTON_TYPE_DEFAULT = 'next';
|
|
669
|
-
/**
|
|
670
|
-
* Displays a button to navigate the steps in modal wizards. We recommend against using it in
|
|
671
|
-
* passive progress indicators and waterfall progress indicators.
|
|
672
|
-
*/
|
|
673
|
-
class SkyProgressIndicatorNavButtonComponent {
|
|
674
|
-
/**
|
|
675
|
-
* The type of nav button to include.
|
|
676
|
-
* @default "next"
|
|
677
|
-
*/
|
|
678
|
-
set buttonType(value) {
|
|
679
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__buttonType, value || BUTTON_TYPE_DEFAULT, "f");
|
|
680
|
-
}
|
|
681
|
-
get buttonType() {
|
|
682
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__buttonType, "f");
|
|
683
|
-
}
|
|
684
|
-
/**
|
|
685
|
-
* Whether to disable the nav button.
|
|
686
|
-
* @default false
|
|
687
|
-
*/
|
|
688
|
-
set disabled(value) {
|
|
689
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__disabled, value, "f");
|
|
690
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_changeDetector, "f").markForCheck();
|
|
691
|
-
}
|
|
692
|
-
get disabled() {
|
|
693
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__disabled, "f");
|
|
694
|
-
}
|
|
695
|
-
/**
|
|
696
|
-
* The progress indicator component to associate with the nav button.
|
|
697
|
-
* @required
|
|
698
|
-
*/
|
|
699
|
-
set progressIndicator(value) {
|
|
700
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, value, "f");
|
|
701
|
-
if (__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f")) {
|
|
702
|
-
if (this.buttonType === 'finish') {
|
|
703
|
-
// The `hasFinishButton` field was added to support legacy API.
|
|
704
|
-
// Some implementations only include a next button; we cannot
|
|
705
|
-
// assume that every implementation includes both a finish button and a next button.
|
|
706
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f").hasFinishButton = true;
|
|
707
|
-
}
|
|
708
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f").progressChanges
|
|
709
|
-
.pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, "f")))
|
|
710
|
-
.subscribe((change) => {
|
|
711
|
-
this.lastProgressChange = change;
|
|
712
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_instances, "m", _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility).call(this, change);
|
|
713
|
-
});
|
|
714
|
-
}
|
|
715
|
-
else {
|
|
716
|
-
if (!__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_parentTimeout, "f")) {
|
|
717
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent_parentTimeout, window.setTimeout(() => {
|
|
718
|
-
/* istanbul ignore else */
|
|
719
|
-
if (!this.progressIndicator) {
|
|
720
|
-
throw new Error('The `<sky-progress-indicator-nav-button>` component requires a reference to ' +
|
|
721
|
-
'the `<sky-progress-indicator>` component it controls. For example:\n' +
|
|
722
|
-
'<sky-progress-indicator\n' +
|
|
723
|
-
' #myProgressIndicator\n' +
|
|
724
|
-
'>\n' +
|
|
725
|
-
'</sky-progress-indicator>\n' +
|
|
726
|
-
'<sky-progress-indicator-nav-button\n' +
|
|
727
|
-
' [progressIndicator]="myProgressIndicator"\n' +
|
|
728
|
-
'>\n' +
|
|
729
|
-
'</sky-progress-indicator-nav-button>');
|
|
730
|
-
}
|
|
731
|
-
}, 50), "f");
|
|
732
|
-
}
|
|
733
|
-
}
|
|
734
|
-
}
|
|
735
|
-
get progressIndicator() {
|
|
736
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f");
|
|
737
|
-
}
|
|
738
|
-
set isVisible(value) {
|
|
739
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__isVisible, value, "f");
|
|
740
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_changeDetector, "f").markForCheck();
|
|
741
|
-
}
|
|
742
|
-
get isVisible() {
|
|
743
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__isVisible, "f");
|
|
744
|
-
}
|
|
745
|
-
constructor(changeDetector, parentComponent) {
|
|
746
|
-
_SkyProgressIndicatorNavButtonComponent_instances.add(this);
|
|
747
|
-
/**
|
|
748
|
-
* Fires when users select the nav button and emits a `SkyProgressIndicatorActionClickArgs`
|
|
749
|
-
* object that is passed into the callback function to allow consumers to decide whether
|
|
750
|
-
* the button’s action should complete successfully.
|
|
751
|
-
*/
|
|
752
|
-
this.actionClick = new EventEmitter();
|
|
753
|
-
_SkyProgressIndicatorNavButtonComponent_ngUnsubscribe.set(this, new Subject());
|
|
754
|
-
_SkyProgressIndicatorNavButtonComponent_parentTimeout.set(this, void 0);
|
|
755
|
-
_SkyProgressIndicatorNavButtonComponent__buttonType.set(this, BUTTON_TYPE_DEFAULT);
|
|
756
|
-
_SkyProgressIndicatorNavButtonComponent__disabled.set(this, void 0);
|
|
757
|
-
_SkyProgressIndicatorNavButtonComponent__isVisible.set(this, void 0);
|
|
758
|
-
_SkyProgressIndicatorNavButtonComponent__progressIndicator.set(this, void 0);
|
|
759
|
-
_SkyProgressIndicatorNavButtonComponent_changeDetector.set(this, void 0);
|
|
760
|
-
_SkyProgressIndicatorNavButtonComponent_parentComponent.set(this, void 0);
|
|
761
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent_changeDetector, changeDetector, "f");
|
|
762
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent_parentComponent, parentComponent, "f");
|
|
763
|
-
}
|
|
764
|
-
ngAfterViewInit() {
|
|
765
|
-
if (!this.progressIndicator && __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_parentComponent, "f")) {
|
|
766
|
-
this.progressIndicator = __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_parentComponent, "f");
|
|
767
|
-
}
|
|
768
|
-
else if (!this.progressIndicator) {
|
|
769
|
-
this.progressIndicator = undefined;
|
|
770
|
-
}
|
|
771
|
-
}
|
|
772
|
-
ngOnDestroy() {
|
|
773
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, "f").next();
|
|
774
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, "f").complete();
|
|
775
|
-
this.actionClick.complete();
|
|
776
|
-
}
|
|
777
|
-
onClick(event) {
|
|
778
|
-
event.preventDefault();
|
|
779
|
-
let type;
|
|
780
|
-
switch (this.buttonType) {
|
|
781
|
-
case 'finish':
|
|
782
|
-
type = SkyProgressIndicatorMessageType.Finish;
|
|
783
|
-
break;
|
|
784
|
-
case 'next':
|
|
785
|
-
type = SkyProgressIndicatorMessageType.Progress;
|
|
786
|
-
break;
|
|
787
|
-
case 'previous':
|
|
788
|
-
type = SkyProgressIndicatorMessageType.Regress;
|
|
789
|
-
break;
|
|
790
|
-
case 'reset':
|
|
791
|
-
type = SkyProgressIndicatorMessageType.Reset;
|
|
792
|
-
break;
|
|
793
|
-
}
|
|
794
|
-
// If the consumer has subscribed to the `actionClick` event,
|
|
795
|
-
// allow them to decide when to advance to the next step.
|
|
796
|
-
if (this.actionClick.observers.length > 0) {
|
|
797
|
-
this.actionClick.emit({
|
|
798
|
-
event,
|
|
799
|
-
progressHandler: new SkyProgressIndicatorActionClickProgressHandler(() => {
|
|
800
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_instances, "m", _SkyProgressIndicatorNavButtonComponent_sendMessage).call(this, type);
|
|
801
|
-
}),
|
|
802
|
-
});
|
|
803
|
-
}
|
|
804
|
-
else {
|
|
805
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_instances, "m", _SkyProgressIndicatorNavButtonComponent_sendMessage).call(this, type);
|
|
806
|
-
}
|
|
807
|
-
}
|
|
808
|
-
}
|
|
809
|
-
_SkyProgressIndicatorNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyProgressIndicatorNavButtonComponent_parentTimeout = new WeakMap(), _SkyProgressIndicatorNavButtonComponent__buttonType = new WeakMap(), _SkyProgressIndicatorNavButtonComponent__disabled = new WeakMap(), _SkyProgressIndicatorNavButtonComponent__isVisible = new WeakMap(), _SkyProgressIndicatorNavButtonComponent__progressIndicator = new WeakMap(), _SkyProgressIndicatorNavButtonComponent_changeDetector = new WeakMap(), _SkyProgressIndicatorNavButtonComponent_parentComponent = new WeakMap(), _SkyProgressIndicatorNavButtonComponent_instances = new WeakSet(), _SkyProgressIndicatorNavButtonComponent_sendMessage = function _SkyProgressIndicatorNavButtonComponent_sendMessage(type) {
|
|
810
|
-
if (type !== undefined) {
|
|
811
|
-
this.progressIndicator?.sendMessage({ type });
|
|
812
|
-
}
|
|
813
|
-
}, _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility = function _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility(change) {
|
|
814
|
-
const isLastStep = change.itemStatuses &&
|
|
815
|
-
change.activeIndex === change.itemStatuses.length - 1;
|
|
816
|
-
const buttonType = this.buttonType;
|
|
817
|
-
// Hide the button if all steps are complete
|
|
818
|
-
// (except for the reset button)
|
|
819
|
-
if (buttonType !== 'reset' && change.isComplete) {
|
|
820
|
-
this.isVisible = false;
|
|
821
|
-
return;
|
|
822
|
-
}
|
|
823
|
-
if (buttonType === 'finish') {
|
|
824
|
-
this.isVisible = isLastStep;
|
|
825
|
-
return;
|
|
826
|
-
}
|
|
827
|
-
// Hide the next button on the last step only if a finish button exists.
|
|
828
|
-
if (buttonType === 'next' &&
|
|
829
|
-
isLastStep &&
|
|
830
|
-
this.progressIndicator?.hasFinishButton) {
|
|
831
|
-
this.isVisible = false;
|
|
832
|
-
return;
|
|
833
|
-
}
|
|
834
|
-
this.isVisible = true;
|
|
835
|
-
};
|
|
836
|
-
SkyProgressIndicatorNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyProgressIndicatorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
837
|
-
SkyProgressIndicatorNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 });
|
|
838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, decorators: [{
|
|
839
|
-
type: Component,
|
|
840
|
-
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" }]
|
|
841
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyProgressIndicatorComponent, decorators: [{
|
|
842
|
-
type: Optional
|
|
843
|
-
}] }]; }, propDecorators: { buttonText: [{
|
|
844
|
-
type: Input
|
|
845
|
-
}], buttonType: [{
|
|
846
|
-
type: Input
|
|
847
|
-
}], disabled: [{
|
|
848
|
-
type: Input
|
|
849
|
-
}], progressIndicator: [{
|
|
850
|
-
type: Input
|
|
851
|
-
}], actionClick: [{
|
|
852
|
-
type: Output
|
|
853
|
-
}] } });
|
|
854
|
-
|
|
855
|
-
var _SkyProgressIndicatorResetButtonComponent__disabled, _SkyProgressIndicatorResetButtonComponent_changeDetector;
|
|
856
|
-
/**
|
|
857
|
-
* Displays a button to mark all items in the progress indicator as incomplete and set the
|
|
858
|
-
* first item as the active item. The steps after the active item remain incomplete until
|
|
859
|
-
* users reach them in their sequential order.
|
|
860
|
-
*/
|
|
861
|
-
class SkyProgressIndicatorResetButtonComponent {
|
|
862
|
-
/**
|
|
863
|
-
* Whether to disable the reset button.
|
|
864
|
-
* @default false
|
|
865
|
-
*/
|
|
866
|
-
set disabled(value) {
|
|
867
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorResetButtonComponent__disabled, value, "f");
|
|
868
|
-
__classPrivateFieldGet(this, _SkyProgressIndicatorResetButtonComponent_changeDetector, "f").markForCheck();
|
|
869
|
-
}
|
|
870
|
-
get disabled() {
|
|
871
|
-
return __classPrivateFieldGet(this, _SkyProgressIndicatorResetButtonComponent__disabled, "f");
|
|
872
|
-
}
|
|
873
|
-
constructor(changeDetector) {
|
|
874
|
-
/**
|
|
875
|
-
* Fires when users select the reset button that marks all items as incomplete and sets the
|
|
876
|
-
* first item as the active item.
|
|
877
|
-
*/
|
|
878
|
-
this.resetClick = new EventEmitter();
|
|
879
|
-
_SkyProgressIndicatorResetButtonComponent__disabled.set(this, void 0);
|
|
880
|
-
_SkyProgressIndicatorResetButtonComponent_changeDetector.set(this, void 0);
|
|
881
|
-
__classPrivateFieldSet(this, _SkyProgressIndicatorResetButtonComponent_changeDetector, changeDetector, "f");
|
|
882
|
-
console.warn('[Deprecation warning] The `<sky-progress-indicator-reset-button>` component is ' +
|
|
883
|
-
'deprecated. Please use the `<sky-progress-indicator-nav-button>` component instead, with ' +
|
|
884
|
-
'`buttonType` set to "reset".');
|
|
885
|
-
}
|
|
886
|
-
ngOnDestroy() {
|
|
887
|
-
this.resetClick.complete();
|
|
888
|
-
}
|
|
889
|
-
onClick() {
|
|
890
|
-
this.resetClick.emit();
|
|
891
|
-
this.progressIndicator?.sendMessage({
|
|
892
|
-
type: SkyProgressIndicatorMessageType.Reset,
|
|
893
|
-
});
|
|
894
|
-
}
|
|
895
|
-
}
|
|
896
|
-
_SkyProgressIndicatorResetButtonComponent__disabled = new WeakMap(), _SkyProgressIndicatorResetButtonComponent_changeDetector = new WeakMap();
|
|
897
|
-
SkyProgressIndicatorResetButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
898
|
-
SkyProgressIndicatorResetButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 });
|
|
899
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, decorators: [{
|
|
900
|
-
type: Component,
|
|
901
|
-
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" }]
|
|
902
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
903
|
-
type: Input
|
|
904
|
-
}], progressIndicator: [{
|
|
905
|
-
type: Input
|
|
906
|
-
}], resetClick: [{
|
|
907
|
-
type: Output
|
|
908
|
-
}] } });
|
|
909
|
-
|
|
910
|
-
/**
|
|
911
|
-
* Specifies a header to display above the progress indicator.
|
|
912
|
-
*/
|
|
913
|
-
class SkyProgressIndicatorTitleComponent {
|
|
914
|
-
}
|
|
915
|
-
SkyProgressIndicatorTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
916
|
-
SkyProgressIndicatorTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 });
|
|
917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorTitleComponent, decorators: [{
|
|
918
|
-
type: Component,
|
|
919
|
-
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"] }]
|
|
920
|
-
}] });
|
|
921
|
-
|
|
922
|
-
class SkyProgressIndicatorModule {
|
|
923
|
-
}
|
|
924
|
-
SkyProgressIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
925
|
-
SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorModule, declarations: [SkyProgressIndicatorComponent,
|
|
926
|
-
SkyProgressIndicatorItemComponent,
|
|
927
|
-
SkyProgressIndicatorMarkerClassPipe,
|
|
928
|
-
SkyProgressIndicatorNavButtonClass,
|
|
929
|
-
SkyProgressIndicatorNavButtonDisabledPipe,
|
|
930
|
-
SkyProgressIndicatorNavButtonComponent,
|
|
931
|
-
SkyProgressIndicatorResetButtonComponent,
|
|
932
|
-
SkyProgressIndicatorStatusMarkerComponent,
|
|
933
|
-
SkyProgressIndicatorTitleComponent], imports: [CommonModule,
|
|
934
|
-
SkyI18nModule,
|
|
935
|
-
SkyIconModule,
|
|
936
|
-
SkyProgressIndicatorResourcesModule,
|
|
937
|
-
SkyThemeModule,
|
|
938
|
-
SkyTrimModule], exports: [SkyProgressIndicatorComponent,
|
|
939
|
-
SkyProgressIndicatorItemComponent,
|
|
940
|
-
SkyProgressIndicatorNavButtonComponent,
|
|
941
|
-
SkyProgressIndicatorResetButtonComponent,
|
|
942
|
-
SkyProgressIndicatorTitleComponent] });
|
|
943
|
-
SkyProgressIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorModule, imports: [CommonModule,
|
|
944
|
-
SkyI18nModule,
|
|
945
|
-
SkyIconModule,
|
|
946
|
-
SkyProgressIndicatorResourcesModule,
|
|
947
|
-
SkyThemeModule,
|
|
948
|
-
SkyTrimModule] });
|
|
949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyProgressIndicatorModule, decorators: [{
|
|
950
|
-
type: NgModule,
|
|
951
|
-
args: [{
|
|
952
|
-
declarations: [
|
|
953
|
-
SkyProgressIndicatorComponent,
|
|
954
|
-
SkyProgressIndicatorItemComponent,
|
|
955
|
-
SkyProgressIndicatorMarkerClassPipe,
|
|
956
|
-
SkyProgressIndicatorNavButtonClass,
|
|
957
|
-
SkyProgressIndicatorNavButtonDisabledPipe,
|
|
958
|
-
SkyProgressIndicatorNavButtonComponent,
|
|
959
|
-
SkyProgressIndicatorResetButtonComponent,
|
|
960
|
-
SkyProgressIndicatorStatusMarkerComponent,
|
|
961
|
-
SkyProgressIndicatorTitleComponent,
|
|
962
|
-
],
|
|
963
|
-
imports: [
|
|
964
|
-
CommonModule,
|
|
965
|
-
SkyI18nModule,
|
|
966
|
-
SkyIconModule,
|
|
967
|
-
SkyProgressIndicatorResourcesModule,
|
|
968
|
-
SkyThemeModule,
|
|
969
|
-
SkyTrimModule,
|
|
970
|
-
],
|
|
971
|
-
exports: [
|
|
972
|
-
SkyProgressIndicatorComponent,
|
|
973
|
-
SkyProgressIndicatorItemComponent,
|
|
974
|
-
SkyProgressIndicatorNavButtonComponent,
|
|
975
|
-
SkyProgressIndicatorResetButtonComponent,
|
|
976
|
-
SkyProgressIndicatorTitleComponent,
|
|
977
|
-
],
|
|
978
|
-
}]
|
|
979
|
-
}] });
|
|
980
|
-
|
|
981
|
-
/**
|
|
982
|
-
* Generated bundle index. Do not edit.
|
|
983
|
-
*/
|
|
984
|
-
|
|
985
|
-
export { SkyProgressIndicatorActionClickProgressHandler, SkyProgressIndicatorDisplayMode, SkyProgressIndicatorItemStatus, SkyProgressIndicatorMessageType, SkyProgressIndicatorModule, SkyProgressIndicatorItemComponent as λ1, SkyProgressIndicatorComponent as λ2, SkyProgressIndicatorNavButtonComponent as λ3, SkyProgressIndicatorResetButtonComponent as λ4, SkyProgressIndicatorTitleComponent as λ5 };
|
|
986
|
-
//# sourceMappingURL=skyux-progress-indicator.mjs.map
|