@sebgroup/green-angular 1.0.4 → 1.2.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, Injector, Inject, ViewChild, ContentChild } from '@angular/core';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { randomId, dropdownValues, createDropdown, months, years, createDatepicker } from '@sebgroup/extract';
-import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { randomId, dropdownValues, createDropdown, months, years, createDatepicker, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
+import * as i2 from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { startOfDay, endOfDay } from 'date-fns';
-import * as i1 from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import * as i2$1 from '@angular/router';
+import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 
 class NggAccordionListItemComponent {
@@ -39,9 +40,9 @@ class NggAccordionListItemComponent {
         this.expandedChange.emit(this);
     }
 }
-NggAccordionListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggAccordionListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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>", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionListItemComponent, decorators: [{
+NggAccordionListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggAccordionListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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.3", 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: [{
@@ -109,9 +110,9 @@ class NggAccordionComponent {
         }
     }
 }
-NggAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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: "13.3.3", ngImport: i0, type: NggAccordionComponent, decorators: [{
+NggAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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.3", 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: [{
@@ -125,10 +126,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 class NggAccordionModule {
 }
-NggAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, declarations: [NggAccordionListItemComponent, NggAccordionComponent], imports: [CommonModule], exports: [NggAccordionListItemComponent, NggAccordionComponent] });
-NggAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, decorators: [{
+NggAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, declarations: [NggAccordionListItemComponent, NggAccordionComponent], imports: [CommonModule], exports: [NggAccordionListItemComponent, NggAccordionComponent] });
+NggAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -138,13 +139,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }] });
 
 class NggBadgeComponent {
-    //eslint-disable-next-line
-    constructor() {
-        /** The color of the component */
-        this.badgeType = '';
-        /** Callback when component is dismissed */
-        this.handleClose = new EventEmitter();
-    }
     /** Flag whether the component can be dismissed */
     set isCloseable(value) {
         this._isCloseable = value;
@@ -155,6 +149,13 @@ class NggBadgeComponent {
     get class() {
         return ['badge', this.badgeType].join(' ');
     }
+    //eslint-disable-next-line
+    constructor() {
+        /** The color of the component */
+        this.badgeType = '';
+        /** Callback when component is dismissed */
+        this.handleClose = new EventEmitter();
+    }
     ngOnInit() {
         if (!!this.customColor || !!this.customBackgroundColor) {
             this.badgeType = '';
@@ -164,8 +165,8 @@ class NggBadgeComponent {
         this.handleClose.emit(e);
     }
 }
-NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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.3", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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>
@@ -173,8 +174,8 @@ NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
       {{ closeText }}
       <i></i>
     </button>
-  `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, decorators: [{
+  `, 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: "15.2.3", 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
@@ -216,10 +217,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 class NggBadgeModule {
 }
-NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
-NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, decorators: [{
+NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
+NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggBadgeComponent],
@@ -228,14 +229,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 }]
         }] });
 
+class NggButtonComponent {
+    get classes() {
+        return [this.variant, this.size ? this.size : false].filter(Boolean).join(" ");
+    }
+}
+NggButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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.3", ngImport: i0, type: NggButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[ngg-button]',
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class NggButtonModule {
+}
+NggButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, declarations: [NggButtonComponent], imports: [CommonModule], exports: [NggButtonComponent] });
+NggButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggButtonComponent],
+                    imports: [CommonModule],
+                    exports: [NggButtonComponent],
+                }]
+        }] });
+
 class NggDropdownOptionDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
 }
-NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
+NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nggDropdownOption]',
@@ -243,22 +282,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 class NggDropdownComponent {
-    constructor(cd, injector) {
-        this.cd = cd;
-        this.injector = injector;
-        this.loop = false;
-        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 ?? '';
-        };
-    }
     set multiSelect(value) {
         this._multiSelect = this.convertToBoolean(value);
     }
@@ -281,6 +304,22 @@ class NggDropdownComponent {
     get control() {
         return this.injector.get(NgControl);
     }
+    constructor(cd, injector) {
+        this.cd = cd;
+        this.injector = injector;
+        this.loop = false;
+        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 ?? '';
+        };
+    }
     ngAfterViewInit() {
         if (this.togglerRef?.nativeElement && this.listboxRef?.nativeElement) {
             this.handler = createDropdown(this.props, this.togglerRef.nativeElement, this.listboxRef.nativeElement, this.fieldsetRef?.nativeElement, (dropdown) => {
@@ -344,15 +383,15 @@ class NggDropdownComponent {
         return (value === '' || value === 'true' || value.toString() === 'true' || false);
     }
 }
-NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: Injector }], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
+NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: Injector }], target: i0.ɵɵFactoryTarget.Component });
+NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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", 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 }], 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    #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    <span>{{ dropdown?.texts?.select }}</span>\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    <button\n      type=\"button\"\n      class=\"close m-4 m-sm-2 d-block d-sm-none\"\n      (click)=\"handler?.close()\"\n    >\n      <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n      <i></i>\n    </button>\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 #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", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, decorators: [{
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, 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    #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    <span>{{ dropdown?.texts?.select }}</span>\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    <button\n      type=\"button\"\n      class=\"close m-4 m-sm-2 d-block d-sm-none\"\n      (click)=\"handler?.close()\"\n    >\n      <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n      <i></i>\n    </button>\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 #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: "15.2.3", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-dropdown', providers: [
                         {
@@ -411,31 +450,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             }] } });
 
 class NggDatepickerComponent {
-    constructor(_cdr) {
-        this._cdr = _cdr;
-        this.id = randomId();
-        this.isValid = null;
-        this.valueChange = new EventEmitter();
-        this._months = months({});
-        this.listener = (data, state) => {
-            if (this.dp && state) {
-                this.dp.state = { ...state };
-                this.years = years({
-                    from: this.dp.state?.minDate?.getFullYear(),
-                    to: this.dp.state?.maxDate?.getFullYear(),
-                });
-            }
-            if (data) {
-                // only emit change event if date has changed
-                if (this.data?.selectedDate !== data.selectedDate) {
-                    this.valueChange.emit(data.selectedDate);
-                    this.onChangeFn && this.onChangeFn(data.selectedDate);
-                }
-                this.data = data;
-            }
-            this._cdr.detectChanges();
-        };
-    }
     get months() {
         return this._months;
     }
@@ -462,6 +476,31 @@ class NggDatepickerComponent {
             }
         }
     }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this.id = randomId();
+        this.isValid = null;
+        this.valueChange = new EventEmitter();
+        this._months = months({});
+        this.listener = (data, state) => {
+            if (this.dp && state) {
+                this.dp.state = { ...state };
+                this.years = years({
+                    from: this.dp.state?.minDate?.getFullYear(),
+                    to: this.dp.state?.maxDate?.getFullYear(),
+                });
+            }
+            if (data) {
+                // only emit change event if date has changed
+                if (this.data?.selectedDate !== data.selectedDate) {
+                    this.valueChange.emit(data.selectedDate);
+                    this.onChangeFn && this.onChangeFn(data.selectedDate);
+                }
+                this.data = data;
+            }
+            this._cdr.detectChanges();
+        };
+    }
     writeValue(value) {
         this.value = value;
     }
@@ -526,15 +565,15 @@ class NggDatepickerComponent {
         }
     }
 }
-NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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.3", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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", components: [{ type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerComponent, decorators: [{
+    ], 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", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-datepicker', providers: [
                         {
@@ -603,10 +642,10 @@ function dateValidator(dates) {
 
 class NggDropdownModule {
 }
-NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent, NggDropdownOptionDirective], imports: [CommonModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
-NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, decorators: [{
+NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent, NggDropdownOptionDirective], imports: [CommonModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
+NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggDropdownComponent, NggDropdownOptionDirective],
@@ -617,10 +656,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 class NggDatepickerModule {
 }
-NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
-NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, imports: [[CommonModule, NggDropdownModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, decorators: [{
+NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
+NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggDropdownModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggDatepickerComponent],
@@ -630,15 +669,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }] });
 
 class NggModalComponent {
-    constructor(ref, configurableFocusTrapFactory) {
-        this.ref = ref;
-        this.configurableFocusTrapFactory = configurableFocusTrapFactory;
-        this.isOpenChange = new EventEmitter();
-        this.closed = new EventEmitter();
-        this.confirm = new EventEmitter();
-        this.dismiss = new EventEmitter();
-        this.configurableFocusTrap = this.configurableFocusTrapFactory.create(this.ref.nativeElement);
-    }
     get trapFocus() {
         return this._trapFocus;
     }
@@ -670,6 +700,15 @@ class NggModalComponent {
         }
     }
     get open() { return this.isOpen; }
+    constructor(ref, configurableFocusTrapFactory) {
+        this.ref = ref;
+        this.configurableFocusTrapFactory = configurableFocusTrapFactory;
+        this.isOpenChange = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.dismiss = new EventEmitter();
+        this.configurableFocusTrap = this.configurableFocusTrapFactory.create(this.ref.nativeElement);
+    }
     ngOnInit() {
         if (this._isOpen && this.trapFocus)
             this.enableFocusTrap();
@@ -714,12 +753,12 @@ class NggModalComponent {
         enableBodyScroll(this.ref.nativeElement);
     }
 }
-NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
-NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], components: [{ type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i2.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i0.forwardRef(function () { return i2.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i2.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalComponent, decorators: [{
+NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
                 type: Input
             }], header: [{
                 type: Input
@@ -756,15 +795,15 @@ class NggModalHeaderComponent {
         this.closed.emit(event);
     }
 }
-NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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.3", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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: "13.3.3", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngg-modal-header]', template: `
     <h3 data-testid="modal-header-text">{{header}}</h3>
@@ -780,9 +819,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             }] } });
 class NggModalBodyComponent {
 }
-NggModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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: "13.3.3", ngImport: i0, type: NggModalBodyComponent, decorators: [{
+NggModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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.3", 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"] }]
         }] });
