@sebgroup/green-angular 4.4.1 → 4.5.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 +2 -2
- package/esm2022/lib/in-page-wizard/in-page-wizard-step-card.component.mjs +11 -4
- package/esm2022/src/lib/in-page-wizard/in-page-wizard-step-card.component.mjs +11 -4
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs +10 -3
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular.mjs +10 -3
- package/fesm2022/sebgroup-green-angular.mjs.map +1 -1
- package/lib/in-page-wizard/in-page-wizard-step-card.component.d.ts +2 -1
- package/package.json +4 -4
- package/src/lib/in-page-wizard/in-page-wizard-step-card.component.d.ts +2 -1
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<img width="600" alt="green-angular" src="https://github.com/
|
|
2
|
+
<img width="600" alt="green-angular" src="https://github.com/seb-oss/green/assets/11420341/c776109a-c980-4c33-92dd-109f1ff31ba2">
|
|
3
3
|
<h1>@sebgroup/green-angular</h1>
|
|
4
4
|
<p>
|
|
5
5
|
Angular components with SEB's look and feel.
|
|
@@ -65,4 +65,4 @@ Once configured to use scss, it's just a matter of including the scss to your ma
|
|
|
65
65
|
|
|
66
66
|
### Have other needs?
|
|
67
67
|
|
|
68
|
-
More examples and use cases coming soon! In the meantime create an [issue over at github](https://github.com/
|
|
68
|
+
More examples and use cases coming soon! In the meantime create an [issue over at github](https://github.com/seb-oss/green/issues)
|
|
@@ -5,6 +5,9 @@ export class NggInPageWizardStepCardComponent {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.handleNextClick = new EventEmitter();
|
|
7
7
|
this.handleEditClick = new EventEmitter();
|
|
8
|
+
this.stepIsValid = () => {
|
|
9
|
+
return true;
|
|
10
|
+
};
|
|
8
11
|
this.stepText = '';
|
|
9
12
|
this.title = '';
|
|
10
13
|
this.editBtnText = '';
|
|
@@ -20,12 +23,14 @@ export class NggInPageWizardStepCardComponent {
|
|
|
20
23
|
this.handleEditClick.emit(event);
|
|
21
24
|
}
|
|
22
25
|
handleOnNextBtnClick(event) {
|
|
23
|
-
this.
|
|
24
|
-
|
|
26
|
+
if (this.stepIsValid()) {
|
|
27
|
+
this.isActive = false;
|
|
28
|
+
this.isCompleted = true;
|
|
29
|
+
}
|
|
25
30
|
this.handleNextClick.emit(event);
|
|
26
31
|
}
|
|
27
32
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
33
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
29
34
|
}
|
|
30
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
31
36
|
type: Component,
|
|
@@ -34,6 +39,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
34
39
|
type: Output
|
|
35
40
|
}], handleEditClick: [{
|
|
36
41
|
type: Output
|
|
42
|
+
}], stepIsValid: [{
|
|
43
|
+
type: Input
|
|
37
44
|
}], stepText: [{
|
|
38
45
|
type: Input
|
|
39
46
|
}], title: [{
|
|
@@ -51,4 +58,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
51
58
|
}], isActive: [{
|
|
52
59
|
type: Input
|
|
53
60
|
}] } });
|
|
54
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9zcmMvbGliL2luLXBhZ2Utd2l6YXJkL2luLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvc3JjL2xpYi9pbi1wYWdlLXdpemFyZC9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTs7O0FBTXRFLE1BQU0sT0FBTyxnQ0FBZ0M7SUFKN0M7UUFNVyxvQkFBZSxHQUN0QixJQUFJLFlBQVksRUFBYyxDQUFBO1FBR3ZCLG9CQUFlLEdBQ3RCLElBQUksWUFBWSxFQUFjLENBQUE7UUFFaEIsZ0JBQVcsR0FBRyxHQUFHLEVBQUU7WUFDakMsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDLENBQUE7UUFFZSxhQUFRLEdBQUcsRUFBRSxDQUFBO1FBRWIsVUFBSyxHQUFHLEVBQUUsQ0FBQTtRQUVWLGdCQUFXLEdBQUcsRUFBRSxDQUFBO1FBRWhCLGdCQUFXLEdBQUcsRUFBRSxDQUFBO1FBRWhCLG9CQUFlLEdBQUcsSUFBSSxDQUFBO1FBRXRCLGdCQUFXLEdBQUcsS0FBSyxDQUFBO1FBRW5CLGdCQUFXLEdBQUcsS0FBSyxDQUFBO1FBRW5CLGFBQVEsR0FBRyxLQUFLLENBQUE7S0FlakM7SUFiQyxvQkFBb0IsQ0FBQyxLQUFpQjtRQUNwQyxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQTtRQUM5QixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQTtRQUN4QixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxDQUFDO0lBQ0Qsb0JBQW9CLENBQUMsS0FBaUI7UUFDcEMsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUU7WUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7WUFDdEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7U0FDekI7UUFFRCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxDQUFDOytHQXpDVSxnQ0FBZ0M7bUdBQWhDLGdDQUFnQyxpWkNON0MsMjhIQWdIQTs7NEZEMUdhLGdDQUFnQztrQkFKNUMsU0FBUzsrQkFDRSw4QkFBOEI7OEJBSy9CLGVBQWU7c0JBRHZCLE1BQU07Z0JBS0UsZUFBZTtzQkFEdkIsTUFBTTtnQkFJUyxXQUFXO3NCQUExQixLQUFLO2dCQUlVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBRVUsS0FBSztzQkFBcEIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsZUFBZTtzQkFBOUIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsUUFBUTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdnLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBOZ2dJblBhZ2VXaXphcmRTdGVwQ2FyZENvbXBvbmVudCB7XG4gIEBPdXRwdXQoKVxuICByZWFkb25seSBoYW5kbGVOZXh0Q2xpY2s6IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PiA9XG4gICAgbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpXG5cbiAgQE91dHB1dCgpXG4gIHJlYWRvbmx5IGhhbmRsZUVkaXRDbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KClcblxuICBASW5wdXQoKSBwdWJsaWMgc3RlcElzVmFsaWQgPSAoKSA9PiB7XG4gICAgcmV0dXJuIHRydWU7XG4gIH1cblxuICBASW5wdXQoKSBwdWJsaWMgc3RlcFRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyB0aXRsZSA9ICcnXG5cbiAgQElucHV0KCkgcHVibGljIGVkaXRCdG5UZXh0ID0gJydcblxuICBASW5wdXQoKSBwdWJsaWMgbmV4dEJ0blRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyBzaG93TmV4dEJ0bkljb24gPSB0cnVlXG5cbiAgQElucHV0KCkgcHVibGljIGlzQ29tcGxldGVkID0gZmFsc2VcblxuICBASW5wdXQoKSBwdWJsaWMgZGlzYWJsZU5leHQgPSBmYWxzZVxuXG4gIEBJbnB1dCgpIHB1YmxpYyBpc0FjdGl2ZSA9IGZhbHNlXG5cbiAgaGFuZGxlT25FZGl0QnRuQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmlzQWN0aXZlID0gIXRoaXMuaXNBY3RpdmVcbiAgICB0aGlzLmlzQ29tcGxldGVkID0gZmFsc2VcbiAgICB0aGlzLmhhbmRsZUVkaXRDbGljay5lbWl0KGV2ZW50KVxuICB9XG4gIGhhbmRsZU9uTmV4dEJ0bkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgaWYgKHRoaXMuc3RlcElzVmFsaWQoKSkge1xuICAgICAgdGhpcy5pc0FjdGl2ZSA9IGZhbHNlO1xuICAgICAgdGhpcy5pc0NvbXBsZXRlZCA9IHRydWU7XG4gICAgfVxuICAgIFxuICAgIHRoaXMuaGFuZGxlTmV4dENsaWNrLmVtaXQoZXZlbnQpXG4gIH1cbn1cbiIsIjxzZWN0aW9uXG4gIGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZCBjYXJkXCJcbiAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtcm9vdFwiXG4gIFtjbGFzcy5hY3RpdmVdPVwiISFpc0FjdGl2ZVwiXG4gIFtjbGFzcy5jb21wbGV0ZWRdPVwiISFpc0NvbXBsZXRlZFwiXG4+XG4gIDxoZWFkZXIgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19oZWFkZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9faGVhZGVyX19pY29uXCI+XG4gICAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB2aWV3Qm94PVwiMCAwIDUxMiA1MTJcIj5cbiAgICAgICAgPCEtLSBGb250IEF3ZXNvbWUgUHJvIDUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSAtLT5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTQzNS44NDggODMuNDY2TDE3Mi44MDQgMzQ2LjUxbC05Ni42NTItOTYuNjUyYy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcxIDBsLTI4LjI4NCAyOC4yODRjLTQuNjg2IDQuNjg2LTQuNjg2IDEyLjI4NCAwIDE2Ljk3MWwxMzMuNDIxIDEzMy40MjFjNC42ODYgNC42ODYgMTIuMjg0IDQuNjg2IDE2Ljk3MSAwbDI5OS44MTMtMjk5LjgxM2M0LjY4Ni00LjY4NiA0LjY4Ni0xMi4yODQgMC0xNi45NzFsLTI4LjI4NC0yOC4yODRjLTQuNjg2LTQuNjg2LTEyLjI4NC00LjY4Ni0xNi45NyAwelwiXG4gICAgICAgIC8+XG4gICAgICA8L3N2Zz5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9fcHJvZ3Jlc3NcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtc3RlcC10ZXh0XCJcbiAgICA+XG4gICAgICB7eyBzdGVwVGV4dCB9fVxuICAgIDwvZGl2PlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9faGVhZGVyX190aXRsZVwiXG4gICAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC10aXRsZVwiXG4gICAgPlxuICAgICAgPGgyIGNsYXNzPVwiaDRcIj57eyB0aXRsZSB9fTwvaDI+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9fZWRpdFwiXG4gICAgICAqbmdJZj1cImlzQ29tcGxldGVkICYmICFpc0FjdGl2ZVwiXG4gICAgPlxuICAgICAgPGJ1dHRvblxuICAgICAgICBjbGFzcz1cInNlY29uZGFyeSBzbWFsbFwiXG4gICAgICAgIChjbGljayk9XCJoYW5kbGVPbkVkaXRCdG5DbGljaygkZXZlbnQpXCJcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtZWRpdC1idG5cIlxuICAgICAgPlxuICAgICAgICA8bmctdGVtcGxhdGUgKm5nVGVtcGxhdGVPdXRsZXQ9XCJlZGl0SWNvblwiPiA8L25nLXRlbXBsYXRlPlxuICAgICAgICB7eyBlZGl0QnRuVGV4dCB9fVxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIDwvaGVhZGVyPlxuXG4gIDxkaXZcbiAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2NvbnRlbnRcIlxuICAgICpuZ0lmPVwiISFpc0FjdGl2ZSB8fCAhIWlzQ29tcGxldGVkXCJcbiAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1jb250ZW50XCJcbiAgPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxmb290ZXJcbiAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2Zvb3RlciBnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXItLWVkaXRcIlxuICAgICpuZ0lmPVwiaXNDb21wbGV0ZWQgJiYgIWlzQWN0aXZlXCJcbiAgPlxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzPVwic2Vjb25kYXJ5XCJcbiAgICAgIChjbGljayk9XCJoYW5kbGVPbkVkaXRCdG5DbGljaygkZXZlbnQpXCJcbiAgICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLWZvb3Rlci1lZGl0LWJ0blwiXG4gICAgPlxuICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiZWRpdEljb25cIj4gPC9uZy10ZW1wbGF0ZT5cbiAgICAgIHt7IGVkaXRCdG5UZXh0IH19XG4gICAgPC9idXR0b24+XG4gIDwvZm9vdGVyPlxuXG4gIDxmb290ZXJcbiAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2Zvb3RlciBnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXItLW5leHRcIlxuICAgICpuZ0lmPVwiaXNBY3RpdmVcIlxuICA+XG4gICAgPGJ1dHRvblxuICAgICAgY2xhc3M9XCJwcmltYXJ5XCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlTmV4dFwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlT25OZXh0QnRuQ2xpY2soJGV2ZW50KVwiXG4gICAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1uZXh0LWJ0blwiXG4gICAgPlxuICAgICAge3sgbmV4dEJ0blRleHQgfX1cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzaG93TmV4dEJ0bkljb25cIj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwibmV4dEljb25cIj4gPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvYnV0dG9uPlxuICA8L2Zvb3Rlcj5cbjwvc2VjdGlvbj5cblxuPG5nLXRlbXBsYXRlICNlZGl0SWNvbj5cbiAgPHN2Z1xuICAgIHZpZXdCb3g9XCIwIDAgNTc2IDUxMlwiXG4gICAgY2xhc3M9XCJlZGl0LWljb25cIlxuICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgIGZvY3VzYWJsZT1cImZhbHNlXCJcbiAgPlxuICAgIDxwYXRoXG4gICAgICBmaWxsPVwidmFyKC0tY29sb3IpXCJcbiAgICAgIGQ9XCJNNDAyLjMgMzQ0LjlsMzItMzJjNS01IDEzLjctMS41IDEzLjcgNS43VjQ2NGMwIDI2LjUtMjEuNSA0OC00OCA0OEg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWMTEyYzAtMjYuNSAyMS41LTQ4IDQ4LTQ4aDI3My41YzcuMSAwIDEwLjcgOC42IDUuNyAxMy43bC0zMiAzMmMtMS41IDEuNS0zLjUgMi4zLTUuNyAyLjNINDh2MzUyaDM1MlYzNTAuNWMwLTIuMS44LTQuMSAyLjMtNS42em0xNTYuNi0yMDEuOEwyOTYuMyA0MDUuN2wtOTAuNCAxMGMtMjYuMiAyLjktNDguNS0xOS4yLTQ1LjYtNDUuNmwxMC05MC40TDQzMi45IDE3LjFjMjIuOS0yMi45IDU5LjktMjIuOSA4Mi43IDBsNDMuMiA0My4yYzIyLjkgMjIuOSAyMi45IDYwIC4xIDgyLjh6TTQ2MC4xIDE3NEw0MDIgMTE1LjkgMjE2LjIgMzAxLjhsLTcuMyA2NS4zIDY1LjMtNy4zTDQ2MC4xIDE3NHptNjQuOC03OS43bC00My4yLTQzLjJjLTQuMS00LjEtMTAuOC00LjEtMTQuOCAwTDQzNiA4Mmw1OC4xIDU4LjEgMzAuOS0zMC45YzQtNC4yIDQtMTAuOC0uMS0xNC45elwiXG4gICAgPjwvcGF0aD5cbiAgPC9zdmc+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI25leHRJY29uPlxuICA8c3ZnXG4gICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgZmlsbD1cIm5vbmVcIlxuICAgIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiXG4gICAgc3Ryb2tlLXdpZHRoPVwiMVwiXG4gICAgY2xhc3M9XCJuZXh0LWljb25cIlxuICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLW5leHQtaWNvblwiXG4gID5cbiAgICA8cGF0aCBzdHJva2U9XCJub25lXCIgZD1cIk0wIDBoMjR2MjRIMHpcIiBmaWxsPVwibm9uZVwiIC8+XG4gICAgPHBhdGggZD1cIk0xMiA1bDAgMTRcIiAvPlxuICAgIDxwYXRoIGQ9XCJNMTggMTNsLTYgNlwiIC8+XG4gICAgPHBhdGggZD1cIk02IDEzbDYgNlwiIC8+XG4gIDwvc3ZnPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -5,6 +5,9 @@ export class NggInPageWizardStepCardComponent {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.handleNextClick = new EventEmitter();
|
|
7
7
|
this.handleEditClick = new EventEmitter();
|
|
8
|
+
this.stepIsValid = () => {
|
|
9
|
+
return true;
|
|
10
|
+
};
|
|
8
11
|
this.stepText = '';
|
|
9
12
|
this.title = '';
|
|
10
13
|
this.editBtnText = '';
|
|
@@ -20,12 +23,14 @@ export class NggInPageWizardStepCardComponent {
|
|
|
20
23
|
this.handleEditClick.emit(event);
|
|
21
24
|
}
|
|
22
25
|
handleOnNextBtnClick(event) {
|
|
23
|
-
this.
|
|
24
|
-
|
|
26
|
+
if (this.stepIsValid()) {
|
|
27
|
+
this.isActive = false;
|
|
28
|
+
this.isCompleted = true;
|
|
29
|
+
}
|
|
25
30
|
this.handleNextClick.emit(event);
|
|
26
31
|
}
|
|
27
32
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
33
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
29
34
|
}
|
|
30
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
31
36
|
type: Component,
|
|
@@ -34,6 +39,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
34
39
|
type: Output
|
|
35
40
|
}], handleEditClick: [{
|
|
36
41
|
type: Output
|
|
42
|
+
}], stepIsValid: [{
|
|
43
|
+
type: Input
|
|
37
44
|
}], stepText: [{
|
|
38
45
|
type: Input
|
|
39
46
|
}], title: [{
|
|
@@ -51,4 +58,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
51
58
|
}], isActive: [{
|
|
52
59
|
type: Input
|
|
53
60
|
}] } });
|
|
54
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9zcmMvbGliL2luLXBhZ2Utd2l6YXJkL2luLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvc3JjL2xpYi9pbi1wYWdlLXdpemFyZC9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTs7O0FBTXRFLE1BQU0sT0FBTyxnQ0FBZ0M7SUFKN0M7UUFNVyxvQkFBZSxHQUN0QixJQUFJLFlBQVksRUFBYyxDQUFBO1FBR3ZCLG9CQUFlLEdBQ3RCLElBQUksWUFBWSxFQUFjLENBQUE7UUFFaEIsZ0JBQVcsR0FBRyxHQUFHLEVBQUU7WUFDakMsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDLENBQUE7UUFFZSxhQUFRLEdBQUcsRUFBRSxDQUFBO1FBRWIsVUFBSyxHQUFHLEVBQUUsQ0FBQTtRQUVWLGdCQUFXLEdBQUcsRUFBRSxDQUFBO1FBRWhCLGdCQUFXLEdBQUcsRUFBRSxDQUFBO1FBRWhCLG9CQUFlLEdBQUcsSUFBSSxDQUFBO1FBRXRCLGdCQUFXLEdBQUcsS0FBSyxDQUFBO1FBRW5CLGdCQUFXLEdBQUcsS0FBSyxDQUFBO1FBRW5CLGFBQVEsR0FBRyxLQUFLLENBQUE7S0FlakM7SUFiQyxvQkFBb0IsQ0FBQyxLQUFpQjtRQUNwQyxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQTtRQUM5QixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQTtRQUN4QixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxDQUFDO0lBQ0Qsb0JBQW9CLENBQUMsS0FBaUI7UUFDcEMsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUU7WUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7WUFDdEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7U0FDekI7UUFFRCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxDQUFDOytHQXpDVSxnQ0FBZ0M7bUdBQWhDLGdDQUFnQyxpWkNON0MsMjhIQWdIQTs7NEZEMUdhLGdDQUFnQztrQkFKNUMsU0FBUzsrQkFDRSw4QkFBOEI7OEJBSy9CLGVBQWU7c0JBRHZCLE1BQU07Z0JBS0UsZUFBZTtzQkFEdkIsTUFBTTtnQkFJUyxXQUFXO3NCQUExQixLQUFLO2dCQUlVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBRVUsS0FBSztzQkFBcEIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsZUFBZTtzQkFBOUIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsUUFBUTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdnLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBOZ2dJblBhZ2VXaXphcmRTdGVwQ2FyZENvbXBvbmVudCB7XG4gIEBPdXRwdXQoKVxuICByZWFkb25seSBoYW5kbGVOZXh0Q2xpY2s6IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PiA9XG4gICAgbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpXG5cbiAgQE91dHB1dCgpXG4gIHJlYWRvbmx5IGhhbmRsZUVkaXRDbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KClcblxuICBASW5wdXQoKSBwdWJsaWMgc3RlcElzVmFsaWQgPSAoKSA9PiB7XG4gICAgcmV0dXJuIHRydWU7XG4gIH1cblxuICBASW5wdXQoKSBwdWJsaWMgc3RlcFRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyB0aXRsZSA9ICcnXG5cbiAgQElucHV0KCkgcHVibGljIGVkaXRCdG5UZXh0ID0gJydcblxuICBASW5wdXQoKSBwdWJsaWMgbmV4dEJ0blRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyBzaG93TmV4dEJ0bkljb24gPSB0cnVlXG5cbiAgQElucHV0KCkgcHVibGljIGlzQ29tcGxldGVkID0gZmFsc2VcblxuICBASW5wdXQoKSBwdWJsaWMgZGlzYWJsZU5leHQgPSBmYWxzZVxuXG4gIEBJbnB1dCgpIHB1YmxpYyBpc0FjdGl2ZSA9IGZhbHNlXG5cbiAgaGFuZGxlT25FZGl0QnRuQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmlzQWN0aXZlID0gIXRoaXMuaXNBY3RpdmVcbiAgICB0aGlzLmlzQ29tcGxldGVkID0gZmFsc2VcbiAgICB0aGlzLmhhbmRsZUVkaXRDbGljay5lbWl0KGV2ZW50KVxuICB9XG4gIGhhbmRsZU9uTmV4dEJ0bkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgaWYgKHRoaXMuc3RlcElzVmFsaWQoKSkge1xuICAgICAgdGhpcy5pc0FjdGl2ZSA9IGZhbHNlO1xuICAgICAgdGhpcy5pc0NvbXBsZXRlZCA9IHRydWU7XG4gICAgfVxuICAgIFxuICAgIHRoaXMuaGFuZGxlTmV4dENsaWNrLmVtaXQoZXZlbnQpXG4gIH1cbn1cbiIsIjxzZWN0aW9uXG4gIGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZCBjYXJkXCJcbiAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtcm9vdFwiXG4gIFtjbGFzcy5hY3RpdmVdPVwiISFpc0FjdGl2ZVwiXG4gIFtjbGFzcy5jb21wbGV0ZWRdPVwiISFpc0NvbXBsZXRlZFwiXG4+XG4gIDxoZWFkZXIgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19oZWFkZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9faGVhZGVyX19pY29uXCI+XG4gICAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB2aWV3Qm94PVwiMCAwIDUxMiA1MTJcIj5cbiAgICAgICAgPCEtLSBGb250IEF3ZXNvbWUgUHJvIDUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSAtLT5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTQzNS44NDggODMuNDY2TDE3Mi44MDQgMzQ2LjUxbC05Ni42NTItOTYuNjUyYy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcxIDBsLTI4LjI4NCAyOC4yODRjLTQuNjg2IDQuNjg2LTQuNjg2IDEyLjI4NCAwIDE2Ljk3MWwxMzMuNDIxIDEzMy40MjFjNC42ODYgNC42ODYgMTIuMjg0IDQuNjg2IDE2Ljk3MSAwbDI5OS44MTMtMjk5LjgxM2M0LjY4Ni00LjY4NiA0LjY4Ni0xMi4yODQgMC0xNi45NzFsLTI4LjI4NC0yOC4yODRjLTQuNjg2LTQuNjg2LTEyLjI4NC00LjY4Ni0xNi45NyAwelwiXG4gICAgICAgIC8+XG4gICAgICA8L3N2Zz5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9fcHJvZ3Jlc3NcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtc3RlcC10ZXh0XCJcbiAgICA+XG4gICAgICB7eyBzdGVwVGV4dCB9fVxuICAgIDwvZGl2PlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9faGVhZGVyX190aXRsZVwiXG4gICAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC10aXRsZVwiXG4gICAgPlxuICAgICAgPGgyIGNsYXNzPVwiaDRcIj57eyB0aXRsZSB9fTwvaDI+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9fZWRpdFwiXG4gICAgICAqbmdJZj1cImlzQ29tcGxldGVkICYmICFpc0FjdGl2ZVwiXG4gICAgPlxuICAgICAgPGJ1dHRvblxuICAgICAgICBjbGFzcz1cInNlY29uZGFyeSBzbWFsbFwiXG4gICAgICAgIChjbGljayk9XCJoYW5kbGVPbkVkaXRCdG5DbGljaygkZXZlbnQpXCJcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtZWRpdC1idG5cIlxuICAgICAgPlxuICAgICAgICA8bmctdGVtcGxhdGUgKm5nVGVtcGxhdGVPdXRsZXQ9XCJlZGl0SWNvblwiPiA8L25nLXRlbXBsYXRlPlxuICAgICAgICB7eyBlZGl0QnRuVGV4dCB9fVxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIDwvaGVhZGVyPlxuXG4gIDxkaXZcbiAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2NvbnRlbnRcIlxuICAgICpuZ0lmPVwiISFpc0FjdGl2ZSB8fCAhIWlzQ29tcGxldGVkXCJcbiAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1jb250ZW50XCJcbiAgPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxmb290ZXJcbiAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2Zvb3RlciBnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXItLWVkaXRcIlxuICAgICpuZ0lmPVwiaXNDb21wbGV0ZWQgJiYgIWlzQWN0aXZlXCJcbiAgPlxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzPVwic2Vjb25kYXJ5XCJcbiAgICAgIChjbGljayk9XCJoYW5kbGVPbkVkaXRCdG5DbGljaygkZXZlbnQpXCJcbiAgICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLWZvb3Rlci1lZGl0LWJ0blwiXG4gICAgPlxuICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiZWRpdEljb25cIj4gPC9uZy10ZW1wbGF0ZT5cbiAgICAgIHt7IGVkaXRCdG5UZXh0IH19XG4gICAgPC9idXR0b24+XG4gIDwvZm9vdGVyPlxuXG4gIDxmb290ZXJcbiAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2Zvb3RlciBnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXItLW5leHRcIlxuICAgICpuZ0lmPVwiaXNBY3RpdmVcIlxuICA+XG4gICAgPGJ1dHRvblxuICAgICAgY2xhc3M9XCJwcmltYXJ5XCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlTmV4dFwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlT25OZXh0QnRuQ2xpY2soJGV2ZW50KVwiXG4gICAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1uZXh0LWJ0blwiXG4gICAgPlxuICAgICAge3sgbmV4dEJ0blRleHQgfX1cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzaG93TmV4dEJ0bkljb25cIj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwibmV4dEljb25cIj4gPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvYnV0dG9uPlxuICA8L2Zvb3Rlcj5cbjwvc2VjdGlvbj5cblxuPG5nLXRlbXBsYXRlICNlZGl0SWNvbj5cbiAgPHN2Z1xuICAgIHZpZXdCb3g9XCIwIDAgNTc2IDUxMlwiXG4gICAgY2xhc3M9XCJlZGl0LWljb25cIlxuICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgIGZvY3VzYWJsZT1cImZhbHNlXCJcbiAgPlxuICAgIDxwYXRoXG4gICAgICBmaWxsPVwidmFyKC0tY29sb3IpXCJcbiAgICAgIGQ9XCJNNDAyLjMgMzQ0LjlsMzItMzJjNS01IDEzLjctMS41IDEzLjcgNS43VjQ2NGMwIDI2LjUtMjEuNSA0OC00OCA0OEg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWMTEyYzAtMjYuNSAyMS41LTQ4IDQ4LTQ4aDI3My41YzcuMSAwIDEwLjcgOC42IDUuNyAxMy43bC0zMiAzMmMtMS41IDEuNS0zLjUgMi4zLTUuNyAyLjNINDh2MzUyaDM1MlYzNTAuNWMwLTIuMS44LTQuMSAyLjMtNS42em0xNTYuNi0yMDEuOEwyOTYuMyA0MDUuN2wtOTAuNCAxMGMtMjYuMiAyLjktNDguNS0xOS4yLTQ1LjYtNDUuNmwxMC05MC40TDQzMi45IDE3LjFjMjIuOS0yMi45IDU5LjktMjIuOSA4Mi43IDBsNDMuMiA0My4yYzIyLjkgMjIuOSAyMi45IDYwIC4xIDgyLjh6TTQ2MC4xIDE3NEw0MDIgMTE1LjkgMjE2LjIgMzAxLjhsLTcuMyA2NS4zIDY1LjMtNy4zTDQ2MC4xIDE3NHptNjQuOC03OS43bC00My4yLTQzLjJjLTQuMS00LjEtMTAuOC00LjEtMTQuOCAwTDQzNiA4Mmw1OC4xIDU4LjEgMzAuOS0zMC45YzQtNC4yIDQtMTAuOC0uMS0xNC45elwiXG4gICAgPjwvcGF0aD5cbiAgPC9zdmc+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI25leHRJY29uPlxuICA8c3ZnXG4gICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgZmlsbD1cIm5vbmVcIlxuICAgIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiXG4gICAgc3Ryb2tlLXdpZHRoPVwiMVwiXG4gICAgY2xhc3M9XCJuZXh0LWljb25cIlxuICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLW5leHQtaWNvblwiXG4gID5cbiAgICA8cGF0aCBzdHJva2U9XCJub25lXCIgZD1cIk0wIDBoMjR2MjRIMHpcIiBmaWxsPVwibm9uZVwiIC8+XG4gICAgPHBhdGggZD1cIk0xMiA1bDAgMTRcIiAvPlxuICAgIDxwYXRoIGQ9XCJNMTggMTNsLTYgNlwiIC8+XG4gICAgPHBhdGggZD1cIk02IDEzbDYgNlwiIC8+XG4gIDwvc3ZnPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -7,6 +7,9 @@ class NggInPageWizardStepCardComponent {
|
|
|
7
7
|
constructor() {
|
|
8
8
|
this.handleNextClick = new EventEmitter();
|
|
9
9
|
this.handleEditClick = new EventEmitter();
|
|
10
|
+
this.stepIsValid = () => {
|
|
11
|
+
return true;
|
|
12
|
+
};
|
|
10
13
|
this.stepText = '';
|
|
11
14
|
this.title = '';
|
|
12
15
|
this.editBtnText = '';
|
|
@@ -22,12 +25,14 @@ class NggInPageWizardStepCardComponent {
|
|
|
22
25
|
this.handleEditClick.emit(event);
|
|
23
26
|
}
|
|
24
27
|
handleOnNextBtnClick(event) {
|
|
25
|
-
this.
|
|
26
|
-
|
|
28
|
+
if (this.stepIsValid()) {
|
|
29
|
+
this.isActive = false;
|
|
30
|
+
this.isCompleted = true;
|
|
31
|
+
}
|
|
27
32
|
this.handleNextClick.emit(event);
|
|
28
33
|
}
|
|
29
34
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
31
36
|
}
|
|
32
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
33
38
|
type: Component,
|
|
@@ -36,6 +41,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
36
41
|
type: Output
|
|
37
42
|
}], handleEditClick: [{
|
|
38
43
|
type: Output
|
|
44
|
+
}], stepIsValid: [{
|
|
45
|
+
type: Input
|
|
39
46
|
}], stepText: [{
|
|
40
47
|
type: Input
|
|
41
48
|
}], title: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sebgroup-green-angular-src-lib-in-page-wizard.mjs","sources":["../../../../libs/angular/src/lib/in-page-wizard/in-page-wizard-step-card.component.ts","../../../../libs/angular/src/lib/in-page-wizard/in-page-wizard-step-card.component.html","../../../../libs/angular/src/lib/in-page-wizard/in-page-wizard.module.ts","../../../../libs/angular/src/lib/in-page-wizard/sebgroup-green-angular-src-lib-in-page-wizard.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core'\n\n@Component({\n selector: 'ngg-in-page-wizard-step-card',\n templateUrl: './in-page-wizard-step-card.component.html',\n})\nexport class NggInPageWizardStepCardComponent {\n @Output()\n readonly handleNextClick: EventEmitter<MouseEvent> =\n new EventEmitter<MouseEvent>()\n\n @Output()\n readonly handleEditClick: EventEmitter<MouseEvent> =\n new EventEmitter<MouseEvent>()\n\n @Input() public stepText = ''\n\n @Input() public title = ''\n\n @Input() public editBtnText = ''\n\n @Input() public nextBtnText = ''\n\n @Input() public showNextBtnIcon = true\n\n @Input() public isCompleted = false\n\n @Input() public disableNext = false\n\n @Input() public isActive = false\n\n handleOnEditBtnClick(event: MouseEvent): void {\n this.isActive = !this.isActive\n this.isCompleted = false\n this.handleEditClick.emit(event)\n }\n handleOnNextBtnClick(event: MouseEvent) {\n this.isActive = false
|
|
1
|
+
{"version":3,"file":"sebgroup-green-angular-src-lib-in-page-wizard.mjs","sources":["../../../../libs/angular/src/lib/in-page-wizard/in-page-wizard-step-card.component.ts","../../../../libs/angular/src/lib/in-page-wizard/in-page-wizard-step-card.component.html","../../../../libs/angular/src/lib/in-page-wizard/in-page-wizard.module.ts","../../../../libs/angular/src/lib/in-page-wizard/sebgroup-green-angular-src-lib-in-page-wizard.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core'\n\n@Component({\n selector: 'ngg-in-page-wizard-step-card',\n templateUrl: './in-page-wizard-step-card.component.html',\n})\nexport class NggInPageWizardStepCardComponent {\n @Output()\n readonly handleNextClick: EventEmitter<MouseEvent> =\n new EventEmitter<MouseEvent>()\n\n @Output()\n readonly handleEditClick: EventEmitter<MouseEvent> =\n new EventEmitter<MouseEvent>()\n\n @Input() public stepIsValid = () => {\n return true;\n }\n\n @Input() public stepText = ''\n\n @Input() public title = ''\n\n @Input() public editBtnText = ''\n\n @Input() public nextBtnText = ''\n\n @Input() public showNextBtnIcon = true\n\n @Input() public isCompleted = false\n\n @Input() public disableNext = false\n\n @Input() public isActive = false\n\n handleOnEditBtnClick(event: MouseEvent): void {\n this.isActive = !this.isActive\n this.isCompleted = false\n this.handleEditClick.emit(event)\n }\n handleOnNextBtnClick(event: MouseEvent) {\n if (this.stepIsValid()) {\n this.isActive = false;\n this.isCompleted = true;\n }\n \n this.handleNextClick.emit(event)\n }\n}\n","<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { NggInPageWizardStepCardComponent } from './in-page-wizard-step-card.component'\n\n@NgModule({\n declarations: [NggInPageWizardStepCardComponent],\n imports: [CommonModule],\n exports: [NggInPageWizardStepCardComponent],\n})\nexport class NggInPageWizardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAMa,gCAAgC,CAAA;AAJ7C,IAAA,WAAA,GAAA;AAMW,QAAA,IAAA,CAAA,eAAe,GACtB,IAAI,YAAY,EAAc,CAAA;AAGvB,QAAA,IAAA,CAAA,eAAe,GACtB,IAAI,YAAY,EAAc,CAAA;QAEhB,IAAW,CAAA,WAAA,GAAG,MAAK;AACjC,YAAA,OAAO,IAAI,CAAC;AACd,SAAC,CAAA;QAEe,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAA;QAEb,IAAK,CAAA,KAAA,GAAG,EAAE,CAAA;QAEV,IAAW,CAAA,WAAA,GAAG,EAAE,CAAA;QAEhB,IAAW,CAAA,WAAA,GAAG,EAAE,CAAA;QAEhB,IAAe,CAAA,eAAA,GAAG,IAAI,CAAA;QAEtB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAA;QAEnB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAA;QAEnB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAA;AAejC,KAAA;AAbC,IAAA,oBAAoB,CAAC,KAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAA;AAC9B,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;AACxB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KACjC;AACD,IAAA,oBAAoB,CAAC,KAAiB,EAAA;AACpC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;AACtB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACtB,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;AACzB,SAAA;AAED,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KACjC;+GAzCU,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gCAAgC,iZCN7C,28HAgHA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FD1Ga,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAJ5C,SAAS;+BACE,8BAA8B,EAAA,QAAA,EAAA,28HAAA,EAAA,CAAA;8BAK/B,eAAe,EAAA,CAAA;sBADvB,MAAM;gBAKE,eAAe,EAAA,CAAA;sBADvB,MAAM;gBAIS,WAAW,EAAA,CAAA;sBAA1B,KAAK;gBAIU,QAAQ,EAAA,CAAA;sBAAvB,KAAK;gBAEU,KAAK,EAAA,CAAA;sBAApB,KAAK;gBAEU,WAAW,EAAA,CAAA;sBAA1B,KAAK;gBAEU,WAAW,EAAA,CAAA;sBAA1B,KAAK;gBAEU,eAAe,EAAA,CAAA;sBAA9B,KAAK;gBAEU,WAAW,EAAA,CAAA;sBAA1B,KAAK;gBAEU,WAAW,EAAA,CAAA;sBAA1B,KAAK;gBAEU,QAAQ,EAAA,CAAA;sBAAvB,KAAK;;;MEvBK,qBAAqB,CAAA;+GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,EAJjB,YAAA,EAAA,CAAA,gCAAgC,CACrC,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,gCAAgC,CAAA,EAAA,CAAA,CAAA,EAAA;AAE/B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAHtB,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAGX,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,gCAAgC,CAAC;oBAChD,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,gCAAgC,CAAC;AAC5C,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}
|
|
@@ -795,6 +795,9 @@ class NggInPageWizardStepCardComponent {
|
|
|
795
795
|
constructor() {
|
|
796
796
|
this.handleNextClick = new EventEmitter();
|
|
797
797
|
this.handleEditClick = new EventEmitter();
|
|
798
|
+
this.stepIsValid = () => {
|
|
799
|
+
return true;
|
|
800
|
+
};
|
|
798
801
|
this.stepText = '';
|
|
799
802
|
this.title = '';
|
|
800
803
|
this.editBtnText = '';
|
|
@@ -810,12 +813,14 @@ class NggInPageWizardStepCardComponent {
|
|
|
810
813
|
this.handleEditClick.emit(event);
|
|
811
814
|
}
|
|
812
815
|
handleOnNextBtnClick(event) {
|
|
813
|
-
this.
|
|
814
|
-
|
|
816
|
+
if (this.stepIsValid()) {
|
|
817
|
+
this.isActive = false;
|
|
818
|
+
this.isCompleted = true;
|
|
819
|
+
}
|
|
815
820
|
this.handleNextClick.emit(event);
|
|
816
821
|
}
|
|
817
822
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
818
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n <path\n d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n />\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n class=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n class=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
819
824
|
}
|
|
820
825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
821
826
|
type: Component,
|
|
@@ -824,6 +829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
824
829
|
type: Output
|
|
825
830
|
}], handleEditClick: [{
|
|
826
831
|
type: Output
|
|
832
|
+
}], stepIsValid: [{
|
|
833
|
+
type: Input
|
|
827
834
|
}], stepText: [{
|
|
828
835
|
type: Input
|
|
829
836
|
}], title: [{
|