@sebgroup/green-angular 0.0.0-v-angular-20250113082841

package/fesm2022/sebgroup-green-angular.mjs

@@ -0,0 +1,2229 @@
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, QueryList, ViewChildren, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef } from '@angular/core';
+import { randomId, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
+import * as i1$1 from '@angular/platform-browser';
+import '@sebgroup/green-core/components/context-menu/index.js';
+import * as ContextMenuTransStyles from '@sebgroup/green-core/components/context-menu/context-menu.trans.styles.js';
+import * as i2 from '@sebgroup/green-angular/src/lib/shared';
+import { NggCoreWrapperModule as NggCoreWrapperModule$1 } from '@sebgroup/green-angular/src/lib/shared';
+import * as i2$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
+import { startOfDay, endOfDay } from 'date-fns';
+import '@sebgroup/green-core/components/datepicker/index.js';
+import * as DatepickerTransStyles from '@sebgroup/green-core/components/datepicker/datepicker.trans.styles.js';
+import '@sebgroup/green-core/components/dropdown/index.js';
+import * as DropdownTransStyles from '@sebgroup/green-core/components/dropdown/dropdown.trans.styles.js';
+import { trigger, transition, query, style, group, animate } from '@angular/animations';
+import * as i1$2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import * as i1$3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { Subject, fromEvent, interval } from 'rxjs';
+import { takeUntil, throttle } from 'rxjs/operators';
+import * as i2$2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+
+class NggAccordionListItemComponent {
+    constructor() {
+        this.id = randomId();
+        this.labelElementLevel = 2;
+        this.listItemHeader = '';
+        this.listItemSubHeader = '';
+        this.expandedChange = new EventEmitter();
+        this.contentHeight = '0px';
+        this.isExpanded = false;
+    }
+    shrink() {
+        this.isExpanded = false;
+        this.contentHeight = '0px';
+    }
+    expand() {
+        this.isExpanded = true;
+        this.contentHeight = 'auto';
+    }
+    toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
+        if (this.isExpanded) {
+            this.contentHeight = 'auto';
+        }
+        else {
+            this.contentHeight = '0px';
+        }
+        this.expandedChange.emit(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggAccordionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggAccordionListItemComponent, selector: "div[ngg-accordion-list-item]", inputs: { id: "id", labelElementLevel: "labelElementLevel", listItemHeader: "listItemHeader", listItemSubHeader: "listItemSubHeader" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<ng-container data-testid=\"accordion-list-item-root\">\n  <div role=\"heading\" [attr.aria-level]=\"labelElementLevel\" [attr.id]=\"id\">\n    <button\n      data-testid=\"accordion-list-item-expander-button\"\n      [attr.id]=\"id + '_header'\"\n      (click)=\"toggleExpanded()\"\n      tabindex=\"0\"\n      [attr.aria-expanded]=\"this.isExpanded\"\n      [attr.aria-controls]=\"id + '_section'\"\n    >\n      <span data-testid=\"accordion-list-item-header\">{{ listItemHeader }}</span>\n      <span data-testid=\"accordion-list-item-subheader\">{{\n        listItemSubHeader\n      }}</span>\n      <svg\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\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        />\n      </svg>\n    </button>\n  </div>\n  <div\n    role=\"region\"\n    [hidden]=\"!this.isExpanded\"\n    [ngStyle]=\"{ height: this.contentHeight }\"\n    [id]=\"id + '_section'\"\n    [attr.aria-labelledby]=\"id + '_header'\"\n    data-testid=\"accordion-list-item-content\"\n  >\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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\" [attr.aria-level]=\"labelElementLevel\" [attr.id]=\"id\">\n    <button\n      data-testid=\"accordion-list-item-expander-button\"\n      [attr.id]=\"id + '_header'\"\n      (click)=\"toggleExpanded()\"\n      tabindex=\"0\"\n      [attr.aria-expanded]=\"this.isExpanded\"\n      [attr.aria-controls]=\"id + '_section'\"\n    >\n      <span data-testid=\"accordion-list-item-header\">{{ listItemHeader }}</span>\n      <span data-testid=\"accordion-list-item-subheader\">{{\n        listItemSubHeader\n      }}</span>\n      <svg\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\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        />\n      </svg>\n    </button>\n  </div>\n  <div\n    role=\"region\"\n    [hidden]=\"!this.isExpanded\"\n    [ngStyle]=\"{ height: this.contentHeight }\"\n    [id]=\"id + '_section'\"\n    [attr.aria-labelledby]=\"id + '_header'\"\n    data-testid=\"accordion-list-item-content\"\n  >\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], labelElementLevel: [{
+                type: Input
+            }], listItemHeader: [{
+                type: Input
+            }], listItemSubHeader: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }] } });
+
+class NggAccordionComponent {
+    constructor() {
+        this.closeOthers = false;
+    }
+    get expandAll() {
+        return this._expandAll;
+    }
+    set expandAll(value) {
+        if (value === this._expandAll)
+            return;
+        if (this._expandAll) {
+            this.expandAllSubscription?.unsubscribe();
+        }
+        this._expandAll = value;
+        this.expandAllSubscription = this._expandAll?.subscribe(() => {
+            if (this.closeOthers === false) {
+                const itemArray = this.items ? Array.from(this.items) : undefined;
+                if (itemArray) {
+                    for (const i of itemArray) {
+                        i.expand();
+                    }
+                }
+            }
+        });
+    }
+    ngAfterContentChecked() {
+        if (this.closeOthers) {
+            const itemArray = this.items ? Array.from(this.items) : undefined;
+            if (itemArray) {
+                for (const i of itemArray) {
+                    i.expandedChange.subscribe((child) => this.onChildExpanded(child));
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.closeOthers) {
+            const itemArray = this.items ? Array.from(this.items) : undefined;
+            if (itemArray) {
+                for (const i of itemArray) {
+                    i.expandedChange.unsubscribe();
+                }
+            }
+        }
+        this.expandAllSubscription?.unsubscribe();
+    }
+    onChildExpanded(childIdentity) {
+        if (this.closeOthers && childIdentity.isExpanded && this.items) {
+            this.items.forEach((item) => {
+                if (item !== childIdentity)
+                    item.shrink();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", 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: [{
+                type: ContentChildren,
+                args: [NggAccordionListItemComponent]
+            }], closeOthers: [{
+                type: Input
+            }], expandAll: [{
+                type: Input
+            }] } });
+
+class NggAccordionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggAccordionModule, declarations: [NggAccordionListItemComponent, NggAccordionComponent], imports: [CommonModule], exports: [NggAccordionListItemComponent, NggAccordionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggAccordionModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggAccordionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [NggAccordionListItemComponent, NggAccordionComponent],
+                    declarations: [NggAccordionListItemComponent, NggAccordionComponent],
+                }]
+        }] });
+
+class NggBadgeComponent {
+    /** Flag whether the component can be dismissed */
+    set isCloseable(value) {
+        this._isCloseable = value;
+    }
+    get isCloseable() {
+        return this._isCloseable === '' || !!this._isCloseable;
+    }
+    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 = '';
+        }
+    }
+    close(e) {
+        this.handleClose.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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>
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
+      {{ closeText }}
+      <i></i>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[ngg-badge]',
+                    template: `
+    <strong>
+      <ng-content></ng-content>
+    </strong>
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
+      {{ closeText }}
+      <i></i>
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { badgeType: [{
+                type: Input
+            }], isCloseable: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], customColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }, {
+                type: Input
+            }], customBackgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }, {
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], handleClose: [{
+                type: Output
+            }] } });
+
+class NggBadgeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggBadgeModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggBadgeComponent],
+                    imports: [CommonModule],
+                    exports: [NggBadgeComponent],
+                }]
+        }] });
+
+class NggButtonComponent {
+    get classes() {
+        return [this.variant, this.size ? this.size : false]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggButtonModule, declarations: [NggButtonComponent], imports: [CommonModule], exports: [NggButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggButtonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggButtonComponent],
+                    imports: [CommonModule],
+                    exports: [NggButtonComponent],
+                }]
+        }] });
+
+class SlidingUnderlineDirective {
+    constructor(element) {
+        this.element = element;
+    }
+    ngOnInit() {
+        if (this.element?.nativeElement) {
+            this.element.nativeElement.classList.add('slider');
+            this.element.nativeElement.addEventListener('animationend', () => {
+                this.element.nativeElement.classList.remove('left', 'slider-positive', 'slider-negative');
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (!this.disabled) {
+            if (changes.slidingUnderline &&
+                changes.key &&
+                !changes.slidingUnderline.isFirstChange() &&
+                !changes?.key?.isFirstChange()) {
+                if (changes.key.currentValue === changes.key.previousValue) {
+                    this.addAnimation(changes.slidingUnderline.currentValue, changes.slidingUnderline.previousValue);
+                }
+            }
+            else {
+                if (changes.slidingUnderline &&
+                    !changes.slidingUnderline.isFirstChange()) {
+                    this.addAnimation(changes.slidingUnderline.currentValue, changes.slidingUnderline.previousValue);
+                }
+            }
+        }
+    }
+    addAnimation(current, previous) {
+        if (current > previous)
+            this.element.nativeElement.classList.add('slider-positive');
+        else
+            this.element.nativeElement.classList.add('slider-negative');
+        this.element.nativeElement.classList.add('left');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlidingUnderlineDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SlidingUnderlineDirective, selector: "[nggSlidingUnderline]", inputs: { nggSlidingUnderline: "nggSlidingUnderline", key: "key", disabled: "disabled" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlidingUnderlineDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggSlidingUnderline]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nggSlidingUnderline: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class CellTableItemComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.valueType = 'string';
+        this.id = '';
+        this.getSignColor = (value) => {
+            if (/[−-]/.test(String(value)))
+                return 'text-danger';
+            else if (/[1-9]/.test(String(value)))
+                return 'text-success';
+            return '';
+        };
+    }
+    transformHTML(value) {
+        if (value && value.length) {
+            return this.sanitizer.bypassSecurityTrustHtml(value);
+        }
+        else {
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellTableItemComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CellTableItemComponent, selector: "[nggCellTableItem]", inputs: { row: "row", valueType: "valueType", id: "id" }, ngImport: i0, template: `
+    <ng-container [ngSwitch]="valueType">
+      <span *ngSwitchCase="'string'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'number'">{{ (row | number) || '–' }}</span>
+      <span *ngSwitchCase="'datetime'">{{
+        (row | date: 'HH:mm:ss') || '–'
+      }}</span>
+      <span *ngSwitchCase="'date'">{{
+        (row | date: 'YYYY-MM-dd') || '–'
+      }}</span>
+      <span
+        *ngSwitchCase="'custom-html'"
+        [innerHtml]="transformHTML(row) || '–'"
+      ></span>
+      <span *ngSwitchCase="'sign'" [ngClass]="getSignColor(row)">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchCase="'pct'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'streamSign'" [nggSlidingUnderline]="row">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchDefault>–</span>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SlidingUnderlineDirective, selector: "[nggSlidingUnderline]", inputs: ["nggSlidingUnderline", "key", "disabled"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellTableItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[nggCellTableItem]',
+                    template: `
+    <ng-container [ngSwitch]="valueType">
+      <span *ngSwitchCase="'string'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'number'">{{ (row | number) || '–' }}</span>
+      <span *ngSwitchCase="'datetime'">{{
+        (row | date: 'HH:mm:ss') || '–'
+      }}</span>
+      <span *ngSwitchCase="'date'">{{
+        (row | date: 'YYYY-MM-dd') || '–'
+      }}</span>
+      <span
+        *ngSwitchCase="'custom-html'"
+        [innerHtml]="transformHTML(row) || '–'"
+      ></span>
+      <span *ngSwitchCase="'sign'" [ngClass]="getSignColor(row)">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchCase="'pct'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'streamSign'" [nggSlidingUnderline]="row">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchDefault>–</span>
+    </ng-container>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { row: [{
+                type: Input
+            }], valueType: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class NggCellTableComponent {
+    constructor() {
+        this.items = new QueryList();
+        /** Make the most left element wrap */
+        this.overflowReverse = false;
+        /** List of table headers */
+        this.headerList = [];
+        /** List of data */
+        this.rows = [];
+        /** Make rows clickable and add arrow to the right */
+        this.clickableRows = false;
+        /** Label for the chevron of clickable rows */
+        this.clickLabel = 'View details';
+        /** Callback when a row is clicked */
+        this.rowClicked = new EventEmitter();
+        // ------------- EVENTS ------------------
+        /**
+         * handles the logic for when a row is clicked
+         * @param {TableRowClickedEvent} value the TableRowClickedEvent
+         */
+        this.handleClickRow = (value) => {
+            if (this.clickableRows)
+                this.rowClicked.emit(value);
+        };
+        this.getValueTypeFromMain = () => {
+            const getMain = this.headerList.find((x) => x.main);
+            if (getMain)
+                return getMain.valueType || '';
+            return '';
+        };
+        this.getTableHeaderListValueFromNonMain = (header) => {
+            if (header.valueType)
+                return header.valueType || '';
+            return '';
+        };
+        this.mainHeader = (row) => {
+            const getMain = this.headerList.find((x) => x.main);
+            if (row && getMain) {
+                return {
+                    value: row[getMain.tableKeySelector],
+                    valueType: getMain.valueType || 'string',
+                    tableKeySelector: getMain.tableKeySelector,
+                };
+            }
+            return {
+                value: '-',
+                valueType: 'string',
+                tableKeySelector: '-',
+            };
+        };
+        this.headerNoneMain = (headers) => {
+            if (this.overflowReverse)
+                return headers.filter((x) => !x.main).reverse();
+            return headers.filter((x) => !x.main);
+        };
+        this.getTableKeySelector = (row) => {
+            return this.mainHeader(row).tableKeySelector + row.rowId;
+        };
+    }
+    // ------- TRACKBY FOR STREAM ------------
+    trackByrowId(_, b) {
+        return b.rowId;
+    }
+    KeySelector(_, b) {
+        return b.tableKeySelector;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggCellTableComponent, selector: "ngg-cell-table", inputs: { minWidth: "minWidth", overflowReverse: "overflowReverse", className: "className", headerList: "headerList", rows: "rows", clickableRows: "clickableRows", clickLabel: "clickLabel" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "items", predicate: ["items"], descendants: true }], ngImport: i0, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n  <div class=\"cell-table-table d-flex flex-column\">\n    <div\n      *ngFor=\"let row of rows; trackBy: trackByrowId\"\n      (click)=\"handleClickRow(row)\"\n      class=\"cell-table--row-wrapper\"\n      role=\"rowgroup\"\n      [class.is-clickable]=\"clickableRows\"\n    >\n      <div>\n        <div #items [class.overflow-reverse]=\"overflowReverse\">\n          <!-- Main header -->\n          <div role=\"row\">\n            <div\n              nggCellTableItem\n              [row]=\"mainHeader(row).value\"\n              [valueType]=\"getValueTypeFromMain()\"\n              [attr.valueType]=\"getValueTypeFromMain()\"\n              [attr.id]=\"getTableKeySelector(row)\"\n              role=\"rowheader\"\n              aria-rowspan=\"3\"\n              aria-colspan=\"3\"\n            ></div>\n          </div>\n          <div role=\"row\">\n            <div class=\"d-flex\">\n              <!-- Sub Header -->\n              <div\n                nggCellTableItem\n                class=\"sub-header py-0 fw-bold\"\n                [row]=\"header.label\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                role=\"columnheader\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n\n          <div role=\"row\">\n            <!-- Sub Values -->\n            <div class=\"d-flex\">\n              <div\n                nggCellTableItem\n                class=\"sub-value py-0\"\n                [row]=\"row[header.tableKeySelector]\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                [attr.valueType]=\"header.valueType\"\n                role=\"cell\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"clickableRows\"\n        role=\"row\"\n        class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n      >\n        <div role=\"cell\">\n          <div\n            role=\"button\"\n            [attr.aria-label]=\"clickLabel\"\n            tabindex=\"0\"\n            [attr.aria-describedby]=\"getTableKeySelector(row)\"\n            (keydown.enter)=\"handleClickRow(row)\"\n          >\n            <svg\n              data-prefix=\"far\"\n              data-icon=\"chevron-right\"\n              class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 320 512\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n              ></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["[role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}[role=cell],[role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.cell-table--row-wrapper{border-top:1px solid var(--gds-ref-pallet-base400);display:flex;padding:1rem}.cell-table--row-wrapper>div:first-child{flex:1 1 0}.cell-table--row-wrapper.is-clickable{cursor:pointer}.cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-ref-pallet-base100)}.cell-table--arrow-container{flex:0 0 auto;width:10px}.cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-ref-pallet-base800)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CellTableItemComponent, selector: "[nggCellTableItem]", inputs: ["row", "valueType", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-cell-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n  <div class=\"cell-table-table d-flex flex-column\">\n    <div\n      *ngFor=\"let row of rows; trackBy: trackByrowId\"\n      (click)=\"handleClickRow(row)\"\n      class=\"cell-table--row-wrapper\"\n      role=\"rowgroup\"\n      [class.is-clickable]=\"clickableRows\"\n    >\n      <div>\n        <div #items [class.overflow-reverse]=\"overflowReverse\">\n          <!-- Main header -->\n          <div role=\"row\">\n            <div\n              nggCellTableItem\n              [row]=\"mainHeader(row).value\"\n              [valueType]=\"getValueTypeFromMain()\"\n              [attr.valueType]=\"getValueTypeFromMain()\"\n              [attr.id]=\"getTableKeySelector(row)\"\n              role=\"rowheader\"\n              aria-rowspan=\"3\"\n              aria-colspan=\"3\"\n            ></div>\n          </div>\n          <div role=\"row\">\n            <div class=\"d-flex\">\n              <!-- Sub Header -->\n              <div\n                nggCellTableItem\n                class=\"sub-header py-0 fw-bold\"\n                [row]=\"header.label\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                role=\"columnheader\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n\n          <div role=\"row\">\n            <!-- Sub Values -->\n            <div class=\"d-flex\">\n              <div\n                nggCellTableItem\n                class=\"sub-value py-0\"\n                [row]=\"row[header.tableKeySelector]\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                [attr.valueType]=\"header.valueType\"\n                role=\"cell\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"clickableRows\"\n        role=\"row\"\n        class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n      >\n        <div role=\"cell\">\n          <div\n            role=\"button\"\n            [attr.aria-label]=\"clickLabel\"\n            tabindex=\"0\"\n            [attr.aria-describedby]=\"getTableKeySelector(row)\"\n            (keydown.enter)=\"handleClickRow(row)\"\n          >\n            <svg\n              data-prefix=\"far\"\n              data-icon=\"chevron-right\"\n              class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 320 512\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n              ></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["[role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}[role=cell],[role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.cell-table--row-wrapper{border-top:1px solid var(--gds-ref-pallet-base400);display:flex;padding:1rem}.cell-table--row-wrapper>div:first-child{flex:1 1 0}.cell-table--row-wrapper.is-clickable{cursor:pointer}.cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-ref-pallet-base100)}.cell-table--arrow-container{flex:0 0 auto;width:10px}.cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-ref-pallet-base800)}\n"] }]
+        }], propDecorators: { items: [{
+                type: ViewChildren,
+                args: ['items']
+            }], minWidth: [{
+                type: Input
+            }], overflowReverse: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], headerList: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], clickableRows: [{
+                type: Input
+            }], clickLabel: [{
+                type: Input
+            }], rowClicked: [{
+                type: Output
+            }] } });
+
+class NggCellTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableModule, declarations: [NggCellTableComponent,
+            CellTableItemComponent,
+            SlidingUnderlineDirective], imports: [CommonModule], exports: [NggCellTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [NggCellTableComponent],
+                    declarations: [
+                        NggCellTableComponent,
+                        CellTableItemComponent,
+                        SlidingUnderlineDirective,
+                    ],
+                }]
+        }] });
+
+class Table {
+    constructor(table) {
+        this.data = table.data;
+        this.header = table.header;
+    }
+}
+
+class NggContextMenuComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /**
+         * Placement of the popover relative to the anchor element.
+         */
+        this.direction = 'ltr';
+        /**
+         * List of items to be displayed in the context menu.
+         */
+        this.menuItems = [];
+        /**
+         * Custom menu item template.
+         */
+        this.menuItemTemplate = null;
+        /**
+         * Custom menu trigger template.
+         */
+        this.menuAnchorTemplate = null;
+        /**
+         * Emits when a menu item is clicked.
+         */
+        this.contextMenuItemClicked = new EventEmitter();
+        this.isActive = false;
+        ContextMenuTransStyles.register();
+    }
+    get placement() {
+        return this.direction === 'ltr' ? 'bottom-start' : 'bottom-end';
+    }
+    open() {
+        if (this.isActive) {
+            this.close();
+            return;
+        }
+        this.isActive = true;
+    }
+    close() {
+        this.isActive = false;
+    }
+    onItemClick(item) {
+        this.contextMenuItemClicked.emit(item);
+        this.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<gds-context-menu\n  *nggCoreElement\n  data-testid=\"context-menu\"\n  [placement]=\"placement\"\n  [open]=\"isActive\"\n>\n  <div style=\"display: contents\" slot=\"trigger\">\n    <ng-container\n      [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n    >\n    </ng-container>\n  </div>\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <gds-menu-item *nggCoreElement (click)=\"onItemClick(menuItem)\">\n      <ng-container\n        [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n      >\n      </ng-container>\n    </gds-menu-item>\n  </ng-container>\n</gds-context-menu>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-context-menu', template: "<gds-context-menu\n  *nggCoreElement\n  data-testid=\"context-menu\"\n  [placement]=\"placement\"\n  [open]=\"isActive\"\n>\n  <div style=\"display: contents\" slot=\"trigger\">\n    <ng-container\n      [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n    >\n    </ng-container>\n  </div>\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <gds-menu-item *nggCoreElement (click)=\"onItemClick(menuItem)\">\n      <ng-container\n        [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n      >\n      </ng-container>\n    </gds-menu-item>\n  </ng-container>\n</gds-context-menu>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { direction: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], menuItemTemplate: [{
+                type: Input
+            }], menuAnchorTemplate: [{
+                type: Input
+            }], contextMenuItemClicked: [{
+                type: Output
+            }], popover: [{
+                type: ViewChild,
+                args: ['contextMenuPopover']
+            }], anchor: [{
+                type: ViewChild,
+                args: ['contextMenuAnchor']
+            }] } });
+
+class NggContextMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule, NggCoreWrapperModule$1], exports: [NggContextMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule, NggCoreWrapperModule$1] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggContextMenuComponent],
+                    imports: [CommonModule, NggCoreWrapperModule$1],
+                    exports: [NggContextMenuComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+class NggDatepickerComponent {
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+    }
+    get showWeekNumbers() {
+        return this.options?.showWeeks ?? false;
+    }
+    get dateFormat() {
+        return this.options?.dateFormat ?? 'y-m-d';
+    }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        if (typeof newValue === 'string') {
+            newValue = new Date(newValue);
+        }
+        if (newValue !== this._value) {
+            this._value = newValue || undefined;
+        }
+    }
+    get min() {
+        const minDate = this.options?.minDate;
+        return minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
+    }
+    get max() {
+        const maxDate = this.options?.maxDate;
+        return maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
+    }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this.id = randomId();
+        this.isValid = null;
+        this.valueChange = new EventEmitter();
+        DatepickerTransStyles.register();
+    }
+    writeValue(value) {
+        this.value = value;
+        this._cdr.detectChanges();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    onDateChange(evt) {
+        const e = evt;
+        this.value = e.detail.value;
+        this.valueChange.emit(e.detail.value);
+        this.onChangeFn && this.onChangeFn(e.detail.value);
+    }
+    ngAfterViewInit() {
+        this._cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { size: "size", hideLabel: "hideLabel", disabledWeekends: "disabledWeekends", disabledDates: "disabledDates", options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NggDatepickerComponent,
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [disabledWeekends]=\"disabledWeekends\"\n    [disabledDates]=\"disabledDates\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-datepicker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NggDatepickerComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [disabledWeekends]=\"disabledWeekends\"\n    [disabledDates]=\"disabledDates\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { size: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
+            }], disabledWeekends: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isValid: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+function dateValidator(dates) {
+    return (control) => {
+        const value = control.value;
+        if (!value) {
+            return null;
+        }
+        const newDate = new Date(value);
+        const isValidDate = !isNaN(newDate.getTime());
+        if (!isValidDate) {
+            return { validDate: true };
+        }
+        const validMinDate = dates?.min ? newDate >= startOfDay(dates.min) : true;
+        const validMaxDate = dates?.max ? newDate <= endOfDay(dates.max) : true;
+        if (!validMinDate && dates?.min) {
+            return {
+                validDate: {
+                    minDate: startOfDay(dates.min),
+                    actualDate: newDate,
+                },
+            };
+        }
+        if (!validMaxDate && dates?.max) {
+            return {
+                validDate: {
+                    maxDate: endOfDay(dates.max),
+                    actualDate: newDate,
+                },
+            };
+        }
+        return null;
+    };
+}
+
+class NggDatepickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggCoreWrapperModule$1], exports: [NggDatepickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggCoreWrapperModule$1] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggDatepickerComponent],
+                    imports: [CommonModule, NggCoreWrapperModule$1],
+                    exports: [NggDatepickerComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+class NggDropdownButtonDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownButtonDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggDropdownButtonDirective, selector: "[nggDropdownButton]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggDropdownButton]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class NggDropdownOptionDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggDropdownOption]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class NggDropdownComponent {
+    //
+    set options(value) {
+        this._options = value;
+        this.texts = {
+            ...this.texts,
+            select: this.displayTextByValue(this._value),
+        };
+    }
+    get options() {
+        return this._options;
+    }
+    set texts(texts) {
+        this._texts = {
+            ...(texts ? texts : {}),
+            select: this.textToDisplay(texts, this._value),
+        };
+    }
+    get texts() {
+        return this._texts;
+    }
+    //
+    set multiSelect(value) {
+        this._multiSelect = this.convertToBoolean(value);
+    }
+    get multiSelect() {
+        return this._multiSelect;
+    }
+    //
+    set searchable(value) {
+        this._searchable = this.convertToBoolean(value);
+    }
+    get searchable() {
+        return this._searchable;
+    }
+    //
+    set value(newValue) {
+        if (!this.options)
+            return;
+        this._value = newValue;
+        this.texts = {
+            ...this.texts,
+            select: this.displayTextByValue(this._value),
+        };
+    }
+    get value() {
+        return this._value;
+    }
+    //
+    get selectedOption() {
+        return Array.isArray(this.value)
+            ? this.value.map((v) => this.optionByValue(v))
+            : this.optionByValue(this.value);
+    }
+    get control() {
+        return this.injector.get(NgControl);
+    }
+    constructor(injector, _cdr) {
+        this.injector = injector;
+        this._cdr = _cdr;
+        this.loop = false;
+        this.display = 'label';
+        this.useValue = 'value';
+        this.maxHeight = 500;
+        this._multiSelect = false;
+        this._searchable = false;
+        this.valueChange = new EventEmitter();
+        this.touched = new EventEmitter();
+        this.onValueChange = (event) => {
+            const target = event.target;
+            this._value = target.value;
+            this.texts = {
+                ...this.texts,
+                select: this.displayTextByValue(this._value),
+            };
+            this.onChangeFn?.(this.value);
+            this.valueChange.emit(this.value);
+            this._cdr.detectChanges();
+        };
+        // These adapter functions are used to maintain backwards compatibility with the old interface
+        this.compareWithAdapter = (o1, o2) => {
+            const compareFn = this.compareWith || ((a, b) => a === b);
+            return compareFn(o1, o2);
+        };
+        this.searchFilterAdapter = (q, o) => {
+            if (this.searchFilter)
+                return this.searchFilter(q, o.value);
+            else
+                return ((q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase()))(q, o);
+        };
+        this.optionByValue = (value) => {
+            return this.options?.find((o) => o[this.useValue] === value);
+        };
+        this.displayTextByValue = (value) => {
+            return this.textToDisplay(this.texts, value);
+        };
+        this.textToDisplay = (dropdownTexts, value) => {
+            if (!Array.isArray(value))
+                return (this.optionByValue(value)?.[this.display] ||
+                    (dropdownTexts?.placeholder ?? 'Select'));
+            const displayValues = value.map((v) => this.optionByValue(v)?.[this.display]);
+            return displayValues?.length > 2
+                ? `${displayValues.length} ${dropdownTexts?.selected} `
+                : displayValues?.join(', ') || (dropdownTexts?.placeholder ?? 'Select');
+        };
+        DropdownTransStyles.register();
+    }
+    ngOnInit() {
+        if (!this._value) {
+            if (this.multiSelect)
+                this._value = this.options
+                    ?.filter((o) => o.selected === true)
+                    ?.map((o) => o[this.useValue]);
+            else
+                this._value = this.options?.find((o) => o.selected === true)?.[this.useValue];
+            this.texts = {
+                ...this.texts,
+                select: this.displayTextByValue(this._value),
+            };
+        }
+        this.texts = {
+            placeholder: this.texts?.placeholder ?? 'Select',
+            selected: this.texts?.selected ?? 'selected',
+            select: this.displayTextByValue(this._value),
+        };
+    }
+    writeValue(value) {
+        this.value = value;
+        this._cdr.detectChanges();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    convertToBoolean(value) {
+        return (value === '' || value === 'true' || value.toString() === 'true' || false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", loop: "loop", display: "display", useValue: "useValue", label: "label", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", syncPopoverWidth: "syncPopoverWidth", size: "size", hideLabel: "hideLabel", maxHeight: "maxHeight", disableMobileStyles: "disableMobileStyles", options: "options", texts: "texts", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NggDropdownComponent,
+                multi: true,
+            },
+        ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [maxHeight]=\"maxHeight\"\n    [disableMobileStyles]=\"disableMobileStyles\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <ng-container *ngIf=\"!option.heading; else optionHeading\">\n        <gds-option *nggCoreElement [value]=\"option[useValue]\"\n          ><ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container\n        ></gds-option>\n      </ng-container>\n      <ng-template #optionHeading>\n        <gds-menu-heading *nggCoreElement>{{ option.label }}</gds-menu-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-dropdown', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NggDropdownComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [maxHeight]=\"maxHeight\"\n    [disableMobileStyles]=\"disableMobileStyles\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <ng-container *ngIf=\"!option.heading; else optionHeading\">\n        <gds-option *nggCoreElement [value]=\"option[useValue]\"\n          ><ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container\n        ></gds-option>\n      </ng-container>\n      <ng-template #optionHeading>\n        <gds-menu-heading *nggCoreElement>{{ option.label }}</gds-menu-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector, decorators: [{
+                    type: Inject,
+                    args: [Injector]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                type: Input
+            }], loop: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], useValue: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], searchFilter: [{
+                type: Input
+            }], syncPopoverWidth: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], disableMobileStyles: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], texts: [{
+                type: Input
+            }], multiSelect: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }], customOption: [{
+                type: ContentChild,
+                args: [NggDropdownOptionDirective]
+            }], customButton: [{
+                type: ContentChild,
+                args: [NggDropdownButtonDirective]
+            }], gdsDropdown: [{
+                type: ViewChild,
+                args: ['gdsDropdown', { static: false }]
+            }] } });
+
+class NggDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
+            NggDropdownOptionDirective,
+            NggDropdownButtonDirective], imports: [CommonModule, NggCoreWrapperModule$1], exports: [NggDropdownComponent,
+            NggDropdownOptionDirective,
+            NggDropdownButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownModule, imports: [CommonModule, NggCoreWrapperModule$1] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NggDropdownComponent,
+                        NggDropdownOptionDirective,
+                        NggDropdownButtonDirective,
+                    ],
+                    imports: [CommonModule, NggCoreWrapperModule$1],
+                    exports: [
+                        NggDropdownComponent,
+                        NggDropdownOptionDirective,
+                        NggDropdownButtonDirective,
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+class NggInPageWizardStepCardComponent {
+    constructor() {
+        this.handleNextClick = new EventEmitter();
+        this.handleEditClick = new EventEmitter();
+        this.stepIsValid = () => {
+            return true;
+        };
+        this.stepText = '';
+        this.title = '';
+        this.editBtnText = '';
+        this.nextBtnText = '';
+        this.showNextBtnIcon = true;
+        this.isCompleted = false;
+        this.disableNext = false;
+        this.isActive = false;
+    }
+    handleOnEditBtnClick(event) {
+        this.isActive = !this.isActive;
+        this.isCompleted = false;
+        this.handleEditClick.emit(event);
+    }
+    handleOnNextBtnClick(event) {
+        if (this.stepIsValid()) {
+            this.isActive = false;
+            this.isCompleted = true;
+        }
+        this.handleNextClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n    *ngIf=\"isCompleted && !isActive\"\n  >\n    <button\n      class=\"secondary\"\n      (click)=\"handleOnEditBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n    >\n      <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n      {{ editBtnText }}\n    </button>\n  </footer>\n\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n    *ngIf=\"isActive\"\n  >\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n      <ng-container *ngIf=\"showNextBtnIcon\">\n        <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n      </ng-container>\n    </button>\n  </footer>\n</section>\n\n<ng-template #editIcon>\n  <svg\n    viewBox=\"0 0 576 512\"\n    class=\"edit-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <path\n      fill=\"var(--color)\"\n      d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n    ></path>\n  </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1\"\n    class=\"next-icon\"\n    data-testid=\"in-page-wizard-step-card-next-icon\"\n  >\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 13l-6 6\" />\n    <path d=\"M6 13l6 6\" />\n  </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-in-page-wizard-step-card', template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n    *ngIf=\"isCompleted && !isActive\"\n  >\n    <button\n      class=\"secondary\"\n      (click)=\"handleOnEditBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n    >\n      <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n      {{ editBtnText }}\n    </button>\n  </footer>\n\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n    *ngIf=\"isActive\"\n  >\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n      <ng-container *ngIf=\"showNextBtnIcon\">\n        <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n      </ng-container>\n    </button>\n  </footer>\n</section>\n\n<ng-template #editIcon>\n  <svg\n    viewBox=\"0 0 576 512\"\n    class=\"edit-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <path\n      fill=\"var(--color)\"\n      d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n    ></path>\n  </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1\"\n    class=\"next-icon\"\n    data-testid=\"in-page-wizard-step-card-next-icon\"\n  >\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 13l-6 6\" />\n    <path d=\"M6 13l6 6\" />\n  </svg>\n</ng-template>\n" }]
+        }], propDecorators: { handleNextClick: [{
+                type: Output
+            }], handleEditClick: [{
+                type: Output
+            }], stepIsValid: [{
+                type: Input
+            }], stepText: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], editBtnText: [{
+                type: Input
+            }], nextBtnText: [{
+                type: Input
+            }], showNextBtnIcon: [{
+                type: Input
+            }], isCompleted: [{
+                type: Input
+            }], disableNext: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }] } });
+
+class NggInPageWizardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardModule, declarations: [NggInPageWizardStepCardComponent], imports: [CommonModule], exports: [NggInPageWizardStepCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggInPageWizardStepCardComponent],
+                    imports: [CommonModule],
+                    exports: [NggInPageWizardStepCardComponent],
+                }]
+        }] });
+
+class NggModalFooterDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalFooterDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggModalFooterDirective, selector: "[nggModalFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggModalFooter]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+
+class NggModalHeaderDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalHeaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggModalHeaderDirective, selector: "[nggModalHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggModalHeader]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+
+class NggModalComponent {
+    get trapFocus() {
+        return this._trapFocus;
+    }
+    set trapFocus(value) {
+        this._trapFocus = value;
+        if (value) {
+            if (this._isOpen) {
+                this.enableFocusTrap();
+            }
+        }
+        else {
+            this.disableFocusTrap();
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    set isOpen(value) {
+        this._isOpen = value;
+        if (value) {
+            if (this.trapFocus) {
+                this.enableFocusTrap();
+            }
+            if (this.disableBodyScroll) {
+                disableBodyScroll(this.ref.nativeElement, {
+                    allowTouchMove: (el) => {
+                        // Allow touchmove for elements inside modal, its required for scroll to work on iOS devices
+                        return this.ref.nativeElement.contains(el);
+                    },
+                });
+            }
+        }
+        else {
+            this.disableFocusTrap();
+            if (this.disableBodyScroll) {
+                enableBodyScroll(this.ref.nativeElement);
+            }
+        }
+    }
+    get open() {
+        return this.isOpen;
+    }
+    constructor(ref, configurableFocusTrapFactory) {
+        this.ref = ref;
+        this.configurableFocusTrapFactory = configurableFocusTrapFactory;
+        this.disableBodyScroll = true;
+        this.isOpenChange = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.dismiss = new EventEmitter();
+        this.guid = '';
+        this.configurableFocusTrap = this.configurableFocusTrapFactory.create(this.ref.nativeElement);
+    }
+    ngOnInit() {
+        this.guid = globalThis.crypto.randomUUID();
+        if (this._isOpen && this.trapFocus)
+            this.enableFocusTrap();
+        else
+            this.disableFocusTrap();
+    }
+    handleCloseClick(event) {
+        this.closeModal(event);
+    }
+    handleBackdropClick(event) {
+        if (event.target == this.backdropRef?.nativeElement)
+            this.closeModal(event);
+    }
+    handleDismiss(event) {
+        this.dismiss.emit(event);
+    }
+    handleConfirm(event) {
+        this.confirm.emit(event);
+    }
+    closeModal(event) {
+        if (this.closed.observers.length > 0) {
+            this.closed.emit(event);
+        }
+        else {
+            this.isOpen = false;
+            this.isOpenChange.emit(this.isOpen);
+        }
+    }
+    enableFocusTrap() {
+        if (this.configurableFocusTrap) {
+            this.configurableFocusTrap.enabled = true;
+            this.configurableFocusTrap.focusInitialElementWhenReady();
+        }
+    }
+    disableFocusTrap() {
+        if (this.configurableFocusTrap) {
+            this.configurableFocusTrap.enabled = false;
+        }
+    }
+    ngOnDestroy() {
+        this.configurableFocusTrap?.destroy();
+        enableBodyScroll(this.ref.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", disableBodyScroll: "disableBodyScroll", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.entered]=\"isOpen\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          [attr.id]=\"'modal-header-' + guid\"\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => NggModalHeaderComponent), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(() => NggModalBodyComponent), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(() => NggModalFooterComponent), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], animations: [
+            trigger('modalAnimation', [
+                transition(':enter', [
+                    query('aside', style({ transform: 'translateX(100%)' }), {
+                        optional: true,
+                    }),
+                    query('.backdrop, [role=dialog]', style({ opacity: '0' }), {
+                        optional: true,
+                    }),
+                    group([
+                        query('aside', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(0)' })), { optional: true }),
+                        query('.backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '1' })), { optional: true }),
+                    ]),
+                ]),
+                transition(':leave', [
+                    query('aside', style({ transform: 'translateX(0)' }), {
+                        optional: true,
+                    }),
+                    group([
+                        query('aside', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(100%)' })), { optional: true }),
+                        query('.backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '0' })), { optional: true }),
+                    ]),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('modalAnimation', [
+                            transition(':enter', [
+                                query('aside', style({ transform: 'translateX(100%)' }), {
+                                    optional: true,
+                                }),
+                                query('.backdrop, [role=dialog]', style({ opacity: '0' }), {
+                                    optional: true,
+                                }),
+                                group([
+                                    query('aside', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(0)' })), { optional: true }),
+                                    query('.backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '1' })), { optional: true }),
+                                ]),
+                            ]),
+                            transition(':leave', [
+                                query('aside', style({ transform: 'translateX(0)' }), {
+                                    optional: true,
+                                }),
+                                group([
+                                    query('aside', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(100%)' })), { optional: true }),
+                                    query('.backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '0' })), { optional: true }),
+                                ]),
+                            ]),
+                        ]),
+                    ], template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.entered]=\"isOpen\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          [attr.id]=\"'modal-header-' + guid\"\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.ConfigurableFocusTrapFactory }], propDecorators: { modalType: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], dismissLabel: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input
+            }], hideFooter: [{
+                type: Input
+            }], disableBodyScroll: [{
+                type: Input
+            }], trapFocus: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], confirm: [{
+                type: Output
+            }], dismiss: [{
+                type: Output
+            }], open: [{
+                type: HostBinding,
+                args: ['class.open']
+            }], backdropRef: [{
+                type: ViewChild,
+                args: ['backdrop']
+            }], modalHeaderContent: [{
+                type: ContentChild,
+                args: [NggModalHeaderDirective]
+            }], modalFooterContent: [{
+                type: ContentChild,
+                args: [NggModalFooterDirective]
+            }] } });
+class NggModalHeaderComponent {
+    constructor() {
+        this.closed = new EventEmitter();
+    }
+    handleClose(event) {
+        this.closed.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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)}: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: "17.3.12", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ngg-modal-header]', 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>
+  `, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+class NggModalBodyComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggModalBodyComponent, selector: "[ngg-modal-body]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }] });
+class NggModalFooterComponent {
+    constructor() {
+        this.dismiss = new EventEmitter();
+        this.confirm = new EventEmitter();
+    }
+    handleDismiss(event) {
+        this.dismiss.emit(event);
+    }
+    handleConfirm(event) {
+        this.confirm.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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)}: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: "17.3.12", ngImport: i0, type: NggModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ngg-modal-footer]', template: `
+    <button
+      data-testid="modal-dismiss-button"
+      *ngIf="dismissLabel"
+      class="secondary"
+      (click)="this.handleDismiss($event)"
+    >
+      {{ dismissLabel }}
+    </button>
+    <button
+      data-testid="modal-confirm-button"
+      *ngIf="confirmLabel"
+      class="primary"
+      (click)="this.handleConfirm($event)"
+    >
+      {{ confirmLabel }}
+    </button>
+  `, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }], propDecorators: { dismissLabel: [{
+                type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }], confirm: [{
+                type: Output
+            }] } });
+
+const DECLARATIONS = [
+    NggModalComponent,
+    NggModalHeaderComponent,
+    NggModalBodyComponent,
+    NggModalFooterComponent,
+    NggModalHeaderDirective,
+    NggModalFooterDirective,
+];
+const EXPORTS = [
+    NggModalComponent,
+    NggModalHeaderDirective,
+    NggModalFooterDirective,
+];
+class NggModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
+            NggModalHeaderComponent,
+            NggModalBodyComponent,
+            NggModalFooterComponent,
+            NggModalHeaderDirective,
+            NggModalFooterDirective], imports: [A11yModule, CommonModule], exports: [NggModalComponent,
+            NggModalHeaderDirective,
+            NggModalFooterDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalModule, imports: [A11yModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [A11yModule, CommonModule],
+                    exports: EXPORTS,
+                    declarations: DECLARATIONS,
+                }]
+        }] });
+
+class NggProgressCircleComponent {
+    constructor() {
+        this._startValue = '0deg';
+        this._endValue = '0deg';
+        /** id of the progress circle */
+        this.id = `${randomId()}-progress-circle`;
+        /** theme of the progress circle */
+        this.theme = 'warning';
+    }
+    /** progress circle value in percentage */
+    set value(val) {
+        const degrees = `${calculateDegrees(val)}deg`;
+        this._endValue = degrees;
+        if (this.theme === 'disabled') {
+            this._startValue = degrees;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", ngImport: i0, type: NggProgressCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-progress-circle', template: "<div\n  class=\"gds-progress-circle\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"value\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-label]=\"id\"\n>\n  <div class=\"ring full-ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"inner-circle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], propDecorators: { _startValue: [{
+                type: HostBinding,
+                args: ['style.--start-value']
+            }], _endValue: [{
+                type: HostBinding,
+                args: ['style.--end-value']
+            }], id: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class NggProgressCircleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggProgressCircleModule, declarations: [NggProgressCircleComponent], imports: [CommonModule], exports: [NggProgressCircleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggProgressCircleModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggProgressCircleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggProgressCircleComponent],
+                    imports: [CommonModule],
+                    exports: [NggProgressCircleComponent],
+                }]
+        }] });
+
+class NggSegmentedControlComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
+    <div class="group">
+      <a
+        *ngFor="let control of $controls | async"
+        [routerLink]="control.url"
+        routerLinkActive="active"
+        class="button"
+        >{{ control.text }}</a
+      >
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.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: "17.3.12", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-segmented-control', template: `
+    <div class="group">
+      <a
+        *ngFor="let control of $controls | async"
+        [routerLink]="control.url"
+        routerLinkActive="active"
+        class="button"
+        >{{ control.text }}</a
+      >
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], propDecorators: { $controls: [{
+                type: Input
+            }] } });
+
+class NggSegmentedControlModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSegmentedControlModule, imports: [RouterModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggSegmentedControlComponent],
+                    imports: [RouterModule, CommonModule],
+                    exports: [NggSegmentedControlComponent],
+                }]
+        }] });
+
+const ON_SCROLL_TOKEN = new InjectionToken('ON_SCROLL_TOKEN');
+class NggOnScrollDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.onScroll$ = new Subject();
+        this.destroy$ = new Subject();
+    }
+    ngAfterViewInit() {
+        if (this.elementRef) {
+            fromEvent(this.elementRef?.nativeElement, 'scroll')
+                .pipe(takeUntil(this.destroy$), throttle(() => interval(30)))
+                .subscribe(() => {
+                this.onScroll$.next(null); // Changes: added null due to TS error
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(null);
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggOnScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggOnScrollDirective, selector: "[nggOnScroll]", providers: [
+            {
+                provide: ON_SCROLL_TOKEN,
+                useFactory: (component) => component?.onScroll$,
+                deps: [NggOnScrollDirective],
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggOnScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggOnScroll]',
+                    providers: [
+                        {
+                            provide: ON_SCROLL_TOKEN,
+                            useFactory: (component) => component?.onScroll$,
+                            deps: [NggOnScrollDirective],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class NggSharedModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggSharedModule, declarations: [NggOnScrollDirective], imports: [CommonModule], exports: [NggOnScrollDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSharedModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggOnScrollDirective],
+                    imports: [CommonModule],
+                    exports: [NggOnScrollDirective],
+                }]
+        }] });
+
+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.unitLabel = 'kr';
+        this.disabled = false;
+        this.value = 0;
+        this.sliderChange = new EventEmitter();
+        this.sliderTouch = new EventEmitter();
+        this.style = {};
+    }
+    ngOnInit() {
+        this.setTrackBackground();
+    }
+    ngOnChanges(changes) {
+        if (['min', 'max', 'value'].some((x) => Object.prototype.hasOwnProperty.call(changes, x))) {
+            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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggSliderComponent, selector: "ngg-slider", inputs: { name: "name", min: "min", max: "max", step: "step", label: "label", instruction: "instruction", placeholder: "placeholder", errorMessage: "errorMessage", hasTextbox: "hasTextbox", unitLabel: "unitLabel", disabled: "disabled", value: "value", enterkeyhint: "enterkeyhint" }, outputs: { sliderChange: "sliderChange", sliderTouch: "sliderTouch" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NggSliderComponent,
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSliderComponent, decorators: [{
+            type: Component,
+            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\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n" }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], instruction: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], hasTextbox: [{
+                type: Input
+            }], unitLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], enterkeyhint: [{
+                type: Input
+            }], sliderChange: [{
+                type: Output
+            }], sliderTouch: [{
+                type: Output
+            }] } });
+
+class NggSliderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggSliderModule, declarations: [NggSliderComponent], imports: [CommonModule, FormsModule], exports: [NggSliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSliderModule, imports: [CommonModule, FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule],
+                    exports: [NggSliderComponent],
+                    declarations: [NggSliderComponent],
+                }]
+        }] });
+
+class NggSortableListComponent {
+    constructor() {
+        this.groups = [];
+        this.shouldDisplayCheckboxes = false;
+        this.isReadOnly = false;
+        this.isDraggable = true;
+        this.description = '';
+        this.suffixTemplate = null;
+        this.itemSelectionChanged = new EventEmitter();
+        this.itemOrderChanged = new EventEmitter();
+        this.focusedIndex = { 0: 0 };
+    }
+    /**
+     * Toggles the selection of a checklist item and updates its position in the list.
+     *
+     * @param item - The checklist item to update.
+     */
+    toggleSelection(item) {
+        item.selected = !item.selected;
+        this.emitCheckListItem(item);
+    }
+    /**
+     * Handles the onDragDrop event.
+     *
+     * @param event - The drag and drop event.
+     */
+    onDragDrop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+        }
+        this.emitItemOrderChanged([Number(event.previousContainer.id), event.previousIndex], [Number(event.container.id), event.currentIndex]);
+    }
+    /**
+     * Handles moving items up or down using the alt + arrow up or alt + arrow down keys.
+     *
+     * @param groupIndex - The index of the group.
+     * @param currentItemIndex - The current index of the item.
+     * @param newItemIndex - The new index of the item.
+     */
+    onAltArrowKeydown(groupIndex, currentItemIndex, newItemIndex, event) {
+        event.preventDefault();
+        let newIndex = newItemIndex;
+        let newGroupIndex = groupIndex;
+        let transfer = false;
+        if (newIndex > this.groups[groupIndex].items.length - 1) {
+            newIndex = 0;
+            newGroupIndex = groupIndex + 1;
+            transfer = true;
+            this.focusedIndex[groupIndex] = this.groups[groupIndex].items.length - 2;
+        }
+        else if (newIndex < 0) {
+            newGroupIndex = groupIndex - 1;
+            newIndex = this.groups[newGroupIndex].items.length;
+            transfer = true;
+            this.focusedIndex[groupIndex] = 0;
+        }
+        if (transfer) {
+            transferArrayItem(this.groups[groupIndex].items, this.groups[newGroupIndex].items, currentItemIndex, newIndex);
+        }
+        else {
+            moveItemInArray(this.groups[groupIndex].items, currentItemIndex, newIndex);
+        }
+        this.emitItemOrderChanged([groupIndex, currentItemIndex], [newGroupIndex, newIndex]);
+        setTimeout(() => {
+            this.focusItem(newGroupIndex, newIndex);
+        });
+    }
+    /**
+     * Handles focus by arrow keydown event.
+     *
+     * @param groupIndex - The index of the group.
+     * @param itemIndex - The index of the item.
+     * @param event - The keyboard event.
+     */
+    onArrowKeydown(groupIndex, itemIndex, event) {
+        event.preventDefault();
+        setTimeout(() => {
+            let gi = groupIndex;
+            if (itemIndex > this.groups[groupIndex].items.length - 1) {
+                gi = groupIndex + 1;
+                itemIndex = 0;
+            }
+            if (itemIndex < 0) {
+                gi = groupIndex - 1;
+                if (gi < 0) {
+                    return;
+                }
+                itemIndex = this.groups[gi].items.length - 1;
+            }
+            this.focusItem(gi, itemIndex);
+        });
+    }
+    /**
+     * Emits the item order changed event.
+     *
+     * @param previousIndex - The previous index of the item.
+     * @param currentIndex - The current index of the item.
+     */
+    emitItemOrderChanged(previousIndex, currentIndex) {
+        this.itemOrderChanged.emit({
+            previousIndex,
+            currentIndex,
+            groups: [...this.groups],
+        });
+    }
+    /**
+     * Emits the selected checklist item through an event.
+     *
+     * @param item - The checklist item to emit.
+     */
+    emitCheckListItem(item) {
+        this.itemSelectionChanged.emit({ changedItem: item, groups: this.groups });
+    }
+    /**
+     * Focuses on a specific item in the sortable list.
+     *
+     * @param groupIndex - The index of the group.
+     * @param itemIndex - The index of the item.
+     */
+    focusItem(groupIndex, itemIndex) {
+        const groupElements = this.sortableListGroups.nativeElement.querySelectorAll('.item-list-group');
+        if (groupElements && groupElements.length > groupIndex) {
+            const itemElements = groupElements[groupIndex].querySelectorAll('.item');
+            if (itemElements && itemElements.length > itemIndex) {
+                if (this.shouldDisplayCheckboxes) {
+                    itemElements[itemIndex].querySelector('input').focus();
+                }
+                else {
+                    itemElements[itemIndex].focus();
+                }
+                this.focusedIndex[groupIndex] = itemIndex;
+            }
+        }
+    }
+    /**
+     * Checks if an item has focus.
+     *
+     * @param groupIndex - The index of the group.
+     * @param itemIndex - The index of the item.
+     */
+    itemHasFocus(groupIndex, itemIndex) {
+        if (!this.focusedIndex[groupIndex]) {
+            this.focusedIndex[groupIndex] = 0;
+        }
+        return this.focusedIndex[groupIndex] === itemIndex;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggSortableListComponent, selector: "ngg-sortable-list", inputs: { groups: "groups", shouldDisplayCheckboxes: "shouldDisplayCheckboxes", isReadOnly: "isReadOnly", isDraggable: "isDraggable", description: "description", suffixTemplate: "suffixTemplate" }, outputs: { itemSelectionChanged: "itemSelectionChanged", itemOrderChanged: "itemOrderChanged" }, viewQueries: [{ propertyName: "sortableListGroups", first: true, predicate: ["sortableListGroups"], descendants: true }], ngImport: i0, template: "<div class=\"item-list\">\n  <ng-container>\n    <p class=\"item-list-header\">\n      <span class=\"item-list-header-title\">{{ description }}</span>\n    </p>\n    <div #sortableListGroups cdkDropListGroup>\n      <div\n        *ngFor=\"let group of groups; let g_i = index\"\n        class=\"item-list-group\"\n        [class.drag-enabled]=\"isDraggable && !isReadOnly\"\n        role=\"list\"\n        cdkDropList\n        [cdkDropListData]=\"group.items\"\n        [id]=\"g_i.toString()\"\n        (cdkDropListDropped)=\"onDragDrop($event)\"\n      >\n        <p\n          *ngIf=\"group.title && group.title.length > 0\"\n          class=\"item-list-header\"\n        >\n          <span class=\"item-list-header-title\">{{ group.title }}</span>\n        </p>\n        <p\n          *ngIf=\"group.description && group.description.length > 0\"\n          class=\"item-list-header-description\"\n        >\n          {{ group.description }}\n        </p>\n        <div\n          *ngFor=\"let checklistItem of group.items; let i = index\"\n          [cdkDragDisabled]=\"!isDraggable || isReadOnly\"\n          [cdkDragData]=\"checklistItem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          class=\"item-box\"\n          role=\"listitem\"\n        >\n          <div *cdkDragPlaceholder class=\"item-custom-placeholder\"></div>\n          <label\n            (keydown.alt.arrowDown)=\"onAltArrowKeydown(g_i, i, i + 1, $event)\"\n            (keydown.alt.arrowUp)=\"onAltArrowKeydown(g_i, i, i - 1, $event)\"\n            (keydown.arrowDown)=\"onArrowKeydown(g_i, i + 1, $event)\"\n            (keydown.arrowUp)=\"onArrowKeydown(g_i, i - 1, $event)\"\n            class=\"form-control item-control align-items-center item\"\n            [tabindex]=\"shouldDisplayCheckboxes ? '-1' : '0'\"\n          >\n            <div class=\"form-control\">\n              <input\n                (change)=\"toggleSelection(checklistItem)\"\n                [checked]=\"checklistItem.selected\"\n                [disabled]=\"isReadOnly\"\n                [type]=\"shouldDisplayCheckboxes ? 'checkbox' : 'hidden'\"\n              />\n              <div class=\"item-box-title\">\n                <span name=\"agendaItemName\"\n                  >{{ checklistItem.name }}\n                  <span\n                    *ngIf=\"checklistItem.hasCustomSuffix\"\n                    class=\"item-list-suffix\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        suffixTemplate;\n                        context: { $implicit: checklistItem }\n                      \"\n                      class=\"user-icon\"\n                    >\n                    </ng-container>\n                  </span>\n                </span>\n                <br />\n                <span *ngIf=\"!!checklistItem.description\">\n                  <span class=\"item-list-suffix\" name=\"agendaItemToolTip\">\n                    {{ checklistItem.description }}\n                  </span>\n                  <br />\n                </span>\n              </div>\n              <i></i>\n            </div>\n            <div *ngIf=\"isDraggable && !isReadOnly\" class=\"item-grip-icon\">\n              <i class=\"sg-icon sg-icon-grip-vertical text-primary\"></i>\n            </div>\n          </label>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".item-list{width:100%;display:block}label.item{padding:0!important}.item-box{background-color:var(--sg-card-background);color:var(--text-primary-color);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;font-size:14px;margin:5px 0;border:1px solid var(--border-color);border-radius:4px}.form-control{line-height:20px;font-size:16px;font-weight:500}.item-list-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.item-list-header-title{font-weight:600;font-size:1rem;line-height:1.25rem;font-style:normal}.item-list-header-subtitle{font-size:.75rem;color:var(--text-primary-color);display:flex;justify-content:center;align-content:center}.item-list-suffix{font-weight:400;font-size:.85rem}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-grip-icon{font-weight:400;padding:.75rem 1rem .75rem 0rem}.cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing!important;pointer-events:all!important}.item-custom-placeholder.cdk-drag-placeholder{pointer-events:all!important}.cdk-drop-list.drag-enabled:not(.cdk-drag-placeholder) label{cursor:grab}.cdk-drop-list label:focus-visible{outline-color:#333;outline-offset:4px}.item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);pointer-events:all!important}.item-custom-placeholder{border:dotted 1px #999;min-height:44px;transition:transform .25s cubic-bezier(0,0,.2,1);border-radius:4px;margin:5px 0;padding:12px 12px 12px 16px}.user-icon{margin-right:.5rem}.item-control{width:100%;display:flex;flex-direction:row;justify-content:space-between}.form-control.item-layout{display:flex;justify-content:space-between}\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"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSortableListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-sortable-list', template: "<div class=\"item-list\">\n  <ng-container>\n    <p class=\"item-list-header\">\n      <span class=\"item-list-header-title\">{{ description }}</span>\n    </p>\n    <div #sortableListGroups cdkDropListGroup>\n      <div\n        *ngFor=\"let group of groups; let g_i = index\"\n        class=\"item-list-group\"\n        [class.drag-enabled]=\"isDraggable && !isReadOnly\"\n        role=\"list\"\n        cdkDropList\n        [cdkDropListData]=\"group.items\"\n        [id]=\"g_i.toString()\"\n        (cdkDropListDropped)=\"onDragDrop($event)\"\n      >\n        <p\n          *ngIf=\"group.title && group.title.length > 0\"\n          class=\"item-list-header\"\n        >\n          <span class=\"item-list-header-title\">{{ group.title }}</span>\n        </p>\n        <p\n          *ngIf=\"group.description && group.description.length > 0\"\n          class=\"item-list-header-description\"\n        >\n          {{ group.description }}\n        </p>\n        <div\n          *ngFor=\"let checklistItem of group.items; let i = index\"\n          [cdkDragDisabled]=\"!isDraggable || isReadOnly\"\n          [cdkDragData]=\"checklistItem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          class=\"item-box\"\n          role=\"listitem\"\n        >\n          <div *cdkDragPlaceholder class=\"item-custom-placeholder\"></div>\n          <label\n            (keydown.alt.arrowDown)=\"onAltArrowKeydown(g_i, i, i + 1, $event)\"\n            (keydown.alt.arrowUp)=\"onAltArrowKeydown(g_i, i, i - 1, $event)\"\n            (keydown.arrowDown)=\"onArrowKeydown(g_i, i + 1, $event)\"\n            (keydown.arrowUp)=\"onArrowKeydown(g_i, i - 1, $event)\"\n            class=\"form-control item-control align-items-center item\"\n            [tabindex]=\"shouldDisplayCheckboxes ? '-1' : '0'\"\n          >\n            <div class=\"form-control\">\n              <input\n                (change)=\"toggleSelection(checklistItem)\"\n                [checked]=\"checklistItem.selected\"\n                [disabled]=\"isReadOnly\"\n                [type]=\"shouldDisplayCheckboxes ? 'checkbox' : 'hidden'\"\n              />\n              <div class=\"item-box-title\">\n                <span name=\"agendaItemName\"\n                  >{{ checklistItem.name }}\n                  <span\n                    *ngIf=\"checklistItem.hasCustomSuffix\"\n                    class=\"item-list-suffix\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        suffixTemplate;\n                        context: { $implicit: checklistItem }\n                      \"\n                      class=\"user-icon\"\n                    >\n                    </ng-container>\n                  </span>\n                </span>\n                <br />\n                <span *ngIf=\"!!checklistItem.description\">\n                  <span class=\"item-list-suffix\" name=\"agendaItemToolTip\">\n                    {{ checklistItem.description }}\n                  </span>\n                  <br />\n                </span>\n              </div>\n              <i></i>\n            </div>\n            <div *ngIf=\"isDraggable && !isReadOnly\" class=\"item-grip-icon\">\n              <i class=\"sg-icon sg-icon-grip-vertical text-primary\"></i>\n            </div>\n          </label>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".item-list{width:100%;display:block}label.item{padding:0!important}.item-box{background-color:var(--sg-card-background);color:var(--text-primary-color);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;font-size:14px;margin:5px 0;border:1px solid var(--border-color);border-radius:4px}.form-control{line-height:20px;font-size:16px;font-weight:500}.item-list-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.item-list-header-title{font-weight:600;font-size:1rem;line-height:1.25rem;font-style:normal}.item-list-header-subtitle{font-size:.75rem;color:var(--text-primary-color);display:flex;justify-content:center;align-content:center}.item-list-suffix{font-weight:400;font-size:.85rem}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-grip-icon{font-weight:400;padding:.75rem 1rem .75rem 0rem}.cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing!important;pointer-events:all!important}.item-custom-placeholder.cdk-drag-placeholder{pointer-events:all!important}.cdk-drop-list.drag-enabled:not(.cdk-drag-placeholder) label{cursor:grab}.cdk-drop-list label:focus-visible{outline-color:#333;outline-offset:4px}.item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);pointer-events:all!important}.item-custom-placeholder{border:dotted 1px #999;min-height:44px;transition:transform .25s cubic-bezier(0,0,.2,1);border-radius:4px;margin:5px 0;padding:12px 12px 12px 16px}.user-icon{margin-right:.5rem}.item-control{width:100%;display:flex;flex-direction:row;justify-content:space-between}.form-control.item-layout{display:flex;justify-content:space-between}\n"] }]
+        }], propDecorators: { groups: [{
+                type: Input
+            }], shouldDisplayCheckboxes: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], isDraggable: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], suffixTemplate: [{
+                type: Input
+            }], itemSelectionChanged: [{
+                type: Output
+            }], itemOrderChanged: [{
+                type: Output
+            }], sortableListGroups: [{
+                type: ViewChild,
+                args: ['sortableListGroups']
+            }] } });
+
+class NggSortableListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSortableListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggSortableListModule, declarations: [NggSortableListComponent], imports: [CommonModule, FormsModule, DragDropModule], exports: [NggSortableListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSortableListModule, imports: [CommonModule, FormsModule, DragDropModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggSortableListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, DragDropModule],
+                    exports: [NggSortableListComponent],
+                    declarations: [NggSortableListComponent],
+                }]
+        }] });
+
+class NggModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggAccordionModule,
+            NggBadgeModule,
+            NggButtonModule,
+            NggDatepickerModule,
+            NggDropdownModule,
+            NggModalModule,
+            NggProgressCircleModule,
+            NggSegmentedControlModule,
+            NggSliderModule,
+            NggContextMenuModule,
+            NggInPageWizardModule,
+            NggCellTableModule,
+            NggSharedModule,
+            NggSortableListModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
+            NggBadgeModule,
+            NggButtonModule,
+            NggDatepickerModule,
+            NggDropdownModule,
+            NggModalModule,
+            NggProgressCircleModule,
+            NggSegmentedControlModule,
+            NggSliderModule,
+            NggContextMenuModule,
+            NggInPageWizardModule,
+            NggCellTableModule,
+            NggSharedModule,
+            NggSortableListModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule],
+                    exports: [
+                        NggAccordionModule,
+                        NggBadgeModule,
+                        NggButtonModule,
+                        NggDatepickerModule,
+                        NggDropdownModule,
+                        NggModalModule,
+                        NggProgressCircleModule,
+                        NggSegmentedControlModule,
+                        NggSliderModule,
+                        NggContextMenuModule,
+                        NggInPageWizardModule,
+                        NggCellTableModule,
+                        NggSharedModule,
+                        NggSortableListModule,
+                    ],
+                }]
+        }] });
+
+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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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        (keydown.enter)=\"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        (keydown.enter)=\"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        (keydown.enter)=\"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        (keydown.enter)=\"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        (keydown.enter)=\"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: "17.3.12", 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        (keydown.enter)=\"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        (keydown.enter)=\"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        (keydown.enter)=\"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        (keydown.enter)=\"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        (keydown.enter)=\"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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggPaginationModule, declarations: [NggPaginationComponent], imports: [CommonModule], exports: [NggPaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggPaginationModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggPaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggPaginationComponent],
+                    imports: [CommonModule],
+                    exports: [NggPaginationComponent],
+                }]
+        }] });
+
+class NggCoreElementDirective {
+    constructor() {
+        this.viewRef = null;
+        this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.vcr = inject(ViewContainerRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.template = inject((TemplateRef));
+    }
+    ngOnInit() {
+        this.vcr.clear();
+        const originalCreateElement = this.renderer.createElement;
+        this.renderer.createElement = (name, _namespace) => {
+            return this.document.createElement(getScopedTagName(name));
+        };
+        this.viewRef = this.vcr.createEmbeddedView(this.template);
+        this.renderer.createElement = originalCreateElement;
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggCoreElementDirective, selector: "[nggCoreElement]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreElementDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggCoreElement]',
+                }]
+        }] });
+
+class NggCoreWrapperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggCoreWrapperModule, declarations: [NggCoreElementDirective], imports: [CommonModule], exports: [NggCoreElementDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreWrapperModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggCoreElementDirective],
+                    imports: [CommonModule],
+                    exports: [NggCoreElementDirective],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggCellTableComponent, NggCellTableModule, NggContextMenuComponent, NggContextMenuModule, NggCoreElementDirective, NggCoreWrapperModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, NggSortableListComponent, NggSortableListModule, ON_SCROLL_TOKEN, dateValidator };
+//# sourceMappingURL=sebgroup-green-angular.mjs.map