@sebgroup/green-angular 8.1.0 → 9.0.0

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

@@ -2,14 +2,14 @@ import * as i0 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';
-import { TRANSLOCO_SCOPE, TranslocoModule } from '@jsverse/transloco';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, debounceTime, map, distinctUntilChanged, startWith } from 'rxjs/operators';
-import * as i4 from '@sebgroup/green-angular/src/v-angular/input-mask';
-import { createMask, NggvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask';
+import * as i2 from '@jsverse/transloco';
+import { TRANSLOCO_SCOPE, TranslocoModule } from '@jsverse/transloco';
 import * as i1$1 from '@angular/common';
 import { WeekDay, formatDate, CommonModule } from '@angular/common';
+import * as i4 from '@sebgroup/green-angular/src/v-angular/input-mask';
+import { createMask, NggvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask';
 import '@sebgroup/green-core/components/icon/icons/chevron-left.js';
 import '@sebgroup/green-core/components/icon/icons/chevron-right.js';
 import * as i3 from '@sebgroup/green-angular/src/lib/shared';
@@ -17,6 +17,220 @@ import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared';
 import '@sebgroup/green-core/components/icon/icons/calendar.js';
 import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
 
+const weekdays = [
+    WeekDay.Monday,
+    WeekDay.Tuesday,
+    WeekDay.Wednesday,
+    WeekDay.Thursday,
+    WeekDay.Friday,
+    WeekDay.Saturday,
+    WeekDay.Sunday,
+];
+const sortWeekDays = (firstDayOfWeek) => {
+    const firstDayIndex = weekdays.indexOf(firstDayOfWeek);
+    const weekStart = weekdays.slice(firstDayIndex);
+    const weekEnd = weekdays.slice(0, firstDayIndex);
+    return weekStart.concat(weekEnd);
+};
+/**
+ * Safely converts a value to a Date object, handling timezone issues.
+ * If the value is already a Date, returns it as-is.
+ * If it's a string in ISO format (YYYY-MM-DD), parses it in local timezone.
+ * Otherwise, uses standard Date constructor.
+ */
+const toLocalDate = (value) => {
+    // If already a Date object, use it directly to avoid timezone issues
+    if (value instanceof Date) {
+        return value;
+    }
+    // If string is in ISO format (YYYY-MM-DD), parse in local timezone
+    const dateMatch = String(value).match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (dateMatch) {
+        const [, year, month, day] = dateMatch;
+        return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    }
+    // Otherwise use standard Date constructor
+    return new Date(value);
+};
+/** Sets labels and sort weekday arrays based off of first day of week. */
+const getSortedWeekDays = (firstDayOfWeek, startDate) => {
+    if (startDate === undefined)
+        startDate = new Date();
+    // sort weekdays according to firstDayOfWeek
+    const sortedWeekdays = sortWeekDays(firstDayOfWeek);
+    // get the date object for the first day of week
+    const startDayIndex = sortedWeekdays.indexOf(startDate.getDay());
+    const firstOfWeek = new Date(startDate);
+    firstOfWeek.setDate(startDate.getDate() - startDayIndex);
+    // map each day in array to a date object
+    return sortedWeekdays.map((_, offset) => {
+        // set appropriate date
+        const weekdayDate = new Date(firstOfWeek);
+        weekdayDate.setDate(weekdayDate.getDate() + offset);
+        // and return value
+        return weekdayDate;
+    });
+};
+/** Generate a matrix of dates used to visualize a calendar month. */
+const generateDateMatrix = (month, year, minWeeks = 5, firstDayOfWeek) => {
+    // generate a new matrix with 5 or 6 rows (depending on number of days in that month)
+    const matrix = new Array(minWeeks);
+    matrix.fill([]);
+    const date = new Date(year, month, 1);
+    const firstDate = firstCalendarDate(date, firstDayOfWeek);
+    // for each week in that month
+    const dateMatrix = matrix.map((_, weekOffset) => {
+        const offset = weekOffset * 7;
+        // update the date with the offset for that week
+        const firstOfWeek = new Date(firstDate);
+        firstOfWeek.setDate(firstDate.getDate() + offset);
+        return getSortedWeekDays(firstDayOfWeek, firstOfWeek);
+    });
+    // check if another row needs to be added (if last dates of month are missing)
+    const lastAdded = dateMatrix.slice(-1)[0].slice(-1)[0];
+    const lastOfMonth = new Date(lastAdded);
+    lastOfMonth.setMonth(month + 1);
+    lastOfMonth.setDate(0);
+    if (isBefore(lastAdded, lastOfMonth)) {
+        // add another week row
+        const firstOfWeek = new Date(lastAdded);
+        firstOfWeek.setDate(lastAdded.getDate() + 1);
+        dateMatrix.push(getSortedWeekDays(firstDayOfWeek, firstOfWeek));
+    }
+    // return final datematrix
+    return dateMatrix;
+};
+/** Returns the first date used in the calendars first button. */
+const firstCalendarDate = (date, firstDayOfWeek) => {
+    // sort weekdays according to firstDayOfWeek
+    const sortedWeekdays = sortWeekDays(firstDayOfWeek);
+    // set date to the first of month
+    const firstOfMonth = new Date(date);
+    firstOfMonth.setDate(1);
+    // get the offset
+    const offset = sortedWeekdays.indexOf(firstOfMonth.getDay());
+    const firstOfWeek = new Date(firstOfMonth);
+    // use offset to set date
+    firstOfWeek.setDate(1 - offset);
+    return firstOfWeek;
+};
+const getDayOffset = (from, to, firstDayOfWeek, direction) => {
+    const sortedWeekdays = sortWeekDays(firstDayOfWeek);
+    const fromIndex = sortedWeekdays.indexOf(from);
+    const toIndex = sortedWeekdays.indexOf(to);
+    const offset = toIndex - fromIndex;
+    if (direction === 'forward' && offset < 0)
+        return offset + 6;
+    if (direction === 'back' && offset > 0)
+        return offset - 6;
+    return offset;
+};
+/** Returns an array of Dates for each of month. */
+const getMonthArray = () => {
+    const firstDayOfYear = new Date();
+    firstDayOfYear.setMonth(0);
+    firstDayOfYear.setDate(1);
+    // create a new array of length 12,
+    // and fill it with date objects of 1:st of january
+    const monthArray = new Array(12).fill(firstDayOfYear);
+    // map through the array,
+    // and create a new instance of the date,
+    // changing the month based on index (0 - 11)
+    return monthArray.map((d, index) => {
+        const date = new Date(d);
+        date.setMonth(index);
+        return date;
+    });
+};
+/** Returns an array of Dates for the current year and the next. */
+const getYearArray = () => {
+    const currentYear = new Date();
+    currentYear.setMonth(0);
+    currentYear.setDate(1);
+    const nextYear = new Date(currentYear);
+    nextYear.setFullYear(currentYear.getFullYear() + 1);
+    return [currentYear, nextYear];
+};
+/** Returns true if the two dates have the same year, month and date values. */
+const match = (a, b) => {
+    if (!a || !b)
+        return false;
+    if (a.getDate() !== b.getDate())
+        return false;
+    if (a.getMonth() !== b.getMonth())
+        return false;
+    if (a.getFullYear() !== b.getFullYear())
+        return false;
+    return true;
+};
+const afterClosingHours = (closingHours) => {
+    if (!closingHours)
+        return false;
+    return Date.now() >= closingHours.getTime();
+};
+/**
+ * Checks if a date is before control date, regardless of time.
+ *
+ * @param date - comparison date
+ * @param controlDate - date to compare against
+ * @returns - true if the comparison date is before the control date
+ */
+const isBefore = (date, controlDate) => {
+    // if year values are dissimilar
+    if (date.getFullYear() !== controlDate.getFullYear()) {
+        return date.getFullYear() < controlDate.getFullYear();
+    }
+    // if month values are dissimilar
+    if (date.getMonth() !== controlDate.getMonth()) {
+        return date.getMonth() < controlDate.getMonth();
+    }
+    // if year and month are equal, check the date
+    return date.getDate() < controlDate.getDate();
+};
+/**
+ * Checks if a date is after control date, regardless of time.
+ *
+ * @param date - comparison date
+ * @param controlDate - date to compare against
+ * @returns - true if the comparison date is before the control date
+ */
+const isAfter = (date, controlDate) => {
+    // if year values are dissimilar
+    if (date.getFullYear() !== controlDate.getFullYear()) {
+        return date.getFullYear() > controlDate.getFullYear();
+    }
+    // if month values are dissimilar
+    if (date.getMonth() !== controlDate.getMonth()) {
+        return date.getMonth() > controlDate.getMonth();
+    }
+    // if year and month are equal, check the date
+    return date.getDate() > controlDate.getDate();
+};
+/**
+ * Checks if a value can be used to initiate a new Date object.
+ *
+ * @param value any value
+ * @returns - true if value can be coersed to a Date.
+ */
+const isValid = (value) => {
+    // if value is type of string and can be parsed to a Date
+    const date = value && typeof value === 'string' && !isNaN(Date.parse(value))
+        ? new Date(value)
+        : null;
+    switch (true) {
+        // if date or value is a valid date object - return valid
+        case typeof value?.getMonth === 'function':
+        case typeof date?.getMonth === 'function':
+            return true;
+        // if date or value is not a valid date object - return invalid
+        case value == null:
+        case date?.toString() === 'Invalid Date':
+            return false;
+        default:
+            return false;
+    }
+};
+
 /**
  * Helper function to generate InputmaskOptions by requested locale.
  * @param locale - requested locale. If not given, it'll use the browsers locale
@@ -440,7 +654,7 @@ class DateControlValueAccessorComponent {
         try {
             // if value is type of string,
             if (value && typeof value === 'string')
-                value = new Date(value);
+                value = toLocalDate(value);
             switch (true) {
                 // remove instances where the value will not correctly be parsed to a date string
                 case value == null:
@@ -448,8 +662,7 @@ class DateControlValueAccessorComponent {
                     return null;
                 // if value-as-date is a valid date object, parse the value to YYYY-MM-DD format
                 case typeof value?.getMonth === 'function':
-                    const date = new Date(value.getTime() - value.getTimezoneOffset() * 60 * 1000);
-                    return date.toISOString().split('T')[0];
+                    return new Intl.DateTimeFormat('sv-SE').format(value);
                 default:
                     return value;
             }
@@ -710,200 +923,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
-const weekdays = [
-    WeekDay.Monday,
-    WeekDay.Tuesday,
-    WeekDay.Wednesday,
-    WeekDay.Thursday,
-    WeekDay.Friday,
-    WeekDay.Saturday,
-    WeekDay.Sunday,
-];
-const sortWeekDays = (firstDayOfWeek) => {
-    const firstDayIndex = weekdays.indexOf(firstDayOfWeek);
-    const weekStart = weekdays.slice(firstDayIndex);
-    const weekEnd = weekdays.slice(0, firstDayIndex);
-    return weekStart.concat(weekEnd);
-};
-/** Sets labels and sort weekday arrays based off of first day of week. */
-const getSortedWeekDays = (firstDayOfWeek, startDate) => {
-    if (startDate === undefined)
-        startDate = new Date();
-    // sort weekdays according to firstDayOfWeek
-    const sortedWeekdays = sortWeekDays(firstDayOfWeek);
-    // get the date object for the first day of week
-    const startDayIndex = sortedWeekdays.indexOf(startDate.getDay());
-    const firstOfWeek = new Date(startDate);
-    firstOfWeek.setDate(startDate.getDate() - startDayIndex);
-    // map each day in array to a date object
-    return sortedWeekdays.map((_, offset) => {
-        // set appropriate date
-        const weekdayDate = new Date(firstOfWeek);
-        weekdayDate.setDate(weekdayDate.getDate() + offset);
-        // and return value
-        return weekdayDate;
-    });
-};
-/** Generate a matrix of dates used to visualize a calendar month. */
-const generateDateMatrix = (month, year, minWeeks = 5, firstDayOfWeek) => {
-    // generate a new matrix with 5 or 6 rows (depending on number of days in that month)
-    const matrix = new Array(minWeeks);
-    matrix.fill([]);
-    const date = new Date(year, month, 1);
-    const firstDate = firstCalendarDate(date, firstDayOfWeek);
-    // for each week in that month
-    const dateMatrix = matrix.map((_, weekOffset) => {
-        const offset = weekOffset * 7;
-        // update the date with the offset for that week
-        const firstOfWeek = new Date(firstDate);
-        firstOfWeek.setDate(firstDate.getDate() + offset);
-        return getSortedWeekDays(firstDayOfWeek, firstOfWeek);
-    });
-    // check if another row needs to be added (if last dates of month are missing)
-    const lastAdded = dateMatrix.slice(-1)[0].slice(-1)[0];
-    const lastOfMonth = new Date(lastAdded);
-    lastOfMonth.setMonth(month + 1);
-    lastOfMonth.setDate(0);
-    if (isBefore(lastAdded, lastOfMonth)) {
-        // add another week row
-        const firstOfWeek = new Date(lastAdded);
-        firstOfWeek.setDate(lastAdded.getDate() + 1);
-        dateMatrix.push(getSortedWeekDays(firstDayOfWeek, firstOfWeek));
-    }
-    // return final datematrix
-    return dateMatrix;
-};
-/** Returns the first date used in the calendars first button. */
-const firstCalendarDate = (date, firstDayOfWeek) => {
-    // sort weekdays according to firstDayOfWeek
-    const sortedWeekdays = sortWeekDays(firstDayOfWeek);
-    // set date to the first of month
-    const firstOfMonth = new Date(date);
-    firstOfMonth.setDate(1);
-    // get the offset
-    const offset = sortedWeekdays.indexOf(firstOfMonth.getDay());
-    const firstOfWeek = new Date(firstOfMonth);
-    // use offset to set date
-    firstOfWeek.setDate(1 - offset);
-    return firstOfWeek;
-};
-const getDayOffset = (from, to, firstDayOfWeek, direction) => {
-    const sortedWeekdays = sortWeekDays(firstDayOfWeek);
-    const fromIndex = sortedWeekdays.indexOf(from);
-    const toIndex = sortedWeekdays.indexOf(to);
-    const offset = toIndex - fromIndex;
-    if (direction === 'forward' && offset < 0)
-        return offset + 6;
-    if (direction === 'back' && offset > 0)
-        return offset - 6;
-    return offset;
-};
-/** Returns an array of Dates for each of month. */
-const getMonthArray = () => {
-    const firstDayOfYear = new Date();
-    firstDayOfYear.setMonth(0);
-    firstDayOfYear.setDate(1);
-    // create a new array of length 12,
-    // and fill it with date objects of 1:st of january
-    const monthArray = new Array(12).fill(firstDayOfYear);
-    // map through the array,
-    // and create a new instance of the date,
-    // changing the month based on index (0 - 11)
-    return monthArray.map((d, index) => {
-        const date = new Date(d);
-        date.setMonth(index);
-        return date;
-    });
-};
-/** Returns an array of Dates for the current year and the next. */
-const getYearArray = () => {
-    const currentYear = new Date();
-    currentYear.setMonth(0);
-    currentYear.setDate(1);
-    const nextYear = new Date(currentYear);
-    nextYear.setFullYear(currentYear.getFullYear() + 1);
-    return [currentYear, nextYear];
-};
-/** Returns true if the two dates have the same year, month and date values. */
-const match = (a, b) => {
-    if (!a || !b)
-        return false;
-    if (a.getDate() !== b.getDate())
-        return false;
-    if (a.getMonth() !== b.getMonth())
-        return false;
-    if (a.getFullYear() !== b.getFullYear())
-        return false;
-    return true;
-};
-const afterClosingHours = (closingHours) => {
-    if (!closingHours)
-        return false;
-    return Date.now() >= closingHours.getTime();
-};
-/**
- * Checks if a date is before control date, regardless of time.
- *
- * @param date - comparison date
- * @param controlDate - date to compare against
- * @returns - true if the comparison date is before the control date
- */
-const isBefore = (date, controlDate) => {
-    // if year values are dissimilar
-    if (date.getFullYear() !== controlDate.getFullYear()) {
-        return date.getFullYear() < controlDate.getFullYear();
-    }
-    // if month values are dissimilar
-    if (date.getMonth() !== controlDate.getMonth()) {
-        return date.getMonth() < controlDate.getMonth();
-    }
-    // if year and month are equal, check the date
-    return date.getDate() < controlDate.getDate();
-};
-/**
- * Checks if a date is after control date, regardless of time.
- *
- * @param date - comparison date
- * @param controlDate - date to compare against
- * @returns - true if the comparison date is before the control date
- */
-const isAfter = (date, controlDate) => {
-    // if year values are dissimilar
-    if (date.getFullYear() !== controlDate.getFullYear()) {
-        return date.getFullYear() > controlDate.getFullYear();
-    }
-    // if month values are dissimilar
-    if (date.getMonth() !== controlDate.getMonth()) {
-        return date.getMonth() > controlDate.getMonth();
-    }
-    // if year and month are equal, check the date
-    return date.getDate() > controlDate.getDate();
-};
-/**
- * Checks if a value can be used to initiate a new Date object.
- *
- * @param value any value
- * @returns - true if value can be coersed to a Date.
- */
-const isValid = (value) => {
-    // if value is type of string and can be parsed to a Date
-    const date = value && typeof value === 'string' && !isNaN(Date.parse(value))
-        ? new Date(value)
-        : null;
-    switch (true) {
-        // if date or value is a valid date object - return valid
-        case typeof value?.getMonth === 'function':
-        case typeof date?.getMonth === 'function':
-            return true;
-        // if date or value is not a valid date object - return invalid
-        case value == null:
-        case date?.toString() === 'Invalid Date':
-            return false;
-        default:
-            return false;
-    }
-};
-
 class CalendarDateDirective {
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -1061,7 +1080,7 @@ class CalendarComponent {
     }
     ngOnChanges(changes) {
         if (changes.selected?.currentValue) {
-            this.selected = new Date(changes.selected.currentValue);
+            this.selected = toLocalDate(changes.selected.currentValue);
         }
         if (changes.firstDayOfWeek?.currentValue) {
             this.lastDayOfWeek = sortWeekDays(changes.firstDayOfWeek.currentValue).pop();
@@ -1184,11 +1203,11 @@ class CalendarComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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{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:.25rem;border:solid 1px var(--gds-sys-color-base-600);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;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;border:none;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: "19.2.18", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            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"] }]
+            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{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:.25rem;border:solid 1px var(--gds-sys-color-base-600);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;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;border:none;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: [{
@@ -1362,11 +1381,11 @@ class CalendarControlComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CalendarControlComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}: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{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);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;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: "19.2.18", ngImport: i0, type: CalendarControlComponent, decorators: [{
             type: Component,
-            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"] }]
+            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{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}: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{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);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;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: [{
@@ -1445,7 +1464,7 @@ class DatepickerComponent {
             !!changes.selected.currentValue &&
             !changes.selected.isFirstChange()) {
             // set active calendar to match selected date
-            const activeCalendar = new CalendarMonth(new Date(changes.selected.currentValue));
+            const activeCalendar = new CalendarMonth(toLocalDate(changes.selected.currentValue));
             this.changeActiveCalendar(activeCalendar);
         }
         if (changes.disableDates && !changes.disableDates.isFirstChange()) {
@@ -1495,7 +1514,7 @@ class DatepickerComponent {
         const withinSameMonth = (a, b) => a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
         // filter out disabled dates for current and adjacent months
         return disableDates
-            .map((d) => new Date(d))
+            .map((d) => toLocalDate(d))
             .filter((d) => withinSameMonth(d, previousMonth) ||
             withinSameMonth(d, targetMonth) ||
             withinSameMonth(d, nextMonth));
@@ -1745,11 +1764,11 @@ class DateInputComponent extends DateControlValueAccessorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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.18", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.gds-form-control:focus,:host .gds-field-label.gds-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(.gds-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+.gds-button,:host .gds-field-label+.gds-group-stepper,:host .gds-field-label+.gds-stepper-wrapper,:host .gds-field-label+.gds-group{margin-top:.5rem}:host .gds-field-label+.gds-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.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.gds-form-control:focus,:host .gds-field-label--optional.gds-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(.gds-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+.gds-button,:host .gds-field-label--optional+.gds-group-stepper,:host .gds-field-label--optional+.gds-stepper-wrapper,:host .gds-field-label--optional+.gds-group{margin-top:.5rem}:host .gds-field-label--optional+.gds-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:.25rem;border:solid 1px var(--gds-sys-color-base-600);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;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 var(--gds-sys-transition)}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}: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:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}: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{background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}: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(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!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(--gds-sys-color-text-disabled)}@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: "19.2.18", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            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"] }]
+            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.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.gds-form-control:focus,:host .gds-field-label.gds-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(.gds-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+.gds-button,:host .gds-field-label+.gds-group-stepper,:host .gds-field-label+.gds-stepper-wrapper,:host .gds-field-label+.gds-group{margin-top:.5rem}:host .gds-field-label+.gds-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.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.gds-form-control:focus,:host .gds-field-label--optional.gds-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(.gds-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+.gds-button,:host .gds-field-label--optional+.gds-group-stepper,:host .gds-field-label--optional+.gds-stepper-wrapper,:host .gds-field-label--optional+.gds-group{margin-top:.5rem}:host .gds-field-label--optional+.gds-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:.25rem;border:solid 1px var(--gds-sys-color-base-600);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;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 var(--gds-sys-transition)}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}: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:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}: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{background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}: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(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!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(--gds-sys-color-text-disabled)}@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
                 }, {
@@ -1860,5 +1879,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarComponent, CalendarControlComponent, CalendarDateDirective, CalendarMonth, DateControlValueAccessorComponent, DateInputComponent, DatepickerComponent, IsDisabledPipe, MatchesPipe, NggvDatepickerModule, afterClosingHours, firstCalendarDate, generateDateMatrix, getDayOffset, getFormatDateMask, getLocaleDateMask, getLocaleDateString, getMonthArray, getSortedWeekDays, getYearArray, isAfter, isBefore, isValid, match, setDateFormatCharacters, sortWeekDays };
+export { CalendarComponent, CalendarControlComponent, CalendarDateDirective, CalendarMonth, DateControlValueAccessorComponent, DateInputComponent, DatepickerComponent, IsDisabledPipe, MatchesPipe, NggvDatepickerModule, afterClosingHours, firstCalendarDate, generateDateMatrix, getDayOffset, getFormatDateMask, getLocaleDateMask, getLocaleDateString, getMonthArray, getSortedWeekDays, getYearArray, isAfter, isBefore, isValid, match, setDateFormatCharacters, sortWeekDays, toLocalDate };
 //# sourceMappingURL=sebgroup-green-angular-src-v-angular-datepicker.mjs.map