@sebgroup/green-angular 3.6.2 → 3.7.0

package/fesm2015/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';
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
-import { getScopedTagName } from '@sebgroup/green-core/scoping';
-import * as i2 from '@angular/forms';
+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';
-import '@sebgroup/green-core/components/dropdown';
+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 { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -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() {
@@ -281,35 +285,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;
@@ -339,7 +314,7 @@ class NggContextMenuComponent {
          */
         this.contextMenuItemClicked = new EventEmitter();
         this.isActive = false;
-        registerTransitionalStyles();
+        ContextMenuTransStyles.register();
     }
     get placement() {
         return this.direction === 'ltr' ? 'bottom-start' : 'bottom-end';
@@ -360,7 +335,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" }]
@@ -384,30 +359,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],
                 }]
@@ -419,7 +380,7 @@ class NggDatepickerComponent {
         this.id = randomId();
         this.isValid = null;
         this.valueChange = new EventEmitter();
-        registerTransitionalStyles();
+        DatepickerTransStyles.register();
     }
     get options() {
         return this._options;
@@ -483,7 +444,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: [
@@ -547,6 +508,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;
@@ -620,7 +596,7 @@ class NggDropdownComponent {
                 ? `${displayValues.length} ${(_d = this.texts) === null || _d === void 0 ? void 0 : _d.selected} `
                 : (displayValues === null || displayValues === void 0 ? void 0 : displayValues.join(', ')) || ((_f = (_e = this.texts) === null || _e === void 0 ? void 0 : _e.placeholder) !== null && _f !== void 0 ? _f : 'Select');
         };
-        registerTransitionalStyles();
+        DropdownTransStyles.register();
     }
     //
     set options(value) {
@@ -702,7 +678,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: [
@@ -775,10 +751,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: [{
@@ -787,7 +763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         NggDropdownOptionDirective,
                         NggDropdownButtonDirective,
                     ],
-                    imports: [CommonModule, NggCoreWrapperModule],
+                    imports: [CommonModule, NggCoreWrapperModule$1],
                     exports: [
                         NggDropdownComponent,
                         NggDropdownOptionDirective,
@@ -797,21 +773,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();
@@ -1400,7 +1361,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: [
@@ -1607,7 +1568,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"] }]
@@ -2146,6 +2107,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.
  */