@sebgroup/green-angular 4.4.0 → 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/lib/modal/modal.component.mjs +5 -3
- package/esm2022/src/lib/in-page-wizard/in-page-wizard-step-card.component.mjs +11 -4
- package/esm2022/src/lib/modal/modal.component.mjs +5 -3
- 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-src-lib-modal.mjs +4 -2
- package/fesm2022/sebgroup-green-angular-src-lib-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular.mjs +14 -5
- 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/lib/modal/modal.component.d.ts +1 -0
- package/package.json +4 -4
- package/src/lib/in-page-wizard/in-page-wizard-step-card.component.d.ts +2 -1
- package/src/lib/modal/modal.component.d.ts +1 -0
|
@@ -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: [{
|
|
@@ -935,9 +942,11 @@ class NggModalComponent {
|
|
|
935
942
|
this.closed = new EventEmitter();
|
|
936
943
|
this.confirm = new EventEmitter();
|
|
937
944
|
this.dismiss = new EventEmitter();
|
|
945
|
+
this.guid = '';
|
|
938
946
|
this.configurableFocusTrap = this.configurableFocusTrapFactory.create(this.ref.nativeElement);
|
|
939
947
|
}
|
|
940
948
|
ngOnInit() {
|
|
949
|
+
this.guid = globalThis.crypto.randomUUID();
|
|
941
950
|
if (this._isOpen && this.trapFocus)
|
|
942
951
|
this.enableFocusTrap();
|
|
943
952
|
else
|
|
@@ -981,7 +990,7 @@ class NggModalComponent {
|
|
|
981
990
|
enableBodyScroll(this.ref.nativeElement);
|
|
982
991
|
}
|
|
983
992
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", disableBodyScroll: "disableBodyScroll", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], animations: [
|
|
993
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", disableBodyScroll: "disableBodyScroll", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n [attr.id]=\"'modal-header-' + guid\"\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], animations: [
|
|
985
994
|
trigger('modalAnimation', [
|
|
986
995
|
transition(':enter', [
|
|
987
996
|
query('aside', style({ transform: 'translateX(100%)' }), {
|
|
@@ -1033,7 +1042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1033
1042
|
]),
|
|
1034
1043
|
]),
|
|
1035
1044
|
]),
|
|
1036
|
-
], template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1045
|
+
], template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n [attr.id]=\"'modal-header-' + guid\"\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1037
1046
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
|
|
1038
1047
|
type: Input
|
|
1039
1048
|
}], header: [{
|