@sebgroup/green-angular 6.8.0 → 7.0.0-rc.20251202112859044

package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, TemplateRef, ElementRef, Directive, Self, Optional, Inject, ContentChild, ViewChild, HostBinding, Input, Output, Pipe, Component, ViewChildren, HostListener, Injectable, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { EventEmitter, ElementRef, TemplateRef, Output, Input, HostBinding, ViewChild, ContentChild, Self, Optional, Inject, Directive, Pipe, HostListener, ViewChildren, Component, Injectable, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@jsverse/transloco';
@@ -625,10 +625,10 @@ class DateControlValueAccessorComponent {
         this.onChange(this.state);
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateControlValueAccessorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DateControlValueAccessorComponent, inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", dateCharacters: "dateCharacters", role: "role", value: "value", error: "error", errorList: "errorList", withErrorIcon: "withErrorIcon", description: "description", autofocus: "autofocus", defaultValue: "defaultValue", reset: "reset", optional: "optional", dateInputMask: "dateInputMask", locked: "locked", displayDisabledAsLocked: "displayDisabledAsLocked", required: "required", invalid: "invalid", valid: "valid", focused: "focused", disabled: "disabled", locale: "locale", dateFormat: "dateFormat", dateLocale: "dateLocale" }, outputs: { ngvFocus: "ngvFocus", ngvBlur: "ngvBlur" }, host: { properties: { "attr.id": "this.id" } }, queries: [{ propertyName: "labelContentTpl", first: true, predicate: ["labelTpl"], descendants: true, read: TemplateRef }, { propertyName: "lockedTpl", first: true, predicate: ["lockedTpl"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateControlValueAccessorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DateControlValueAccessorComponent, isStandalone: true, inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", dateCharacters: "dateCharacters", role: "role", value: "value", error: "error", errorList: "errorList", withErrorIcon: "withErrorIcon", description: "description", autofocus: "autofocus", defaultValue: "defaultValue", reset: "reset", optional: "optional", dateInputMask: "dateInputMask", locked: "locked", displayDisabledAsLocked: "displayDisabledAsLocked", required: "required", invalid: "invalid", valid: "valid", focused: "focused", disabled: "disabled", locale: "locale", dateFormat: "dateFormat", dateLocale: "dateLocale" }, outputs: { ngvFocus: "ngvFocus", ngvBlur: "ngvBlur" }, host: { properties: { "attr.id": "this.id" } }, queries: [{ propertyName: "labelContentTpl", first: true, predicate: ["labelTpl"], descendants: true, read: TemplateRef }, { propertyName: "lockedTpl", first: true, predicate: ["lockedTpl"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateControlValueAccessorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateControlValueAccessorComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
@@ -921,13 +921,15 @@ class CalendarDateDirective {
             this.nativeElement.disabled = this.disabled;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CalendarDateDirective, selector: "[calendarDate]", inputs: { calendarDate: "calendarDate", selected: "selected", notWithinMonth: "notWithinMonth", disabled: "disabled" }, host: { properties: { "class.selected": "this.selected", "class.not-within-month": "this.notWithinMonth", "class.today": "this.isToday" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: CalendarDateDirective, isStandalone: false, selector: "[calendarDate]", inputs: { calendarDate: "calendarDate", selected: "selected", notWithinMonth: "notWithinMonth", disabled: "disabled" }, host: { properties: { "class.selected": "this.selected", "class.not-within-month": "this.notWithinMonth", "class.today": "this.isToday" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarDateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarDateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[calendarDate]', // eslint-disable-line @angular-eslint/directive-selector
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[calendarDate]',
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { calendarDate: [{
                 type: Input
@@ -974,12 +976,15 @@ class IsDisabledPipe {
         // otherwise show date as not disabled
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: IsDisabledPipe, name: "isDisabled" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: IsDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: IsDisabledPipe, isStandalone: false, name: "isDisabled" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsDisabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: IsDisabledPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'isDisabled' }]
+            args: [{
+                    name: 'isDisabled',
+                    standalone: false
+                }]
         }] });
 
 class DateThookPipe {
@@ -1002,25 +1007,29 @@ class DateThookPipe {
         }
         return 'disabled-date';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateThookPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DateThookPipe, name: "dateThook" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateThookPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: DateThookPipe, isStandalone: false, name: "dateThook" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateThookPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateThookPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'dateThook' }]
+            args: [{
+                    name: 'dateThook',
+                    standalone: false
+                }]
         }] });
 
 class MatchesPipe {
     transform(value, selected) {
         return match(value, selected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchesPipe, name: "matches" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: MatchesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: MatchesPipe, isStandalone: false, name: "matches" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: MatchesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'matches',
+                    standalone: false
                 }]
         }] });
 