@@ -798,12 +837,12 @@ class NggModalFooterComponent {
         this.confirm.emit(event);
     }
 }
-NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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.3", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalFooterComponent, decorators: [{
+    `, 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: "15.2.3", 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>
@@ -830,13 +869,13 @@ const EXPORTS = [
 ];
 class NggModalModule {
 }
-NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
+NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
         NggModalHeaderComponent,
         NggModalBodyComponent,
         NggModalFooterComponent], imports: [A11yModule, CommonModule], exports: [NggModalComponent] });
-NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, imports: [[A11yModule, CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, decorators: [{
+NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, imports: [A11yModule, CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [A11yModule, CommonModule],
@@ -850,31 +889,24 @@ class NggProgressCircleComponent {
         this._startValue = '0deg';
         this._endValue = '0deg';
         /** id of the progress circle */
-        this.id = `progress-circle-${randomId()}`;
+        this.id = `${randomId()}-progress-circle`;
         /** theme of the progress circle */
         this.theme = 'warning';
     }
     /** progress circle value in percentage */
-    set value(percent) {
-        const degrees = this.calculateDegrees(percent);
-        this._endValue = `${degrees}deg`;
-    }
-    calculateDegrees(percent) {
-        if (percent > 100) {
-            return 180;
-        }
-        if (percent < 0) {
-            return 0;
+    set value(val) {
+        const degrees = `${calculateDegrees(val)}deg`;
+        this._endValue = degrees;
+        if (this.theme === 'disabled') {
+            this._startValue = degrees;
         }
-        /** formula: ((n% * 360deg) / 100% ) / 2 */
-        return percent * 1.8;
     }
 }
-NggProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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=\"outer-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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleComponent, decorators: [{
+NggProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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.3", ngImport: i0, type: NggProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-progress-circle', template: "<div\n  class=\"outer-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" }]
+            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: [{
                 type: HostBinding,
                 args: ['style.--start-value']
@@ -891,10 +923,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 class NggProgressCircleModule {
 }
-NggProgressCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggProgressCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, declarations: [NggProgressCircleComponent], imports: [CommonModule], exports: [NggProgressCircleComponent] });
-NggProgressCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, decorators: [{
+NggProgressCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggProgressCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, declarations: [NggProgressCircleComponent], imports: [CommonModule], exports: [NggProgressCircleComponent] });
+NggProgressCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggProgressCircleComponent],
@@ -905,8 +937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 class NggSegmentedControlComponent {
 }
-NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
+NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
     <div class="group">
       <a
         *ngFor="let control of $controls | async"
@@ -916,12 +948,10 @@ NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         >{{ control.text }}</a
       >
     </div>
-  `, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", 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.3", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ngg-segmented-control',
-                    template: `
+            args: [{ selector: 'ngg-segmented-control', template: `
     <div class="group">
       <a
         *ngFor="let control of $controls | async"
@@ -931,20 +961,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         >{{ control.text }}</a
       >
     </div>
-  `,
-                    styles: [],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], propDecorators: { $controls: [{
                 type: Input
             }] } });
 
 class NggSegmentedControlModule {
 }
-NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
-NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, imports: [[RouterModule, CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
+NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
+NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, imports: [RouterModule, CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggSegmentedControlComponent],
@@ -953,64 +980,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 }]
         }] });
 
-class NggButtonComponent {
-    get classes() {
-        return [this.variant, this.size ? this.size : false].filter(Boolean).join(" ");
+class NggSliderComponent {
+    constructor() {
+        this.name = `${randomId()}-slider`;
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.label = '';
+        this.instruction = '';
+        this.placeholder = '';
+        this.errorMessage = '';
+        this.hasTextbox = false;
+        this.disabled = false;
+        this.value = 0;
+        this.sliderChange = new EventEmitter();
+        this.sliderTouch = new EventEmitter();
+        this.style = {};
+    }
+    ngOnInit() {
+        this.setTrackBackground();
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            this.setTrackBackground();
+        }
+    }
+    onBlur() {
+        this.sliderTouch.emit(true);
+        this.onTouchedFn && this.onTouchedFn();
+    }
+    handleChange() {
+        this.value = this.value ?? 0;
+        this.setTrackBackground();
+        this.sliderChange.emit(this.value);
+        this.onChangeFn && this.onChangeFn(this.value);
+    }
+    setTrackBackground() {
+        if (this.disabled) {
+            this.style.background = sliderColors.disabled;
+            return;
+        }
+        const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
+        this.style.background = getSliderTrackBackground(percent);
+    }
+    /** control value accessor functions */
+    writeValue(val) {
+        if (this.value !== val) {
+            this.value = val ?? 0;
+            this.handleChange();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
     }
 }
-NggButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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: "13.3.3", ngImport: i0, type: NggButtonComponent, decorators: [{
+NggSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggSliderComponent, selector: "ngg-slider", inputs: { name: "name", min: "min", max: "max", step: "step", label: "label", instruction: "instruction", placeholder: "placeholder", errorMessage: "errorMessage", hasTextbox: "hasTextbox", disabled: "disabled", value: "value" }, 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\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <div *ngIf=\"hasTextbox\" class=\"form-group\">\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      [disabled]=\"disabled\"\n      (blur)=\"onBlur()\"\n      (input)=\"handleChange()\"\n    />\n    <span *ngIf=\"!!errorMessage\" class=\"form-info\"></span>\n  </div>\n</div>\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<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.3", ngImport: i0, type: NggSliderComponent, decorators: [{
             type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[ngg-button]',
-                    template: `<ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { variant: [{
+            args: [{ selector: 'ngg-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NggSliderComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <div *ngIf=\"hasTextbox\" class=\"form-group\">\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      [disabled]=\"disabled\"\n      (blur)=\"onBlur()\"\n      (input)=\"handleChange()\"\n    />\n    <span *ngIf=\"!!errorMessage\" class=\"form-info\"></span>\n  </div>\n</div>\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<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n" }]
+        }], propDecorators: { name: [{
                 type: Input
-            }], size: [{
+            }], min: [{
                 type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], instruction: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], hasTextbox: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], sliderChange: [{
+                type: Output
+            }], sliderTouch: [{
+                type: Output
             }] } });
 
-class NggButtonModule {
+class NggSliderModule {
 }
-NggButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, declarations: [NggButtonComponent], imports: [CommonModule], exports: [NggButtonComponent] });
-NggButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, decorators: [{
+NggSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, declarations: [NggSliderComponent], imports: [CommonModule, FormsModule], exports: [NggSliderComponent] });
+NggSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, imports: [CommonModule, FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NggButtonComponent],
-                    imports: [CommonModule],
-                    exports: [NggButtonComponent],
+                    imports: [CommonModule, FormsModule],
+                    exports: [NggSliderComponent],
+                    declarations: [NggSliderComponent],
                 }]
         }] });
 
 class NggModule {
 }
-NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggAccordionModule,
+NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggAccordionModule,
         NggBadgeModule,
         NggButtonModule,
         NggDatepickerModule,
         NggDropdownModule,
         NggModalModule,
         NggProgressCircleModule,
-        NggSegmentedControlModule] });
-NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [[CommonModule], NggAccordionModule,
+        NggSegmentedControlModule,
+        NggSliderModule] });
+NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
         NggBadgeModule,
         NggButtonModule,
         NggDatepickerModule,
         NggDropdownModule,
         NggModalModule,
         NggProgressCircleModule,
-        NggSegmentedControlModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, decorators: [{
+        NggSegmentedControlModule,
+        NggSliderModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -1024,13 +1131,199 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                         NggModalModule,
                         NggProgressCircleModule,
                         NggSegmentedControlModule,
+                        NggSliderModule,
                     ],
                 }]
         }] });
 
