@sebgroup/green-angular 1.0.0-beta.10 → 1.0.0-beta.13

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,16 +1,17 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, ViewChild, 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 { dropdownValues, createDropdown, randomId, months, years, createDatepicker } from '@sebgroup/extract';
+import { startOfDay, endOfDay } from 'date-fns';
 
 class NggSegmentedControlComponent {
 }
-NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"
@@ -21,7 +22,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.2.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',
@@ -45,10 +46,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 
 class NggSegmentedControlModule {
 }
-NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
-NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlModule, imports: [[RouterModule, CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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],
@@ -61,14 +62,23 @@ class NggDropdownComponent {
     constructor(cd) {
         this.cd = cd;
         this.loop = false;
+        this._multiSelect = false;
         this.options = [];
         this.valueChange = new EventEmitter();
         this.toggler = dropdownValues.elements?.toggler;
         this.listbox = dropdownValues.elements?.listbox;
+        this.fieldset = dropdownValues.elements?.fieldset;
         this.trackByKey = (index, option) => {
-            return option.key;
+            return option[''] || option.key;
         };
     }
+    set multiSelect(value) {
+        this._multiSelect =
+            value === '' || value === 'true' || value.toString() === 'true' || false;
+    }
+    get multiSelect() {
+        return this._multiSelect;
+    }
     get value() {
         return this._value;
     }
@@ -77,18 +87,48 @@ class NggDropdownComponent {
     }
     ngAfterViewInit() {
         if (this.togglerRef?.nativeElement && this.listboxRef?.nativeElement) {
-            this.handler = createDropdown(this.props, this.togglerRef.nativeElement, this.listboxRef.nativeElement, (dropdown) => {
+            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;
-                const selected = this.dropdown.options?.find((option) => option.selected);
-                if (selected && this._value !== selected?.value) {
-                    setTimeout(() => {
-                        this._value = selected.value;
-                        this.valueChange.emit(selected.value);
-                        this.onChangeFn && this.onChangeFn(selected.value);
-                        this.onTouchedFn && this.onTouchedFn();
-                    }, 0);
+                this.fieldset = dropdown.elements.fieldset;
+                // TODO: refactor state handling to only emit value changes when value changes (not on state change), perhaps using rxjs?
+                if (!dropdown.isMultiSelect) {
+                    let selectedOption = this.dropdown.options?.find((option) => option.selected);
+                    if ((selectedOption && !this._value) ||
+                        (selectedOption &&
+                            selectedOption[dropdown.useValue] !==
+                                this._value[dropdown.useValue])) {
+                        const { attributes, classes, active, selected, ...data } = selectedOption;
+                        selectedOption = dropdown.selectValue
+                            ? data[dropdown.selectValue]
+                            : data;
+                        setTimeout(() => {
+                            this._value = selectedOption;
+                            this.valueChange.emit(selectedOption);
+                            this.onChangeFn && this.onChangeFn(selectedOption);
+                            this.onTouchedFn && this.onTouchedFn();
+                        }, 0);
+                    }
+                }
+                else {
+                    const selectedOption = this.dropdown.options
+                        ?.filter((option) => option.selected)
+                        .map((option) => {
+                        const { attributes, classes, active, selected, ...data } = option;
+                        return dropdown.selectValue ? data[dropdown.selectValue] : data;
+                    });
+                    if ((this._value !== undefined || selectedOption?.length > 0) &&
+                        this._value !== [] &&
+                        selectedOption &&
+                        JSON.stringify(this._value) !== JSON.stringify(selectedOption)) {
+                        setTimeout(() => {
+                            this._value = selectedOption;
+                            this.valueChange.emit(selectedOption);
+                            this.onChangeFn && this.onChangeFn(selectedOption);
+                            this.onTouchedFn && this.onTouchedFn();
+                        }, 0);
+                    }
                 }
                 this.cd.detectChanges();
             });
@@ -112,39 +152,39 @@ class NggDropdownComponent {
     registerOnTouched(fn) {
         this.onTouchedFn = fn;
     }
-    select(option) {
-        this.handler?.select(option);
-        this._value = option.value;
-        this.valueChange.emit(option.value);
-        this.onChangeFn && this.onChangeFn(option.value);
-        this.onTouchedFn && this.onTouchedFn();
-    }
     get props() {
         return {
             id: this.id || this.dropdown?.id,
-            text: this.text,
+            texts: this.texts,
+            useValue: this.useValue,
+            display: this.display,
+            selectValue: this.selectValue,
             options: this.options,
             loop: this.loop,
             value: this.value,
+            multiSelect: this.multiSelect,
         };
     }
     setSelectionByValue(value) {
-        if (this._value !== value) {
-            this._value = value;
-            const selected = this.handler?.dropdown?.options.find((option) => option.value === value);
-            if (selected)
-                this.handler?.select(selected);
+        if (!this.dropdown?.isMultiSelect) {
+            if (this._value !== value && value !== undefined) {
+                this._value = value;
+                const valueKey = this.handler?.dropdown.useValue;
+                const selected = this.handler?.dropdown?.options.find((option) => option[valueKey] === value[valueKey] || option[valueKey] === value);
+                if (selected)
+                    this.handler?.select(selected);
+            }
         }
     }
 }
-NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", text: "text", loop: "loop", label: "label", options: "options", valid: "valid", invalid: "invalid", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+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", selectValue: "selectValue", useValue: "useValue", multiSelect: "multiSelect", label: "label", options: "options", valid: "valid", invalid: "invalid", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    ], 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>
       <span
         class="label"
@@ -157,7 +197,7 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           label ? toggler?.attributes?.id + '_label' : null
         "
         [attr.aria-describedby]="
-          formInfo?.innerText && formInfo.innerText.length > 0
+          formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)
             ? toggler?.attributes?.id + '_info'
             : null
         "
@@ -174,7 +214,9 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [class.is-valid]="valid"
         [class.is-invalid]="invalid"
       >
-        <span>{{ dropdown?.text }}</span>
+        <span>{{
+          dropdown?.texts?.select || dropdown?.texts?.placeholder
+        }}</span>
       </button>
       <span
         class="form-info"
@@ -198,9 +240,9 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           class="close m-4 m-sm-2 d-block d-sm-none"
           (click)="handler?.close()"
         >
-          <span class="sr-only">Close</span>
+          <span class="sr-only">{{ dropdown?.texts?.close }}</span>
         </button>
-        <ul role="listbox">
+        <ul role="listbox" *ngIf="!dropdown?.isMultiSelect">
           <li
             *ngFor="let option of dropdown?.options; trackBy: trackByKey"
             [id]="option.attributes.id"
@@ -210,13 +252,42 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [class]="option.classes"
             (click)="handler?.select(option)"
           >
-            {{ option.key }}
+            {{ option[dropdown!.display] }}
           </li>
         </ul>
+        <div *ngIf="dropdown?.isMultiSelect" class="sg-fieldset-container">
+          <fieldset
+            #fieldsetRef
+            [attr.aria-describedby]="fieldset?.attributes?.id"
+            role="listbox"
+            tabIndex="-1"
+            aria-multiselectable="true"
+          >
+            <legend class="sr-only" [id]="fieldset?.attributes?.id">
+              Options
+            </legend>
+            <label
+              class="form-control"
+              [attr.role]="option.attributes.role"
+              [id]="option.attributes.id"
+              [attr.aria-selected]="option.attributes['aria-selected']"
+              [class]="option.classes"
+              *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+            >
+              <input
+                type="checkbox"
+                (change)="handler?.select(option, false)"
+                [checked]="option.selected"
+              />
+              <span>{{ option[dropdown!.display] }}</span>
+              <i></i>
+            </label>
+          </fieldset>
+        </div>
       </div>
     </div>
   `, isInline: true, 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.2.2", ngImport: i0, type: NggDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngg-dropdown',
@@ -233,7 +304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
           label ? toggler?.attributes?.id + '_label' : null
         "
         [attr.aria-describedby]="
-          formInfo?.innerText && formInfo.innerText.length > 0
+          formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)
             ? toggler?.attributes?.id + '_info'
             : null
         "
@@ -250,7 +321,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
         [class.is-valid]="valid"
         [class.is-invalid]="invalid"
       >
-        <span>{{ dropdown?.text }}</span>
+        <span>{{
+          dropdown?.texts?.select || dropdown?.texts?.placeholder
+        }}</span>
       </button>
       <span
         class="form-info"
@@ -274,9 +347,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
           class="close m-4 m-sm-2 d-block d-sm-none"
           (click)="handler?.close()"
         >
-          <span class="sr-only">Close</span>
+          <span class="sr-only">{{ dropdown?.texts?.close }}</span>
         </button>
-        <ul role="listbox">
+        <ul role="listbox" *ngIf="!dropdown?.isMultiSelect">
           <li
             *ngFor="let option of dropdown?.options; trackBy: trackByKey"
             [id]="option.attributes.id"
@@ -286,9 +359,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
             [class]="option.classes"
             (click)="handler?.select(option)"
           >
-            {{ option.key }}
+            {{ option[dropdown!.display] }}
           </li>
         </ul>
+        <div *ngIf="dropdown?.isMultiSelect" class="sg-fieldset-container">
+          <fieldset
+            #fieldsetRef
+            [attr.aria-describedby]="fieldset?.attributes?.id"
+            role="listbox"
+            tabIndex="-1"
+            aria-multiselectable="true"
+          >
+            <legend class="sr-only" [id]="fieldset?.attributes?.id">
+              Options
+            </legend>
+            <label
+              class="form-control"
+              [attr.role]="option.attributes.role"
+              [id]="option.attributes.id"
+              [attr.aria-selected]="option.attributes['aria-selected']"
+              [class]="option.classes"
+              *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+            >
+              <input
+                type="checkbox"
+                (change)="handler?.select(option, false)"
+                [checked]="option.selected"
+              />
+              <span>{{ option[dropdown!.display] }}</span>
+              <i></i>
+            </label>
+          </fieldset>
+        </div>
       </div>
     </div>
   `,
@@ -303,10 +405,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
-            }], text: [{
+            }], texts: [{
                 type: Input
             }], loop: [{
                 type: Input
+            }], display: [{
+                type: Input
+            }], selectValue: [{
+                type: Input
+            }], useValue: [{
+                type: Input
+            }], multiSelect: [{
+                type: Input
             }], label: [{
                 type: Input
             }], options: [{
@@ -325,14 +435,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
             }], listboxRef: [{
                 type: ViewChild,
                 args: ['listboxRef']
+            }], fieldsetRef: [{
+                type: ViewChild,
+                args: ['fieldsetRef']
             }] } });
 
 class NggDropdownModule {
 }
-NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent], imports: [CommonModule], exports: [NggDropdownComponent] });
-NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, decorators: [{
+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], imports: [CommonModule], exports: [NggDropdownComponent] });
+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],
@@ -345,20 +458,24 @@ class NggDatepickerComponent {
     constructor(_cdr) {
         this._cdr = _cdr;
         this.id = randomId();
+        this.isValid = null;
         this.valueChange = new EventEmitter();
         this._months = months({});
-        this.years = years({});
-        this.trackByKey = (index, option) => {
-            return option.key;
-        };
         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) {
-                this.valueChange.emit(data.selectedDate);
-                this.onChangeFn && this.onChangeFn(data.selectedDate);
+                // 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) {
@@ -409,6 +526,17 @@ class NggDatepickerComponent {
     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);
+        }
+        else {
+            this.valueChange.emit(value);
+            this.onChangeFn && this.onChangeFn(value);
+        }
+    }
     trackWeek(index, week) {
         return week;
     }
@@ -430,15 +558,15 @@ class NggDatepickerComponent {
         }
     }
 }
-NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", valid: "valid", invalid: "invalid" }, outputs: { valueChange: "valueChange" }, providers: [
+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]=\"valid\"\n    [class.is-invalid]=\"invalid\"\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)=\"dp?.select(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        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        [options]=\"years\"\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.currentMonth\"\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", "text", "loop", "label", "options", "valid", "invalid", "value"], outputs: ["valueChange"] }], 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.2.2", ngImport: i0, type: NggDatepickerComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], 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        text=\"Select\"\n        [value]=\"data?.month\"\n        selectValue=\"value\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        selectValue=\"value\"\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", "selectValue", "useValue", "multiSelect", "label", "options", "valid", "invalid", "value"], outputs: ["valueChange"] }], 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: [
                         {
@@ -446,7 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                             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]=\"valid\"\n    [class.is-invalid]=\"invalid\"\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)=\"dp?.select(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        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        [options]=\"years\"\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.currentMonth\"\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" }]
+                    ], 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        text=\"Select\"\n        [value]=\"data?.month\"\n        selectValue=\"value\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        selectValue=\"value\"\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: [{
@@ -455,9 +583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 type: Input
             }], label: [{
                 type: Input
-            }], valid: [{
-                type: Input
-            }], invalid: [{
+            }], isValid: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -474,13 +600,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 type: ViewChild,
                 args: ['datepickerTriggerElRef']
             }] } });
