@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs

@@ -1,538 +1,815 @@
-import { formatDate, NgClass, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, inject, Directive, EventEmitter, Output, Input, HostBinding, Optional, Inject, Self, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
-import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormField, MatLabel, MatSuffix, MatHint, MatFormFieldModule } from '@angular/material/form-field';
-import { MatInput, MatInputModule } from '@angular/material/input';
-import { adjustLightness, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';
-import { IconComponent, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { ValidationErrorComponent, ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
-
-class DatepickerService {
-    #useBrowserTimezone = false;
-    set useBrowserTimezone(value) {
-        this.#useBrowserTimezone = value;
-    }
-    get useBrowserTimezone() {
-        return this.#useBrowserTimezone;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
+import { AsyncPipe, CommonModule, NgClass, NgTemplateOutlet, formatDate } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, EventEmitter, HostBinding, Inject, Injectable, Input, NgModule, Optional, Output, Self, ViewEncapsulation, inject } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule, NativeDateAdapter } from "@angular/material/core";
+import { MatDateRangeInput, MatDateRangePicker, MatDatepicker, MatDatepickerInput, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatStartDate } from "@angular/material/datepicker";
+import { MatFormField, MatFormFieldModule, MatHint, MatLabel, MatSuffix } from "@angular/material/form-field";
+import { MatInput, MatInputModule } from "@angular/material/input";
+import { HasValidationErrorPipe, UiTranslatePipe, adjustLightness } from "@testgorilla/tgo-ui/components/core";
+import { IconComponent, IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { ValidationErrorComponent, ValidationErrorModule } from "@testgorilla/tgo-ui/components/validation-error";
+var DatepickerService = class DatepickerService {
+	#useBrowserTimezone = false;
+	set useBrowserTimezone(value) {
+		this.#useBrowserTimezone = value;
+	}
+	get useBrowserTimezone() {
+		return this.#useBrowserTimezone;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DatepickerService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DatepickerService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DatepickerService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
 const UI_DATE_FORMATS = {
-    parse: {
-        dateInput: { day: 'numeric', month: 'numeric', year: 'numeric' },
-    },
-    display: {
-        dateInput: 'input',
-        monthYearLabel: { year: 'numeric', month: 'short' },
-        dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
-        monthYearA11yLabel: { year: 'numeric', month: 'long' },
-    },
+	parse: { dateInput: {
+		day: "numeric",
+		month: "numeric",
+		year: "numeric"
+	} },
+	display: {
+		dateInput: "input",
+		monthYearLabel: {
+			year: "numeric",
+			month: "short"
+		},
+		dateA11yLabel: {
+			year: "numeric",
+			month: "long",
+			day: "numeric"
+		},
+		monthYearA11yLabel: {
+			year: "numeric",
+			month: "long"
+		}
+	}
 };
-class UiDateAdapter extends NativeDateAdapter {
-    #datepickerService = inject(DatepickerService);
-    constructor() {
-        super();
-    }
-    format(date) {
-        if (!this.#datepickerService.useBrowserTimezone) {
-            return formatDate(date, 'MM/dd/yyyy', 'en-US');
-        }
-        const locale = navigator.language;
-        const options = {
-            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            dateStyle: 'short',
-        };
-        return new Intl.DateTimeFormat(locale, options).format(date);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UiDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UiDateAdapter }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UiDateAdapter, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class CustomDateAdapter extends NativeDateAdapter {
-    format(date) {
-        return formatDate(date, 'MM/yyyy', 'en-US');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CustomDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CustomDateAdapter }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CustomDateAdapter, decorators: [{
-            type: Injectable
-        }] });
+var UiDateAdapter = class UiDateAdapter extends NativeDateAdapter {
+	#datepickerService = inject(DatepickerService);
+	constructor() {
+		super();
+	}
+	format(date) {
+		if (!this.#datepickerService.useBrowserTimezone) return formatDate(date, "MM/dd/yyyy", "en-US");
+		const locale = navigator.language;
+		const options = {
+			timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			dateStyle: "short"
+		};
+		return new Intl.DateTimeFormat(locale, options).format(date);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: UiDateAdapter,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: UiDateAdapter
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: UiDateAdapter,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => []
+});
+var CustomDateAdapter = class CustomDateAdapter extends NativeDateAdapter {
+	format(date) {
+		return formatDate(date, "MM/yyyy", "en-US");
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: CustomDateAdapter,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: CustomDateAdapter
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CustomDateAdapter,
+	decorators: [{ type: Injectable }]
+});
 const FORMATS = {
-    parse: {
-        dateInput: 'MM/YYYY',
-    },
-    display: {
-        dateInput: 'MM/YYYY',
-        monthYearLabel: 'MMM YYYY',
-        dateA11yLabel: 'LL',
-        monthYearA11yLabel: 'MMMM YYYY',
-    },
+	parse: { dateInput: "MM/YYYY" },
+	display: {
+		dateInput: "MM/YYYY",
+		monthYearLabel: "MMM YYYY",
+		dateA11yLabel: "LL",
+		monthYearA11yLabel: "MMMM YYYY"
+	}
 };
-class NoDateFormatDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NoDateFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: NoDateFormatDirective, isStandalone: true, selector: "[appNoDateFormat]", providers: [
-            {
-                provide: DateAdapter,
-                useClass: CustomDateAdapter,
-            },
-            {
-                provide: MAT_DATE_FORMATS,
-                useValue: FORMATS,
-            },
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NoDateFormatDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector -- public directive selector; ui-prefix rename is breaking, deferred to the breaking-change MAJOR (see plan)
-                    selector: '[appNoDateFormat]',
-                    providers: [
-                        {
-                            provide: DateAdapter,
-                            useClass: CustomDateAdapter,
-                        },
-                        {
-                            provide: MAT_DATE_FORMATS,
-                            useValue: FORMATS,
-                        },
-                    ],
-                    standalone: true,
-                }]
-        }] });
-
-// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-class DatepickerComponent {
-    get rangeStartTestId() {
-        return this.testId ? `${this.testId}-start` : 'datepicker-range-start';
-    }
-    get rangeEndTestId() {
-        return this.testId ? `${this.testId}-end` : 'datepicker-range-end';
-    }
-    /**
-     * Input field errors
-     *
-     * @type {string}
-     * @memberof DatepickerComponent
-     */
-    set errors(errors) {
-        this._errors = errors?.filter(Boolean) ?? [];
-        this.errorsLength = this.setErrorsLength();
-    }
-    /**
-     * Use browser timezone
-     * @type boolean
-     * @memberof DatepickerComponent
-     */
-    set browserTimezone(value) {
-        this.datepickerService.useBrowserTimezone = value;
-    }
-    constructor(defaultAppTheme, cdr, ngControl, datepickerService) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.cdr = cdr;
-        this.ngControl = ngControl;
-        this.datepickerService = datepickerService;
-        this.class = 'ui-datepicker';
-        /**
-         * Form field label
-         *
-         * @type {string}
-         * @memberof DatepickerComponent
-         */
-        this.label = '';
-        /**
-         * Input placeholder
-         *
-         * @type {string}
-         * @memberof DatepickerComponent
-         */
-        this.placeholder = '';
-        this.testId = null;
-        /**
-         * Input id
-         *
-         * @type {string}
-         * @memberof DatepickerComponent
-         */
-        this.id = '';
-        /**
-         * Input is update only on blur
-         *
-         * @type {Boolean}
-         * @memberof DatepickerComponent
-         */
-        this.updateOnBlur = false;
-        /**
-         * Show reserved content below form field
-         *
-         * @type {boolean}
-         * @memberof DatepickerComponent
-         */
-        this.showBottomContent = true;
-        /**
-         * Set full width DatepickerComponent
-         *
-         * @type {boolean}
-         * @memberof DatepickerComponent
-         */
-        this.fullWidth = false;
-        /**
-         * Show and pick date without day
-         * @default false
-         * @type {boolean}
-         * @memberof DatepickerComponent
-         */
-        this.monthPicker = false;
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof DatepickerComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * Hide in-build errors for Reactive Forms
-         *
-         * @type {number}
-         * @memberof DatepickerComponent
-         */
-        this.hideBuiltInErrors = false;
-        /**
-         * Hide label in errors
-         *
-         * @type {number}
-         * @memberof DatepickerComponent
-         */
-        this.hideLabelInErrors = false;
-        /**
-         * Prevent user input
-         *
-         * @type {boolean}
-         * @memberof DatepickerComponent
-         */
-        this.preventUserInput = false;
-        /**
-         * Color of the option hover.
-         * Defaults to Test Gorilla primary color.
-         *
-         * @type {string}
-         * @memberof DatepickerComponent
-         */
-        this.companyColor = '';
-        /**
-         * @ignore
-         */
-        this.onChange = () => { };
-        /**
-         * @ignore
-         */
-        this.onTouch = () => { };
-        /**
-         * Event emitted when the value is change - when used outside of form
-         *
-         * @type {Date}
-         * @memberof DatepickerComponent
-         */
-        this.changed = new EventEmitter();
-        this.range = new FormGroup({
-            start: new FormControl(null),
-            end: new FormControl(null),
-        });
-        this.translationContext = 'DATEPICKER.';
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-        }
-        if (this.ngControl !== null) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    get hint() {
-        if (this.hintMessage === undefined) {
-            return this.isRange ? 'MM/DD/YYYY - MM/DD/YYYY' : this.monthPicker ? 'MM/YYYY' : 'MM/DD/YYYY';
-        }
-        return this.hintMessage;
-    }
-    /**
-     * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
-     * to display validation errors that might happen (e.g. required)
-     */
-    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-    ngDoCheck() {
-        if (this.ngControl?.touched || this.ngControl?.errors) {
-            this.cdr.markForCheck();
-        }
-    }
-    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-    ngOnInit() {
-        document.body.setAttribute('theme', this.applicationTheme);
-        this.setStyleVariable();
-    }
-    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-    ngOnChanges(changes) {
-        if (this.isRange) {
-            this.setRange();
-        }
-        if (changes['companyColor']) {
-            this.setStyleVariable();
-        }
-    }
-    // Set errors length for validation
-    // Consider only those errors which are not empty
-    setErrorsLength() {
-        if (this._errors) {
-            return this._errors.filter(err => Boolean(err)).length > 0 ? true : false;
-        }
-        return false;
-    }
-    onValueChange(value) {
-        this.writeValue(value);
-        this.errorsLength = this.setErrorsLength();
-        if (!this.updateOnBlur) {
-            this.onTouch();
-        }
-        this.onChange(value);
-        this.changed.emit(value);
-    }
-    writeValue(value) {
-        this.value = value;
-        if (this.isRange) {
-            this.setRange();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    handleCloseRangePicker() {
-        if (this.setSingleDateRangeOnBlur) {
-            this.fillSingleDateRange(true);
-        }
-    }
-    fillSingleDateRange(isStart) {
-        const { start, end } = this.range.controls;
-        const sourceControl = isStart ? start : end;
-        const targetControl = isStart ? end : start;
-        if (sourceControl.value && !targetControl.value) {
-            targetControl.setValue(sourceControl.value);
-            this.dateRangeChange();
-        }
-    }
-    dateRangeChange() {
-        const start = this.range.controls.start.value ?? null;
-        const end = this.range.controls.end.value ?? null;
-        this.onValueChange([start ? new Date(start) : start, end ? new Date(end) : end]);
-    }
-    setMonthAndYear(normalizedMonthAndYear, datepicker) {
-        const ctrlValue = this.value || new Date();
-        ctrlValue.setMonth(normalizedMonthAndYear.getMonth());
-        ctrlValue.setFullYear(normalizedMonthAndYear.getFullYear());
-        datepicker.close();
-        this.onValueChange(new Date(ctrlValue));
-    }
-    setRange() {
-        if (Array.isArray(this.value)) {
-            const [start, end] = this.value;
-            if (start && String(this.range.controls.start.value) !== String(start)) {
-                this.range.controls.start.setValue(new Date(start));
-            }
-            if (end && String(this.range.controls.end.value) !== String(end)) {
-                this.range.controls.end.setValue(new Date(end));
-            }
-        }
-        if (!this.value) {
-            this.range.controls.start.setValue(null);
-            this.range.controls.end.setValue(null);
-        }
-    }
-    onInput(event) {
-        const target = event.target;
-        const [month, year] = target.value.split('/');
-        const date = new Date().getDate();
-        const fullDateString = `${month}/${date}/${year}`;
-        const fullDate = new Date(fullDateString);
-        this.onValueChange(fullDate);
-    }
-    setStyleVariable() {
-        const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';
-        document.body.style.setProperty('--datepicker-hover-color', hover);
-        document.body.style.setProperty('--datepicker-selected-color', `${this.companyColor || '#D410AA'}`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: DatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: DatepickerComponent, isStandalone: true, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", testId: "testId", id: "id", value: "value", errors: "errors", isRange: "isRange", setSingleDateRangeOnBlur: "setSingleDateRangeOnBlur", showInnerErrors: "showInnerErrors", innerErrorsMessage: "innerErrorsMessage", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput", companyColor: "companyColor", browserTimezone: "browserTimezone" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, providers: [
-            { provide: DateAdapter, useClass: UiDateAdapter },
-            { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS },
-        ], usesOnChanges: true, ngImport: i0, template: "@if (monthPicker) {\n  <mat-form-field\n    appNoDateFormat\n    appearance=\"outline\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    @if (label) {\n      <mat-label>\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n    }\n\n    <input\n      [attr.data-testid]=\"testId ?? 'datepicker-input'\"\n      matInput\n      [id]=\"id!\"\n      (blur)=\"onTouch()\"\n      [placeholder]=\"placeholder!\"\n      [matDatepicker]=\"dp\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [readonly]=\"preventUserInput\"\n      (change)=\"onInput($event)\"\n      (dateChange)=\"onValueChange($event.value)\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n      <ui-icon\n        matDatepickerToggleIcon\n        [applicationTheme]=\"applicationTheme\"\n        name=\"Calendar\"\n        size=\"24\"\n        color=\"inherit\"\n      ></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      panelClass=\"month-picker\"\n      #dp\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\n    ></mat-datepicker>\n\n    @if (hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n      <mat-hint class=\"info\">{{ hint }} </mat-hint>\n    }\n    @if (errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n      <mat-hint class=\"error\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n} @else {\n  @if (isRange) {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n      class=\"range-datepicker\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          [attr.data-testid]=\"rangeStartTestId\"\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\n          [attr.data-testid]=\"rangeEndTestId\"\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(false)\"\n        />\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker (closed)=\"handleCloseRangePicker()\"></mat-date-range-picker>\n\n      @if (\n        hint &&\n        !_errors &&\n        !(ngControl?.touched && (ngControl?.errors | hasValidationError)) &&\n        !(range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (\n        errorsLength ||\n        (ngControl?.touched && (ngControl?.errors | hasValidationError)) ||\n        (range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n      <input\n        [attr.data-testid]=\"testId ?? 'datepicker-picker-input'\"\n        matInput\n        [matDatepicker]=\"picker\"\n        (blur)=\"onTouch()\"\n        (dateChange)=\"onValueChange($event.value)\"\n        [id]=\"id!\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [name]=\"fieldName!\"\n        [readonly]=\"preventUserInput\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n\n      @if (hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label + (required ? ' *' : '') }}</ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    @for (error of _errors; track error) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    }\n  }\n  @if (ngControl && !hideBuiltInErrors) {\n    <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n  }\n  @if (showInnerErrors) {\n    @if (isRange) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"innerErrorsMessage\"></span>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.range-datepicker .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#e02800}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white}[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-datepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: DateAdapter, useClass: UiDateAdapter },
-                        { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS },
-                    ], imports: [
-                        MatFormField,
-                        NoDateFormatDirective,
-                        NgClass,
-                        MatLabel,
-                        NgTemplateOutlet,
-                        MatInput,
-                        MatDatepickerInput,
-                        MatDatepickerToggle,
-                        MatSuffix,
-                        IconComponent,
-                        MatDatepickerToggleIcon,
-                        MatDatepicker,
-                        MatHint,
-                        MatDateRangeInput,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatStartDate,
-                        MatEndDate,
-                        MatDateRangePicker,
-                        ValidationErrorComponent,
-                        AsyncPipe,
-                        UiTranslatePipe,
-                        HasValidationErrorPipe,
-                    ], template: "@if (monthPicker) {\n  <mat-form-field\n    appNoDateFormat\n    appearance=\"outline\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    @if (label) {\n      <mat-label>\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n    }\n\n    <input\n      [attr.data-testid]=\"testId ?? 'datepicker-input'\"\n      matInput\n      [id]=\"id!\"\n      (blur)=\"onTouch()\"\n      [placeholder]=\"placeholder!\"\n      [matDatepicker]=\"dp\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [readonly]=\"preventUserInput\"\n      (change)=\"onInput($event)\"\n      (dateChange)=\"onValueChange($event.value)\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n      <ui-icon\n        matDatepickerToggleIcon\n        [applicationTheme]=\"applicationTheme\"\n        name=\"Calendar\"\n        size=\"24\"\n        color=\"inherit\"\n      ></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      panelClass=\"month-picker\"\n      #dp\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\n    ></mat-datepicker>\n\n    @if (hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n      <mat-hint class=\"info\">{{ hint }} </mat-hint>\n    }\n    @if (errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n      <mat-hint class=\"error\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n} @else {\n  @if (isRange) {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n      class=\"range-datepicker\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          [attr.data-testid]=\"rangeStartTestId\"\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\n          [attr.data-testid]=\"rangeEndTestId\"\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(false)\"\n        />\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker (closed)=\"handleCloseRangePicker()\"></mat-date-range-picker>\n\n      @if (\n        hint &&\n        !_errors &&\n        !(ngControl?.touched && (ngControl?.errors | hasValidationError)) &&\n        !(range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (\n        errorsLength ||\n        (ngControl?.touched && (ngControl?.errors | hasValidationError)) ||\n        (range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n      <input\n        [attr.data-testid]=\"testId ?? 'datepicker-picker-input'\"\n        matInput\n        [matDatepicker]=\"picker\"\n        (blur)=\"onTouch()\"\n        (dateChange)=\"onValueChange($event.value)\"\n        [id]=\"id!\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [name]=\"fieldName!\"\n        [readonly]=\"preventUserInput\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n\n      @if (hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label + (required ? ' *' : '') }}</ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    @for (error of _errors; track error) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    }\n  }\n  @if (ngControl && !hideBuiltInErrors) {\n    <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n  }\n  @if (showInnerErrors) {\n    @if (isRange) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"innerErrorsMessage\"></span>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.range-datepicker .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#e02800}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white}[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: DatepickerService }], propDecorators: { class: [{
-                type: HostBinding
-            }], label: [{
-                type: Input
-            }], fieldName: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], isRange: [{
-                type: Input
-            }], setSingleDateRangeOnBlur: [{
-                type: Input
-            }], showInnerErrors: [{
-                type: Input
-            }], innerErrorsMessage: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], hintMessage: [{
-                type: Input
-            }], updateOnBlur: [{
-                type: Input
-            }], showBottomContent: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], monthPicker: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], hideBuiltInErrors: [{
-                type: Input
-            }], hideLabelInErrors: [{
-                type: Input
-            }], preventUserInput: [{
-                type: Input
-            }], companyColor: [{
-                type: Input
-            }], browserTimezone: [{
-                type: Input
-            }], changed: [{
-                type: Output
-            }] } });
-
-class DatepickerComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: DatepickerComponentModule, imports: [CommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            IconComponentModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            UiTranslatePipe,
-            NoDateFormatDirective,
-            HasValidationErrorPipe,
-            ValidationErrorModule,
-            DatepickerComponent], exports: [DatepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerComponentModule, imports: [CommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            IconComponentModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            ValidationErrorModule,
-            DatepickerComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatepickerComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        IconComponentModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        UiTranslatePipe,
-                        NoDateFormatDirective,
-                        HasValidationErrorPipe,
-                        ValidationErrorModule,
-                        DatepickerComponent,
-                    ],
-                    exports: [DatepickerComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var NoDateFormatDirective = class NoDateFormatDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: NoDateFormatDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			type: NoDateFormatDirective,
+			isStandalone: true,
+			selector: "[appNoDateFormat]",
+			providers: [{
+				provide: DateAdapter,
+				useClass: CustomDateAdapter
+			}, {
+				provide: MAT_DATE_FORMATS,
+				useValue: FORMATS
+			}],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: NoDateFormatDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[appNoDateFormat]",
+			providers: [{
+				provide: DateAdapter,
+				useClass: CustomDateAdapter
+			}, {
+				provide: MAT_DATE_FORMATS,
+				useValue: FORMATS
+			}],
+			standalone: true
+		}]
+	}]
+});
+var DatepickerComponent = class DatepickerComponent {
+	get rangeStartTestId() {
+		return this.testId ? `${this.testId}-start` : "datepicker-range-start";
+	}
+	get rangeEndTestId() {
+		return this.testId ? `${this.testId}-end` : "datepicker-range-end";
+	}
+	set errors(errors) {
+		this._errors = errors?.filter(Boolean) ?? [];
+		this.errorsLength = this.setErrorsLength();
+	}
+	set browserTimezone(value) {
+		this.datepickerService.useBrowserTimezone = value;
+	}
+	constructor(defaultAppTheme, cdr, ngControl, datepickerService) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.cdr = cdr;
+		this.ngControl = ngControl;
+		this.datepickerService = datepickerService;
+		this.class = "ui-datepicker";
+		this.label = "";
+		this.placeholder = "";
+		this.testId = null;
+		this.id = "";
+		this.updateOnBlur = false;
+		this.showBottomContent = true;
+		this.fullWidth = false;
+		this.monthPicker = false;
+		this.applicationTheme = "light";
+		this.hideBuiltInErrors = false;
+		this.hideLabelInErrors = false;
+		this.preventUserInput = false;
+		this.companyColor = "";
+		this.onChange = () => {};
+		this.onTouch = () => {};
+		this.changed = new EventEmitter();
+		this.range = new FormGroup({
+			start: new FormControl(null),
+			end: new FormControl(null)
+		});
+		this.translationContext = "DATEPICKER.";
+		if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
+		if (this.ngControl !== null) this.ngControl.valueAccessor = this;
+	}
+	get hint() {
+		if (this.hintMessage === void 0) return this.isRange ? "MM/DD/YYYY - MM/DD/YYYY" : this.monthPicker ? "MM/YYYY" : "MM/DD/YYYY";
+		return this.hintMessage;
+	}
+	ngDoCheck() {
+		if (this.ngControl?.touched || this.ngControl?.errors) this.cdr.markForCheck();
+	}
+	ngOnInit() {
+		document.body.setAttribute("theme", this.applicationTheme);
+		this.setStyleVariable();
+	}
+	ngOnChanges(changes) {
+		if (this.isRange) this.setRange();
+		if (changes["companyColor"]) this.setStyleVariable();
+	}
+	setErrorsLength() {
+		if (this._errors) return this._errors.filter((err) => Boolean(err)).length > 0 ? true : false;
+		return false;
+	}
+	onValueChange(value) {
+		this.writeValue(value);
+		this.errorsLength = this.setErrorsLength();
+		if (!this.updateOnBlur) this.onTouch();
+		this.onChange(value);
+		this.changed.emit(value);
+	}
+	writeValue(value) {
+		this.value = value;
+		if (this.isRange) this.setRange();
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouch = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	handleCloseRangePicker() {
+		if (this.setSingleDateRangeOnBlur) this.fillSingleDateRange(true);
+	}
+	fillSingleDateRange(isStart) {
+		const { start, end } = this.range.controls;
+		const sourceControl = isStart ? start : end;
+		const targetControl = isStart ? end : start;
+		if (sourceControl.value && !targetControl.value) {
+			targetControl.setValue(sourceControl.value);
+			this.dateRangeChange();
+		}
+	}
+	dateRangeChange() {
+		const start = this.range.controls.start.value ?? null;
+		const end = this.range.controls.end.value ?? null;
+		this.onValueChange([start ? new Date(start) : start, end ? new Date(end) : end]);
+	}
+	setMonthAndYear(normalizedMonthAndYear, datepicker) {
+		const ctrlValue = this.value || /* @__PURE__ */ new Date();
+		ctrlValue.setMonth(normalizedMonthAndYear.getMonth());
+		ctrlValue.setFullYear(normalizedMonthAndYear.getFullYear());
+		datepicker.close();
+		this.onValueChange(new Date(ctrlValue));
+	}
+	setRange() {
+		if (Array.isArray(this.value)) {
+			const [start, end] = this.value;
+			if (start && String(this.range.controls.start.value) !== String(start)) this.range.controls.start.setValue(new Date(start));
+			if (end && String(this.range.controls.end.value) !== String(end)) this.range.controls.end.setValue(new Date(end));
+		}
+		if (!this.value) {
+			this.range.controls.start.setValue(null);
+			this.range.controls.end.setValue(null);
+		}
+	}
+	onInput(event) {
+		const [month, year] = event.target.value.split("/");
+		const fullDateString = `${month}/${(/* @__PURE__ */ new Date()).getDate()}/${year}`;
+		const fullDate = new Date(fullDateString);
+		this.onValueChange(fullDate);
+	}
+	setStyleVariable() {
+		const hover = this.companyColor ? adjustLightness(this.companyColor, "hover") : "#FFF2FC";
+		document.body.style.setProperty("--datepicker-hover-color", hover);
+		document.body.style.setProperty("--datepicker-selected-color", `${this.companyColor || "#D410AA"}`);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DatepickerComponent,
+			deps: [
+				{
+					token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+					optional: true
+				},
+				{ token: i0.ChangeDetectorRef },
+				{
+					token: i1.NgControl,
+					optional: true,
+					self: true
+				},
+				{ token: DatepickerService }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: DatepickerComponent,
+			isStandalone: true,
+			selector: "ui-datepicker",
+			inputs: {
+				label: "label",
+				fieldName: "fieldName",
+				placeholder: "placeholder",
+				testId: "testId",
+				id: "id",
+				value: "value",
+				errors: "errors",
+				isRange: "isRange",
+				setSingleDateRangeOnBlur: "setSingleDateRangeOnBlur",
+				showInnerErrors: "showInnerErrors",
+				innerErrorsMessage: "innerErrorsMessage",
+				disabled: "disabled",
+				required: "required",
+				hintMessage: "hintMessage",
+				updateOnBlur: "updateOnBlur",
+				showBottomContent: "showBottomContent",
+				fullWidth: "fullWidth",
+				minDate: "minDate",
+				maxDate: "maxDate",
+				monthPicker: "monthPicker",
+				applicationTheme: "applicationTheme",
+				hideBuiltInErrors: "hideBuiltInErrors",
+				hideLabelInErrors: "hideLabelInErrors",
+				preventUserInput: "preventUserInput",
+				companyColor: "companyColor",
+				browserTimezone: "browserTimezone"
+			},
+			outputs: { changed: "changed" },
+			host: { properties: { "class": "this.class" } },
+			providers: [{
+				provide: DateAdapter,
+				useClass: UiDateAdapter
+			}, {
+				provide: MAT_DATE_FORMATS,
+				useValue: UI_DATE_FORMATS
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "@if (monthPicker) {\n  <mat-form-field\n    appNoDateFormat\n    appearance=\"outline\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    @if (label) {\n      <mat-label>\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n    }\n\n    <input\n      [attr.data-testid]=\"testId ?? 'datepicker-input'\"\n      matInput\n      [id]=\"id!\"\n      (blur)=\"onTouch()\"\n      [placeholder]=\"placeholder!\"\n      [matDatepicker]=\"dp\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [readonly]=\"preventUserInput\"\n      (change)=\"onInput($event)\"\n      (dateChange)=\"onValueChange($event.value)\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n      <ui-icon\n        matDatepickerToggleIcon\n        [applicationTheme]=\"applicationTheme\"\n        name=\"Calendar\"\n        size=\"24\"\n        color=\"inherit\"\n      ></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      panelClass=\"month-picker\"\n      #dp\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\n    ></mat-datepicker>\n\n    @if (\n      hint && !_errors && !(ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))\n    ) {\n      <mat-hint class=\"info\">{{ hint }} </mat-hint>\n    }\n    @if (errorsLength || (ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))) {\n      <mat-hint class=\"error\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n} @else {\n  @if (isRange) {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n      class=\"range-datepicker\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          [attr.data-testid]=\"rangeStartTestId\"\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\n          [attr.data-testid]=\"rangeEndTestId\"\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(false)\"\n        />\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker (closed)=\"handleCloseRangePicker()\"></mat-date-range-picker>\n\n      @if (\n        hint &&\n        !_errors &&\n        !(ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) &&\n        !(range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (\n        errorsLength ||\n        (ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) ||\n        (range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n      <input\n        [attr.data-testid]=\"testId ?? 'datepicker-picker-input'\"\n        matInput\n        [matDatepicker]=\"picker\"\n        (blur)=\"onTouch()\"\n        (dateChange)=\"onValueChange($event.value)\"\n        [id]=\"id!\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [name]=\"fieldName!\"\n        [readonly]=\"preventUserInput\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n\n      @if (\n        hint && !_errors && !(ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))\n      ) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (errorsLength || (ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label + (required ? ' *' : '') }}</ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    @for (error of _errors; track error) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    }\n  }\n  @if (ngControl && !hideBuiltInErrors) {\n    <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n  }\n  @if (showInnerErrors) {\n    @if (isRange) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"innerErrorsMessage\"></span>\n      </div>\n    }\n  }\n</ng-template>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.range-datepicker .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#e02800}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white}[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: NoDateFormatDirective,
+					selector: "[appNoDateFormat]"
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatInput,
+					selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+					inputs: [
+						"disabled",
+						"id",
+						"placeholder",
+						"name",
+						"required",
+						"type",
+						"errorStateMatcher",
+						"aria-describedby",
+						"value",
+						"readonly",
+						"disabledInteractive"
+					],
+					exportAs: ["matInput"]
+				},
+				{
+					kind: "directive",
+					type: MatDatepickerInput,
+					selector: "input[matDatepicker]",
+					inputs: [
+						"matDatepicker",
+						"min",
+						"max",
+						"matDatepickerFilter"
+					],
+					exportAs: ["matDatepickerInput"]
+				},
+				{
+					kind: "component",
+					type: MatDatepickerToggle,
+					selector: "mat-datepicker-toggle",
+					inputs: [
+						"for",
+						"tabIndex",
+						"aria-label",
+						"disabled",
+						"disableRipple"
+					],
+					exportAs: ["matDatepickerToggle"]
+				},
+				{
+					kind: "directive",
+					type: MatSuffix,
+					selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+					inputs: ["matTextSuffix"]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatDatepickerToggleIcon,
+					selector: "[matDatepickerToggleIcon]"
+				},
+				{
+					kind: "component",
+					type: MatDatepicker,
+					selector: "mat-datepicker",
+					exportAs: ["matDatepicker"]
+				},
+				{
+					kind: "directive",
+					type: MatHint,
+					selector: "mat-hint",
+					inputs: ["align", "id"]
+				},
+				{
+					kind: "component",
+					type: MatDateRangeInput,
+					selector: "mat-date-range-input",
+					inputs: [
+						"rangePicker",
+						"required",
+						"dateFilter",
+						"min",
+						"max",
+						"disabled",
+						"separator",
+						"comparisonStart",
+						"comparisonEnd"
+					],
+					exportAs: ["matDateRangeInput"]
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.DefaultValueAccessor,
+					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatusGroup,
+					selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+				},
+				{
+					kind: "ngmodule",
+					type: ReactiveFormsModule
+				},
+				{
+					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: MatStartDate,
+					selector: "input[matStartDate]",
+					outputs: ["dateChange", "dateInput"]
+				},
+				{
+					kind: "directive",
+					type: MatEndDate,
+					selector: "input[matEndDate]",
+					outputs: ["dateChange", "dateInput"]
+				},
+				{
+					kind: "component",
+					type: MatDateRangePicker,
+					selector: "mat-date-range-picker",
+					exportAs: ["matDateRangePicker"]
+				},
+				{
+					kind: "component",
+					type: ValidationErrorComponent,
+					selector: "ui-validation-error",
+					inputs: [
+						"ngControl",
+						"touchedOn",
+						"errorMessage",
+						"label",
+						"applicationTheme",
+						"customErrors"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: HasValidationErrorPipe,
+					name: "hasValidationError"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DatepickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-datepicker",
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: DateAdapter,
+				useClass: UiDateAdapter
+			}, {
+				provide: MAT_DATE_FORMATS,
+				useValue: UI_DATE_FORMATS
+			}],
+			imports: [
+				MatFormField,
+				NoDateFormatDirective,
+				NgClass,
+				MatLabel,
+				NgTemplateOutlet,
+				MatInput,
+				MatDatepickerInput,
+				MatDatepickerToggle,
+				MatSuffix,
+				IconComponent,
+				MatDatepickerToggleIcon,
+				MatDatepicker,
+				MatHint,
+				MatDateRangeInput,
+				FormsModule,
+				ReactiveFormsModule,
+				MatStartDate,
+				MatEndDate,
+				MatDateRangePicker,
+				ValidationErrorComponent,
+				AsyncPipe,
+				UiTranslatePipe,
+				HasValidationErrorPipe
+			],
+			template: "@if (monthPicker) {\n  <mat-form-field\n    appNoDateFormat\n    appearance=\"outline\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    @if (label) {\n      <mat-label>\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n    }\n\n    <input\n      [attr.data-testid]=\"testId ?? 'datepicker-input'\"\n      matInput\n      [id]=\"id!\"\n      (blur)=\"onTouch()\"\n      [placeholder]=\"placeholder!\"\n      [matDatepicker]=\"dp\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [readonly]=\"preventUserInput\"\n      (change)=\"onInput($event)\"\n      (dateChange)=\"onValueChange($event.value)\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n      <ui-icon\n        matDatepickerToggleIcon\n        [applicationTheme]=\"applicationTheme\"\n        name=\"Calendar\"\n        size=\"24\"\n        color=\"inherit\"\n      ></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      panelClass=\"month-picker\"\n      #dp\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\n    ></mat-datepicker>\n\n    @if (\n      hint && !_errors && !(ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))\n    ) {\n      <mat-hint class=\"info\">{{ hint }} </mat-hint>\n    }\n    @if (errorsLength || (ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))) {\n      <mat-hint class=\"error\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n} @else {\n  @if (isRange) {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n      class=\"range-datepicker\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          [attr.data-testid]=\"rangeStartTestId\"\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\n          [attr.data-testid]=\"rangeEndTestId\"\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(false)\"\n        />\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker (closed)=\"handleCloseRangePicker()\"></mat-date-range-picker>\n\n      @if (\n        hint &&\n        !_errors &&\n        !(ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) &&\n        !(range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (\n        errorsLength ||\n        (ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) ||\n        (range?.invalid && showInnerErrors)\n      ) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      @if (label) {\n        <mat-label>\n          <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n        </mat-label>\n      }\n      <input\n        [attr.data-testid]=\"testId ?? 'datepicker-picker-input'\"\n        matInput\n        [matDatepicker]=\"picker\"\n        (blur)=\"onTouch()\"\n        (dateChange)=\"onValueChange($event.value)\"\n        [id]=\"id!\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [name]=\"fieldName!\"\n        [readonly]=\"preventUserInput\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n\n      @if (\n        hint && !_errors && !(ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))\n      ) {\n        <mat-hint class=\"info\">{{ hint }} </mat-hint>\n      }\n      @if (errorsLength || (ngControl?.touched && ($safeNavigationMigration(ngControl?.errors) | hasValidationError))) {\n        <mat-hint class=\"error\">\n          <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label + (required ? ' *' : '') }}</ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    @for (error of _errors; track error) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    }\n  }\n  @if (ngControl && !hideBuiltInErrors) {\n    <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n  }\n  @if (showInnerErrors) {\n    @if (isRange) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"innerErrorsMessage\"></span>\n      </div>\n    }\n  }\n</ng-template>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.range-datepicker .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#e02800}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white}[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+			}]
+		},
+		{ type: i0.ChangeDetectorRef },
+		{
+			type: i1.NgControl,
+			decorators: [{ type: Optional }, { type: Self }]
+		},
+		{ type: DatepickerService }
+	],
+	propDecorators: {
+		class: [{ type: HostBinding }],
+		label: [{ type: Input }],
+		fieldName: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		testId: [{ type: Input }],
+		id: [{ type: Input }],
+		value: [{ type: Input }],
+		errors: [{ type: Input }],
+		isRange: [{ type: Input }],
+		setSingleDateRangeOnBlur: [{ type: Input }],
+		showInnerErrors: [{ type: Input }],
+		innerErrorsMessage: [{ type: Input }],
+		disabled: [{ type: Input }],
+		required: [{ type: Input }],
+		hintMessage: [{ type: Input }],
+		updateOnBlur: [{ type: Input }],
+		showBottomContent: [{ type: Input }],
+		fullWidth: [{ type: Input }],
+		minDate: [{ type: Input }],
+		maxDate: [{ type: Input }],
+		monthPicker: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		hideBuiltInErrors: [{ type: Input }],
+		hideLabelInErrors: [{ type: Input }],
+		preventUserInput: [{ type: Input }],
+		companyColor: [{ type: Input }],
+		browserTimezone: [{ type: Input }],
+		changed: [{ type: Output }]
+	}
+});
+var DatepickerComponentModule = class DatepickerComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DatepickerComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DatepickerComponentModule,
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				FormsModule,
+				ReactiveFormsModule,
+				MatDatepickerModule,
+				MatNativeDateModule,
+				UiTranslatePipe,
+				NoDateFormatDirective,
+				HasValidationErrorPipe,
+				ValidationErrorModule,
+				DatepickerComponent
+			],
+			exports: [DatepickerComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DatepickerComponentModule,
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				FormsModule,
+				ReactiveFormsModule,
+				MatDatepickerModule,
+				MatNativeDateModule,
+				ValidationErrorModule,
+				DatepickerComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DatepickerComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				FormsModule,
+				ReactiveFormsModule,
+				MatDatepickerModule,
+				MatNativeDateModule,
+				UiTranslatePipe,
+				NoDateFormatDirective,
+				HasValidationErrorPipe,
+				ValidationErrorModule,
+				DatepickerComponent
+			],
+			exports: [DatepickerComponent]
+		}]
+	}]
+});
 export { CustomDateAdapter, DatepickerComponent, DatepickerComponentModule, DatepickerService, NoDateFormatDirective, UI_DATE_FORMATS, UiDateAdapter };
-//# sourceMappingURL=testgorilla-tgo-ui-components-datepicker.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-datepicker.mjs.map