+class NggPaginationComponent {
+    constructor() {
+        /** Internationalization labels */
+        this.i18n = PaginationI18n;
+        /** Rendered size */
+        this.size = 'small';
+        /** Amount of pages to be displayed between the first and last  */
+        this.displayPages = 5;
+        /** Total amount of items to be paginated */
+        this.length = 0;
+        /** Displayed items per page */
+        this.pageSize = 10;
+        this._pageIndex = 0;
+        this._pageIndicies = [];
+        /** Event emitted when a new page index is selected */
+        this.page = new EventEmitter();
+    }
+    /** The zero-based page index of the displayed list of pages. Defaulted to 0. */
+    get pageIndex() {
+        return this._pageIndex;
+    }
+    set pageIndex(value) {
+        this._pageIndex = Math.max(value, 0);
+    }
+    /** All centric page indicies to be displayed. */
+    get pageIndicies() {
+        return this._pageIndicies;
+    }
+    get totalPages() {
+        if (!this.pageSize) {
+            return 0;
+        }
+        return Math.ceil(this.length / this.pageSize);
+    }
+    ngOnChanges(changes) {
+        if (changes.displayPages ||
+            changes.pageIndex ||
+            changes.pageSize ||
+            changes.length) {
+            this._pageIndicies = this.getDisplayedPageIndicies();
+        }
+    }
+    hasPrevious() {
+        return this.pageIndex >= 1;
+    }
+    hasNext() {
+        return this.pageIndex < this.totalPages - 1;
+    }
+    gotoFirst() {
+        if (!this.hasPrevious()) {
+            return;
+        }
+        const previous = this.pageIndex;
+        this.pageIndex = 0;
+        this.emit(previous);
+    }
+    gotoLast() {
+        if (!this.hasNext()) {
+            return;
+        }
+        const previous = this.pageIndex;
+        this.pageIndex = this.totalPages - 1;
+        this.emit(previous);
+    }
+    gotoPrevious() {
+        if (!this.hasPrevious()) {
+            return;
+        }
+        const previous = this.pageIndex;
+        this.pageIndex = previous - 1;
+        this.emit(previous);
+    }
+    gotoNext() {
+        if (!this.hasNext()) {
+            return;
+        }
+        const previous = this.pageIndex;
+        this.pageIndex = previous + 1;
+        this.emit(previous);
+    }
+    goto(index) {
+        if (index === this.pageIndex || index < 0 || index >= this.totalPages) {
+            return;
+        }
+        const previous = this.pageIndex;
+        this.pageIndex = index;
+        this.emit(previous);
+    }
+    emit(previous) {
+        this._pageIndicies = this.getDisplayedPageIndicies();
+        this.page.emit({ pageIndex: this.pageIndex, previousPageIndex: previous });
+    }
+    getDisplayedPageIndicies() {
+        // Do not render
+        if (this.totalPages <= 1) {
+            return [];
+        }
+        // All pages can fit
+        if (this.totalPages <= this.displayPages)
+            return [...Array(this.totalPages - 2).keys()].map((index) => index + 1);
+        // Only first & last
+        if (this.totalPages === 2)
+            return [];
+        return this.getCenteredPageIndicies();
+    }
+    /**
+     * Find X (displayPages) amount of page indicies that are centered from the currently selected page index,
+     * but exclude the first and last indicies if they are within the range.
+     */
+    getCenteredPageIndicies() {
+        const pages = [];
+        if (this.pageIndex === 0) {
+            pages.push(this.pageIndex + 1);
+        }
+        else if (this.pageIndex === this.totalPages - 1) {
+            pages.push(this.pageIndex - 1);
+        }
+        else {
+            pages.push(this.pageIndex);
+        }
+        const addAfter = () => {
+            const next = pages[pages.length - 1] + 1;
+            if (next < this.totalPages - 1 && counter > 0) {
+                pages.push(next);
+                return true;
+            }
+            return false;
+        };
+        const addBefore = () => {
+            const previous = pages[0] - 1;
+            if (previous > 0 && counter > 0) {
+                pages.unshift(previous);
+                return true;
+            }
+            return false;
+        };
+        let counter = this.displayPages - 1;
+        while (counter > 0) {
+            const addedAfter = addAfter();
+            if (addedAfter)
+                counter--;
+            const addedBefore = addBefore();
+            if (addedBefore)
+                counter--;
+            if (!addedAfter && !addedBefore)
+                break;
+        }
+        return pages;
+    }
+}
+NggPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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.3", 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: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], displayPages: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], page: [{
+                type: Output
+            }] } });
+
+class NggPaginationModule {
+}
+NggPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, declarations: [NggPaginationComponent], imports: [CommonModule], exports: [NggPaginationComponent] });
+NggPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggPaginationComponent],
+                    imports: [CommonModule],
+                    exports: [NggPaginationComponent],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, dateValidator };
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSliderComponent, NggSliderModule, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map