@sebgroup/green-angular 1.0.0-beta.3 → 1.0.0-beta.34

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, Directive, forwardRef, Inject, HostBinding, HostListener, EventEmitter, Output, ContentChildren } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, Directive, EventEmitter, Output, ViewChild, ContentChild, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { BehaviorSubject, Subject, merge, fromEvent, EMPTY } from 'rxjs';
-import { tap, takeUntil, skip, switchMap, filter } from 'rxjs/operators';
-import { createPopper } from '@popperjs/core';
-import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
+import { dropdownValues, createDropdown, randomId, months, years, createDatepicker } from '@sebgroup/extract';
+import { startOfDay, endOfDay } from 'date-fns';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 
 class NggSegmentedControlComponent {
 }
-NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
+NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
     <div class="group">
       <a
         *ngFor="let control of $controls | async"
@@ -24,7 +23,7 @@ NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
       >
     </div>
   `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngg-segmented-control',
@@ -48,10 +47,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
 
 class NggSegmentedControlModule {
 }
-NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
-NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggSegmentedControlModule, imports: [[RouterModule, CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
+NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
+NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, imports: [[RouterModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggSegmentedControlComponent],
@@ -60,534 +59,662 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                 }]
         }] });
 
-class NggPopoverDirective {
-    constructor() {
-        this._config = {
-            usePopper: true,
-            container: '',
-            useBodyScrollLock: true,
-        };
-        this.state = {
-            $isOpen: new BehaviorSubject(false),
-        };
-    }
-    get config() {
-        return this._config;
-    }
-    set config(config) {
-        this._config = { ...this.config, ...config };
-    }
-    close() {
-        this.state.$isOpen.next(false);
-    }
-    open() {
-        this.state.$isOpen.next(true);
-    }
-    toggle() {
-        if (this.state.$isOpen.value) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
+class NggDropdownOptionDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
 }
-NggPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NggPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: NggPopoverDirective, selector: "[nggPopover]", inputs: { config: "config" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverDirective, decorators: [{
+NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[nggPopover]',
+                    selector: '[nggDropdownOption]',
                 }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class NggPopoverTriggerDirective {
-    constructor(popover, _elRef) {
-        this.popover = popover;
-        this._elRef = _elRef;
-        this.$unsubscribe = new Subject();
-        this.class = 'dropdown-toggle';
-        this.haspopup = 'listbox';
-        this.owns = null;
-        this.expanded = this.popover.state.$isOpen.value;
-        this.toggle = (event) => {
-            if ('key' in event && event.key === 'ArrowDown') {
-                // open popover on arrow down by not stopping event propagation
-                if (this.popover.state.$isOpen.value) {
-                    return;
-                }
-                else {
-                    // prevent container from scrolling
-                    event.preventDefault();
-                }
-            }
-            event.stopPropagation();
-            this.popover.toggle();
+class NggDropdownComponent {
+    constructor(cd) {
+        this.cd = cd;
+        this.loop = false;
+        this.options = [];
+        this._multiSelect = false;
+        this._searchable = false;
+        this.valueChange = new EventEmitter();
+        this.touched = new EventEmitter();
+        this.toggler = dropdownValues.elements?.toggler;
+        this.listbox = dropdownValues.elements?.listbox;
+        this.fieldset = dropdownValues.elements?.fieldset;
+        this.trackByKey = (index, option) => {
+            return option.attributes.id ?? '';
         };
     }
-    ngOnInit() {
-        // if trigger element does not have an id...
-        if (!this._elRef.nativeElement.id) {
-            // ...add a unique id
-            this._elRef.nativeElement.id = `ngg_dropdownTrigger_${new Date().getTime()}`;
-            this.owns = this._elRef.nativeElement.id.replace(/dropdownTrigger/, 'popover');
-        }
-        else {
-            this.owns = this._elRef.nativeElement.id + '_popover';
+    set multiSelect(value) {
+        this._multiSelect = this.convertToBoolean(value);
+    }
+    get multiSelect() {
+        return this._multiSelect;
+    }
+    set searchable(value) {
+        this._searchable = this.convertToBoolean(value);
+    }
+    get searchable() {
+        return this._searchable;
+    }
+    set value(newValue) {
+        this.handler?.selectByValue(newValue);
+        this._value = newValue;
+    }
+    get value() {
+        return this._value;
+    }
+    ngAfterViewInit() {
+        if (this.togglerRef?.nativeElement && this.listboxRef?.nativeElement) {
+            this.handler = createDropdown(this.props, this.togglerRef.nativeElement, this.listboxRef.nativeElement, this.fieldsetRef?.nativeElement, (dropdown) => {
+                this.dropdown = dropdown;
+                this.toggler = dropdown.elements.toggler;
+                this.listbox = dropdown.elements.listbox;
+                this.fieldset = dropdown.elements.fieldset;
+                this.cd.detectChanges();
+            }, (value) => {
+                this.updateValue(value);
+            });
         }
-        this.popover.triggerElement = this._elRef;
-        this.popover.state.$isOpen
-            .pipe(tap((isOpen) => (this.expanded = isOpen)), takeUntil(this.$unsubscribe))
-            .subscribe();
     }
     ngOnDestroy() {
-        this.$unsubscribe.next();
-        this.$unsubscribe.complete();
+        this.handler?.destroy();
     }
-}
-NggPopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverTriggerDirective, deps: [{ token: forwardRef(() => NggPopoverDirective) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggPopoverTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: NggPopoverTriggerDirective, selector: "[nggPopoverTrigger]", host: { listeners: { "keydown.arrowdown": "toggle($event)", "click": "toggle($event)" }, properties: { "class": "this.class", "attr.aria-haspopup": "this.haspopup", "attr.aria-owns": "this.owns", "attr.aria-expanded": "this.expanded" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[nggPopoverTrigger]',
-                }]
-        }], ctorParameters: function () { return [{ type: NggPopoverDirective, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => NggPopoverDirective)]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], haspopup: [{
-                type: HostBinding,
-                args: ['attr.aria-haspopup']
-            }], owns: [{
-                type: HostBinding,
-                args: ['attr.aria-owns']
-            }], expanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
-            }], toggle: [{
-                type: HostListener,
-                args: ['keydown.arrowdown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class NggPopoverOptionDirective {
-    constructor(popover, elRef) {
-        this.popover = popover;
-        this.elRef = elRef;
-        this.selected = false;
-        this.selectedChanged = new EventEmitter();
-        this.role = 'option';
-        this.id = '';
-        this.clickHandler = (event) => {
-            this.select(event);
-        };
-        this.select = (event) => {
-            this.selectedChanged.emit(this.nggPopoverOption);
+    ngOnChanges(changes) {
+        if (this.handler &&
+            (changes.id || changes.text || changes.loop || changes.options)) {
+            this.handler.update(this.props);
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    search($event) {
+        this.handler?.search($event.target.value);
+    }
+    get props() {
+        return {
+            id: this.id || this.dropdown?.id,
+            texts: this.texts,
+            useValue: this.useValue,
+            display: this.display,
+            options: this.options,
+            loop: this.loop,
+            value: this.value,
+            multiSelect: this.multiSelect,
+            searchable: this.searchable,
+            searchFilter: this.searchFilter,
+            compareWith: this.compareWith,
+            onTouched: () => {
+                this.onTouchedFn?.();
+                this.touched.emit(true);
+                this.cd.markForCheck();
+            },
         };
     }
-    get ariaSelected() {
-        return this.selected || null;
+    updateValue(option) {
+        this._value = option;
+        this.valueChange.emit(option);
+        this.onChangeFn?.(option);
     }
-    ngOnInit() {
-        this.id = `${this.popover.triggerElement?.nativeElement.id}_dropdownOption_${this.index}`;
+    convertToBoolean(value) {
+        return (value === '' || value === 'true' || value.toString() === 'true' || false);
     }
 }
-NggPopoverOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverOptionDirective, deps: [{ token: forwardRef(() => NggPopoverDirective) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggPopoverOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: NggPopoverOptionDirective, selector: "[nggPopoverOption]", inputs: { nggPopoverOption: "nggPopoverOption", index: "index", selected: "selected" }, outputs: { selectedChanged: "selectedChanged" }, host: { listeners: { "click": "clickHandler()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.id": "this.id" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[nggPopoverOption]',
-                }]
-        }], ctorParameters: function () { return [{ type: NggPopoverDirective, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => NggPopoverDirective)]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { nggPopoverOption: [{
+NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: NggDropdownComponent,
+            multi: true,
+        },
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n        ? toggler?.attributes?.id + '_info'\n        : null\n    \"\n    type=\"button\"\n    #togglerRef\n    [id]=\"toggler?.attributes?.id\"\n    [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n    [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n    [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n    [tabindex]=\"toggler?.attributes?.tabIndex\"\n    [style]=\"toggler?.attributes?.style\"\n    [class]=\"toggler?.classes\"\n    (click)=\"handler?.toggle()\"\n    [class.is-valid]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <span>{{ dropdown?.texts?.select }}</span>\n  </button>\n  <span\n    class=\"form-info\"\n    #formInfo\n    [attr.id]=\"toggler?.attributes?.id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n  <div\n    #listboxRef\n    [id]=\"listbox?.attributes?.id\"\n    [attr.role]=\"listbox?.attributes?.role\"\n    [attr.aria-activedescendant]=\"\n        listbox?.attributes?.['aria-activedescendant']\n      \"\n    [tabindex]=\"listbox?.attributes?.tabIndex\"\n    [style]=\"listbox?.attributes?.style\"\n    [class]=\"listbox?.classes\"\n  >\n    <button\n      type=\"button\"\n      class=\"close m-4 m-sm-2 d-block d-sm-none\"\n      (click)=\"handler?.close()\"\n    >\n      <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n    </button>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\n        [id]=\"option.attributes.id\"\n        [attr.role]=\"option.attributes.role\"\n        [attr.aria-selected]=\"option.attributes['aria-selected']\"\n        [style]=\"option.attributes.style\"\n        [class]=\"option.classes\"\n        (click)=\"handler?.select(option)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <label\n          class=\"form-control\"\n          [attr.role]=\"option.attributes.role\"\n          [id]=\"option.attributes.id\"\n          [attr.aria-selected]=\"option.attributes['aria-selected']\"\n          [class]=\"option.classes\"\n          *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n        >\n          <input\n            type=\"checkbox\"\n            (change)=\"handler?.select(option, false)\"\n            [checked]=\"option.selected\"\n            tabIndex=\"-1\"\n          />\n          <ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container>\n          <i></i>\n        </label>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-dropdown', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NggDropdownComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n        ? toggler?.attributes?.id + '_info'\n        : null\n    \"\n    type=\"button\"\n    #togglerRef\n    [id]=\"toggler?.attributes?.id\"\n    [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n    [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n    [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n    [tabindex]=\"toggler?.attributes?.tabIndex\"\n    [style]=\"toggler?.attributes?.style\"\n    [class]=\"toggler?.classes\"\n    (click)=\"handler?.toggle()\"\n    [class.is-valid]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <span>{{ dropdown?.texts?.select }}</span>\n  </button>\n  <span\n    class=\"form-info\"\n    #formInfo\n    [attr.id]=\"toggler?.attributes?.id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n  <div\n    #listboxRef\n    [id]=\"listbox?.attributes?.id\"\n    [attr.role]=\"listbox?.attributes?.role\"\n    [attr.aria-activedescendant]=\"\n        listbox?.attributes?.['aria-activedescendant']\n      \"\n    [tabindex]=\"listbox?.attributes?.tabIndex\"\n    [style]=\"listbox?.attributes?.style\"\n    [class]=\"listbox?.classes\"\n  >\n    <button\n      type=\"button\"\n      class=\"close m-4 m-sm-2 d-block d-sm-none\"\n      (click)=\"handler?.close()\"\n    >\n      <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n    </button>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\n        [id]=\"option.attributes.id\"\n        [attr.role]=\"option.attributes.role\"\n        [attr.aria-selected]=\"option.attributes['aria-selected']\"\n        [style]=\"option.attributes.style\"\n        [class]=\"option.classes\"\n        (click)=\"handler?.select(option)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <label\n          class=\"form-control\"\n          [attr.role]=\"option.attributes.role\"\n          [id]=\"option.attributes.id\"\n          [attr.aria-selected]=\"option.attributes['aria-selected']\"\n          [class]=\"option.classes\"\n          *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n        >\n          <input\n            type=\"checkbox\"\n            (change)=\"handler?.select(option, false)\"\n            [checked]=\"option.selected\"\n            tabIndex=\"-1\"\n          />\n          <ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container>\n          <i></i>\n        </label>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], texts: [{
+                type: Input
+            }], loop: [{
                 type: Input
-            }], index: [{
+            }], display: [{
                 type: Input
-            }], selected: [{
+            }], useValue: [{
                 type: Input
-            }], selectedChanged: [{
+            }], label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], searchFilter: [{
+                type: Input
+            }], multiSelect: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
                 type: Output
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], ariaSelected: [{
-                type: HostBinding,
-                args: ['attr.aria-selected']
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }], clickHandler: [{
-                type: HostListener,
-                args: ['click']
+            }], touched: [{
+                type: Output
+            }], togglerRef: [{
+                type: ViewChild,
+                args: ['togglerRef']
+            }], listboxRef: [{
+                type: ViewChild,
+                args: ['listboxRef']
+            }], fieldsetRef: [{
+                type: ViewChild,
+                args: ['fieldsetRef']
+            }], customOption: [{
+                type: ContentChild,
+                args: [NggDropdownOptionDirective]
             }] } });
 
-class NggPopoverElementDirective {
-    constructor(popover, _elRef, _renderer, _cdr) {
-        this.popover = popover;
-        this._elRef = _elRef;
-        this._renderer = _renderer;
+class NggDropdownModule {
+}
+NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent, NggDropdownOptionDirective], imports: [CommonModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
+NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggDropdownComponent, NggDropdownOptionDirective],
+                    imports: [CommonModule],
+                    exports: [NggDropdownComponent, NggDropdownOptionDirective],
+                }]
+        }] });
+
+class NggDatepickerComponent {
+    constructor(_cdr) {
         this._cdr = _cdr;
-        this.$unsubscribe = new Subject();
-        this.sm = window.innerWidth <= 576;
-        this.class = true;
-        this.role = 'listbox';
-        this.id = null;
-        this.show = this.popover.state.$isOpen.value;
-        this.activeDescendant = null;
-    }
-    // TODO: refactor and move to general size/device service
-    onResize(event) {
-        // determine if small screen size i.e less than or equal to 576 pixels which is the breakpoint for small screens
-        this.sm = event.target.innerWidth <= 576;
-        if (this.sm) {
-            // remove popper
-            this.removePopper();
-        }
-        else if (!this._popper) {
-            // add popper
-            this.addPopper();
-        }
+        this.id = randomId();
+        this.isValid = null;
+        this.valueChange = new EventEmitter();
+        this._months = months({});
+        this.listener = (data, state) => {
+            if (this.dp && state) {
+                this.dp.state = { ...state };
+                this.years = years({
+                    from: this.dp.state?.minDate?.getFullYear(),
+                    to: this.dp.state?.maxDate?.getFullYear(),
+                });
+            }
+            this.onTouchedFn && this.onTouchedFn();
+            if (data) {
+                // only emit change event if date has changed
+                if (this.data?.selectedDate !== data.selectedDate) {
+                    this.valueChange.emit(data.selectedDate);
+                    this.onChangeFn && this.onChangeFn(data.selectedDate);
+                }
+                this.data = data;
+            }
+            if (data || state) {
+                this._cdr.markForCheck();
+            }
+        };
     }
-    handleClickEvent(event) {
-        // if click inside popover element...
-        if (this._elRef.nativeElement.contains(event.target)) {
-            this.popover.close();
-        }
-        else if (this.popover.state.$isOpen.value) {
-            // else if click outside popover element...
-            this.popover.close();
-        }
+    get months() {
+        return this._months;
     }
-    handleKeydownEvent(event) {
-        if (event.key === 'Escape') {
-            this.popover.close();
-            return;
-        }
-        let next = 0; // Used for home key
-        const currentSelection = this.options?.find((option) => !!option.selected)?.index || 0;
-        if (event.key === 'End') {
-            // set next to last option
-            next = (this.options?.length || 1) - 1;
-        }
-        else if (event.key === 'ArrowUp') {
-            // next can't be less than zero
-            next = Math.max(0, currentSelection - 1);
-            // prevent container from scrolling
-            event.preventDefault();
-        }
-        else if (event.key === 'ArrowDown') {
-            // next can't be greater than number of options
-            next = Math.min((this.options?.length || 1) - 1, currentSelection + 1);
-            // prevent container from scrolling
-            event.preventDefault();
+    set months(value) {
+        this._months = value;
+    }
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+        if (value.locale) {
+            this.months = months({ locale: this.options?.locale });
         }
-        // select next option
-        this.options?.get(next)?.select(event);
     }
-    ngOnInit() {
-        this.id = /^ngg_dropdownTrigger/.test(this.popover.triggerElement?.nativeElement.id)
-            ? this.popover.triggerElement?.nativeElement.id.replace(/dropdownTrigger/, 'popover')
-            : this.popover.triggerElement?.nativeElement.id + '_popover';
-        this.popover.state.$isOpen
-            .pipe(skip(1), // skip initial value
-        tap((isOpen) => {
-            this.show = isOpen; // toggle visibility
-            if (isOpen) {
-                this.activeDescendant =
-                    this.options?.find((option) => !!option.selected)?.id || null;
-                // if use body scroll lock
-                if (this.popover.config.useBodyScrollLock) {
-                    this.disableBodyScrollLock();
-                }
-                // if popover is configured to use a container...
-                if (this.popover.config.container !== '') {
-                    // ...add container
-                    this.addContainer();
-                }
-                // if popover is configured to use popper.js...
-                if (this.popover.config.usePopper) {
-                    this.addPopper();
-                }
-            }
-            else {
-                this.activeDescendant = null;
-                if (this.popover.config.useBodyScrollLock) {
-                    this.enableBodyScrollLock();
-                }
-                this.removeContainer();
-                this.removePopper();
-            }
-        }), switchMap((isOpen) => isOpen
-            ? merge(
-            // listen to click events
-            fromEvent(document, 'click').pipe(tap((event) => this.handleClickEvent(event))), 
-            // listen to keydown events
-            fromEvent(document, 'keydown').pipe(
-            // filter keys
-            filter((event) => ['ArrowDown', 'ArrowUp', 'Escape', 'Home', 'End'].indexOf(event.key) !== -1), tap((event) => this.handleKeydownEvent(event))))
-            : EMPTY), takeUntil(this.$unsubscribe))
-            .subscribe();
+    get value() {
+        return this._value;
     }
-    ngOnDestroy() {
-        this.removePopper();
-        // enable scroll if body scroll lock is used
-        if (this.popover.config.useBodyScrollLock) {
-            this.enableBodyScrollLock();
+    set value(newValue) {
+        if (newValue !== this._value) {
+            this._value = newValue;
         }
-        // remove container if declared
-        if (this._container) {
-            this.removeContainer();
+    }
+    writeValue(value) {
+        this.value = value;
+        // When binding using ngModel we need to set initial select date
+        // once we get initial value as it's not available when component is created
+        if (value && this.dp && !this.data?.selectedDate) {
+            this.dp.select(value);
         }
-        this.$unsubscribe.next();
-        this.$unsubscribe.complete();
     }
-    enableBodyScrollLock() {
-        enableBodyScroll(this._elRef.nativeElement);
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
     }
-    disableBodyScrollLock() {
-        disableBodyScroll(this._elRef.nativeElement);
+    get data() {
+        return this._data;
     }
-    addPopper() {
-        if (this.sm) {
-            return;
+    set data(value) {
+        this._data = value;
+    }
+    onDateChange(value) {
+        const newDate = new Date(value);
+        // Only pass valid date to date picker
+        if (!isNaN(newDate.getTime())) {
+            this.dp?.select(value);
         }
-        if (!this._popper) {
-            // ...create popper instance for anchoring popover with trigger element
-            this._popper = createPopper(this.popover.triggerElement?.nativeElement, this._elRef.nativeElement, {
-                placement: 'bottom-start',
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, 4],
-                        },
-                    },
-                ],
-            });
-            // detect changes once element and popper is initiated to update initial position
+        else {
+            this.valueChange.emit(value);
+            this.onChangeFn && this.onChangeFn(value);
+        }
+    }
+    trackWeek(index, week) {
+        return week;
+    }
+    ngAfterViewInit() {
+        // initialize datepicker
+        if (this.datepickerElRef &&
+            this.datepickerDialogElRef &&
+            this.dateInputElRef &&
+            this.datepickerTriggerElRef &&
+            !this.dp) {
+            this.dp = createDatepicker(this.listener, {
+                ...this.options,
+                selectedDate: this.value,
+            }, this.datepickerElRef.nativeElement, this.datepickerDialogElRef.nativeElement, this.dateInputElRef.nativeElement, this.datepickerTriggerElRef.nativeElement);
             this._cdr.detectChanges();
         }
         else {
-            this._popper.state.elements.reference =
-                this.popover.triggerElement?.nativeElement;
-            this._popper.update().then((_) => this._cdr.detectChanges());
+            throw 'Missing one or more elements...';
         }
     }
-    removePopper() {
-        // destroy popper if declared
-        if (this._popper) {
-            this._popper?.destroy();
-            this._popper = null;
+}
+NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: NggDatepickerComponent,
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">Close</button>\n  <div class=\"sg-date\">\n    <header>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n        <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n      </button>\n      <ngg-dropdown\n        [options]=\"months\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n", components: [{ type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-datepicker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NggDatepickerComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">Close</button>\n  <div class=\"sg-date\">\n    <header>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n        <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n      </button>\n      <ngg-dropdown\n        [options]=\"months\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isValid: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], datepickerDialogElRef: [{
+                type: ViewChild,
+                args: ['datepickerDialogElRef']
+            }], dateInputElRef: [{
+                type: ViewChild,
+                args: ['dateInputElRef']
+            }], datepickerElRef: [{
+                type: ViewChild,
+                args: ['datepickerElRef']
+            }], datepickerTriggerElRef: [{
+                type: ViewChild,
+                args: ['datepickerTriggerElRef']
+            }] } });
+function dateValidator(dates) {
+    return (control) => {
+        const value = control.value;
+        if (!value) {
+            return null;
         }
-    }
-    addContainer() {
-        // create global container for popover if not already present
-        if (!this._container) {
-            this._container = this._renderer.createElement('div');
+        const newDate = new Date(value);
+        const isValidDate = !isNaN(newDate.getTime());
+        if (!isValidDate) {
+            return { validDate: true };
         }
-        this._renderer.appendChild(this._container, this._elRef.nativeElement);
-        this._renderer.appendChild(document.body, this._container);
-    }
-    removeContainer() {
-        if (this._container) {
-            // remove container from DOM tree
-            this._renderer.removeChild(document.body, this._container);
-            // clear container
-            this._container = null;
+        const validMinDate = dates?.min ? newDate >= startOfDay(dates.min) : true;
+        const validMaxDate = dates?.max ? newDate <= endOfDay(dates.max) : true;
+        if (!validMinDate && dates?.min) {
+            return {
+                validDate: {
+                    minDate: startOfDay(dates.min),
+                    actualDate: newDate,
+                },
+            };
         }
-    }
+        if (!validMaxDate && dates?.max) {
+            return {
+                validDate: {
+                    maxDate: endOfDay(dates.max),
+                    actualDate: newDate,
+                },
+            };
+        }
+        return null;
+    };
 }
-NggPopoverElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverElementDirective, deps: [{ token: forwardRef(() => NggPopoverDirective) }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-NggPopoverElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: NggPopoverElementDirective, selector: "[nggPopoverElement]", host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.popover": "this.class", "attr.role": "this.role", "attr.id": "this.id", "class.active": "this.show", "attr.aria-activedescendant": "this.activeDescendant" } }, queries: [{ propertyName: "options", predicate: NggPopoverOptionDirective, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggPopoverElementDirective, decorators: [{
-            type: Directive,
+
+class NggDatepickerModule {
+}
+NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
+NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, imports: [[CommonModule, NggDropdownModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[nggPopoverElement]',
+                    declarations: [NggDatepickerComponent],
+                    imports: [CommonModule, NggDropdownModule],
+                    exports: [NggDatepickerComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: NggPopoverDirective, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => NggPopoverDirective)]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
-                type: ContentChildren,
-                args: [NggPopoverOptionDirective, { descendants: true }]
-            }], class: [{
-                type: HostBinding,
-                args: ['class.popover']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }], show: [{
-                type: HostBinding,
-                args: ['class.active']
-            }], activeDescendant: [{
-                type: HostBinding,
-                args: ['attr.aria-activedescendant']
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
+        }] });
 
-class NggDropdownComponent {
-    constructor() {
-        this._options = [];
-        this._config = {};
+class NggModule {
+}
+NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
+NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [[CommonModule], NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule],
+                    exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule],
+                }]
+        }] });
+
+class NggModalComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.isOpenChange = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.dismiss = new EventEmitter();
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    set isOpen(value) {
+        this._isOpen = value;
+        if (value) {
+            disableBodyScroll(this.ref.nativeElement);
+        }
+        else {
+            enableBodyScroll(this.ref.nativeElement);
+        }
     }
-    get options() {
-        return this._options;
+    get open() { return this.isOpen; }
+    handleCloseClick(event) {
+        this.closeModal(event);
     }
-    set options(value) {
-        this._options = value;
+    handleBackdropClick(event) {
+        if (event.target == this.backdropRef?.nativeElement)
+            this.closeModal(event);
     }
-    get config() {
-        return this._config;
+    handleDismiss(event) {
+        this.dismiss.emit(event);
     }
-    set config(value) {
-        this._config = value;
+    handleConfirm(event) {
+        this.confirm.emit(event);
     }
-    writeValue(obj) {
-        this.value = obj;
+    closeModal(event) {
+        if (this.closed.observers.length > 0) {
+            this.closed.emit(event);
+        }
+        else {
+            this.isOpen = false;
+            this.isOpenChange.emit(this.isOpen);
+        }
     }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
+    ngOnDestroy() {
+        enableBodyScroll(this.ref.nativeElement);
     }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
+}
+NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], components: [{ type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { modalType: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], dismissLabel: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], confirm: [{
+                type: Output
+            }], dismiss: [{
+                type: Output
+            }], open: [{
+                type: HostBinding,
+                args: ['class.open']
+            }], backdropRef: [{
+                type: ViewChild,
+                args: ['backdrop']
+            }] } });
+class NggModalHeaderComponent {
+    constructor() {
+        this.closed = new EventEmitter();
     }
-    select(value) {
-        this.onChangeFn(value);
-        this.value = value;
+    handleClose(event) {
+        this.closed.emit(event);
     }
 }
-NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { options: "options", config: "config" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: NggDropdownComponent,
-            multi: true,
-        },
-    ], ngImport: i0, template: `
-    <div nggPopover [config]="config">
-      <button type="button" nggPopoverTrigger>
-        {{ value }}
-      </button>
-      <div nggPopoverElement tabindex="-1" autofocus>
-        <button class="close m-4 m-sm-2 d-block d-sm-none ">
-          <span class="sr-only">Close</span>
-        </button>
-        <ul role="listbox">
-          <li
-            *ngFor="let option of options; let i = index"
-            [nggPopoverOption]="option.value"
-            [index]="i"
-            [selected]="value === option.value"
-            (selectedChanged)="select($event)"
-          >
-            {{ option.key }}
-          </li>
-        </ul>
-      </div>
-    </div>
-  `, isInline: true, directives: [{ type: NggPopoverDirective, selector: "[nggPopover]", inputs: ["config"] }, { type: NggPopoverTriggerDirective, selector: "[nggPopoverTrigger]" }, { type: NggPopoverElementDirective, selector: "[nggPopoverElement]" }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: NggPopoverOptionDirective, selector: "[nggPopoverOption]", inputs: ["nggPopoverOption", "index", "selected"], outputs: ["selectedChanged"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggDropdownComponent, decorators: [{
+NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalHeaderComponent, selector: "[ngg-modal-header]", inputs: { header: "header" }, outputs: { closed: "closed" }, ngImport: i0, template: `
+    <h3 data-testid="modal-header-text">{{header}}</h3>
+    <button data-testid="modal-close-button" class="close" (click)="this.handleClose($event)">
+        <span className="sr-only">Close</span>
+    </button>
+    `, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ngg-dropdown',
-                    template: `
-    <div nggPopover [config]="config">
-      <button type="button" nggPopoverTrigger>
-        {{ value }}
-      </button>
-      <div nggPopoverElement tabindex="-1" autofocus>
-        <button class="close m-4 m-sm-2 d-block d-sm-none ">
-          <span class="sr-only">Close</span>
-        </button>
-        <ul role="listbox">
-          <li
-            *ngFor="let option of options; let i = index"
-            [nggPopoverOption]="option.value"
-            [index]="i"
-            [selected]="value === option.value"
-            (selectedChanged)="select($event)"
-          >
-            {{ option.key }}
-          </li>
-        </ul>
-      </div>
-    </div>
-  `,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: NggDropdownComponent,
-                            multi: true,
-                        },
-                    ],
-                    //changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { options: [{
+            args: [{ selector: '[ngg-modal-header]', template: `
+    <h3 data-testid="modal-header-text">{{header}}</h3>
+    <button data-testid="modal-close-button" class="close" (click)="this.handleClose($event)">
+        <span className="sr-only">Close</span>
+    </button>
+    `, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }], propDecorators: { header: [{
                 type: Input
-            }], config: [{
+            }], closed: [{
+                type: Output
+            }] } });
+class NggModalBodyComponent {
+}
+NggModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalBodyComponent, selector: "[ngg-modal-body]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ngg-modal-body]', template: `<ng-content></ng-content>`, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }] });
+class NggModalFooterComponent {
+    constructor() {
+        this.dismiss = new EventEmitter();
+        this.confirm = new EventEmitter();
+    }
+    handleDismiss(event) {
+        this.dismiss.emit(event);
+    }
+    handleConfirm(event) {
+        this.confirm.emit(event);
+    }
+}
+NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalFooterComponent, selector: "[ngg-modal-footer]", inputs: { dismissLabel: "dismissLabel", confirmLabel: "confirmLabel" }, outputs: { dismiss: "dismiss", confirm: "confirm" }, ngImport: i0, template: `
+    <button data-testid="modal-dismiss-button" *ngIf="dismissLabel" class="secondary" (click)="this.handleDismiss($event)">{{dismissLabel}}</button>
+    <button data-testid="modal-confirm-button" *ngIf="confirmLabel" class="primary" (click)="this.handleConfirm($event)">{{confirmLabel}}</button>
+    `, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ngg-modal-footer]', template: `
+    <button data-testid="modal-dismiss-button" *ngIf="dismissLabel" class="secondary" (click)="this.handleDismiss($event)">{{dismissLabel}}</button>
+    <button data-testid="modal-confirm-button" *ngIf="confirmLabel" class="primary" (click)="this.handleConfirm($event)">{{confirmLabel}}</button>
+    `, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+        }], propDecorators: { dismissLabel: [{
                 type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }], confirm: [{
+                type: Output
             }] } });
 
-class NggDropdownModule {
+const DECLARATIONS = [
+    NggModalComponent,
+    NggModalHeaderComponent,
+    NggModalBodyComponent,
+    NggModalFooterComponent
+];
+const EXPORTS = [
+    NggModalComponent,
+];
+class NggModalModule {
 }
-NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggDropdownModule, declarations: [NggPopoverDirective,
-        NggPopoverOptionDirective,
-        NggPopoverElementDirective,
-        NggPopoverTriggerDirective,
-        NggDropdownComponent], imports: [CommonModule], exports: [NggPopoverDirective,
-        NggPopoverOptionDirective,
-        NggPopoverElementDirective,
-        NggPopoverTriggerDirective,
-        NggDropdownComponent] });
-NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggDropdownModule, decorators: [{
+NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
+        NggModalHeaderComponent,
+        NggModalBodyComponent,
+        NggModalFooterComponent], imports: [CommonModule], exports: [NggModalComponent] });
+NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        NggPopoverDirective,
-                        NggPopoverOptionDirective,
-                        NggPopoverElementDirective,
-                        NggPopoverTriggerDirective,
-                        NggDropdownComponent,
-                    ],
                     imports: [CommonModule],
-                    exports: [
-                        NggPopoverDirective,
-                        NggPopoverOptionDirective,
-                        NggPopoverElementDirective,
-                        NggPopoverTriggerDirective,
-                        NggDropdownComponent,
-                    ],
+                    exports: EXPORTS,
+                    declarations: DECLARATIONS,
                 }]
         }] });
 
-class NggModule {
+class NggBadgeComponent {
+    //eslint-disable-next-line
+    constructor() {
+        /** The color of the component */
+        this.badgeType = '';
+        /** Callback when component is dismissed */
+        this.handleClose = new EventEmitter();
+    }
+    /** Flag whether the component can be dismissed */
+    set isCloseable(value) {
+        this._isCloseable = value;
+    }
+    get isCloseable() {
+        return this._isCloseable === '' || !!this._isCloseable;
+    }
+    get class() {
+        return ['badge', this.badgeType].join(' ');
+    }
+    ngOnInit() {
+        if (!!this.customColor || !!this.customBackgroundColor) {
+            this.badgeType = '';
+        }
+    }
+    close(e) {
+        this.handleClose.emit(e);
+    }
 }
-NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggSegmentedControlModule, NggDropdownModule] });
-NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggModule, imports: [[CommonModule], NggSegmentedControlModule, NggDropdownModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NggModule, decorators: [{
+NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { badgeType: "badgeType", isCloseable: "isCloseable", closeText: "closeText", customColor: "customColor", customBackgroundColor: "customBackgroundColor" }, outputs: { handleClose: "handleClose" }, host: { properties: { "style.color": "this.customColor", "style.background-color": "this.customBackgroundColor", "class": "this.class" } }, ngImport: i0, template: `
+    <strong>
+      <ng-content></ng-content>
+    </strong>
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
+      {{ closeText }}
+    </button>
+  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // we need to disable this warning since we don't want the badge component to create a new element
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[ngg-badge]',
+                    template: `
+    <strong>
+      <ng-content></ng-content>
+    </strong>
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
+      {{ closeText }}
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { badgeType: [{
+                type: Input
+            }], isCloseable: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], customColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }, {
+                type: Input
+            }], customBackgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }, {
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], handleClose: [{
+                type: Output
+            }] } });
+
+class NggBadgeModule {
+}
+NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
+NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
+                    declarations: [NggBadgeComponent],
                     imports: [CommonModule],
-                    exports: [NggSegmentedControlModule, NggDropdownModule],
+                    exports: [NggBadgeComponent],
                 }]
         }] });
 
@@ -595,5 +722,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggDropdownComponent, NggDropdownModule, NggModule, NggPopoverDirective, NggPopoverElementDirective, NggPopoverOptionDirective, NggPopoverTriggerDirective, NggSegmentedControlComponent, NggSegmentedControlModule };
+export { NggBadgeComponent, NggBadgeModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map