+function dateValidator(dates) {
+    return (control) => {
+        const value = control.value;
+        if (!value) {
+            return null;
+        }
+        const newDate = new Date(value);
+        const isValidDate = !isNaN(newDate.getTime());
+        if (!isValidDate) {
+            return { validDate: true };
+        }
+        const validMinDate = dates?.min ? newDate >= startOfDay(dates.min) : true;
+        const validMaxDate = dates?.max ? newDate <= endOfDay(dates.max) : true;
+        if (!validMinDate && dates?.min) {
+            return {
+                validDate: {
+                    minDate: startOfDay(dates.min),
+                    actualDate: newDate,
+                },
+            };
+        }
+        if (!validMaxDate && dates?.max) {
+            return {
+                validDate: {
+                    maxDate: endOfDay(dates.max),
+                    actualDate: newDate,
+                },
+            };
+        }
+        return null;
+    };
+}
 
 class NggDatepickerModule {
 }
-NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
-NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, imports: [[CommonModule, NggDropdownModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, decorators: [{
+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: [{
                     declarations: [NggDatepickerComponent],
@@ -491,10 +649,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 
 class NggModule {
 }
-NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
-NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, imports: [[CommonModule], NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, decorators: [{
+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: [],
@@ -503,9 +661,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 }]
         }] });
 
+class NggBadgeComponent {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    set isCloseable(value) {
+        this._isCloseable = value;
+    }
+    get isCloseable() {
+        return this._isCloseable === '' || !!this._isCloseable;
+    }
+    get class() {
+        return ['badge', this.badgeType].join(' ');
+    }
+    close() {
+        this.viewContainerRef.element.nativeElement.remove();
+    }
+}
+NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { isCloseable: "isCloseable", badgeType: "badgeType", closeText: "closeText" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: `
+    <strong>
+      <ng-content></ng-content>
+    </strong>
+    <button *ngIf="isCloseable" class="close" (click)="close()">
+      {{ 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()">
+      {{ closeText }}
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { isCloseable: [{
+                type: Input
+            }], badgeType: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+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: [NggBadgeComponent],
+                    imports: [CommonModule],
+                    exports: [NggBadgeComponent],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule };
+export { NggBadgeComponent, NggBadgeModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map