@ngrdt/gov 0.0.60 → 0.0.66

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,22 +1,22 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Injector, signal, input, linkedSignal, viewChild, effect, afterNextRender, untracked, Component, forwardRef, importProvidersFrom, Renderer2, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, ChangeDetectionStrategy, Directive, ViewContainerRef, viewChildren, booleanAttribute, computed } from '@angular/core';
2
+ import { inject, Injector, signal, input, linkedSignal, viewChild, effect, afterNextRender, untracked, Component, forwardRef, computed, importProvidersFrom, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, ChangeDetectionStrategy, Renderer2, Directive, ViewContainerRef, viewChildren, booleanAttribute, Injectable } from '@angular/core';
3
3
  import * as i1 from '@gov-design-system-ce/angular';
4
4
  import { GovButton, GovDesignSystemModule } from '@gov-design-system-ce/angular';
5
- import { RdtCheckboxComponent, RdtFormErrorPipe, RDT_CHECKBOX_BASE_PROVIDER, RdtNumericInputComponent, RdtBaseFormInputComponent, RdtSelectOfflineDatasourceProviderDirective, RdtBaseSelectCommonComponent, RdtSelectOptionDirective, RdtSelectStore, RdtSingleSelectComponent, RdtTextInputComponent } from '@ngrdt/forms';
5
+ import { RdtCheckboxComponent, RdtFormErrorPipe, RDT_CHECKBOX_BASE_PROVIDER, RdtDateComponent, RdtBaseFormInputComponent, RdtNumericInputComponent, RdtSelectOfflineDatasourceProviderDirective, RdtBaseSelectCommonComponent, RdtSelectOptionDirective, RdtSelectStore, RdtSingleSelectComponent, RdtTextInputComponent } from '@ngrdt/forms';
6
6
  import { RdtIconOutletDirective, RdtIconComponent, RDT_ICON_BASE_PROVIDER, RDT_ICON_REGISTRY_PROVIDER, RdtIcon } from '@ngrdt/icon';
7
- import { NgTemplateOutlet } from '@angular/common';
7
+ import * as i3 from '@angular/common';
8
+ import { NgTemplateOutlet, CommonModule } from '@angular/common';
8
9
  import { RouterLink } from '@angular/router';
9
10
  import { RdtButtonBase, RDT_BUTTON_BASE_PROVIDER } from '@ngrdt/button';
10
- import { signalToPromiseOnce } from '@ngrdt/utils';
11
11
  import * as i1$1 from '@angular/forms';
12
12
  import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
13
13
  import { defineCustomElements } from '@gov-design-system-ce/components/loader';
14
14
  import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
15
- import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';
15
+ import { TAB, ENTER } from '@angular/cdk/keycodes';
16
16
  import { Overlay } from '@angular/cdk/overlay';
17
17
  import { TemplatePortal } from '@angular/cdk/portal';
18
18
  import { RdtAutoFocusOnInitDirective } from '@ngrdt/core';
19
- import { map, filter, fromEvent, throttleTime, animationFrameScheduler } from 'rxjs';
19
+ import { fromEvent, filter, throttleTime, animationFrameScheduler, map } from 'rxjs';
20
20
 
21
21
  const DEFAULT_GOV_BUTTON_COLOR = 'primary';
22
22
  const DEFAULT_GOV_BUTTON_TYPE = 'outlined';
@@ -63,9 +63,16 @@ class RdtGovButtonComponent extends RdtButtonBase {
63
63
  untracked(this.govButton)?.setFocus();
64
64
  }
65
65
  canFocus() {
66
- return signalToPromiseOnce(this.govButton, { injector: this.injector })
67
- .then((btn) => btn?.getRef())
68
- .then((el) => !!el);
66
+ return new Promise((resolve) => {
67
+ setTimeout(async () => {
68
+ const elRef = this.govButton();
69
+ let buttonEl = null;
70
+ if (elRef?.getRef) {
71
+ buttonEl = await elRef.getRef();
72
+ }
73
+ resolve(!!buttonEl);
74
+ }, 1);
75
+ });
69
76
  }
70
77
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
71
78
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovButtonComponent, isStandalone: true, selector: "rdt-gov-button", inputs: { appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStartInput: { classPropertyName: "iconStartInput", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, expandedInput: { classPropertyName: "expandedInput", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
@@ -114,7 +121,7 @@ class RdtGovCheckboxComponent extends RdtCheckboxComponent {
114
121
  useExisting: forwardRef(() => RdtGovCheckboxComponent),
115
122
  multi: true,
116
123
  },
117
- ], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n @if(lPos === 'top'){\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-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\">{{\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: "directive", type: i1.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }] });
124
+ ], 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\">{{\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: "directive", type: i1.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }] });
118
125
  }
119
126
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovCheckboxComponent, decorators: [{
120
127
  type: Component,
@@ -124,16 +131,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
124
131
  useExisting: forwardRef(() => RdtGovCheckboxComponent),
125
132
  multi: true,
126
133
  },
127
- ], template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n @if(lPos === 'top'){\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-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\">{{\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"] }]
134
+ ], 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\">{{\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"] }]
128
135
  }] });
129
136
 
130
137
  class RdtGovIconComponent extends RdtIconComponent {
138
+ parsedName = computed(() => {
139
+ const value = this.name() || '';
140
+ const [type, name] = value.split('/');
141
+ return { type: type || '', name: name || '' };
142
+ });
131
143
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
132
- 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: "@if(name()) {\n<gov-icon class=\"rdt-gov-icon\" [name]=\"name()\"></gov-icon>\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"] }] });
144
+ 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 }] });
133
145
  }
134
146
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, decorators: [{
135
147
  type: Component,
136
- args: [{ selector: 'rdt-gov-icon', imports: [GovDesignSystemModule], template: "@if(name()) {\n<gov-icon class=\"rdt-gov-icon\" [name]=\"name()\"></gov-icon>\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"] }]
148
+ 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"] }]
137
149
  }] });
138
150
 
139
151
  function provideNgrdtGov(options = {}) {
@@ -154,8 +166,15 @@ function provideNgrdtGov(options = {}) {
154
166
  {
155
167
  provide: RDT_ICON_REGISTRY_PROVIDER,
156
168
  useValue: {
157
- [RdtIcon.MenuArrowRight]: 'chevron-right',
158
- [RdtIcon.MenuArrowDown]: 'chevron-down',
169
+ [RdtIcon.MenuArrowRight]: 'components/chevron-right',
170
+ [RdtIcon.MenuArrowDown]: 'components/chevron-down',
171
+ [RdtIcon.SkipDoubleLeft]: 'components/chevron-double-left',
172
+ [RdtIcon.SkipDoubleRight]: 'components/chevron-double-right',
173
+ [RdtIcon.SkipLeft]: 'components/chevron-left',
174
+ [RdtIcon.SkipRight]: 'components/chevron-right',
175
+ [RdtIcon.SortAsc]: 'sort-down',
176
+ [RdtIcon.SortDesc]: 'sort-up',
177
+ [RdtIcon.SortEnabled]: 'funnel',
159
178
  },
160
179
  },
161
180
  ];
@@ -181,6 +200,201 @@ function forceFocus(input) {
181
200
  }, 5);
182
201
  }
183
202
 
203
+ const RDT_DATE_MIN_YEAR = 1900;
204
+ class RdtGovDateComponent extends RdtDateComponent {
205
+ govInput = viewChild('govInput');
206
+ size = input('s');
207
+ mode = input('date');
208
+ outputMode = input('date');
209
+ labelPositionInput = input('top', {
210
+ alias: 'labelPosition',
211
+ });
212
+ labelPosition = linkedSignal(() => this.labelPositionInput());
213
+ inputElement = signal(null);
214
+ hasErrors = false;
215
+ isEmpty(value) {
216
+ return value === null;
217
+ }
218
+ onDateInput(dateInput) {
219
+ if (dateInput) {
220
+ const parsed = new Date(this.parseValue(dateInput));
221
+ if (parsed.getFullYear() >= RDT_DATE_MIN_YEAR || !this.focused()) {
222
+ this.onInternalValueChange(this.parseValue(dateInput));
223
+ }
224
+ }
225
+ else {
226
+ this.onInternalValueChange(dateInput);
227
+ }
228
+ }
229
+ setValueFromEvent(event) {
230
+ const value = event.detail.value;
231
+ if (value) {
232
+ const parsed = this.parseValue(value);
233
+ this.onInternalValueChange(parsed);
234
+ }
235
+ else {
236
+ this.onInternalValueChange(null);
237
+ }
238
+ }
239
+ toInternalValue(value) {
240
+ if (value === null) {
241
+ return null;
242
+ }
243
+ switch (untracked(this.mode)) {
244
+ case 'date':
245
+ return this.toInternalDate(value);
246
+ case 'datetime':
247
+ return this.toInternalDateTime(value);
248
+ case 'time':
249
+ return this.toInternalTime(value);
250
+ default:
251
+ return value;
252
+ }
253
+ }
254
+ toExternalValue(internalValue) {
255
+ if (internalValue === null) {
256
+ return null;
257
+ }
258
+ switch (untracked(this.outputMode)) {
259
+ case 'date':
260
+ return this.toInternalDate(internalValue);
261
+ case 'datetime':
262
+ return this.toExternalDateTime(internalValue);
263
+ case 'time':
264
+ return this.toExternalTime(internalValue);
265
+ default:
266
+ return internalValue;
267
+ }
268
+ }
269
+ toExternalDateTime(internalValue) {
270
+ const s = internalValue.split('T');
271
+ const date = this.toInternalDate(s[0]);
272
+ const time = s[1] ? this.toExternalTime(s[1]) : '00:00:00';
273
+ return `${date}T${time}`;
274
+ }
275
+ toExternalTime(internalValue) {
276
+ const s = internalValue.split(':');
277
+ return `${s[0]}:${s[1]}:00`;
278
+ }
279
+ toInternalDate(value) {
280
+ if (value === '') {
281
+ return '0000-00-00';
282
+ }
283
+ if (value.includes('T')) {
284
+ return value.split('T')[0];
285
+ }
286
+ return value;
287
+ }
288
+ toInternalDateTime(value) {
289
+ const s = value.includes('T') ? value.split('T') : value.split(' ');
290
+ const date = this.toInternalDate(s[0]);
291
+ const time = s[1] ? this.toInternalTime(s[1]) : '00:00';
292
+ if (date && time) {
293
+ return `${date}T${time}`;
294
+ }
295
+ else if (date) {
296
+ return `${date}T00:00`;
297
+ }
298
+ else {
299
+ return `0000-00-00T${time}`;
300
+ }
301
+ }
302
+ toInternalTime(value) {
303
+ const s = value.split(':');
304
+ return `${s[0]}:${s[1]}`;
305
+ }
306
+ parseValue(value) {
307
+ switch (untracked(this.mode)) {
308
+ case 'date':
309
+ return this.parseDate(value);
310
+ case 'datetime':
311
+ return this.parseDateTime(value);
312
+ case 'time':
313
+ return this.parseTime(value);
314
+ default:
315
+ return value;
316
+ }
317
+ }
318
+ parseTime(value) {
319
+ return `${value}:00`;
320
+ }
321
+ parseDate(value) {
322
+ return value;
323
+ }
324
+ parseDateTime(value) {
325
+ const s = value.split('T');
326
+ const date = this.parseDate(s[0]);
327
+ const time = this.parseTime(s[1]);
328
+ return `${date}T${time}`;
329
+ }
330
+ inputElementEffect = effect(async () => {
331
+ const govInput = this.govInput()?.nativeElement;
332
+ if (govInput) {
333
+ const input = await govInput.getRef();
334
+ this.inputElement.set(input);
335
+ }
336
+ });
337
+ errorFixEffect = effect(() => {
338
+ const inputElement = this.inputElement();
339
+ const visibleErrors = this.visibleErrors();
340
+ const hadErrors = this.hasErrors;
341
+ this.hasErrors = !!visibleErrors;
342
+ if (hadErrors !== this.hasErrors) {
343
+ const isActive = document.activeElement === inputElement;
344
+ if (isActive && inputElement) {
345
+ forceFocus(inputElement);
346
+ }
347
+ }
348
+ });
349
+ async focus() {
350
+ const govInput = await this.govInput()?.nativeElement;
351
+ const el = await govInput?.getRef();
352
+ forceFocus(el);
353
+ }
354
+ canFocus() {
355
+ return new Promise((resolve) => {
356
+ setTimeout(() => {
357
+ const elRef = this.govInput();
358
+ resolve(!!elRef?.nativeElement);
359
+ }, 1);
360
+ });
361
+ }
362
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
363
+ 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, outputMode: { classPropertyName: "outputMode", publicName: "outputMode", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
364
+ {
365
+ provide: NG_VALUE_ACCESSOR,
366
+ useExisting: RdtGovDateComponent,
367
+ multi: true,
368
+ },
369
+ {
370
+ provide: RdtBaseFormInputComponent,
371
+ useExisting: RdtGovDateComponent,
372
+ },
373
+ {
374
+ provide: RdtDateComponent,
375
+ useExisting: RdtGovDateComponent,
376
+ },
377
+ ], 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]=\"hasErrors\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n} @switch (mode()) { @case ('date') {\n<gov-form-input\n #govInput\n input-type=\"date\"\n [value]=\"internalValue()\"\n [size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n (gov-input)=\"onDateInput($event.detail.value)\"\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() }} @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 }\n</gov-form-input>\n} @case ('time') {\n<gov-form-input\n #govInput\n input-type=\"time\"\n [value]=\"internalValue()\"\n [size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n (gov-input)=\"onInternalValueChange($event.detail.value)\"\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() }} @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 }\n</gov-form-input>\n} @default {\n<gov-form-input\n #govInput\n input-type=\"datetime-local\"\n [value]=\"internalValue()\"\n [size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n (gov-input)=\"setValueFromEvent($event)\"\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() }} @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 }\n</gov-form-input>\n} } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\">{{ hasError }}</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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
378
+ }
379
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, decorators: [{
380
+ type: Component,
381
+ args: [{ selector: 'rdt-gov-date', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [RdtFormErrorPipe], providers: [
382
+ {
383
+ provide: NG_VALUE_ACCESSOR,
384
+ useExisting: RdtGovDateComponent,
385
+ multi: true,
386
+ },
387
+ {
388
+ provide: RdtBaseFormInputComponent,
389
+ useExisting: RdtGovDateComponent,
390
+ },
391
+ {
392
+ provide: RdtDateComponent,
393
+ useExisting: RdtGovDateComponent,
394
+ },
395
+ ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasErrors\"\n >{{ label() }} @if (required()) {\n <span class=\"warning-color-text\">*</span>\n }</gov-form-label\n>\n} @switch (mode()) { @case ('date') {\n<gov-form-input\n #govInput\n input-type=\"date\"\n [value]=\"internalValue()\"\n [size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n (gov-input)=\"onDateInput($event.detail.value)\"\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() }} @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 }\n</gov-form-input>\n} @case ('time') {\n<gov-form-input\n #govInput\n input-type=\"time\"\n [value]=\"internalValue()\"\n [size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n (gov-input)=\"onInternalValueChange($event.detail.value)\"\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() }} @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 }\n</gov-form-input>\n} @default {\n<gov-form-input\n #govInput\n input-type=\"datetime-local\"\n [value]=\"internalValue()\"\n [size]=\"size()\"\n [attr.invalid]=\"invalid() && touched()\"\n [attr.readonly]=\"readonlyInput() ? true : null\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [name]=\"id()\"\n [identifier]=\"id()\"\n (gov-focus)=\"onFocus()\"\n (gov-blur)=\"onBlur()\"\n (gov-input)=\"setValueFromEvent($event)\"\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() }} @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 }\n</gov-form-input>\n} } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\">{{ hasError }}</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"] }]
396
+ }] });
397
+
184
398
  class RdtGovNumberInputComponent extends RdtNumericInputComponent {
185
399
  renderer = inject(Renderer2);
186
400
  govInput = viewChild('govInput');
@@ -248,9 +462,12 @@ class RdtGovNumberInputComponent extends RdtNumericInputComponent {
248
462
  forceFocus(el);
249
463
  }
250
464
  canFocus() {
251
- return signalToPromiseOnce(this.govInput, { injector: this.injector })
252
- .then((btn) => btn?.nativeElement.getRef())
253
- .then((el) => !!el);
465
+ return new Promise((resolve) => {
466
+ setTimeout(() => {
467
+ const elRef = this.govInput();
468
+ resolve(!!elRef?.nativeElement);
469
+ }, 1); // wait 1ms
470
+ });
254
471
  }
255
472
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
256
473
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovNumberInputComponent, isStandalone: true, selector: "rdt-gov-number-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
@@ -298,9 +515,9 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
298
515
  selectButton = viewChild('selectButton');
299
516
  overlayTemplate = viewChild('overlayContainer');
300
517
  optionEls = viewChildren((RdtSelectOptionDirective));
518
+ hideErrors = input(false, { transform: booleanAttribute });
301
519
  multi = input(false, { transform: booleanAttribute });
302
520
  size = input('s');
303
- placeholder = input('Vyberte');
304
521
  showClear = input(true, { transform: booleanAttribute });
305
522
  showSearchInput = input(false, {
306
523
  transform: booleanAttribute,
@@ -311,7 +528,22 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
311
528
  alias: 'labelPosition',
312
529
  });
313
530
  labelPosition = linkedSignal(() => this.labelPositionInput());
314
- keyManager = new ActiveDescendantKeyManager(this.optionEls, this.injector);
531
+ keyManager = this.getKeyManager();
532
+ /** Sets up a key manager to listen to keyboard events on the overlay panel. */
533
+ getKeyManager() {
534
+ const keyManager = new ActiveDescendantKeyManager(this.optionEls, this.injector)
535
+ .withVerticalOrientation()
536
+ .withHomeAndEnd();
537
+ return keyManager;
538
+ }
539
+ visibleOptionsEffect = effect(() => {
540
+ const options = this.optionEls();
541
+ if (options.length > 0 &&
542
+ this.overlayRef &&
543
+ this.overlayRef.hasAttached()) {
544
+ setTimeout(() => this.keyManager.setActiveItem(0));
545
+ }
546
+ });
315
547
  resizeEffect = effect(() => {
316
548
  const btn = this.selectButton()?.nativeElement;
317
549
  const observer = new ResizeObserver((entries) => {
@@ -345,20 +577,16 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
345
577
  if (this.overlayRef === null) {
346
578
  this.overlayRef = this.createOverlay();
347
579
  this.overlayRef.backdropClick().subscribe(() => {
348
- this.overlayRef?.detach();
349
- this.onTouch();
580
+ this.close();
350
581
  });
351
- this.overlayRef
352
- .keydownEvents()
353
- .pipe(map((e) => e.key), filter((key) => key === 'Escape'))
354
- .subscribe((e) => {
355
- this.overlayRef?.detach();
356
- this.onTouch();
582
+ this.overlayRef.keydownEvents().subscribe((e) => {
583
+ if (e.key === 'Escape') {
584
+ this.close();
585
+ }
357
586
  });
358
587
  }
359
588
  if (this.overlayRef.hasAttached()) {
360
- this.overlayRef.detach();
361
- this.onTouch();
589
+ this.close();
362
590
  return;
363
591
  }
364
592
  const overlayTemplate = this.overlayTemplate();
@@ -367,26 +595,81 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
367
595
  this.overlayRef.attach(portal);
368
596
  }
369
597
  }
370
- handleButtonKeydown($event) {
371
- const keyCode = $event.keyCode;
372
- const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
373
- if (isArrowKey) {
374
- this.openOverlay();
598
+ handleButtonKeydown(event) {
599
+ if (this.overlayRef && this.overlayRef.hasAttached()) {
600
+ this.handleVisibleDropdown(event);
601
+ }
602
+ else {
603
+ this.handleHiddenDropdown(event);
604
+ }
605
+ }
606
+ handleVisibleDropdown(event) {
607
+ switch (event.key) {
608
+ // Enter and space cause the currently-highlighted item to become the active item
609
+ case 'Enter':
610
+ case ' ':
611
+ if (this.keyManager.activeItem) {
612
+ this.selectOption(this.keyManager.activeItem.value());
613
+ }
614
+ event.preventDefault();
615
+ break;
616
+ case 'Escape':
617
+ this.close();
618
+ break;
619
+ case 'ArrowUp':
620
+ case 'ArrowDown':
621
+ case 'ArrowRight':
622
+ case 'ArrowLeft':
623
+ this.keyManager.onKeydown(event);
624
+ this.keyManager.activeItem?.scrollIntoElement();
625
+ // This prevents the arrow keys from scrolling the page while the drop-down is focused
626
+ event.preventDefault();
627
+ break;
628
+ case 'Tab':
629
+ this.close();
630
+ break;
631
+ case 'PageUp':
632
+ case 'PageDown':
633
+ event.preventDefault();
634
+ break;
635
+ }
636
+ }
637
+ handleHiddenDropdown(event) {
638
+ switch (event.key) {
639
+ case 'Enter':
640
+ case ' ':
641
+ case 'ArrowDown':
642
+ case 'ArrowUp':
643
+ this.openOverlay();
644
+ event.preventDefault();
645
+ break;
375
646
  }
376
647
  }
377
648
  handleButtonBlur() {
378
- if (!this.overlayRef?.hasAttached()) {
649
+ if (!(this.overlayRef && this.overlayRef.hasAttached())) {
379
650
  this.onBlur();
380
651
  }
652
+ else if (!this.showSearch()) {
653
+ Promise.resolve(() => this.close());
654
+ }
655
+ }
656
+ close() {
657
+ this.overlayRef?.detach();
658
+ this.onTouch();
381
659
  }
382
660
  handleInput(query) {
383
661
  this.store.setQuery(query);
384
- this.keyManager.setActiveItem(-1);
662
+ this.keyManager.setActiveItem(0);
385
663
  }
386
664
  handleInputKeydown($event) {
387
665
  const key = $event.keyCode;
388
666
  const activeItem = this.keyManager.activeItem;
389
- if (key === ENTER && activeItem !== null) {
667
+ if (key === TAB) {
668
+ this.close();
669
+ }
670
+ else if (key === ENTER &&
671
+ activeItem !== null &&
672
+ this.visibleOptions().some((o) => o.id === activeItem.value())) {
390
673
  this.selectOption(activeItem.value());
391
674
  }
392
675
  else {
@@ -411,7 +694,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
411
694
  // detach on a next tick
412
695
  // otherwise on ENTER overlay is still enter
413
696
  setTimeout(() => {
414
- this.overlayRef?.detach();
697
+ this.close();
415
698
  this.keyManager.setActiveItem(-1);
416
699
  });
417
700
  }
@@ -485,7 +768,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
485
768
  this.keyManager.destroy();
486
769
  }
487
770
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
488
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovSelectComponent, isStandalone: true, selector: "rdt-gov-select", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showSearchInput: { classPropertyName: "showSearchInput", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
771
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovSelectComponent, isStandalone: true, selector: "rdt-gov-select", inputs: { hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showSearchInput: { classPropertyName: "showSearchInput", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
489
772
  RdtSelectStore,
490
773
  {
491
774
  provide: NG_VALUE_ACCESSOR,
@@ -504,7 +787,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
504
787
  provide: RdtBaseFormInputComponent,
505
788
  useExisting: RdtGovSelectComponent,
506
789
  },
507
- ], 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 =\nvisibleErrors() | 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 {\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 name=\"exclamation-lg\" class=\"icon-warning\"></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=\"Zadejte hledan\u00FD v\u00FDraz\"\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 [rdtSelectOption]=\"option\"\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 {{ option.label }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Na\u010D\u00EDt\u00E1n\u00ED hodnot...</div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n Pro zadan\u00FD v\u00FDraz nejsou k dispozici \u017E\u00E1dn\u00E9 z\u00E1znamy\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Nejsou k dispozici \u017E\u00E1dn\u00E9 hodnoty</div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\">{{ hasError }}</gov-form-message>\n}\n", styles: ["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{color:var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--icon-success)}.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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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" }], encapsulation: i0.ViewEncapsulation.None });
790
+ ], 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=\"Zadejte hledan\u00FD v\u00FDraz\"\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 {{ option.label }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Na\u010D\u00EDt\u00E1n\u00ED hodnot...</div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n Pro zadan\u00FD v\u00FDraz nejsou k dispozici \u017E\u00E1dn\u00E9 z\u00E1znamy\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Nejsou k dispozici \u017E\u00E1dn\u00E9 hodnoty</div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\">{{ hasError }}</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;color: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{color:var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--icon-success)}.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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
508
791
  }
509
792
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectComponent, decorators: [{
510
793
  type: Component,
@@ -514,6 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
514
797
  RdtAutoFocusOnInitDirective,
515
798
  GovDesignSystemModule,
516
799
  RdtFormErrorPipe,
800
+ CommonModule,
517
801
  ], providers: [
518
802
  RdtSelectStore,
519
803
  {
@@ -533,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
533
817
  provide: RdtBaseFormInputComponent,
534
818
  useExisting: RdtGovSelectComponent,
535
819
  },
536
- ], schemas: [CUSTOM_ELEMENTS_SCHEMA], encapsulation: ViewEncapsulation.None, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nvisibleErrors() | 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 {\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 name=\"exclamation-lg\" class=\"icon-warning\"></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=\"Zadejte hledan\u00FD v\u00FDraz\"\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 [rdtSelectOption]=\"option\"\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 {{ option.label }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Na\u010D\u00EDt\u00E1n\u00ED hodnot...</div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n Pro zadan\u00FD v\u00FDraz nejsou k dispozici \u017E\u00E1dn\u00E9 z\u00E1znamy\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Nejsou k dispozici \u017E\u00E1dn\u00E9 hodnoty</div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\">{{ hasError }}</gov-form-message>\n}\n", styles: ["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{color:var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--icon-success)}.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"] }]
820
+ ], 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=\"Zadejte hledan\u00FD v\u00FDraz\"\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 {{ option.label }}\n </button>\n </li>\n } @empty { @if (loading()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Na\u010D\u00EDt\u00E1n\u00ED hodnot...</div>\n </li>\n } @else if (store.query()) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">\n Pro zadan\u00FD v\u00FDraz nejsou k dispozici \u017E\u00E1dn\u00E9 z\u00E1znamy\n </div>\n </li>\n } @else if (!store.datasource()?.queryRequired) {\n <li class=\"pointer-events-none\">\n <div class=\"option\">Nejsou k dispozici \u017E\u00E1dn\u00E9 hodnoty</div>\n </li>\n } }\n </ul>\n </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\">{{ hasError }}</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;color: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{color:var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--icon-success)}.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"] }]
537
821
  }] });
538
822
 
539
823
  class RdtGovTextInputComponent extends RdtTextInputComponent {
@@ -589,9 +873,12 @@ class RdtGovTextInputComponent extends RdtTextInputComponent {
589
873
  forceFocus(el);
590
874
  }
591
875
  canFocus() {
592
- return signalToPromiseOnce(this.govInput, { injector: this.injector })
593
- .then((btn) => btn?.nativeElement.getRef())
594
- .then((el) => !!el);
876
+ return new Promise((resolve) => {
877
+ setTimeout(() => {
878
+ const elRef = this.govInput();
879
+ resolve(!!elRef?.nativeElement);
880
+ }, 1);
881
+ });
595
882
  }
596
883
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
597
884
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovTextInputComponent, isStandalone: true, selector: "rdt-gov-text-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
@@ -621,9 +908,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
621
908
  ], 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\">{{ hasError }}</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"] }]
622
909
  }] });
623
910
 
911
+ class RdtGovThemeService {
912
+ attribute = 'data-theme';
913
+ constructor() {
914
+ this.init();
915
+ }
916
+ init(defaultTheme = 'light') {
917
+ const html = document.documentElement;
918
+ if (!html.getAttribute(this.attribute)) {
919
+ html.setAttribute(this.attribute, defaultTheme);
920
+ }
921
+ }
922
+ swapTheme() {
923
+ const html = document.documentElement;
924
+ const current = html.getAttribute(this.attribute);
925
+ const next = current === 'light' ? 'dark' : 'light';
926
+ html.setAttribute(this.attribute, next);
927
+ }
928
+ setTheme(theme) {
929
+ document.documentElement.setAttribute(this.attribute, theme);
930
+ }
931
+ getTheme() {
932
+ return document.documentElement.getAttribute(this.attribute);
933
+ }
934
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
935
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovThemeService, providedIn: 'root' });
936
+ }
937
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovThemeService, decorators: [{
938
+ type: Injectable,
939
+ args: [{ providedIn: 'root' }]
940
+ }], ctorParameters: () => [] });
941
+
624
942
  /**
625
943
  * Generated bundle index. Do not edit.
626
944
  */
627
945
 
628
- export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovIconComponent, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovTextInputComponent, forceFocus, initRdtGov, provideNgrdtGov };
946
+ export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RDT_DATE_MIN_YEAR, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovDateComponent, RdtGovIconComponent, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovTextInputComponent, RdtGovThemeService, forceFocus, initRdtGov, provideNgrdtGov };
629
947
  //# sourceMappingURL=ngrdt-gov.mjs.map