@ngrdt/gov 0.0.61 → 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,21 +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
11
  import * as i1$1 from '@angular/forms';
11
12
  import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
12
13
  import { defineCustomElements } from '@gov-design-system-ce/components/loader';
13
14
  import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
14
- import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';
15
+ import { TAB, ENTER } from '@angular/cdk/keycodes';
15
16
  import { Overlay } from '@angular/cdk/overlay';
16
17
  import { TemplatePortal } from '@angular/cdk/portal';
17
18
  import { RdtAutoFocusOnInitDirective } from '@ngrdt/core';
18
- import { map, filter, fromEvent, throttleTime, animationFrameScheduler } from 'rxjs';
19
+ import { fromEvent, filter, throttleTime, animationFrameScheduler, map } from 'rxjs';
19
20
 
20
21
  const DEFAULT_GOV_BUTTON_COLOR = 'primary';
21
22
  const DEFAULT_GOV_BUTTON_TYPE = 'outlined';
@@ -120,7 +121,7 @@ class RdtGovCheckboxComponent extends RdtCheckboxComponent {
120
121
  useExisting: forwardRef(() => RdtGovCheckboxComponent),
121
122
  multi: true,
122
123
  },
123
- ], 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" }] });
124
125
  }
125
126
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovCheckboxComponent, decorators: [{
126
127
  type: Component,
@@ -130,16 +131,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
130
131
  useExisting: forwardRef(() => RdtGovCheckboxComponent),
131
132
  multi: true,
132
133
  },
133
- ], 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"] }]
134
135
  }] });
135
136
 
136
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
+ });
137
143
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
138
- 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 }] });
139
145
  }
140
146
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, decorators: [{
141
147
  type: Component,
142
- 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"] }]
143
149
  }] });
144
150
 
145
151
  function provideNgrdtGov(options = {}) {
@@ -160,8 +166,15 @@ function provideNgrdtGov(options = {}) {
160
166
  {
161
167
  provide: RDT_ICON_REGISTRY_PROVIDER,
162
168
  useValue: {
163
- [RdtIcon.MenuArrowRight]: 'chevron-right',
164
- [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',
165
178
  },
166
179
  },
167
180
  ];
@@ -187,6 +200,201 @@ function forceFocus(input) {
187
200
  }, 5);
188
201
  }
189
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
+
190
398
  class RdtGovNumberInputComponent extends RdtNumericInputComponent {
191
399
  renderer = inject(Renderer2);
192
400
  govInput = viewChild('govInput');
@@ -307,9 +515,9 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
307
515
  selectButton = viewChild('selectButton');
308
516
  overlayTemplate = viewChild('overlayContainer');
309
517
  optionEls = viewChildren((RdtSelectOptionDirective));
518
+ hideErrors = input(false, { transform: booleanAttribute });
310
519
  multi = input(false, { transform: booleanAttribute });
311
520
  size = input('s');
312
- placeholder = input('Vyberte');
313
521
  showClear = input(true, { transform: booleanAttribute });
314
522
  showSearchInput = input(false, {
315
523
  transform: booleanAttribute,
@@ -320,7 +528,22 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
320
528
  alias: 'labelPosition',
321
529
  });
322
530
  labelPosition = linkedSignal(() => this.labelPositionInput());
323
- 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
+ });
324
547
  resizeEffect = effect(() => {
325
548
  const btn = this.selectButton()?.nativeElement;
326
549
  const observer = new ResizeObserver((entries) => {
@@ -354,20 +577,16 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
354
577
  if (this.overlayRef === null) {
355
578
  this.overlayRef = this.createOverlay();
356
579
  this.overlayRef.backdropClick().subscribe(() => {
357
- this.overlayRef?.detach();
358
- this.onTouch();
580
+ this.close();
359
581
  });
360
- this.overlayRef
361
- .keydownEvents()
362
- .pipe(map((e) => e.key), filter((key) => key === 'Escape'))
363
- .subscribe((e) => {
364
- this.overlayRef?.detach();
365
- this.onTouch();
582
+ this.overlayRef.keydownEvents().subscribe((e) => {
583
+ if (e.key === 'Escape') {
584
+ this.close();
585
+ }
366
586
  });
367
587
  }
368
588
  if (this.overlayRef.hasAttached()) {
369
- this.overlayRef.detach();
370
- this.onTouch();
589
+ this.close();
371
590
  return;
372
591
  }
373
592
  const overlayTemplate = this.overlayTemplate();
@@ -376,26 +595,81 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
376
595
  this.overlayRef.attach(portal);
377
596
  }
378
597
  }
379
- handleButtonKeydown($event) {
380
- const keyCode = $event.keyCode;
381
- const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
382
- if (isArrowKey) {
383
- 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;
384
646
  }
385
647
  }
386
648
  handleButtonBlur() {
387
- if (!this.overlayRef?.hasAttached()) {
649
+ if (!(this.overlayRef && this.overlayRef.hasAttached())) {
388
650
  this.onBlur();
389
651
  }
652
+ else if (!this.showSearch()) {
653
+ Promise.resolve(() => this.close());
654
+ }
655
+ }
656
+ close() {
657
+ this.overlayRef?.detach();
658
+ this.onTouch();
390
659
  }
391
660
  handleInput(query) {
392
661
  this.store.setQuery(query);
393
- this.keyManager.setActiveItem(-1);
662
+ this.keyManager.setActiveItem(0);
394
663
  }
395
664
  handleInputKeydown($event) {
396
665
  const key = $event.keyCode;
397
666
  const activeItem = this.keyManager.activeItem;
398
- 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())) {
399
673
  this.selectOption(activeItem.value());
400
674
  }
401
675
  else {
@@ -420,7 +694,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
420
694
  // detach on a next tick
421
695
  // otherwise on ENTER overlay is still enter
422
696
  setTimeout(() => {
423
- this.overlayRef?.detach();
697
+ this.close();
424
698
  this.keyManager.setActiveItem(-1);
425
699
  });
426
700
  }
@@ -494,7 +768,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
494
768
  this.keyManager.destroy();
495
769
  }
496
770
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
497
- 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: [
498
772
  RdtSelectStore,
499
773
  {
500
774
  provide: NG_VALUE_ACCESSOR,
@@ -513,7 +787,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
513
787
  provide: RdtBaseFormInputComponent,
514
788
  useExisting: RdtGovSelectComponent,
515
789
  },
516
- ], 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 });
517
791
  }
518
792
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectComponent, decorators: [{
519
793
  type: Component,
@@ -523,6 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
523
797
  RdtAutoFocusOnInitDirective,
524
798
  GovDesignSystemModule,
525
799
  RdtFormErrorPipe,
800
+ CommonModule,
526
801
  ], providers: [
527
802
  RdtSelectStore,
528
803
  {
@@ -542,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
542
817
  provide: RdtBaseFormInputComponent,
543
818
  useExisting: RdtGovSelectComponent,
544
819
  },
545
- ], 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"] }]
546
821
  }] });
547
822
 
548
823
  class RdtGovTextInputComponent extends RdtTextInputComponent {
@@ -633,9 +908,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
633
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"] }]
634
909
  }] });
635
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
+
636
942
  /**
637
943
  * Generated bundle index. Do not edit.
638
944
  */
639
945
 
640
- 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 };
641
947
  //# sourceMappingURL=ngrdt-gov.mjs.map