@@ -1174,12 +1183,12 @@ class CalendarComponent {
             ...config,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarComponent, selector: "nggv-calendar", inputs: { year: "year", month: "month", selected: "selected", locale: "locale", minCalendarRows: "minCalendarRows", firstDayOfWeek: "firstDayOfWeek", type: "type", disableDates: "disableDates", disableWeekDays: "disableWeekDays", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { dateClick: "dateClick" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, viewQueries: [{ propertyName: "dateButtonRefs", predicate: CalendarDateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }, { kind: "pipe", type: DateThookPipe, name: "dateThook" }, { kind: "pipe", type: MatchesPipe, name: "matches" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: CalendarComponent, isStandalone: false, selector: "nggv-calendar", inputs: { year: "year", month: "month", selected: "selected", locale: "locale", minCalendarRows: "minCalendarRows", firstDayOfWeek: "firstDayOfWeek", type: "type", disableDates: "disableDates", disableWeekDays: "disableWeekDays", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { dateClick: "dateClick" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, viewQueries: [{ propertyName: "dateButtonRefs", predicate: CalendarDateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button{width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }, { kind: "pipe", type: DateThookPipe, name: "dateThook" }, { kind: "pipe", type: MatchesPipe, name: "matches" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-calendar', template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"] }]
+            args: [{ selector: 'nggv-calendar', standalone: false, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button{width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"] }]
         }], propDecorators: { dateClick: [{
                 type: Output
             }], dateButtonRefs: [{
@@ -1260,10 +1269,10 @@ class CalendarMonth {
         previousYear.setFullYear(previousYear.getFullYear() - 1);
         return new CalendarMonth(previousYear);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarMonth, deps: [{ token: Date }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarMonth }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarMonth, deps: [{ token: Date }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarMonth }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarMonth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarMonth, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Date }] });
 
@@ -1352,12 +1361,12 @@ class CalendarControlComponent {
             },
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarControlComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: { activeCalendar: "activeCalendar", locale: "locale", type: "type" }, outputs: { calendarChange: "calendarChange" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarControlComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: CalendarControlComponent, isStandalone: false, selector: "nggv-calendar-control", inputs: { activeCalendar: "activeCalendar", locale: "locale", type: "type" }, outputs: { calendarChange: "calendarChange" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color)}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-select{appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding-right:3rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button.nggv-prev-button,:host button.nggv-next-button{border:none;height:2rem;width:2rem;padding:0 .75em}@media(max-width:47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CalendarControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-calendar-control', template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"] }]
+            args: [{ selector: 'nggv-calendar-control', standalone: false, template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color)}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-select{appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding-right:3rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button.nggv-prev-button,:host button.nggv-next-button{border:none;height:2rem;width:2rem;padding:0 .75em}@media(max-width:47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"] }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }], propDecorators: { calendarChange: [{
                 type: Output
             }], activeCalendar: [{
@@ -1531,12 +1540,12 @@ class DatepickerComponent {
         }
         this.renderer.setStyle(datePicker, 'max-height', `${maxDatepickerHeight}px`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, selector: "nggv-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minCalendarRows: "minCalendarRows", selected: "selected", locale: "locale", type: "type", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", dynamicPosition: "dynamicPosition", size: "size" }, outputs: { ngvDateChange: "ngvDateChange" }, host: { properties: { "attr.data-position": "this.positionAttr", "attr.data-size": "this.sizeAttr" } }, viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n  [activeCalendar]=\"activeCalendar\"\n  [locale]=\"locale\"\n  [type]=\"type\"\n  (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n  <span *ngFor=\"let weekday of weekdayArray\">{{\n    weekday | date: 'EEE' : undefined : locale\n  }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      calendarTemplate;\n      context: {\n        calendar: activeCalendar,\n        disableDates: disabledDatesForActiveMonth,\n      }\n    \"\n  >\n  </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #calendarTemplate\n  let-calendar=\"calendar\"\n  let-disableDates=\"disableDates\"\n>\n  <nggv-calendar\n    [year]=\"calendar.year\"\n    [month]=\"calendar.month\"\n    [type]=\"type\"\n    [locale]=\"locale\"\n    [disableDates]=\"disableDates\"\n    [selected]=\"selected\"\n    [lastValid]=\"lastValid\"\n    [firstValid]=\"firstValid\"\n    [closingTime]=\"closingTime\"\n    [disableWeekDays]=\"disableWeekDays\"\n    [minCalendarRows]=\"minCalendarRows\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    (dateClick)=\"dateClickHandler($event)\"\n  >\n  </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif;font-size:.875rem}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-extended-controls{display:flex;padding:.5rem}:host[data-position=top]{top:auto;bottom:100%}:host[data-position=top][data-size=large]{transform:translateY(calc(-.5rem - 45px))}:host[data-position=top][data-size=small]{transform:translateY(calc(-.5rem - 35px))}:host[data-position=bottom]{bottom:0;transform:translateY(100%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalendarComponent, selector: "nggv-calendar", inputs: ["year", "month", "selected", "locale", "minCalendarRows", "firstDayOfWeek", "type", "disableDates", "disableWeekDays", "firstValid", "lastValid", "closingTime"], outputs: ["dateClick"] }, { kind: "component", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: ["activeCalendar", "locale", "type"], outputs: ["calendarChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: DatepickerComponent, isStandalone: false, selector: "nggv-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minCalendarRows: "minCalendarRows", selected: "selected", locale: "locale", type: "type", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", dynamicPosition: "dynamicPosition", size: "size" }, outputs: { ngvDateChange: "ngvDateChange" }, host: { properties: { "attr.data-position": "this.positionAttr", "attr.data-size": "this.sizeAttr" } }, viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n  [activeCalendar]=\"activeCalendar\"\n  [locale]=\"locale\"\n  [type]=\"type\"\n  (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n  <span *ngFor=\"let weekday of weekdayArray\">{{\n    weekday | date: 'EEE' : undefined : locale\n  }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      calendarTemplate;\n      context: {\n        calendar: activeCalendar,\n        disableDates: disabledDatesForActiveMonth,\n      }\n    \"\n  >\n  </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #calendarTemplate\n  let-calendar=\"calendar\"\n  let-disableDates=\"disableDates\"\n>\n  <nggv-calendar\n    [year]=\"calendar.year\"\n    [month]=\"calendar.month\"\n    [type]=\"type\"\n    [locale]=\"locale\"\n    [disableDates]=\"disableDates\"\n    [selected]=\"selected\"\n    [lastValid]=\"lastValid\"\n    [firstValid]=\"firstValid\"\n    [closingTime]=\"closingTime\"\n    [disableWeekDays]=\"disableWeekDays\"\n    [minCalendarRows]=\"minCalendarRows\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    (dateClick)=\"dateClickHandler($event)\"\n  >\n  </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-weekday-row{font-size:.875rem}:host .nggv-extended-controls{display:flex;padding:.5rem}:host[data-position=top]{top:auto;bottom:100%}:host[data-position=top][data-size=large]{transform:translateY(calc(-.5rem - 45px))}:host[data-position=top][data-size=small]{transform:translateY(calc(-.5rem - 35px))}:host[data-position=bottom]{bottom:0;transform:translateY(100%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalendarComponent, selector: "nggv-calendar", inputs: ["year", "month", "selected", "locale", "minCalendarRows", "firstDayOfWeek", "type", "disableDates", "disableWeekDays", "firstValid", "lastValid", "closingTime"], outputs: ["dateClick"] }, { kind: "component", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: ["activeCalendar", "locale", "type"], outputs: ["calendarChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-datepicker', template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n  [activeCalendar]=\"activeCalendar\"\n  [locale]=\"locale\"\n  [type]=\"type\"\n  (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n  <span *ngFor=\"let weekday of weekdayArray\">{{\n    weekday | date: 'EEE' : undefined : locale\n  }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      calendarTemplate;\n      context: {\n        calendar: activeCalendar,\n        disableDates: disabledDatesForActiveMonth,\n      }\n    \"\n  >\n  </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #calendarTemplate\n  let-calendar=\"calendar\"\n  let-disableDates=\"disableDates\"\n>\n  <nggv-calendar\n    [year]=\"calendar.year\"\n    [month]=\"calendar.month\"\n    [type]=\"type\"\n    [locale]=\"locale\"\n    [disableDates]=\"disableDates\"\n    [selected]=\"selected\"\n    [lastValid]=\"lastValid\"\n    [firstValid]=\"firstValid\"\n    [closingTime]=\"closingTime\"\n    [disableWeekDays]=\"disableWeekDays\"\n    [minCalendarRows]=\"minCalendarRows\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    (dateClick)=\"dateClickHandler($event)\"\n  >\n  </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif;font-size:.875rem}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-extended-controls{display:flex;padding:.5rem}:host[data-position=top]{top:auto;bottom:100%}:host[data-position=top][data-size=large]{transform:translateY(calc(-.5rem - 45px))}:host[data-position=top][data-size=small]{transform:translateY(calc(-.5rem - 35px))}:host[data-position=bottom]{bottom:0;transform:translateY(100%)}\n"] }]
+            args: [{ selector: 'nggv-datepicker', standalone: false, template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n  [activeCalendar]=\"activeCalendar\"\n  [locale]=\"locale\"\n  [type]=\"type\"\n  (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n  <span *ngFor=\"let weekday of weekdayArray\">{{\n    weekday | date: 'EEE' : undefined : locale\n  }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      calendarTemplate;\n      context: {\n        calendar: activeCalendar,\n        disableDates: disabledDatesForActiveMonth,\n      }\n    \"\n  >\n  </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #calendarTemplate\n  let-calendar=\"calendar\"\n  let-disableDates=\"disableDates\"\n>\n  <nggv-calendar\n    [year]=\"calendar.year\"\n    [month]=\"calendar.month\"\n    [type]=\"type\"\n    [locale]=\"locale\"\n    [disableDates]=\"disableDates\"\n    [selected]=\"selected\"\n    [lastValid]=\"lastValid\"\n    [firstValid]=\"firstValid\"\n    [closingTime]=\"closingTime\"\n    [disableWeekDays]=\"disableWeekDays\"\n    [minCalendarRows]=\"minCalendarRows\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    (dateClick)=\"dateClickHandler($event)\"\n  >\n  </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-weekday-row{font-size:.875rem}:host .nggv-extended-controls{display:flex;padding:.5rem}:host[data-position=top]{top:auto;bottom:100%}:host[data-position=top][data-size=large]{transform:translateY(calc(-.5rem - 45px))}:host[data-position=top][data-size=small]{transform:translateY(calc(-.5rem - 35px))}:host[data-position=bottom]{bottom:0;transform:translateY(100%)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { calendarTemplate: [{
                 type: ViewChild,
                 args: ['calendarTemplate']
@@ -1671,7 +1680,7 @@ class DateInputComponent extends DateControlValueAccessorComponent {
      */
     onValueChange(eventTarget) {
         // Will be in the format selected in inputMask
-        const value = `${eventTarget.inputmask.undoValue}` ?? '';
+        const value = `${eventTarget.inputmask.undoValue}`;
         // Use parserfunction from inputMask to parse to a date object since value can be in multiple formats
         // Then ontrol value accessor will ensure correct formatting of state
         const parsedDate = DateControlValueAccessorComponent.parseDateLike(this.dateInputMask.parser(value));
@@ -1735,12 +1744,12 @@ class DateInputComponent extends DateControlValueAccessorComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i2.TranslocoService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape", closeOnScroll: "closeOnScroll", size: "size", dynamicPosition: "dynamicPosition" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        @if (size === 'small') {\n          <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n        }\n\n        @if (size === 'large') {\n          <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n        }\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        [dynamicPosition]=\"dynamicPosition\"\n        [size]=\"size\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime", "dynamicPosition", "size"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i2.TranslocoService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DateInputComponent, isStandalone: false, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape", closeOnScroll: "closeOnScroll", size: "size", dynamicPosition: "dynamicPosition" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        @if (size === 'small') {\n          <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n        }\n\n        @if (size === 'large') {\n          <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n        }\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        [dynamicPosition]=\"dynamicPosition\"\n        [size]=\"size\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media(max-width:47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label{display:block}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap{height:2.625rem;display:flex}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date{border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media(max-width:47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date{background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date{border:none;min-height:2.375rem;width:100%;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:1rem}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime", "dynamicPosition", "size"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        @if (size === 'small') {\n          <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n        }\n\n        @if (size === 'large') {\n          <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n        }\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        [dynamicPosition]=\"dynamicPosition\"\n        [size]=\"size\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"] }]
+            args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', standalone: false, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        @if (size === 'small') {\n          <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n        }\n\n        @if (size === 'large') {\n          <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n        }\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        [dynamicPosition]=\"dynamicPosition\"\n        [size]=\"size\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media(max-width:47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label{display:block}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap{height:2.625rem;display:flex}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date{border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media(max-width:47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date{background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date{border:none;min-height:2.375rem;width:100%;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:1rem}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1796,8 +1805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class NggvDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NggvDatepickerModule, declarations: [CalendarComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: NggvDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: NggvDatepickerModule, declarations: [CalendarComponent,
             CalendarDateDirective,
             IsDisabledPipe,
             DateThookPipe,
@@ -1810,14 +1819,14 @@ class NggvDatepickerModule {
             TranslocoModule,
             NggvInputMaskModule,
             NggCoreWrapperModule], exports: [DateInputComponent, DatepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDatepickerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: NggvDatepickerModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslocoModule,
             NggvInputMaskModule,
             NggCoreWrapperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: NggvDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [