@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.
- package/fesm2022/ngrdt-gov.mjs +364 -46
- package/fesm2022/ngrdt-gov.mjs.map +1 -1
- package/index.d.ts +79 -14
- package/lib/gov/ui/select/rdt-gov-select.component.scss +27 -0
- package/package.json +9 -7
- package/lib/gov/ui/menu/rdt-gov-menu.scss +0 -102
- package/lib/gov/ui/table/rdt-gov-table.component.scss +0 -0
- package/styles.scss +0 -6
package/fesm2022/ngrdt-gov.mjs
CHANGED
|
@@ -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,
|
|
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,
|
|
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
|
|
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 {
|
|
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 {
|
|
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
|
|
67
|
-
|
|
68
|
-
|
|
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
|
|
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
|
|
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
|
|
252
|
-
|
|
253
|
-
|
|
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 =
|
|
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.
|
|
349
|
-
this.onTouch();
|
|
580
|
+
this.close();
|
|
350
581
|
});
|
|
351
|
-
this.overlayRef
|
|
352
|
-
.
|
|
353
|
-
|
|
354
|
-
|
|
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.
|
|
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(
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
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
|
|
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(
|
|
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 ===
|
|
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.
|
|
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: {
|
|
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() || ' ' }}\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() || ' ' }}\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() || ' ' }}\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() || ' ' }}\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
|
|
593
|
-
|
|
594
|
-
|
|
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
|