@sebgroup/green-angular 1.9.0 → 2.0.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,14 +1,16 @@
 import * as i1 from '@angular/common';
-import { CommonModule } 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, Injector, ContentChild } from '@angular/core';
-import { randomId, dropdownValues, createDropdown, months, years, createDatepicker, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
+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 { 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 { 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';
@@ -43,9 +45,9 @@ class NggAccordionListItemComponent {
         this.expandedChange.emit(this);
     }
 }
-NggAccordionListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggAccordionListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggAccordionListItemComponent, selector: "div[ngg-accordion-list-item]", inputs: { id: "id", listItemHeader: "listItemHeader", listItemSubHeader: "listItemSubHeader" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<ng-container data-testid=\"accordion-list-item-root\">\n    <div role=\"heading\" aria-level=\"2\" [attr.id]=\"id\">\n        <button data-testid=\"accordion-list-item-expander-button\" [attr.id]=\"id + '_header'\" (click)=\"toggleExpanded()\"\n            tabindex=\"0\" [attr.aria-expanded]=\"this.isExpanded\" [attr.aria-controls]=\"id + '_section'\">\n            <span data-testid=\"accordion-list-item-header\">{{listItemHeader}}</span>\n            <span data-testid=\"accordion-list-item-subheader\">{{listItemSubHeader}}</span>\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z\"\n                    fill=\"#333333\" />\n            </svg>\n        </button>\n        <div role=\"region\" [hidden]=\"!this.isExpanded\"\n            [ngStyle]=\"{height: this.contentHeight}\" [id]=\"id + '_section'\" [attr.aria-labelledby]=\"id + '_header'\"\n            data-testid=\"accordion-list-item-content\">\n            <div>\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionListItemComponent, decorators: [{
+NggAccordionListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggAccordionListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggAccordionListItemComponent, selector: "div[ngg-accordion-list-item]", inputs: { id: "id", listItemHeader: "listItemHeader", listItemSubHeader: "listItemSubHeader" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<ng-container data-testid=\"accordion-list-item-root\">\n    <div role=\"heading\" aria-level=\"2\" [attr.id]=\"id\">\n        <button data-testid=\"accordion-list-item-expander-button\" [attr.id]=\"id + '_header'\" (click)=\"toggleExpanded()\"\n            tabindex=\"0\" [attr.aria-expanded]=\"this.isExpanded\" [attr.aria-controls]=\"id + '_section'\">\n            <span data-testid=\"accordion-list-item-header\">{{listItemHeader}}</span>\n            <span data-testid=\"accordion-list-item-subheader\">{{listItemSubHeader}}</span>\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z\"\n                    fill=\"#333333\" />\n            </svg>\n        </button>\n        <div role=\"region\" [hidden]=\"!this.isExpanded\"\n            [ngStyle]=\"{height: this.contentHeight}\" [id]=\"id + '_section'\" [attr.aria-labelledby]=\"id + '_header'\"\n            data-testid=\"accordion-list-item-content\">\n            <div>\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[ngg-accordion-list-item]', template: "<ng-container data-testid=\"accordion-list-item-root\">\n    <div role=\"heading\" aria-level=\"2\" [attr.id]=\"id\">\n        <button data-testid=\"accordion-list-item-expander-button\" [attr.id]=\"id + '_header'\" (click)=\"toggleExpanded()\"\n            tabindex=\"0\" [attr.aria-expanded]=\"this.isExpanded\" [attr.aria-controls]=\"id + '_section'\">\n            <span data-testid=\"accordion-list-item-header\">{{listItemHeader}}</span>\n            <span data-testid=\"accordion-list-item-subheader\">{{listItemSubHeader}}</span>\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z\"\n                    fill=\"#333333\" />\n            </svg>\n        </button>\n        <div role=\"region\" [hidden]=\"!this.isExpanded\"\n            [ngStyle]=\"{height: this.contentHeight}\" [id]=\"id + '_section'\" [attr.aria-labelledby]=\"id + '_header'\"\n            data-testid=\"accordion-list-item-content\">\n            <div>\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</ng-container>" }]
         }], propDecorators: { id: [{
@@ -113,9 +115,9 @@ class NggAccordionComponent {
         }
     }
 }
-NggAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggAccordionComponent, selector: "ngg-accordion", inputs: { closeOthers: "closeOthers", expandAll: "expandAll" }, queries: [{ propertyName: "items", predicate: NggAccordionListItemComponent }], ngImport: i0, template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n    <ng-content></ng-content>\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionComponent, decorators: [{
+NggAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggAccordionComponent, selector: "ngg-accordion", inputs: { closeOthers: "closeOthers", expandAll: "expandAll" }, queries: [{ propertyName: "items", predicate: NggAccordionListItemComponent }], ngImport: i0, template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n    <ng-content></ng-content>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: "ngg-accordion", template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { items: [{
@@ -129,10 +131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggAccordionModule {
 }
-NggAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionModule, declarations: [NggAccordionListItemComponent, NggAccordionComponent], imports: [CommonModule], exports: [NggAccordionListItemComponent, NggAccordionComponent] });
-NggAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggAccordionModule, decorators: [{
+NggAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionModule, declarations: [NggAccordionListItemComponent, NggAccordionComponent], imports: [CommonModule], exports: [NggAccordionListItemComponent, NggAccordionComponent] });
+NggAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -168,8 +170,8 @@ class NggBadgeComponent {
         this.handleClose.emit(e);
     }
 }
-NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { badgeType: "badgeType", isCloseable: "isCloseable", closeText: "closeText", customColor: "customColor", customBackgroundColor: "customBackgroundColor" }, outputs: { handleClose: "handleClose" }, host: { properties: { "style.color": "this.customColor", "style.background-color": "this.customBackgroundColor", "class": "this.class" } }, ngImport: i0, template: `
+NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { badgeType: "badgeType", isCloseable: "isCloseable", closeText: "closeText", customColor: "customColor", customBackgroundColor: "customBackgroundColor" }, outputs: { handleClose: "handleClose" }, host: { properties: { "style.color": "this.customColor", "style.background-color": "this.customBackgroundColor", "class": "this.class" } }, ngImport: i0, template: `
     <strong>
       <ng-content></ng-content>
     </strong>
@@ -178,7 +180,7 @@ NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
       <i></i>
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggBadgeComponent, decorators: [{
             type: Component,
             args: [{
                     // we need to disable this warning since we don't want the badge component to create a new element
@@ -220,10 +222,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggBadgeModule {
 }
-NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
-NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggBadgeModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggBadgeModule, decorators: [{
+NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
+NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggBadgeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggBadgeComponent],
@@ -237,9 +239,9 @@ class NggButtonComponent {
         return [this.variant, this.size ? this.size : false].filter(Boolean).join(" ");
     }
 }
-NggButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggButtonComponent, selector: "[ngg-button]", inputs: { variant: "variant", size: "size" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggButtonComponent, decorators: [{
+NggButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggButtonComponent, selector: "[ngg-button]", inputs: { variant: "variant", size: "size" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggButtonComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -258,10 +260,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggButtonModule {
 }
-NggButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggButtonModule, declarations: [NggButtonComponent], imports: [CommonModule], exports: [NggButtonComponent] });
-NggButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggButtonModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggButtonModule, decorators: [{
+NggButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggButtonModule, declarations: [NggButtonComponent], imports: [CommonModule], exports: [NggButtonComponent] });
+NggButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggButtonModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggButtonComponent],
@@ -291,15 +293,15 @@ class NggOnScrollDirective {
         this.destroy$.complete();
     }
 }
-NggOnScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggOnScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggOnScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggOnScrollDirective, selector: "[nggOnScroll]", providers: [
+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: "14.3.0", ngImport: i0, type: NggOnScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggOnScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nggOnScroll]',
@@ -404,9 +406,9 @@ class NggContextMenuComponent {
         }
     }
 }
-NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", 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: "14.3.0", 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\"\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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, decorators: [{
+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\"\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"] }] });
+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\"\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: [{
@@ -439,10 +441,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggContextMenuModule {
 }
-NggContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule], exports: [NggContextMenuComponent] });
-NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, decorators: [{
+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] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggContextMenuComponent],
@@ -456,9 +458,9 @@ class NggDropdownOptionDirective {
         this.templateRef = templateRef;
     }
 }
-NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
+NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nggDropdownOption]',
@@ -470,78 +472,141 @@ class NggDropdownButtonDirective {
         this.templateRef = templateRef;
     }
 }
-NggDropdownButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownButtonDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggDropdownButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggDropdownButtonDirective, selector: "[nggDropdownButton]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownButtonDirective, decorators: [{
+NggDropdownButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownButtonDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggDropdownButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownButtonDirective, selector: "[nggDropdownButton]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nggDropdownButton]',
                 }]
         }], 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(cd, injector) {
-        this.cd = cd;
+    constructor(injector) {
         this.injector = injector;
         this.loop = false;
+        this.display = 'label';
+        this.useValue = 'value';
         this.options = [];
         this._multiSelect = false;
         this._searchable = false;
         this.valueChange = new EventEmitter();
         this.touched = new EventEmitter();
-        this.toggler = dropdownValues().elements?.toggler;
-        this.listbox = dropdownValues().elements?.listbox;
-        this.fieldset = dropdownValues().elements?.fieldset;
-        this.trackByKey = (index, option) => {
-            return option.attributes.id ?? '';
+        this.onValueChange = (event) => {
+            const target = event.target;
+            this._value = target.value;
+            this.texts = {
+                ...this.texts,
+                select: this.getDisplayText(this._value),
+            };
+            this.onChangeFn?.(this.value);
+            this.valueChange.emit(this.value);
         };
+        // These adapter functions are used to maintain backwards compatibility with the old interface
+        this.compareWithAdapter = (o1, o2) => {
+            const compareFn = this.compareWith || ((a, b) => a === b);
+            return compareFn(o1, o2);
+        };
+        this.searchFilterAdapter = (q, o) => {
+            if (this.searchFilter)
+                return this.searchFilter(q, o.value[this.useValue]);
+            else
+                return ((q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase()))(q, o);
+        };
+        this.optionByValue = (value) => {
+            return this.options?.find((o) => o[this.useValue] === value);
+        };
+        this.getDisplayText = (value) => {
+            if (!Array.isArray(value))
+                return (this.optionByValue(value)?.[this.display] ||
+                    (this.texts?.placeholder ?? 'Select'));
+            const displayValues = value.map((v) => this.optionByValue(v)?.[this.display]);
+            return displayValues?.length > 2
+                ? `${displayValues.length} ${this.texts?.selected} `
+                : displayValues?.join(', ') || (this.texts?.placeholder ?? 'Select');
+        };
+        registerTransitionalStyles();
     }
+    //
     set multiSelect(value) {
         this._multiSelect = this.convertToBoolean(value);
     }
     get multiSelect() {
         return this._multiSelect;
     }
+    //
     set searchable(value) {
         this._searchable = this.convertToBoolean(value);
     }
     get searchable() {
         return this._searchable;
     }
+    //
     set value(newValue) {
-        this.handler?.selectByValue(newValue);
+        if (!this.options)
+            return;
         this._value = newValue;
+        this.texts = {
+            ...this.texts,
+            select: this.getDisplayText(this._value),
+        };
     }
     get value() {
         return this._value;
     }
+    //
     get selectedOption() {
-        return this.handler?.dropdown.options.find((o) => o.selected);
+        return this.value;
     }
     get control() {
         return this.injector.get(NgControl);
     }
     ngAfterViewInit() {
-        if (this.togglerRef?.nativeElement && this.listboxRef?.nativeElement) {
-            this.handler = createDropdown(this.props, this.togglerRef.nativeElement, this.listboxRef.nativeElement, this.fieldsetRef?.nativeElement, (dropdown) => {
-                this.dropdown = dropdown;
-                this.toggler = dropdown.elements.toggler;
-                this.listbox = dropdown.elements.listbox;
-                this.fieldset = dropdown.elements.fieldset;
-                this.cd.detectChanges();
-            }, (value) => {
-                this.updateValue(value);
-            }, this.fixedPlacement);
-        }
-    }
-    ngOnDestroy() {
-        this.handler?.destroy();
-    }
-    ngOnChanges(changes) {
-        if (this.handler &&
-            (changes.id || changes.texts || changes.loop || changes.options)) {
-            this.handler.update(this.props);
+        if (!this._value) {
+            if (this.multiSelect)
+                this._value = this.options
+                    ?.filter((o) => o.selected === true)
+                    ?.map((o) => o[this.useValue]);
+            else
+                this._value = this.options?.find((o) => o.selected === true)?.[this.useValue];
         }
+        this.texts = {
+            close: this.texts?.close ?? 'Close',
+            optionsDescription: this.texts?.optionsDescription ?? 'Options',
+            placeholder: this.texts?.placeholder ?? 'Select',
+            searchPlaceholder: this.texts?.searchPlaceholder ?? 'Search',
+            selected: this.texts?.selected ?? 'selected',
+            select: this.getDisplayText(this._value),
+        };
     }
     writeValue(value) {
         this.value = value;
@@ -552,47 +617,19 @@ class NggDropdownComponent {
     registerOnTouched(fn) {
         this.onTouchedFn = fn;
     }
-    search($event) {
-        this.handler?.search($event.target.value);
-    }
-    get props() {
-        return {
-            id: this.id || this.dropdown?.id,
-            texts: this.texts,
-            useValue: this.useValue,
-            display: this.display,
-            options: this.options,
-            loop: this.loop,
-            value: this.value,
-            multiSelect: this.multiSelect,
-            searchable: this.searchable,
-            searchFilter: this.searchFilter,
-            compareWith: this.compareWith,
-            onTouched: () => {
-                this.onTouchedFn?.();
-                this.touched.emit(true);
-                this.cd.markForCheck();
-            },
-        };
-    }
-    updateValue(option) {
-        this._value = option;
-        this.valueChange.emit(option);
-        this.onChangeFn?.(option);
-    }
     convertToBoolean(value) {
         return (value === '' || value === 'true' || value.toString() === 'true' || false);
     }
 }
-NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: Injector }], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", fixedPlacement: "fixedPlacement", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
+NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }], target: i0.ɵɵFactoryTarget.Component });
+NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", fixedPlacement: "fixedPlacement", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n        ? toggler?.attributes?.id + '_info'\n        : null\n    \"\n    type=\"button\"\n    role=\"combobox\"\n    #togglerRef\n    [id]=\"toggler?.attributes?.id\"\n    [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n    [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n    [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n    [tabindex]=\"toggler?.attributes?.tabIndex\"\n    [style]=\"toggler?.attributes?.style\"\n    [class]=\"toggler?.classes\"\n    (click)=\"handler?.toggle()\"\n    [class.is-valid]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        customButton?.templateRef && !multiSelect && selectedOption\n          ? customButton!.templateRef\n          : defaultButton;\n        context: { option: selectedOption }\n      \"\n    ></ng-container>\n  </button>\n  <span\n    class=\"form-info\"\n    #formInfo\n    [attr.id]=\"toggler?.attributes?.id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n  <div\n    #listboxRef\n    [id]=\"listbox?.attributes?.id\"\n    [attr.role]=\"listbox?.attributes?.role\"\n    [attr.aria-activedescendant]=\"\n        listbox?.attributes?.['aria-activedescendant']\n      \"\n    [tabindex]=\"listbox?.attributes?.tabIndex\"\n    [style]=\"listbox?.attributes?.style\"\n    [class]=\"listbox?.classes\"\n  >\n    <div class=\"d-flex d-sm-none align-items-center\">\n      <span class=\"flex-grow-1 ps-4 fs-2 fw-bolder\">{{ label }}</span>\n      <button\n        type=\"button\"\n        class=\"close m-4 m-sm-2 d-block d-sm-none\"\n        [attr.aria-label]=\"dropdown?.texts?.close\"\n        (click)=\"handler?.close()\"\n      >\n        <i></i>\n      </button>\n    </div>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\n        [id]=\"option.attributes.id\"\n        [attr.role]=\"option.attributes.role\"\n        [attr.aria-selected]=\"option.attributes['aria-selected']\"\n        [style]=\"option.attributes.style\"\n        [class]=\"option.classes\"\n        (click)=\"handler?.select(option)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <!--TODO: Improve checkboxes in dropdown angular-->\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <label\n          class=\"form-control\"\n          [attr.role]=\"option.attributes.role\"\n          [id]=\"option.attributes.id\"\n          [attr.aria-selected]=\"option.attributes['aria-selected']\"\n          [class]=\"option.classes\"\n          *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n        >\n          <input\n            type=\"checkbox\"\n            (change)=\"handler?.select(option, false)\"\n            [checked]=\"option.selected\"\n            tabIndex=\"-1\"\n          />\n          <ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container>\n          <i></i>\n        </label>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultButton let-selected=\"selected\">\n  <span>{{ dropdown?.texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    [id]=\"toggler?.attributes?.id + '_search-input'\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownComponent, decorators: [{
+    ], 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]=\"selectedOption\"\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]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-dropdown', providers: [
                         {
@@ -600,8 +637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: NggDropdownComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n        ? toggler?.attributes?.id + '_info'\n        : null\n    \"\n    type=\"button\"\n    role=\"combobox\"\n    #togglerRef\n    [id]=\"toggler?.attributes?.id\"\n    [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n    [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n    [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n    [tabindex]=\"toggler?.attributes?.tabIndex\"\n    [style]=\"toggler?.attributes?.style\"\n    [class]=\"toggler?.classes\"\n    (click)=\"handler?.toggle()\"\n    [class.is-valid]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        customButton?.templateRef && !multiSelect && selectedOption\n          ? customButton!.templateRef\n          : defaultButton;\n        context: { option: selectedOption }\n      \"\n    ></ng-container>\n  </button>\n  <span\n    class=\"form-info\"\n    #formInfo\n    [attr.id]=\"toggler?.attributes?.id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n  <div\n    #listboxRef\n    [id]=\"listbox?.attributes?.id\"\n    [attr.role]=\"listbox?.attributes?.role\"\n    [attr.aria-activedescendant]=\"\n        listbox?.attributes?.['aria-activedescendant']\n      \"\n    [tabindex]=\"listbox?.attributes?.tabIndex\"\n    [style]=\"listbox?.attributes?.style\"\n    [class]=\"listbox?.classes\"\n  >\n    <div class=\"d-flex d-sm-none align-items-center\">\n      <span class=\"flex-grow-1 ps-4 fs-2 fw-bolder\">{{ label }}</span>\n      <button\n        type=\"button\"\n        class=\"close m-4 m-sm-2 d-block d-sm-none\"\n        [attr.aria-label]=\"dropdown?.texts?.close\"\n        (click)=\"handler?.close()\"\n      >\n        <i></i>\n      </button>\n    </div>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\n        [id]=\"option.attributes.id\"\n        [attr.role]=\"option.attributes.role\"\n        [attr.aria-selected]=\"option.attributes['aria-selected']\"\n        [style]=\"option.attributes.style\"\n        [class]=\"option.classes\"\n        (click)=\"handler?.select(option)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <!--TODO: Improve checkboxes in dropdown angular-->\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <label\n          class=\"form-control\"\n          [attr.role]=\"option.attributes.role\"\n          [id]=\"option.attributes.id\"\n          [attr.aria-selected]=\"option.attributes['aria-selected']\"\n          [class]=\"option.classes\"\n          *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n        >\n          <input\n            type=\"checkbox\"\n            (change)=\"handler?.select(option, false)\"\n            [checked]=\"option.selected\"\n            tabIndex=\"-1\"\n          />\n          <ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container>\n          <i></i>\n        </label>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultButton let-selected=\"selected\">\n  <span>{{ dropdown?.texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    [id]=\"toggler?.attributes?.id + '_search-input'\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector, decorators: [{
+                    ], template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"selectedOption\"\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" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
                     type: Inject,
                     args: [Injector]
                 }] }]; }, propDecorators: { id: [{
@@ -638,21 +675,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], touched: [{
                 type: Output
-            }], togglerRef: [{
-                type: ViewChild,
-                args: ['togglerRef']
-            }], listboxRef: [{
-                type: ViewChild,
-                args: ['listboxRef']
-            }], fieldsetRef: [{
-                type: ViewChild,
-                args: ['fieldsetRef']
             }], customOption: [{
                 type: ContentChild,
                 args: [NggDropdownOptionDirective]
             }], customButton: [{
                 type: ContentChild,
                 args: [NggDropdownButtonDirective]
+            }], gdsDropdown: [{
+                type: ViewChild,
+                args: ['gdsDropdown', { static: false }]
             }] } });
 
 class NggDatepickerComponent {
@@ -771,15 +802,15 @@ class NggDatepickerComponent {
         }
     }
 }
-NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
+NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDatepickerComponent,
             multi: true,
         },
     ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      (blur)=\"blurInput()\"\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n  (focusout)=\"focusoutDialog($event)\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">\n    <i></i>Close\n  </button>\n  <div class=\"sg-date\">\n    <header>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n        <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n      </button>\n      <ngg-dropdown\n        [options]=\"months\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "fixedPlacement", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-datepicker', providers: [
                         {
@@ -846,16 +877,28 @@ 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: "14.3.0", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
+NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
         NggDropdownOptionDirective,
-        NggDropdownButtonDirective], imports: [CommonModule], exports: [NggDropdownComponent,
-        NggDropdownOptionDirective,
-        NggDropdownButtonDirective] });
-NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, decorators: [{
+        NggDropdownButtonDirective], imports: [CommonModule, NggCoreWrapperModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
+NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, imports: [CommonModule, NggCoreWrapperModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -863,21 +906,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         NggDropdownOptionDirective,
                         NggDropdownButtonDirective,
                     ],
-                    imports: [CommonModule],
-                    exports: [
-                        NggDropdownComponent,
-                        NggDropdownOptionDirective,
-                        NggDropdownButtonDirective,
-                    ],
+                    imports: [CommonModule, NggCoreWrapperModule],
+                    exports: [NggDropdownComponent, NggDropdownOptionDirective],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
 
 class NggDatepickerModule {
 }
-NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
-NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggDropdownModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDatepickerModule, decorators: [{
+NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
+NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggDropdownModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggDatepickerComponent],
@@ -908,11 +948,11 @@ class NggInPageWizardStepCardComponent {
         this.handleNextClick.emit(event);
     }
 }
-NggInPageWizardStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggInPageWizardStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"!!isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer class=\"gds-in-page-wizard-step-card__footer\" *ngIf=\"isActive\">\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    </button>\n  </footer>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
+NggInPageWizardStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggInPageWizardStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer class=\"gds-in-page-wizard-step-card__footer\" *ngIf=\"isActive\">\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    </button>\n  </footer>\n</section>\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: NggInPageWizardStepCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-in-page-wizard-step-card', template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"!!isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer class=\"gds-in-page-wizard-step-card__footer\" *ngIf=\"isActive\">\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    </button>\n  </footer>\n</section>\n" }]
+            args: [{ selector: 'ngg-in-page-wizard-step-card', template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer class=\"gds-in-page-wizard-step-card__footer\" *ngIf=\"isActive\">\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    </button>\n  </footer>\n</section>\n" }]
         }], propDecorators: { handleNextClick: [{
                 type: Output
             }], handleEditClick: [{
@@ -935,10 +975,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggInPageWizardModule {
 }
-NggInPageWizardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggInPageWizardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardModule, declarations: [NggInPageWizardStepCardComponent], imports: [CommonModule], exports: [NggInPageWizardStepCardComponent] });
-NggInPageWizardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardModule, decorators: [{
+NggInPageWizardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggInPageWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggInPageWizardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggInPageWizardModule, declarations: [NggInPageWizardStepCardComponent], imports: [CommonModule], exports: [NggInPageWizardStepCardComponent] });
+NggInPageWizardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggInPageWizardModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggInPageWizardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggInPageWizardStepCardComponent],
@@ -952,9 +992,9 @@ class NggModalHeaderDirective {
         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: [{
+NggModalHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggModalHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggModalHeaderDirective, selector: "[nggModalHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nggModalHeader]'
@@ -966,9 +1006,9 @@ class NggModalFooterDirective {
         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: [{
+NggModalFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggModalFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggModalFooterDirective, selector: "[nggModalFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nggModalFooter]'
@@ -1065,9 +1105,9 @@ class NggModalComponent {
         enableBodyScroll(this.ref.nativeElement);
     }
 }
-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", 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: [{
+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 });
+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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
@@ -1117,15 +1157,15 @@ class NggModalHeaderComponent {
         this.closed.emit(event);
     }
 }
-NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggModalHeaderComponent, selector: "[ngg-modal-header]", inputs: { header: "header" }, outputs: { closed: "closed" }, ngImport: i0, template: `
+NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalHeaderComponent, selector: "[ngg-modal-header]", inputs: { header: "header" }, outputs: { closed: "closed" }, ngImport: i0, template: `
     <h3 data-testid="modal-header-text">{{header}}</h3>
     <button data-testid="modal-close-button" class="close" (click)="this.handleClose($event)">
         <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"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngg-modal-header]', template: `
     <h3 data-testid="modal-header-text">{{header}}</h3>
@@ -1141,9 +1181,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 class NggModalBodyComponent {
 }
-NggModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalBodyComponent, decorators: [{
+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"] });
+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"] }]
         }] });
