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