npm - @testgorilla/tgo-ui - Versions diffs - 11.8.0 → 11.10.0 - Mend

@testgorilla/tgo-ui 11.8.0 → 11.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

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

@@ -118,6 +118,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 // 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
      *
@@ -156,6 +162,7 @@ class DatepickerComponent {
          * @memberof DatepickerComponent
          */
         this.placeholder = '';
+        this.testId = null;
         /**
          * Input id
          *
@@ -373,10 +380,10 @@ class DatepickerComponent {
         document.body.style.setProperty('--datepicker-selected-color', `${this.companyColor || '#D410AA'}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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.19", type: DatepickerComponent, isStandalone: true, 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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      data-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          data-testid=\"datepicker-range-start\"\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\n          data-testid=\"datepicker-range-end\"\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        data-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 }); }
+        ], 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.19", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
@@ -407,7 +414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         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      data-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          data-testid=\"datepicker-range-start\"\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\n          data-testid=\"datepicker-range-end\"\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        data-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"] }]
+                    ], 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
                 }, {
@@ -425,6 +432,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], testId: [{
+                type: Input
             }], id: [{
                 type: Input
             }], value: [{

package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-datepicker.mjs","sources":["../../../components/datepicker/datepicker.service.ts","../../../components/datepicker/date-adapter.ts","../../../components/datepicker/no-date-format.directive.ts","../../../components/datepicker/datepicker.component.ts","../../../components/datepicker/datepicker.component.html","../../../components/datepicker/datepicker.component.module.ts","../../../components/datepicker/testgorilla-tgo-ui-components-datepicker.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class DatepickerService {\n #useBrowserTimezone = false;\n\n set useBrowserTimezone(value: boolean) {\n this.#useBrowserTimezone = value;\n }\n\n get useBrowserTimezone(): boolean {\n return this.#useBrowserTimezone;\n }\n}\n","import { formatDate } from '@angular/common';\nimport { inject, Injectable } from '@angular/core';\nimport { NativeDateAdapter } from '@angular/material/core';\n\nimport { DatepickerService } from './datepicker.service';\n\nexport const UI_DATE_FORMATS = {\n parse: {\n dateInput: { day: 'numeric', month: 'numeric', year: 'numeric' },\n },\n display: {\n dateInput: 'input',\n monthYearLabel: { year: 'numeric', month: 'short' },\n dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },\n monthYearA11yLabel: { year: 'numeric', month: 'long' },\n },\n};\n\n@Injectable()\nexport class UiDateAdapter extends NativeDateAdapter {\n readonly #datepickerService = inject(DatepickerService);\n\n constructor() {\n super();\n }\n\n override format(date: Date): string {\n if (!this.#datepickerService.useBrowserTimezone) {\n return formatDate(date, 'MM/dd/yyyy', 'en-US');\n }\n\n const locale = navigator.language;\n const options: Partial<Intl.DateTimeFormatOptions> = {\n timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n dateStyle: 'short',\n };\n\n return new Intl.DateTimeFormat(locale, options).format(date);\n }\n}\n","import { formatDate } from '@angular/common';\nimport { Directive, Injectable } from '@angular/core';\nimport { DateAdapter, MAT_DATE_FORMATS, MatDateFormats, NativeDateAdapter } from '@angular/material/core';\n\n@Injectable()\nexport class CustomDateAdapter extends NativeDateAdapter {\n override format(date: Date): string {\n return formatDate(date, 'MM/yyyy', 'en-US');\n }\n}\n\nconst FORMATS: MatDateFormats = {\n parse: {\n dateInput: 'MM/YYYY',\n },\n display: {\n dateInput: 'MM/YYYY',\n monthYearLabel: 'MMM YYYY',\n dateA11yLabel: 'LL',\n monthYearA11yLabel: 'MMMM YYYY',\n },\n};\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector -- public directive selector; ui-prefix rename is breaking, deferred to the breaking-change MAJOR (see plan)\n selector: '[appNoDateFormat]',\n providers: [\n {\n provide: DateAdapter,\n useClass: CustomDateAdapter,\n },\n {\n provide: MAT_DATE_FORMATS,\n useValue: FORMATS,\n },\n ],\n standalone: true,\n})\nexport class NoDateFormatDirective {}\n","import { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DoCheck,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n OnChanges,\n Optional,\n Output,\n Self,\n SimpleChanges,\n ViewEncapsulation,\n OnInit,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormControl,\n FormGroup,\n NgControl,\n FormsModule,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';\nimport {\n MatDatepicker,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatDatepickerToggleIcon,\n MatDateRangeInput,\n MatStartDate,\n MatEndDate,\n MatDateRangePicker,\n} from '@angular/material/datepicker';\nimport { MatFormField, MatLabel, MatSuffix, MatHint } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\n\nimport {\n ApplicationTheme,\n adjustLightness,\n UiTranslatePipe,\n HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { IconComponent } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorComponent } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { UI_DATE_FORMATS, UiDateAdapter } from './date-adapter';\nimport { DatepickerService } from './datepicker.service';\nimport { NoDateFormatDirective } from './no-date-format.directive';\n\n@Component({\n selector: 'ui-datepicker',\n templateUrl: './datepicker.component.html',\n styleUrls: ['./datepicker.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: DateAdapter, useClass: UiDateAdapter },\n { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS },\n ],\n imports: [\n MatFormField,\n NoDateFormatDirective,\n NgClass,\n MatLabel,\n NgTemplateOutlet,\n MatInput,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatSuffix,\n IconComponent,\n MatDatepickerToggleIcon,\n MatDatepicker,\n MatHint,\n MatDateRangeInput,\n FormsModule,\n ReactiveFormsModule,\n MatStartDate,\n MatEndDate,\n MatDateRangePicker,\n ValidationErrorComponent,\n AsyncPipe,\n UiTranslatePipe,\n HasValidationErrorPipe,\n ],\n})\n// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\nexport class DatepickerComponent implements OnChanges, ControlValueAccessor, DoCheck, OnInit {\n @HostBinding() class = 'ui-datepicker';\n\n /*\n Form field label\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() label? = '';\n\n /\n Input name attribute\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() fieldName?: string;\n\n /\n Input placeholder\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() placeholder? = '';\n\n /\n Input id\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() id? = '';\n\n /\n Input value\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() value?: Array<Date \| null> \| Date;\n\n _errors: string[];\n /\n Input field errors\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() set errors(errors: string[]) {\n this._errors = errors?.filter(Boolean) ?? [];\n this.errorsLength = this.setErrorsLength();\n }\n\n /\n Determines if input is date range\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() isRange: boolean;\n\n /\n Determines if on blur of calendar and no end date is selected, set the end date as the start date\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() setSingleDateRangeOnBlur: boolean;\n\n /\n Determines if inner errors should be shown\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() showInnerErrors: boolean;\n\n /\n Determines inner errors message\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() innerErrorsMessage: string;\n\n /\n Determines if input is disabled\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() disabled: boolean;\n\n /\n Input is required or not\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() required: boolean;\n\n /\n Hint text\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() hintMessage: string;\n\n /\n Input is update only on blur\n \n @type {Boolean}\n * @memberof DatepickerComponent\n /\n @Input() updateOnBlur = false;\n\n /\n Show reserved content below form field\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() showBottomContent = true;\n\n /\n Set full width DatepickerComponent\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() fullWidth = false;\n\n /\n Set min date for Datepicker\n \n @type {Date}\n * @memberof DatepickerComponent\n /\n @Input() minDate: Date \| undefined;\n\n /\n Set max date for Datepicker\n \n @type {Date}\n * @memberof DatepickerComponent\n /\n @Input() maxDate: Date \| undefined;\n\n /\n Show and pick date without day\n * @default false\n * @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() monthPicker = false;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof DatepickerComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n Hide in-build errors for Reactive Forms\n \n @type {number}\n * @memberof DatepickerComponent\n /\n @Input() hideBuiltInErrors = false;\n\n /\n Hide label in errors\n \n @type {number}\n * @memberof DatepickerComponent\n /\n @Input() hideLabelInErrors = false;\n\n /\n Prevent user input\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() preventUserInput = false;\n\n /\n Color of the option hover.\n * Defaults to Test Gorilla primary color.\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() companyColor = '';\n\n /\n Use browser timezone\n * @type boolean\n * @memberof DatepickerComponent\n /\n @Input() set browserTimezone(value: boolean) {\n this.datepickerService.useBrowserTimezone = value;\n }\n\n /\n @ignore\n /\n onChange: (value: Date \| Date[]) => void = () => {};\n\n /\n @ignore\n /\n onTouch = () => {};\n\n /\n Event emitted when the value is change - when used outside of form\n \n @type {Date}\n * @memberof DatepickerComponent\n /\n @Output() changed = new EventEmitter<Date \| Date[]>();\n\n range = new FormGroup({\n start: new FormControl<Date \| null>(null),\n end: new FormControl<Date \| null>(null),\n });\n\n errorsLength: boolean;\n protected translationContext = 'DATEPICKER.';\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n private readonly cdr: ChangeDetectorRef,\n @Optional() @Self() public ngControl: NgControl,\n private readonly datepickerService: DatepickerService\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n get hint(): string {\n if (this.hintMessage === undefined) {\n return this.isRange ? 'MM/DD/YYYY - MM/DD/YYYY' : this.monthPicker ? 'MM/YYYY' : 'MM/DD/YYYY';\n }\n\n return this.hintMessage;\n }\n\n /\n Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n /\n // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n ngDoCheck(): void {\n if (this.ngControl?.touched \|\| this.ngControl?.errors) {\n this.cdr.markForCheck();\n }\n }\n\n // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n ngOnInit() {\n document.body.setAttribute('theme', this.applicationTheme);\n this.setStyleVariable();\n }\n\n // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n ngOnChanges(changes: SimpleChanges): void {\n if (this.isRange) {\n this.setRange();\n }\n if (changes['companyColor']) {\n this.setStyleVariable();\n }\n }\n\n // Set errors length for validation\n // Consider only those errors which are not empty\n setErrorsLength(): boolean {\n if (this._errors) {\n return this._errors.filter(err => Boolean(err)).length > 0 ? true : false;\n }\n return false;\n }\n\n onValueChange(value: Date \| Date[]) {\n this.writeValue(value);\n this.errorsLength = this.setErrorsLength();\n if (!this.updateOnBlur) {\n this.onTouch();\n }\n this.onChange(value);\n this.changed.emit(value);\n }\n\n writeValue(value?: Date \| Date[]): void {\n this.value = value;\n if (this.isRange) {\n this.setRange();\n }\n }\n\n registerOnChange(fn: (value: Date \| Date[]) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n handleCloseRangePicker(): void {\n if (this.setSingleDateRangeOnBlur) {\n this.fillSingleDateRange(true);\n }\n }\n\n fillSingleDateRange(isStart: boolean): void {\n const { start, end } = this.range.controls;\n const sourceControl = isStart ? start : end;\n const targetControl = isStart ? end : start;\n\n if (sourceControl.value && !targetControl.value) {\n targetControl.setValue(sourceControl.value);\n this.dateRangeChange();\n }\n }\n\n dateRangeChange() {\n const start = this.range.controls.start.value ?? null;\n const end = this.range.controls.end.value ?? null;\n this.onValueChange([start ? new Date(start) : start, end ? new Date(end) : end] as Date[]);\n }\n\n setMonthAndYear(normalizedMonthAndYear: Date, datepicker: MatDatepicker<Date>) {\n const ctrlValue = (this.value as Date) \|\| new Date();\n\n ctrlValue.setMonth(normalizedMonthAndYear.getMonth());\n ctrlValue.setFullYear(normalizedMonthAndYear.getFullYear());\n\n datepicker.close();\n\n this.onValueChange(new Date(ctrlValue));\n }\n\n private setRange() {\n if (Array.isArray(this.value)) {\n const [start, end] = this.value;\n\n if (start && String(this.range.controls.start.value) !== String(start)) {\n this.range.controls.start.setValue(new Date(start));\n }\n\n if (end && String(this.range.controls.end.value) !== String(end)) {\n this.range.controls.end.setValue(new Date(end));\n }\n }\n\n if (!this.value) {\n this.range.controls.start.setValue(null);\n this.range.controls.end.setValue(null);\n }\n }\n\n onInput(event: Event) {\n const target = event.target as EventTarget & { value: string };\n const [month, year] = target.value.split('/');\n const date = new Date().getDate();\n const fullDateString = `${month}/${date}/${year}`;\n const fullDate = new Date(fullDateString);\n this.onValueChange(fullDate);\n }\n\n private setStyleVariable() {\n const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';\n document.body.style.setProperty('--datepicker-hover-color', hover);\n document.body.style.setProperty('--datepicker-selected-color', `${this.companyColor \|\| '#D410AA'}`);\n }\n}\n","@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 data-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 data-testid=\"datepicker-range-start\"\n matStartDate\n formControlName=\"start\"\n [placeholder]=\"translationContext + 'START_DATE' \| uiTranslate \| async\"\n (dateChange)=\"dateRangeChange()\"\n (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n />\n <input\n data-testid=\"datepicker-range-end\"\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 data-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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { DatepickerComponent } from './datepicker.component';\nimport { NoDateFormatDirective } from './no-date-format.directive';\n\n@NgModule({\n imports: [\n CommonModule,\n MatFormFieldModule,\n MatInputModule,\n IconComponentModule,\n FormsModule,\n ReactiveFormsModule,\n MatDatepickerModule,\n MatNativeDateModule,\n UiTranslatePipe,\n NoDateFormatDirective,\n HasValidationErrorPipe,\n ValidationErrorModule,\n DatepickerComponent,\n ],\n exports: [DatepickerComponent],\n})\nexport class DatepickerComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i2.DatepickerService"],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-datepicker.mjs","sources":["../../../components/datepicker/datepicker.service.ts","../../../components/datepicker/date-adapter.ts","../../../components/datepicker/no-date-format.directive.ts","../../../components/datepicker/datepicker.component.ts","../../../components/datepicker/datepicker.component.html","../../../components/datepicker/datepicker.component.module.ts","../../../components/datepicker/testgorilla-tgo-ui-components-datepicker.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class DatepickerService {\n #useBrowserTimezone = false;\n\n set useBrowserTimezone(value: boolean) {\n this.#useBrowserTimezone = value;\n }\n\n get useBrowserTimezone(): boolean {\n return this.#useBrowserTimezone;\n }\n}\n","import { formatDate } from '@angular/common';\nimport { inject, Injectable } from '@angular/core';\nimport { NativeDateAdapter } from '@angular/material/core';\n\nimport { DatepickerService } from './datepicker.service';\n\nexport const UI_DATE_FORMATS = {\n parse: {\n dateInput: { day: 'numeric', month: 'numeric', year: 'numeric' },\n },\n display: {\n dateInput: 'input',\n monthYearLabel: { year: 'numeric', month: 'short' },\n dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },\n monthYearA11yLabel: { year: 'numeric', month: 'long' },\n },\n};\n\n@Injectable()\nexport class UiDateAdapter extends NativeDateAdapter {\n readonly #datepickerService = inject(DatepickerService);\n\n constructor() {\n super();\n }\n\n override format(date: Date): string {\n if (!this.#datepickerService.useBrowserTimezone) {\n return formatDate(date, 'MM/dd/yyyy', 'en-US');\n }\n\n const locale = navigator.language;\n const options: Partial<Intl.DateTimeFormatOptions> = {\n timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n dateStyle: 'short',\n };\n\n return new Intl.DateTimeFormat(locale, options).format(date);\n }\n}\n","import { formatDate } from '@angular/common';\nimport { Directive, Injectable } from '@angular/core';\nimport { DateAdapter, MAT_DATE_FORMATS, MatDateFormats, NativeDateAdapter } from '@angular/material/core';\n\n@Injectable()\nexport class CustomDateAdapter extends NativeDateAdapter {\n override format(date: Date): string {\n return formatDate(date, 'MM/yyyy', 'en-US');\n }\n}\n\nconst FORMATS: MatDateFormats = {\n parse: {\n dateInput: 'MM/YYYY',\n },\n display: {\n dateInput: 'MM/YYYY',\n monthYearLabel: 'MMM YYYY',\n dateA11yLabel: 'LL',\n monthYearA11yLabel: 'MMMM YYYY',\n },\n};\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector -- public directive selector; ui-prefix rename is breaking, deferred to the breaking-change MAJOR (see plan)\n selector: '[appNoDateFormat]',\n providers: [\n {\n provide: DateAdapter,\n useClass: CustomDateAdapter,\n },\n {\n provide: MAT_DATE_FORMATS,\n useValue: FORMATS,\n },\n ],\n standalone: true,\n})\nexport class NoDateFormatDirective {}\n","import { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DoCheck,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n OnChanges,\n Optional,\n Output,\n Self,\n SimpleChanges,\n ViewEncapsulation,\n OnInit,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormControl,\n FormGroup,\n NgControl,\n FormsModule,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';\nimport {\n MatDatepicker,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatDatepickerToggleIcon,\n MatDateRangeInput,\n MatStartDate,\n MatEndDate,\n MatDateRangePicker,\n} from '@angular/material/datepicker';\nimport { MatFormField, MatLabel, MatSuffix, MatHint } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\n\nimport {\n ApplicationTheme,\n adjustLightness,\n UiTranslatePipe,\n HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { IconComponent } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorComponent } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { UI_DATE_FORMATS, UiDateAdapter } from './date-adapter';\nimport { DatepickerService } from './datepicker.service';\nimport { NoDateFormatDirective } from './no-date-format.directive';\n\n@Component({\n selector: 'ui-datepicker',\n templateUrl: './datepicker.component.html',\n styleUrls: ['./datepicker.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: DateAdapter, useClass: UiDateAdapter },\n { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS },\n ],\n imports: [\n MatFormField,\n NoDateFormatDirective,\n NgClass,\n MatLabel,\n NgTemplateOutlet,\n MatInput,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatSuffix,\n IconComponent,\n MatDatepickerToggleIcon,\n MatDatepicker,\n MatHint,\n MatDateRangeInput,\n FormsModule,\n ReactiveFormsModule,\n MatStartDate,\n MatEndDate,\n MatDateRangePicker,\n ValidationErrorComponent,\n AsyncPipe,\n UiTranslatePipe,\n HasValidationErrorPipe,\n ],\n})\n// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\nexport class DatepickerComponent implements OnChanges, ControlValueAccessor, DoCheck, OnInit {\n @HostBinding() class = 'ui-datepicker';\n\n /*\n Form field label\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() label? = '';\n\n /\n Input name attribute\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() fieldName?: string;\n\n /\n Input placeholder\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() placeholder? = '';\n\n @Input() testId: string \| null = null;\n\n get rangeStartTestId(): string {\n return this.testId ? `${this.testId}-start` : 'datepicker-range-start';\n }\n\n get rangeEndTestId(): string {\n return this.testId ? `${this.testId}-end` : 'datepicker-range-end';\n }\n\n /\n Input id\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() id? = '';\n\n /\n Input value\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() value?: Array<Date \| null> \| Date;\n\n _errors: string[];\n /\n Input field errors\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() set errors(errors: string[]) {\n this._errors = errors?.filter(Boolean) ?? [];\n this.errorsLength = this.setErrorsLength();\n }\n\n /\n Determines if input is date range\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() isRange: boolean;\n\n /\n Determines if on blur of calendar and no end date is selected, set the end date as the start date\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() setSingleDateRangeOnBlur: boolean;\n\n /\n Determines if inner errors should be shown\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() showInnerErrors: boolean;\n\n /\n Determines inner errors message\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() innerErrorsMessage: string;\n\n /\n Determines if input is disabled\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() disabled: boolean;\n\n /\n Input is required or not\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() required: boolean;\n\n /\n Hint text\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() hintMessage: string;\n\n /\n Input is update only on blur\n \n @type {Boolean}\n * @memberof DatepickerComponent\n /\n @Input() updateOnBlur = false;\n\n /\n Show reserved content below form field\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() showBottomContent = true;\n\n /\n Set full width DatepickerComponent\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() fullWidth = false;\n\n /\n Set min date for Datepicker\n \n @type {Date}\n * @memberof DatepickerComponent\n /\n @Input() minDate: Date \| undefined;\n\n /\n Set max date for Datepicker\n \n @type {Date}\n * @memberof DatepickerComponent\n /\n @Input() maxDate: Date \| undefined;\n\n /\n Show and pick date without day\n * @default false\n * @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() monthPicker = false;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof DatepickerComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n Hide in-build errors for Reactive Forms\n \n @type {number}\n * @memberof DatepickerComponent\n /\n @Input() hideBuiltInErrors = false;\n\n /\n Hide label in errors\n \n @type {number}\n * @memberof DatepickerComponent\n /\n @Input() hideLabelInErrors = false;\n\n /\n Prevent user input\n \n @type {boolean}\n * @memberof DatepickerComponent\n /\n @Input() preventUserInput = false;\n\n /\n Color of the option hover.\n * Defaults to Test Gorilla primary color.\n \n @type {string}\n * @memberof DatepickerComponent\n /\n @Input() companyColor = '';\n\n /\n Use browser timezone\n * @type boolean\n * @memberof DatepickerComponent\n /\n @Input() set browserTimezone(value: boolean) {\n this.datepickerService.useBrowserTimezone = value;\n }\n\n /\n @ignore\n /\n onChange: (value: Date \| Date[]) => void = () => {};\n\n /\n @ignore\n /\n onTouch = () => {};\n\n /\n Event emitted when the value is change - when used outside of form\n \n @type {Date}\n * @memberof DatepickerComponent\n /\n @Output() changed = new EventEmitter<Date \| Date[]>();\n\n range = new FormGroup({\n start: new FormControl<Date \| null>(null),\n end: new FormControl<Date \| null>(null),\n });\n\n errorsLength: boolean;\n protected translationContext = 'DATEPICKER.';\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n private readonly cdr: ChangeDetectorRef,\n @Optional() @Self() public ngControl: NgControl,\n private readonly datepickerService: DatepickerService\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n get hint(): string {\n if (this.hintMessage === undefined) {\n return this.isRange ? 'MM/DD/YYYY - MM/DD/YYYY' : this.monthPicker ? 'MM/YYYY' : 'MM/DD/YYYY';\n }\n\n return this.hintMessage;\n }\n\n /\n Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n /\n // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n ngDoCheck(): void {\n if (this.ngControl?.touched \|\| this.ngControl?.errors) {\n this.cdr.markForCheck();\n }\n }\n\n // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n ngOnInit() {\n document.body.setAttribute('theme', this.applicationTheme);\n this.setStyleVariable();\n }\n\n // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n ngOnChanges(changes: SimpleChanges): void {\n if (this.isRange) {\n this.setRange();\n }\n if (changes['companyColor']) {\n this.setStyleVariable();\n }\n }\n\n // Set errors length for validation\n // Consider only those errors which are not empty\n setErrorsLength(): boolean {\n if (this._errors) {\n return this._errors.filter(err => Boolean(err)).length > 0 ? true : false;\n }\n return false;\n }\n\n onValueChange(value: Date \| Date[]) {\n this.writeValue(value);\n this.errorsLength = this.setErrorsLength();\n if (!this.updateOnBlur) {\n this.onTouch();\n }\n this.onChange(value);\n this.changed.emit(value);\n }\n\n writeValue(value?: Date \| Date[]): void {\n this.value = value;\n if (this.isRange) {\n this.setRange();\n }\n }\n\n registerOnChange(fn: (value: Date \| Date[]) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n handleCloseRangePicker(): void {\n if (this.setSingleDateRangeOnBlur) {\n this.fillSingleDateRange(true);\n }\n }\n\n fillSingleDateRange(isStart: boolean): void {\n const { start, end } = this.range.controls;\n const sourceControl = isStart ? start : end;\n const targetControl = isStart ? end : start;\n\n if (sourceControl.value && !targetControl.value) {\n targetControl.setValue(sourceControl.value);\n this.dateRangeChange();\n }\n }\n\n dateRangeChange() {\n const start = this.range.controls.start.value ?? null;\n const end = this.range.controls.end.value ?? null;\n this.onValueChange([start ? new Date(start) : start, end ? new Date(end) : end] as Date[]);\n }\n\n setMonthAndYear(normalizedMonthAndYear: Date, datepicker: MatDatepicker<Date>) {\n const ctrlValue = (this.value as Date) \|\| new Date();\n\n ctrlValue.setMonth(normalizedMonthAndYear.getMonth());\n ctrlValue.setFullYear(normalizedMonthAndYear.getFullYear());\n\n datepicker.close();\n\n this.onValueChange(new Date(ctrlValue));\n }\n\n private setRange() {\n if (Array.isArray(this.value)) {\n const [start, end] = this.value;\n\n if (start && String(this.range.controls.start.value) !== String(start)) {\n this.range.controls.start.setValue(new Date(start));\n }\n\n if (end && String(this.range.controls.end.value) !== String(end)) {\n this.range.controls.end.setValue(new Date(end));\n }\n }\n\n if (!this.value) {\n this.range.controls.start.setValue(null);\n this.range.controls.end.setValue(null);\n }\n }\n\n onInput(event: Event) {\n const target = event.target as EventTarget & { value: string };\n const [month, year] = target.value.split('/');\n const date = new Date().getDate();\n const fullDateString = `${month}/${date}/${year}`;\n const fullDate = new Date(fullDateString);\n this.onValueChange(fullDate);\n }\n\n private setStyleVariable() {\n const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';\n document.body.style.setProperty('--datepicker-hover-color', hover);\n document.body.style.setProperty('--datepicker-selected-color', `${this.companyColor \|\| '#D410AA'}`);\n }\n}\n","@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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { DatepickerComponent } from './datepicker.component';\nimport { NoDateFormatDirective } from './no-date-format.directive';\n\n@NgModule({\n imports: [\n CommonModule,\n MatFormFieldModule,\n MatInputModule,\n IconComponentModule,\n FormsModule,\n ReactiveFormsModule,\n MatDatepickerModule,\n MatNativeDateModule,\n UiTranslatePipe,\n NoDateFormatDirective,\n HasValidationErrorPipe,\n ValidationErrorModule,\n DatepickerComponent,\n ],\n exports: [DatepickerComponent],\n})\nexport class DatepickerComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i2.DatepickerService"],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, viewChild, inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { input, booleanAttribute, computed, output, viewChild, inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { IconComponent } from '@testgorilla/tgo-ui/components/icon';
 import { OverflowMenuComponent } from '@testgorilla/tgo-ui/components/overflow-menu';
 import { TooltipPositionType, TooltipComponent } from '@testgorilla/tgo-ui/components/tooltip';
@@ -38,6 +38,9 @@ class DeviceControlComponent {
          * light variant is available for reuse on light surfaces.
          */
         this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
+        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
+        this.mainTestId = computed(() => (this.testId() ? `${this.testId()}-toggle` : 'device-control-main'), ...(ngDevMode ? [{ debugName: "mainTestId" }] : /* istanbul ignore next */ []));
+        this.menuTestId = computed(() => (this.testId() ? `${this.testId()}-menu` : null), ...(ngDevMode ? [{ debugName: "menuTestId" }] : /* istanbul ignore next */ []));
         /** Emits when the main button is used to switch the device on or off, with the new state. */
         this.toggled = output();
         /**
@@ -83,15 +86,15 @@ class DeviceControlComponent {
         this.optionSelected.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DeviceControlComponent, isStandalone: true, selector: "ui-device-control", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, offIconName: { classPropertyName: "offIconName", publicName: "offIconName", isSignal: true, isRequired: false, transformFunction: null }, isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, onTooltip: { classPropertyName: "onTooltip", publicName: "onTooltip", isSignal: true, isRequired: true, transformFunction: null }, offTooltip: { classPropertyName: "offTooltip", publicName: "offTooltip", isSignal: true, isRequired: true, transformFunction: null }, menuTooltip: { classPropertyName: "menuTooltip", publicName: "menuTooltip", isSignal: true, isRequired: true, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorLabel: { classPropertyName: "errorLabel", publicName: "errorLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", optionSelected: "optionSelected", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { properties: { "attr.theme": "theme()" }, classAttribute: "ui-device-control" }, viewQueries: [{ propertyName: "overflowMenu", first: true, predicate: OverflowMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      data-testid=\"device-control-main\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\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}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "component", type: TooltipComponent, selector: "ui-tooltip", inputs: ["position", "disabled", "message", "applicationTheme", "labelForDefinition", "definitionTooltipSize", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DeviceControlComponent, isStandalone: true, selector: "ui-device-control", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, offIconName: { classPropertyName: "offIconName", publicName: "offIconName", isSignal: true, isRequired: false, transformFunction: null }, isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, onTooltip: { classPropertyName: "onTooltip", publicName: "onTooltip", isSignal: true, isRequired: true, transformFunction: null }, offTooltip: { classPropertyName: "offTooltip", publicName: "offTooltip", isSignal: true, isRequired: true, transformFunction: null }, menuTooltip: { classPropertyName: "menuTooltip", publicName: "menuTooltip", isSignal: true, isRequired: true, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorLabel: { classPropertyName: "errorLabel", publicName: "errorLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", optionSelected: "optionSelected", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { properties: { "attr.theme": "theme()" }, classAttribute: "ui-device-control" }, viewQueries: [{ propertyName: "overflowMenu", first: true, predicate: OverflowMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      [attr.data-testid]=\"mainTestId()\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    [testId]=\"menuTestId()\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\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}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "component", type: TooltipComponent, selector: "ui-tooltip", inputs: ["position", "disabled", "message", "applicationTheme", "labelForDefinition", "definitionTooltipSize", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-device-control', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ui-device-control',
                         '[attr.theme]': 'theme()',
-                    }, imports: [IconComponent, OverflowMenuComponent, TooltipComponent], template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      data-testid=\"device-control-main\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\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}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], offIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIconName", required: false }] }], isOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOn", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], onTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTooltip", required: true }] }], offTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "offTooltip", required: true }] }], menuTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTooltip", required: true }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorLabel", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], overflowMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowMenuComponent), { isSignal: true }] }] } });
+                    }, imports: [IconComponent, OverflowMenuComponent, TooltipComponent], template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      [attr.data-testid]=\"mainTestId()\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    [testId]=\"menuTestId()\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\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}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], offIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIconName", required: false }] }], isOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOn", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], onTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTooltip", required: true }] }], offTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "offTooltip", required: true }] }], menuTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTooltip", required: true }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorLabel", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], overflowMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowMenuComponent), { isSignal: true }] }] } });
 class DeviceControlComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }