@ngrdt/gov 0.0.86 → 0.0.91

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.
@@ -1,32 +1,31 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Injector, signal, input, linkedSignal, viewChild, effect, afterNextRender, untracked, HostBinding, Component, forwardRef, Injectable, ViewEncapsulation, InjectionToken, Renderer2, computed, ChangeDetectionStrategy, importProvidersFrom, LOCALE_ID, booleanAttribute, numberAttribute, CUSTOM_ELEMENTS_SCHEMA, Directive, ViewContainerRef, viewChildren } from '@angular/core';
2
+ import { inject, Injector, signal, input, linkedSignal, viewChild, effect, afterNextRender, untracked, HostBinding, Component, forwardRef, Injectable, ViewEncapsulation, InjectionToken, Renderer2, computed, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Directive, ViewContainerRef, viewChildren, booleanAttribute, importProvidersFrom, LOCALE_ID, numberAttribute } from '@angular/core';
3
3
  import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
4
4
  import { MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
5
- import * as i1$2 from '@angular/material/datepicker';
5
+ import * as i1$3 from '@angular/material/datepicker';
6
6
  import { MatDatepickerIntl, MatDatepickerModule } from '@angular/material/datepicker';
7
7
  import * as i1 from '@gov-design-system-ce/angular';
8
- import { GovButton, GovDesignSystemModule } from '@gov-design-system-ce/angular';
8
+ import { GovButton, GovDesignSystemModule, GovFormCheckbox } from '@gov-design-system-ce/angular';
9
9
  import { RdtButtonBase, RDT_BUTTON_BASE_PROVIDER } from '@ngrdt/button';
10
- import { RdtCheckboxComponent, RdtFormErrorPipe, RDT_CHECKBOX_BASE_PROVIDER, RdtDateComponent, RdtBaseFormInputComponent, RdtNumericInputComponent, RdtSelectOfflineDatasourceProviderDirective, RdtBaseSelectCommonComponent, RdtSelectOptionDirective, RdtSelectStore, RdtSingleSelectComponent, RdtTextInputComponent } from '@ngrdt/forms';
10
+ import { RdtTranslateService, RdtAutoFocusOnInitDirective, RdtTranslatePipe, RDT_NOTIFICATION_SERVICE_PROVIDER } from '@ngrdt/core';
11
+ import { RdtCheckboxComponent, RdtFormErrorPipe, RdtNumericInputComponent, RdtBaseFormInputComponent, RdtSelectOfflineDatasourceProviderDirective, RdtBaseSelectCommonComponent, RdtSelectOptionDirective, RdtSelectStore, RdtSingleSelectComponent, RDT_CHECKBOX_BASE_PROVIDER, RDT_NUMERIC_INPUT_BASE_PROVIDER, RDT_SELECT_BASE_PROVIDER, defaultRdtFormErrorCodes, RDT_FORM_ERROR_CODES_PROVIDER, RdtDateComponent, RdtTextInputComponent } from '@ngrdt/forms';
11
12
  import { RdtIconOutletDirective, RdtIcon, RdtIconComponent, RDT_ICON_BASE_PROVIDER, RDT_ICON_REGISTRY_PROVIDER } from '@ngrdt/icon';
12
13
  import { RdtSpinnerComponent, RDT_SPINNER_BASE_PROVIDER } from '@ngrdt/loading';
13
14
  import * as i1$1 from '@angular/common';
14
15
  import { NgTemplateOutlet, CommonModule } from '@angular/common';
15
16
  import { RouterLink } from '@angular/router';
16
- import * as i1$3 from '@angular/forms';
17
+ import * as i1$2 from '@angular/forms';
17
18
  import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
18
- import { RdtTranslateService, RdtAutoFocusOnInitDirective, RdtTranslatePipe } from '@ngrdt/core';
19
19
  import { ReplaySubject, Subject, take, fromEvent, filter, throttleTime, animationFrameScheduler, map } from 'rxjs';
20
20
  import { Overlay } from '@angular/cdk/overlay';
21
21
  import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
22
22
  import { CdkDrag } from '@angular/cdk/drag-drop';
23
+ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
24
+ import { TAB, ENTER } from '@angular/cdk/keycodes';
23
25
  import { defineCustomElements } from '@gov-design-system-ce/components/loader';
24
26
  import * as i2 from '@angular/material/input';
25
27
  import { MatInputModule } from '@angular/material/input';
26
- import { MatTimepickerModule } from '@angular/material/timepicker';
27
28
  import { isValid, format } from 'date-fns';
28
- import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
29
- import { TAB, ENTER } from '@angular/cdk/keycodes';
30
29
 
31
30
  const DEFAULT_GOV_BUTTON_COLOR = 'primary';
32
31
  const DEFAULT_GOV_BUTTON_TYPE = 'outlined';
@@ -113,7 +112,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
113
112
  args: ['style.width']
114
113
  }] } });
115
114
 
115
+ function forceFocus(input) {
116
+ let cnt = 0;
117
+ const maxCnt = 10;
118
+ const int = setInterval(() => {
119
+ input.focus({ preventScroll: true });
120
+ if (cnt === maxCnt || input.matches(':focus')) {
121
+ clearInterval(int);
122
+ }
123
+ cnt++;
124
+ }, 5);
125
+ }
126
+
116
127
  class RdtGovCheckboxComponent extends RdtCheckboxComponent {
128
+ govCheckbox = viewChild(GovFormCheckbox);
117
129
  labelPosition = linkedSignal(() => this.labelPositionInput());
118
130
  labelPositionInput = input('top', {
119
131
  alias: 'labelPosition',
@@ -122,13 +134,19 @@ class RdtGovCheckboxComponent extends RdtCheckboxComponent {
122
134
  sizeInput = input('m', {
123
135
  alias: 'size',
124
136
  });
125
- onInput(event) {
126
- const input = event.target;
127
- this.handleValueChange(input.checked);
137
+ async focus() {
138
+ const govInput = await this.govCheckbox();
139
+ const el = await govInput?.getRef();
140
+ forceFocus(el);
128
141
  }
129
- focus() { }
130
142
  canFocus() {
131
- return !this.disabled();
143
+ return new Promise((resolve) => {
144
+ setTimeout(async () => {
145
+ const elRef = this.govCheckbox();
146
+ const ref = await elRef?.getRef();
147
+ resolve(!!ref && !this.disabled());
148
+ }, 1);
149
+ });
132
150
  }
133
151
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
134
152
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovCheckboxComponent, isStandalone: true, selector: "rdt-gov-checkbox", inputs: { labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
@@ -137,7 +155,7 @@ class RdtGovCheckboxComponent extends RdtCheckboxComponent {
137
155
  useExisting: forwardRef(() => RdtGovCheckboxComponent),
138
156
  multi: true,
139
157
  },
140
- ], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n @if(lPos === 'top' && label().length>0){\n <gov-form-label\n slot=\"left\"\n size=\"m\"\n [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n >\n } @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label spaced\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <gov-form-checkbox\n class=\"rdt-gov-checkbox\"\n [size]=\"size()\"\n [value]=\"value()\"\n [ariaLabel]=\"lPos === 'left' ? label() : ''\"\n [required]=\"required()\"\n [checked]=\"checkedState()\"\n [invalid]=\"invalid()\"\n [disabled]=\"disabled()\"\n [identifier]=\"id()\"\n [noLabel]=\"true\"\n (gov-change)=\"checkedChange.emit(checkedState())\"\n ></gov-form-checkbox>\n @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n <gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n </gov-form-message>\n }\n</div>\n", styles: ["gov-form-checkbox{min-height:0px!important;padding:0!important}.center{display:flex;align-items:center}.spaced{margin-right:var(--spacing-xs-nudge)}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i1.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i1.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }] });
158
+ ], viewQueries: [{ propertyName: "govCheckbox", first: true, predicate: GovFormCheckbox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n @if(lPos === 'top' && label().length>0){\n <gov-form-label\n slot=\"left\"\n size=\"m\"\n [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n >\n } @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label spaced\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <gov-form-checkbox\n class=\"rdt-gov-checkbox\"\n [size]=\"size()\"\n [ariaLabel]=\"lPos === 'left' ? label() : ''\"\n [required]=\"required()\"\n [checked]=\"internalValue()\"\n [invalid]=\"invalid()\"\n [disabled]=\"disabled()\"\n [identifier]=\"id()\"\n [noLabel]=\"true\"\n (gov-change)=\"onInternalValueChange($event.detail.checked)\"\n ></gov-form-checkbox>\n @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n <gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n </gov-form-message>\n }\n</div>\n", styles: ["gov-form-checkbox{min-height:0px!important;padding:0!important}.center{display:flex;align-items:center}.spaced{margin-right:var(--spacing-xs-nudge)}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i1.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i1.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }] });
141
159
  }
142
160
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovCheckboxComponent, decorators: [{
143
161
  type: Component,
@@ -147,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
147
165
  useExisting: forwardRef(() => RdtGovCheckboxComponent),
148
166
  multi: true,
149
167
  },
150
- ], template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n @if(lPos === 'top' && label().length>0){\n <gov-form-label\n slot=\"left\"\n size=\"m\"\n [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n >\n } @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label spaced\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <gov-form-checkbox\n class=\"rdt-gov-checkbox\"\n [size]=\"size()\"\n [value]=\"value()\"\n [ariaLabel]=\"lPos === 'left' ? label() : ''\"\n [required]=\"required()\"\n [checked]=\"checkedState()\"\n [invalid]=\"invalid()\"\n [disabled]=\"disabled()\"\n [identifier]=\"id()\"\n [noLabel]=\"true\"\n (gov-change)=\"checkedChange.emit(checkedState())\"\n ></gov-form-checkbox>\n @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n <gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n </gov-form-message>\n }\n</div>\n", styles: ["gov-form-checkbox{min-height:0px!important;padding:0!important}.center{display:flex;align-items:center}.spaced{margin-right:var(--spacing-xs-nudge)}\n"] }]
168
+ ], template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n @if(lPos === 'top' && label().length>0){\n <gov-form-label\n slot=\"left\"\n size=\"m\"\n [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n >\n } @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label spaced\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <gov-form-checkbox\n class=\"rdt-gov-checkbox\"\n [size]=\"size()\"\n [ariaLabel]=\"lPos === 'left' ? label() : ''\"\n [required]=\"required()\"\n [checked]=\"internalValue()\"\n [invalid]=\"invalid()\"\n [disabled]=\"disabled()\"\n [identifier]=\"id()\"\n [noLabel]=\"true\"\n (gov-change)=\"onInternalValueChange($event.detail.checked)\"\n ></gov-form-checkbox>\n @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n <gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n </gov-form-message>\n }\n</div>\n", styles: ["gov-form-checkbox{min-height:0px!important;padding:0!important}.center{display:flex;align-items:center}.spaced{margin-right:var(--spacing-xs-nudge)}\n"] }]
151
169
  }] });
152
170
 
153
171
  class RdtDatepickerIntl extends MatDatepickerIntl {
@@ -489,82 +507,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
489
507
  }] });
490
508
 
491
509
  class RdtGovIconComponent extends RdtIconComponent {
492
- parsedName = computed(() => {
510
+ size = input('m');
511
+ color = input('primary');
512
+ parsed = computed(() => {
493
513
  const value = this.name() || '';
494
514
  const [type, name] = value.split('/');
495
515
  return { type: type || '', name: name || '' };
496
516
  });
517
+ isBootstrapIcon = computed(() => {
518
+ return this.parsed().type === 'bs';
519
+ });
497
520
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
498
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovIconComponent, isStandalone: true, selector: "rdt-gov-icon", usesInheritance: true, ngImport: i0, template: "@let p = parsedName(); @if (p.name) {\n<gov-icon class=\"rdt-gov-icon\" [type]=\"p.type\" [name]=\"p.name\"></gov-icon>\n} @else {\n<i class=\"bi\" [class]=\"'bi-' + p.type\"></i>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center}.rdt-gov-icon{width:16px;height:16px;font-size:10px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: CommonModule }] });
521
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovIconComponent, isStandalone: true, selector: "rdt-gov-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@let p = parsed(); @if (p.name) { @if (isBootstrapIcon()) {\n<div class=\"bi-wrapper\" [attr.color]=\"color()\" [attr.size]=\"size()\">\n <i class=\"bi bi-{{ p.name }}\"></i>\n</div>\n} @else {\n<gov-icon\n [color]=\"color()\"\n [size]=\"size()\"\n [type]=\"p.type\"\n [name]=\"p.name\"\n></gov-icon>\n} }\n", styles: [":host{display:flex;align-items:center;justify-content:center}.bi-wrapper{display:flex;align-items:center;justify-content:center}.bi-wrapper[size=xs]{width:var(--size-xs, var(--icon-size-xs));height:var(--size-xs, var(--icon-size-xs))}.bi-wrapper[size=xs] .bi{font-size:var(--size-xs, var(--icon-size-xs))}.bi-wrapper[size=s]{width:var(--size-s, var(--icon-size-s));height:var(--size-s, var(--icon-size-s))}.bi-wrapper[size=s] .bi{font-size:var(--size-s, var(--icon-size-s))}.bi-wrapper[size=m]{width:var(--size-m, var(--icon-size-m));height:var(--size-m, var(--icon-size-m))}.bi-wrapper[size=m] .bi{font-size:var(--size-m, var(--icon-size-m))}.bi-wrapper[size=l]{width:var(--size-l, var(--icon-size-l));height:var(--size-l, var(--icon-size-l))}.bi-wrapper[size=l] .bi{font-size:var(--size-l, var(--icon-size-l))}.bi-wrapper[size=xl]{width:var(--size-xl, var(--icon-size-xl));height:var(--size-xl, var(--icon-size-xl))}.bi-wrapper[size=xl] .bi{font-size:var(--size-xl, var(--icon-size-xl))}.bi-wrapper[size=\"2xl\"]{width:var(--size-2xl, var(--icon-size-2xl));height:var(--size-2xl, var(--icon-size-2xl))}.bi-wrapper[size=\"2xl\"] .bi{font-size:var(--size-2xl, var(--icon-size-2xl))}.bi-wrapper[size=\"3xl\"]{width:var(--size-3xl, var(--icon-size-3xl));height:var(--size-3xl, var(--icon-size-3xl))}.bi-wrapper[size=\"3xl\"] .bi{font-size:var(--size-3xl, var(--icon-size-3xl))}.bi-wrapper[size=\"4xl\"]{width:var(--size-4xl, var(--icon-size-4xl));height:var(--size-4xl, var(--icon-size-4xl))}.bi-wrapper[size=\"4xl\"] .bi{font-size:var(--size-4xl, var(--icon-size-4xl))}.bi-wrapper[size=\"5xl\"]{width:var(--size-5xl, var(--icon-size-5xl));height:var(--size-5xl, var(--icon-size-5xl))}.bi-wrapper[size=\"5xl\"] .bi{font-size:var(--size-5xl, var(--icon-size-5xl))}.bi-wrapper[color=black]{color:var(--black, var(--icon-on-bold-black))}.bi-wrapper[color=default]{color:var(--default, var(--icon-default))}.bi-wrapper[color=disabled]{color:var(--disabled, var(--icon-disabled))}.bi-wrapper[color=error]{color:var(--error, var(--icon-error))}.bi-wrapper[color=neutral]{color:var(--neutral, var(--icon-neutral))}.bi-wrapper[color=primary]{color:var(--primary, var(--icon-on-subtle))}.bi-wrapper[color=secondary]{color:var(--secondary, var(--icon-secondary))}.bi-wrapper[color=success]{color:var(--success, var(--icon-success))}.bi-wrapper[color=warning]{color:var(--warning, var(--icon-warning))}.bi-wrapper[color=white]{color:var(--white, var(--icon-on-bold-white))}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: CommonModule }] });
499
522
  }
500
523
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, decorators: [{
501
524
  type: Component,
502
- args: [{ selector: 'rdt-gov-icon', imports: [GovDesignSystemModule, CommonModule], template: "@let p = parsedName(); @if (p.name) {\n<gov-icon class=\"rdt-gov-icon\" [type]=\"p.type\" [name]=\"p.name\"></gov-icon>\n} @else {\n<i class=\"bi\" [class]=\"'bi-' + p.type\"></i>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center}.rdt-gov-icon{width:16px;height:16px;font-size:10px;display:flex;align-items:center;justify-content:center}\n"] }]
525
+ args: [{ selector: 'rdt-gov-icon', imports: [GovDesignSystemModule, CommonModule], template: "@let p = parsed(); @if (p.name) { @if (isBootstrapIcon()) {\n<div class=\"bi-wrapper\" [attr.color]=\"color()\" [attr.size]=\"size()\">\n <i class=\"bi bi-{{ p.name }}\"></i>\n</div>\n} @else {\n<gov-icon\n [color]=\"color()\"\n [size]=\"size()\"\n [type]=\"p.type\"\n [name]=\"p.name\"\n></gov-icon>\n} }\n", styles: [":host{display:flex;align-items:center;justify-content:center}.bi-wrapper{display:flex;align-items:center;justify-content:center}.bi-wrapper[size=xs]{width:var(--size-xs, var(--icon-size-xs));height:var(--size-xs, var(--icon-size-xs))}.bi-wrapper[size=xs] .bi{font-size:var(--size-xs, var(--icon-size-xs))}.bi-wrapper[size=s]{width:var(--size-s, var(--icon-size-s));height:var(--size-s, var(--icon-size-s))}.bi-wrapper[size=s] .bi{font-size:var(--size-s, var(--icon-size-s))}.bi-wrapper[size=m]{width:var(--size-m, var(--icon-size-m));height:var(--size-m, var(--icon-size-m))}.bi-wrapper[size=m] .bi{font-size:var(--size-m, var(--icon-size-m))}.bi-wrapper[size=l]{width:var(--size-l, var(--icon-size-l));height:var(--size-l, var(--icon-size-l))}.bi-wrapper[size=l] .bi{font-size:var(--size-l, var(--icon-size-l))}.bi-wrapper[size=xl]{width:var(--size-xl, var(--icon-size-xl));height:var(--size-xl, var(--icon-size-xl))}.bi-wrapper[size=xl] .bi{font-size:var(--size-xl, var(--icon-size-xl))}.bi-wrapper[size=\"2xl\"]{width:var(--size-2xl, var(--icon-size-2xl));height:var(--size-2xl, var(--icon-size-2xl))}.bi-wrapper[size=\"2xl\"] .bi{font-size:var(--size-2xl, var(--icon-size-2xl))}.bi-wrapper[size=\"3xl\"]{width:var(--size-3xl, var(--icon-size-3xl));height:var(--size-3xl, var(--icon-size-3xl))}.bi-wrapper[size=\"3xl\"] .bi{font-size:var(--size-3xl, var(--icon-size-3xl))}.bi-wrapper[size=\"4xl\"]{width:var(--size-4xl, var(--icon-size-4xl));height:var(--size-4xl, var(--icon-size-4xl))}.bi-wrapper[size=\"4xl\"] .bi{font-size:var(--size-4xl, var(--icon-size-4xl))}.bi-wrapper[size=\"5xl\"]{width:var(--size-5xl, var(--icon-size-5xl));height:var(--size-5xl, var(--icon-size-5xl))}.bi-wrapper[size=\"5xl\"] .bi{font-size:var(--size-5xl, var(--icon-size-5xl))}.bi-wrapper[color=black]{color:var(--black, var(--icon-on-bold-black))}.bi-wrapper[color=default]{color:var(--default, var(--icon-default))}.bi-wrapper[color=disabled]{color:var(--disabled, var(--icon-disabled))}.bi-wrapper[color=error]{color:var(--error, var(--icon-error))}.bi-wrapper[color=neutral]{color:var(--neutral, var(--icon-neutral))}.bi-wrapper[color=primary]{color:var(--primary, var(--icon-on-subtle))}.bi-wrapper[color=secondary]{color:var(--secondary, var(--icon-secondary))}.bi-wrapper[color=success]{color:var(--success, var(--icon-success))}.bi-wrapper[color=warning]{color:var(--warning, var(--icon-warning))}.bi-wrapper[color=white]{color:var(--white, var(--icon-on-bold-white))}\n"] }]
503
526
  }] });
504
527
 
505
- const RDT_BASE_NOTIFICATION_PROVIDER = new InjectionToken('RDT_GOV_NOTIFICATION_PROVIDER');
506
- const RDT_POPUP_NOTIFICATION_PROVIDER = new InjectionToken('RDT_CUSTOM_NOTIFICATION_PROVIDER');
528
+ const RDT_GOV_NOTIFICATION_DEFAULT_CONFIG = {
529
+ duration: 3000,
530
+ positionVert: 'top',
531
+ positionHoriz: 'right',
532
+ type: 'bold',
533
+ closeLabel: undefined,
534
+ };
535
+
536
+ /**
537
+ * Injection token for the default configuration of notifications.
538
+ */
539
+ const RDT_GOV_NOTIFICATION_CONFIG_PROVIDER = new InjectionToken('RDT_GOV_NOTIFICATION_CONFIG_PROVIDER');
540
+
541
+ /**
542
+ * Injection token for the data of the notification component.
543
+ * Private
544
+ */
545
+ const RDT_GOV_NOTIFICATION_DATA_PROVIDER = new InjectionToken('RDT_GOV_NOTIFICATION_DATA_PROVIDER');
507
546
 
547
+ /**
548
+ * Component rendering individual notification.
549
+ */
508
550
  class RdtGovNotificationPopupComponent {
509
- injected = inject(RDT_POPUP_NOTIFICATION_PROVIDER);
551
+ data = inject(RDT_GOV_NOTIFICATION_DATA_PROVIDER);
510
552
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNotificationPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
511
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovNotificationPopupComponent, isStandalone: true, selector: "rdt-gov-notification-popup", ngImport: i0, template: "@let icon = injected?.icon; @if(injected){\n<gov-toast\n [color]=\"injected.color\"\n [gravity]=\"injected.positionVert\"\n [position]=\"injected.positionHoriz\"\n [type]=\"injected.type\"\n [closeLabel]=\"injected.closeLabel\"\n ><div class=\"toast-wrapper\">\n @if (icon) {\n <span class=\"toast-icon\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: icon }\"></ng-container>\n </span>\n }\n <span>{{ injected.message }}</span>\n </div>\n</gov-toast>\n}\n", styles: [".toast-wrapper{display:flex;gap:var(--spacing-s-nudge)}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovToast, selector: "gov-toast", inputs: ["accessibleCloseLabel", "closeLabel", "color", "gravity", "position", "time", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }] });
553
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovNotificationPopupComponent, isStandalone: true, selector: "rdt-gov-notification-popup", ngImport: i0, template: "@if(data){\n<gov-toast\n [color]=\"data.color\"\n [gravity]=\"data.positionVert\"\n [position]=\"data.positionHoriz\"\n [type]=\"data.type\"\n [closeLabel]=\"data.closeLabel\"\n ><div class=\"toast-wrapper\">\n @if (data.icon) {\n <span class=\"toast-icon\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: data.icon }\"></ng-container>\n </span>\n }\n <span>{{ data.message }}</span>\n </div>\n</gov-toast>\n}\n", styles: [".toast-wrapper{display:flex;gap:var(--spacing-s-nudge)}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovToast, selector: "gov-toast", inputs: ["accessibleCloseLabel", "closeLabel", "color", "gravity", "position", "time", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }] });
512
554
  }
513
555
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNotificationPopupComponent, decorators: [{
514
556
  type: Component,
515
- args: [{ selector: 'rdt-gov-notification-popup', imports: [GovDesignSystemModule, CommonModule, RdtIconOutletDirective], template: "@let icon = injected?.icon; @if(injected){\n<gov-toast\n [color]=\"injected.color\"\n [gravity]=\"injected.positionVert\"\n [position]=\"injected.positionHoriz\"\n [type]=\"injected.type\"\n [closeLabel]=\"injected.closeLabel\"\n ><div class=\"toast-wrapper\">\n @if (icon) {\n <span class=\"toast-icon\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: icon }\"></ng-container>\n </span>\n }\n <span>{{ injected.message }}</span>\n </div>\n</gov-toast>\n}\n", styles: [".toast-wrapper{display:flex;gap:var(--spacing-s-nudge)}\n"] }]
557
+ args: [{ selector: 'rdt-gov-notification-popup', imports: [GovDesignSystemModule, CommonModule, RdtIconOutletDirective], template: "@if(data){\n<gov-toast\n [color]=\"data.color\"\n [gravity]=\"data.positionVert\"\n [position]=\"data.positionHoriz\"\n [type]=\"data.type\"\n [closeLabel]=\"data.closeLabel\"\n ><div class=\"toast-wrapper\">\n @if (data.icon) {\n <span class=\"toast-icon\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: data.icon }\"></ng-container>\n </span>\n }\n <span>{{ data.message }}</span>\n </div>\n</gov-toast>\n}\n", styles: [".toast-wrapper{display:flex;gap:var(--spacing-s-nudge)}\n"] }]
516
558
  }] });
517
559
 
518
560
  class RdtGovNotificationService {
519
561
  overlay = inject(Overlay);
520
562
  injector = inject(Injector);
521
- translateService = inject(RdtTranslateService);
522
- govDefaults = inject(RDT_BASE_NOTIFICATION_PROVIDER);
523
- show(cfg) {
524
- this.open(cfg);
525
- }
526
- success(customMsg = '') {
527
- this.openDefault('success', this.translateService.instant(customMsg));
528
- }
529
- warning(customMsg = '') {
530
- this.openDefault('warning', this.translateService.instant(customMsg));
531
- }
532
- error(customMsg = '') {
533
- this.openDefault('error', this.translateService.instant(customMsg));
534
- }
535
- openDefault(type, customMsg) {
536
- const msgPropName = (type + 'Msg');
537
- this.open({
538
- message: customMsg
539
- ? customMsg
540
- : this.govDefaults?.[msgPropName].toString() ?? '',
541
- positionVert: this.govDefaults?.positionVert ?? 'top',
542
- positionHoriz: this.govDefaults?.positionHoriz ?? 'center',
543
- duration: this.govDefaults?.duration ?? 2000,
544
- color: type,
545
- type: 'bold',
546
- });
563
+ t = inject(RdtTranslateService);
564
+ config = inject(RDT_GOV_NOTIFICATION_CONFIG_PROVIDER, {
565
+ optional: true,
566
+ });
567
+ show(partialConfig) {
568
+ const cfg = this.mergeConfig(partialConfig);
569
+ const overlayRef = this.createOverlayRef();
570
+ const portal = this.createPortal(cfg);
571
+ overlayRef.attach(portal);
572
+ setTimeout(() => this.close(overlayRef), cfg.duration);
573
+ }
574
+ success(message = this.t.instant('RDT_GOV_NOTIFY_SUCCESS')) {
575
+ this.show({ color: 'success', message });
576
+ }
577
+ warn(message = this.t.instant('RDT_GOV_NOTIFY_WARNING')) {
578
+ this.show({ color: 'warning', message });
547
579
  }
548
- open(cfg) {
549
- let positionStrat = this.overlay.position().global();
580
+ error(message = this.t.instant('RDT_GOV_NOTIFY_ERROR')) {
581
+ this.show({ color: 'error', message });
582
+ }
583
+ mergeConfig(cfg) {
584
+ return {
585
+ ...RDT_GOV_NOTIFICATION_DEFAULT_CONFIG,
586
+ ...this.config,
587
+ ...cfg,
588
+ };
589
+ }
590
+ createPortal(cfg) {
591
+ const popupInjector = this.getDataInjector(cfg);
592
+ return new ComponentPortal(RdtGovNotificationPopupComponent, null, popupInjector);
593
+ }
594
+ createOverlayRef() {
595
+ const positionStrat = this.overlay.position().global();
550
596
  const overlayRef = this.overlay.create({
551
597
  positionStrategy: positionStrat,
552
598
  hasBackdrop: false,
553
599
  });
554
- const popupInjector = Injector.create({
600
+ return overlayRef;
601
+ }
602
+ getDataInjector(cfg) {
603
+ return Injector.create({
555
604
  providers: [
556
605
  {
557
- provide: RDT_POPUP_NOTIFICATION_PROVIDER,
606
+ provide: RDT_GOV_NOTIFICATION_DATA_PROVIDER,
558
607
  useValue: cfg,
559
608
  },
560
609
  ],
561
610
  parent: this.injector,
562
611
  });
563
- const portal = new ComponentPortal(RdtGovNotificationPopupComponent, null, popupInjector);
564
- overlayRef.attach(portal);
565
- setTimeout(() => {
566
- this.close(overlayRef);
567
- }, cfg.duration);
568
612
  }
569
613
  close(overlayRef) {
570
614
  overlayRef?.dispose();
@@ -577,437 +621,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
577
621
  args: [{ providedIn: 'root' }]
578
622
  }] });
579
623
 
580
- function provideNgrdtGov(options = {}) {
581
- return [
582
- importProvidersFrom(GovDesignSystemModule),
583
- {
584
- provide: RDT_ICON_BASE_PROVIDER,
585
- useValue: RdtGovIconComponent,
586
- },
587
- {
588
- provide: RDT_CHECKBOX_BASE_PROVIDER,
589
- useValue: RdtGovCheckboxComponent,
590
- },
591
- {
592
- provide: RDT_BUTTON_BASE_PROVIDER,
593
- useValue: RdtGovButtonComponent,
594
- },
595
- {
596
- provide: RDT_ICON_REGISTRY_PROVIDER,
597
- useValue: {
598
- [RdtIcon.MenuArrowRight]: 'components/chevron-right',
599
- [RdtIcon.MenuArrowDown]: 'components/chevron-down',
600
- [RdtIcon.SkipDoubleLeft]: 'components/chevron-double-left',
601
- [RdtIcon.SkipDoubleRight]: 'components/chevron-double-right',
602
- [RdtIcon.SkipLeft]: 'components/chevron-left',
603
- [RdtIcon.SkipRight]: 'components/chevron-right',
604
- [RdtIcon.SortAsc]: 'sort-down',
605
- [RdtIcon.SortDesc]: 'sort-up',
606
- [RdtIcon.SortEnabled]: 'filter',
607
- },
608
- },
609
- {
610
- provide: RDT_BASE_NOTIFICATION_PROVIDER,
611
- useValue: {
612
- duration: 3000,
613
- positionVert: 'top',
614
- positionHoriz: 'right',
615
- successMsg: 'RDT_GOV_NOTIFY_SUCCESS',
616
- warningMsg: 'RDT_GOV_NOTIFY_WARNING',
617
- errorMsg: 'RDT_GOV_NOTIFY_ERROR',
618
- },
619
- },
620
- {
621
- provide: RDT_ALERT_DIALOG_PROVIDER,
622
- useValue: {
623
- minHeight: '250px',
624
- },
625
- },
626
- {
627
- provide: RDT_CONFIRM_DIALOG_PROVIDER,
628
- useValue: {
629
- minHeight: '250px',
630
- },
631
- },
632
- {
633
- provide: RDT_BASE_DIALOG_PROVIDER,
634
- useValue: {
635
- isDraggable: false,
636
- minHeight: '400px',
637
- },
638
- },
639
- {
640
- provide: RDT_SPINNER_BASE_PROVIDER,
641
- useValue: RdtGovSpinnerComponent,
642
- },
643
- { provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' },
644
- { provide: LOCALE_ID, useValue: 'cs-CZ' },
645
- { provide: MatDatepickerIntl, useClass: RdtDatepickerIntl },
646
- provideDateFnsAdapter(),
647
- ];
648
- }
649
-
650
- function initRdtGov(config = {}) {
651
- const defaultConfig = {
652
- iconsPath: 'icons',
653
- };
654
- window.GOV_DS_CONFIG = { ...defaultConfig, ...config };
655
- defineCustomElements(window);
656
- }
657
-
658
- class RdtGovDateComponent extends RdtDateComponent {
659
- translateService = inject(RdtTranslateService);
660
- dateAdapter = inject(DateAdapter);
661
- dateInput = viewChild('dateInput');
662
- timeInput = viewChild('timeInput');
624
+ class RdtGovNumberInputComponent extends RdtNumericInputComponent {
625
+ renderer = inject(Renderer2);
626
+ govInput = viewChild('govInput');
663
627
  size = input('s');
628
+ icon = input(null);
629
+ iconStart = input(null);
664
630
  labelPositionInput = input('top', {
665
631
  alias: 'labelPosition',
666
632
  });
667
633
  labelPosition = linkedSignal(() => this.labelPositionInput());
668
- showSeconds = input(false, { transform: booleanAttribute });
669
- stepInput = input(undefined, {
670
- alias: 'step',
671
- transform: numberAttribute,
672
- });
673
- step = linkedSignal(() => {
674
- return this.stepInput() ?? (this.showSeconds() ? 1 : undefined);
675
- });
676
- dateInputFocused = false;
677
- // Current value of physical date input field
678
- dateInputValue = signal(null);
679
- // Current value of physical time input field
680
- timeInputValue = signal('');
681
- internalTimeFormat = computed(() => this.showSeconds() ? 'HH:mm:ss' : 'HH:mm');
682
- defaultTime = computed(() => this.showSeconds() ? '00:00:00' : '00:00');
683
- localeUsed = computed(() => this.translateService.currentFormat().dateFnsLocale);
684
- hasDate = computed(() => this.type() !== 'time');
685
- hasTime = computed(() => this.type() !== 'date');
686
- internalTimeValue = computed(() => {
687
- const value = this.internalValue();
688
- if (!value) {
689
- return '';
690
- }
691
- const time = this.formatTime(value);
692
- // This condition prevents adding zeros for seconds while typing
693
- // E.g. 12:34 won't get changed to 12:34:00 automatically and it's valid value
694
- if (this.timeInputValue() !== time &&
695
- this.isValidTime(this.timeInputValue()) &&
696
- time.startsWith(this.timeInputValue())) {
697
- return this.timeInputValue();
698
- }
699
- return time;
700
- });
634
+ inputElement = signal(null);
635
+ hasErrors = false;
701
636
  isEmpty(value) {
702
- return value === null;
637
+ return value == null;
703
638
  }
704
- // Update DateAdapter locale when current locale changes
705
- dateFnsLocaleEffect = effect(() => {
706
- this.dateAdapter.setLocale(this.localeUsed());
707
- });
708
- toExternalValue(internalValue) {
709
- if (!internalValue) {
710
- return null;
639
+ onInput(value) {
640
+ if (value === '' || value == null) {
641
+ this.onInternalValueChange(null);
711
642
  }
712
- return this.dateAdapter.format(internalValue, this.formControlFormat());
713
- }
714
- toInternalValue(externalValue) {
715
- if (!externalValue) {
716
- return null;
643
+ else if (typeof value === 'string') {
644
+ const parsed = parseFloat(value);
645
+ if (!isNaN(parsed)) {
646
+ this.onInternalValueChange(parsed);
647
+ }
717
648
  }
718
- const parsed = this.dateAdapter.parse(externalValue, this.formControlFormat());
719
- if (!isValid(parsed)) {
720
- console.error(`Date field labeled "${this.label()}" was set invalid value "${externalValue}". Expected FormControl format: "${this.formControlFormat()}"`);
721
- return null;
649
+ else {
650
+ this.onInternalValueChange(value);
722
651
  }
723
- return parsed;
724
652
  }
725
- /**
726
- * Prevents unnecessary change emissions on FormControl
727
- * @returns True if both Date objects represent the same point in time
728
- */
729
- areInternalValuesEqual(value1, value2) {
730
- if (value1 === null && value2 === null) {
731
- return true;
732
- }
733
- if (value1 === null || value2 === null) {
734
- return false;
653
+ readonlyEffect = effect(async () => {
654
+ const input = this.govInput()?.nativeElement;
655
+ const inputEl = await input?.getRef();
656
+ const readonly = this.readonlyInput();
657
+ if (input) {
658
+ if (readonly) {
659
+ this.renderer.setAttribute(input, 'readonly', 'true');
660
+ }
661
+ else {
662
+ this.renderer.removeAttribute(input, 'readonly');
663
+ }
735
664
  }
736
- return value1.getTime() === value2.getTime();
737
- }
738
- writeValue(value) {
739
- super.writeValue(value);
740
- const internalValue = this.toInternalValue(value);
741
- // Update physical input fields when FormControl value changes
742
- // Necessary before user interaction
743
- if (internalValue) {
744
- this.dateInputValue.set(internalValue);
745
- this.timeInputValue.set(this.formatTime(internalValue));
665
+ });
666
+ inputElementEffect = effect(async () => {
667
+ const govInput = this.govInput()?.nativeElement;
668
+ if (govInput) {
669
+ const input = await govInput.getRef();
670
+ this.inputElement.set(input);
746
671
  }
747
- else {
748
- this.dateInputValue.set(null);
749
- this.timeInputValue.set('');
672
+ });
673
+ errorFixEffect = effect(() => {
674
+ const inputElement = this.inputElement();
675
+ const visibleErrors = this.visibleErrors();
676
+ const hadErrors = this.hasErrors;
677
+ this.hasErrors = !!visibleErrors;
678
+ if (hadErrors !== this.hasErrors) {
679
+ const isActive = document.activeElement === inputElement;
680
+ if (isActive && inputElement) {
681
+ forceFocus(inputElement);
682
+ }
750
683
  }
751
- }
752
- onDateInput(event) {
753
- const dateValue = event.value;
754
- if (!dateValue) {
755
- // Clear FormControl value when date is invalid
756
- // Keep internal state
757
- this.dateInputValue.set(null);
758
- this.onChange(null);
759
- }
760
- else {
761
- this.dateInputValue.set(dateValue);
762
- this.onDateChange(dateValue);
763
- }
764
- }
765
- onTimeChange(event) {
766
- const value = event.target.value;
767
- let internalValue = this.internalValue();
768
- if (!this.hasDate()) {
769
- internalValue ??= this.emptyTimeDate;
770
- }
771
- const dateOk = internalValue && (this.dateInputValue() || !this.hasDate());
772
- if (this.isValidTime(value) && internalValue && dateOk) {
773
- const newDate = this.populateTime(new Date(internalValue), value);
774
- this.onInternalValueChange(newDate);
775
- }
776
- this.timeInputValue.set(value);
777
- }
778
- onDateChange(date) {
779
- const value = date ?? null;
780
- const internalValueOld = this.internalValue();
781
- const timeInputValue = this.timeInputValue();
782
- // If both newly selected date and time input are valid, combine them
783
- if (value && timeInputValue) {
784
- this.populateTime(value, timeInputValue);
785
- }
786
- // Set internal value
787
- this.onInternalValueChange(value);
788
- // In case date input is focused, revert internal value
789
- // to original value before Date change event
790
- // while keeping external value and FormControl value updated
791
- // This prevents unexpected changes to date and time inputs while typing
792
- // New internal value will be set on date input blur
793
- if (this.dateInputFocused) {
794
- this.internalValue.set(internalValueOld);
795
- }
796
- }
797
- onDateInputFocus() {
798
- this.dateInputFocused = true;
799
- this.onFocus();
800
- }
801
- onDateInputBlur() {
802
- this.dateInputFocused = false;
803
- // Set internal value to the combined date and time from inputs
804
- // In case date and/or time input is invalid, internal value will not change
805
- const dateTimeFromInputs = this.getDateTimeFromInputs();
806
- if (dateTimeFromInputs) {
807
- this.onInternalValueChange(dateTimeFromInputs);
808
- }
809
- this.onBlur();
810
- }
811
- /**
812
- * Returns Date object constructed from current date and time input values
813
- * or null if either input is invalid
814
- */
815
- getDateTimeFromInputs() {
816
- const dateInputValue = this.dateInputValue();
817
- const timeInputValue = this.timeInputValue();
818
- if (!timeInputValue || !dateInputValue) {
819
- return null;
820
- }
821
- else {
822
- const newInternal = new Date(dateInputValue);
823
- this.populateTime(newInternal, timeInputValue);
824
- return newInternal;
825
- }
826
- }
827
- onTimeInputFocus() {
828
- this.onFocus();
829
- }
830
- onTimeInputBlur() {
831
- const timeInputEl = this.timeInput()?.nativeElement;
832
- if (!timeInputEl) {
833
- return;
834
- }
835
- const value = timeInputEl?.value ?? '';
836
- // Emit null value to FormControl in case time is blurred while invalid (empty slots), ,
837
- // Keep internal state intacted to prevent unexpected changes to input fields
838
- if (!value) {
839
- this.onChange(null);
840
- }
841
- this.onBlur();
842
- }
843
- /**
844
- * Helper function to format a Date object to a time string
845
- */
846
- formatTime(date) {
847
- if (this.type() === 'date') {
848
- return this.defaultTime();
849
- }
850
- try {
851
- const locale = this.localeUsed();
852
- const timeFormat = this.internalTimeFormat();
853
- return format(date, timeFormat, { locale });
854
- }
855
- catch (e) {
856
- console.log('Error formatting date: ', date, 'target format: ', this.internalTimeFormat());
857
- console.error(e);
858
- return this.defaultTime();
859
- }
860
- }
861
- /**
862
- * Helper function to populate a Date object with time from a string
863
- * in the format HH:mm or HH:mm:ss
864
- */
865
- populateTime(date, timeString) {
866
- const timeParts = timeString.split(':').map((part) => parseInt(part, 10));
867
- date.setHours(timeParts[0] || 0, timeParts[1] || 0, timeParts[2] || 0, 0);
868
- return date;
869
- }
870
- isValidTime(value) {
871
- if (!value) {
872
- return false;
873
- }
874
- return /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d{1,3})?)?$/.test(value);
875
- }
876
- async focus() {
877
- this.dateInput()?.nativeElement.focus();
878
- }
879
- canFocus() {
880
- return new Promise((resolve) => {
881
- setTimeout(() => {
882
- const elRef = this.dateInput();
883
- resolve(!!elRef?.nativeElement);
884
- }, 1);
885
- });
886
- }
887
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
888
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovDateComponent, isStandalone: true, selector: "rdt-gov-date", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, stepInput: { classPropertyName: "stepInput", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
889
- {
890
- provide: NG_VALUE_ACCESSOR,
891
- useExisting: RdtGovDateComponent,
892
- multi: true,
893
- },
894
- {
895
- provide: RdtBaseFormInputComponent,
896
- useExisting: RdtGovDateComponent,
897
- },
898
- {
899
- provide: RdtDateComponent,
900
- useExisting: RdtGovDateComponent,
901
- },
902
- provideDateFnsAdapter(),
903
- { provide: MatDatepickerIntl, useClass: RdtDatepickerIntl },
904
- ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n @if(lPos) {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div class=\"rdt-date-field-wrapper gov-form-input\" [attr.size]=\"size()\">\n @if(type() === 'date' || type() === 'datetime-local'){\n <div class=\"rdt-date-field-position date\">\n <input\n class=\"rdt-date-field\"\n #dateInput\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [matDatepicker]=\"picker\"\n (focus)=\"onDateInputFocus()\"\n (blur)=\"onDateInputBlur()\"\n (dateInput)=\"onDateInput($event)\"\n (dateChange)=\"onDateInput($event)\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n <mat-datepicker-toggle\n [attr.size]=\"size()\"\n matIconSuffix\n [for]=\"picker\"\n [disableRipple]=\"true\"\n >\n <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </div>\n } @if(type() === 'datetime-local' || type() === 'time'){\n <div class=\"rdt-date-field-position time\">\n <input\n class=\"rdt-date-field\"\n type=\"time\"\n #timeInput\n (input)=\"onTimeChange($event)\"\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [step]=\"step()\"\n [attr.readonly]=\"readonlyInput() ? true : undefined\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalTimeValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (focus)=\"onTimeInputFocus()\"\n (blur)=\"onTimeInputBlur()\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n </div>\n }\n </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n", ".rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error));--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
905
- }
906
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, decorators: [{
907
- type: Component,
908
- args: [{ selector: 'rdt-gov-date', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
909
- RdtFormErrorPipe,
910
- MatDatepickerModule,
911
- MatTimepickerModule,
912
- MatInputModule,
913
- ReactiveFormsModule,
914
- FormsModule,
915
- ], providers: [
916
- {
917
- provide: NG_VALUE_ACCESSOR,
918
- useExisting: RdtGovDateComponent,
919
- multi: true,
920
- },
921
- {
922
- provide: RdtBaseFormInputComponent,
923
- useExisting: RdtGovDateComponent,
924
- },
925
- {
926
- provide: RdtDateComponent,
927
- useExisting: RdtGovDateComponent,
928
- },
929
- provideDateFnsAdapter(),
930
- { provide: MatDatepickerIntl, useClass: RdtDatepickerIntl },
931
- ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n @if(lPos) {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div class=\"rdt-date-field-wrapper gov-form-input\" [attr.size]=\"size()\">\n @if(type() === 'date' || type() === 'datetime-local'){\n <div class=\"rdt-date-field-position date\">\n <input\n class=\"rdt-date-field\"\n #dateInput\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [matDatepicker]=\"picker\"\n (focus)=\"onDateInputFocus()\"\n (blur)=\"onDateInputBlur()\"\n (dateInput)=\"onDateInput($event)\"\n (dateChange)=\"onDateInput($event)\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n <mat-datepicker-toggle\n [attr.size]=\"size()\"\n matIconSuffix\n [for]=\"picker\"\n [disableRipple]=\"true\"\n >\n <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </div>\n } @if(type() === 'datetime-local' || type() === 'time'){\n <div class=\"rdt-date-field-position time\">\n <input\n class=\"rdt-date-field\"\n type=\"time\"\n #timeInput\n (input)=\"onTimeChange($event)\"\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [step]=\"step()\"\n [attr.readonly]=\"readonlyInput() ? true : undefined\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalTimeValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (focus)=\"onTimeInputFocus()\"\n (blur)=\"onTimeInputBlur()\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n </div>\n }\n </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n", ".rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error));--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"] }]
932
- }] });
933
-
934
- function forceFocus(input) {
935
- let cnt = 0;
936
- const maxCnt = 10;
937
- const int = setInterval(() => {
938
- input.focus({ preventScroll: true });
939
- if (cnt === maxCnt || input.matches(':focus')) {
940
- clearInterval(int);
941
- }
942
- cnt++;
943
- }, 5);
944
- }
945
-
946
- class RdtGovNumberInputComponent extends RdtNumericInputComponent {
947
- renderer = inject(Renderer2);
948
- govInput = viewChild('govInput');
949
- size = input('s');
950
- icon = input(null);
951
- iconStart = input(null);
952
- labelPositionInput = input('top', {
953
- alias: 'labelPosition',
954
- });
955
- labelPosition = linkedSignal(() => this.labelPositionInput());
956
- inputElement = signal(null);
957
- hasErrors = false;
958
- isEmpty(value) {
959
- return value == null;
960
- }
961
- onInput(value) {
962
- if (value === '' || value == null) {
963
- this.onInternalValueChange(null);
964
- }
965
- else if (typeof value === 'string') {
966
- const parsed = parseFloat(value);
967
- if (!isNaN(parsed)) {
968
- this.onInternalValueChange(parsed);
969
- }
970
- }
971
- else {
972
- this.onInternalValueChange(value);
973
- }
974
- }
975
- readonlyEffect = effect(async () => {
976
- const input = this.govInput()?.nativeElement;
977
- const inputEl = await input?.getRef();
978
- const readonly = this.readonlyInput();
979
- if (input) {
980
- if (readonly) {
981
- this.renderer.setAttribute(input, 'readonly', 'true');
982
- }
983
- else {
984
- this.renderer.removeAttribute(input, 'readonly');
985
- }
986
- }
987
- });
988
- inputElementEffect = effect(async () => {
989
- const govInput = this.govInput()?.nativeElement;
990
- if (govInput) {
991
- const input = await govInput.getRef();
992
- this.inputElement.set(input);
993
- }
994
- });
995
- errorFixEffect = effect(() => {
996
- const inputElement = this.inputElement();
997
- const visibleErrors = this.visibleErrors();
998
- const hadErrors = this.hasErrors;
999
- this.hasErrors = !!visibleErrors;
1000
- if (hadErrors !== this.hasErrors) {
1001
- const isActive = document.activeElement === inputElement;
1002
- if (isActive && inputElement) {
1003
- forceFocus(inputElement);
1004
- }
1005
- }
1006
- });
1007
- async focus() {
1008
- const govInput = await this.govInput()?.nativeElement;
1009
- const el = await govInput?.getRef();
1010
- forceFocus(el);
684
+ });
685
+ async focus() {
686
+ const govInput = await this.govInput()?.nativeElement;
687
+ const el = await govInput?.getRef();
688
+ forceFocus(el);
1011
689
  }
1012
690
  canFocus() {
1013
691
  return new Promise((resolve) => {
@@ -1028,7 +706,7 @@ class RdtGovNumberInputComponent extends RdtNumericInputComponent {
1028
706
  provide: RdtBaseFormInputComponent,
1029
707
  useExisting: RdtGovNumberInputComponent,
1030
708
  },
1031
- ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n input-type=\"number\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInput($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
709
+ ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top' && label().length>0){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n input-type=\"number\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInput($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1032
710
  }
1033
711
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNumberInputComponent, decorators: [{
1034
712
  type: Component,
@@ -1042,7 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
1042
720
  provide: RdtBaseFormInputComponent,
1043
721
  useExisting: RdtGovNumberInputComponent,
1044
722
  },
1045
- ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n input-type=\"number\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInput($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n"] }]
723
+ ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition(); @if(lPos === 'top' && label().length>0){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n input-type=\"number\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInput($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"] }]
1046
724
  }] });
1047
725
 
1048
726
  class RdtGovSelectOfflineProviderDirective extends RdtSelectOfflineDatasourceProviderDirective {
@@ -1335,7 +1013,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
1335
1013
  provide: RdtBaseFormInputComponent,
1336
1014
  useExisting: RdtGovSelectComponent,
1337
1015
  },
1338
- ], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }, { propertyName: "optionEls", predicate: (RdtSelectOptionDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nhideErrors() ? '' : visibleErrors() | rdtFormError; @if(lPos === 'top'){\n<gov-form-label slot=\"left\" [class.warning-color-gov-label]=\"hasError\" size=\"s\"\n >{{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<div\n class=\"gov-form-select gov-form-input\"\n [class.has-clear]=\"showClear() && !!sel\"\n [attr.size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.disabled]=\"disabled()\"\n>\n @if (lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div class=\"element\">\n <button\n #selectButton\n [attr.size]=\"size()\"\n (click)=\"openOverlay()\"\n (keydown)=\"handleButtonKeydown($event)\"\n [disabled]=\"disabled()\"\n class=\"select\"\n type=\"button\"\n (blur)=\"handleButtonBlur()\"\n (focus)=\"onFocus()\"\n >\n <div class=\"scroll-content\" [class.warning-color-text]=\"hasError\">\n @if (sel) {\n {{ sel }}\n } @else if (!disabled() && !readonlyInput()) {\n {{ placeholder() || '&nbsp;' }}\n }\n </div>\n @if (showClear() && sel) {\n <gov-button\n class=\"clear-button\"\n iconStart=\"basic/x\"\n (click)=\"onClearClick($event)\"\n propagate=\"false\"\n buttonType=\"base\"\n color=\"error\"\n [rdtDisabled]=\"disabled()\"\n ></gov-button>\n } @if (loading()) {\n <rdt-spinner />\n } @else { @if(hasError){\n <gov-icon\n name=\"exclamation-lg\"\n class=\"icon-warning\"\n [ngClass]=\"'icon-' + size()\"\n ></gov-icon>\n }\n <gov-icon\n name=\"chevron-down\"\n class=\"icon-arrow\"\n [class.warning-color-icon]=\"hasError\"\n ></gov-icon>\n }\n </button>\n </div>\n @if (lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n</div>\n<ng-template #overlayContainer>\n <div class=\"rdt-gov-select-container\" [attr.data-size]=\"size()\">\n @if (showSearch()) {\n <div class=\"search-container\" [class.loading]=\"loading()\">\n <input\n class=\"gov-form-input\"\n size=\"s\"\n type=\"search\"\n rdtAutofocusOnInit\n [formControl]=\"inputCtrl\"\n (keydown)=\"handleInputKeydown($event)\"\n [placeholder]=\"'RDT_SELECT_ENTER_SEARCH' | rdtTranslate\"\n />\n @if (loading()) {\n <rdt-spinner />\n }\n </div>\n }\n <ul role=\"listbox\" aria-hidden=\"false\" #scrollContainer>\n @for (option of visibleOptions(); track option.id) {\n <li role=\"option\" [attr.aria-selected]=\"option.selected\">\n <button\n tabindex=\"-1\"\n [rdtSelectOption]=\"option.id\"\n (click)=\"selectOption(option.id)\"\n class=\"option\"\n type=\"button\"\n >\n <gov-icon\n name=\"check-lg\"\n [class.invisible]=\"!option.selected\"\n class=\"mr-1 w-4 picked\"\n />\n {{ $any(option.label) | rdtTranslate }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_LOADING_VALUES' | rdtTranslate }}\n </div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_FOUND' | rdtTranslate }}\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_AVAILABLE' | rdtTranslate }}\n </div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;--text-primary: var(--color-primary-50) !important}.icon-warning{width:var(--icon-size)!important;height:var(--icon-size)!important}.icon-xs{--icon-size: 12px}.icon-s{--icon-size: 14px}.icon-m{--icon-size: 16px}.icon-l{--icon-size: 18px}.icon-xl{--icon-size: 20px}rdt-gov-select{display:inline-block;width:100%;max-width:100%}rdt-gov-select .gov-form-select{width:100%}rdt-gov-select .gov-form-select.has-clear .select{padding-right:calc(1.5rem + var(--spacing-s))!important}rdt-gov-select .gov-form-input{border:none!important;background-color:transparent!important}rdt-gov-select .select{display:flex}rdt-gov-select .select rdt-spinner{position:absolute;right:.5rem;width:1rem;height:1rem}rdt-gov-select [size=xs].gov-form-select .select{min-height:var(--height-component-xs);font-size:var(--font-size-body-xs)}rdt-gov-select [size=xs].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=s].gov-form-select .select{min-height:var(--height-component-s);font-size:var(--font-size-body-s)}rdt-gov-select [size=s].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=m].gov-form-select .select{min-height:var(--height-component-m);font-size:var(--font-size-body-m)}rdt-gov-select [size=m].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=l].gov-form-select .select{min-height:var(--height-component-l);font-size:var(--font-size-body-l)}rdt-gov-select [size=l].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xl].gov-form-select .select{min-height:var(--height-component-xl);font-size:var(--font-size-body-xl)}rdt-gov-select [size=xl].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xs].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xs) var(--spacing-xs-nudge)}rdt-gov-select [size=s].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-s) var(--spacing-s)}rdt-gov-select [size=m].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge)}rdt-gov-select [size=l].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-l) var(--spacing-m)}rdt-gov-select [size=xl].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge)}rdt-gov-select .gov-form-select .select{position:relative;border:none;width:100%;border-radius:var(--corner-radius-s);background-color:var(--background-block-primary);font-family:var(--font-family);text-align:left}rdt-gov-select [invalid=true].gov-form-input .select{border-color:var(--background-status-error);color:var(--background-status-error)}rdt-gov-select .icon-arrow{color:var(--text-primary);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:.75rem;width:.75rem;height:.75rem}rdt-gov-select .icon-warning{color:var(--icon-error);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:1.85rem;width:.75rem;height:.75rem}rdt-gov-select .scroll-content{display:flex;align-items:center;color:var(--text-primary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}rdt-gov-select .clear-button{display:flex;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}rdt-gov-select .clear-button button{padding:0!important;min-height:auto!important;--icon-size-xs: 1rem}rdt-gov-select .clear-button gov-icon[slot=left-icon]{left:0!important;position:inherit!important;top:0!important;display:inline!important;transform:none!important}rdt-gov-select .element{max-width:100%}.rdt-gov-select-container{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow:hidden;border:1px solid var(--color-neutral-600);border-radius:0;background-color:var(--background-block-primary)}.rdt-gov-select-container ul{padding-left:0;margin-top:0;margin-bottom:0;list-style:none;max-height:14.0625rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.rdt-gov-select-container ul .option{font-family:var(--font-family);color:var(--text-primary);border:none;display:flex;align-items:center;padding:.75rem .5rem;width:100%;margin:0;background:none;text-align:left}.rdt-gov-select-container ul .option gov-icon{padding-right:var(--spacing-s)}.rdt-gov-select-container ul .option gov-icon.invisible{display:none}.rdt-gov-select-container ul .option:hover{--text-primary: var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--text-primary)}.rdt-gov-select-container .search-spinner{--spinner-size: 1.2rem;position:absolute;right:1rem;top:100%;transform:translateY(calc(var(--spinner-size) / -2))}.rdt-gov-select-container .search-spinner .sis-icon-32-fix{height:var(--spinner-size)}.rdt-gov-select-container .search-container{width:100%;position:relative}.rdt-gov-select-container .search-container input{font-family:var(--font-family);border-radius:0;border-top:1px;border-left:1px;border-right:1px;padding:.75rem .5rem;width:100%;background-color:var(--background-block-primary);color:var(--text-primary)}.rdt-gov-select-container .search-container input:focus-visible{outline:var(.125rem) solid var(--status-focus);outline-offset:0}.rdt-gov-select-container .search-container.loading input::-webkit-search-cancel-button{position:relative;right:1rem}[data-size=xs].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xs)!important;line-height:var(--height-line-xs);padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=xs].rdt-gov-select-container input{font-size:var(--font-size-body-xs)!important;padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=s].rdt-gov-select-container ul li button{font-size:var(--font-size-body-s)!important;line-height:var(--height-line-s);padding:var(--spacing-multiline-vertical-padding-s)}[data-size=s].rdt-gov-select-container input{font-size:var(--font-size-body-s)!important;padding:var(--spacing-multiline-vertical-padding-s)}[data-size=m].rdt-gov-select-container ul li button{font-size:var(--font-size-body-m)!important;line-height:var(--height-line-m);padding:var(--spacing-multiline-vertical-padding-m)}[data-size=m].rdt-gov-select-container input{font-size:var(--font-size-body-m)!important;padding:var(--spacing-multiline-vertical-padding-m)}[data-size=l].rdt-gov-select-container ul li button{font-size:var(--font-size-body-l)!important;line-height:var(--height-line-l);padding:var(--spacing-multiline-vertical-padding-l)}[data-size=l].rdt-gov-select-container input{font-size:var(--font-size-body-l)!important;padding:var(--spacing-multiline-vertical-padding-l)}[data-size=xl].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xl)!important;line-height:var(--height-line-xl);padding:var(--spacing-multiline-vertical-padding-xl)}[data-size=xl].rdt-gov-select-container input{font-size:var(--font-size-body-xl)!important;padding:var(--spacing-multiline-vertical-padding-xl)}.rdt-gov-select-overlay-panel-top .rdt-gov-select-container{display:flex;flex-direction:column-reverse}\n", ".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n"], dependencies: [{ kind: "directive", type: RdtSelectOptionDirective, selector: "[rdtSelectOption]", inputs: ["rdtSelectOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RdtAutoFocusOnInitDirective, selector: "[rdtAutofocusOnInit]" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i1.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i1.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: RdtTranslatePipe, name: "rdtTranslate" }], encapsulation: i0.ViewEncapsulation.None });
1016
+ ], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }, { propertyName: "optionEls", predicate: (RdtSelectOptionDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nhideErrors() ? '' : visibleErrors() | rdtFormError; @if(lPos === 'top' &&\nlabel().length>0){\n<gov-form-label slot=\"left\" [class.warning-color-gov-label]=\"hasError\" size=\"s\"\n >{{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<div\n class=\"gov-form-select gov-form-input\"\n [class.has-clear]=\"showClear() && !!sel\"\n [attr.size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.disabled]=\"disabled()\"\n>\n @if (lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div class=\"element\">\n <button\n #selectButton\n [attr.size]=\"size()\"\n (click)=\"openOverlay()\"\n (keydown)=\"handleButtonKeydown($event)\"\n [disabled]=\"disabled()\"\n class=\"select\"\n type=\"button\"\n (blur)=\"handleButtonBlur()\"\n (focus)=\"onFocus()\"\n >\n <div class=\"scroll-content\" [class.warning-color-text]=\"hasError\">\n @if (sel) {\n {{ sel }}\n } @else if (!disabled() && !readonlyInput()) {\n {{ placeholder() || '&nbsp;' }}\n }\n </div>\n @if (showClear() && sel) {\n <gov-button\n class=\"clear-button\"\n iconStart=\"basic/x\"\n (click)=\"onClearClick($event)\"\n propagate=\"false\"\n buttonType=\"base\"\n color=\"error\"\n [rdtDisabled]=\"disabled()\"\n ></gov-button>\n } @if (loading()) {\n <rdt-spinner />\n } @else { @if(hasError){\n <gov-icon\n name=\"exclamation-lg\"\n class=\"icon-warning\"\n [ngClass]=\"'icon-' + size()\"\n ></gov-icon>\n }\n <gov-icon\n name=\"chevron-down\"\n class=\"icon-arrow\"\n [class.warning-color-icon]=\"hasError\"\n ></gov-icon>\n }\n </button>\n </div>\n @if (lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n</div>\n<ng-template #overlayContainer>\n <div class=\"rdt-gov-select-container\" [attr.data-size]=\"size()\">\n @if (showSearch()) {\n <div class=\"search-container\" [class.loading]=\"loading()\">\n <input\n class=\"gov-form-input\"\n size=\"s\"\n type=\"search\"\n rdtAutofocusOnInit\n [formControl]=\"inputCtrl\"\n (keydown)=\"handleInputKeydown($event)\"\n [placeholder]=\"'RDT_SELECT_ENTER_SEARCH' | rdtTranslate\"\n />\n @if (loading()) {\n <rdt-spinner />\n }\n </div>\n }\n <ul role=\"listbox\" aria-hidden=\"false\" #scrollContainer>\n @for (option of visibleOptions(); track option.id) {\n <li role=\"option\" [attr.aria-selected]=\"option.selected\">\n <button\n tabindex=\"-1\"\n [rdtSelectOption]=\"option.id\"\n (click)=\"selectOption(option.id)\"\n class=\"option\"\n type=\"button\"\n >\n <gov-icon\n name=\"check-lg\"\n [class.invisible]=\"!option.selected\"\n class=\"mr-1 w-4 picked\"\n />\n {{ $any(option.label) | rdtTranslate }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_LOADING_VALUES' | rdtTranslate }}\n </div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_FOUND' | rdtTranslate }}\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_AVAILABLE' | rdtTranslate }}\n </div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;--text-primary: var(--color-primary-50) !important}.icon-warning{width:var(--icon-size)!important;height:var(--icon-size)!important}.icon-xs{--icon-size: 12px}.icon-s{--icon-size: 14px}.icon-m{--icon-size: 16px}.icon-l{--icon-size: 18px}.icon-xl{--icon-size: 20px}rdt-gov-select{display:inline-block;width:100%;max-width:100%}rdt-gov-select .gov-form-select{width:100%}rdt-gov-select .gov-form-select.has-clear .select{padding-right:calc(1.5rem + var(--spacing-s))!important}rdt-gov-select .gov-form-input{border:none!important;background-color:transparent!important}rdt-gov-select .select{display:flex}rdt-gov-select .select rdt-spinner{position:absolute;right:.5rem;width:1rem;height:1rem}rdt-gov-select [size=xs].gov-form-select .select{min-height:var(--height-component-xs);font-size:var(--font-size-body-xs)}rdt-gov-select [size=xs].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=s].gov-form-select .select{min-height:var(--height-component-s);font-size:var(--font-size-body-s)}rdt-gov-select [size=s].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=m].gov-form-select .select{min-height:var(--height-component-m);font-size:var(--font-size-body-m)}rdt-gov-select [size=m].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=l].gov-form-select .select{min-height:var(--height-component-l);font-size:var(--font-size-body-l)}rdt-gov-select [size=l].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xl].gov-form-select .select{min-height:var(--height-component-xl);font-size:var(--font-size-body-xl)}rdt-gov-select [size=xl].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xs].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xs) var(--spacing-xs-nudge)}rdt-gov-select [size=s].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-s) var(--spacing-s)}rdt-gov-select [size=m].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge)}rdt-gov-select [size=l].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-l) var(--spacing-m)}rdt-gov-select [size=xl].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge)}rdt-gov-select .gov-form-select .select{position:relative;border:none;width:100%;border-radius:var(--corner-radius-s);background-color:var(--background-block-primary);font-family:var(--font-family);text-align:left}rdt-gov-select [invalid=true].gov-form-input .select{border-color:var(--background-status-error);color:var(--background-status-error)}rdt-gov-select .icon-arrow{color:var(--text-primary);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:.75rem;width:.75rem;height:.75rem}rdt-gov-select .icon-warning{color:var(--icon-error);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:1.85rem;width:.75rem;height:.75rem}rdt-gov-select .scroll-content{display:flex;align-items:center;color:var(--text-primary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}rdt-gov-select .clear-button{display:flex;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}rdt-gov-select .clear-button button{padding:0!important;min-height:auto!important;--icon-size-xs: 1rem}rdt-gov-select .clear-button gov-icon[slot=left-icon]{left:0!important;position:inherit!important;top:0!important;display:inline!important;transform:none!important}rdt-gov-select .element{max-width:100%}.rdt-gov-select-container{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow:hidden;border:1px solid var(--color-neutral-600);border-radius:0;background-color:var(--background-block-primary)}.rdt-gov-select-container ul{padding-left:0;margin-top:0;margin-bottom:0;list-style:none;max-height:14.0625rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.rdt-gov-select-container ul .option{font-family:var(--font-family);color:var(--text-primary);border:none;display:flex;align-items:center;padding:.75rem .5rem;width:100%;margin:0;background:none;text-align:left}.rdt-gov-select-container ul .option gov-icon{padding-right:var(--spacing-s)}.rdt-gov-select-container ul .option gov-icon.invisible{display:none}.rdt-gov-select-container ul .option:hover{--text-primary: var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--text-primary)}.rdt-gov-select-container .search-spinner{--spinner-size: 1.2rem;position:absolute;right:1rem;top:100%;transform:translateY(calc(var(--spinner-size) / -2))}.rdt-gov-select-container .search-spinner .sis-icon-32-fix{height:var(--spinner-size)}.rdt-gov-select-container .search-container{width:100%;position:relative}.rdt-gov-select-container .search-container input{font-family:var(--font-family);border-radius:0;border-top:1px;border-left:1px;border-right:1px;padding:.75rem .5rem;width:100%;background-color:var(--background-block-primary);color:var(--text-primary)}.rdt-gov-select-container .search-container input:focus-visible{outline:var(.125rem) solid var(--status-focus);outline-offset:0}.rdt-gov-select-container .search-container.loading input::-webkit-search-cancel-button{position:relative;right:1rem}[data-size=xs].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xs)!important;line-height:var(--height-line-xs);padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=xs].rdt-gov-select-container input{font-size:var(--font-size-body-xs)!important;padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=s].rdt-gov-select-container ul li button{font-size:var(--font-size-body-s)!important;line-height:var(--height-line-s);padding:var(--spacing-multiline-vertical-padding-s)}[data-size=s].rdt-gov-select-container input{font-size:var(--font-size-body-s)!important;padding:var(--spacing-multiline-vertical-padding-s)}[data-size=m].rdt-gov-select-container ul li button{font-size:var(--font-size-body-m)!important;line-height:var(--height-line-m);padding:var(--spacing-multiline-vertical-padding-m)}[data-size=m].rdt-gov-select-container input{font-size:var(--font-size-body-m)!important;padding:var(--spacing-multiline-vertical-padding-m)}[data-size=l].rdt-gov-select-container ul li button{font-size:var(--font-size-body-l)!important;line-height:var(--height-line-l);padding:var(--spacing-multiline-vertical-padding-l)}[data-size=l].rdt-gov-select-container input{font-size:var(--font-size-body-l)!important;padding:var(--spacing-multiline-vertical-padding-l)}[data-size=xl].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xl)!important;line-height:var(--height-line-xl);padding:var(--spacing-multiline-vertical-padding-xl)}[data-size=xl].rdt-gov-select-container input{font-size:var(--font-size-body-xl)!important;padding:var(--spacing-multiline-vertical-padding-xl)}.rdt-gov-select-overlay-panel-top .rdt-gov-select-container{display:flex;flex-direction:column-reverse}\n", ".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "directive", type: RdtSelectOptionDirective, selector: "[rdtSelectOption]", inputs: ["rdtSelectOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RdtAutoFocusOnInitDirective, selector: "[rdtAutofocusOnInit]" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i1.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i1.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: RdtTranslatePipe, name: "rdtTranslate" }], encapsulation: i0.ViewEncapsulation.None });
1339
1017
  }
1340
1018
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectComponent, decorators: [{
1341
1019
  type: Component,
@@ -1366,7 +1044,369 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
1366
1044
  provide: RdtBaseFormInputComponent,
1367
1045
  useExisting: RdtGovSelectComponent,
1368
1046
  },
1369
- ], schemas: [CUSTOM_ELEMENTS_SCHEMA], encapsulation: ViewEncapsulation.None, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nhideErrors() ? '' : visibleErrors() | rdtFormError; @if(lPos === 'top'){\n<gov-form-label slot=\"left\" [class.warning-color-gov-label]=\"hasError\" size=\"s\"\n >{{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<div\n class=\"gov-form-select gov-form-input\"\n [class.has-clear]=\"showClear() && !!sel\"\n [attr.size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.disabled]=\"disabled()\"\n>\n @if (lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div class=\"element\">\n <button\n #selectButton\n [attr.size]=\"size()\"\n (click)=\"openOverlay()\"\n (keydown)=\"handleButtonKeydown($event)\"\n [disabled]=\"disabled()\"\n class=\"select\"\n type=\"button\"\n (blur)=\"handleButtonBlur()\"\n (focus)=\"onFocus()\"\n >\n <div class=\"scroll-content\" [class.warning-color-text]=\"hasError\">\n @if (sel) {\n {{ sel }}\n } @else if (!disabled() && !readonlyInput()) {\n {{ placeholder() || '&nbsp;' }}\n }\n </div>\n @if (showClear() && sel) {\n <gov-button\n class=\"clear-button\"\n iconStart=\"basic/x\"\n (click)=\"onClearClick($event)\"\n propagate=\"false\"\n buttonType=\"base\"\n color=\"error\"\n [rdtDisabled]=\"disabled()\"\n ></gov-button>\n } @if (loading()) {\n <rdt-spinner />\n } @else { @if(hasError){\n <gov-icon\n name=\"exclamation-lg\"\n class=\"icon-warning\"\n [ngClass]=\"'icon-' + size()\"\n ></gov-icon>\n }\n <gov-icon\n name=\"chevron-down\"\n class=\"icon-arrow\"\n [class.warning-color-icon]=\"hasError\"\n ></gov-icon>\n }\n </button>\n </div>\n @if (lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n</div>\n<ng-template #overlayContainer>\n <div class=\"rdt-gov-select-container\" [attr.data-size]=\"size()\">\n @if (showSearch()) {\n <div class=\"search-container\" [class.loading]=\"loading()\">\n <input\n class=\"gov-form-input\"\n size=\"s\"\n type=\"search\"\n rdtAutofocusOnInit\n [formControl]=\"inputCtrl\"\n (keydown)=\"handleInputKeydown($event)\"\n [placeholder]=\"'RDT_SELECT_ENTER_SEARCH' | rdtTranslate\"\n />\n @if (loading()) {\n <rdt-spinner />\n }\n </div>\n }\n <ul role=\"listbox\" aria-hidden=\"false\" #scrollContainer>\n @for (option of visibleOptions(); track option.id) {\n <li role=\"option\" [attr.aria-selected]=\"option.selected\">\n <button\n tabindex=\"-1\"\n [rdtSelectOption]=\"option.id\"\n (click)=\"selectOption(option.id)\"\n class=\"option\"\n type=\"button\"\n >\n <gov-icon\n name=\"check-lg\"\n [class.invisible]=\"!option.selected\"\n class=\"mr-1 w-4 picked\"\n />\n {{ $any(option.label) | rdtTranslate }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_LOADING_VALUES' | rdtTranslate }}\n </div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_FOUND' | rdtTranslate }}\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_AVAILABLE' | rdtTranslate }}\n </div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;--text-primary: var(--color-primary-50) !important}.icon-warning{width:var(--icon-size)!important;height:var(--icon-size)!important}.icon-xs{--icon-size: 12px}.icon-s{--icon-size: 14px}.icon-m{--icon-size: 16px}.icon-l{--icon-size: 18px}.icon-xl{--icon-size: 20px}rdt-gov-select{display:inline-block;width:100%;max-width:100%}rdt-gov-select .gov-form-select{width:100%}rdt-gov-select .gov-form-select.has-clear .select{padding-right:calc(1.5rem + var(--spacing-s))!important}rdt-gov-select .gov-form-input{border:none!important;background-color:transparent!important}rdt-gov-select .select{display:flex}rdt-gov-select .select rdt-spinner{position:absolute;right:.5rem;width:1rem;height:1rem}rdt-gov-select [size=xs].gov-form-select .select{min-height:var(--height-component-xs);font-size:var(--font-size-body-xs)}rdt-gov-select [size=xs].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=s].gov-form-select .select{min-height:var(--height-component-s);font-size:var(--font-size-body-s)}rdt-gov-select [size=s].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=m].gov-form-select .select{min-height:var(--height-component-m);font-size:var(--font-size-body-m)}rdt-gov-select [size=m].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=l].gov-form-select .select{min-height:var(--height-component-l);font-size:var(--font-size-body-l)}rdt-gov-select [size=l].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xl].gov-form-select .select{min-height:var(--height-component-xl);font-size:var(--font-size-body-xl)}rdt-gov-select [size=xl].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xs].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xs) var(--spacing-xs-nudge)}rdt-gov-select [size=s].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-s) var(--spacing-s)}rdt-gov-select [size=m].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge)}rdt-gov-select [size=l].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-l) var(--spacing-m)}rdt-gov-select [size=xl].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge)}rdt-gov-select .gov-form-select .select{position:relative;border:none;width:100%;border-radius:var(--corner-radius-s);background-color:var(--background-block-primary);font-family:var(--font-family);text-align:left}rdt-gov-select [invalid=true].gov-form-input .select{border-color:var(--background-status-error);color:var(--background-status-error)}rdt-gov-select .icon-arrow{color:var(--text-primary);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:.75rem;width:.75rem;height:.75rem}rdt-gov-select .icon-warning{color:var(--icon-error);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:1.85rem;width:.75rem;height:.75rem}rdt-gov-select .scroll-content{display:flex;align-items:center;color:var(--text-primary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}rdt-gov-select .clear-button{display:flex;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}rdt-gov-select .clear-button button{padding:0!important;min-height:auto!important;--icon-size-xs: 1rem}rdt-gov-select .clear-button gov-icon[slot=left-icon]{left:0!important;position:inherit!important;top:0!important;display:inline!important;transform:none!important}rdt-gov-select .element{max-width:100%}.rdt-gov-select-container{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow:hidden;border:1px solid var(--color-neutral-600);border-radius:0;background-color:var(--background-block-primary)}.rdt-gov-select-container ul{padding-left:0;margin-top:0;margin-bottom:0;list-style:none;max-height:14.0625rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.rdt-gov-select-container ul .option{font-family:var(--font-family);color:var(--text-primary);border:none;display:flex;align-items:center;padding:.75rem .5rem;width:100%;margin:0;background:none;text-align:left}.rdt-gov-select-container ul .option gov-icon{padding-right:var(--spacing-s)}.rdt-gov-select-container ul .option gov-icon.invisible{display:none}.rdt-gov-select-container ul .option:hover{--text-primary: var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--text-primary)}.rdt-gov-select-container .search-spinner{--spinner-size: 1.2rem;position:absolute;right:1rem;top:100%;transform:translateY(calc(var(--spinner-size) / -2))}.rdt-gov-select-container .search-spinner .sis-icon-32-fix{height:var(--spinner-size)}.rdt-gov-select-container .search-container{width:100%;position:relative}.rdt-gov-select-container .search-container input{font-family:var(--font-family);border-radius:0;border-top:1px;border-left:1px;border-right:1px;padding:.75rem .5rem;width:100%;background-color:var(--background-block-primary);color:var(--text-primary)}.rdt-gov-select-container .search-container input:focus-visible{outline:var(.125rem) solid var(--status-focus);outline-offset:0}.rdt-gov-select-container .search-container.loading input::-webkit-search-cancel-button{position:relative;right:1rem}[data-size=xs].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xs)!important;line-height:var(--height-line-xs);padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=xs].rdt-gov-select-container input{font-size:var(--font-size-body-xs)!important;padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=s].rdt-gov-select-container ul li button{font-size:var(--font-size-body-s)!important;line-height:var(--height-line-s);padding:var(--spacing-multiline-vertical-padding-s)}[data-size=s].rdt-gov-select-container input{font-size:var(--font-size-body-s)!important;padding:var(--spacing-multiline-vertical-padding-s)}[data-size=m].rdt-gov-select-container ul li button{font-size:var(--font-size-body-m)!important;line-height:var(--height-line-m);padding:var(--spacing-multiline-vertical-padding-m)}[data-size=m].rdt-gov-select-container input{font-size:var(--font-size-body-m)!important;padding:var(--spacing-multiline-vertical-padding-m)}[data-size=l].rdt-gov-select-container ul li button{font-size:var(--font-size-body-l)!important;line-height:var(--height-line-l);padding:var(--spacing-multiline-vertical-padding-l)}[data-size=l].rdt-gov-select-container input{font-size:var(--font-size-body-l)!important;padding:var(--spacing-multiline-vertical-padding-l)}[data-size=xl].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xl)!important;line-height:var(--height-line-xl);padding:var(--spacing-multiline-vertical-padding-xl)}[data-size=xl].rdt-gov-select-container input{font-size:var(--font-size-body-xl)!important;padding:var(--spacing-multiline-vertical-padding-xl)}.rdt-gov-select-overlay-panel-top .rdt-gov-select-container{display:flex;flex-direction:column-reverse}\n", ".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n"] }]
1047
+ ], schemas: [CUSTOM_ELEMENTS_SCHEMA], encapsulation: ViewEncapsulation.None, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nhideErrors() ? '' : visibleErrors() | rdtFormError; @if(lPos === 'top' &&\nlabel().length>0){\n<gov-form-label slot=\"left\" [class.warning-color-gov-label]=\"hasError\" size=\"s\"\n >{{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<div\n class=\"gov-form-select gov-form-input\"\n [class.has-clear]=\"showClear() && !!sel\"\n [attr.size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.disabled]=\"disabled()\"\n>\n @if (lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div class=\"element\">\n <button\n #selectButton\n [attr.size]=\"size()\"\n (click)=\"openOverlay()\"\n (keydown)=\"handleButtonKeydown($event)\"\n [disabled]=\"disabled()\"\n class=\"select\"\n type=\"button\"\n (blur)=\"handleButtonBlur()\"\n (focus)=\"onFocus()\"\n >\n <div class=\"scroll-content\" [class.warning-color-text]=\"hasError\">\n @if (sel) {\n {{ sel }}\n } @else if (!disabled() && !readonlyInput()) {\n {{ placeholder() || '&nbsp;' }}\n }\n </div>\n @if (showClear() && sel) {\n <gov-button\n class=\"clear-button\"\n iconStart=\"basic/x\"\n (click)=\"onClearClick($event)\"\n propagate=\"false\"\n buttonType=\"base\"\n color=\"error\"\n [rdtDisabled]=\"disabled()\"\n ></gov-button>\n } @if (loading()) {\n <rdt-spinner />\n } @else { @if(hasError){\n <gov-icon\n name=\"exclamation-lg\"\n class=\"icon-warning\"\n [ngClass]=\"'icon-' + size()\"\n ></gov-icon>\n }\n <gov-icon\n name=\"chevron-down\"\n class=\"icon-arrow\"\n [class.warning-color-icon]=\"hasError\"\n ></gov-icon>\n }\n </button>\n </div>\n @if (lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n</div>\n<ng-template #overlayContainer>\n <div class=\"rdt-gov-select-container\" [attr.data-size]=\"size()\">\n @if (showSearch()) {\n <div class=\"search-container\" [class.loading]=\"loading()\">\n <input\n class=\"gov-form-input\"\n size=\"s\"\n type=\"search\"\n rdtAutofocusOnInit\n [formControl]=\"inputCtrl\"\n (keydown)=\"handleInputKeydown($event)\"\n [placeholder]=\"'RDT_SELECT_ENTER_SEARCH' | rdtTranslate\"\n />\n @if (loading()) {\n <rdt-spinner />\n }\n </div>\n }\n <ul role=\"listbox\" aria-hidden=\"false\" #scrollContainer>\n @for (option of visibleOptions(); track option.id) {\n <li role=\"option\" [attr.aria-selected]=\"option.selected\">\n <button\n tabindex=\"-1\"\n [rdtSelectOption]=\"option.id\"\n (click)=\"selectOption(option.id)\"\n class=\"option\"\n type=\"button\"\n >\n <gov-icon\n name=\"check-lg\"\n [class.invisible]=\"!option.selected\"\n class=\"mr-1 w-4 picked\"\n />\n {{ $any(option.label) | rdtTranslate }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_LOADING_VALUES' | rdtTranslate }}\n </div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_FOUND' | rdtTranslate }}\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n {{ 'RDT_GOV_SELECT_NO_VALUES_AVAILABLE' | rdtTranslate }}\n </div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;--text-primary: var(--color-primary-50) !important}.icon-warning{width:var(--icon-size)!important;height:var(--icon-size)!important}.icon-xs{--icon-size: 12px}.icon-s{--icon-size: 14px}.icon-m{--icon-size: 16px}.icon-l{--icon-size: 18px}.icon-xl{--icon-size: 20px}rdt-gov-select{display:inline-block;width:100%;max-width:100%}rdt-gov-select .gov-form-select{width:100%}rdt-gov-select .gov-form-select.has-clear .select{padding-right:calc(1.5rem + var(--spacing-s))!important}rdt-gov-select .gov-form-input{border:none!important;background-color:transparent!important}rdt-gov-select .select{display:flex}rdt-gov-select .select rdt-spinner{position:absolute;right:.5rem;width:1rem;height:1rem}rdt-gov-select [size=xs].gov-form-select .select{min-height:var(--height-component-xs);font-size:var(--font-size-body-xs)}rdt-gov-select [size=xs].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=s].gov-form-select .select{min-height:var(--height-component-s);font-size:var(--font-size-body-s)}rdt-gov-select [size=s].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=m].gov-form-select .select{min-height:var(--height-component-m);font-size:var(--font-size-body-m)}rdt-gov-select [size=m].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=l].gov-form-select .select{min-height:var(--height-component-l);font-size:var(--font-size-body-l)}rdt-gov-select [size=l].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xl].gov-form-select .select{min-height:var(--height-component-xl);font-size:var(--font-size-body-xl)}rdt-gov-select [size=xl].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xs].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xs) var(--spacing-xs-nudge)}rdt-gov-select [size=s].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-s) var(--spacing-s)}rdt-gov-select [size=m].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge)}rdt-gov-select [size=l].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-l) var(--spacing-m)}rdt-gov-select [size=xl].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge)}rdt-gov-select .gov-form-select .select{position:relative;border:none;width:100%;border-radius:var(--corner-radius-s);background-color:var(--background-block-primary);font-family:var(--font-family);text-align:left}rdt-gov-select [invalid=true].gov-form-input .select{border-color:var(--background-status-error);color:var(--background-status-error)}rdt-gov-select .icon-arrow{color:var(--text-primary);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:.75rem;width:.75rem;height:.75rem}rdt-gov-select .icon-warning{color:var(--icon-error);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:1.85rem;width:.75rem;height:.75rem}rdt-gov-select .scroll-content{display:flex;align-items:center;color:var(--text-primary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}rdt-gov-select .clear-button{display:flex;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}rdt-gov-select .clear-button button{padding:0!important;min-height:auto!important;--icon-size-xs: 1rem}rdt-gov-select .clear-button gov-icon[slot=left-icon]{left:0!important;position:inherit!important;top:0!important;display:inline!important;transform:none!important}rdt-gov-select .element{max-width:100%}.rdt-gov-select-container{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow:hidden;border:1px solid var(--color-neutral-600);border-radius:0;background-color:var(--background-block-primary)}.rdt-gov-select-container ul{padding-left:0;margin-top:0;margin-bottom:0;list-style:none;max-height:14.0625rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.rdt-gov-select-container ul .option{font-family:var(--font-family);color:var(--text-primary);border:none;display:flex;align-items:center;padding:.75rem .5rem;width:100%;margin:0;background:none;text-align:left}.rdt-gov-select-container ul .option gov-icon{padding-right:var(--spacing-s)}.rdt-gov-select-container ul .option gov-icon.invisible{display:none}.rdt-gov-select-container ul .option:hover{--text-primary: var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--text-primary)}.rdt-gov-select-container .search-spinner{--spinner-size: 1.2rem;position:absolute;right:1rem;top:100%;transform:translateY(calc(var(--spinner-size) / -2))}.rdt-gov-select-container .search-spinner .sis-icon-32-fix{height:var(--spinner-size)}.rdt-gov-select-container .search-container{width:100%;position:relative}.rdt-gov-select-container .search-container input{font-family:var(--font-family);border-radius:0;border-top:1px;border-left:1px;border-right:1px;padding:.75rem .5rem;width:100%;background-color:var(--background-block-primary);color:var(--text-primary)}.rdt-gov-select-container .search-container input:focus-visible{outline:var(.125rem) solid var(--status-focus);outline-offset:0}.rdt-gov-select-container .search-container.loading input::-webkit-search-cancel-button{position:relative;right:1rem}[data-size=xs].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xs)!important;line-height:var(--height-line-xs);padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=xs].rdt-gov-select-container input{font-size:var(--font-size-body-xs)!important;padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=s].rdt-gov-select-container ul li button{font-size:var(--font-size-body-s)!important;line-height:var(--height-line-s);padding:var(--spacing-multiline-vertical-padding-s)}[data-size=s].rdt-gov-select-container input{font-size:var(--font-size-body-s)!important;padding:var(--spacing-multiline-vertical-padding-s)}[data-size=m].rdt-gov-select-container ul li button{font-size:var(--font-size-body-m)!important;line-height:var(--height-line-m);padding:var(--spacing-multiline-vertical-padding-m)}[data-size=m].rdt-gov-select-container input{font-size:var(--font-size-body-m)!important;padding:var(--spacing-multiline-vertical-padding-m)}[data-size=l].rdt-gov-select-container ul li button{font-size:var(--font-size-body-l)!important;line-height:var(--height-line-l);padding:var(--spacing-multiline-vertical-padding-l)}[data-size=l].rdt-gov-select-container input{font-size:var(--font-size-body-l)!important;padding:var(--spacing-multiline-vertical-padding-l)}[data-size=xl].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xl)!important;line-height:var(--height-line-xl);padding:var(--spacing-multiline-vertical-padding-xl)}[data-size=xl].rdt-gov-select-container input{font-size:var(--font-size-body-xl)!important;padding:var(--spacing-multiline-vertical-padding-xl)}.rdt-gov-select-overlay-panel-top .rdt-gov-select-container{display:flex;flex-direction:column-reverse}\n", ".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"] }]
1048
+ }] });
1049
+
1050
+ function provideNgrdtGov(options = {}) {
1051
+ return [
1052
+ importProvidersFrom(GovDesignSystemModule),
1053
+ {
1054
+ provide: RDT_ICON_BASE_PROVIDER,
1055
+ useValue: RdtGovIconComponent,
1056
+ },
1057
+ {
1058
+ provide: RDT_CHECKBOX_BASE_PROVIDER,
1059
+ useValue: RdtGovCheckboxComponent,
1060
+ },
1061
+ {
1062
+ provide: RDT_BUTTON_BASE_PROVIDER,
1063
+ useValue: RdtGovButtonComponent,
1064
+ },
1065
+ {
1066
+ provide: RDT_NUMERIC_INPUT_BASE_PROVIDER,
1067
+ useValue: RdtGovNumberInputComponent,
1068
+ },
1069
+ {
1070
+ provide: RDT_SELECT_BASE_PROVIDER,
1071
+ useValue: RdtGovSelectComponent,
1072
+ },
1073
+ {
1074
+ provide: RDT_ICON_REGISTRY_PROVIDER,
1075
+ useValue: {
1076
+ [RdtIcon.MenuArrowRight]: 'components/chevron-right',
1077
+ [RdtIcon.MenuArrowDown]: 'components/chevron-down',
1078
+ [RdtIcon.SkipDoubleLeft]: 'components/chevron-double-left',
1079
+ [RdtIcon.SkipDoubleRight]: 'components/chevron-double-right',
1080
+ [RdtIcon.SkipLeft]: 'components/chevron-left',
1081
+ [RdtIcon.SkipRight]: 'components/chevron-right',
1082
+ [RdtIcon.SortAsc]: 'bs/sort-down',
1083
+ [RdtIcon.SortDesc]: 'bs/sort-up',
1084
+ [RdtIcon.SortEnabled]: 'bs/filter',
1085
+ },
1086
+ },
1087
+ {
1088
+ provide: RDT_GOV_NOTIFICATION_CONFIG_PROVIDER,
1089
+ useValue: {
1090
+ duration: 3000,
1091
+ positionVert: 'top',
1092
+ positionHoriz: 'right',
1093
+ },
1094
+ },
1095
+ {
1096
+ provide: RDT_NOTIFICATION_SERVICE_PROVIDER,
1097
+ useFactory: () => inject(RdtGovNotificationService),
1098
+ },
1099
+ {
1100
+ provide: RDT_ALERT_DIALOG_PROVIDER,
1101
+ useValue: {
1102
+ minHeight: '250px',
1103
+ },
1104
+ },
1105
+ {
1106
+ provide: RDT_CONFIRM_DIALOG_PROVIDER,
1107
+ useValue: {
1108
+ minHeight: '250px',
1109
+ },
1110
+ },
1111
+ {
1112
+ provide: RDT_BASE_DIALOG_PROVIDER,
1113
+ useValue: {
1114
+ isDraggable: false,
1115
+ minHeight: '400px',
1116
+ },
1117
+ },
1118
+ {
1119
+ provide: RDT_SPINNER_BASE_PROVIDER,
1120
+ useValue: RdtGovSpinnerComponent,
1121
+ },
1122
+ { provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' },
1123
+ { provide: LOCALE_ID, useValue: 'cs-CZ' },
1124
+ { provide: MatDatepickerIntl, useClass: RdtDatepickerIntl },
1125
+ {
1126
+ provide: RDT_FORM_ERROR_CODES_PROVIDER,
1127
+ useValue: defaultRdtFormErrorCodes,
1128
+ },
1129
+ provideDateFnsAdapter(),
1130
+ ];
1131
+ }
1132
+
1133
+ function initRdtGov(config = {}) {
1134
+ const defaultConfig = {
1135
+ iconsPath: 'icons',
1136
+ };
1137
+ window.GOV_DS_CONFIG = { ...defaultConfig, ...config };
1138
+ defineCustomElements(window);
1139
+ }
1140
+
1141
+ class RdtGovDateComponent extends RdtDateComponent {
1142
+ translateService = inject(RdtTranslateService);
1143
+ dateAdapter = inject(DateAdapter);
1144
+ dateInput = viewChild('dateInput');
1145
+ timeInput = viewChild('timeInput');
1146
+ size = input('s');
1147
+ labelPositionInput = input('top', {
1148
+ alias: 'labelPosition',
1149
+ });
1150
+ labelPosition = linkedSignal(() => this.labelPositionInput());
1151
+ showSeconds = input(false, { transform: booleanAttribute });
1152
+ stepInput = input(undefined, {
1153
+ alias: 'step',
1154
+ transform: numberAttribute,
1155
+ });
1156
+ step = linkedSignal(() => {
1157
+ return this.stepInput() ?? (this.showSeconds() ? 1 : undefined);
1158
+ });
1159
+ dateInputFocused = false;
1160
+ // Current value of physical date input field
1161
+ dateInputValue = signal(null);
1162
+ // Current value of physical time input field
1163
+ timeInputValue = signal('');
1164
+ internalTimeFormat = computed(() => this.showSeconds() ? 'HH:mm:ss' : 'HH:mm');
1165
+ defaultTime = computed(() => this.showSeconds() ? '00:00:00' : '00:00');
1166
+ localeUsed = computed(() => this.translateService.currentFormat().dateFnsLocale);
1167
+ hasDate = computed(() => this.type() !== 'time');
1168
+ hasTime = computed(() => this.type() !== 'date');
1169
+ internalTimeValue = computed(() => {
1170
+ const value = this.internalValue();
1171
+ if (!value) {
1172
+ return '';
1173
+ }
1174
+ const time = this.formatTime(value);
1175
+ // This condition prevents adding zeros for seconds while typing
1176
+ // E.g. 12:34 won't get changed to 12:34:00 automatically and it's valid value
1177
+ if (this.timeInputValue() !== time &&
1178
+ this.isValidTime(this.timeInputValue()) &&
1179
+ time.startsWith(this.timeInputValue())) {
1180
+ return this.timeInputValue();
1181
+ }
1182
+ return time;
1183
+ });
1184
+ isEmpty(value) {
1185
+ return value === null;
1186
+ }
1187
+ // Update DateAdapter locale when current locale changes
1188
+ dateFnsLocaleEffect = effect(() => {
1189
+ this.dateAdapter.setLocale(this.localeUsed());
1190
+ });
1191
+ toExternalValue(internalValue) {
1192
+ if (!internalValue) {
1193
+ return null;
1194
+ }
1195
+ return this.dateAdapter.format(internalValue, this.formControlFormat());
1196
+ }
1197
+ toInternalValue(externalValue) {
1198
+ if (!externalValue) {
1199
+ return null;
1200
+ }
1201
+ const parsed = this.dateAdapter.parse(externalValue, this.formControlFormat());
1202
+ if (!isValid(parsed)) {
1203
+ console.error(`Date field labeled "${this.label()}" was set invalid value "${externalValue}". Expected FormControl format: "${this.formControlFormat()}"`);
1204
+ return null;
1205
+ }
1206
+ return parsed;
1207
+ }
1208
+ /**
1209
+ * Prevents unnecessary change emissions on FormControl
1210
+ * @returns True if both Date objects represent the same point in time
1211
+ */
1212
+ areInternalValuesEqual(value1, value2) {
1213
+ if (value1 === null && value2 === null) {
1214
+ return true;
1215
+ }
1216
+ if (value1 === null || value2 === null) {
1217
+ return false;
1218
+ }
1219
+ return value1.getTime() === value2.getTime();
1220
+ }
1221
+ writeValue(value) {
1222
+ super.writeValue(value);
1223
+ const internalValue = this.toInternalValue(value);
1224
+ // Update physical input fields when FormControl value changes
1225
+ // Necessary before user interaction
1226
+ if (internalValue) {
1227
+ this.dateInputValue.set(internalValue);
1228
+ this.timeInputValue.set(this.formatTime(internalValue));
1229
+ }
1230
+ else {
1231
+ this.dateInputValue.set(null);
1232
+ this.timeInputValue.set('');
1233
+ }
1234
+ }
1235
+ onDateInput(event) {
1236
+ const dateValue = event.value;
1237
+ if (!dateValue) {
1238
+ // Clear FormControl value when date is invalid
1239
+ // Keep internal state
1240
+ this.dateInputValue.set(null);
1241
+ this.onChange(null);
1242
+ }
1243
+ else {
1244
+ this.dateInputValue.set(dateValue);
1245
+ this.onDateChange(dateValue);
1246
+ }
1247
+ }
1248
+ onTimeChange(event) {
1249
+ const value = event.target.value;
1250
+ let internalValue = this.internalValue();
1251
+ if (!this.hasDate()) {
1252
+ internalValue ??= this.emptyTimeDate;
1253
+ }
1254
+ const dateOk = internalValue && (this.dateInputValue() || !this.hasDate());
1255
+ if (this.isValidTime(value) && internalValue && dateOk) {
1256
+ const newDate = this.populateTime(new Date(internalValue), value);
1257
+ this.onInternalValueChange(newDate);
1258
+ }
1259
+ this.timeInputValue.set(value);
1260
+ }
1261
+ onDateChange(date) {
1262
+ const value = date ?? null;
1263
+ const internalValueOld = this.internalValue();
1264
+ const timeInputValue = this.timeInputValue();
1265
+ // If both newly selected date and time input are valid, combine them
1266
+ if (value && timeInputValue) {
1267
+ this.populateTime(value, timeInputValue);
1268
+ }
1269
+ // Set internal value
1270
+ this.onInternalValueChange(value);
1271
+ // In case date input is focused, revert internal value
1272
+ // to original value before Date change event
1273
+ // while keeping external value and FormControl value updated
1274
+ // This prevents unexpected changes to date and time inputs while typing
1275
+ // New internal value will be set on date input blur
1276
+ if (this.dateInputFocused) {
1277
+ this.internalValue.set(internalValueOld);
1278
+ }
1279
+ }
1280
+ onDateInputFocus() {
1281
+ this.dateInputFocused = true;
1282
+ this.onFocus();
1283
+ }
1284
+ onDateInputBlur() {
1285
+ this.dateInputFocused = false;
1286
+ // Set internal value to the combined date and time from inputs
1287
+ // In case date and/or time input is invalid, internal value will not change
1288
+ const dateTimeFromInputs = this.getDateTimeFromInputs();
1289
+ if (dateTimeFromInputs) {
1290
+ this.onInternalValueChange(dateTimeFromInputs);
1291
+ }
1292
+ this.onBlur();
1293
+ }
1294
+ /**
1295
+ * Returns Date object constructed from current date and time input values
1296
+ * or null if either input is invalid
1297
+ */
1298
+ getDateTimeFromInputs() {
1299
+ const dateInputValue = this.dateInputValue();
1300
+ const timeInputValue = this.timeInputValue();
1301
+ if (!timeInputValue || !dateInputValue) {
1302
+ return null;
1303
+ }
1304
+ else {
1305
+ const newInternal = new Date(dateInputValue);
1306
+ this.populateTime(newInternal, timeInputValue);
1307
+ return newInternal;
1308
+ }
1309
+ }
1310
+ onTimeInputFocus() {
1311
+ this.onFocus();
1312
+ }
1313
+ onTimeInputBlur() {
1314
+ const timeInputEl = this.timeInput()?.nativeElement;
1315
+ if (!timeInputEl) {
1316
+ return;
1317
+ }
1318
+ const value = timeInputEl?.value ?? '';
1319
+ // Emit null value to FormControl in case time is blurred while invalid (empty slots), ,
1320
+ // Keep internal state intacted to prevent unexpected changes to input fields
1321
+ if (!value) {
1322
+ this.onChange(null);
1323
+ }
1324
+ this.onBlur();
1325
+ }
1326
+ /**
1327
+ * Helper function to format a Date object to a time string
1328
+ */
1329
+ formatTime(date) {
1330
+ if (this.type() === 'date') {
1331
+ return this.defaultTime();
1332
+ }
1333
+ try {
1334
+ const locale = this.localeUsed();
1335
+ const timeFormat = this.internalTimeFormat();
1336
+ return format(date, timeFormat, { locale });
1337
+ }
1338
+ catch (e) {
1339
+ console.log('Error formatting date: ', date, 'target format: ', this.internalTimeFormat());
1340
+ console.error(e);
1341
+ return this.defaultTime();
1342
+ }
1343
+ }
1344
+ /**
1345
+ * Helper function to populate a Date object with time from a string
1346
+ * in the format HH:mm or HH:mm:ss
1347
+ */
1348
+ populateTime(date, timeString) {
1349
+ const timeParts = timeString.split(':').map((part) => parseInt(part, 10));
1350
+ date.setHours(timeParts[0] || 0, timeParts[1] || 0, timeParts[2] || 0, 0);
1351
+ return date;
1352
+ }
1353
+ isValidTime(value) {
1354
+ if (!value) {
1355
+ return false;
1356
+ }
1357
+ return /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d{1,3})?)?$/.test(value);
1358
+ }
1359
+ async focus() {
1360
+ this.dateInput()?.nativeElement.focus();
1361
+ }
1362
+ canFocus() {
1363
+ return new Promise((resolve) => {
1364
+ setTimeout(() => {
1365
+ const elRef = this.dateInput();
1366
+ resolve(!!elRef?.nativeElement);
1367
+ }, 1);
1368
+ });
1369
+ }
1370
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1371
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovDateComponent, isStandalone: true, selector: "rdt-gov-date", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, stepInput: { classPropertyName: "stepInput", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1372
+ {
1373
+ provide: NG_VALUE_ACCESSOR,
1374
+ useExisting: RdtGovDateComponent,
1375
+ multi: true,
1376
+ },
1377
+ {
1378
+ provide: RdtBaseFormInputComponent,
1379
+ useExisting: RdtGovDateComponent,
1380
+ },
1381
+ {
1382
+ provide: RdtDateComponent,
1383
+ useExisting: RdtGovDateComponent,
1384
+ },
1385
+ ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n @if(lPos) {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div\n class=\"rdt-date-field-wrapper gov-form-input\"\n [attr.size]=\"size()\"\n [attr.disabled]=\"disabled() ? true : undefined\"\n >\n @if(type() === 'date' || type() === 'datetime-local'){\n <div class=\"rdt-date-field-position date\">\n <input\n class=\"rdt-date-field\"\n #dateInput\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [matDatepicker]=\"picker\"\n (focus)=\"onDateInputFocus()\"\n (blur)=\"onDateInputBlur()\"\n (dateInput)=\"onDateInput($event)\"\n (dateChange)=\"onDateInput($event)\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n <mat-datepicker-toggle\n [attr.size]=\"size()\"\n matIconSuffix\n [for]=\"picker\"\n [disableRipple]=\"true\"\n >\n <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </div>\n } @if(type() === 'datetime-local' || type() === 'time'){\n <div class=\"rdt-date-field-position time\">\n <input\n class=\"rdt-date-field\"\n type=\"time\"\n #timeInput\n (input)=\"onTimeChange($event)\"\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [step]=\"step()\"\n [attr.readonly]=\"readonlyInput() ? true : undefined\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalTimeValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (focus)=\"onTimeInputFocus()\"\n (blur)=\"onTimeInputBlur()\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n </div>\n }\n </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n", ".rdt-date-wrapper{width:100%}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error));--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1386
+ }
1387
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, decorators: [{
1388
+ type: Component,
1389
+ args: [{ selector: 'rdt-gov-date', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
1390
+ RdtFormErrorPipe,
1391
+ MatDatepickerModule,
1392
+ MatInputModule,
1393
+ ReactiveFormsModule,
1394
+ FormsModule,
1395
+ ], providers: [
1396
+ {
1397
+ provide: NG_VALUE_ACCESSOR,
1398
+ useExisting: RdtGovDateComponent,
1399
+ multi: true,
1400
+ },
1401
+ {
1402
+ provide: RdtBaseFormInputComponent,
1403
+ useExisting: RdtGovDateComponent,
1404
+ },
1405
+ {
1406
+ provide: RdtDateComponent,
1407
+ useExisting: RdtGovDateComponent,
1408
+ },
1409
+ ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n @if(lPos) {\n <p\n class=\"gov-form-label__label s_label\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n }\n <div\n class=\"rdt-date-field-wrapper gov-form-input\"\n [attr.size]=\"size()\"\n [attr.disabled]=\"disabled() ? true : undefined\"\n >\n @if(type() === 'date' || type() === 'datetime-local'){\n <div class=\"rdt-date-field-position date\">\n <input\n class=\"rdt-date-field\"\n #dateInput\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [matDatepicker]=\"picker\"\n (focus)=\"onDateInputFocus()\"\n (blur)=\"onDateInputBlur()\"\n (dateInput)=\"onDateInput($event)\"\n (dateChange)=\"onDateInput($event)\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n <mat-datepicker-toggle\n [attr.size]=\"size()\"\n matIconSuffix\n [for]=\"picker\"\n [disableRipple]=\"true\"\n >\n <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </div>\n } @if(type() === 'datetime-local' || type() === 'time'){\n <div class=\"rdt-date-field-position time\">\n <input\n class=\"rdt-date-field\"\n type=\"time\"\n #timeInput\n (input)=\"onTimeChange($event)\"\n matInput\n [attr.invalid]=\"invalid() && touched()\"\n [step]=\"step()\"\n [attr.readonly]=\"readonlyInput() ? true : undefined\"\n [attr.size]=\"size()\"\n [name]=\"name()\"\n [value]=\"internalTimeValue()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (focus)=\"onTimeInputFocus()\"\n (blur)=\"onTimeInputBlur()\"\n />\n <div class=\"gov-form-input__icons\">\n <gov-icon\n class=\"validation-icon gov-icon\"\n name=\"exclamation-lg\"\n type=\"components\"\n [attr.size]=\"size()\"\n >\n </gov-icon>\n </div>\n </div>\n }\n </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n", ".rdt-date-wrapper{width:100%}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error));--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"] }]
1370
1410
  }] });
1371
1411
 
1372
1412
  class RdtGovTextInputComponent extends RdtTextInputComponent {
@@ -1440,7 +1480,7 @@ class RdtGovTextInputComponent extends RdtTextInputComponent {
1440
1480
  provide: RdtBaseFormInputComponent,
1441
1481
  useExisting: RdtGovTextInputComponent,
1442
1482
  },
1443
- ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n [inputType]=\"type()\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength()\"\n [maxlength]=\"maxlength()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInternalValueChange($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1483
+ ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n [inputType]=\"type()\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength()\"\n [maxlength]=\"maxlength()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInternalValueChange($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1444
1484
  }
1445
1485
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovTextInputComponent, decorators: [{
1446
1486
  type: Component,
@@ -1454,7 +1494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
1454
1494
  provide: RdtBaseFormInputComponent,
1455
1495
  useExisting: RdtGovTextInputComponent,
1456
1496
  },
1457
- ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n [inputType]=\"type()\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength()\"\n [maxlength]=\"maxlength()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInternalValueChange($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}\n"] }]
1497
+ ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n}\n<gov-form-input\n #govInput\n [inputType]=\"type()\"\n [size]=\"size()\"\n [value]=\"internalValue()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength()\"\n [maxlength]=\"maxlength()\"\n [invalid]=\"invalid() && touched()\"\n [attr.invalid]=\"invalid() && touched()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [attr.disabled]=\"disabled()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-input)=\"onInternalValueChange($event.detail.value)\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n>\n @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"prefix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if(lPos === 'right') {\n <p\n class=\"gov-form-label__label s_label\"\n slot=\"sufix\"\n [class.warning-color-text]=\"hasError\"\n >\n {{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }\n </p>\n } @if (lI) {\n <span slot=\"icon-start\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n </span>\n } @if (rI) {\n <span slot=\"icon-end\" style=\"width: auto\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n </span>\n }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n <gov-icon\n type=\"components\"\n name=\"exclamation-triangle-fill\"\n slot=\"validation-icon\"\n ></gov-icon>\n {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"] }]
1458
1498
  }] });
1459
1499
 
1460
1500
  class RdtGovThemeService {
@@ -1492,5 +1532,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
1492
1532
  * Generated bundle index. Do not edit.
1493
1533
  */
1494
1534
 
1495
- export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RDT_ALERT_DIALOG_PROVIDER, RDT_BASE_DIALOG_PROVIDER, RDT_BASE_NOTIFICATION_PROVIDER, RDT_CONFIRM_DIALOG_PROVIDER, RdtGovBaseDialog, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovDateComponent, RdtGovDialogContentComponent, RdtGovDialogFooterComponent, RdtGovDialogHeaderComponent, RdtGovDialogLoadingComponent, RdtGovDialogService, RdtGovIconComponent, RdtGovNotificationService, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovSpinnerComponent, RdtGovTextInputComponent, RdtGovThemeService, forceFocus, initRdtGov, provideNgrdtGov };
1535
+ export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RDT_ALERT_DIALOG_PROVIDER, RDT_BASE_DIALOG_PROVIDER, RDT_CONFIRM_DIALOG_PROVIDER, RDT_GOV_NOTIFICATION_CONFIG_PROVIDER, RDT_GOV_NOTIFICATION_DEFAULT_CONFIG, RdtGovBaseDialog, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovDateComponent, RdtGovDialogContentComponent, RdtGovDialogFooterComponent, RdtGovDialogHeaderComponent, RdtGovDialogLoadingComponent, RdtGovDialogService, RdtGovIconComponent, RdtGovNotificationService, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovSpinnerComponent, RdtGovTextInputComponent, RdtGovThemeService, forceFocus, initRdtGov, provideNgrdtGov };
1496
1536
  //# sourceMappingURL=ngrdt-gov.mjs.map