@testgorilla/tgo-ui 3.11.4 → 3.11.5

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -18813,7 +18813,7 @@ class DatepickerComponent {
         }
     }
     // Set errors length for validation
-    // Consider only those errors which which are not empty
+    // Consider only those errors which are not empty
     setErrorsLength() {
         if (!!this._errors) {
             return this._errors.filter(err => !!err).length > 0 ? true : false;
@@ -18845,6 +18845,20 @@ class DatepickerComponent {
         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;
         const end = this.range.controls.end.value;
@@ -18860,10 +18874,10 @@ class DatepickerComponent {
     setRange() {
         if (Array.isArray(this.value)) {
             const [start, end] = this.value;
-            if (start) {
+            if (start && String(this.range.controls.start.value) !== String(start)) {
                 this.range.controls.start.setValue(new Date(start));
             }
-            if (end) {
+            if (end && String(this.range.controls.end.value) !== String(end)) {
                 this.range.controls.end.setValue(new Date(end));
             }
         }
@@ -18886,17 +18900,17 @@ class DatepickerComponent {
         document.body.style.setProperty('--datepicker-selected-color', `${this.companyColor || '#D410AA'}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: i1$2.NgControl, optional: true, self: true }, { token: DatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", 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    <mat-label *ngIf=\"label\">\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n    </mat-label>\n\n    <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    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n    >{{ hint }}\n    </mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n    </mat-hint>\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    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n        />\n        <input\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\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></mat-date-range-picker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\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      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n      <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      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n      <span [innerHTML]=\"error\"></span>\n    </div>\n  }\n  <ui-validation-error\n    *ngIf=\"ngControl && !hideBuiltInErrors\"\n    [ngControl]=\"ngControl\"\n    [label]=\"hideLabelInErrors ? null : label\"\n  ></ui-validation-error>\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.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:#cb7b7a}.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:#cb7b7a}.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:#cb7b7a}.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:#cb7b7a}.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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i8$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i8$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i8$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i8$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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    <mat-label *ngIf=\"label\">\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n    </mat-label>\n\n    <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    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n    </mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n    </mat-hint>\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      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\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      <mat-hint\n        class=\"info\"\n        *ngIf=\"\n          hint &&\n          !_errors &&\n          !(ngControl?.touched && (ngControl?.errors | hasValidationError)) &&\n          !(range?.invalid && showInnerErrors)\n        \"\n        >{{ hint }}\n      </mat-hint>\n      <mat-hint\n        class=\"error\"\n        *ngIf=\"\n          errorsLength ||\n          (ngControl?.touched && (ngControl?.errors | hasValidationError)) ||\n          (range?.invalid && showInnerErrors)\n        \"\n      >\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\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      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n      <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      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n        >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n      <span [innerHTML]=\"error\"></span>\n    </div>\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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i8$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i8$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i8$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i8$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.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: "18.2.13", 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 },
-                    ], 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    <mat-label *ngIf=\"label\">\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n    </mat-label>\n\n    <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    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n    >{{ hint }}\n    </mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n    </mat-hint>\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    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n        />\n        <input\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\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></mat-date-range-picker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\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      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n      <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      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n      <span [innerHTML]=\"error\"></span>\n    </div>\n  }\n  <ui-validation-error\n    *ngIf=\"ngControl && !hideBuiltInErrors\"\n    [ngControl]=\"ngControl\"\n    [label]=\"hideLabelInErrors ? null : label\"\n  ></ui-validation-error>\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.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:#cb7b7a}.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:#cb7b7a}.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:#cb7b7a}.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:#cb7b7a}.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"] }]
+                    ], 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    <mat-label *ngIf=\"label\">\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n    </mat-label>\n\n    <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    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n    </mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n    </mat-hint>\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      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\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      <mat-hint\n        class=\"info\"\n        *ngIf=\"\n          hint &&\n          !_errors &&\n          !(ngControl?.touched && (ngControl?.errors | hasValidationError)) &&\n          !(range?.invalid && showInnerErrors)\n        \"\n        >{{ hint }}\n      </mat-hint>\n      <mat-hint\n        class=\"error\"\n        *ngIf=\"\n          errorsLength ||\n          (ngControl?.touched && (ngControl?.errors | hasValidationError)) ||\n          (range?.invalid && showInnerErrors)\n        \"\n      >\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\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      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n      <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      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n        >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n      <span [innerHTML]=\"error\"></span>\n    </div>\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
                 }, {
@@ -18922,6 +18936,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], isRange: [{
                 type: Input
+            }], setSingleDateRangeOnBlur: [{
+                type: Input
+            }], showInnerErrors: [{
+                type: Input
+            }], innerErrorsMessage: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], required: [{