@sebgroup/green-angular 2.0.3 → 2.1.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,21 +1,20 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, InjectionToken, Directive, Optional, Inject, ViewChild, HostListener, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef, Injector, ContentChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef, Directive, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken } from '@angular/core';
 import { randomId, months, years, createDatepicker, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
-import * as i2 from 'rxjs';
-import { Subject, fromEvent, interval } from 'rxjs';
-import { takeUntil, throttle } from 'rxjs/operators';
-import * as i2$1 from '@angular/forms';
+import { getScopedTagName } from '@sebgroup/green-core';
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
+import * as i2 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { startOfDay, endOfDay } from 'date-fns';
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
-import { getScopedTagName } from '@sebgroup/green-core';
 import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
+import { Subject, fromEvent, interval } from 'rxjs';
+import { takeUntil, throttle } from 'rxjs/operators';
 
 class NggAccordionListItemComponent {
     constructor() {
@@ -272,151 +271,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-const ON_SCROLL_TOKEN = new InjectionToken('ON_SCROLL_TOKEN');
-class NggOnScrollDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.onScroll$ = new Subject();
-        this.destroy$ = new Subject();
-    }
-    ngAfterViewInit() {
-        if (this.elementRef) {
-            fromEvent(this.elementRef?.nativeElement, 'scroll')
-                .pipe(takeUntil(this.destroy$), throttle(() => interval(30)))
-                .subscribe(() => {
-                this.onScroll$.next();
-            });
-        }
+class NggCoreElementDirective {
+    constructor() {
+        this.viewRef = null;
+        this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.vcr = inject(ViewContainerRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.template = inject((TemplateRef));
     }
-    ngOnDestroy() {
-        this.destroy$.next(null);
-        this.destroy$.complete();
+    ngOnInit() {
+        this.vcr.clear();
+        const originalCreateElement = this.renderer.createElement;
+        this.renderer.createElement = (name, _namespace) => {
+            return this.document.createElement(getScopedTagName(name));
+        };
+        this.viewRef = this.vcr.createEmbeddedView(this.template);
+        this.renderer.createElement = originalCreateElement;
+        this.cdr.markForCheck();
     }
 }
-NggOnScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggOnScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggOnScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggOnScrollDirective, selector: "[nggOnScroll]", providers: [
-        {
-            provide: ON_SCROLL_TOKEN,
-            useFactory: (component) => component?.onScroll$,
-            deps: [NggOnScrollDirective],
-        },
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggOnScrollDirective, decorators: [{
+NggCoreElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NggCoreElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggCoreElementDirective, selector: "[nggCoreElement]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[nggOnScroll]',
-                    providers: [
-                        {
-                            provide: ON_SCROLL_TOKEN,
-                            useFactory: (component) => component?.onScroll$,
-                            deps: [NggOnScrollDirective],
-                        },
-                    ],
+                    selector: '[nggCoreElement]',
                 }]
-        }], 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;
+    constructor(elementRef) {
         this.elementRef = elementRef;
-        this.closeContextMenu = closeContextMenu;
+        /**
+         * Placement of the popover relative to the anchor element.
+         */
         this.direction = 'ltr';
+        /**
+         * List of items to be displayed in the context menu.
+         */
         this.menuItems = [];
+        /**
+         * Custom menu item template.
+         */
         this.menuItemTemplate = null;
+        /**
+         * Custom menu trigger template.
+         */
         this.menuAnchorTemplate = null;
+        /**
+         * @deprecated
+         * This property no longer has any effect and will be removed in a future version.
+         */
         this.closeOnScroll = false;
+        /**
+         * Emits when a menu item is clicked.
+         */
         this.contextMenuItemClicked = new EventEmitter();
         this.isActive = false;
-        this.top = CONTEXT_MENU_TOP;
-        this.left = CONTEXT_MENU_LEFT;
-    }
-    onDocumentClick(target) {
-        if (!this.isActive) {
-            return;
-        }
-        if (!this.elementRef.nativeElement.contains(target)) {
-            this.close();
-        }
-    }
-    ngOnInit() {
-        this.resizeObserver = new ResizeObserver(() => {
-            this.close();
-        });
-        this.resizeObserver.observe(document.body);
-    }
-    ngAfterViewInit() {
-        if (this.closeOnScroll) {
-            this.menuCloseSubscription = this.closeContextMenu?.subscribe(() => this.close());
-        }
+        registerTransitionalStyles();
     }
-    ngOnDestroy() {
-        this.resizeObserver?.unobserve(document.body);
-        this.menuCloseSubscription?.unsubscribe();
+    get placement() {
+        return this.direction === 'ltr' ? 'bottom-start' : 'bottom-end';
     }
     open() {
         if (this.isActive) {
             this.close();
             return;
         }
-        const buttonRect = this.anchor?.nativeElement.getBoundingClientRect();
-        const gapBetweenButtonAndPopover = 3;
-        const left = this.calculateLeft(this.direction, buttonRect);
-        const top = buttonRect.bottom + gapBetweenButtonAndPopover;
-        this.left = `${left}px`;
-        this.top = `${top}px`;
         this.isActive = true;
     }
     close() {
         this.isActive = false;
-        this.top = CONTEXT_MENU_TOP;
-        this.left = CONTEXT_MENU_LEFT;
-        this.changeDetectorRef.markForCheck();
     }
     onItemClick(item) {
         this.contextMenuItemClicked.emit(item);
         this.close();
     }
-    onMenuItemKeyDown(event, menuItem) {
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                this.onItemClick(menuItem);
-                break;
-            default:
-                break;
-        }
-    }
-    calculateLeft(direction, buttonRect) {
-        const popover = this.popover?.nativeElement;
-        const popoverWidth = popover?.offsetWidth || 0;
-        switch (direction) {
-            case 'rtl':
-                return popoverWidth <= buttonRect.left
-                    ? buttonRect.right - popoverWidth
-                    : buttonRect.left;
-            case 'ltr':
-            default:
-                return buttonRect.right + popoverWidth <= window.innerWidth
-                    ? buttonRect.left
-                    : buttonRect.right - popoverWidth;
-        }
-    }
 }
-NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ON_SCROLL_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<button\n  #contextMenuAnchor\n  class=\"ghost small px-3 border-0\"\n  [class.active]=\"isActive\"\n  (click)=\"open()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\n<div class=\"context-menu-overlay\">\n  <div\n    class=\"popover popover-context-menu\"\n    [class.active]=\"isActive\"\n    [style.top]=\"top\"\n    [style.left]=\"left\"\n    #contextMenuPopover\n  >\n    <ul role=\"listbox\">\n      <li\n        *ngFor=\"let menuItem of menuItems\"\n        (click)=\"onItemClick(menuItem)\"\n        tabindex=\"0\"\n        (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n        >\n        </ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<gds-context-menu\n  *nggCoreElement\n  data-testid=\"context-menu\"\n  [placement]=\"placement\"\n  [open]=\"isActive\"\n>\n  <span slot=\"trigger\">\n    <ng-container\n      [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n    >\n    </ng-container>\n  </span>\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <gds-menu-item *nggCoreElement (click)=\"onItemClick(menuItem)\">\n      <ng-container\n        [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n      >\n      </ng-container>\n    </gds-menu-item>\n  </ng-container>\n</gds-context-menu>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-context-menu', template: "<button\n  #contextMenuAnchor\n  class=\"ghost small px-3 border-0\"\n  [class.active]=\"isActive\"\n  (click)=\"open()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\n<div class=\"context-menu-overlay\">\n  <div\n    class=\"popover popover-context-menu\"\n    [class.active]=\"isActive\"\n    [style.top]=\"top\"\n    [style.left]=\"left\"\n    #contextMenuPopover\n  >\n    <ul role=\"listbox\">\n      <li\n        *ngFor=\"let menuItem of menuItems\"\n        (click)=\"onItemClick(menuItem)\"\n        tabindex=\"0\"\n        (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n        >\n        </ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.Subject, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ON_SCROLL_TOKEN]
-                }] }]; }, propDecorators: { direction: [{
+            args: [{ selector: 'ngg-context-menu', template: "<gds-context-menu\n  *nggCoreElement\n  data-testid=\"context-menu\"\n  [placement]=\"placement\"\n  [open]=\"isActive\"\n>\n  <span slot=\"trigger\">\n    <ng-container\n      [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n    >\n    </ng-container>\n  </span>\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <gds-menu-item *nggCoreElement (click)=\"onItemClick(menuItem)\">\n      <ng-container\n        [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n      >\n      </ng-container>\n    </gds-menu-item>\n  </ng-container>\n</gds-context-menu>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { direction: [{
                 type: Input
             }], menuItems: [{
                 type: Input
@@ -434,22 +372,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], anchor: [{
                 type: ViewChild,
                 args: ['contextMenuAnchor']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
             }] } });
 
+class NggCoreWrapperModule {
+}
+NggCoreWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggCoreWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, declarations: [NggCoreElementDirective], imports: [CommonModule], exports: [NggCoreElementDirective] });
+NggCoreWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggCoreElementDirective],
+                    imports: [CommonModule],
+                    exports: [NggCoreElementDirective],
+                }]
+        }] });
+
 class NggContextMenuModule {
 }
 NggContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule], exports: [NggContextMenuComponent] });
-NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule] });
+NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule, NggCoreWrapperModule], exports: [NggContextMenuComponent] });
+NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule, NggCoreWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggContextMenuComponent],
-                    imports: [CommonModule],
+                    imports: [CommonModule, NggCoreWrapperModule],
                     exports: [NggContextMenuComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
 
@@ -481,35 +431,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class NggCoreElementDirective {
-    constructor() {
-        this.viewRef = null;
-        this.document = inject(DOCUMENT);
-        this.renderer = inject(Renderer2);
-        this.vcr = inject(ViewContainerRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.template = inject((TemplateRef));
-    }
-    ngOnInit() {
-        this.vcr.clear();
-        const originalCreateElement = this.renderer.createElement;
-        this.renderer.createElement = (name, _namespace) => {
-            return this.document.createElement(getScopedTagName(name));
-        };
-        this.viewRef = this.vcr.createEmbeddedView(this.template);
-        this.renderer.createElement = originalCreateElement;
-        this.cdr.markForCheck();
-    }
-}
-NggCoreElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NggCoreElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggCoreElementDirective, selector: "[nggCoreElement]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[nggCoreElement]',
-                }]
-        }] });
-
 class NggDropdownComponent {
     constructor(injector, _cdr) {
         this.injector = injector;
@@ -636,7 +557,7 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span>{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-dropdown', providers: [
@@ -645,7 +566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: NggDropdownComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span>{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
                     type: Inject,
                     args: [Injector]
@@ -885,20 +806,6 @@ function dateValidator(dates) {
     };
 }
 
-class NggCoreWrapperModule {
-}
-NggCoreWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggCoreWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, declarations: [NggCoreElementDirective], imports: [CommonModule], exports: [NggCoreElementDirective] });
-NggCoreWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NggCoreElementDirective],
-                    imports: [CommonModule],
-                    exports: [NggCoreElementDirective],
-                }]
-        }] });
-
 class NggDropdownModule {
 }
 NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1120,10 +1027,10 @@ class NggModalComponent {
     }
 }
 NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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 });
+NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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)}: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: "15.2.9", 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        <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"] }]
+            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)}: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: [{
@@ -1178,7 +1085,7 @@ NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <span className="sr-only">Close</span>
         <i></i>
     </button>
-    `, isInline: true, 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"] });
+    `, isInline: true, 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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngg-modal-header]', template: `
@@ -1187,7 +1094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         <span className="sr-only">Close</span>
         <i></i>
     </button>
-    `, 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"] }]
+    `, 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"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], closed: [{
@@ -1196,10 +1103,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 class NggModalBodyComponent {
 }
 NggModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalBodyComponent, selector: "[ngg-modal-body]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, 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"] });
+NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalBodyComponent, selector: "[ngg-modal-body]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, 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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ngg-modal-body]', template: `<ng-content></ng-content>`, 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-body]', template: `<ng-content></ng-content>`, 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"] }]
         }] });
 class NggModalFooterComponent {
     constructor() {
@@ -1217,13 +1124,13 @@ NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalFooterComponent, selector: "[ngg-modal-footer]", inputs: { dismissLabel: "dismissLabel", confirmLabel: "confirmLabel" }, outputs: { dismiss: "dismiss", confirm: "confirm" }, ngImport: i0, template: `
     <button data-testid="modal-dismiss-button" *ngIf="dismissLabel" class="secondary" (click)="this.handleDismiss($event)">{{dismissLabel}}</button>
     <button data-testid="modal-confirm-button" *ngIf="confirmLabel" class="primary" (click)="this.handleConfirm($event)">{{confirmLabel}}</button>
-    `, isInline: true, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngg-modal-footer]', template: `
     <button data-testid="modal-dismiss-button" *ngIf="dismissLabel" class="secondary" (click)="this.handleDismiss($event)">{{dismissLabel}}</button>
     <button data-testid="modal-confirm-button" *ngIf="confirmLabel" class="primary" (click)="this.handleConfirm($event)">{{confirmLabel}}</button>
-    `, 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"] }]
+    `, 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"] }]
         }], propDecorators: { dismissLabel: [{
                 type: Input
             }], confirmLabel: [{
@@ -1364,6 +1271,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+const ON_SCROLL_TOKEN = new InjectionToken('ON_SCROLL_TOKEN');
+class NggOnScrollDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.onScroll$ = new Subject();
+        this.destroy$ = new Subject();
+    }
+    ngAfterViewInit() {
+        if (this.elementRef) {
+            fromEvent(this.elementRef?.nativeElement, 'scroll')
+                .pipe(takeUntil(this.destroy$), throttle(() => interval(30)))
+                .subscribe(() => {
+                this.onScroll$.next();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(null);
+        this.destroy$.complete();
+    }
+}
+NggOnScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggOnScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggOnScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggOnScrollDirective, selector: "[nggOnScroll]", providers: [
+        {
+            provide: ON_SCROLL_TOKEN,
+            useFactory: (component) => component?.onScroll$,
+            deps: [NggOnScrollDirective],
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggOnScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggOnScroll]',
+                    providers: [
+                        {
+                            provide: ON_SCROLL_TOKEN,
+                            useFactory: (component) => component?.onScroll$,
+                            deps: [NggOnScrollDirective],
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 class NggSharedModule {
 }
 NggSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1443,7 +1393,7 @@ NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             useExisting: NggSliderComponent,
             multi: true,
         },
-    ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\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"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\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"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-slider', providers: [