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