@sebgroup/green-angular 5.1.2 → 5.2.0

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

@@ -0,0 +1,1759 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, TemplateRef, ElementRef, Directive, Self, Optional, Inject, ContentChild, ViewChild, HostBinding, Input, Output, Pipe, Component, ViewChildren, HostListener, Injectable, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * 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 i1$1 from '@angular/common';
+import { WeekDay, formatDate, CommonModule } from '@angular/common';
+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';
+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';
+
+/**
+ * Helper function to generate InputmaskOptions by requested locale.
+ * @param locale - requested locale. If not given, it'll use the browsers locale
+ * @returns InputmaskOptions with date settings
+ */
+const getLocaleDateMask = (dateCharacters, locale) => {
+    // If no locale has been passed, use browser language
+    if (!locale)
+        locale = navigator.language;
+    const format = getLocaleDateString(locale).toLowerCase();
+    return getFormatDateMask(format, dateCharacters);
+};
+const getLocaleDateString = (locale) => locale && dateFormats[locale] ? dateFormats[locale] : 'yyyy-MM-dd';
+const dateFormats = {
+    'af-ZA': 'yyyy/MM/dd',
+    'am-ET': 'dd/MM/yyyy',
+    'ar-AE': 'dd/MM/yyyy',
+    'ar-BH': 'dd/MM/yyyy',
+    'ar-DZ': 'dd-MM-yyyy',
+    'ar-EG': 'dd/MM/yyyy',
+    'ar-IQ': 'dd/MM/yyyy',
+    'ar-JO': 'dd/MM/yyyy',
+    'ar-KW': 'dd/MM/yyyy',
+    'ar-LB': 'dd/MM/yyyy',
+    'ar-LY': 'dd/MM/yyyy',
+    'ar-MA': 'dd-MM-yyyy',
+    'ar-OM': 'dd/MM/yyyy',
+    'ar-QA': 'dd/MM/yyyy',
+    'ar-SA': 'dd/MM/yyyy',
+    'ar-SY': 'dd/MM/yyyy',
+    'ar-TN': 'dd-MM-yyyy',
+    'ar-YE': 'dd/MM/yyyy',
+    'arn-CL': 'dd-MM-yyyy',
+    'as-IN': 'dd-MM-yyyy',
+    'az-Cyrl-AZ': 'dd.MM.yyyy',
+    'az-Latn-AZ': 'dd.MM.yyyy',
+    'ba-RU': 'dd.MM.yyyy',
+    'be-BY': 'dd.MM.yyyy',
+    'bg-BG': 'dd.MM.yyyy',
+    'bn-BD': 'dd-MM-yyyy',
+    'bn-IN': 'dd-MM-yyyy',
+    'bo-CN': 'yyyy/MM/dd',
+    'br-FR': 'dd/MM/yyyy',
+    'bs-Cyrl-BA': 'dd.MM.yyyy',
+    'bs-Latn-BA': 'dd.MM.yyyy',
+    'ca-ES': 'dd/MM/yyyy',
+    'co-FR': 'dd/MM/yyyy',
+    'cs-CZ': 'dd.MM.yyyy',
+    'cy-GB': 'dd/MM/yyyy',
+    'da-DK': 'dd.MM.yyyy',
+    'de-AT': 'dd.MM.yyyy',
+    'de-CH': 'dd.MM.yyyy',
+    'de-DE': 'dd.MM.yyyy',
+    'de-LI': 'dd.MM.yyyy',
+    'de-LU': 'dd.MM.yyyy',
+    'dsb-DE': 'dd.MM.yyyy',
+    'dv-MV': 'dd/MM/yyyy',
+    'el-GR': 'dd/MM/yyyy',
+    en: 'MM/dd/yyyy',
+    'en-029': 'MM/dd/yyyy',
+    'en-AU': 'dd/MM/yyyy',
+    'en-BZ': 'dd/MM/yyyy',
+    'en-CA': 'dd/MM/yyyy',
+    'en-GB': 'dd/MM/yyyy',
+    'en-IE': 'dd/MM/yyyy',
+    'en-IN': 'dd-MM-yyyy',
+    'en-JM': 'dd/MM/yyyy',
+    'en-MY': 'dd/MM/yyyy',
+    'en-NZ': 'dd/MM/yyyy',
+    'en-PH': 'MM/dd/yyyy',
+    'en-SG': 'dd/MM/yyyy',
+    'en-TT': 'dd/MM/yyyy',
+    'en-US': 'MM/dd/yyyy',
+    'en-ZA': 'yyyy/MM/dd',
+    'en-ZW': 'MM/dd/yyyy',
+    'es-AR': 'dd/MM/yyyy',
+    'es-BO': 'dd/MM/yyyy',
+    'es-CL': 'dd-MM-yyyy',
+    'es-CO': 'dd/MM/yyyy',
+    'es-CR': 'dd/MM/yyyy',
+    'es-DO': 'dd/MM/yyyy',
+    'es-EC': 'dd/MM/yyyy',
+    'es-ES': 'dd/MM/yyyy',
+    'es-GT': 'dd/MM/yyyy',
+    'es-HN': 'dd/MM/yyyy',
+    'es-MX': 'dd/MM/yyyy',
+    'es-NI': 'dd/MM/yyyy',
+    'es-PA': 'MM/dd/yyyy',
+    'es-PE': 'dd/MM/yyyy',
+    'es-PR': 'dd/MM/yyyy',
+    'es-PY': 'dd/MM/yyyy',
+    'es-SV': 'dd/MM/yyyy',
+    'es-US': 'MM/dd/yyyy',
+    'es-UY': 'dd/MM/yyyy',
+    'es-VE': 'dd/MM/yyyy',
+    'et-EE': 'dd.MM.yyyy',
+    'eu-ES': 'yyyy/MM/dd',
+    'fa-IR': 'MM/dd/yyyy',
+    'fi-FI': 'dd.MM.yyyy',
+    'fil-PH': 'MM/dd/yyyy',
+    'fo-FO': 'dd-MM-yyyy',
+    'fr-BE': 'dd/MM/yyyy',
+    'fr-CA': 'yyyy-MM-dd',
+    'fr-CH': 'dd.MM.yyyy',
+    'fr-FR': 'dd/MM/yyyy',
+    'fr-LU': 'dd/MM/yyyy',
+    'fr-MC': 'dd/MM/yyyy',
+    'fy-NL': 'dd-MM-yyyy',
+    'ga-IE': 'dd/MM/yyyy',
+    'gd-GB': 'dd/MM/yyyy',
+    'gl-ES': 'dd/MM/yyyy',
+    'gsw-FR': 'dd/MM/yyyy',
+    'gu-IN': 'dd-MM-yyyy',
+    'ha-Latn-NG': 'dd/MM/yyyy',
+    'he-IL': 'dd/MM/yyyy',
+    'hi-IN': 'dd-MM-yyyy',
+    'hr-BA': 'dd.MM.yyyy.',
+    'hr-HR': 'dd.MM.yyyy',
+    'hsb-DE': 'dd.MM.yyyy',
+    'hu-HU': 'yyyy.MM.dd.',
+    'hy-AM': 'dd.MM.yyyy',
+    'id-ID': 'dd/MM/yyyy',
+    'ig-NG': 'dd/MM/yyyy',
+    'ii-CN': 'yyyy/MM/dd',
+    'is-IS': 'dd.MM.yyyy',
+    'it-CH': 'dd.MM.yyyy',
+    'it-IT': 'dd/MM/yyyy',
+    'iu-Cans-CA': 'dd/MM/yyyy',
+    'iu-Latn-CA': 'dd/MM/yyyy',
+    'ja-JP': 'yyyy/MM/dd',
+    'ka-GE': 'dd.MM.yyyy',
+    'kk-KZ': 'dd.MM.yyyy',
+    'kl-GL': 'dd-MM-yyyy',
+    'km-KH': 'yyyy-MM-dd',
+    'kn-IN': 'dd-MM-yyyy',
+    'ko-KR': 'yyyy.MM.dd',
+    'kok-IN': 'dd-MM-yyyy',
+    'ky-KG': 'dd.MM.yyyy',
+    'lb-LU': 'dd/MM/yyyy',
+    'lo-LA': 'dd/MM/yyyy',
+    'lt-LT': 'yyyy.MM.dd',
+    'lv-LV': 'yyyy.MM.dd.',
+    'mi-NZ': 'dd/MM/yyyy',
+    'mk-MK': 'dd.MM.yyyy',
+    'ml-IN': 'dd-MM-yyyy',
+    'mn-MN': 'yyyy.MM.dd',
+    'mn-Mong-CN': 'yyyy/MM/dd',
+    'moh-CA': 'MM/dd/yyyy',
+    'mr-IN': 'dd-MM-yyyy',
+    'ms-BN': 'dd/MM/yyyy',
+    'ms-MY': 'dd/MM/yyyy',
+    'mt-MT': 'dd/MM/yyyy',
+    'nb-NO': 'dd.MM.yyyy',
+    'ne-NP': 'MM/dd/yyyy',
+    'nl-BE': 'dd/MM/yyyy',
+    'nl-NL': 'dd-MM-yyyy',
+    'nn-NO': 'dd.MM.yyyy',
+    'nso-ZA': 'yyyy/MM/dd',
+    'oc-FR': 'dd/MM/yyyy',
+    'or-IN': 'dd-MM-yyyy',
+    'pa-IN': 'dd-MM-yyyy',
+    'pl-PL': 'dd.MM.yyyy',
+    'prs-AF': 'dd/MM/yyyy',
+    'ps-AF': 'dd/MM/yyyy',
+    'pt-BR': 'dd/MM/yyyy',
+    'pt-PT': 'dd-MM-yyyy',
+    'qut-GT': 'dd/MM/yyyy',
+    'quz-BO': 'dd/MM/yyyy',
+    'quz-EC': 'dd/MM/yyyy',
+    'quz-PE': 'dd/MM/yyyy',
+    'rm-CH': 'dd/MM/yyyy',
+    'ro-RO': 'dd.MM.yyyy',
+    'ru-RU': 'dd.MM.yyyy',
+    'rw-RW': 'MM/dd/yyyy',
+    'sa-IN': 'dd-MM-yyyy',
+    'sah-RU': 'MM.dd.yyyy',
+    se: 'yyyy-MM-dd',
+    'se-FI': 'dd.MM.yyyy',
+    'se-NO': 'dd.MM.yyyy',
+    'se-SE': 'yyyy-MM-dd',
+    'si-LK': 'yyyy-MM-dd',
+    'sk-SK': 'dd.MM.yyyy',
+    'sl-SI': 'dd.MM.yyyy',
+    'sma-NO': 'dd.MM.yyyy',
+    'sma-SE': 'yyyy-MM-dd',
+    'smj-NO': 'dd.MM.yyyy',
+    'smj-SE': 'yyyy-MM-dd',
+    'smn-FI': 'dd.MM.yyyy',
+    'sms-FI': 'dd.MM.yyyy',
+    'sq-AL': 'yyyy-MM-dd',
+    'sr-Cyrl-BA': 'dd.MM.yyyy',
+    'sr-Cyrl-CS': 'dd.MM.yyyy',
+    'sr-Cyrl-ME': 'dd.MM.yyyy',
+    'sr-Cyrl-RS': 'dd.MM.yyyy',
+    'sr-Latn-BA': 'dd.MM.yyyy',
+    'sr-Latn-CS': 'dd.MM.yyyy',
+    'sr-Latn-ME': 'dd.MM.yyyy',
+    'sr-Latn-RS': 'dd.MM.yyyy',
+    sv: 'yyyy-MM-dd',
+    'sv-FI': 'dd.MM.yyyy',
+    'sv-SE': 'yyyy-MM-dd',
+    'sw-KE': 'MM/dd/yyyy',
+    'syr-SY': 'dd/MM/yyyy',
+    'ta-IN': 'dd-MM-yyyy',
+    'te-IN': 'dd-MM-yyyy',
+    'tg-Cyrl-TJ': 'dd.MM.yyyy',
+    'th-TH': 'dd/MM/yyyy',
+    'tk-TM': 'dd.MM.yyyy',
+    'tn-ZA': 'yyyy/MM/dd',
+    'tr-TR': 'dd.MM.yyyy',
+    'tt-RU': 'dd.MM.yyyy',
+    'tzm-Latn-DZ': 'dd-MM-yyyy',
+    'ug-CN': 'yyyy-MM-dd',
+    'uk-UA': 'dd.MM.yyyy',
+    'ur-PK': 'dd/MM/yyyy',
+    'uz-Cyrl-UZ': 'dd.MM.yyyy',
+    'uz-Latn-UZ': 'dd/MM yyyy',
+    'vi-VN': 'dd/MM/yyyy',
+    'wo-SN': 'dd/MM/yyyy',
+    'xh-ZA': 'yyyy/MM/dd',
+    'yo-NG': 'dd/MM/yyyy',
+    'zh-CN': 'yyyy/MM/dd',
+    'zh-HK': 'dd/MM/yyyy',
+    'zh-MO': 'dd/MM/yyyy',
+    'zh-SG': 'dd/MM/yyyy',
+    'zh-TW': 'yyyy/MM/dd',
+    'zu-ZA': 'yyyy/MM/dd',
+};
+const getFormatDateMask = (format, dateCharacters) => {
+    const separators = [' ', '.', '-', '/'];
+    const separator = separators.find((operator) => format.indexOf(operator) > -1) ?? '-';
+    const dateObjects = format.split(separator);
+    const year = { key: 'year', index: 0 }, month = { key: 'month', index: 1 }, day = { key: 'day', index: 2 };
+    dateObjects.forEach((dateObject, index) => {
+        switch (dateObject[0]) {
+            case 'y':
+                year.index = index;
+                break;
+            case 'm':
+                month.index = index;
+                break;
+            case 'd':
+                day.index = index;
+                break;
+        }
+    });
+    const placeholder = setDateFormatCharacters(format, dateCharacters);
+    return createMask({
+        alias: 'datetime',
+        inputFormat: format,
+        placeholder,
+        parser: (value) => {
+            const values = value.split(separator);
+            const y = +values[year.index];
+            const m = +values[month.index] - 1;
+            const d = +values[day.index];
+            return new Date(y, m, d);
+        },
+        onBeforeMask(initialValue) {
+            if (!initialValue || typeof initialValue !== 'string')
+                return '';
+            // If initialValues is in dateTime format, remove seconds that present after the "T"
+            if (initialValue.includes('T'))
+                initialValue = initialValue.split('T')[0];
+            // initialValue should always be in yyyy-mm-dd no matter if set from control, via datepicker or manually with keyboard
+            const values = initialValue.split('-');
+            const datePartsInOrder = [year, month, day].sort((a, b) => a.index - b.index);
+            // "Insert" correct values for the year/month/day, then join to string with separator
+            return datePartsInOrder
+                .map(({ key }) => {
+                const [yearValue, monthValue, dateValue] = values;
+                if (key === 'year')
+                    return yearValue;
+                if (key === 'month')
+                    return monthValue;
+                return dateValue;
+            })
+                .join(separator);
+        },
+    });
+};
+const setDateFormatCharacters = (format, dateCharacters) => {
+    if (!dateCharacters)
+        return format;
+    format = format.replace(/y/g, dateCharacters.year);
+    format = format.replace(/m/g, dateCharacters.month);
+    format = format.replace(/d/g, dateCharacters.day);
+    return format;
+};
+
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class DateControlValueAccessorComponent {
+    /** Text shown before input has a written value. Default current date format by locale of transloco */
+    set placeholder(value) {
+        this._placeholder = value
+            ? setDateFormatCharacters(value, this.dateCharacters)
+            : value;
+        this.defaultPlaceholder = value
+            ? setDateFormatCharacters(value, this.dateCharacters)
+            : value;
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    /**
+     * Settings for input mask for dates based on locale
+     * @see {@link getLocaleDateMask} use this tool to generate settings for `dateInputMask`
+     */
+    set dateInputMask(dateMask) {
+        // Hide input field
+        this.showInputDateSrc.next(false);
+        this.cdr.detectChanges();
+        this._dateInputMask = dateMask;
+        // Show input field to reload input-mask settings upon update
+        setTimeout(() => {
+            this.showInputDateSrc.next(true);
+            this.cdr.detectChanges();
+        }, 200);
+    }
+    get dateInputMask() {
+        return this._dateInputMask;
+    }
+    /** Hides the input borders and displays current value as a text. */
+    set locked(value) {
+        this._locked = value;
+        this.cdr.detectChanges();
+    }
+    get locked() {
+        return this._locked;
+    }
+    /** Override the required flag of the component. */
+    set required(value) {
+        this._required = value;
+    }
+    /** Child input element is considered required and changes default label template accordingly. */
+    get required() {
+        // if required is set => return required
+        if (this._required !== undefined)
+            return this._required;
+        // if required can be determined from the control => return control.required
+        if (this.ngControl?.control?.validator) {
+            const validator = this.ngControl?.control?.validator({});
+            return validator && validator.required;
+        }
+        return;
+    }
+    /** Override the invalid state of the component. */
+    set invalid(value) {
+        this._invalid = value;
+    }
+    /** The component has the invalid state, usually decorating the elements red and shows the first error. */
+    get invalid() {
+        if (this._invalid === true || this._invalid === false)
+            return this._invalid;
+        return (!!this.ngControl?.control?.invalid && this.ngControl?.control?.touched);
+    }
+    /** Override the valid state of the component. */
+    set valid(value) {
+        this._valid = value;
+    }
+    /** The component has the valid state, usually decorating the elements green. */
+    get valid() {
+        if (this._valid === true || this._valid === false)
+            return this._valid;
+        return !!this.ngControl?.control?.valid && this.ngControl?.control?.touched;
+    }
+    /**
+     * Creates a new BaseControlValueAccessorComponent.
+     * @param ngControl optional FormControl provided when component is used in a form, through dependency injection.
+     */
+    constructor(ngControl, translocoScope, elementRef, cdr, _transloco) {
+        this.ngControl = ngControl;
+        this.translocoScope = translocoScope;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this._transloco = _transloco;
+        /* ATTRIBUTES */
+        /** Id of the host element and is accessible by the children, automatically generated if not provided. */
+        this.id = window.ngv?.nextId('datepicker');
+        /** Adds an icon before each error message. */
+        this.withErrorIcon = false;
+        /** If set to true, the browser will try to automatically set focus to the child input element. */
+        this.autofocus = false;
+        this._locked = undefined;
+        /* STATES */
+        this._required = undefined;
+        this._invalid = undefined;
+        this._valid = undefined;
+        /** The component has the focused state, updated by the child input element's focus state. */
+        this.focused = false;
+        /** The component has the disabled state, usually muting the colors and removes interaction. */
+        this.disabled = false;
+        /** Toggler for showing or hiding the input field */
+        this.showInputDateSrc = new Subject();
+        /* TRIGGERS */
+        /** Emits focus events triggered by the child elements. */
+        this.ngvFocus = new EventEmitter();
+        /** Emits focus events triggered by the child elements. */
+        this.ngvBlur = new EventEmitter();
+        /* VALUE HANDLERS */
+        /** @internal */
+        this.onChange = (_) => { }; // eslint-disable-line @typescript-eslint/no-empty-function
+        /** @internal */
+        this.onTouched = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
+        /** @internal */
+        this.onValidatorChange = () => null;
+        this._state = null;
+        /** @internal */
+        // warningIcon = faTriangleExclamation;
+        /* LIFE CYCLE VARIABLES */
+        this._onDestroy$ = new Subject();
+        if (this.ngControl) {
+            // Note: we provide the value accessor through here, instead of
+            // the `providers` to avoid running into a circular import.
+            this.ngControl.valueAccessor = this;
+        }
+        if (this.translocoScope)
+            this.scope = this.translocoScope.toString();
+    }
+    static parseDateLike(value) {
+        try {
+            // if value is type of string,
+            if (value && typeof value === 'string')
+                value = new Date(value);
+            switch (true) {
+                // remove instances where the value will not correctly be parsed to a date string
+                case value == null:
+                case value?.toString() === 'Invalid Date':
+                    return null;
+                // if value-as-date is a valid date object, parse the value to YYYY-MM-DD format
+                case typeof value?.getMonth === 'function':
+                    return new Intl.DateTimeFormat('sv-SE').format(value);
+                default:
+                    return value;
+            }
+        }
+        catch (_e) {
+            return;
+        }
+    }
+    // eslint-disable-next-line @angular-eslint/contextual-lifecycle
+    ngOnInit() {
+        if (this.ngControl && this.ngControl.control) {
+            this.ngControl.control.setValidators(Validators.compose([this.ngControl.control.validator, this.validate]));
+        }
+        this._transloco.langChanges$.pipe(takeUntil(this._onDestroy$)).subscribe({
+            next: () => {
+                if (!this.locale && !this.dateFormat) {
+                    return this.updatePlaceholderAndMask();
+                }
+            },
+        });
+        // if reset observable has been passed, subscribe after updates
+        this.reset?.pipe(takeUntil(this._onDestroy$)).subscribe({
+            next: () => {
+                // reset value of controller
+                this.updateValue('');
+            },
+        });
+    }
+    // eslint-disable-next-line @angular-eslint/contextual-lifecycle
+    ngAfterViewInit() {
+        // if default value is set, then don't alter it. Otherwise, use
+        // current value of controller after initiation as default value
+        this.defaultValue = this.defaultValue ?? this.ngControl?.value;
+    }
+    ngOnChanges(changes) {
+        if (changes.defaultValue?.currentValue) {
+            this.updateValue(changes.defaultValue.currentValue);
+        }
+        if (changes.locale?.currentValue &&
+            !this.dateFormat &&
+            !changes.dateFormat?.currentValue) {
+            this.updatePlaceholderAndMask();
+        }
+        if (changes.dateFormat?.currentValue) {
+            this.updateFormat();
+        }
+        if (changes.dateCharacters?.currentValue) {
+            if (this.dateFormat) {
+                this.updateFormat();
+            }
+            else {
+                this.updatePlaceholderAndMask();
+            }
+        }
+        if (!!changes.dateLocale?.currentValue && !this.dateFormat) {
+            this.updatePlaceholderAndMask();
+        }
+    }
+    ngOnDestroy() {
+        this._onDestroy$.next(true);
+        this._onDestroy$.complete();
+    }
+    /** @internal */
+    onFocus(event) {
+        event.stopPropagation
+            ? event.stopPropagation()
+            : (event.cancelBubble = true);
+        this.focused = true;
+        this.ngvFocus.emit(event);
+    }
+    /** @internal */
+    onBlur(event) {
+        event.stopPropagation
+            ? event.stopPropagation()
+            : (event.cancelBubble = true);
+        this.onTouched();
+        this.focused = false;
+        this.ngvBlur.emit(event);
+    }
+    detectChanges() {
+        this.cdr.detectChanges();
+    }
+    /** Sets the focus on the actual input element. */
+    setFocus() {
+        if (this.inputRef)
+            this.inputRef.nativeElement.focus();
+    }
+    /**
+     * @internal
+     * Update placeholder  and input mask to match locale.
+     * Order if choice for locale:
+     * 1. dateLocale - Used for specifying which locale to be used for formatting date
+     * 2. locale - Unless dateLocale is not provided, use locale form current translation
+     * 3. transloco.getActiveLang - as last resort, get active language form trnasloco
+     * If locale is undefined, transloco.activeLang will be used instead.
+     */
+    updatePlaceholderAndMask() {
+        const locale = this.dateLocale ?? this.locale ?? this._transloco.getActiveLang();
+        this._placeholder = this.defaultPlaceholder
+            ? setDateFormatCharacters(this.defaultPlaceholder, this.dateCharacters)
+            : setDateFormatCharacters(getLocaleDateString(locale).toLowerCase(), this.dateCharacters);
+        this.dateInputMask = getLocaleDateMask(this.dateCharacters, locale);
+    }
+    updateFormat() {
+        if (this.dateFormat) {
+            this._placeholder = this.defaultPlaceholder
+                ? setDateFormatCharacters(this.defaultPlaceholder, this.dateCharacters)
+                : setDateFormatCharacters(this.dateFormat.toLowerCase(), this.dateCharacters);
+            this.dateInputMask = getFormatDateMask(this.dateFormat, this.dateCharacters);
+        }
+    }
+    // ----------------------------------------------------------------------------
+    // CONTROL VALUE ACCESSOR
+    // ----------------------------------------------------------------------------
+    /** Internal state/value that the native input element has. */
+    get state() {
+        return this._state;
+    }
+    /**
+     * Internal state/value that the native input element has.
+     */
+    set state(value) {
+        this._state = value;
+    }
+    /** Writes a new value to the child input element. */
+    writeValue(value) {
+        this.state = value;
+        this.onChange(this.state);
+    }
+    /** Registers a callback function that is called when the child input element's value changes. */
+    registerOnChange(fn) {
+        this.onChange = (value) => {
+            // ensure emitted value is a string | null | undefined
+            const emitValue = DateControlValueAccessorComponent.parseDateLike(value);
+            fn(emitValue);
+        };
+    }
+    /** Registers a callback function that is called when the child input element triggers on blur. */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** Function that is called by the forms API when the control status changes to or from 'DISABLED'. */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        // if displayDisabledAsLocked is enabled - update locked state based on disabled state
+        if (this.displayDisabledAsLocked) {
+            this.locked = isDisabled;
+        }
+    }
+    // ----------------------------------------------------------------------------
+    // VALIDATORS
+    // ----------------------------------------------------------------------------
+    /** Method that performs synchronous validation against the provided control. Used for internal validation. */
+    validate(_control) {
+        return null;
+    }
+    /** Registers a callback function to call when the validator inputs change. */
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // ----------------------------------------------------------------------------
+    // HELPERS
+    // ----------------------------------------------------------------------------
+    /** Returns the first entry in an error object. */
+    get firstError() {
+        const errors = this.ngControl.errors;
+        if (!errors)
+            return null;
+        const code = Object.keys(errors)[0];
+        return { code, params: errors[code] };
+    }
+    updateValue(value = this.defaultValue) {
+        this.state = value;
+        this.onChange(this.state);
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateControlValueAccessorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DateControlValueAccessorComponent, inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", dateCharacters: "dateCharacters", role: "role", value: "value", error: "error", errorList: "errorList", withErrorIcon: "withErrorIcon", description: "description", autofocus: "autofocus", defaultValue: "defaultValue", reset: "reset", optional: "optional", dateInputMask: "dateInputMask", locked: "locked", displayDisabledAsLocked: "displayDisabledAsLocked", required: "required", invalid: "invalid", valid: "valid", focused: "focused", disabled: "disabled", locale: "locale", dateFormat: "dateFormat", dateLocale: "dateLocale" }, outputs: { ngvFocus: "ngvFocus", ngvBlur: "ngvBlur" }, host: { properties: { "attr.id": "this.id" } }, queries: [{ propertyName: "labelContentTpl", first: true, predicate: ["labelTpl"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateControlValueAccessorComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.TranslocoService }], propDecorators: { labelContentTpl: [{
+                type: ContentChild,
+                args: ['labelTpl', { read: TemplateRef }]
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['input', { read: ElementRef }]
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], dateCharacters: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], errorList: [{
+                type: Input
+            }], withErrorIcon: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], reset: [{
+                type: Input
+            }], optional: [{
+                type: Input
+            }], dateInputMask: [{
+                type: Input
+            }], locked: [{
+                type: Input
+            }], displayDisabledAsLocked: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], focused: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], dateLocale: [{
+                type: Input
+            }], ngvFocus: [{
+                type: Output
+            }], ngvBlur: [{
+                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 monthStr = `${month + 1}`.padStart(2, '0');
+    const date = new Date(`${year}-${monthStr}-01`);
+    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;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.isToday = false;
+    }
+    ngOnInit() {
+        this.isToday = match(new Date(), this.calendarDate);
+    }
+    ngOnChanges(changes) {
+        if (changes.disabled?.currentValue) {
+            ;
+            this.nativeElement.disabled = this.disabled;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: CalendarDateDirective, selector: "[calendarDate]", inputs: { calendarDate: "calendarDate", selected: "selected", notWithinMonth: "notWithinMonth", disabled: "disabled" }, host: { properties: { "class.selected": "this.selected", "class.not-within-month": "this.notWithinMonth", "class.today": "this.isToday" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarDateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[calendarDate]', // eslint-disable-line @angular-eslint/directive-selector
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { calendarDate: [{
+                type: Input
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.' + "selected" /* DateCss.selected */]
+            }, {
+                type: Input
+            }], notWithinMonth: [{
+                type: HostBinding,
+                args: ['class.' + "not-within-month" /* DateCss.notWithinMonth */]
+            }, {
+                type: Input
+            }], isToday: [{
+                type: HostBinding,
+                args: ['class.' + "today" /* DateCss.today */]
+            }], disabled: [{
+                type: Input
+            }] } });
+
+const TODAY = new Date();
+class IsDisabledPipe {
+    // transform(value: Date, firstValid: Date | undefined, lastValid: Date | undefined, excludeDates: Date[] | undefined, excludeDays: WeekDay[] | undefined): boolean {
+    transform(value, config = {}) {
+        const { fromDate, toDate, excludeDates, excludeDays, closingTime } = config;
+        // if closingHours was provided and the date matches today - check closingHours (including timezone)
+        if (closingTime && match(value, TODAY) && afterClosingHours(closingTime))
+            return true;
+        // if fromDate was provided and the date occurs before fromDate date
+        if (fromDate && !match(value, fromDate) && isBefore(value, fromDate))
+            return true;
+        // if toDate was provided and the date occurs after toDate date
+        if (toDate && !match(value, toDate) && isAfter(value, toDate))
+            return true;
+        // if a list of disallowed days is provided and value matches
+        if (excludeDays &&
+            excludeDays.length &&
+            excludeDays.indexOf(value.getDay()) !== -1)
+            return true;
+        // if a list of disallowed dates is provided
+        if (excludeDates && excludeDates.length) {
+            return !!excludeDates.find((d) => match(value, d));
+        }
+        // otherwise show date as not disabled
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IsDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IsDisabledPipe, name: "isDisabled" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IsDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'isDisabled' }]
+        }] });
+
+class DateThookPipe {
+    get today() {
+        const tmp = new Date();
+        const today = new Date(tmp.setHours(0, 0, 0, 0));
+        return today;
+    }
+    transform(date, isDisabled) {
+        if (!!date && !isDisabled) {
+            // Reset time for target date
+            const dateTmp = new Date(date.setHours(0, 0, 0, 0));
+            // To calculate the time difference of two dates
+            const differenceInTime = dateTmp.getTime() - this.today.getTime();
+            // To calculate the no. of days between two dates
+            const differenceInDays = differenceInTime / (1000 * 3600 * 24);
+            const absoluteDifferenceInDays = Math.abs(differenceInDays);
+            const differentiator = differenceInDays < 0 ? '-' : differenceInDays === 0 ? '' : '+';
+            return `today${differentiator}${absoluteDifferenceInDays === 0 ? '' : absoluteDifferenceInDays}`;
+        }
+        return 'disabled-date';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateThookPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DateThookPipe, name: "dateThook" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateThookPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'dateThook' }]
+        }] });
+
+class MatchesPipe {
+    transform(value, selected) {
+        return match(value, selected);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatchesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: MatchesPipe, name: "matches" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatchesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'matches',
+                }]
+        }] });
+
+class CalendarComponent {
+    constructor() {
+        this.dateClick = new EventEmitter();
+        this.minCalendarRows = 5;
+        this.firstDayOfWeek = WeekDay.Monday;
+        this.type = 'normal';
+        this.dateMatrix = [[]];
+        this.disableDateConfig = {};
+        this.lastDayOfWeek = WeekDay.Sunday;
+    }
+    // inputs that affects which dates in the calendar should be grayed out
+    set disableDates(value) {
+        this.updateDisableDateConfig({ excludeDates: value ?? [] });
+    }
+    set disableWeekDays(value) {
+        this.updateDisableDateConfig({ excludeDays: value });
+    }
+    set firstValid(value) {
+        this.updateDisableDateConfig({ fromDate: value });
+    }
+    set lastValid(value) {
+        this.updateDisableDateConfig({ toDate: value });
+    }
+    set closingTime(value) {
+        this.updateDisableDateConfig({ closingTime: value });
+    }
+    ngOnChanges(changes) {
+        if (changes.selected?.currentValue) {
+            this.selected = new Date(changes.selected.currentValue);
+        }
+        if (changes.firstDayOfWeek?.currentValue) {
+            this.lastDayOfWeek = sortWeekDays(changes.firstDayOfWeek.currentValue).pop();
+        }
+        if ((changes.month?.currentValue !== undefined &&
+            changes.month?.currentValue !== null) ||
+            !!changes.year?.currentValue ||
+            !!changes.firstDayOfWeek?.currentValue ||
+            !!changes.minCalendarRows?.currentValue) {
+            this.dateMatrix = generateDateMatrix(this.month, this.year, this.minCalendarRows, this.firstDayOfWeek);
+        }
+    }
+    clickDate(date) {
+        this.dateClick.emit(date);
+    }
+    keyNavigation(event) {
+        let activeElement;
+        if (event.key !== 'Tab')
+            activeElement = document.activeElement;
+        if (event.key === 'ArrowRight') {
+            const nextFocusable = this.getNextFocusable(activeElement);
+            if (nextFocusable)
+                nextFocusable.focus();
+        }
+        if (event.key === 'ArrowLeft') {
+            const nextFocusable = this.getPreviousFocusable(activeElement);
+            if (nextFocusable)
+                nextFocusable.focus();
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const nextFocusable = this.getElementWithOffset(activeElement, -7);
+            if (nextFocusable)
+                nextFocusable.focus();
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const nextFocusable = this.getElementWithOffset(activeElement, 7);
+            if (nextFocusable)
+                nextFocusable.focus();
+        }
+        if (event.key === 'Enter' || event.key === 'Space') {
+            if (activeElement) {
+                const dateRef = this.dateButtonRefs.find((ref) => ref.nativeElement === activeElement);
+                if (!dateRef?.disabled) {
+                    this.dateClick.emit(dateRef?.calendarDate);
+                }
+            }
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            const nextFocusable = this.firstDayOfWeekElement();
+            if (nextFocusable)
+                nextFocusable.focus();
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            const nextFocusable = this.lastDayOfWeekElement();
+            if (nextFocusable)
+                nextFocusable.focus();
+        }
+    }
+    getElementWithOffset(fromElement, offsetDays, returnOnlyEnabled = true) {
+        if (!fromElement)
+            return;
+        const fromIndex = this.dateButtonRefs
+            .toArray()
+            .map((ref) => ref.nativeElement)
+            .indexOf(fromElement);
+        const next = this.dateButtonRefs.get(fromIndex + offsetDays);
+        if (!next)
+            return;
+        if (returnOnlyEnabled && next.disabled)
+            return this.getElementWithOffset(next.nativeElement, offsetDays);
+        return next.nativeElement;
+    }
+    getNextFocusable(fromElement) {
+        if (!fromElement)
+            return;
+        return this.getElementWithOffset(fromElement, 1);
+    }
+    getPreviousFocusable(fromElement) {
+        if (!fromElement)
+            return;
+        return this.getElementWithOffset(fromElement, -1);
+    }
+    firstDayOfWeekElement() {
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return;
+        const dateRef = this.dateButtonRefs.find((ref) => ref.nativeElement === activeElement);
+        if (dateRef.calendarDate.getDay() === this.firstDayOfWeek)
+            return;
+        const offset = this.getDayOffset(dateRef.calendarDate.getDay(), this.firstDayOfWeek, 'back');
+        const targetElement = this.getElementWithOffset(activeElement, offset, false);
+        if (targetElement && targetElement.disabled)
+            return this.getNextFocusable(targetElement);
+        return targetElement;
+    }
+    lastDayOfWeekElement() {
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return;
+        const dateRef = this.dateButtonRefs.find((ref) => ref.nativeElement === activeElement);
+        if (dateRef.calendarDate.getDay() === this.lastDayOfWeek)
+            return;
+        const offset = this.getDayOffset(dateRef.calendarDate.getDay(), this.lastDayOfWeek, 'forward');
+        const targetElement = this.getElementWithOffset(activeElement, offset, false);
+        if (targetElement && targetElement.disabled)
+            return this.getPreviousFocusable(targetElement);
+        return targetElement;
+    }
+    getDayOffset(from, to, direction) {
+        return getDayOffset(from, to, this.firstDayOfWeek, direction);
+    }
+    updateDisableDateConfig(config) {
+        this.disableDateConfig = {
+            ...this.disableDateConfig,
+            ...config,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, selector: "nggv-calendar", inputs: { year: "year", month: "month", selected: "selected", locale: "locale", minCalendarRows: "minCalendarRows", firstDayOfWeek: "firstDayOfWeek", type: "type", disableDates: "disableDates", disableWeekDays: "disableWeekDays", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { dateClick: "dateClick" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, viewQueries: [{ propertyName: "dateButtonRefs", predicate: CalendarDateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }, { kind: "pipe", type: DateThookPipe, name: "dateThook" }, { kind: "pipe", type: MatchesPipe, name: "matches" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-calendar', template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"] }]
+        }], propDecorators: { dateClick: [{
+                type: Output
+            }], dateButtonRefs: [{
+                type: ViewChildren,
+                args: [CalendarDateDirective]
+            }], year: [{
+                type: Input
+            }], month: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], minCalendarRows: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disableDates: [{
+                type: Input
+            }], disableWeekDays: [{
+                type: Input
+            }], firstValid: [{
+                type: Input
+            }], lastValid: [{
+                type: Input
+            }], closingTime: [{
+                type: Input
+            }], keyNavigation: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class CalendarMonth {
+    constructor(date) {
+        this._date = date ? new Date(date) : new Date();
+        this._date.setDate(1);
+        this._date.setHours(0, 0, 0, 0);
+        this.year = this._date.getFullYear();
+        this.month = this._date.getMonth();
+        this.id = formatDate(this._date, 'yyyyMM', 'en');
+    }
+    /** Creates an instance based of input year and month. */
+    static fromObject(obj) {
+        const objectDate = new Date(obj.year, obj.month, 1);
+        return new CalendarMonth(objectDate);
+    }
+    /** Returns a Date representation for the instance. */
+    get date() {
+        return new Date(this._date);
+    }
+    /** Returns the string id representing the instance in form of 'yyyyMM'. */
+    valueOf() {
+        return this.id;
+    }
+    /** Returns a new instance for next month. */
+    nextMonth() {
+        const next = this.date;
+        next.setMonth(this.month + 1);
+        return new CalendarMonth(next);
+    }
+    /** Returns a new instance for previous month. */
+    previousMonth() {
+        const previous = this.date;
+        previous.setMonth(this.month - 1);
+        return new CalendarMonth(previous);
+    }
+    /** Returns a new instance for next year. */
+    nextYear() {
+        const nextYear = this.date;
+        nextYear.setFullYear(nextYear.getFullYear() + 1);
+        return new CalendarMonth(nextYear);
+    }
+    /** Returns a new instance for previous year. */
+    previousYear() {
+        const previousYear = this.date;
+        previousYear.setFullYear(previousYear.getFullYear() - 1);
+        return new CalendarMonth(previousYear);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarMonth, deps: [{ token: Date }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarMonth }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarMonth, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: Date }] });
+
+class CalendarControlComponent {
+    constructor(fb) {
+        this.fb = fb;
+        // nextIcon: IconDefinition = faChevronRight
+        // previousIcon: IconDefinition = faChevronLeft
+        this.calendarChange = new EventEmitter();
+        this.type = 'normal';
+        this.monthArray = []; // array used for month dropdown
+        this.yearArray = []; // array used for year dropdown
+        this.subs = [];
+        // initiate form group for dropdown menus
+        this.selectedCalendar = this.fb.group({
+            year: [],
+            month: [],
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.activeCalendar &&
+            !changes.activeCalendar.isFirstChange() &&
+            changes.activeCalendar.currentValue.valueOf() !==
+                this.selectedCalendar.value.id) {
+            this.selectedCalendar.patchValue(changes.activeCalendar.currentValue);
+        }
+    }
+    ngOnInit() {
+        // populate drowdowns and labels with data
+        this.monthArray = getMonthArray();
+        this.yearArray = getYearArray();
+        // subscribe to year and month changes, and emit event to datepicker
+        this.subscribeToFormChanges();
+        // update control to initial value
+        if (this.activeCalendar)
+            this.selectedCalendar.patchValue(this.activeCalendar);
+    }
+    ngOnDestroy() {
+        this.subs.forEach((sub) => sub.unsubscribe());
+    }
+    viewPreviousMonth() {
+        const previousMonth = CalendarMonth.fromObject(this.selectedCalendar.value).previousMonth();
+        this.selectedCalendar.patchValue(previousMonth);
+    }
+    viewNextMonth() {
+        const nextMonth = CalendarMonth.fromObject(this.selectedCalendar.value).nextMonth();
+        this.selectedCalendar.patchValue(nextMonth);
+    }
+    viewPreviousYear() {
+        const previousYear = CalendarMonth.fromObject(this.selectedCalendar.value).previousYear();
+        this.selectedCalendar.patchValue(previousYear);
+    }
+    viewNextYear() {
+        const nextYear = CalendarMonth.fromObject(this.selectedCalendar.value).nextYear();
+        this.selectedCalendar.patchValue(nextYear);
+    }
+    keyNavigation(event) {
+        if (event.key !== 'PageUp' && event.key !== 'PageDown')
+            return;
+        event.preventDefault();
+        if (event.shiftKey) {
+            if (event.key === 'PageUp')
+                return this.viewPreviousYear();
+            if (event.key === 'PageDown')
+                return this.viewNextYear();
+        }
+        if (event.key === 'PageUp')
+            return this.viewPreviousMonth();
+        if (event.key === 'PageDown')
+            return this.viewNextMonth();
+    }
+    subscribeToFormChanges() {
+        // used to quickly check if the yearsArray needs years appended to it
+        let existingYears = this.yearArray.map((e) => e.getFullYear());
+        const changes = this.selectedCalendar.valueChanges.pipe(debounceTime(1), // added due to this issue: https://github.com/angular/angular/issues/13129
+        map((value) => CalendarMonth.fromObject(value)), distinctUntilChanged((prev, curr) => prev.valueOf() === curr.valueOf()));
+        this.subs.push(changes.subscribe({
+            next: (value) => {
+                // if you need to append to year array
+                if (existingYears.indexOf(value.year) === -1) {
+                    this.yearArray.push(value.date);
+                    this.yearArray.sort((a, b) => a.getFullYear() - b.getFullYear());
+                    existingYears = this.yearArray.map((e) => e.getFullYear());
+                }
+                this.calendarChange.emit(value);
+            },
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarControlComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: { activeCalendar: "activeCalendar", locale: "locale", type: "type" }, outputs: { calendarChange: "calendarChange" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-calendar-control', template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }], propDecorators: { calendarChange: [{
+                type: Output
+            }], activeCalendar: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], keyNavigation: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+;
+(() => {
+    // Make sure there is an incremental ID each component can use
+    if (typeof window !== 'undefined' && !window.ngv) {
+        window.ngv = {
+            ids: { default: -1 },
+            nextId(namespace = 'default') {
+                let id = this.ids[namespace] || 0;
+                if (typeof this.ids[namespace] === 'number')
+                    id++;
+                this.ids[namespace] = id;
+                return namespace === 'default'
+                    ? `nggv-${id}`
+                    : `nggv-${namespace}-${id}`;
+            },
+        };
+    }
+})();
+
+class DatepickerComponent {
+    constructor() {
+        this.calendarTemplate = null;
+        /** Emits a Date upon selection. */
+        this.ngvDateChange = new EventEmitter();
+        /** Sets first day of week in calendar. Defaults to Monday. */
+        this.firstDayOfWeek = WeekDay.Monday;
+        /** Bank holidays. */
+        this.disableDates = [];
+        /** Other non selectable dates. */
+        this.disableWeekDays = [];
+        /** Minimum number of calendar rows shown. */
+        this.minCalendarRows = 5;
+        /** Set locale for date format. */
+        this.locale = 'en-US';
+        /** Set type of calendar. */
+        this.type = 'normal';
+        /** @internal */
+        /** @internal */
+        this.weekdayArray = [];
+        /** @internal */
+        this.disabledDatesForActiveMonth = [];
+        this.subs = [];
+    }
+    ngOnChanges(changes) {
+        if (changes.selected &&
+            !!changes.selected.currentValue &&
+            !changes.selected.isFirstChange()) {
+            // set active calendar to match selected date
+            const activeCalendar = new CalendarMonth(new Date(changes.selected.currentValue));
+            this.changeActiveCalendar(activeCalendar);
+        }
+        if (changes.disableDates && !changes.disableDates.isFirstChange()) {
+            this.disabledDatesForActiveMonth = this.getDisabledDatesFor(this.activeCalendar, changes.disableDates.currentValue || []);
+        }
+    }
+    ngOnInit() {
+        // initiate week label row
+        this.weekdayArray = getSortedWeekDays(this.firstDayOfWeek);
+        // initiate calendar
+        const initDate = !!this.selected && isValid(this.selected)
+            ? new Date(this.selected)
+            : new Date();
+        this.activeCalendar = new CalendarMonth(initDate);
+    }
+    ngOnDestroy() {
+        this.subs.forEach((sub) => sub.unsubscribe());
+    }
+    /**
+     * @internal
+     * Update local calendar variable and changes displayed calendar.
+     */
+    changeActiveCalendar(calendar) {
+        this.activeCalendar = calendar;
+        this.disabledDatesForActiveMonth = this.getDisabledDatesFor(calendar, this.disableDates);
+    }
+    /**
+     * @internal
+     * Returns a subset of all disabled dates.
+     *
+     * @param month current month to filter from
+     * @param disableDates master list of all disabled dates
+     * @returns a subset with current and adjacent months disabled dates
+     */
+    getDisabledDatesFor(calendar, disableDates) {
+        if (!disableDates)
+            disableDates = [];
+        // sets month to target month
+        const targetMonth = calendar.date;
+        // gets previous month from target month
+        const previousMonth = calendar.previousMonth().date;
+        // gets next month from target month
+        const nextMonth = calendar.nextMonth().date;
+        // checks if two dates are within the same year and month
+        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))
+            .filter((d) => withinSameMonth(d, previousMonth) ||
+            withinSameMonth(d, targetMonth) ||
+            withinSameMonth(d, nextMonth));
+    }
+    /**
+     * Handles date-clicks from calendar compoentn. Emits event or changes calendar.
+     * @param date date clicked in calendar
+     */
+    dateClickHandler(date) {
+        // if a date is clicked within the active month, emit date
+        if (date.getMonth() === this.activeCalendar.month)
+            return this.ngvDateChange.emit(date);
+        // else, change active calendar to match the date clicked
+        this.selected = date;
+        this.changeActiveCalendar(new CalendarMonth(date));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatepickerComponent, selector: "nggv-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minCalendarRows: "minCalendarRows", selected: "selected", locale: "locale", type: "type", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { ngvDateChange: "ngvDateChange" }, viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n  [activeCalendar]=\"activeCalendar\"\n  [locale]=\"locale\"\n  [type]=\"type\"\n  (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n  <span *ngFor=\"let weekday of weekdayArray\">{{\n    weekday | date: 'EEE' : undefined : locale\n  }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      calendarTemplate;\n      context: {\n        calendar: activeCalendar,\n        disableDates: disabledDatesForActiveMonth,\n      }\n    \"\n  >\n  </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #calendarTemplate\n  let-calendar=\"calendar\"\n  let-disableDates=\"disableDates\"\n>\n  <nggv-calendar\n    [year]=\"calendar.year\"\n    [month]=\"calendar.month\"\n    [type]=\"type\"\n    [locale]=\"locale\"\n    [disableDates]=\"disableDates\"\n    [selected]=\"selected\"\n    [lastValid]=\"lastValid\"\n    [firstValid]=\"firstValid\"\n    [closingTime]=\"closingTime\"\n    [disableWeekDays]=\"disableWeekDays\"\n    [minCalendarRows]=\"minCalendarRows\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    (dateClick)=\"dateClickHandler($event)\"\n  >\n  </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif;font-size:.875rem}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-extended-controls{display:flex;padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalendarComponent, selector: "nggv-calendar", inputs: ["year", "month", "selected", "locale", "minCalendarRows", "firstDayOfWeek", "type", "disableDates", "disableWeekDays", "firstValid", "lastValid", "closingTime"], outputs: ["dateClick"] }, { kind: "component", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: ["activeCalendar", "locale", "type"], outputs: ["calendarChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-datepicker', template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n  [activeCalendar]=\"activeCalendar\"\n  [locale]=\"locale\"\n  [type]=\"type\"\n  (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n  <span *ngFor=\"let weekday of weekdayArray\">{{\n    weekday | date: 'EEE' : undefined : locale\n  }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      calendarTemplate;\n      context: {\n        calendar: activeCalendar,\n        disableDates: disabledDatesForActiveMonth,\n      }\n    \"\n  >\n  </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #calendarTemplate\n  let-calendar=\"calendar\"\n  let-disableDates=\"disableDates\"\n>\n  <nggv-calendar\n    [year]=\"calendar.year\"\n    [month]=\"calendar.month\"\n    [type]=\"type\"\n    [locale]=\"locale\"\n    [disableDates]=\"disableDates\"\n    [selected]=\"selected\"\n    [lastValid]=\"lastValid\"\n    [firstValid]=\"firstValid\"\n    [closingTime]=\"closingTime\"\n    [disableWeekDays]=\"disableWeekDays\"\n    [minCalendarRows]=\"minCalendarRows\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    (dateClick)=\"dateClickHandler($event)\"\n  >\n  </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif;font-size:.875rem}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-extended-controls{display:flex;padding:.5rem}\n"] }]
+        }], propDecorators: { calendarTemplate: [{
+                type: ViewChild,
+                args: ['calendarTemplate']
+            }], ngvDateChange: [{
+                type: Output
+            }], firstDayOfWeek: [{
+                type: Input
+            }], disableDates: [{
+                type: Input
+            }], disableWeekDays: [{
+                type: Input
+            }], minCalendarRows: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], firstValid: [{
+                type: Input
+            }], lastValid: [{
+                type: Input
+            }], closingTime: [{
+                type: Input
+            }] } });
+
+/**
+ * Date pickers simplify the task of selecting a date in a visual representation of a calendar.
+ * https://designlibrary.sebgroup.com/components/component-datepicker
+ *
+ * Selector: `nggv-dateinput`
+ *
+ * When focusing an date element, the calendar allows for navigation using both tab and arrow keys.
+ * Pressing 'esc' will close the calendar.
+ *
+ * Requires TranslocoLocale, but in turn allows for setting locale dynamically:
+ * https://jsverse.github.io/transloco/docs/plugins/locale/#manually-setting-locale
+ *
+ * To configure TranslocoLocale, follow this guide:
+ * https://jsverse.github.io/transloco/docs/plugins/locale/#setup
+ */
+class DateInputComponent extends DateControlValueAccessorComponent {
+    constructor(ngControl, translocoScope, transloco, elementRef, cdr) {
+        super(ngControl, translocoScope, elementRef, cdr, transloco);
+        this.ngControl = ngControl;
+        this.translocoScope = translocoScope;
+        this.transloco = transloco;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'date-input';
+        /** Set type of calendar: either 'normal' or 'expanded'. Default is 'normal'. */
+        this.type = 'normal';
+        /** If set to true, the value will not be editable. */
+        this.readonly = false;
+        /**
+         * An array of Dates or parsable strings that corresponds with dates that should not be selectable in the calendar.
+         * I.e. bank holidays.
+         */
+        this.disableDates = [];
+        /**
+         * An array of weekdays that should not be selectable in the calendar.
+         * Can be used together with or instead of @Input() disableDates.
+         */
+        this.disableWeekDays = [];
+        /** Mininum number of rows shown in the calendar. */
+        this.minRows = 5;
+        /** Sets first day of week in calendar. Defaults to Monday. */
+        this.firstDayOfWeek = WeekDay.Monday;
+        /** If set to true, it will allow to close the calendar on escape button click. */
+        this.closeCalendarOnEscape = true;
+        /** @internal */
+        // calendarIcon: IconDefinition = faCalendarDays;
+        /** @internal */
+        this.shown = false;
+        /** @internal */
+        this.showInput$ = this.showInputDateSrc.asObservable().pipe(startWith(true));
+        /** Observable for listening to clicks outside of the datepicker. */
+        this.documentClick$ = fromEvent(document, 'click');
+        /** Subject used for unsubscribe pattern on above observable. */
+        this.datepickerClosed$ = new Subject();
+        // this.showInput$ = this.showInputDateSrc.asObservable()
+    }
+    ngOnDestroy() {
+        this.datepickerClosed$.next(true);
+        this.datepickerClosed$.complete();
+    }
+    /**
+     * @internal
+     * Called from the datepicker-component when a date button is clicked in the calendar.
+     *
+     * @param date date object emitted when selecting a date in the datepicker.
+     */
+    onDateChange(date) {
+        // control value accessor will ensure correct formatting of state
+        this.state = DateControlValueAccessorComponent.parseDateLike(date);
+        // emit state
+        this.onChange(this.state);
+        // close datepicker and move focus to datepicker button
+        this.setShown(false);
+        setTimeout(() => this.toggleButtonRef?.nativeElement.focus(), 1);
+    }
+    /**
+     * @internal
+     * Called when entering date manually in input field.
+     */
+    onValueChange(eventTarget) {
+        // Will be in the format selected in inputMask
+        const value = `${eventTarget.inputmask.undoValue}` ?? '';
+        // Use parserfunction from inputMask to parse to a date object since value can be in multiple formats
+        // Then ontrol value accessor will ensure correct formatting of state
+        const parsedDate = DateControlValueAccessorComponent.parseDateLike(this.dateInputMask.parser(value));
+        this.state = parsedDate;
+        // emit parsed date
+        this.onChange(parsedDate);
+        this.onTouched();
+    }
+    /**
+     * @internal
+     * Listen to 'esc' keypress and closes datepicker if open.
+     */
+    keyListener(event) {
+        if (this.closeCalendarOnEscape && event.key === 'Escape')
+            this.setShown(false);
+    }
+    /** @internal */
+    toggleDatepicker() {
+        this.setShown(!this.shown);
+    }
+    /** To externally trigger the datepicker to close. */
+    close() {
+        this.setShown(false);
+    }
+    /**
+     * Set the shown state of the datepicker popup. If true the popup will be visible.
+     * If the state is set to false, call onTouched to notify any state listeners
+     * @param state the shown state which to set.
+     */
+    setShown(state = true) {
+        this.shown = state;
+        if (!this.shown) {
+            // if shown is set to false, stop listening to clicks
+            this.datepickerClosed$.next(true);
+            return this.onTouched();
+        }
+        // if shown is set to true, reset unsubscribe variable
+        this.datepickerClosed$.next(false);
+        // start listening for clicks outside the component
+        this.documentClick$.pipe(takeUntil(this.datepickerClosed$)).subscribe({
+            next: (event) => {
+                // clicking on a gray date causes the datepicker to reload the calendar dates,
+                // and the button element clicked will no longer be considered as a child of the datepicker.
+                // but the event target path will still contain the parent element
+                // if target has datepicker parent, keep listening
+                const eventPath = event.composedPath();
+                const hasDatepickerParent = !!eventPath.find((e) => e === this.elementRef.nativeElement);
+                if (hasDatepickerParent)
+                    return;
+                // else the click is considered to be outside, close datepicker
+                return this.setShown(false);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "14.0.0", version: "17.3.12", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook" } }, 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 class=\"gds-field-label--small description hide-if-empty\">\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\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-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\"\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        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\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        (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              width=\"16\"\n              height=\"16\"\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\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              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label:is(label){margin-bottom:.5rem}:host .gds-field-label--optional{margin-bottom:.5rem}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\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"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"gds-field-label--small description hide-if-empty\">\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\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-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\"\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        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\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        (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              width=\"16\"\n              height=\"16\"\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\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              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label:is(label){margin-bottom:.5rem}:host .gds-field-label--optional{margin-bottom:.5rem}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }, { type: i2.TranslocoService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { toggleButtonRef: [{
+                type: ViewChild,
+                args: ['toggleCalendarButton']
+            }], thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], type: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disableDates: [{
+                type: Input
+            }], disableWeekDays: [{
+                type: Input
+            }], minRows: [{
+                type: Input
+            }], firstValid: [{
+                type: Input
+            }], lastValid: [{
+                type: Input
+            }], closingTime: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], closeCalendarOnEscape: [{
+                type: Input
+            }], keyListener: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class NggvDatepickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvDatepickerModule, declarations: [CalendarComponent,
+            CalendarDateDirective,
+            IsDisabledPipe,
+            DateThookPipe,
+            CalendarControlComponent,
+            DatepickerComponent,
+            DateInputComponent,
+            MatchesPipe], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TranslocoModule,
+            NggvInputMaskModule,
+            NggCoreWrapperModule], exports: [DateInputComponent, DatepickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDatepickerModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TranslocoModule,
+            NggvInputMaskModule,
+            NggCoreWrapperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CalendarComponent,
+                        CalendarDateDirective,
+                        IsDisabledPipe,
+                        DateThookPipe,
+                        CalendarControlComponent,
+                        DatepickerComponent,
+                        DateInputComponent,
+                        MatchesPipe,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        NggvInputMaskModule,
+                        NggCoreWrapperModule,
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    exports: [DateInputComponent, DatepickerComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of date-picker
+ */
+
+/**
+ * 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 };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-datepicker.mjs.map