@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,67 +81,76 @@ 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
|
-
themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this
|
|
93
|
-
this.
|
|
126
|
+
themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe, "f"))).subscribe(() => {
|
|
127
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_changeDetector, "f").markForCheck();
|
|
94
128
|
});
|
|
95
129
|
}
|
|
96
130
|
set displayMode(value) {
|
|
97
|
-
this
|
|
131
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorStatusMarkerComponent__displayMode, value, "f");
|
|
98
132
|
}
|
|
99
133
|
get displayMode() {
|
|
100
|
-
|
|
101
|
-
return 'vertical';
|
|
102
|
-
}
|
|
103
|
-
return this._displayMode;
|
|
134
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent__displayMode, "f");
|
|
104
135
|
}
|
|
105
136
|
set status(value) {
|
|
106
|
-
this
|
|
107
|
-
this.
|
|
108
|
-
}
|
|
109
|
-
get cssClassNames() {
|
|
110
|
-
const classNames = [
|
|
111
|
-
`sky-progress-indicator-status-marker-mode-${this.displayMode}`,
|
|
112
|
-
`sky-progress-indicator-status-marker-status-${this.statusName}`,
|
|
113
|
-
];
|
|
114
|
-
return classNames.join(' ');
|
|
137
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorStatusMarkerComponent__status, value, "f");
|
|
138
|
+
this.isComplete = __classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent__status, "f") === SkyProgressIndicatorItemStatus.Complete;
|
|
115
139
|
}
|
|
116
|
-
get
|
|
117
|
-
|
|
118
|
-
switch (this._status) {
|
|
119
|
-
case SkyProgressIndicatorItemStatus.Active:
|
|
120
|
-
name = 'active';
|
|
121
|
-
break;
|
|
122
|
-
case SkyProgressIndicatorItemStatus.Complete:
|
|
123
|
-
name = 'complete';
|
|
124
|
-
break;
|
|
125
|
-
case SkyProgressIndicatorItemStatus.Incomplete:
|
|
126
|
-
name = 'incomplete';
|
|
127
|
-
break;
|
|
128
|
-
case SkyProgressIndicatorItemStatus.Pending:
|
|
129
|
-
name = 'pending';
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
return name;
|
|
140
|
+
get status() {
|
|
141
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent__status, "f");
|
|
133
142
|
}
|
|
134
143
|
ngOnDestroy() {
|
|
135
|
-
this.
|
|
136
|
-
this.
|
|
144
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe, "f").next();
|
|
145
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe, "f").complete();
|
|
137
146
|
}
|
|
138
147
|
}
|
|
139
|
-
|
|
140
|
-
SkyProgressIndicatorStatusMarkerComponent.ɵ
|
|
141
|
-
i0.ɵɵ
|
|
148
|
+
_SkyProgressIndicatorStatusMarkerComponent_ngUnsubscribe = new WeakMap(), _SkyProgressIndicatorStatusMarkerComponent_changeDetector = new WeakMap(), _SkyProgressIndicatorStatusMarkerComponent__status = new WeakMap(), _SkyProgressIndicatorStatusMarkerComponent__displayMode = new WeakMap();
|
|
149
|
+
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 });
|
|
150
|
+
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 });
|
|
151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, decorators: [{
|
|
142
152
|
type: Component,
|
|
143
|
-
args: [{ selector: 'sky-progress-indicator-status-marker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-progress-indicator-status-marker\"\n role=\"presentation\"\n [ngClass]=\"
|
|
153
|
+
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"] }]
|
|
144
154
|
}], ctorParameters: function () {
|
|
145
155
|
return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyThemeService, decorators: [{
|
|
146
156
|
type: Optional
|
|
@@ -151,68 +161,129 @@ 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 !== null && value !== void 0 ? 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
|
+
|
|
216
287
|
/**
|
|
217
288
|
* Allows the consumer to decide whether the button's action should be completed successfully.
|
|
218
289
|
* The handler is provided with all nav button types.
|
|
@@ -271,18 +342,31 @@ var SkyProgressIndicatorDisplayMode;
|
|
|
271
342
|
SkyProgressIndicatorDisplayMode[SkyProgressIndicatorDisplayMode["Horizontal"] = 1] = "Horizontal";
|
|
272
343
|
})(SkyProgressIndicatorDisplayMode || (SkyProgressIndicatorDisplayMode = {}));
|
|
273
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;
|
|
274
346
|
class SkyProgressIndicatorComponent {
|
|
275
347
|
constructor(changeDetector, windowRef, logger) {
|
|
276
|
-
this
|
|
277
|
-
this.windowRef = windowRef;
|
|
278
|
-
this.logger = logger;
|
|
348
|
+
_SkyProgressIndicatorComponent_instances.add(this);
|
|
279
349
|
/**
|
|
280
350
|
* Fires when the progress indicator changes the status of an item.
|
|
281
351
|
*/
|
|
282
352
|
this.progressChanges = new EventEmitter();
|
|
283
|
-
this.
|
|
284
|
-
this.
|
|
285
|
-
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");
|
|
286
370
|
}
|
|
287
371
|
/**
|
|
288
372
|
* Specifies whether to display the progress indicator vertically or horizontally.
|
|
@@ -296,19 +380,24 @@ class SkyProgressIndicatorComponent {
|
|
|
296
380
|
* @default "vertical"
|
|
297
381
|
*/
|
|
298
382
|
set displayMode(value) {
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
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', {
|
|
302
394
|
deprecationMajorVersion: 6,
|
|
303
395
|
replacementRecommendation: 'Use Wizard (Tabs) instead.',
|
|
304
396
|
});
|
|
305
397
|
}
|
|
306
398
|
}
|
|
307
399
|
get displayMode() {
|
|
308
|
-
|
|
309
|
-
return 'vertical';
|
|
310
|
-
}
|
|
311
|
-
return this._displayMode;
|
|
400
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__displayMode, "f");
|
|
312
401
|
}
|
|
313
402
|
/**
|
|
314
403
|
* Indicates whether the progress indicator is passive. Passive progress indicators inform users of
|
|
@@ -316,14 +405,11 @@ class SkyProgressIndicatorComponent {
|
|
|
316
405
|
* @default false
|
|
317
406
|
*/
|
|
318
407
|
set isPassive(value) {
|
|
319
|
-
this
|
|
408
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__isPassive, value, "f");
|
|
409
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateCssClassNames).call(this);
|
|
320
410
|
}
|
|
321
411
|
get isPassive() {
|
|
322
|
-
|
|
323
|
-
if (this.displayModeResolved === 'horizontal') {
|
|
324
|
-
return false;
|
|
325
|
-
}
|
|
326
|
-
return this._isPassive || false;
|
|
412
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__isPassive, "f");
|
|
327
413
|
}
|
|
328
414
|
/**
|
|
329
415
|
* Specifies an observable of `SkyProgressIndicatorMessage` that determines the status to
|
|
@@ -331,8 +417,8 @@ class SkyProgressIndicatorComponent {
|
|
|
331
417
|
* commanding messages to change the state of the progress indicator based on the message type.
|
|
332
418
|
*/
|
|
333
419
|
set messageStream(value) {
|
|
334
|
-
this
|
|
335
|
-
this.
|
|
420
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_messageStream, value || new Subject(), "f");
|
|
421
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_subscribeToMessageStream).call(this);
|
|
336
422
|
}
|
|
337
423
|
/**
|
|
338
424
|
* Specifies the index for the item to make active when the progress indicator
|
|
@@ -340,232 +426,211 @@ class SkyProgressIndicatorComponent {
|
|
|
340
426
|
* that follow the active item are marked as incomplete.
|
|
341
427
|
*/
|
|
342
428
|
set startingIndex(value) {
|
|
343
|
-
this
|
|
429
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__startingIndex, value || 0, "f");
|
|
344
430
|
}
|
|
345
431
|
get startingIndex() {
|
|
346
|
-
return this
|
|
347
|
-
}
|
|
348
|
-
get cssClassNames() {
|
|
349
|
-
const classNames = [
|
|
350
|
-
`sky-progress-indicator-mode-${this.displayModeResolved}`,
|
|
351
|
-
];
|
|
352
|
-
if (this.isPassive) {
|
|
353
|
-
classNames.push('sky-progress-indicator-passive');
|
|
354
|
-
}
|
|
355
|
-
return classNames.join(' ');
|
|
356
|
-
}
|
|
357
|
-
/**
|
|
358
|
-
* Returns the newly-supported string union type value to be used by the template.
|
|
359
|
-
* @internal
|
|
360
|
-
*/
|
|
361
|
-
get displayModeResolved() {
|
|
362
|
-
switch (this.displayMode) {
|
|
363
|
-
case SkyProgressIndicatorDisplayMode.Vertical:
|
|
364
|
-
case 'vertical':
|
|
365
|
-
return 'vertical';
|
|
366
|
-
default:
|
|
367
|
-
return 'horizontal';
|
|
368
|
-
}
|
|
432
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__startingIndex, "f");
|
|
369
433
|
}
|
|
370
434
|
get hasFinishButton() {
|
|
371
|
-
return this
|
|
435
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorComponent__hasFinishButton, "f");
|
|
372
436
|
}
|
|
373
437
|
set hasFinishButton(value) {
|
|
374
|
-
this
|
|
375
|
-
}
|
|
376
|
-
get itemStatuses() {
|
|
377
|
-
if (!this.itemComponents) {
|
|
378
|
-
return [];
|
|
379
|
-
}
|
|
380
|
-
return this.itemComponents.map((c) => c.status);
|
|
381
|
-
}
|
|
382
|
-
get activeIndex() {
|
|
383
|
-
return this._activeIndex || 0;
|
|
384
|
-
}
|
|
385
|
-
set activeIndex(value) {
|
|
386
|
-
const lastIndex = this.itemComponents.length - 1;
|
|
387
|
-
let newIndex = value;
|
|
388
|
-
if (value > lastIndex) {
|
|
389
|
-
newIndex = lastIndex;
|
|
390
|
-
}
|
|
391
|
-
else if (value < 0) {
|
|
392
|
-
newIndex = 0;
|
|
393
|
-
}
|
|
394
|
-
this._activeIndex = newIndex;
|
|
438
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent__hasFinishButton, value, "f");
|
|
395
439
|
}
|
|
396
440
|
ngOnInit() {
|
|
397
|
-
this
|
|
398
|
-
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);
|
|
399
444
|
}
|
|
400
445
|
ngAfterContentInit() {
|
|
401
|
-
|
|
402
|
-
this.
|
|
446
|
+
var _a;
|
|
447
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_instances, this.startingIndex, "a", _SkyProgressIndicatorComponent_activeIndex_set);
|
|
448
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateSteps).call(this);
|
|
403
449
|
// Note: The delay here is to ensure all change detection on the items has finished. Without
|
|
404
450
|
// the delay we receive a changed before checked error for vertical progress indicators
|
|
405
|
-
this.itemComponents.changes
|
|
406
|
-
|
|
407
|
-
.
|
|
408
|
-
this.updateSteps();
|
|
409
|
-
this.notifyChange();
|
|
451
|
+
(_a = this.itemComponents) === null || _a === void 0 ? void 0 : _a.changes.pipe(takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f")), delay(0)).subscribe(() => {
|
|
452
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateSteps).call(this);
|
|
453
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateStatusesAndNotify).call(this);
|
|
410
454
|
});
|
|
411
455
|
// Wait for item components' change detection to complete
|
|
412
456
|
// before notifying changes to the consumer.
|
|
413
|
-
this.
|
|
414
|
-
this.
|
|
457
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_windowRef, "f").nativeWindow.setTimeout(() => {
|
|
458
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateStatusesAndNotify).call(this);
|
|
415
459
|
});
|
|
416
460
|
}
|
|
417
461
|
ngOnDestroy() {
|
|
418
|
-
this.
|
|
419
|
-
this.
|
|
462
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f").next();
|
|
463
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f").complete();
|
|
420
464
|
}
|
|
421
465
|
sendMessage(message) {
|
|
422
|
-
this.
|
|
423
|
-
}
|
|
424
|
-
gotoNextStep() {
|
|
425
|
-
const nextIndex = this.activeIndex + 1;
|
|
426
|
-
const lastIndex = this.itemComponents.length - 1;
|
|
427
|
-
if (nextIndex > lastIndex) {
|
|
428
|
-
return;
|
|
429
|
-
}
|
|
430
|
-
this.gotoStep(nextIndex);
|
|
431
|
-
}
|
|
432
|
-
gotoPreviousStep() {
|
|
433
|
-
const previousIndex = this.activeIndex - 1;
|
|
434
|
-
if (previousIndex < 0) {
|
|
435
|
-
return;
|
|
436
|
-
}
|
|
437
|
-
this.gotoStep(previousIndex);
|
|
438
|
-
}
|
|
439
|
-
gotoStep(index) {
|
|
440
|
-
this.activeIndex = index;
|
|
441
|
-
this.updateSteps();
|
|
442
|
-
this.notifyChange();
|
|
443
|
-
}
|
|
444
|
-
finishSteps() {
|
|
445
|
-
this.activeIndex = this.itemComponents.length - 1;
|
|
446
|
-
this.itemComponents.forEach((component) => {
|
|
447
|
-
component.status = SkyProgressIndicatorItemStatus.Complete;
|
|
448
|
-
});
|
|
449
|
-
this.notifyChange({
|
|
450
|
-
isComplete: true,
|
|
451
|
-
});
|
|
466
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStream, "f").next(message);
|
|
452
467
|
}
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
468
|
+
}
|
|
469
|
+
_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) {
|
|
470
|
+
var _a;
|
|
471
|
+
const lastIndex = (((_a = this.itemComponents) === null || _a === void 0 ? void 0 : _a.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
|
+
var _a;
|
|
500
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_instances, __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_getLastIndex).call(this), "a", _SkyProgressIndicatorComponent_activeIndex_set);
|
|
501
|
+
(_a = this.itemComponents) === null || _a === void 0 ? void 0 : _a.forEach((component) => {
|
|
502
|
+
component.status = SkyProgressIndicatorItemStatus.Complete;
|
|
503
|
+
});
|
|
504
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateStatusesAndNotify).call(this, {
|
|
505
|
+
isComplete: true,
|
|
506
|
+
});
|
|
507
|
+
}, _SkyProgressIndicatorComponent_resetSteps = function _SkyProgressIndicatorComponent_resetSteps() {
|
|
508
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoStep).call(this, 0);
|
|
509
|
+
}, _SkyProgressIndicatorComponent_updateSteps = function _SkyProgressIndicatorComponent_updateSteps() {
|
|
510
|
+
var _a;
|
|
511
|
+
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get) > __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_getLastIndex).call(this)) {
|
|
512
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_instances, __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get) - 1, "a", _SkyProgressIndicatorComponent_activeIndex_set);
|
|
513
|
+
}
|
|
514
|
+
const activeIndex = __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get);
|
|
515
|
+
const isPassiveAndVertical = __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_isPassiveAndVertical).call(this);
|
|
516
|
+
const isVertical = this.displayMode === 'vertical';
|
|
517
|
+
(_a = this.itemComponents) === null || _a === void 0 ? void 0 : _a.forEach((component, i) => {
|
|
518
|
+
// Set visibility.
|
|
519
|
+
component.isVisible = activeIndex === i || isVertical;
|
|
520
|
+
// Set status.
|
|
521
|
+
let status;
|
|
522
|
+
if (activeIndex === i) {
|
|
523
|
+
if (isPassiveAndVertical) {
|
|
524
|
+
status = SkyProgressIndicatorItemStatus.Pending;
|
|
488
525
|
}
|
|
489
526
|
else {
|
|
490
|
-
|
|
527
|
+
status = SkyProgressIndicatorItemStatus.Active;
|
|
491
528
|
}
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
}
|
|
496
|
-
handleIncomingMessage(message) {
|
|
497
|
-
const value = message;
|
|
498
|
-
let type;
|
|
499
|
-
// Prints a deprecation warning if the consumer provides only `SkyProgressIndicatorMessageType`.
|
|
500
|
-
if (value.type === undefined) {
|
|
501
|
-
console.warn("[Deprecation warning] The progress indicator component's `messageStream` input is set " +
|
|
502
|
-
'to `Subject<SkyProgressIndicatorMessageType>`. We will remove this deprecated type in ' +
|
|
503
|
-
'the next major version release. Instead, set the `messageStream` input to a value of ' +
|
|
504
|
-
'`Subject<SkyProgressIndicatorMessage>`.');
|
|
505
|
-
type = value;
|
|
529
|
+
}
|
|
530
|
+
else if (activeIndex > i) {
|
|
531
|
+
status = SkyProgressIndicatorItemStatus.Complete;
|
|
506
532
|
}
|
|
507
533
|
else {
|
|
508
|
-
|
|
534
|
+
status = SkyProgressIndicatorItemStatus.Incomplete;
|
|
509
535
|
}
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
break;
|
|
517
|
-
case SkyProgressIndicatorMessageType.Finish:
|
|
518
|
-
this.finishSteps();
|
|
519
|
-
break;
|
|
520
|
-
case SkyProgressIndicatorMessageType.Reset:
|
|
521
|
-
this.resetSteps();
|
|
522
|
-
break;
|
|
523
|
-
case SkyProgressIndicatorMessageType.GoTo:
|
|
524
|
-
if (!value.data || value.data.activeIndex === undefined) {
|
|
525
|
-
console.warn('A message type of `SkyProgressIndicatorMessageType.GoTo` was passed to the progress ' +
|
|
526
|
-
'indicator, but no step index was provided. You can pass the desired active ' +
|
|
527
|
-
'index via:\n' +
|
|
528
|
-
'{\n' +
|
|
529
|
-
' type: SkyProgressIndicatorMessageType.GoTo,\n' +
|
|
530
|
-
' data: { activeIndex: 0 }\n' +
|
|
531
|
-
'}');
|
|
532
|
-
return;
|
|
533
|
-
}
|
|
534
|
-
this.gotoStep(value.data.activeIndex);
|
|
535
|
-
break;
|
|
536
|
-
default:
|
|
537
|
-
break;
|
|
536
|
+
component.status = status;
|
|
537
|
+
// Show or hide the status markers.
|
|
538
|
+
component.showStatusMarker = isVertical;
|
|
539
|
+
// Show or hide the step number.
|
|
540
|
+
if (isPassiveAndVertical) {
|
|
541
|
+
component.hideStepNumber();
|
|
538
542
|
}
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
543
|
+
else {
|
|
544
|
+
component.showStepNumber(i + 1);
|
|
545
|
+
}
|
|
546
|
+
// If we're in passive mode, don't show titles for incomplete items.
|
|
547
|
+
component.showTitle = !(isPassiveAndVertical && activeIndex < i);
|
|
548
|
+
});
|
|
549
|
+
}, _SkyProgressIndicatorComponent_updateItemStatuses = function _SkyProgressIndicatorComponent_updateItemStatuses() {
|
|
550
|
+
var _a;
|
|
551
|
+
/* istanbul ignore next */
|
|
552
|
+
this.itemStatuses = ((_a = this.itemComponents) === null || _a === void 0 ? void 0 : _a.map((c) => c.status)) || [];
|
|
553
|
+
}, _SkyProgressIndicatorComponent_updateCssClassNames = function _SkyProgressIndicatorComponent_updateCssClassNames() {
|
|
554
|
+
const classNames = [`sky-progress-indicator-mode-${this.displayMode}`];
|
|
555
|
+
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_isPassiveAndVertical).call(this)) {
|
|
556
|
+
classNames.push('sky-progress-indicator-passive');
|
|
557
|
+
}
|
|
558
|
+
this.cssClassNames = classNames;
|
|
559
|
+
}, _SkyProgressIndicatorComponent_handleIncomingMessage = function _SkyProgressIndicatorComponent_handleIncomingMessage(message) {
|
|
560
|
+
const indicatorMessage = message;
|
|
561
|
+
let type;
|
|
562
|
+
// Prints a deprecation warning if the consumer provides only `SkyProgressIndicatorMessageType`.
|
|
563
|
+
if (indicatorMessage.type === undefined) {
|
|
564
|
+
console.warn("[Deprecation warning] The progress indicator component's `messageStream` input is set " +
|
|
565
|
+
'to `Subject<SkyProgressIndicatorMessageType>`. We will remove this deprecated type in ' +
|
|
566
|
+
'the next major version release. Instead, set the `messageStream` input to a value of ' +
|
|
567
|
+
'`Subject<SkyProgressIndicatorMessage>`.');
|
|
568
|
+
type = message;
|
|
569
|
+
}
|
|
570
|
+
else {
|
|
571
|
+
type = indicatorMessage.type;
|
|
572
|
+
}
|
|
573
|
+
switch (type) {
|
|
574
|
+
case SkyProgressIndicatorMessageType.Progress:
|
|
575
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoNextStep).call(this);
|
|
576
|
+
break;
|
|
577
|
+
case SkyProgressIndicatorMessageType.Regress:
|
|
578
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoPreviousStep).call(this);
|
|
579
|
+
break;
|
|
580
|
+
case SkyProgressIndicatorMessageType.Finish:
|
|
581
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_finishSteps).call(this);
|
|
582
|
+
break;
|
|
583
|
+
case SkyProgressIndicatorMessageType.Reset:
|
|
584
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_resetSteps).call(this);
|
|
585
|
+
break;
|
|
586
|
+
case SkyProgressIndicatorMessageType.GoTo:
|
|
587
|
+
if (!indicatorMessage.data ||
|
|
588
|
+
indicatorMessage.data.activeIndex === undefined) {
|
|
589
|
+
console.warn('A message type of `SkyProgressIndicatorMessageType.GoTo` was passed to the progress ' +
|
|
590
|
+
'indicator, but no step index was provided. You can pass the desired active ' +
|
|
591
|
+
'index via:\n' +
|
|
592
|
+
'{\n' +
|
|
593
|
+
' type: SkyProgressIndicatorMessageType.GoTo,\n' +
|
|
594
|
+
' data: { activeIndex: 0 }\n' +
|
|
595
|
+
'}');
|
|
596
|
+
return;
|
|
554
597
|
}
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
598
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_gotoStep).call(this, indicatorMessage.data.activeIndex);
|
|
599
|
+
break;
|
|
600
|
+
default:
|
|
601
|
+
break;
|
|
602
|
+
}
|
|
603
|
+
// Update the view after a message is received.
|
|
604
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_changeDetector, "f").markForCheck();
|
|
605
|
+
}, _SkyProgressIndicatorComponent_subscribeToMessageStream = function _SkyProgressIndicatorComponent_subscribeToMessageStream() {
|
|
606
|
+
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_initialized, "f")) {
|
|
607
|
+
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStreamSub, "f")) {
|
|
608
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStreamSub, "f").unsubscribe();
|
|
609
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_messageStreamSub, undefined, "f");
|
|
610
|
+
}
|
|
611
|
+
if (__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStream, "f")) {
|
|
612
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorComponent_messageStreamSub, __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_messageStream, "f")
|
|
613
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_ngUnsubscribe, "f")))
|
|
614
|
+
.subscribe((message) => {
|
|
615
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_handleIncomingMessage).call(this, message);
|
|
616
|
+
}), "f");
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
}, _SkyProgressIndicatorComponent_updateStatusesAndNotify = function _SkyProgressIndicatorComponent_updateStatusesAndNotify(change) {
|
|
620
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "m", _SkyProgressIndicatorComponent_updateItemStatuses).call(this);
|
|
621
|
+
this.progressChanges.next(Object.assign({}, {
|
|
622
|
+
activeIndex: __classPrivateFieldGet(this, _SkyProgressIndicatorComponent_instances, "a", _SkyProgressIndicatorComponent_activeIndex_get),
|
|
623
|
+
itemStatuses: this.itemStatuses,
|
|
624
|
+
}, change));
|
|
625
|
+
}, _SkyProgressIndicatorComponent_getLastIndex = function _SkyProgressIndicatorComponent_getLastIndex() {
|
|
626
|
+
var _a;
|
|
627
|
+
return (((_a = this.itemComponents) === null || _a === void 0 ? void 0 : _a.length) || 0) - 1;
|
|
628
|
+
};
|
|
629
|
+
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 });
|
|
630
|
+
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 });
|
|
631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorComponent, decorators: [{
|
|
567
632
|
type: Component,
|
|
568
|
-
args: [{ selector: 'sky-progress-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-progress-indicator\" [ngClass]=\"cssClassNames\">\n <div\n *ngIf=\"
|
|
633
|
+
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"] }]
|
|
569
634
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyLogService }]; }, propDecorators: { displayMode: [{
|
|
570
635
|
type: Input
|
|
571
636
|
}], isPassive: [{
|
|
@@ -581,21 +646,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
581
646
|
args: [SkyProgressIndicatorItemComponent]
|
|
582
647
|
}] } });
|
|
583
648
|
|
|
649
|
+
var _SkyProgressIndicatorNavButtonComponent_instances, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, _SkyProgressIndicatorNavButtonComponent_parentTimeout, _SkyProgressIndicatorNavButtonComponent__buttonType, _SkyProgressIndicatorNavButtonComponent__disabled, _SkyProgressIndicatorNavButtonComponent__isVisible, _SkyProgressIndicatorNavButtonComponent__progressIndicator, _SkyProgressIndicatorNavButtonComponent_changeDetector, _SkyProgressIndicatorNavButtonComponent_parentComponent, _SkyProgressIndicatorNavButtonComponent_sendMessage, _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility;
|
|
650
|
+
const BUTTON_TYPE_DEFAULT = 'next';
|
|
584
651
|
/**
|
|
585
652
|
* Displays a button to navigate the steps in modal wizards. We recommend against using it in
|
|
586
653
|
* passive progress indicators and waterfall progress indicators.
|
|
587
654
|
*/
|
|
588
655
|
class SkyProgressIndicatorNavButtonComponent {
|
|
589
656
|
constructor(changeDetector, parentComponent) {
|
|
590
|
-
this
|
|
591
|
-
this.parentComponent = parentComponent;
|
|
657
|
+
_SkyProgressIndicatorNavButtonComponent_instances.add(this);
|
|
592
658
|
/**
|
|
593
659
|
* Fires when users select the nav button and emits a `SkyProgressIndicatorActionClickArgs`
|
|
594
660
|
* object that is passed into the callback function to allow consumers to decide whether
|
|
595
661
|
* the button’s action should complete successfully.
|
|
596
662
|
*/
|
|
597
663
|
this.actionClick = new EventEmitter();
|
|
598
|
-
this
|
|
664
|
+
_SkyProgressIndicatorNavButtonComponent_ngUnsubscribe.set(this, new Subject());
|
|
665
|
+
_SkyProgressIndicatorNavButtonComponent_parentTimeout.set(this, void 0);
|
|
666
|
+
_SkyProgressIndicatorNavButtonComponent__buttonType.set(this, BUTTON_TYPE_DEFAULT);
|
|
667
|
+
_SkyProgressIndicatorNavButtonComponent__disabled.set(this, void 0);
|
|
668
|
+
_SkyProgressIndicatorNavButtonComponent__isVisible.set(this, void 0);
|
|
669
|
+
_SkyProgressIndicatorNavButtonComponent__progressIndicator.set(this, void 0);
|
|
670
|
+
_SkyProgressIndicatorNavButtonComponent_changeDetector.set(this, void 0);
|
|
671
|
+
_SkyProgressIndicatorNavButtonComponent_parentComponent.set(this, void 0);
|
|
672
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent_changeDetector, changeDetector, "f");
|
|
673
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent_parentComponent, parentComponent, "f");
|
|
599
674
|
}
|
|
600
675
|
/**
|
|
601
676
|
* Specifies the type of nav button to include.
|
|
@@ -603,57 +678,45 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
603
678
|
* @default "next"
|
|
604
679
|
*/
|
|
605
680
|
set buttonType(value) {
|
|
606
|
-
this
|
|
681
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__buttonType, value || BUTTON_TYPE_DEFAULT, "f");
|
|
607
682
|
}
|
|
608
683
|
get buttonType() {
|
|
609
|
-
|
|
610
|
-
return 'next';
|
|
611
|
-
}
|
|
612
|
-
return this._buttonType;
|
|
684
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__buttonType, "f");
|
|
613
685
|
}
|
|
614
686
|
/**
|
|
615
687
|
* Indicates whether to disable the nav button.
|
|
616
688
|
* @default false
|
|
617
689
|
*/
|
|
618
690
|
set disabled(value) {
|
|
619
|
-
this
|
|
620
|
-
this.
|
|
691
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__disabled, value, "f");
|
|
692
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_changeDetector, "f").markForCheck();
|
|
621
693
|
}
|
|
622
694
|
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;
|
|
695
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__disabled, "f");
|
|
633
696
|
}
|
|
634
697
|
/**
|
|
635
698
|
* Specifies the progress indicator component to associate with the nav button.
|
|
636
699
|
* @required
|
|
637
700
|
*/
|
|
638
701
|
set progressIndicator(value) {
|
|
639
|
-
this
|
|
640
|
-
if (
|
|
702
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, value, "f");
|
|
703
|
+
if (__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f")) {
|
|
641
704
|
if (this.buttonType === 'finish') {
|
|
642
705
|
// The `hasFinishButton` field was added to support legacy API.
|
|
643
706
|
// Some implementations only include a next button; we cannot
|
|
644
707
|
// assume that every implementation includes both a finish button and a next button.
|
|
645
|
-
this.
|
|
708
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f").hasFinishButton = true;
|
|
646
709
|
}
|
|
647
|
-
this.
|
|
648
|
-
.pipe(distinctUntilChanged(), takeUntil(this
|
|
710
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f").progressChanges
|
|
711
|
+
.pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, "f")))
|
|
649
712
|
.subscribe((change) => {
|
|
650
713
|
this.lastProgressChange = change;
|
|
651
|
-
this.
|
|
714
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_instances, "m", _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility).call(this, change);
|
|
652
715
|
});
|
|
653
716
|
}
|
|
654
717
|
else {
|
|
655
|
-
if (!this
|
|
656
|
-
this
|
|
718
|
+
if (!__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_parentTimeout, "f")) {
|
|
719
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent_parentTimeout, window.setTimeout(() => {
|
|
657
720
|
/* istanbul ignore else */
|
|
658
721
|
if (!this.progressIndicator) {
|
|
659
722
|
throw new Error('The `<sky-progress-indicator-nav-button>` component requires a reference to ' +
|
|
@@ -667,51 +730,31 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
667
730
|
'>\n' +
|
|
668
731
|
'</sky-progress-indicator-nav-button>');
|
|
669
732
|
}
|
|
670
|
-
}, 50);
|
|
733
|
+
}, 50), "f");
|
|
671
734
|
}
|
|
672
735
|
}
|
|
673
736
|
}
|
|
674
737
|
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}`;
|
|
738
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__progressIndicator, "f");
|
|
696
739
|
}
|
|
697
740
|
set isVisible(value) {
|
|
698
|
-
this
|
|
699
|
-
this.
|
|
741
|
+
__classPrivateFieldSet(this, _SkyProgressIndicatorNavButtonComponent__isVisible, value, "f");
|
|
742
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_changeDetector, "f").markForCheck();
|
|
700
743
|
}
|
|
701
744
|
get isVisible() {
|
|
702
|
-
return this
|
|
745
|
+
return __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent__isVisible, "f");
|
|
703
746
|
}
|
|
704
747
|
ngAfterViewInit() {
|
|
705
|
-
if (!this.progressIndicator && this
|
|
706
|
-
this.progressIndicator = this
|
|
748
|
+
if (!this.progressIndicator && __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_parentComponent, "f")) {
|
|
749
|
+
this.progressIndicator = __classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_parentComponent, "f");
|
|
707
750
|
}
|
|
708
751
|
else if (!this.progressIndicator) {
|
|
709
752
|
this.progressIndicator = undefined;
|
|
710
753
|
}
|
|
711
754
|
}
|
|
712
755
|
ngOnDestroy() {
|
|
713
|
-
this.
|
|
714
|
-
this.
|
|
756
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, "f").next();
|
|
757
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_ngUnsubscribe, "f").complete();
|
|
715
758
|
this.actionClick.complete();
|
|
716
759
|
}
|
|
717
760
|
onClick(event) {
|
|
@@ -730,8 +773,6 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
730
773
|
case 'reset':
|
|
731
774
|
type = SkyProgressIndicatorMessageType.Reset;
|
|
732
775
|
break;
|
|
733
|
-
default:
|
|
734
|
-
break;
|
|
735
776
|
}
|
|
736
777
|
// If the consumer has subscribed to the `actionClick` event,
|
|
737
778
|
// allow them to decide when to advance to the next step.
|
|
@@ -739,42 +780,49 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
739
780
|
this.actionClick.emit({
|
|
740
781
|
event,
|
|
741
782
|
progressHandler: new SkyProgressIndicatorActionClickProgressHandler(() => {
|
|
742
|
-
this.
|
|
783
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_instances, "m", _SkyProgressIndicatorNavButtonComponent_sendMessage).call(this, type);
|
|
743
784
|
}),
|
|
744
785
|
});
|
|
745
786
|
}
|
|
746
787
|
else {
|
|
747
|
-
this.
|
|
788
|
+
__classPrivateFieldGet(this, _SkyProgressIndicatorNavButtonComponent_instances, "m", _SkyProgressIndicatorNavButtonComponent_sendMessage).call(this, type);
|
|
748
789
|
}
|
|
749
790
|
}
|
|
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
791
|
}
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
792
|
+
_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) {
|
|
793
|
+
var _a;
|
|
794
|
+
if (type !== undefined) {
|
|
795
|
+
(_a = this.progressIndicator) === null || _a === void 0 ? void 0 : _a.sendMessage({ type });
|
|
796
|
+
}
|
|
797
|
+
}, _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility = function _SkyProgressIndicatorNavButtonComponent_updateButtonVisibility(change) {
|
|
798
|
+
var _a;
|
|
799
|
+
const isLastStep = change.itemStatuses &&
|
|
800
|
+
change.activeIndex === change.itemStatuses.length - 1;
|
|
801
|
+
const buttonType = this.buttonType;
|
|
802
|
+
// Hide the button if all steps are complete
|
|
803
|
+
// (except for the reset button)
|
|
804
|
+
if (buttonType !== 'reset' && change.isComplete) {
|
|
805
|
+
this.isVisible = false;
|
|
806
|
+
return;
|
|
807
|
+
}
|
|
808
|
+
if (buttonType === 'finish') {
|
|
809
|
+
this.isVisible = isLastStep;
|
|
810
|
+
return;
|
|
811
|
+
}
|
|
812
|
+
// Hide the next button on the last step only if a finish button exists.
|
|
813
|
+
if (buttonType === 'next' &&
|
|
814
|
+
isLastStep &&
|
|
815
|
+
((_a = this.progressIndicator) === null || _a === void 0 ? void 0 : _a.hasFinishButton)) {
|
|
816
|
+
this.isVisible = false;
|
|
817
|
+
return;
|
|
818
|
+
}
|
|
819
|
+
this.isVisible = true;
|
|
820
|
+
};
|
|
821
|
+
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 });
|
|
822
|
+
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 });
|
|
823
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, decorators: [{
|
|
776
824
|
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]=\"
|
|
825
|
+
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
826
|
}], ctorParameters: function () {
|
|
779
827
|
return [{ type: i0.ChangeDetectorRef }, { type: SkyProgressIndicatorComponent, decorators: [{
|
|
780
828
|
type: Optional
|
|
@@ -817,21 +865,22 @@ class SkyProgressIndicatorResetButtonComponent {
|
|
|
817
865
|
this.changeDetector.markForCheck();
|
|
818
866
|
}
|
|
819
867
|
get disabled() {
|
|
820
|
-
return this._disabled
|
|
868
|
+
return this._disabled;
|
|
821
869
|
}
|
|
822
870
|
ngOnDestroy() {
|
|
823
871
|
this.resetClick.complete();
|
|
824
872
|
}
|
|
825
873
|
onClick() {
|
|
874
|
+
var _a;
|
|
826
875
|
this.resetClick.emit();
|
|
827
|
-
this.progressIndicator.sendMessage({
|
|
876
|
+
(_a = this.progressIndicator) === null || _a === void 0 ? void 0 : _a.sendMessage({
|
|
828
877
|
type: SkyProgressIndicatorMessageType.Reset,
|
|
829
878
|
});
|
|
830
879
|
}
|
|
831
880
|
}
|
|
832
|
-
SkyProgressIndicatorResetButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.
|
|
833
|
-
SkyProgressIndicatorResetButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.
|
|
881
|
+
SkyProgressIndicatorResetButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
882
|
+
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 });
|
|
883
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, decorators: [{
|
|
835
884
|
type: Component,
|
|
836
885
|
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" }]
|
|
837
886
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
@@ -847,18 +896,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
847
896
|
*/
|
|
848
897
|
class SkyProgressIndicatorTitleComponent {
|
|
849
898
|
}
|
|
850
|
-
SkyProgressIndicatorTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.
|
|
851
|
-
SkyProgressIndicatorTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.
|
|
852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.
|
|
899
|
+
SkyProgressIndicatorTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
900
|
+
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 });
|
|
901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorTitleComponent, decorators: [{
|
|
853
902
|
type: Component,
|
|
854
903
|
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"] }]
|
|
855
904
|
}] });
|
|
856
905
|
|
|
857
906
|
class SkyProgressIndicatorModule {
|
|
858
907
|
}
|
|
859
|
-
SkyProgressIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.
|
|
860
|
-
SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.
|
|
908
|
+
SkyProgressIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
909
|
+
SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorModule, declarations: [SkyProgressIndicatorComponent,
|
|
861
910
|
SkyProgressIndicatorItemComponent,
|
|
911
|
+
SkyProgressIndicatorMarkerClassPipe,
|
|
912
|
+
SkyProgressIndicatorNavButtonClass,
|
|
913
|
+
SkyProgressIndicatorNavButtonDisabledPipe,
|
|
862
914
|
SkyProgressIndicatorNavButtonComponent,
|
|
863
915
|
SkyProgressIndicatorResetButtonComponent,
|
|
864
916
|
SkyProgressIndicatorStatusMarkerComponent,
|
|
@@ -872,18 +924,21 @@ SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
872
924
|
SkyProgressIndicatorNavButtonComponent,
|
|
873
925
|
SkyProgressIndicatorResetButtonComponent,
|
|
874
926
|
SkyProgressIndicatorTitleComponent] });
|
|
875
|
-
SkyProgressIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.
|
|
927
|
+
SkyProgressIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorModule, imports: [CommonModule,
|
|
876
928
|
SkyI18nModule,
|
|
877
929
|
SkyIconModule,
|
|
878
930
|
SkyProgressIndicatorResourcesModule,
|
|
879
931
|
SkyThemeModule,
|
|
880
932
|
SkyTrimModule] });
|
|
881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyProgressIndicatorModule, decorators: [{
|
|
882
934
|
type: NgModule,
|
|
883
935
|
args: [{
|
|
884
936
|
declarations: [
|
|
885
937
|
SkyProgressIndicatorComponent,
|
|
886
938
|
SkyProgressIndicatorItemComponent,
|
|
939
|
+
SkyProgressIndicatorMarkerClassPipe,
|
|
940
|
+
SkyProgressIndicatorNavButtonClass,
|
|
941
|
+
SkyProgressIndicatorNavButtonDisabledPipe,
|
|
887
942
|
SkyProgressIndicatorNavButtonComponent,
|
|
888
943
|
SkyProgressIndicatorResetButtonComponent,
|
|
889
944
|
SkyProgressIndicatorStatusMarkerComponent,
|