@@ -1159,12 +1199,12 @@ class NggModalFooterComponent {
         this.confirm.emit(event);
     }
 }
-NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggModalFooterComponent, selector: "[ngg-modal-footer]", inputs: { dismissLabel: "dismissLabel", confirmLabel: "confirmLabel" }, outputs: { dismiss: "dismiss", confirm: "confirm" }, ngImport: i0, template: `
+NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalFooterComponent, decorators: [{
+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>
@@ -1195,8 +1235,8 @@ const EXPORTS = [
 ];
 class NggModalModule {
 }
-NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
+NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
         NggModalHeaderComponent,
         NggModalBodyComponent,
         NggModalFooterComponent,
@@ -1204,8 +1244,8 @@ NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         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: [{
+NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalModule, imports: [A11yModule, CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [A11yModule, CommonModule],
@@ -1232,9 +1272,9 @@ class NggProgressCircleComponent {
         }
     }
 }
-NggProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggProgressCircleComponent, selector: "ngg-progress-circle", inputs: { id: "id", theme: "theme", value: "value" }, host: { properties: { "style.--start-value": "this._startValue", "style.--end-value": "this._endValue" } }, ngImport: i0, template: "<div\n  class=\"gds-progress-circle\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"value\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-label]=\"id\"\n>\n  <div class=\"ring full-ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"inner-circle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggProgressCircleComponent, decorators: [{
+NggProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggProgressCircleComponent, selector: "ngg-progress-circle", inputs: { id: "id", theme: "theme", value: "value" }, host: { properties: { "style.--start-value": "this._startValue", "style.--end-value": "this._endValue" } }, ngImport: i0, template: "<div\n  class=\"gds-progress-circle\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"value\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-label]=\"id\"\n>\n  <div class=\"ring full-ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"inner-circle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggProgressCircleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-progress-circle', template: "<div\n  class=\"gds-progress-circle\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"value\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-label]=\"id\"\n>\n  <div class=\"ring full-ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"inner-circle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { _startValue: [{
@@ -1253,10 +1293,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggProgressCircleModule {
 }
-NggProgressCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggProgressCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggProgressCircleModule, declarations: [NggProgressCircleComponent], imports: [CommonModule], exports: [NggProgressCircleComponent] });
-NggProgressCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggProgressCircleModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggProgressCircleModule, decorators: [{
+NggProgressCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggProgressCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggProgressCircleModule, declarations: [NggProgressCircleComponent], imports: [CommonModule], exports: [NggProgressCircleComponent] });
+NggProgressCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggProgressCircleModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggProgressCircleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggProgressCircleComponent],
@@ -1267,8 +1307,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggSegmentedControlComponent {
 }
-NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
+NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
     <div class="group">
       <a
         *ngFor="let control of $controls | async"
@@ -1278,8 +1318,8 @@ NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
         >{{ control.text }}</a
       >
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-segmented-control', template: `
     <div class="group">
