@sebgroup/green-angular 4.2.1 → 4.2.2
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/esm2022/lib/in-page-wizard/in-page-wizard-step-card.component.mjs +7 -3
- package/esm2022/src/lib/in-page-wizard/in-page-wizard-step-card.component.mjs +7 -3
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs +6 -2
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular.mjs +6 -2
- 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 +3 -3
- package/src/lib/in-page-wizard/in-page-wizard-step-card.component.d.ts +2 -1
|
@@ -9,12 +9,14 @@ export class NggInPageWizardStepCardComponent {
|
|
|
9
9
|
this.title = '';
|
|
10
10
|
this.editBtnText = '';
|
|
11
11
|
this.nextBtnText = '';
|
|
12
|
+
this.showNextBtnIcon = true;
|
|
12
13
|
this.isCompleted = false;
|
|
13
14
|
this.disableNext = false;
|
|
14
15
|
this.isActive = false;
|
|
15
16
|
}
|
|
16
17
|
handleOnEditBtnClick(event) {
|
|
17
18
|
this.isActive = !this.isActive;
|
|
19
|
+
this.isCompleted = false;
|
|
18
20
|
this.handleEditClick.emit(event);
|
|
19
21
|
}
|
|
20
22
|
handleOnNextBtnClick(event) {
|
|
@@ -23,11 +25,11 @@ export class NggInPageWizardStepCardComponent {
|
|
|
23
25
|
this.handleNextClick.emit(event);
|
|
24
26
|
}
|
|
25
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
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", 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 {{ 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
|
|
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"] }] }); }
|
|
27
29
|
}
|
|
28
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
29
31
|
type: Component,
|
|
30
|
-
args: [{ selector: 'ngg-in-page-wizard-step-card', 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 {{ 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
|
|
32
|
+
args: [{ selector: 'ngg-in-page-wizard-step-card', 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" }]
|
|
31
33
|
}], propDecorators: { handleNextClick: [{
|
|
32
34
|
type: Output
|
|
33
35
|
}], handleEditClick: [{
|
|
@@ -40,6 +42,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
40
42
|
type: Input
|
|
41
43
|
}], nextBtnText: [{
|
|
42
44
|
type: Input
|
|
45
|
+
}], showNextBtnIcon: [{
|
|
46
|
+
type: Input
|
|
43
47
|
}], isCompleted: [{
|
|
44
48
|
type: Input
|
|
45
49
|
}], disableNext: [{
|
|
@@ -47,4 +51,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
47
51
|
}], isActive: [{
|
|
48
52
|
type: Input
|
|
49
53
|
}] } });
|
|
50
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
54
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9zcmMvbGliL2luLXBhZ2Utd2l6YXJkL2luLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvc3JjL2xpYi9pbi1wYWdlLXdpemFyZC9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTs7O0FBTXRFLE1BQU0sT0FBTyxnQ0FBZ0M7SUFKN0M7UUFNVyxvQkFBZSxHQUN0QixJQUFJLFlBQVksRUFBYyxDQUFBO1FBR3ZCLG9CQUFlLEdBQ3RCLElBQUksWUFBWSxFQUFjLENBQUE7UUFFaEIsYUFBUSxHQUFHLEVBQUUsQ0FBQTtRQUViLFVBQUssR0FBRyxFQUFFLENBQUE7UUFFVixnQkFBVyxHQUFHLEVBQUUsQ0FBQTtRQUVoQixnQkFBVyxHQUFHLEVBQUUsQ0FBQTtRQUVoQixvQkFBZSxHQUFHLElBQUksQ0FBQTtRQUV0QixnQkFBVyxHQUFHLEtBQUssQ0FBQTtRQUVuQixnQkFBVyxHQUFHLEtBQUssQ0FBQTtRQUVuQixhQUFRLEdBQUcsS0FBSyxDQUFBO0tBWWpDO0lBVkMsb0JBQW9CLENBQUMsS0FBaUI7UUFDcEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUE7UUFDOUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUE7UUFDeEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUE7SUFDbEMsQ0FBQztJQUNELG9CQUFvQixDQUFDLEtBQWlCO1FBQ3BDLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFBO1FBQ3JCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFBO1FBQ3ZCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ2xDLENBQUM7K0dBbENVLGdDQUFnQzttR0FBaEMsZ0NBQWdDLHFYQ043QywyOEhBZ0hBOzs0RkQxR2EsZ0NBQWdDO2tCQUo1QyxTQUFTOytCQUNFLDhCQUE4Qjs4QkFLL0IsZUFBZTtzQkFEdkIsTUFBTTtnQkFLRSxlQUFlO3NCQUR2QixNQUFNO2dCQUlTLFFBQVE7c0JBQXZCLEtBQUs7Z0JBRVUsS0FBSztzQkFBcEIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsZUFBZTtzQkFBOUIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsUUFBUTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdnLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBOZ2dJblBhZ2VXaXphcmRTdGVwQ2FyZENvbXBvbmVudCB7XG4gIEBPdXRwdXQoKVxuICByZWFkb25seSBoYW5kbGVOZXh0Q2xpY2s6IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PiA9XG4gICAgbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpXG5cbiAgQE91dHB1dCgpXG4gIHJlYWRvbmx5IGhhbmRsZUVkaXRDbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KClcblxuICBASW5wdXQoKSBwdWJsaWMgc3RlcFRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyB0aXRsZSA9ICcnXG5cbiAgQElucHV0KCkgcHVibGljIGVkaXRCdG5UZXh0ID0gJydcblxuICBASW5wdXQoKSBwdWJsaWMgbmV4dEJ0blRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyBzaG93TmV4dEJ0bkljb24gPSB0cnVlXG5cbiAgQElucHV0KCkgcHVibGljIGlzQ29tcGxldGVkID0gZmFsc2VcblxuICBASW5wdXQoKSBwdWJsaWMgZGlzYWJsZU5leHQgPSBmYWxzZVxuXG4gIEBJbnB1dCgpIHB1YmxpYyBpc0FjdGl2ZSA9IGZhbHNlXG5cbiAgaGFuZGxlT25FZGl0QnRuQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmlzQWN0aXZlID0gIXRoaXMuaXNBY3RpdmVcbiAgICB0aGlzLmlzQ29tcGxldGVkID0gZmFsc2VcbiAgICB0aGlzLmhhbmRsZUVkaXRDbGljay5lbWl0KGV2ZW50KVxuICB9XG4gIGhhbmRsZU9uTmV4dEJ0bkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgdGhpcy5pc0FjdGl2ZSA9IGZhbHNlXG4gICAgdGhpcy5pc0NvbXBsZXRlZCA9IHRydWVcbiAgICB0aGlzLmhhbmRsZU5leHRDbGljay5lbWl0KGV2ZW50KVxuICB9XG59XG4iLCI8c2VjdGlvblxuICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQgY2FyZFwiXG4gIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLXJvb3RcIlxuICBbY2xhc3MuYWN0aXZlXT1cIiEhaXNBY3RpdmVcIlxuICBbY2xhc3MuY29tcGxldGVkXT1cIiEhaXNDb21wbGV0ZWRcIlxuPlxuICA8aGVhZGVyIGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9faGVhZGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9faWNvblwiPlxuICAgICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgdmlld0JveD1cIjAgMCA1MTIgNTEyXCI+XG4gICAgICAgIDwhLS0gRm9udCBBd2Vzb21lIFBybyA1LjE1LjQgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgLS0+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk00MzUuODQ4IDgzLjQ2NkwxNzIuODA0IDM0Ni41MWwtOTYuNjUyLTk2LjY1MmMtNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3MSAwbC0yOC4yODQgMjguMjg0Yy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NzFsMTMzLjQyMSAxMzMuNDIxYzQuNjg2IDQuNjg2IDEyLjI4NCA0LjY4NiAxNi45NzEgMGwyOTkuODEzLTI5OS44MTNjNC42ODYtNC42ODYgNC42ODYtMTIuMjg0IDAtMTYuOTcxbC0yOC4yODQtMjguMjg0Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcgMHpcIlxuICAgICAgICAvPlxuICAgICAgPC9zdmc+XG4gICAgPC9kaXY+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19oZWFkZXJfX3Byb2dyZXNzXCJcbiAgICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLXN0ZXAtdGV4dFwiXG4gICAgPlxuICAgICAge3sgc3RlcFRleHQgfX1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9fdGl0bGVcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtdGl0bGVcIlxuICAgID5cbiAgICAgIDxoMiBjbGFzcz1cImg0XCI+e3sgdGl0bGUgfX08L2gyPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19oZWFkZXJfX2VkaXRcIlxuICAgICAgKm5nSWY9XCJpc0NvbXBsZXRlZCAmJiAhaXNBY3RpdmVcIlxuICAgID5cbiAgICAgIDxidXR0b25cbiAgICAgICAgY2xhc3M9XCJzZWNvbmRhcnkgc21hbGxcIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlT25FZGl0QnRuQ2xpY2soJGV2ZW50KVwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLWVkaXQtYnRuXCJcbiAgICAgID5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiZWRpdEljb25cIj4gPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAge3sgZWRpdEJ0blRleHQgfX1cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L2hlYWRlcj5cblxuICA8ZGl2XG4gICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19jb250ZW50XCJcbiAgICAqbmdJZj1cIiEhaXNBY3RpdmUgfHwgISFpc0NvbXBsZXRlZFwiXG4gICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtY29udGVudFwiXG4gID5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICA8Zm9vdGVyXG4gICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXIgZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9fZm9vdGVyLS1lZGl0XCJcbiAgICAqbmdJZj1cImlzQ29tcGxldGVkICYmICFpc0FjdGl2ZVwiXG4gID5cbiAgICA8YnV0dG9uXG4gICAgICBjbGFzcz1cInNlY29uZGFyeVwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlT25FZGl0QnRuQ2xpY2soJGV2ZW50KVwiXG4gICAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1mb290ZXItZWRpdC1idG5cIlxuICAgID5cbiAgICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cImVkaXRJY29uXCI+IDwvbmctdGVtcGxhdGU+XG4gICAgICB7eyBlZGl0QnRuVGV4dCB9fVxuICAgIDwvYnV0dG9uPlxuICA8L2Zvb3Rlcj5cblxuICA8Zm9vdGVyXG4gICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXIgZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9fZm9vdGVyLS1uZXh0XCJcbiAgICAqbmdJZj1cImlzQWN0aXZlXCJcbiAgPlxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzPVwicHJpbWFyeVwiXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZU5leHRcIlxuICAgICAgKGNsaWNrKT1cImhhbmRsZU9uTmV4dEJ0bkNsaWNrKCRldmVudClcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtbmV4dC1idG5cIlxuICAgID5cbiAgICAgIHt7IG5leHRCdG5UZXh0IH19XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwic2hvd05leHRCdG5JY29uXCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cIm5leHRJY29uXCI+IDwvbmctdGVtcGxhdGU+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2J1dHRvbj5cbiAgPC9mb290ZXI+XG48L3NlY3Rpb24+XG5cbjxuZy10ZW1wbGF0ZSAjZWRpdEljb24+XG4gIDxzdmdcbiAgICB2aWV3Qm94PVwiMCAwIDU3NiA1MTJcIlxuICAgIGNsYXNzPVwiZWRpdC1pY29uXCJcbiAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgICBmb2N1c2FibGU9XCJmYWxzZVwiXG4gID5cbiAgICA8cGF0aFxuICAgICAgZmlsbD1cInZhcigtLWNvbG9yKVwiXG4gICAgICBkPVwiTTQwMi4zIDM0NC45bDMyLTMyYzUtNSAxMy43LTEuNSAxMy43IDUuN1Y0NjRjMCAyNi41LTIxLjUgNDgtNDggNDhINDhjLTI2LjUgMC00OC0yMS41LTQ4LTQ4VjExMmMwLTI2LjUgMjEuNS00OCA0OC00OGgyNzMuNWM3LjEgMCAxMC43IDguNiA1LjcgMTMuN2wtMzIgMzJjLTEuNSAxLjUtMy41IDIuMy01LjcgMi4zSDQ4djM1MmgzNTJWMzUwLjVjMC0yLjEuOC00LjEgMi4zLTUuNnptMTU2LjYtMjAxLjhMMjk2LjMgNDA1LjdsLTkwLjQgMTBjLTI2LjIgMi45LTQ4LjUtMTkuMi00NS42LTQ1LjZsMTAtOTAuNEw0MzIuOSAxNy4xYzIyLjktMjIuOSA1OS45LTIyLjkgODIuNyAwbDQzLjIgNDMuMmMyMi45IDIyLjkgMjIuOSA2MCAuMSA4Mi44ek00NjAuMSAxNzRMNDAyIDExNS45IDIxNi4yIDMwMS44bC03LjMgNjUuMyA2NS4zLTcuM0w0NjAuMSAxNzR6bTY0LjgtNzkuN2wtNDMuMi00My4yYy00LjEtNC4xLTEwLjgtNC4xLTE0LjggMEw0MzYgODJsNTguMSA1OC4xIDMwLjktMzAuOWM0LTQuMiA0LTEwLjgtLjEtMTQuOXpcIlxuICAgID48L3BhdGg+XG4gIDwvc3ZnPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNuZXh0SWNvbj5cbiAgPHN2Z1xuICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgIGZpbGw9XCJub25lXCJcbiAgICBzdHJva2U9XCJjdXJyZW50Q29sb3JcIlxuICAgIHN0cm9rZS13aWR0aD1cIjFcIlxuICAgIGNsYXNzPVwibmV4dC1pY29uXCJcbiAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1uZXh0LWljb25cIlxuICA+XG4gICAgPHBhdGggc3Ryb2tlPVwibm9uZVwiIGQ9XCJNMCAwaDI0djI0SDB6XCIgZmlsbD1cIm5vbmVcIiAvPlxuICAgIDxwYXRoIGQ9XCJNMTIgNWwwIDE0XCIgLz5cbiAgICA8cGF0aCBkPVwiTTE4IDEzbC02IDZcIiAvPlxuICAgIDxwYXRoIGQ9XCJNNiAxM2w2IDZcIiAvPlxuICA8L3N2Zz5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
|
|
@@ -9,12 +9,14 @@ export class NggInPageWizardStepCardComponent {
|
|
|
9
9
|
this.title = '';
|
|
10
10
|
this.editBtnText = '';
|
|
11
11
|
this.nextBtnText = '';
|
|
12
|
+
this.showNextBtnIcon = true;
|
|
12
13
|
this.isCompleted = false;
|
|
13
14
|
this.disableNext = false;
|
|
14
15
|
this.isActive = false;
|
|
15
16
|
}
|
|
16
17
|
handleOnEditBtnClick(event) {
|
|
17
18
|
this.isActive = !this.isActive;
|
|
19
|
+
this.isCompleted = false;
|
|
18
20
|
this.handleEditClick.emit(event);
|
|
19
21
|
}
|
|
20
22
|
handleOnNextBtnClick(event) {
|
|
@@ -23,11 +25,11 @@ export class NggInPageWizardStepCardComponent {
|
|
|
23
25
|
this.handleNextClick.emit(event);
|
|
24
26
|
}
|
|
25
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
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", 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 {{ 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
|
|
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"] }] }); }
|
|
27
29
|
}
|
|
28
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
29
31
|
type: Component,
|
|
30
|
-
args: [{ selector: 'ngg-in-page-wizard-step-card', 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 {{ 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
|
|
32
|
+
args: [{ selector: 'ngg-in-page-wizard-step-card', 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" }]
|
|
31
33
|
}], propDecorators: { handleNextClick: [{
|
|
32
34
|
type: Output
|
|
33
35
|
}], handleEditClick: [{
|
|
@@ -40,6 +42,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
40
42
|
type: Input
|
|
41
43
|
}], nextBtnText: [{
|
|
42
44
|
type: Input
|
|
45
|
+
}], showNextBtnIcon: [{
|
|
46
|
+
type: Input
|
|
43
47
|
}], isCompleted: [{
|
|
44
48
|
type: Input
|
|
45
49
|
}], disableNext: [{
|
|
@@ -47,4 +51,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
47
51
|
}], isActive: [{
|
|
48
52
|
type: Input
|
|
49
53
|
}] } });
|
|
50
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
54
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9zcmMvbGliL2luLXBhZ2Utd2l6YXJkL2luLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvc3JjL2xpYi9pbi1wYWdlLXdpemFyZC9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTs7O0FBTXRFLE1BQU0sT0FBTyxnQ0FBZ0M7SUFKN0M7UUFNVyxvQkFBZSxHQUN0QixJQUFJLFlBQVksRUFBYyxDQUFBO1FBR3ZCLG9CQUFlLEdBQ3RCLElBQUksWUFBWSxFQUFjLENBQUE7UUFFaEIsYUFBUSxHQUFHLEVBQUUsQ0FBQTtRQUViLFVBQUssR0FBRyxFQUFFLENBQUE7UUFFVixnQkFBVyxHQUFHLEVBQUUsQ0FBQTtRQUVoQixnQkFBVyxHQUFHLEVBQUUsQ0FBQTtRQUVoQixvQkFBZSxHQUFHLElBQUksQ0FBQTtRQUV0QixnQkFBVyxHQUFHLEtBQUssQ0FBQTtRQUVuQixnQkFBVyxHQUFHLEtBQUssQ0FBQTtRQUVuQixhQUFRLEdBQUcsS0FBSyxDQUFBO0tBWWpDO0lBVkMsb0JBQW9CLENBQUMsS0FBaUI7UUFDcEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUE7UUFDOUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUE7UUFDeEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUE7SUFDbEMsQ0FBQztJQUNELG9CQUFvQixDQUFDLEtBQWlCO1FBQ3BDLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFBO1FBQ3JCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFBO1FBQ3ZCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ2xDLENBQUM7K0dBbENVLGdDQUFnQzttR0FBaEMsZ0NBQWdDLHFYQ043QywyOEhBZ0hBOzs0RkQxR2EsZ0NBQWdDO2tCQUo1QyxTQUFTOytCQUNFLDhCQUE4Qjs4QkFLL0IsZUFBZTtzQkFEdkIsTUFBTTtnQkFLRSxlQUFlO3NCQUR2QixNQUFNO2dCQUlTLFFBQVE7c0JBQXZCLEtBQUs7Z0JBRVUsS0FBSztzQkFBcEIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsZUFBZTtzQkFBOUIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUVVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRVUsUUFBUTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdnLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBOZ2dJblBhZ2VXaXphcmRTdGVwQ2FyZENvbXBvbmVudCB7XG4gIEBPdXRwdXQoKVxuICByZWFkb25seSBoYW5kbGVOZXh0Q2xpY2s6IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PiA9XG4gICAgbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpXG5cbiAgQE91dHB1dCgpXG4gIHJlYWRvbmx5IGhhbmRsZUVkaXRDbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KClcblxuICBASW5wdXQoKSBwdWJsaWMgc3RlcFRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyB0aXRsZSA9ICcnXG5cbiAgQElucHV0KCkgcHVibGljIGVkaXRCdG5UZXh0ID0gJydcblxuICBASW5wdXQoKSBwdWJsaWMgbmV4dEJ0blRleHQgPSAnJ1xuXG4gIEBJbnB1dCgpIHB1YmxpYyBzaG93TmV4dEJ0bkljb24gPSB0cnVlXG5cbiAgQElucHV0KCkgcHVibGljIGlzQ29tcGxldGVkID0gZmFsc2VcblxuICBASW5wdXQoKSBwdWJsaWMgZGlzYWJsZU5leHQgPSBmYWxzZVxuXG4gIEBJbnB1dCgpIHB1YmxpYyBpc0FjdGl2ZSA9IGZhbHNlXG5cbiAgaGFuZGxlT25FZGl0QnRuQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmlzQWN0aXZlID0gIXRoaXMuaXNBY3RpdmVcbiAgICB0aGlzLmlzQ29tcGxldGVkID0gZmFsc2VcbiAgICB0aGlzLmhhbmRsZUVkaXRDbGljay5lbWl0KGV2ZW50KVxuICB9XG4gIGhhbmRsZU9uTmV4dEJ0bkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgdGhpcy5pc0FjdGl2ZSA9IGZhbHNlXG4gICAgdGhpcy5pc0NvbXBsZXRlZCA9IHRydWVcbiAgICB0aGlzLmhhbmRsZU5leHRDbGljay5lbWl0KGV2ZW50KVxuICB9XG59XG4iLCI8c2VjdGlvblxuICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQgY2FyZFwiXG4gIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLXJvb3RcIlxuICBbY2xhc3MuYWN0aXZlXT1cIiEhaXNBY3RpdmVcIlxuICBbY2xhc3MuY29tcGxldGVkXT1cIiEhaXNDb21wbGV0ZWRcIlxuPlxuICA8aGVhZGVyIGNsYXNzPVwiZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9faGVhZGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9faWNvblwiPlxuICAgICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgdmlld0JveD1cIjAgMCA1MTIgNTEyXCI+XG4gICAgICAgIDwhLS0gRm9udCBBd2Vzb21lIFBybyA1LjE1LjQgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgLS0+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk00MzUuODQ4IDgzLjQ2NkwxNzIuODA0IDM0Ni41MWwtOTYuNjUyLTk2LjY1MmMtNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3MSAwbC0yOC4yODQgMjguMjg0Yy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NzFsMTMzLjQyMSAxMzMuNDIxYzQuNjg2IDQuNjg2IDEyLjI4NCA0LjY4NiAxNi45NzEgMGwyOTkuODEzLTI5OS44MTNjNC42ODYtNC42ODYgNC42ODYtMTIuMjg0IDAtMTYuOTcxbC0yOC4yODQtMjguMjg0Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcgMHpcIlxuICAgICAgICAvPlxuICAgICAgPC9zdmc+XG4gICAgPC9kaXY+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19oZWFkZXJfX3Byb2dyZXNzXCJcbiAgICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLXN0ZXAtdGV4dFwiXG4gICAgPlxuICAgICAge3sgc3RlcFRleHQgfX1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImdkcy1pbi1wYWdlLXdpemFyZC1zdGVwLWNhcmRfX2hlYWRlcl9fdGl0bGVcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtdGl0bGVcIlxuICAgID5cbiAgICAgIDxoMiBjbGFzcz1cImg0XCI+e3sgdGl0bGUgfX08L2gyPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19oZWFkZXJfX2VkaXRcIlxuICAgICAgKm5nSWY9XCJpc0NvbXBsZXRlZCAmJiAhaXNBY3RpdmVcIlxuICAgID5cbiAgICAgIDxidXR0b25cbiAgICAgICAgY2xhc3M9XCJzZWNvbmRhcnkgc21hbGxcIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlT25FZGl0QnRuQ2xpY2soJGV2ZW50KVwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwiaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkLWVkaXQtYnRuXCJcbiAgICAgID5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiZWRpdEljb25cIj4gPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAge3sgZWRpdEJ0blRleHQgfX1cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L2hlYWRlcj5cblxuICA8ZGl2XG4gICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19jb250ZW50XCJcbiAgICAqbmdJZj1cIiEhaXNBY3RpdmUgfHwgISFpc0NvbXBsZXRlZFwiXG4gICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtY29udGVudFwiXG4gID5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICA8Zm9vdGVyXG4gICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXIgZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9fZm9vdGVyLS1lZGl0XCJcbiAgICAqbmdJZj1cImlzQ29tcGxldGVkICYmICFpc0FjdGl2ZVwiXG4gID5cbiAgICA8YnV0dG9uXG4gICAgICBjbGFzcz1cInNlY29uZGFyeVwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlT25FZGl0QnRuQ2xpY2soJGV2ZW50KVwiXG4gICAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1mb290ZXItZWRpdC1idG5cIlxuICAgID5cbiAgICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cImVkaXRJY29uXCI+IDwvbmctdGVtcGxhdGU+XG4gICAgICB7eyBlZGl0QnRuVGV4dCB9fVxuICAgIDwvYnV0dG9uPlxuICA8L2Zvb3Rlcj5cblxuICA8Zm9vdGVyXG4gICAgY2xhc3M9XCJnZHMtaW4tcGFnZS13aXphcmQtc3RlcC1jYXJkX19mb290ZXIgZ2RzLWluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZF9fZm9vdGVyLS1uZXh0XCJcbiAgICAqbmdJZj1cImlzQWN0aXZlXCJcbiAgPlxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzPVwicHJpbWFyeVwiXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZU5leHRcIlxuICAgICAgKGNsaWNrKT1cImhhbmRsZU9uTmV4dEJ0bkNsaWNrKCRldmVudClcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCJpbi1wYWdlLXdpemFyZC1zdGVwLWNhcmQtbmV4dC1idG5cIlxuICAgID5cbiAgICAgIHt7IG5leHRCdG5UZXh0IH19XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwic2hvd05leHRCdG5JY29uXCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cIm5leHRJY29uXCI+IDwvbmctdGVtcGxhdGU+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2J1dHRvbj5cbiAgPC9mb290ZXI+XG48L3NlY3Rpb24+XG5cbjxuZy10ZW1wbGF0ZSAjZWRpdEljb24+XG4gIDxzdmdcbiAgICB2aWV3Qm94PVwiMCAwIDU3NiA1MTJcIlxuICAgIGNsYXNzPVwiZWRpdC1pY29uXCJcbiAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgICBmb2N1c2FibGU9XCJmYWxzZVwiXG4gID5cbiAgICA8cGF0aFxuICAgICAgZmlsbD1cInZhcigtLWNvbG9yKVwiXG4gICAgICBkPVwiTTQwMi4zIDM0NC45bDMyLTMyYzUtNSAxMy43LTEuNSAxMy43IDUuN1Y0NjRjMCAyNi41LTIxLjUgNDgtNDggNDhINDhjLTI2LjUgMC00OC0yMS41LTQ4LTQ4VjExMmMwLTI2LjUgMjEuNS00OCA0OC00OGgyNzMuNWM3LjEgMCAxMC43IDguNiA1LjcgMTMuN2wtMzIgMzJjLTEuNSAxLjUtMy41IDIuMy01LjcgMi4zSDQ4djM1MmgzNTJWMzUwLjVjMC0yLjEuOC00LjEgMi4zLTUuNnptMTU2LjYtMjAxLjhMMjk2LjMgNDA1LjdsLTkwLjQgMTBjLTI2LjIgMi45LTQ4LjUtMTkuMi00NS42LTQ1LjZsMTAtOTAuNEw0MzIuOSAxNy4xYzIyLjktMjIuOSA1OS45LTIyLjkgODIuNyAwbDQzLjIgNDMuMmMyMi45IDIyLjkgMjIuOSA2MCAuMSA4Mi44ek00NjAuMSAxNzRMNDAyIDExNS45IDIxNi4yIDMwMS44bC03LjMgNjUuMyA2NS4zLTcuM0w0NjAuMSAxNzR6bTY0LjgtNzkuN2wtNDMuMi00My4yYy00LjEtNC4xLTEwLjgtNC4xLTE0LjggMEw0MzYgODJsNTguMSA1OC4xIDMwLjktMzAuOWM0LTQuMiA0LTEwLjgtLjEtMTQuOXpcIlxuICAgID48L3BhdGg+XG4gIDwvc3ZnPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNuZXh0SWNvbj5cbiAgPHN2Z1xuICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgIGZpbGw9XCJub25lXCJcbiAgICBzdHJva2U9XCJjdXJyZW50Q29sb3JcIlxuICAgIHN0cm9rZS13aWR0aD1cIjFcIlxuICAgIGNsYXNzPVwibmV4dC1pY29uXCJcbiAgICBkYXRhLXRlc3RpZD1cImluLXBhZ2Utd2l6YXJkLXN0ZXAtY2FyZC1uZXh0LWljb25cIlxuICA+XG4gICAgPHBhdGggc3Ryb2tlPVwibm9uZVwiIGQ9XCJNMCAwaDI0djI0SDB6XCIgZmlsbD1cIm5vbmVcIiAvPlxuICAgIDxwYXRoIGQ9XCJNMTIgNWwwIDE0XCIgLz5cbiAgICA8cGF0aCBkPVwiTTE4IDEzbC02IDZcIiAvPlxuICAgIDxwYXRoIGQ9XCJNNiAxM2w2IDZcIiAvPlxuICA8L3N2Zz5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
|
|
@@ -11,12 +11,14 @@ class NggInPageWizardStepCardComponent {
|
|
|
11
11
|
this.title = '';
|
|
12
12
|
this.editBtnText = '';
|
|
13
13
|
this.nextBtnText = '';
|
|
14
|
+
this.showNextBtnIcon = true;
|
|
14
15
|
this.isCompleted = false;
|
|
15
16
|
this.disableNext = false;
|
|
16
17
|
this.isActive = false;
|
|
17
18
|
}
|
|
18
19
|
handleOnEditBtnClick(event) {
|
|
19
20
|
this.isActive = !this.isActive;
|
|
21
|
+
this.isCompleted = false;
|
|
20
22
|
this.handleEditClick.emit(event);
|
|
21
23
|
}
|
|
22
24
|
handleOnNextBtnClick(event) {
|
|
@@ -25,11 +27,11 @@ class NggInPageWizardStepCardComponent {
|
|
|
25
27
|
this.handleNextClick.emit(event);
|
|
26
28
|
}
|
|
27
29
|
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", 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 {{ 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
|
|
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"] }] }); }
|
|
29
31
|
}
|
|
30
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
31
33
|
type: Component,
|
|
32
|
-
args: [{ selector: 'ngg-in-page-wizard-step-card', 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 {{ 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
|
|
34
|
+
args: [{ selector: 'ngg-in-page-wizard-step-card', 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" }]
|
|
33
35
|
}], propDecorators: { handleNextClick: [{
|
|
34
36
|
type: Output
|
|
35
37
|
}], handleEditClick: [{
|
|
@@ -42,6 +44,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
42
44
|
type: Input
|
|
43
45
|
}], nextBtnText: [{
|
|
44
46
|
type: Input
|
|
47
|
+
}], showNextBtnIcon: [{
|
|
48
|
+
type: Input
|
|
45
49
|
}], isCompleted: [{
|
|
46
50
|
type: Input
|
|
47
51
|
}], disableNext: [{
|
|
@@ -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 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.handleEditClick.emit(event)\n }\n handleOnNextBtnClick(event: MouseEvent) {\n this.isActive = false\n this.isCompleted = true\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 {{ 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
|
|
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\n this.isCompleted = true\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,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;AAYjC,KAAA;AAVC,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,CAAC,QAAQ,GAAG,KAAK,CAAA;AACrB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;AACvB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KACjC;+GAlCU,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,qXCN7C,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,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;;;MEnBK,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;;;;"}
|
|
@@ -787,12 +787,14 @@ class NggInPageWizardStepCardComponent {
|
|
|
787
787
|
this.title = '';
|
|
788
788
|
this.editBtnText = '';
|
|
789
789
|
this.nextBtnText = '';
|
|
790
|
+
this.showNextBtnIcon = true;
|
|
790
791
|
this.isCompleted = false;
|
|
791
792
|
this.disableNext = false;
|
|
792
793
|
this.isActive = false;
|
|
793
794
|
}
|
|
794
795
|
handleOnEditBtnClick(event) {
|
|
795
796
|
this.isActive = !this.isActive;
|
|
797
|
+
this.isCompleted = false;
|
|
796
798
|
this.handleEditClick.emit(event);
|
|
797
799
|
}
|
|
798
800
|
handleOnNextBtnClick(event) {
|
|
@@ -801,11 +803,11 @@ class NggInPageWizardStepCardComponent {
|
|
|
801
803
|
this.handleNextClick.emit(event);
|
|
802
804
|
}
|
|
803
805
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
804
|
-
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", 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 {{ 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
|
|
806
|
+
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"] }] }); }
|
|
805
807
|
}
|
|
806
808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
807
809
|
type: Component,
|
|
808
|
-
args: [{ selector: 'ngg-in-page-wizard-step-card', 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 {{ 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
|
|
810
|
+
args: [{ selector: 'ngg-in-page-wizard-step-card', 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" }]
|
|
809
811
|
}], propDecorators: { handleNextClick: [{
|
|
810
812
|
type: Output
|
|
811
813
|
}], handleEditClick: [{
|
|
@@ -818,6 +820,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
818
820
|
type: Input
|
|
819
821
|
}], nextBtnText: [{
|
|
820
822
|
type: Input
|
|
823
|
+
}], showNextBtnIcon: [{
|
|
824
|
+
type: Input
|
|
821
825
|
}], isCompleted: [{
|
|
822
826
|
type: Input
|
|
823
827
|
}], disableNext: [{
|