@sebgroup/green-angular 3.6.3 → 3.8.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,16 +1,19 @@
 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, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef, Directive, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken, QueryList, ViewChildren } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Directive, Injector, Inject, ContentChild, InjectionToken, QueryList, ViewChildren, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef } from '@angular/core';
 import { randomId, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
 import '@sebgroup/green-core/components/context-menu/index.js';
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
-import { getScopedTagName } from '@sebgroup/green-core/scoping';
-import * as i2 from '@angular/forms';
+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 * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
@@ -18,9 +21,10 @@ import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { Subject, fromEvent, interval } from 'rxjs';
 import { takeUntil, throttle } from 'rxjs/operators';
-import * as i2$1 from '@angular/cdk/drag-drop';
+import * as i2$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/platform-browser';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
 
 class NggAccordionListItemComponent {
     constructor() {
@@ -279,35 +283,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-class NggCoreElementDirective {
-    constructor() {
-        this.viewRef = null;
-        this.document = inject(DOCUMENT);
-        this.renderer = inject(Renderer2);
-        this.vcr = inject(ViewContainerRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.template = inject((TemplateRef));
-    }
-    ngOnInit() {
-        this.vcr.clear();
-        const originalCreateElement = this.renderer.createElement;
-        this.renderer.createElement = (name, _namespace) => {
-            return this.document.createElement(getScopedTagName(name));
-        };
-        this.viewRef = this.vcr.createEmbeddedView(this.template);
-        this.renderer.createElement = originalCreateElement;
-        this.cdr.markForCheck();
-    }
-}
-NggCoreElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NggCoreElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggCoreElementDirective, selector: "[nggCoreElement]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[nggCoreElement]',
-                }]
-        }] });
-
 class NggContextMenuComponent {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -337,7 +312,7 @@ class NggContextMenuComponent {
          */
         this.contextMenuItemClicked = new EventEmitter();
         this.isActive = false;
-        registerTransitionalStyles();
+        ContextMenuTransStyles.register();
     }
     get placement() {
         return this.direction === 'ltr' ? 'bottom-start' : 'bottom-end';
@@ -358,7 +333,7 @@ class NggContextMenuComponent {
     }
 }
 NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<gds-context-menu\n  *nggCoreElement\n  data-testid=\"context-menu\"\n  [placement]=\"placement\"\n  [open]=\"isActive\"\n>\n  <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: NggCoreElementDirective, selector: "[nggCoreElement]" }] });
+NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<gds-context-menu\n  *nggCoreElement\n  data-testid=\"context-menu\"\n  [placement]=\"placement\"\n  [open]=\"isActive\"\n>\n  <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: "15.2.9", 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" }]
@@ -382,30 +357,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['contextMenuAnchor']
             }] } });
 
-class NggCoreWrapperModule {
-}
-NggCoreWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggCoreWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, declarations: [NggCoreElementDirective], imports: [CommonModule], exports: [NggCoreElementDirective] });
-NggCoreWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NggCoreElementDirective],
-                    imports: [CommonModule],
-                    exports: [NggCoreElementDirective],
-                }]
-        }] });
-
 class NggContextMenuModule {
 }
 NggContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule, NggCoreWrapperModule], exports: [NggContextMenuComponent] });
-NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule, NggCoreWrapperModule] });
+NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule, NggCoreWrapperModule$1], exports: [NggContextMenuComponent] });
+NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule, NggCoreWrapperModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggContextMenuComponent],
-                    imports: [CommonModule, NggCoreWrapperModule],
+                    imports: [CommonModule, NggCoreWrapperModule$1],
                     exports: [NggContextMenuComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -417,7 +378,7 @@ class NggDatepickerComponent {
         this.id = randomId();
         this.isValid = null;
         this.valueChange = new EventEmitter();
-        registerTransitionalStyles();
+        DatepickerTransStyles.register();
     }
     get options() {
         return this._options;
@@ -477,7 +438,7 @@ NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             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: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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: "15.2.9", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-datepicker', providers: [
@@ -541,6 +502,21 @@ function dateValidator(dates) {
     };
 }
 
+class NggDatepickerModule {
+}
+NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggCoreWrapperModule$1], exports: [NggDatepickerComponent] });
+NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggCoreWrapperModule$1] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggDatepickerComponent],
+                    imports: [CommonModule, NggCoreWrapperModule$1],
+                    exports: [NggDatepickerComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
 class NggDropdownOptionDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
@@ -614,7 +590,7 @@ class NggDropdownComponent {
                 ? `${displayValues.length} ${this.texts?.selected} `
                 : displayValues?.join(', ') || (this.texts?.placeholder ?? 'Select');
         };
-        registerTransitionalStyles();
+        DropdownTransStyles.register();
     }
     //
     set options(value) {
@@ -706,7 +682,7 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [maxHeight]=\"maxHeight\"\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: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [maxHeight]=\"maxHeight\"\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: "15.2.9", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-dropdown', providers: [
@@ -777,10 +753,10 @@ class NggDropdownModule {
 NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
         NggDropdownOptionDirective,
-        NggDropdownButtonDirective], imports: [CommonModule, NggCoreWrapperModule], exports: [NggDropdownComponent,
+        NggDropdownButtonDirective], imports: [CommonModule, NggCoreWrapperModule$1], exports: [NggDropdownComponent,
         NggDropdownOptionDirective,
         NggDropdownButtonDirective] });
-NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, imports: [CommonModule, NggCoreWrapperModule] });
+NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, imports: [CommonModule, NggCoreWrapperModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, decorators: [{
             type: NgModule,
             args: [{
@@ -789,7 +765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         NggDropdownOptionDirective,
                         NggDropdownButtonDirective,
                     ],
-                    imports: [CommonModule, NggCoreWrapperModule],
+                    imports: [CommonModule, NggCoreWrapperModule$1],
                     exports: [
                         NggDropdownComponent,
                         NggDropdownOptionDirective,
@@ -799,21 +775,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-class NggDatepickerModule {
-}
-NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule, NggCoreWrapperModule], exports: [NggDatepickerComponent] });
-NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggDropdownModule, NggCoreWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NggDatepickerComponent],
-                    imports: [CommonModule, NggDropdownModule, NggCoreWrapperModule],
-                    exports: [NggDatepickerComponent],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
 class NggInPageWizardStepCardComponent {
     constructor() {
         this.handleNextClick = new EventEmitter();
@@ -907,6 +868,7 @@ class NggModalComponent {
     constructor(ref, configurableFocusTrapFactory) {
         this.ref = ref;
         this.configurableFocusTrapFactory = configurableFocusTrapFactory;
+        this.disableBodyScroll = true;
         this.isOpenChange = new EventEmitter();
         this.closed = new EventEmitter();
         this.confirm = new EventEmitter();
@@ -936,16 +898,20 @@ class NggModalComponent {
             if (this.trapFocus) {
                 this.enableFocusTrap();
             }
-            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);
-                },
-            });
+            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();
-            enableBodyScroll(this.ref.nativeElement);
+            if (this.disableBodyScroll) {
+                enableBodyScroll(this.ref.nativeElement);
+            }
         }
     }
     get open() {
@@ -996,7 +962,7 @@ class NggModalComponent {
     }
 }
 NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
-NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\">\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\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      aria-modal=\"true\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      aria-modal=\"true\"\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          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\">\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(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", 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\">\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\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      aria-modal=\"true\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      aria-modal=\"true\"\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          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\">\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(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\">\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\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      aria-modal=\"true\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      aria-modal=\"true\"\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          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\">\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"] }]
@@ -1014,6 +980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], hideFooter: [{
                 type: Input
+            }], disableBodyScroll: [{
+                type: Input
             }], trapFocus: [{
                 type: Input
             }], isOpen: [{
@@ -1398,7 +1366,7 @@ NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             useExisting: NggSliderComponent,
             multi: true,
         },
-    ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-slider', providers: [
@@ -1605,7 +1573,7 @@ class NggSortableListComponent {
     }
 }
 NggSortableListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggSortableListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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$1.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$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$1.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$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
+NggSortableListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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"] }]
@@ -2142,6 +2110,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class NggCoreElementDirective {
+    constructor() {
+        this.viewRef = null;
+        this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.vcr = inject(ViewContainerRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.template = inject((TemplateRef));
+    }
+    ngOnInit() {
+        this.vcr.clear();
+        const originalCreateElement = this.renderer.createElement;
+        this.renderer.createElement = (name, _namespace) => {
+            return this.document.createElement(getScopedTagName(name));
+        };
+        this.viewRef = this.vcr.createEmbeddedView(this.template);
+        this.renderer.createElement = originalCreateElement;
+        this.cdr.markForCheck();
+    }
+}
+NggCoreElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NggCoreElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NggCoreElementDirective, selector: "[nggCoreElement]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreElementDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggCoreElement]',
+                }]
+        }] });
+
+class NggCoreWrapperModule {
+}
+NggCoreWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggCoreWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, declarations: [NggCoreElementDirective], imports: [CommonModule], exports: [NggCoreElementDirective] });
+NggCoreWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCoreWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggCoreElementDirective],
+                    imports: [CommonModule],
+                    exports: [NggCoreElementDirective],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */