@sebgroup/green-angular 1.8.4 → 1.9.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -313,6 +313,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
+const CONTEXT_MENU_TOP = '0px';
+const CONTEXT_MENU_LEFT = '0px';
+
 class NggContextMenuComponent {
     constructor(changeDetectorRef, elementRef, closeContextMenu) {
         this.changeDetectorRef = changeDetectorRef;
@@ -325,15 +328,14 @@ class NggContextMenuComponent {
         this.closeOnScroll = false;
         this.contextMenuItemClicked = new EventEmitter();
         this.isActive = false;
-        this.top = '0px';
-        this.left = '0px';
+        this.top = CONTEXT_MENU_TOP;
+        this.left = CONTEXT_MENU_LEFT;
     }
     onDocumentClick(target) {
         if (!this.isActive) {
             return;
         }
-        const contextMenuElement = this.elementRef.nativeElement;
-        if (!contextMenuElement.contains(target)) {
+        if (!this.elementRef.nativeElement.contains(target)) {
             this.close();
         }
     }
@@ -357,8 +359,7 @@ class NggContextMenuComponent {
             this.close();
             return;
         }
-        const anchor = this.anchor?.nativeElement;
-        const buttonRect = anchor.getBoundingClientRect();
+        const buttonRect = this.anchor?.nativeElement.getBoundingClientRect();
         const gapBetweenButtonAndPopover = 3;
         const left = this.calculateLeft(this.direction, buttonRect);
         const top = buttonRect.bottom + gapBetweenButtonAndPopover;
@@ -368,6 +369,8 @@ class NggContextMenuComponent {
     }
     close() {
         this.isActive = false;
+        this.top = CONTEXT_MENU_TOP;
+        this.left = CONTEXT_MENU_LEFT;
         this.changeDetectorRef.markForCheck();
     }
     onItemClick(item) {
@@ -944,6 +947,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class NggModalHeaderDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+NggModalHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalHeaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggModalHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggModalHeaderDirective, selector: "[nggModalHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggModalHeader]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+class NggModalFooterDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+NggModalFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalFooterDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggModalFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggModalFooterDirective, selector: "[nggModalFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggModalFooter]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
 class NggModalComponent {
     constructor(ref, configurableFocusTrapFactory) {
         this.ref = ref;
@@ -977,7 +1008,12 @@ class NggModalComponent {
             if (this.trapFocus) {
                 this.enableFocusTrap();
             }
-            disableBodyScroll(this.ref.nativeElement);
+            disableBodyScroll(this.ref.nativeElement, {
+                allowTouchMove: (el) => {
+                    // Allow touchmove for elements inside modal, its required for scroll to work on iOS devices
+                    return this.ref.nativeElement.contains(el);
+                }
+            });
         }
         else {
             this.disableFocusTrap();
@@ -1030,10 +1066,10 @@ class NggModalComponent {
     }
 }
 NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
-NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}: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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", 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    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n        <ng-container *ngIf=\"!hideHeader\">\n            <header *ngIf=\"!modalHeaderContent; else headerContentTemplate\" ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></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 *ngIf=\"!modalFooterContent; else footerContentTemplate\" ngg-modal-footer data-testid=\"modal-footer\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></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 #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></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-backdrop)}: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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}: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"] }]
+            args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n        <ng-container *ngIf=\"!hideHeader\">\n            <header *ngIf=\"!modalHeaderContent; else headerContentTemplate\" ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></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 *ngIf=\"!modalFooterContent; else footerContentTemplate\" ngg-modal-footer data-testid=\"modal-footer\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></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 #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></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-backdrop)}: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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
                 type: Input
             }], header: [{
@@ -1044,6 +1080,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], size: [{
                 type: Input
+            }], hideHeader: [{
+                type: Input
+            }], hideFooter: [{
+                type: Input
             }], trapFocus: [{
                 type: Input
             }], isOpen: [{
@@ -1062,6 +1102,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], backdropRef: [{
                 type: ViewChild,
                 args: ['backdrop']
+            }], modalHeaderContent: [{
+                type: ContentChild,
+                args: [NggModalHeaderDirective]
+            }], modalFooterContent: [{
+                type: ContentChild,
+                args: [NggModalFooterDirective]
             }] } });
 class NggModalHeaderComponent {
     constructor() {
@@ -1138,10 +1184,14 @@ const DECLARATIONS = [
     NggModalComponent,
     NggModalHeaderComponent,
     NggModalBodyComponent,
-    NggModalFooterComponent
+    NggModalFooterComponent,
+    NggModalHeaderDirective,
+    NggModalFooterDirective
 ];
 const EXPORTS = [
     NggModalComponent,
+    NggModalHeaderDirective,
+    NggModalFooterDirective
 ];
 class NggModalModule {
 }
@@ -1149,7 +1199,11 @@ NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
         NggModalHeaderComponent,
         NggModalBodyComponent,
-        NggModalFooterComponent], imports: [A11yModule, CommonModule], exports: [NggModalComponent] });
+        NggModalFooterComponent,
+        NggModalHeaderDirective,
+        NggModalFooterDirective], imports: [A11yModule, CommonModule], exports: [NggModalComponent,
+        NggModalHeaderDirective,
+        NggModalFooterDirective] });
 NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, imports: [A11yModule, CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, decorators: [{
             type: NgModule,
@@ -1627,5 +1681,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggContextMenuComponent, NggContextMenuModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, ON_SCROLL_TOKEN, dateValidator };
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggContextMenuComponent, NggContextMenuModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, ON_SCROLL_TOKEN, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map