@skyux/progress-indicator 5.0.0 → 5.0.3
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/bundles/skyux-progress-indicator.umd.js +93 -95
- package/documentation.json +101 -100
- package/esm2015/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.js +6 -6
- package/esm2015/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.js +15 -21
- package/esm2015/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.js +7 -7
- package/esm2015/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.js +7 -7
- package/esm2015/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.js +5 -5
- package/esm2015/modules/progress-indicator/progress-indicator.component.js +17 -20
- package/esm2015/modules/progress-indicator/progress-indicator.module.js +10 -10
- package/esm2015/modules/progress-indicator/types/progress-indicator-action-click-args.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-action-click-progress-handler.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-change.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-display-mode-type.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-item-status.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-message-type.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-message.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-mode.js +1 -1
- package/esm2015/modules/progress-indicator/types/progress-indicator-nav-button-type.js +1 -1
- package/esm2015/modules/shared/sky-progress-indicator-resources.module.js +21 -12
- package/fesm2015/skyux-progress-indicator.js +74 -74
- package/fesm2015/skyux-progress-indicator.js.map +1 -1
- package/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.d.ts +3 -3
- package/modules/progress-indicator/progress-indicator.component.d.ts +1 -1
- package/package.json +7 -7
- package/bundles/skyux-progress-indicator.umd.js.map +0 -1
|
@@ -19,7 +19,12 @@ import * as i1$1 from '@skyux/core';
|
|
|
19
19
|
* To update this file, simply rerun the command.
|
|
20
20
|
*/
|
|
21
21
|
const RESOURCES = {
|
|
22
|
-
'EN-US': {
|
|
22
|
+
'EN-US': {
|
|
23
|
+
skyux_progress_indicator_navigator_finish: { message: 'Finish' },
|
|
24
|
+
skyux_progress_indicator_navigator_next: { message: 'Next' },
|
|
25
|
+
skyux_progress_indicator_navigator_previous: { message: 'Previous' },
|
|
26
|
+
skyux_progress_indicator_navigator_reset: { message: 'Reset' },
|
|
27
|
+
},
|
|
23
28
|
};
|
|
24
29
|
class SkyProgressIndicatorResourcesProvider {
|
|
25
30
|
getString(localeInfo, name) {
|
|
@@ -31,22 +36,26 @@ class SkyProgressIndicatorResourcesProvider {
|
|
|
31
36
|
*/
|
|
32
37
|
class SkyProgressIndicatorResourcesModule {
|
|
33
38
|
}
|
|
34
|
-
SkyProgressIndicatorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
35
|
-
SkyProgressIndicatorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
36
|
-
SkyProgressIndicatorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
39
|
+
SkyProgressIndicatorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
40
|
+
SkyProgressIndicatorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorResourcesModule, exports: [SkyI18nModule] });
|
|
41
|
+
SkyProgressIndicatorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorResourcesModule, providers: [
|
|
42
|
+
{
|
|
37
43
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
38
44
|
useClass: SkyProgressIndicatorResourcesProvider,
|
|
39
|
-
multi: true
|
|
40
|
-
}
|
|
41
|
-
|
|
45
|
+
multi: true,
|
|
46
|
+
},
|
|
47
|
+
], imports: [SkyI18nModule] });
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorResourcesModule, decorators: [{
|
|
42
49
|
type: NgModule,
|
|
43
50
|
args: [{
|
|
44
51
|
exports: [SkyI18nModule],
|
|
45
|
-
providers: [
|
|
52
|
+
providers: [
|
|
53
|
+
{
|
|
46
54
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
47
55
|
useClass: SkyProgressIndicatorResourcesProvider,
|
|
48
|
-
multi: true
|
|
49
|
-
}
|
|
56
|
+
multi: true,
|
|
57
|
+
},
|
|
58
|
+
],
|
|
50
59
|
}]
|
|
51
60
|
}] });
|
|
52
61
|
|
|
@@ -99,7 +108,7 @@ class SkyProgressIndicatorStatusMarkerComponent {
|
|
|
99
108
|
get cssClassNames() {
|
|
100
109
|
const classNames = [
|
|
101
110
|
`sky-progress-indicator-status-marker-mode-${this.displayMode}`,
|
|
102
|
-
`sky-progress-indicator-status-marker-status-${this.statusName}
|
|
111
|
+
`sky-progress-indicator-status-marker-status-${this.statusName}`,
|
|
103
112
|
];
|
|
104
113
|
return classNames.join(' ');
|
|
105
114
|
}
|
|
@@ -127,15 +136,15 @@ class SkyProgressIndicatorStatusMarkerComponent {
|
|
|
127
136
|
this.ngUnsubscribe.complete();
|
|
128
137
|
}
|
|
129
138
|
}
|
|
130
|
-
SkyProgressIndicatorStatusMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
131
|
-
SkyProgressIndicatorStatusMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
139
|
+
SkyProgressIndicatorStatusMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
+
SkyProgressIndicatorStatusMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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]=\"cssClassNames\"\n>\n <div\n *skyThemeIf=\"'default'\"\n class=\"sky-progress-indicator-status-marker-icon\"\n >\n <sky-icon *ngIf=\"statusName === 'complete'\" icon=\"check\"> </sky-icon>\n </div>\n <div *skyThemeIf=\"'modern'\" class=\"sky-progress-indicator-status-marker-icon\">\n <sky-icon *ngIf=\"statusName === 'complete'\" icon=\"check\" iconType=\"skyux\">\n </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"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorStatusMarkerComponent, decorators: [{
|
|
133
142
|
type: Component,
|
|
134
143
|
args: [{
|
|
135
144
|
selector: 'sky-progress-indicator-status-marker',
|
|
136
145
|
templateUrl: './progress-indicator-status-marker.component.html',
|
|
137
146
|
styleUrls: ['./progress-indicator-status-marker.component.scss'],
|
|
138
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
147
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
139
148
|
}]
|
|
140
149
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyThemeService, decorators: [{
|
|
141
150
|
type: Optional
|
|
@@ -199,15 +208,15 @@ class SkyProgressIndicatorItemComponent {
|
|
|
199
208
|
this.titlePrefix = '';
|
|
200
209
|
}
|
|
201
210
|
}
|
|
202
|
-
SkyProgressIndicatorItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
203
|
-
SkyProgressIndicatorItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
211
|
+
SkyProgressIndicatorItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
212
|
+
SkyProgressIndicatorItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 >\n {{ formattedTitle }}\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"], components: [{ type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: ["displayMode", "status"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorItemComponent, decorators: [{
|
|
205
214
|
type: Component,
|
|
206
215
|
args: [{
|
|
207
216
|
selector: 'sky-progress-indicator-item',
|
|
208
217
|
templateUrl: './progress-indicator-item.component.html',
|
|
209
218
|
styleUrls: ['./progress-indicator-item.component.scss'],
|
|
210
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
219
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
211
220
|
}]
|
|
212
221
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
213
222
|
type: Input
|
|
@@ -275,7 +284,7 @@ class SkyProgressIndicatorComponent {
|
|
|
275
284
|
* and [waterfall progress indicators](https://developer.blackbaud.com/skyux/components/progress-indicator/waterfall-progress-indicator),
|
|
276
285
|
* use the vertical display mode. For [modal wizards](https://developer.blackbaud.com/skyux/components/wizard),
|
|
277
286
|
* use the horizontal display mode.
|
|
278
|
-
* @default
|
|
287
|
+
* @default "vertical"
|
|
279
288
|
*/
|
|
280
289
|
set displayMode(value) {
|
|
281
290
|
this._displayMode = value;
|
|
@@ -323,7 +332,7 @@ class SkyProgressIndicatorComponent {
|
|
|
323
332
|
}
|
|
324
333
|
get cssClassNames() {
|
|
325
334
|
const classNames = [
|
|
326
|
-
`sky-progress-indicator-mode-${this.displayModeResolved}
|
|
335
|
+
`sky-progress-indicator-mode-${this.displayModeResolved}`,
|
|
327
336
|
];
|
|
328
337
|
if (this.isPassive) {
|
|
329
338
|
classNames.push('sky-progress-indicator-passive');
|
|
@@ -353,7 +362,7 @@ class SkyProgressIndicatorComponent {
|
|
|
353
362
|
if (!this.itemComponents) {
|
|
354
363
|
return [];
|
|
355
364
|
}
|
|
356
|
-
return this.itemComponents.map(c => c.status);
|
|
365
|
+
return this.itemComponents.map((c) => c.status);
|
|
357
366
|
}
|
|
358
367
|
get activeIndex() {
|
|
359
368
|
return this._activeIndex || 0;
|
|
@@ -423,23 +432,22 @@ class SkyProgressIndicatorComponent {
|
|
|
423
432
|
component.status = SkyProgressIndicatorItemStatus.Complete;
|
|
424
433
|
});
|
|
425
434
|
this.notifyChange({
|
|
426
|
-
isComplete: true
|
|
435
|
+
isComplete: true,
|
|
427
436
|
});
|
|
428
437
|
}
|
|
429
438
|
resetSteps() {
|
|
430
439
|
this.gotoStep(0);
|
|
431
440
|
}
|
|
432
441
|
updateSteps() {
|
|
433
|
-
if (this.activeIndex >
|
|
442
|
+
if (this.activeIndex > this.itemComponents.length - 1) {
|
|
434
443
|
this.activeIndex--;
|
|
435
444
|
}
|
|
436
445
|
const activeIndex = this.activeIndex;
|
|
437
446
|
const isPassive = this.isPassive;
|
|
438
|
-
const isVertical =
|
|
447
|
+
const isVertical = this.displayModeResolved === 'vertical';
|
|
439
448
|
this.itemComponents.forEach((component, i) => {
|
|
440
449
|
// Set visibility.
|
|
441
|
-
component.isVisible =
|
|
442
|
-
isVertical);
|
|
450
|
+
component.isVisible = activeIndex === i || isVertical;
|
|
443
451
|
// Set status.
|
|
444
452
|
let status;
|
|
445
453
|
if (activeIndex === i) {
|
|
@@ -467,8 +475,7 @@ class SkyProgressIndicatorComponent {
|
|
|
467
475
|
component.showStepNumber(i + 1);
|
|
468
476
|
}
|
|
469
477
|
// If we're in passive mode, don't show titles for incomplete items.
|
|
470
|
-
component.showTitle = !(isPassive &&
|
|
471
|
-
activeIndex < i);
|
|
478
|
+
component.showTitle = !(isPassive && activeIndex < i);
|
|
472
479
|
});
|
|
473
480
|
}
|
|
474
481
|
handleIncomingMessage(message) {
|
|
@@ -476,7 +483,7 @@ class SkyProgressIndicatorComponent {
|
|
|
476
483
|
let type;
|
|
477
484
|
// Prints a deprecation warning if the consumer provides only `SkyProgressIndicatorMessageType`.
|
|
478
485
|
if (value.type === undefined) {
|
|
479
|
-
console.warn(
|
|
486
|
+
console.warn("[Deprecation warning] The progress indicator component's `messageStream` input is set " +
|
|
480
487
|
'to `Subject<SkyProgressIndicatorMessageType>`. We will remove this deprecated type in ' +
|
|
481
488
|
'the next major version release. Instead, set the `messageStream` input to a value of ' +
|
|
482
489
|
'`Subject<SkyProgressIndicatorMessage>`.');
|
|
@@ -499,8 +506,7 @@ class SkyProgressIndicatorComponent {
|
|
|
499
506
|
this.resetSteps();
|
|
500
507
|
break;
|
|
501
508
|
case SkyProgressIndicatorMessageType.GoTo:
|
|
502
|
-
if (!value.data ||
|
|
503
|
-
value.data.activeIndex === undefined) {
|
|
509
|
+
if (!value.data || value.data.activeIndex === undefined) {
|
|
504
510
|
console.warn('A message type of `SkyProgressIndicatorMessageType.GoTo` was passed to the progress ' +
|
|
505
511
|
'indicator, but no step index was provided. You can pass the desired active ' +
|
|
506
512
|
'index via:\n' +
|
|
@@ -536,19 +542,19 @@ class SkyProgressIndicatorComponent {
|
|
|
536
542
|
notifyChange(change) {
|
|
537
543
|
this.progressChanges.next(Object.assign({}, {
|
|
538
544
|
activeIndex: this.activeIndex,
|
|
539
|
-
itemStatuses: this.itemStatuses
|
|
545
|
+
itemStatuses: this.itemStatuses,
|
|
540
546
|
}, change));
|
|
541
547
|
}
|
|
542
548
|
}
|
|
543
|
-
SkyProgressIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
544
|
-
SkyProgressIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
545
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
549
|
+
SkyProgressIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
550
|
+
SkyProgressIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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=\"displayModeResolved === 'horizontal'\"\n class=\"sky-progress-indicator-horizontal-status-markers\"\n >\n <sky-progress-indicator-status-marker\n *ngFor=\"let status of itemStatuses\"\n [displayMode]=\"displayModeResolved\"\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"], components: [{ type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: ["displayMode", "status"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorComponent, decorators: [{
|
|
546
552
|
type: Component,
|
|
547
553
|
args: [{
|
|
548
554
|
selector: 'sky-progress-indicator',
|
|
549
555
|
templateUrl: './progress-indicator.component.html',
|
|
550
556
|
styleUrls: ['./progress-indicator.component.scss'],
|
|
551
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
557
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
552
558
|
}]
|
|
553
559
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyAppWindowRef }]; }, propDecorators: { displayMode: [{
|
|
554
560
|
type: Input
|
|
@@ -597,8 +603,8 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
597
603
|
}
|
|
598
604
|
/**
|
|
599
605
|
* Specifies the type of nav button to include.
|
|
600
|
-
* The valid options are `finish`, `next`, `previous`, and `reset`.
|
|
601
|
-
* @default next
|
|
606
|
+
* The valid options are `"finish"`, `"next"`, `"previous"`, and `"reset"`.
|
|
607
|
+
* @default "next"
|
|
602
608
|
*/
|
|
603
609
|
set buttonType(value) {
|
|
604
610
|
this._buttonType = value;
|
|
@@ -620,13 +626,11 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
620
626
|
get disabled() {
|
|
621
627
|
const buttonType = this.buttonType;
|
|
622
628
|
const activeIndex = this.lastProgressChange.activeIndex;
|
|
623
|
-
const isLastStep =
|
|
624
|
-
if (buttonType === 'previous' &&
|
|
625
|
-
activeIndex === 0) {
|
|
629
|
+
const isLastStep = activeIndex === this.lastProgressChange.itemStatuses.length - 1;
|
|
630
|
+
if (buttonType === 'previous' && activeIndex === 0) {
|
|
626
631
|
return true;
|
|
627
632
|
}
|
|
628
|
-
if (buttonType === 'next' &&
|
|
629
|
-
isLastStep) {
|
|
633
|
+
if (buttonType === 'next' && isLastStep) {
|
|
630
634
|
return true;
|
|
631
635
|
}
|
|
632
636
|
return this._disabled || false;
|
|
@@ -676,9 +680,7 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
676
680
|
}
|
|
677
681
|
get cssClassNames() {
|
|
678
682
|
const buttonType = this.buttonType;
|
|
679
|
-
const classNames = [
|
|
680
|
-
`sky-progress-indicator-nav-button-${this.buttonType}`
|
|
681
|
-
];
|
|
683
|
+
const classNames = [`sky-progress-indicator-nav-button-${this.buttonType}`];
|
|
682
684
|
switch (buttonType) {
|
|
683
685
|
case 'next':
|
|
684
686
|
case 'finish':
|
|
@@ -718,7 +720,6 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
718
720
|
}
|
|
719
721
|
onClick(event) {
|
|
720
722
|
event.preventDefault();
|
|
721
|
-
event.stopPropagation();
|
|
722
723
|
let type;
|
|
723
724
|
switch (this.buttonType) {
|
|
724
725
|
case 'finish':
|
|
@@ -743,7 +744,7 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
743
744
|
event,
|
|
744
745
|
progressHandler: new SkyProgressIndicatorActionClickProgressHandler(() => {
|
|
745
746
|
this.progressIndicator.sendMessage({ type });
|
|
746
|
-
})
|
|
747
|
+
}),
|
|
747
748
|
});
|
|
748
749
|
}
|
|
749
750
|
else {
|
|
@@ -751,12 +752,11 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
751
752
|
}
|
|
752
753
|
}
|
|
753
754
|
updateButtonVisibility(change) {
|
|
754
|
-
const isLastStep =
|
|
755
|
+
const isLastStep = change.activeIndex === change.itemStatuses.length - 1;
|
|
755
756
|
const buttonType = this.buttonType;
|
|
756
757
|
// Hide the button if all steps are complete
|
|
757
758
|
// (except for the reset button)
|
|
758
|
-
if (buttonType !== 'reset' &&
|
|
759
|
-
change.isComplete) {
|
|
759
|
+
if (buttonType !== 'reset' && change.isComplete) {
|
|
760
760
|
this.isVisible = false;
|
|
761
761
|
return;
|
|
762
762
|
}
|
|
@@ -774,14 +774,14 @@ class SkyProgressIndicatorNavButtonComponent {
|
|
|
774
774
|
this.isVisible = true;
|
|
775
775
|
}
|
|
776
776
|
}
|
|
777
|
-
SkyProgressIndicatorNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
778
|
-
SkyProgressIndicatorNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
777
|
+
SkyProgressIndicatorNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyProgressIndicatorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
778
|
+
SkyProgressIndicatorNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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\"\n type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"cssClassNames\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default',\n 'sky-btn-link': 'modern'\n }\"\n (click)=\"onClick($event)\"\n>\n {{ buttonText || (buttonLabelResourceString | skyLibResources) }}\n</button>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
779
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorNavButtonComponent, decorators: [{
|
|
780
780
|
type: Component,
|
|
781
781
|
args: [{
|
|
782
782
|
selector: 'sky-progress-indicator-nav-button',
|
|
783
783
|
templateUrl: './progress-indicator-nav-button.component.html',
|
|
784
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
784
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
785
785
|
}]
|
|
786
786
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyProgressIndicatorComponent, decorators: [{
|
|
787
787
|
type: Optional
|
|
@@ -831,18 +831,18 @@ class SkyProgressIndicatorResetButtonComponent {
|
|
|
831
831
|
onClick() {
|
|
832
832
|
this.resetClick.emit();
|
|
833
833
|
this.progressIndicator.sendMessage({
|
|
834
|
-
type: SkyProgressIndicatorMessageType.Reset
|
|
834
|
+
type: SkyProgressIndicatorMessageType.Reset,
|
|
835
835
|
});
|
|
836
836
|
}
|
|
837
837
|
}
|
|
838
|
-
SkyProgressIndicatorResetButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
839
|
-
SkyProgressIndicatorResetButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
838
|
+
SkyProgressIndicatorResetButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
839
|
+
SkyProgressIndicatorResetButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 });
|
|
840
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorResetButtonComponent, decorators: [{
|
|
841
841
|
type: Component,
|
|
842
842
|
args: [{
|
|
843
843
|
selector: 'sky-progress-indicator-reset-button',
|
|
844
844
|
templateUrl: './progress-indicator-reset-button.component.html',
|
|
845
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
845
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
846
846
|
}]
|
|
847
847
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
848
848
|
type: Input
|
|
@@ -857,22 +857,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
857
857
|
*/
|
|
858
858
|
class SkyProgressIndicatorTitleComponent {
|
|
859
859
|
}
|
|
860
|
-
SkyProgressIndicatorTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
861
|
-
SkyProgressIndicatorTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
862
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
860
|
+
SkyProgressIndicatorTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
861
|
+
SkyProgressIndicatorTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorTitleComponent, decorators: [{
|
|
863
863
|
type: Component,
|
|
864
864
|
args: [{
|
|
865
865
|
selector: 'sky-progress-indicator-title',
|
|
866
866
|
templateUrl: './progress-indicator-title.component.html',
|
|
867
867
|
styleUrls: ['./progress-indicator-title.component.scss'],
|
|
868
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
868
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
869
869
|
}]
|
|
870
870
|
}] });
|
|
871
871
|
|
|
872
872
|
class SkyProgressIndicatorModule {
|
|
873
873
|
}
|
|
874
|
-
SkyProgressIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
875
|
-
SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
874
|
+
SkyProgressIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
875
|
+
SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorModule, declarations: [SkyProgressIndicatorComponent,
|
|
876
876
|
SkyProgressIndicatorItemComponent,
|
|
877
877
|
SkyProgressIndicatorNavButtonComponent,
|
|
878
878
|
SkyProgressIndicatorResetButtonComponent,
|
|
@@ -886,14 +886,14 @@ SkyProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
|
|
|
886
886
|
SkyProgressIndicatorNavButtonComponent,
|
|
887
887
|
SkyProgressIndicatorResetButtonComponent,
|
|
888
888
|
SkyProgressIndicatorTitleComponent] });
|
|
889
|
-
SkyProgressIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
889
|
+
SkyProgressIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorModule, imports: [[
|
|
890
890
|
CommonModule,
|
|
891
891
|
SkyI18nModule,
|
|
892
892
|
SkyIconModule,
|
|
893
893
|
SkyProgressIndicatorResourcesModule,
|
|
894
|
-
SkyThemeModule
|
|
894
|
+
SkyThemeModule,
|
|
895
895
|
]] });
|
|
896
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyProgressIndicatorModule, decorators: [{
|
|
897
897
|
type: NgModule,
|
|
898
898
|
args: [{
|
|
899
899
|
declarations: [
|
|
@@ -902,22 +902,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
902
902
|
SkyProgressIndicatorNavButtonComponent,
|
|
903
903
|
SkyProgressIndicatorResetButtonComponent,
|
|
904
904
|
SkyProgressIndicatorStatusMarkerComponent,
|
|
905
|
-
SkyProgressIndicatorTitleComponent
|
|
905
|
+
SkyProgressIndicatorTitleComponent,
|
|
906
906
|
],
|
|
907
907
|
imports: [
|
|
908
908
|
CommonModule,
|
|
909
909
|
SkyI18nModule,
|
|
910
910
|
SkyIconModule,
|
|
911
911
|
SkyProgressIndicatorResourcesModule,
|
|
912
|
-
SkyThemeModule
|
|
912
|
+
SkyThemeModule,
|
|
913
913
|
],
|
|
914
914
|
exports: [
|
|
915
915
|
SkyProgressIndicatorComponent,
|
|
916
916
|
SkyProgressIndicatorItemComponent,
|
|
917
917
|
SkyProgressIndicatorNavButtonComponent,
|
|
918
918
|
SkyProgressIndicatorResetButtonComponent,
|
|
919
|
-
SkyProgressIndicatorTitleComponent
|
|
920
|
-
]
|
|
919
|
+
SkyProgressIndicatorTitleComponent,
|
|
920
|
+
],
|
|
921
921
|
}]
|
|
922
922
|
}] });
|
|
923
923
|
|