@skyux/progress-indicator 5.0.0 → 5.5.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -4
- package/bundles/skyux-progress-indicator.umd.js +93 -95
- package/documentation.json +218 -108
- package/esm2015/index.js +18 -0
- package/esm2015/index.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.js +74 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.js +223 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.js +59 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.js +84 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.js +20 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator.component.js +317 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator.component.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator.module.js +65 -0
- package/esm2015/lib/modules/progress-indicator/progress-indicator.module.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-action-click-args.js +2 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-action-click-args.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-action-click-progress-handler.js +14 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-action-click-progress-handler.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-change.js +2 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-change.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-display-mode-type.js +2 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-display-mode-type.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-item-status.js +20 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-item-status.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-message-type.js +28 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-message-type.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-message.js +2 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-message.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-mode.js +16 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-mode.js.map +1 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-nav-button-type.js +2 -0
- package/esm2015/lib/modules/progress-indicator/types/progress-indicator-nav-button-type.js.map +1 -0
- package/esm2015/lib/modules/shared/sky-progress-indicator-resources.module.js +50 -0
- package/esm2015/lib/modules/shared/sky-progress-indicator-resources.module.js.map +1 -0
- package/esm2015/skyux-progress-indicator.js +2 -2
- package/esm2015/skyux-progress-indicator.js.map +1 -0
- package/fesm2015/skyux-progress-indicator.js +75 -75
- package/fesm2015/skyux-progress-indicator.js.map +1 -1
- package/index.d.ts +15 -0
- package/{modules → lib/modules}/progress-indicator/progress-indicator-item/progress-indicator-item.component.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.d.ts +3 -3
- package/{modules → lib/modules}/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/progress-indicator-title/progress-indicator-title.component.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/progress-indicator.component.d.ts +1 -1
- package/{modules → lib/modules}/progress-indicator/progress-indicator.module.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-action-click-args.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-action-click-progress-handler.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-change.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-display-mode-type.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-item-status.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-message-type.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-message.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-mode.d.ts +0 -0
- package/{modules → lib/modules}/progress-indicator/types/progress-indicator-nav-button-type.d.ts +0 -0
- package/{modules → lib/modules}/shared/sky-progress-indicator-resources.module.d.ts +0 -0
- package/package.json +7 -7
- package/skyux-progress-indicator.d.ts +1 -1
- package/LICENSE +0 -21
- package/bundles/skyux-progress-indicator.umd.js.map +0 -1
- package/esm2015/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.js +0 -74
- package/esm2015/modules/progress-indicator/progress-indicator-nav-button/progress-indicator-nav-button.component.js +0 -228
- package/esm2015/modules/progress-indicator/progress-indicator-reset-button/progress-indicator-reset-button.component.js +0 -58
- package/esm2015/modules/progress-indicator/progress-indicator-status-marker/progress-indicator-status-marker.component.js +0 -83
- package/esm2015/modules/progress-indicator/progress-indicator-title/progress-indicator-title.component.js +0 -20
- package/esm2015/modules/progress-indicator/progress-indicator.component.js +0 -319
- package/esm2015/modules/progress-indicator/progress-indicator.module.js +0 -65
- package/esm2015/modules/progress-indicator/types/progress-indicator-action-click-args.js +0 -2
- package/esm2015/modules/progress-indicator/types/progress-indicator-action-click-progress-handler.js +0 -14
- package/esm2015/modules/progress-indicator/types/progress-indicator-change.js +0 -2
- package/esm2015/modules/progress-indicator/types/progress-indicator-display-mode-type.js +0 -2
- package/esm2015/modules/progress-indicator/types/progress-indicator-item-status.js +0 -20
- package/esm2015/modules/progress-indicator/types/progress-indicator-message-type.js +0 -28
- package/esm2015/modules/progress-indicator/types/progress-indicator-message.js +0 -2
- package/esm2015/modules/progress-indicator/types/progress-indicator-mode.js +0 -16
- package/esm2015/modules/progress-indicator/types/progress-indicator-nav-button-type.js +0 -2
- package/esm2015/modules/shared/sky-progress-indicator-resources.module.js +0 -41
- package/esm2015/public-api.js +0 -18
- package/public-api.d.ts +0 -15
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
#
|
|
1
|
+
# progress-indicator
|
|
2
2
|
|
|
3
|
-
[
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
This library was generated with [Nx](https://nx.dev).
|
|
4
|
+
|
|
5
|
+
## Running unit tests
|
|
6
|
+
|
|
7
|
+
Run `nx test progress-indicator` to execute the unit tests.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/theme'), require('rxjs'), require('rxjs/operators'), require('@skyux/core')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('@skyux/progress-indicator', ['exports', '@angular/core', '@angular/common', '@skyux/i18n', '@skyux/indicators', '@skyux/theme', 'rxjs', 'rxjs/operators', '@skyux/core'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux[
|
|
5
|
-
}(this, (function (exports, i0, i3, i4, i2, i1, rxjs, operators, i1$1) { 'use strict';
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["progress-indicator"] = {}), global.ng.core, global.ng.common, global.i4, global.i2, global.i1, global.rxjs, global.rxjs.operators, global.i1$1));
|
|
5
|
+
})(this, (function (exports, i0, i3, i4, i2, i1, rxjs, operators, i1$1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -13,14 +13,12 @@
|
|
|
13
13
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
14
|
Object.defineProperty(n, k, d.get ? d : {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () {
|
|
17
|
-
return e[k];
|
|
18
|
-
}
|
|
16
|
+
get: function () { return e[k]; }
|
|
19
17
|
});
|
|
20
18
|
}
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
|
-
n[
|
|
21
|
+
n["default"] = e;
|
|
24
22
|
return Object.freeze(n);
|
|
25
23
|
}
|
|
26
24
|
|
|
@@ -38,7 +36,12 @@
|
|
|
38
36
|
* To update this file, simply rerun the command.
|
|
39
37
|
*/
|
|
40
38
|
var RESOURCES = {
|
|
41
|
-
'EN-US': {
|
|
39
|
+
'EN-US': {
|
|
40
|
+
skyux_progress_indicator_navigator_finish: { message: 'Finish' },
|
|
41
|
+
skyux_progress_indicator_navigator_next: { message: 'Next' },
|
|
42
|
+
skyux_progress_indicator_navigator_previous: { message: 'Previous' },
|
|
43
|
+
skyux_progress_indicator_navigator_reset: { message: 'Reset' },
|
|
44
|
+
},
|
|
42
45
|
};
|
|
43
46
|
var SkyProgressIndicatorResourcesProvider = /** @class */ (function () {
|
|
44
47
|
function SkyProgressIndicatorResourcesProvider() {
|
|
@@ -56,22 +59,26 @@
|
|
|
56
59
|
}
|
|
57
60
|
return SkyProgressIndicatorResourcesModule;
|
|
58
61
|
}());
|
|
59
|
-
SkyProgressIndicatorResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
60
|
-
SkyProgressIndicatorResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
61
|
-
SkyProgressIndicatorResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
62
|
+
SkyProgressIndicatorResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
63
|
+
SkyProgressIndicatorResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorResourcesModule, exports: [i4.SkyI18nModule] });
|
|
64
|
+
SkyProgressIndicatorResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorResourcesModule, providers: [
|
|
65
|
+
{
|
|
62
66
|
provide: i4.SKY_LIB_RESOURCES_PROVIDERS,
|
|
63
67
|
useClass: SkyProgressIndicatorResourcesProvider,
|
|
64
|
-
multi: true
|
|
65
|
-
}
|
|
66
|
-
|
|
68
|
+
multi: true,
|
|
69
|
+
},
|
|
70
|
+
], imports: [i4.SkyI18nModule] });
|
|
71
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorResourcesModule, decorators: [{
|
|
67
72
|
type: i0.NgModule,
|
|
68
73
|
args: [{
|
|
69
74
|
exports: [i4.SkyI18nModule],
|
|
70
|
-
providers: [
|
|
75
|
+
providers: [
|
|
76
|
+
{
|
|
71
77
|
provide: i4.SKY_LIB_RESOURCES_PROVIDERS,
|
|
72
78
|
useClass: SkyProgressIndicatorResourcesProvider,
|
|
73
|
-
multi: true
|
|
74
|
-
}
|
|
79
|
+
multi: true,
|
|
80
|
+
},
|
|
81
|
+
],
|
|
75
82
|
}]
|
|
76
83
|
}] });
|
|
77
84
|
|
|
@@ -134,7 +141,7 @@
|
|
|
134
141
|
get: function () {
|
|
135
142
|
var classNames = [
|
|
136
143
|
"sky-progress-indicator-status-marker-mode-" + this.displayMode,
|
|
137
|
-
"sky-progress-indicator-status-marker-status-" + this.statusName
|
|
144
|
+
"sky-progress-indicator-status-marker-status-" + this.statusName,
|
|
138
145
|
];
|
|
139
146
|
return classNames.join(' ');
|
|
140
147
|
},
|
|
@@ -170,15 +177,15 @@
|
|
|
170
177
|
};
|
|
171
178
|
return SkyProgressIndicatorStatusMarkerComponent;
|
|
172
179
|
}());
|
|
173
|
-
SkyProgressIndicatorStatusMarkerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
174
|
-
SkyProgressIndicatorStatusMarkerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
175
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
180
|
+
SkyProgressIndicatorStatusMarkerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorStatusMarkerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
181
|
+
SkyProgressIndicatorStatusMarkerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyProgressIndicatorStatusMarkerComponent, selector: "sky-progress-indicator-status-marker", inputs: { displayMode: "displayMode", status: "status" }, ngImport: i0__namespace, 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:#72bf44;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:#72bf44;border-color:transparent}.sky-progress-indicator-status-marker-status-pending .sky-progress-indicator-status-marker-icon{border-color:#72bf44}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border-color:transparent;color:#72bf44;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:#72bf44}: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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
182
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorStatusMarkerComponent, decorators: [{
|
|
176
183
|
type: i0.Component,
|
|
177
184
|
args: [{
|
|
178
185
|
selector: 'sky-progress-indicator-status-marker',
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
186
|
+
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",
|
|
187
|
+
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:#72bf44;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:#72bf44;border-color:transparent}.sky-progress-indicator-status-marker-status-pending .sky-progress-indicator-status-marker-icon{border-color:#72bf44}.sky-progress-indicator-status-marker-status-complete .sky-progress-indicator-status-marker-icon{border-color:transparent;color:#72bf44;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:#72bf44}: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"],
|
|
188
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
182
189
|
}]
|
|
183
190
|
}], ctorParameters: function () {
|
|
184
191
|
return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyThemeService, decorators: [{
|
|
@@ -257,15 +264,15 @@
|
|
|
257
264
|
};
|
|
258
265
|
return SkyProgressIndicatorItemComponent;
|
|
259
266
|
}());
|
|
260
|
-
SkyProgressIndicatorItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
261
|
-
SkyProgressIndicatorItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
262
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
267
|
+
SkyProgressIndicatorItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorItemComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
268
|
+
SkyProgressIndicatorItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyProgressIndicatorItemComponent, selector: "sky-progress-indicator-item", inputs: { title: "title" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
269
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorItemComponent, decorators: [{
|
|
263
270
|
type: i0.Component,
|
|
264
271
|
args: [{
|
|
265
272
|
selector: 'sky-progress-indicator-item',
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
273
|
+
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",
|
|
274
|
+
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"],
|
|
275
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
269
276
|
}]
|
|
270
277
|
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
271
278
|
type: i0.Input
|
|
@@ -340,7 +347,7 @@
|
|
|
340
347
|
* and [waterfall progress indicators](https://developer.blackbaud.com/skyux/components/progress-indicator/waterfall-progress-indicator),
|
|
341
348
|
* use the vertical display mode. For [modal wizards](https://developer.blackbaud.com/skyux/components/wizard),
|
|
342
349
|
* use the horizontal display mode.
|
|
343
|
-
* @default
|
|
350
|
+
* @default "vertical"
|
|
344
351
|
*/
|
|
345
352
|
set: function (value) {
|
|
346
353
|
this._displayMode = value;
|
|
@@ -398,7 +405,7 @@
|
|
|
398
405
|
Object.defineProperty(SkyProgressIndicatorComponent.prototype, "cssClassNames", {
|
|
399
406
|
get: function () {
|
|
400
407
|
var classNames = [
|
|
401
|
-
"sky-progress-indicator-mode-" + this.displayModeResolved
|
|
408
|
+
"sky-progress-indicator-mode-" + this.displayModeResolved,
|
|
402
409
|
];
|
|
403
410
|
if (this.isPassive) {
|
|
404
411
|
classNames.push('sky-progress-indicator-passive');
|
|
@@ -518,23 +525,22 @@
|
|
|
518
525
|
component.status = exports.SkyProgressIndicatorItemStatus.Complete;
|
|
519
526
|
});
|
|
520
527
|
this.notifyChange({
|
|
521
|
-
isComplete: true
|
|
528
|
+
isComplete: true,
|
|
522
529
|
});
|
|
523
530
|
};
|
|
524
531
|
SkyProgressIndicatorComponent.prototype.resetSteps = function () {
|
|
525
532
|
this.gotoStep(0);
|
|
526
533
|
};
|
|
527
534
|
SkyProgressIndicatorComponent.prototype.updateSteps = function () {
|
|
528
|
-
if (this.activeIndex >
|
|
535
|
+
if (this.activeIndex > this.itemComponents.length - 1) {
|
|
529
536
|
this.activeIndex--;
|
|
530
537
|
}
|
|
531
538
|
var activeIndex = this.activeIndex;
|
|
532
539
|
var isPassive = this.isPassive;
|
|
533
|
-
var isVertical =
|
|
540
|
+
var isVertical = this.displayModeResolved === 'vertical';
|
|
534
541
|
this.itemComponents.forEach(function (component, i) {
|
|
535
542
|
// Set visibility.
|
|
536
|
-
component.isVisible =
|
|
537
|
-
isVertical);
|
|
543
|
+
component.isVisible = activeIndex === i || isVertical;
|
|
538
544
|
// Set status.
|
|
539
545
|
var status;
|
|
540
546
|
if (activeIndex === i) {
|
|
@@ -562,8 +568,7 @@
|
|
|
562
568
|
component.showStepNumber(i + 1);
|
|
563
569
|
}
|
|
564
570
|
// If we're in passive mode, don't show titles for incomplete items.
|
|
565
|
-
component.showTitle = !(isPassive &&
|
|
566
|
-
activeIndex < i);
|
|
571
|
+
component.showTitle = !(isPassive && activeIndex < i);
|
|
567
572
|
});
|
|
568
573
|
};
|
|
569
574
|
SkyProgressIndicatorComponent.prototype.handleIncomingMessage = function (message) {
|
|
@@ -571,7 +576,7 @@
|
|
|
571
576
|
var type;
|
|
572
577
|
// Prints a deprecation warning if the consumer provides only `SkyProgressIndicatorMessageType`.
|
|
573
578
|
if (value.type === undefined) {
|
|
574
|
-
console.warn(
|
|
579
|
+
console.warn("[Deprecation warning] The progress indicator component's `messageStream` input is set " +
|
|
575
580
|
'to `Subject<SkyProgressIndicatorMessageType>`. We will remove this deprecated type in ' +
|
|
576
581
|
'the next major version release. Instead, set the `messageStream` input to a value of ' +
|
|
577
582
|
'`Subject<SkyProgressIndicatorMessage>`.');
|
|
@@ -594,8 +599,7 @@
|
|
|
594
599
|
this.resetSteps();
|
|
595
600
|
break;
|
|
596
601
|
case exports.SkyProgressIndicatorMessageType.GoTo:
|
|
597
|
-
if (!value.data ||
|
|
598
|
-
value.data.activeIndex === undefined) {
|
|
602
|
+
if (!value.data || value.data.activeIndex === undefined) {
|
|
599
603
|
console.warn('A message type of `SkyProgressIndicatorMessageType.GoTo` was passed to the progress ' +
|
|
600
604
|
'indicator, but no step index was provided. You can pass the desired active ' +
|
|
601
605
|
'index via:\n' +
|
|
@@ -632,20 +636,20 @@
|
|
|
632
636
|
SkyProgressIndicatorComponent.prototype.notifyChange = function (change) {
|
|
633
637
|
this.progressChanges.next(Object.assign({}, {
|
|
634
638
|
activeIndex: this.activeIndex,
|
|
635
|
-
itemStatuses: this.itemStatuses
|
|
639
|
+
itemStatuses: this.itemStatuses,
|
|
636
640
|
}, change));
|
|
637
641
|
};
|
|
638
642
|
return SkyProgressIndicatorComponent;
|
|
639
643
|
}());
|
|
640
|
-
SkyProgressIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
641
|
-
SkyProgressIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
642
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
644
|
+
SkyProgressIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
645
|
+
SkyProgressIndicatorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
646
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorComponent, decorators: [{
|
|
643
647
|
type: i0.Component,
|
|
644
648
|
args: [{
|
|
645
649
|
selector: 'sky-progress-indicator',
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
650
|
+
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",
|
|
651
|
+
styles: [".sky-progress-indicator ::ng-deep sky-progress-indicator-item:last-of-type .sky-progress-indicator-status-marker-line{display:none}.sky-progress-indicator-mode-vertical{max-width:400px;min-width:250px;margin:0 auto}.sky-progress-indicator-mode-vertical ::ng-deep .sky-progress-indicator-item-body{text-align:center;margin-left:-30px}.sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-nav-button,.sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-reset-button{display:block;padding-top:30px;padding-left:15px}::ng-deep .sky-popover ::ng-deep .sky-progress-indicator-mode-vertical{min-width:auto}.sky-progress-indicator-mode-horizontal ::ng-deep .sky-progress-indicator-item-heading{font-weight:600;font-size:16px}.sky-progress-indicator-horizontal-status-markers{display:flex;margin-bottom:10px}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker{flex-basis:45px;flex-grow:0}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:first-of-type{margin-left:-5px}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:first-of-type .sky-progress-indicator-status-marker .sky-progress-indicator-status-marker-icon:before{display:none!important}.sky-progress-indicator-horizontal-status-markers ::ng-deep sky-progress-indicator-status-marker:last-of-type .sky-progress-indicator-status-marker-line{display:none}:host-context(.sky-theme-modern) .sky-progress-indicator-mode-horizontal ::ng-deep .sky-progress-indicator-item-heading{font-weight:inherit;font-size:inherit}:host-context(.sky-theme-modern) .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-nav-button,:host-context(.sky-theme-modern) .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-reset-button{padding:0;margin:60px 0 0;text-align:center}.sky-theme-modern .sky-progress-indicator-mode-horizontal ::ng-deep .sky-progress-indicator-item-heading{font-weight:inherit;font-size:inherit}.sky-theme-modern .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-nav-button,.sky-theme-modern .sky-progress-indicator-mode-vertical ::ng-deep sky-progress-indicator-reset-button{padding:0;margin:60px 0 0;text-align:center}\n"],
|
|
652
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
649
653
|
}]
|
|
650
654
|
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.SkyAppWindowRef }]; }, propDecorators: { displayMode: [{
|
|
651
655
|
type: i0.Input
|
|
@@ -702,8 +706,8 @@
|
|
|
702
706
|
},
|
|
703
707
|
/**
|
|
704
708
|
* Specifies the type of nav button to include.
|
|
705
|
-
* The valid options are `finish`, `next`, `previous`, and `reset`.
|
|
706
|
-
* @default next
|
|
709
|
+
* The valid options are `"finish"`, `"next"`, `"previous"`, and `"reset"`.
|
|
710
|
+
* @default "next"
|
|
707
711
|
*/
|
|
708
712
|
set: function (value) {
|
|
709
713
|
this._buttonType = value;
|
|
@@ -715,13 +719,11 @@
|
|
|
715
719
|
get: function () {
|
|
716
720
|
var buttonType = this.buttonType;
|
|
717
721
|
var activeIndex = this.lastProgressChange.activeIndex;
|
|
718
|
-
var isLastStep =
|
|
719
|
-
if (buttonType === 'previous' &&
|
|
720
|
-
activeIndex === 0) {
|
|
722
|
+
var isLastStep = activeIndex === this.lastProgressChange.itemStatuses.length - 1;
|
|
723
|
+
if (buttonType === 'previous' && activeIndex === 0) {
|
|
721
724
|
return true;
|
|
722
725
|
}
|
|
723
|
-
if (buttonType === 'next' &&
|
|
724
|
-
isLastStep) {
|
|
726
|
+
if (buttonType === 'next' && isLastStep) {
|
|
725
727
|
return true;
|
|
726
728
|
}
|
|
727
729
|
return this._disabled || false;
|
|
@@ -788,9 +790,7 @@
|
|
|
788
790
|
Object.defineProperty(SkyProgressIndicatorNavButtonComponent.prototype, "cssClassNames", {
|
|
789
791
|
get: function () {
|
|
790
792
|
var buttonType = this.buttonType;
|
|
791
|
-
var classNames = [
|
|
792
|
-
"sky-progress-indicator-nav-button-" + this.buttonType
|
|
793
|
-
];
|
|
793
|
+
var classNames = ["sky-progress-indicator-nav-button-" + this.buttonType];
|
|
794
794
|
switch (buttonType) {
|
|
795
795
|
case 'next':
|
|
796
796
|
case 'finish':
|
|
@@ -842,7 +842,6 @@
|
|
|
842
842
|
SkyProgressIndicatorNavButtonComponent.prototype.onClick = function (event) {
|
|
843
843
|
var _this = this;
|
|
844
844
|
event.preventDefault();
|
|
845
|
-
event.stopPropagation();
|
|
846
845
|
var type;
|
|
847
846
|
switch (this.buttonType) {
|
|
848
847
|
case 'finish':
|
|
@@ -867,7 +866,7 @@
|
|
|
867
866
|
event: event,
|
|
868
867
|
progressHandler: new SkyProgressIndicatorActionClickProgressHandler(function () {
|
|
869
868
|
_this.progressIndicator.sendMessage({ type: type });
|
|
870
|
-
})
|
|
869
|
+
}),
|
|
871
870
|
});
|
|
872
871
|
}
|
|
873
872
|
else {
|
|
@@ -875,12 +874,11 @@
|
|
|
875
874
|
}
|
|
876
875
|
};
|
|
877
876
|
SkyProgressIndicatorNavButtonComponent.prototype.updateButtonVisibility = function (change) {
|
|
878
|
-
var isLastStep =
|
|
877
|
+
var isLastStep = change.activeIndex === change.itemStatuses.length - 1;
|
|
879
878
|
var buttonType = this.buttonType;
|
|
880
879
|
// Hide the button if all steps are complete
|
|
881
880
|
// (except for the reset button)
|
|
882
|
-
if (buttonType !== 'reset' &&
|
|
883
|
-
change.isComplete) {
|
|
881
|
+
if (buttonType !== 'reset' && change.isComplete) {
|
|
884
882
|
this.isVisible = false;
|
|
885
883
|
return;
|
|
886
884
|
}
|
|
@@ -899,14 +897,14 @@
|
|
|
899
897
|
};
|
|
900
898
|
return SkyProgressIndicatorNavButtonComponent;
|
|
901
899
|
}());
|
|
902
|
-
SkyProgressIndicatorNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
903
|
-
SkyProgressIndicatorNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
904
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
900
|
+
SkyProgressIndicatorNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorNavButtonComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyProgressIndicatorComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
901
|
+
SkyProgressIndicatorNavButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i4__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
902
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorNavButtonComponent, decorators: [{
|
|
905
903
|
type: i0.Component,
|
|
906
904
|
args: [{
|
|
907
905
|
selector: 'sky-progress-indicator-nav-button',
|
|
908
|
-
|
|
909
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
906
|
+
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",
|
|
907
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
910
908
|
}]
|
|
911
909
|
}], ctorParameters: function () {
|
|
912
910
|
return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyProgressIndicatorComponent, decorators: [{
|
|
@@ -962,19 +960,19 @@
|
|
|
962
960
|
SkyProgressIndicatorResetButtonComponent.prototype.onClick = function () {
|
|
963
961
|
this.resetClick.emit();
|
|
964
962
|
this.progressIndicator.sendMessage({
|
|
965
|
-
type: exports.SkyProgressIndicatorMessageType.Reset
|
|
963
|
+
type: exports.SkyProgressIndicatorMessageType.Reset,
|
|
966
964
|
});
|
|
967
965
|
};
|
|
968
966
|
return SkyProgressIndicatorResetButtonComponent;
|
|
969
967
|
}());
|
|
970
|
-
SkyProgressIndicatorResetButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
971
|
-
SkyProgressIndicatorResetButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
972
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
968
|
+
SkyProgressIndicatorResetButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorResetButtonComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
969
|
+
SkyProgressIndicatorResetButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush });
|
|
970
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorResetButtonComponent, decorators: [{
|
|
973
971
|
type: i0.Component,
|
|
974
972
|
args: [{
|
|
975
973
|
selector: 'sky-progress-indicator-reset-button',
|
|
976
|
-
|
|
977
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
974
|
+
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",
|
|
975
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
978
976
|
}]
|
|
979
977
|
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
980
978
|
type: i0.Input
|
|
@@ -992,15 +990,15 @@
|
|
|
992
990
|
}
|
|
993
991
|
return SkyProgressIndicatorTitleComponent;
|
|
994
992
|
}());
|
|
995
|
-
SkyProgressIndicatorTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
996
|
-
SkyProgressIndicatorTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
997
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
993
|
+
SkyProgressIndicatorTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorTitleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
994
|
+
SkyProgressIndicatorTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyProgressIndicatorTitleComponent, selector: "sky-progress-indicator-title", ngImport: i0__namespace, 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__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
995
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorTitleComponent, decorators: [{
|
|
998
996
|
type: i0.Component,
|
|
999
997
|
args: [{
|
|
1000
998
|
selector: 'sky-progress-indicator-title',
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
999
|
+
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",
|
|
1000
|
+
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"],
|
|
1001
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1004
1002
|
}]
|
|
1005
1003
|
}] });
|
|
1006
1004
|
|
|
@@ -1009,8 +1007,8 @@
|
|
|
1009
1007
|
}
|
|
1010
1008
|
return SkyProgressIndicatorModule;
|
|
1011
1009
|
}());
|
|
1012
|
-
SkyProgressIndicatorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1013
|
-
SkyProgressIndicatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1010
|
+
SkyProgressIndicatorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1011
|
+
SkyProgressIndicatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorModule, declarations: [SkyProgressIndicatorComponent,
|
|
1014
1012
|
SkyProgressIndicatorItemComponent,
|
|
1015
1013
|
SkyProgressIndicatorNavButtonComponent,
|
|
1016
1014
|
SkyProgressIndicatorResetButtonComponent,
|
|
@@ -1024,14 +1022,14 @@
|
|
|
1024
1022
|
SkyProgressIndicatorNavButtonComponent,
|
|
1025
1023
|
SkyProgressIndicatorResetButtonComponent,
|
|
1026
1024
|
SkyProgressIndicatorTitleComponent] });
|
|
1027
|
-
SkyProgressIndicatorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1025
|
+
SkyProgressIndicatorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorModule, imports: [[
|
|
1028
1026
|
i3.CommonModule,
|
|
1029
1027
|
i4.SkyI18nModule,
|
|
1030
1028
|
i2.SkyIconModule,
|
|
1031
1029
|
SkyProgressIndicatorResourcesModule,
|
|
1032
|
-
i1.SkyThemeModule
|
|
1030
|
+
i1.SkyThemeModule,
|
|
1033
1031
|
]] });
|
|
1034
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1032
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyProgressIndicatorModule, decorators: [{
|
|
1035
1033
|
type: i0.NgModule,
|
|
1036
1034
|
args: [{
|
|
1037
1035
|
declarations: [
|
|
@@ -1040,22 +1038,22 @@
|
|
|
1040
1038
|
SkyProgressIndicatorNavButtonComponent,
|
|
1041
1039
|
SkyProgressIndicatorResetButtonComponent,
|
|
1042
1040
|
SkyProgressIndicatorStatusMarkerComponent,
|
|
1043
|
-
SkyProgressIndicatorTitleComponent
|
|
1041
|
+
SkyProgressIndicatorTitleComponent,
|
|
1044
1042
|
],
|
|
1045
1043
|
imports: [
|
|
1046
1044
|
i3.CommonModule,
|
|
1047
1045
|
i4.SkyI18nModule,
|
|
1048
1046
|
i2.SkyIconModule,
|
|
1049
1047
|
SkyProgressIndicatorResourcesModule,
|
|
1050
|
-
i1.SkyThemeModule
|
|
1048
|
+
i1.SkyThemeModule,
|
|
1051
1049
|
],
|
|
1052
1050
|
exports: [
|
|
1053
1051
|
SkyProgressIndicatorComponent,
|
|
1054
1052
|
SkyProgressIndicatorItemComponent,
|
|
1055
1053
|
SkyProgressIndicatorNavButtonComponent,
|
|
1056
1054
|
SkyProgressIndicatorResetButtonComponent,
|
|
1057
|
-
SkyProgressIndicatorTitleComponent
|
|
1058
|
-
]
|
|
1055
|
+
SkyProgressIndicatorTitleComponent,
|
|
1056
|
+
],
|
|
1059
1057
|
}]
|
|
1060
1058
|
}] });
|
|
1061
1059
|
|
|
@@ -1065,13 +1063,13 @@
|
|
|
1065
1063
|
|
|
1066
1064
|
exports.SkyProgressIndicatorActionClickProgressHandler = SkyProgressIndicatorActionClickProgressHandler;
|
|
1067
1065
|
exports.SkyProgressIndicatorModule = SkyProgressIndicatorModule;
|
|
1068
|
-
exports
|
|
1069
|
-
exports
|
|
1070
|
-
exports
|
|
1071
|
-
exports
|
|
1072
|
-
exports
|
|
1066
|
+
exports["λ1"] = SkyProgressIndicatorItemComponent;
|
|
1067
|
+
exports["λ2"] = SkyProgressIndicatorComponent;
|
|
1068
|
+
exports["λ3"] = SkyProgressIndicatorNavButtonComponent;
|
|
1069
|
+
exports["λ4"] = SkyProgressIndicatorResetButtonComponent;
|
|
1070
|
+
exports["λ5"] = SkyProgressIndicatorTitleComponent;
|
|
1073
1071
|
|
|
1074
1072
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
1075
1073
|
|
|
1076
|
-
}))
|
|
1074
|
+
}));
|
|
1077
1075
|
//# sourceMappingURL=skyux-progress-indicator.umd.js.map
|