@@ -1298,10 +1338,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggSegmentedControlModule {
 }
-NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
-NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSegmentedControlModule, imports: [RouterModule, CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
+NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
+NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSegmentedControlModule, imports: [RouterModule, CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggSegmentedControlComponent],
@@ -1312,10 +1352,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggSharedModule {
 }
-NggSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggSharedModule, declarations: [NggOnScrollDirective], imports: [CommonModule], exports: [NggOnScrollDirective] });
-NggSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSharedModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSharedModule, decorators: [{
+NggSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggSharedModule, declarations: [NggOnScrollDirective], imports: [CommonModule], exports: [NggOnScrollDirective] });
+NggSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSharedModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggOnScrollDirective],
@@ -1382,15 +1422,15 @@ class NggSliderComponent {
         this.onTouchedFn = fn;
     }
 }
-NggSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggSliderComponent, selector: "ngg-slider", inputs: { name: "name", min: "min", max: "max", step: "step", label: "label", instruction: "instruction", placeholder: "placeholder", errorMessage: "errorMessage", hasTextbox: "hasTextbox", unitLabel: "unitLabel", disabled: "disabled", value: "value" }, outputs: { sliderChange: "sliderChange", sliderTouch: "sliderTouch" }, providers: [
+NggSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggSliderComponent, selector: "ngg-slider", inputs: { name: "name", min: "min", max: "max", step: "step", label: "label", instruction: "instruction", placeholder: "placeholder", errorMessage: "errorMessage", hasTextbox: "hasTextbox", unitLabel: "unitLabel", disabled: "disabled", value: "value", enterkeyhint: "enterkeyhint" }, outputs: { sliderChange: "sliderChange", sliderTouch: "sliderTouch" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             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\">\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=\"number\"\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    [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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.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: "14.3.0", ngImport: i0, type: NggSliderComponent, decorators: [{
+    ], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-slider', providers: [
                         {
@@ -1398,7 +1438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: NggSliderComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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\">\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=\"number\"\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    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], propDecorators: { name: [{
                 type: Input
             }], min: [{
@@ -1423,6 +1463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], enterkeyhint: [{
+                type: Input
             }], sliderChange: [{
                 type: Output
             }], sliderTouch: [{
@@ -1431,10 +1473,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggSliderModule {
 }
-NggSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggSliderModule, declarations: [NggSliderComponent], imports: [CommonModule, FormsModule], exports: [NggSliderComponent] });
-NggSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSliderModule, imports: [CommonModule, FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSliderModule, decorators: [{
+NggSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggSliderModule, declarations: [NggSliderComponent], imports: [CommonModule, FormsModule], exports: [NggSliderComponent] });
+NggSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSliderModule, imports: [CommonModule, FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule],
@@ -1445,8 +1487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggModule {
 }
-NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggAccordionModule,
+NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggAccordionModule,
         NggBadgeModule,
         NggButtonModule,
         NggDatepickerModule,
@@ -1458,7 +1500,7 @@ NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         NggContextMenuModule,
         NggInPageWizardModule,
         NggSharedModule] });
-NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
+NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
         NggBadgeModule,
         NggButtonModule,
         NggDatepickerModule,
@@ -1470,7 +1512,7 @@ NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
         NggContextMenuModule,
         NggInPageWizardModule,
         NggSharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -1642,9 +1684,9 @@ class NggPaginationComponent {
         return pages;
     }
 }
-NggPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggPaginationComponent, selector: "ngg-pagination", inputs: { i18n: "i18n", size: "size", displayPages: "displayPages", length: "length", pageSize: "pageSize", pageIndex: "pageIndex" }, outputs: { page: "page" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  [class]=\"'pagination ' + size\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.paginationLabel\"\n  *ngIf=\"totalPages > 1\"\n>\n  <ul class=\"gds-reset\">\n    <li *ngIf=\"hasPrevious()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoPrevious()\"\n        [attr.aria-label]=\"i18n.previousPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoFirst()\"\n        [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.firstPageLabel\"\n        role=\"button\"\n      >\n        1\n      </a>\n    </li>\n    <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n    <li *ngFor=\"let index of pageIndicies\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"goto(index)\"\n        [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n        [attr.aria-label]=\"i18n.getPageLabel(index)\"\n        role=\"button\"\n      >\n        {{ index + 1 }}\n      </a>\n    </li>\n\n    <li\n      *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n      aria-hidden=\"true\"\n    >\n      ...\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoLast()\"\n        [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.lastPageLabel\"\n        role=\"button\"\n      >\n        {{ totalPages }}\n      </a>\n    </li>\n    <li *ngIf=\"hasNext()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoNext()\"\n        [attr.aria-label]=\"i18n.nextPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggPaginationComponent, decorators: [{
+NggPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggPaginationComponent, selector: "ngg-pagination", inputs: { i18n: "i18n", size: "size", displayPages: "displayPages", length: "length", pageSize: "pageSize", pageIndex: "pageIndex" }, outputs: { page: "page" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  [class]=\"'pagination ' + size\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.paginationLabel\"\n  *ngIf=\"totalPages > 1\"\n>\n  <ul class=\"gds-reset\">\n    <li *ngIf=\"hasPrevious()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoPrevious()\"\n        [attr.aria-label]=\"i18n.previousPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoFirst()\"\n        [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.firstPageLabel\"\n        role=\"button\"\n      >\n        1\n      </a>\n    </li>\n    <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n    <li *ngFor=\"let index of pageIndicies\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"goto(index)\"\n        [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n        [attr.aria-label]=\"i18n.getPageLabel(index)\"\n        role=\"button\"\n      >\n        {{ index + 1 }}\n      </a>\n    </li>\n\n    <li\n      *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n      aria-hidden=\"true\"\n    >\n      ...\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoLast()\"\n        [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.lastPageLabel\"\n        role=\"button\"\n      >\n        {{ totalPages }}\n      </a>\n    </li>\n    <li *ngIf=\"hasNext()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoNext()\"\n        [attr.aria-label]=\"i18n.nextPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  [class]=\"'pagination ' + size\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.paginationLabel\"\n  *ngIf=\"totalPages > 1\"\n>\n  <ul class=\"gds-reset\">\n    <li *ngIf=\"hasPrevious()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoPrevious()\"\n        [attr.aria-label]=\"i18n.previousPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoFirst()\"\n        [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.firstPageLabel\"\n        role=\"button\"\n      >\n        1\n      </a>\n    </li>\n    <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n    <li *ngFor=\"let index of pageIndicies\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"goto(index)\"\n        [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n        [attr.aria-label]=\"i18n.getPageLabel(index)\"\n        role=\"button\"\n      >\n        {{ index + 1 }}\n      </a>\n    </li>\n\n    <li\n      *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n      aria-hidden=\"true\"\n    >\n      ...\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoLast()\"\n        [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.lastPageLabel\"\n        role=\"button\"\n      >\n        {{ totalPages }}\n      </a>\n    </li>\n    <li *ngIf=\"hasNext()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoNext()\"\n        [attr.aria-label]=\"i18n.nextPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n  </ul>\n</nav>\n" }]
         }], propDecorators: { i18n: [{
@@ -1665,10 +1707,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class NggPaginationModule {
 }
-NggPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggPaginationModule, declarations: [NggPaginationComponent], imports: [CommonModule], exports: [NggPaginationComponent] });
-NggPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggPaginationModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggPaginationModule, decorators: [{
+NggPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationModule, declarations: [NggPaginationComponent], imports: [CommonModule], exports: [NggPaginationComponent] });
+NggPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggPaginationComponent],