@metadev/lux 0.25.0 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/esm2022/lib/autocomplete/autocomplete.component.mjs +488 -0
  2. package/esm2022/lib/autocomplete-list/autocomplete-list.component.mjs +259 -0
  3. package/esm2022/lib/breadcrumb/breadcrumb.component.mjs +78 -0
  4. package/esm2022/lib/checkbox/checkbox.component.mjs +156 -0
  5. package/esm2022/lib/datetime/datetime.component.mjs +312 -0
  6. package/esm2022/lib/filter/filter.component.mjs +158 -0
  7. package/esm2022/lib/geolocation/geolocation.component.mjs +423 -0
  8. package/esm2022/lib/geolocation/geolocation.service.mjs +123 -0
  9. package/{esm2020 → esm2022}/lib/geolocation/openlayer-loader.service.mjs +4 -4
  10. package/esm2022/lib/helperFns.mjs +118 -0
  11. package/esm2022/lib/input/input.component.mjs +469 -0
  12. package/{esm2020 → esm2022}/lib/input/regexp.service.mjs +4 -4
  13. package/esm2022/lib/lux.module.mjs +119 -0
  14. package/esm2022/lib/map/map.component.mjs +275 -0
  15. package/esm2022/lib/modal/modal-backdrop.mjs +25 -0
  16. package/esm2022/lib/modal/modal-config.mjs +12 -0
  17. package/esm2022/lib/modal/modal-ref.mjs +101 -0
  18. package/esm2022/lib/modal/modal-stack.mjs +182 -0
  19. package/esm2022/lib/modal/modal-window.mjs +125 -0
  20. package/esm2022/lib/modal/modal.service.mjs +28 -0
  21. package/esm2022/lib/modal/util.mjs +82 -0
  22. package/esm2022/lib/pagination/pagination.component.mjs +144 -0
  23. package/esm2022/lib/radiogroup/radiogroup.component.mjs +129 -0
  24. package/esm2022/lib/select/select.component.mjs +148 -0
  25. package/esm2022/lib/tooltip/tooltip.component.mjs +24 -0
  26. package/esm2022/lib/tooltip/tooltip.directive.mjs +69 -0
  27. package/esm2022/lib/tooltip/tooltip.service.mjs +137 -0
  28. package/esm2022/lib/tooltip/tooltop-content.mjs +9 -0
  29. package/esm2022/lib/voice-recognition/voice-recognition.directive.mjs +79 -0
  30. package/{fesm2020 → fesm2022}/metadev-lux.mjs +722 -610
  31. package/fesm2022/metadev-lux.mjs.map +1 -0
  32. package/lib/autocomplete/autocomplete.component.d.ts +1 -1
  33. package/lib/autocomplete-list/autocomplete-list.component.d.ts +1 -1
  34. package/lib/breadcrumb/breadcrumb.component.d.ts +1 -1
  35. package/lib/checkbox/checkbox.component.d.ts +1 -1
  36. package/lib/datasource.d.ts +2 -2
  37. package/lib/datetime/datetime.component.d.ts +1 -1
  38. package/lib/filter/filter.component.d.ts +1 -1
  39. package/lib/geolocation/geolocation.component.d.ts +1 -1
  40. package/lib/input/input.component.d.ts +1 -1
  41. package/lib/lux.module.d.ts +5 -6
  42. package/lib/map/map.component.d.ts +2 -2
  43. package/lib/modal/modal-backdrop.d.ts +1 -1
  44. package/lib/modal/modal-stack.d.ts +1 -1
  45. package/lib/modal/modal-window.d.ts +1 -1
  46. package/lib/modal/util.d.ts +1 -1
  47. package/lib/pagination/pagination.component.d.ts +1 -1
  48. package/lib/radiogroup/radiogroup.component.d.ts +1 -1
  49. package/lib/select/select.component.d.ts +1 -1
  50. package/lib/tooltip/placement.d.ts +1 -1
  51. package/lib/tooltip/tooltip.component.d.ts +1 -1
  52. package/lib/tooltip/tooltip.directive.d.ts +1 -1
  53. package/lib/voice-recognition/voice-recognition.directive.d.ts +1 -1
  54. package/package.json +8 -14
  55. package/esm2020/lib/autocomplete/autocomplete.component.mjs +0 -480
  56. package/esm2020/lib/autocomplete-list/autocomplete-list.component.mjs +0 -254
  57. package/esm2020/lib/breadcrumb/breadcrumb.component.mjs +0 -75
  58. package/esm2020/lib/checkbox/checkbox.component.mjs +0 -154
  59. package/esm2020/lib/datetime/datetime.component.mjs +0 -306
  60. package/esm2020/lib/filter/filter.component.mjs +0 -152
  61. package/esm2020/lib/geolocation/geolocation.component.mjs +0 -407
  62. package/esm2020/lib/geolocation/geolocation.service.mjs +0 -120
  63. package/esm2020/lib/helperFns.mjs +0 -117
  64. package/esm2020/lib/input/input.component.mjs +0 -452
  65. package/esm2020/lib/lux.module.mjs +0 -128
  66. package/esm2020/lib/map/map.component.mjs +0 -265
  67. package/esm2020/lib/modal/modal-backdrop.mjs +0 -26
  68. package/esm2020/lib/modal/modal-config.mjs +0 -14
  69. package/esm2020/lib/modal/modal-ref.mjs +0 -91
  70. package/esm2020/lib/modal/modal-stack.mjs +0 -179
  71. package/esm2020/lib/modal/modal-window.mjs +0 -119
  72. package/esm2020/lib/modal/modal.service.mjs +0 -26
  73. package/esm2020/lib/modal/util.mjs +0 -83
  74. package/esm2020/lib/pagination/pagination.component.mjs +0 -137
  75. package/esm2020/lib/radiogroup/radiogroup.component.mjs +0 -130
  76. package/esm2020/lib/select/select.component.mjs +0 -149
  77. package/esm2020/lib/tooltip/tooltip.component.mjs +0 -23
  78. package/esm2020/lib/tooltip/tooltip.directive.mjs +0 -60
  79. package/esm2020/lib/tooltip/tooltip.service.mjs +0 -134
  80. package/esm2020/lib/tooltip/tooltop-content.mjs +0 -7
  81. package/esm2020/lib/voice-recognition/voice-recognition.directive.mjs +0 -73
  82. package/fesm2015/metadev-lux.mjs +0 -4352
  83. package/fesm2015/metadev-lux.mjs.map +0 -1
  84. package/fesm2020/metadev-lux.mjs.map +0 -1
  85. /package/{esm2020 → esm2022}/lib/datasource.mjs +0 -0
  86. /package/{esm2020 → esm2022}/lib/lang.mjs +0 -0
  87. /package/{esm2020 → esm2022}/lib/map/geopoint.mjs +0 -0
  88. /package/{esm2020 → esm2022}/lib/modal/modal-dismiss-reasons.mjs +0 -0
  89. /package/{esm2020 → esm2022}/lib/pagination/pagination.mjs +0 -0
  90. /package/{esm2020 → esm2022}/lib/tooltip/placement.mjs +0 -0
  91. /package/{esm2020 → esm2022}/lib/tooltip/tooltip-context.mjs +0 -0
  92. /package/{esm2020 → esm2022}/lib/window/window.service.mjs +0 -0
  93. /package/{esm2020 → esm2022}/metadev-lux.mjs +0 -0
  94. /package/{esm2020 → esm2022}/public-api.mjs +0 -0
@@ -1,4352 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, forwardRef, Component, ViewChild, Output, Input, Inject, HostBinding, HostListener, Injectable, TemplateRef, Directive, InjectionToken, PLATFORM_ID, NgModule } from '@angular/core';
3
- import * as i3 from '@angular/forms';
4
- import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
5
- import { debounceTime, first, map, filter, takeUntil, withLatestFrom, distinctUntilChanged, switchMap } from 'rxjs/operators';
6
- import * as i1$1 from '@angular/common';
7
- import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
8
- import { of, Subject, fromEvent, from, BehaviorSubject } from 'rxjs';
9
- import * as i1 from 'angular-resize-event';
10
- import { AngularResizeEventModule } from 'angular-resize-event';
11
- import * as i1$2 from '@angular/router';
12
- import { NavigationEnd, RouterModule } from '@angular/router';
13
- import * as i1$3 from '@angular/common/http';
14
- import { HttpClientModule } from '@angular/common/http';
15
-
16
- // undefined and null functions
17
- const exists = (value) => value !== null && value !== undefined;
18
- const hasValue = (value) => exists(value) && (typeof value === 'string' ? !isEmptyString(value) : true);
19
- // string functions
20
- const isEmptyString = (value) => value.trim() === '';
21
- const isValidEmail = (value) => {
22
- const re = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
23
- return re.test(String(value).toLowerCase().trim());
24
- };
25
- const isValidUrl = (value) => {
26
- const pattern =
27
- // eslint-disable-next-line max-len
28
- /^((([a-z]+?:\/\/)?(((([a-z0-9]([a-z0-9-]*[a-z0-9])*)\.)+[a-z]{2,})|((([0-9]{1,3}\.){3}[0-9]{1,3}))|(localhost))(\:[0-9]+)?))?((\/[a-zA-Z0-9\-_+=~.,:;%]+)*\/?)((\?|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+(((&|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+)*))?(#[a-zA-Z0-9\-_+~.,:;%]+(=[a-zA-Z0-9\*\-_+~.,:;%]+)?)?$/;
29
- return pattern.test(value);
30
- };
31
- const isValidRelativeUrl = (value) => {
32
- const pattern =
33
- // eslint-disable-next-line max-len
34
- /^((([a-z]+?:\/\/)?(((([a-z0-9]([a-z0-9-]*[a-z0-9])*)\.)+[a-z]{2,})|((([0-9]{1,3}\.){3}[0-9]{1,3}))|(localhost))(\:[0-9]+)?)|([a-zA-Z0-9\-_+=~.,:;%]+))?((\/[a-zA-Z0-9\-_+=~.,:;%]+)*\/?)((\?|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+(((&|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+)*))?(#[a-zA-Z0-9\-_+~.,:;%]+(=[a-zA-Z0-9\*\-_+~.,:;%]+)?)?$/;
35
- return pattern.test(value);
36
- };
37
- const isValidColor = (value) => {
38
- value = String(value).toLowerCase();
39
- // valid values for CSS color property, yet not valid colors by themselves
40
- if (value === 'currentcolor' ||
41
- value === 'inherit' ||
42
- value === 'initial' ||
43
- value === 'revert' ||
44
- value === 'unset') {
45
- return false;
46
- }
47
- return CSS.supports('color', value);
48
- };
49
- // date functions
50
- const isValidDate = (date) => exists(date) ? !isNaN(date.getTime()) : false;
51
- const normalizeDate = (value) => {
52
- if (typeof value === 'string' && value.length > 10) {
53
- return value.substr(0, 10);
54
- }
55
- return value ? value.toString() : null;
56
- };
57
- const addTimezoneOffset = (date) => {
58
- if (!isValidDate(date)) {
59
- return date;
60
- }
61
- else {
62
- return new Date(date.getTime() - date.getTimezoneOffset() * 60000);
63
- }
64
- };
65
- // number functions
66
- const isValidNumber = (value) => (hasValue(value) ? !Number.isNaN(Number(value)) : false);
67
- const numberOfDecimalDigits = (x) => {
68
- if (isValidNumber(x)) {
69
- const xString = String(Number(x));
70
- if (xString === 'Infinity') {
71
- return 0;
72
- }
73
- const indexOfE = xString.indexOf('e');
74
- if (indexOfE >= 0) {
75
- return 0;
76
- }
77
- const indexOfDecimalPoint = xString.indexOf('.');
78
- if (indexOfDecimalPoint < 0) {
79
- return 0;
80
- }
81
- else {
82
- return xString.length - indexOfDecimalPoint - 1;
83
- }
84
- }
85
- return undefined;
86
- };
87
- const numberOfWholeDigits = (x) => {
88
- if (isValidNumber(x)) {
89
- let xString = String(Number(x));
90
- if (xString.indexOf('-') === 0) {
91
- xString = xString.slice(1, xString.length);
92
- }
93
- if (xString === 'Infinity') {
94
- return Infinity;
95
- }
96
- if (xString.indexOf('0') === 0) {
97
- xString = xString.slice(1, xString.length);
98
- }
99
- const indexOfE = xString.indexOf('e');
100
- if (indexOfE >= 0) {
101
- return Number(xString.slice(indexOfE + 1, xString.length)) + 1;
102
- }
103
- const indexOfDecimalPoint = xString.indexOf('.');
104
- if (indexOfDecimalPoint < 0) {
105
- return xString.length;
106
- }
107
- else {
108
- return indexOfDecimalPoint;
109
- }
110
- }
111
- return undefined;
112
- };
113
- const roundToMultipleOf = (x, modulo) => {
114
- const moduloString = String(modulo);
115
- // approximates the result
116
- // prone to inexactitude because of floating point arithmetic
117
- const approximation = Math.round(x / modulo) * modulo;
118
- const approximationString = String(approximation);
119
- // remove useless decimals
120
- const uselessDecimalsInApproximation = numberOfDecimalDigits(approximationString) -
121
- numberOfDecimalDigits(moduloString);
122
- const resultString = approximationString.slice(0, approximationString.length - uselessDecimalsInApproximation);
123
- return Number(resultString);
124
- };
125
- // other functions
126
- const isInitialAndEmpty = (previousValue, newValue) => {
127
- const isPrevArray = Array.isArray(previousValue);
128
- const isNewArray = Array.isArray(newValue);
129
- return !((isPrevArray ? previousValue.length !== 0 : Boolean(previousValue)) ||
130
- (isNewArray ? newValue.length !== 0 : Boolean(newValue)));
131
- };
132
-
133
- /** Language detector based on Navigator preferences */
134
- const languageDetector = () => {
135
- const lang = navigator.language.split('-')[0];
136
- if (lang === 'es' || lang === 'en') {
137
- return lang;
138
- }
139
- return 'en'; // default
140
- };
141
-
142
- const LOST_FOCUS_TIME_WINDOW_MS = 200; // ms
143
- class AutocompleteComponent {
144
- constructor(cd) {
145
- this.cd = cd;
146
- this.lostFocusHandled = true;
147
- this.t0 = 0;
148
- this.showSpinner = false;
149
- this.touched = false;
150
- this.completionList = [];
151
- this.showCompletion = false;
152
- this.valueChange = new EventEmitter();
153
- this.dataSourceChange = new EventEmitter();
154
- this.disabled = null;
155
- this.readonly = null;
156
- this.label = '';
157
- /** If canAddNewValues, user can type items not present in the data-source. */
158
- this.canAddNewValues = false;
159
- /** After cleaning the selection should the completion list remain open or closed:
160
- * false: (default) close on filters, to clean a filter and select all.
161
- * true: keep open (when the action most likely is to pick another one).
162
- */
163
- this.keepOpenAfterDelete = false;
164
- this.required = false;
165
- this.resolveLabelsFunction = undefined;
166
- this.populateFunction = undefined;
167
- // ControlValueAccessor Interface
168
- this.onChange = (value) => { };
169
- this.onTouched = () => { };
170
- }
171
- get value() {
172
- return this._value;
173
- }
174
- set value(v) {
175
- const initialAndEmpty = isInitialAndEmpty(this._value, v);
176
- this._value = v;
177
- this.onChange(v);
178
- this.completeLabel();
179
- if (!initialAndEmpty) {
180
- this.valueChange.emit(v);
181
- }
182
- }
183
- get dataSource() {
184
- return this._dataSource;
185
- }
186
- set dataSource(v) {
187
- this._dataSource = v;
188
- this.dataSourceChange.emit(v);
189
- }
190
- set placeholder(v) {
191
- this._placeholder = v;
192
- }
193
- get placeholder() {
194
- return this._placeholder ? this._placeholder : '';
195
- }
196
- writeValue(value) {
197
- this.value = value;
198
- }
199
- registerOnChange(onChange) {
200
- this.onChange = onChange;
201
- }
202
- registerOnTouched(onTouched) {
203
- this.onTouched = onTouched;
204
- }
205
- markAsTouched() {
206
- if (!this.touched && !this.disabled) {
207
- this.onTouched();
208
- this.touched = true;
209
- }
210
- }
211
- setDisabledState(disabled) {
212
- this.disabled = disabled;
213
- }
214
- // End ControlValueAccessor Interface
215
- // Validator interface
216
- registerOnValidatorChange() { }
217
- validate(control) {
218
- const value = control.value;
219
- if (this.required &&
220
- (value === '' || value === null || value === undefined)) {
221
- return { required: { value, reason: 'Required field.' } };
222
- }
223
- return null;
224
- }
225
- // End of Validator interface
226
- clear() {
227
- this.value = null;
228
- this.toggleCompletion(this.keepOpenAfterDelete, '');
229
- }
230
- completeLabel() {
231
- if (this.value) {
232
- if (this.dataSource) {
233
- this.label = findLabelForId(this.dataSource, this.value) || '';
234
- }
235
- else if (this.instance && this.resolveLabelsFunction) {
236
- this.resolveLabelsFunction(this.instance, [this.value])
237
- .pipe(debounceTime(1), first())
238
- .subscribe((data) => {
239
- this.label = findLabelForId(data, this.value) || '';
240
- });
241
- }
242
- }
243
- else {
244
- this.label = '';
245
- }
246
- }
247
- ngOnInit() {
248
- this.inputId = this.inputId
249
- ? this.inputId
250
- : `autocompletelist${AutocompleteComponent.idCounter++}`;
251
- this.completeLabel();
252
- }
253
- ngAfterViewInit() {
254
- this.setSameWidth();
255
- }
256
- onInputResized() {
257
- this.setSameWidth();
258
- }
259
- setSameWidth() {
260
- const width = this.i0.nativeElement.getBoundingClientRect().width;
261
- this.completeDiv.nativeElement.style.width = `${width}px`;
262
- }
263
- onKeydown(event, label) {
264
- switch (event.key) {
265
- case 'Tab':
266
- if (label) {
267
- this.pickSelectionOrFirstMatch(label);
268
- }
269
- this.showCompletion = false;
270
- break;
271
- }
272
- this.markAsTouched();
273
- }
274
- onKeypress(event, label) {
275
- switch (event.key) {
276
- case 'Intro':
277
- case 'Enter':
278
- this.pickSelectionOrFirstMatch(label);
279
- event.preventDefault();
280
- break;
281
- }
282
- this.markAsTouched();
283
- }
284
- onKeyup(event, label) {
285
- switch (event.key) {
286
- case 'PageDown':
287
- this.focusOnNext(5);
288
- event.preventDefault();
289
- break;
290
- case 'ArrowDown':
291
- this.focusOnNext(1);
292
- event.preventDefault();
293
- break;
294
- case 'PageUp':
295
- this.focusOnPrevious(5);
296
- event.preventDefault();
297
- break;
298
- case 'ArrowUp':
299
- this.focusOnPrevious(1);
300
- event.preventDefault();
301
- break;
302
- case 'Escape':
303
- this.complete(null);
304
- event.preventDefault();
305
- break;
306
- case 'Intro':
307
- case 'Enter':
308
- event.preventDefault();
309
- break;
310
- default:
311
- this.showCompletionList(label);
312
- // event.preventDefault();
313
- }
314
- this.markAsTouched();
315
- }
316
- focusOnNext(offset) {
317
- const list = this.completionList || [];
318
- const index = list.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
319
- const indexNext = -1 && list.length > index + offset ? index + offset : list.length - 1;
320
- const next = list[indexNext];
321
- this.focusItem = next;
322
- this.ensureItemVisible(index);
323
- }
324
- focusOnPrevious(offset) {
325
- const list = this.completionList || [];
326
- const index = list.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
327
- const indexPrevious = index !== -1 && index > offset ? index - offset : 0;
328
- const next = list[indexPrevious];
329
- this.focusItem = next;
330
- this.ensureItemVisible(index);
331
- }
332
- onLostFocus(label) {
333
- this.lostFocusHandled = false;
334
- this.t0 = performance.now();
335
- // console.log('Init LostFocus');
336
- setTimeout(() => {
337
- // needs to postpone actions some milliseconds to verify if
338
- // lost focus was followed by a list selection -> then cancel
339
- // if not -> make side effect
340
- if (!this.lostFocusHandled) {
341
- // console.log(
342
- // 'Lost focus 2',
343
- // this.lostFocusHandled,
344
- // 'SIDE EFFECT',
345
- // performance.now() - this.t0,
346
- // 'label:',
347
- // label
348
- // );
349
- if (label && this.label !== label) {
350
- this.pickSelectionOrFirstMatch(label);
351
- }
352
- else {
353
- this.lostFocusHandled = true;
354
- }
355
- this.toggleCompletion(false, label);
356
- }
357
- else {
358
- // do nothing (list selection took place)
359
- // console.log(
360
- // 'onlost focus 2',
361
- // this.lostFocusHandled,
362
- // 'nothing',
363
- // performance.now() - this.t0
364
- // );
365
- }
366
- }, LOST_FOCUS_TIME_WINDOW_MS);
367
- }
368
- complete(item) {
369
- if (!this.lostFocusHandled) {
370
- this.lostFocusHandled = true; // prevent a previous lostFocus to trigger a side effect
371
- const ellapsed = performance.now() - this.t0;
372
- if (ellapsed > LOST_FOCUS_TIME_WINDOW_MS) {
373
- console.warn('complete. lostfocus->click timeout of ', LOST_FOCUS_TIME_WINDOW_MS, 'ms exceed: ', performance.now() - this.t0, ' ms');
374
- }
375
- // console.log(
376
- // 'complete. set to true. CANCELED side effect',
377
- // performance.now() - this.t0
378
- // );
379
- }
380
- if (item !== null) {
381
- this.value = item.key;
382
- this.label = item.label;
383
- }
384
- else {
385
- this.value = null;
386
- this.label = '';
387
- }
388
- this.toggleCompletion(false, null);
389
- this.markAsTouched();
390
- }
391
- toggleCompletion(show, label) {
392
- if (show && !this.disabled) {
393
- this.i0.nativeElement.focus();
394
- this.showCompletionList(label);
395
- }
396
- else {
397
- this.showCompletion = false;
398
- if (this.canAddNewValues) {
399
- this.syncCustomValue(this.label);
400
- return;
401
- }
402
- }
403
- this.cd.markForCheck();
404
- }
405
- get selectedOption() {
406
- const index = this.completionList.findIndex((i) => i.key === this.focusItem.key);
407
- if (index === -1 || !this.focusItem) {
408
- return null;
409
- }
410
- return `${this.inputId}_${index}`;
411
- }
412
- ensureItemVisible(index) {
413
- const target = this.completeDiv.nativeElement.querySelectorAll('li')[index];
414
- if (target) {
415
- target.scrollIntoView({ block: 'center' });
416
- }
417
- }
418
- syncCustomValue(text) {
419
- this.value = text;
420
- this.label = text;
421
- }
422
- /** Pick selection based on text filtering (ingnores drowdown state) */
423
- pickSelectionOrFirstMatch(text) {
424
- if (this.canAddNewValues) {
425
- this.syncCustomValue(text);
426
- return;
427
- }
428
- const focusIndex = this.completionList.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
429
- if (this.showCompletion &&
430
- focusIndex > 0 &&
431
- this.focusItem &&
432
- this.focusItem.label) {
433
- if (text === this.focusItem.label && this.focusItem.key === this.value) {
434
- // do nothing if value does not change & close dropdow
435
- this.showCompletion = false;
436
- return;
437
- }
438
- // complete selected using selected item on drowdown
439
- this.complete(this.focusItem);
440
- return;
441
- }
442
- const source = (text || '').trim();
443
- if (!source) {
444
- this.showCompletion = false;
445
- // select null value
446
- if (this.value !== null) {
447
- this.value = null;
448
- }
449
- return;
450
- }
451
- this.completionList = [];
452
- this.computeCompletionList(source).subscribe((suggestions) => {
453
- const candidate = suggestions && suggestions.length > 0 ? suggestions[0] : null;
454
- this.complete(candidate);
455
- });
456
- }
457
- showCompletionList(text) {
458
- this.setSameWidth();
459
- const useSpinner = this.hasExternalDataSource();
460
- this.spinnerVisibility(useSpinner, true);
461
- setTimeout(() => {
462
- // for spinner to be shown
463
- this.computeCompletionList(text).subscribe({
464
- next: (cl) => {
465
- this.completionList = cl;
466
- this.focusItem = selectElement(this.completionList, text);
467
- this.showCompletion = true;
468
- this.spinnerVisibility(useSpinner, false);
469
- },
470
- error: () => {
471
- this.spinnerVisibility(useSpinner, false);
472
- },
473
- complete: () => {
474
- this.spinnerVisibility(useSpinner, false);
475
- }
476
- });
477
- }, 1);
478
- }
479
- spinnerVisibility(useSpinner, value) {
480
- if (useSpinner) {
481
- this.showSpinner = value;
482
- }
483
- }
484
- hasExternalDataSource() {
485
- return !this.dataSource && !!this.instance && !!this.populateFunction;
486
- }
487
- computeCompletionList(text) {
488
- const searchText = (text || '').toLowerCase();
489
- if (this.dataSource) {
490
- const ds = (this.dataSource || [])
491
- .filter((it) => ignoreAccentsInclude(it.label, searchText))
492
- .sort((a, b) => a.label.localeCompare(b.label));
493
- return of(decorateDataSource(ds, searchText));
494
- }
495
- else if (this.instance && this.populateFunction) {
496
- return this.populateFunction(this.instance, searchText).pipe(debounceTime(1), first(), map((ds) => {
497
- const dsFiltered = ds
498
- .filter((it) => ignoreAccentsInclude(it.label, searchText))
499
- .sort((a, b) => a.label.localeCompare(b.label));
500
- return decorateDataSource(dsFiltered, searchText);
501
- }));
502
- }
503
- else {
504
- return of([]);
505
- }
506
- }
507
- }
508
- AutocompleteComponent.idCounter = 0;
509
- AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
510
- AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: { inputId: "inputId", disabled: "disabled", readonly: "readonly", label: "label", canAddNewValues: "canAddNewValues", keepOpenAfterDelete: "keepOpenAfterDelete", value: "value", dataSource: "dataSource", required: "required", placeholder: "placeholder", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange", dataSourceChange: "dataSourceChange" }, providers: [
511
- {
512
- provide: NG_VALUE_ACCESSOR,
513
- multi: true,
514
- useExisting: forwardRef(() => AutocompleteComponent)
515
- },
516
- {
517
- provide: NG_VALIDATORS,
518
- multi: true,
519
- useExisting: forwardRef(() => AutocompleteComponent)
520
- }
521
- ], viewQueries: [{ propertyName: "i0", first: true, predicate: ["i0"], descendants: true, static: true }, { propertyName: "completeDiv", first: true, predicate: ["completeDiv"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\n <div class=\"lux-autocomplete-box\">\n <input\n #i0\n [id]=\"inputId\"\n [(ngModel)]=\"label\"\n [placeholder]=\"placeholder\"\n [attr.disabled]=\"disabled || null\"\n [attr.readonly]=\"readonly || null\"\n (keydown)=\"onKeydown($event, i0.value)\"\n (keypress)=\"onKeypress($event, i0.value)\"\n (keyup)=\"onKeyup($event, i0.value)\"\n (blur)=\"onLostFocus(i0.value)\"\n (focus)=\"toggleCompletion(true, i0.value)\"\n (click)=\"toggleCompletion(true, i0.value)\"\n (resized)=\"onInputResized()\"\n (window:resize)=\"onInputResized()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"showCompletion\"\n aria-haspopup=\"true\"\n attr.aria-owns=\"{{ inputId + '_list' }}\"\n [attr.aria-activedescendant]=\"selectedOption\"\n />\n <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n <ng-template #noLoading>\n <button\n *ngIf=\"!disabled && i0.value && !showCompletion; else dropdown\"\n type=\"button\"\n class=\"icon-clear\"\n aria-label=\"Clear\"\n (click)=\"clear()\"\n ></button>\n <ng-template #dropdown>\n <div\n class=\"icon-dropdown\"\n (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n ></div>\n </ng-template>\n </ng-template>\n </div>\n <div\n #completeDiv\n [class.showCompletion]=\"showCompletion\"\n class=\"lux-completion-list\"\n id=\"{{ inputId + '_list' }}\"\n >\n <ul>\n <li\n *ngFor=\"let item of completionList; let index = index\"\n id=\"{{ inputId + '_' + index }}\"\n class=\"lux-completion-item\"\n [class.selected]=\"focusItem && item.key === focusItem.key\"\n (click)=\"complete(item)\"\n [attr.aria-label]=\"item.label\"\n >\n <span class=\"preserve-white-space\">{{ item.labelPrefix }}</span>\n <span class=\"preserve-white-space bold\">{{ item.labelMatch }}</span>\n <span class=\"preserve-white-space\">{{ item.labelPostfix }}</span>\n </li>\n </ul>\n </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:.1rem 1.5rem .1rem .5rem;padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);height:1.3rem;height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:url(/assets/img/drop-down-arrow.svg) no-repeat center;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin:0rem;padding:0rem;max-height:10rem;overflow:auto;z-index:2}.lux-completion-list ul{list-style:none;margin:0rem;padding:0rem}.showCompletion{visibility:visible}.lux-completion-item{background-color:#fff;color:#000;padding:.1rem .5rem;cursor:pointer}.selected{background-color:#2e2eac;color:#fff}.disabled{background-color:#f0f0f0;color:#444}.disabled .selected{background-color:#9898ec;color:#fff}.bold{font-weight:700}.preserve-white-space{white-space:pre}\n"], dependencies: [{ kind: "directive", type: i1.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
522
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
523
- type: Component,
524
- args: [{ selector: 'lux-autocomplete', providers: [
525
- {
526
- provide: NG_VALUE_ACCESSOR,
527
- multi: true,
528
- useExisting: forwardRef(() => AutocompleteComponent)
529
- },
530
- {
531
- provide: NG_VALIDATORS,
532
- multi: true,
533
- useExisting: forwardRef(() => AutocompleteComponent)
534
- }
535
- ], template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\n <div class=\"lux-autocomplete-box\">\n <input\n #i0\n [id]=\"inputId\"\n [(ngModel)]=\"label\"\n [placeholder]=\"placeholder\"\n [attr.disabled]=\"disabled || null\"\n [attr.readonly]=\"readonly || null\"\n (keydown)=\"onKeydown($event, i0.value)\"\n (keypress)=\"onKeypress($event, i0.value)\"\n (keyup)=\"onKeyup($event, i0.value)\"\n (blur)=\"onLostFocus(i0.value)\"\n (focus)=\"toggleCompletion(true, i0.value)\"\n (click)=\"toggleCompletion(true, i0.value)\"\n (resized)=\"onInputResized()\"\n (window:resize)=\"onInputResized()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"showCompletion\"\n aria-haspopup=\"true\"\n attr.aria-owns=\"{{ inputId + '_list' }}\"\n [attr.aria-activedescendant]=\"selectedOption\"\n />\n <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n <ng-template #noLoading>\n <button\n *ngIf=\"!disabled && i0.value && !showCompletion; else dropdown\"\n type=\"button\"\n class=\"icon-clear\"\n aria-label=\"Clear\"\n (click)=\"clear()\"\n ></button>\n <ng-template #dropdown>\n <div\n class=\"icon-dropdown\"\n (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n ></div>\n </ng-template>\n </ng-template>\n </div>\n <div\n #completeDiv\n [class.showCompletion]=\"showCompletion\"\n class=\"lux-completion-list\"\n id=\"{{ inputId + '_list' }}\"\n >\n <ul>\n <li\n *ngFor=\"let item of completionList; let index = index\"\n id=\"{{ inputId + '_' + index }}\"\n class=\"lux-completion-item\"\n [class.selected]=\"focusItem && item.key === focusItem.key\"\n (click)=\"complete(item)\"\n [attr.aria-label]=\"item.label\"\n >\n <span class=\"preserve-white-space\">{{ item.labelPrefix }}</span>\n <span class=\"preserve-white-space bold\">{{ item.labelMatch }}</span>\n <span class=\"preserve-white-space\">{{ item.labelPostfix }}</span>\n </li>\n </ul>\n </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:.1rem 1.5rem .1rem .5rem;padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);height:1.3rem;height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:url(/assets/img/drop-down-arrow.svg) no-repeat center;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin:0rem;padding:0rem;max-height:10rem;overflow:auto;z-index:2}.lux-completion-list ul{list-style:none;margin:0rem;padding:0rem}.showCompletion{visibility:visible}.lux-completion-item{background-color:#fff;color:#000;padding:.1rem .5rem;cursor:pointer}.selected{background-color:#2e2eac;color:#fff}.disabled{background-color:#f0f0f0;color:#444}.disabled .selected{background-color:#9898ec;color:#fff}.bold{font-weight:700}.preserve-white-space{white-space:pre}\n"] }]
536
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { i0: [{
537
- type: ViewChild,
538
- args: ['i0', { static: true }]
539
- }], completeDiv: [{
540
- type: ViewChild,
541
- args: ['completeDiv', { static: true }]
542
- }], valueChange: [{
543
- type: Output
544
- }], dataSourceChange: [{
545
- type: Output
546
- }], inputId: [{
547
- type: Input
548
- }], disabled: [{
549
- type: Input
550
- }], readonly: [{
551
- type: Input
552
- }], label: [{
553
- type: Input
554
- }], canAddNewValues: [{
555
- type: Input
556
- }], keepOpenAfterDelete: [{
557
- type: Input
558
- }], value: [{
559
- type: Input
560
- }], dataSource: [{
561
- type: Input
562
- }], required: [{
563
- type: Input
564
- }], placeholder: [{
565
- type: Input
566
- }], resolveLabelsFunction: [{
567
- type: Input
568
- }], populateFunction: [{
569
- type: Input
570
- }], instance: [{
571
- type: Input
572
- }] } });
573
- /** Returns true if text includes substring. No accents considered. Ignorecase */
574
- const ignoreAccentsInclude = (text, substring) => {
575
- text = normalizedString(text).toLowerCase();
576
- substring = normalizedString(substring).toLowerCase();
577
- return text.includes(substring);
578
- };
579
- /** Returns a normalized string with no accents: used for comparison */
580
- const normalizedString = (a) => (a || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '');
581
- const decorateDataSource = (dataSource, subString) => dataSource.map((it) => decorateItem(it, subString));
582
- const decorateItem = (item, tx) => {
583
- const index = normalizedString(item.label)
584
- .toLowerCase()
585
- .indexOf(normalizedString(tx).toLowerCase());
586
- const labelPrefix = index === -1 ? item.label : item.label.substr(0, index);
587
- const labelMatch = index === -1 ? '' : item.label.substr(index, tx.length);
588
- const labelPostfix = index === -1 ? '' : item.label.substr(index + tx.length);
589
- const newItem = Object.assign(Object.assign({}, item), { labelPrefix,
590
- labelMatch,
591
- labelPostfix });
592
- return newItem;
593
- };
594
- const findLabelForId = (data, id) => {
595
- const found = data.find((it) => it.key === id);
596
- return found ? found.label : null;
597
- };
598
- const selectElement = (completionList, label) => {
599
- label = (label || '').toLowerCase();
600
- if (!completionList || completionList.length === 0) {
601
- return null;
602
- }
603
- if (completionList.length === 1) {
604
- return completionList[0];
605
- }
606
- const found = completionList.find((it) => it.label.toLowerCase() === label);
607
- return found || completionList[0];
608
- };
609
-
610
- class AutocompleteListComponent {
611
- constructor() {
612
- this.literals = {
613
- en: {
614
- placeholder: 'new item',
615
- deleteLabelTemplate: 'Delete <<label>>',
616
- addMessage: 'Add'
617
- },
618
- es: {
619
- placeholder: 'nuevo elemento',
620
- deleteLabelTemplate: 'Eliminar <<label>>',
621
- addMessage: 'Añadir'
622
- }
623
- };
624
- this.internalDataSource = [];
625
- this.autoPopulate = false;
626
- this._value = [];
627
- this.labels = [];
628
- this.canAdd = false;
629
- this.touched = false;
630
- this._lang = languageDetector();
631
- this.dataSource = [];
632
- this.disabled = false;
633
- this.required = false;
634
- this.resolveLabelsFunction = undefined;
635
- this.populateFunction = undefined;
636
- this.valueChange = new EventEmitter();
637
- // ControlValueAccessor Interface
638
- this.onChange = (value) => { };
639
- this.onTouched = () => { };
640
- }
641
- set value(val) {
642
- if (val === this._value) {
643
- return;
644
- }
645
- const initialAndEmpty = isInitialAndEmpty(this._value, val);
646
- this._value = val;
647
- this.ensureLabelsForIds();
648
- this.populateWith('');
649
- this.onChange(this._value);
650
- if (!initialAndEmpty) {
651
- this.valueChange.emit(this._value);
652
- }
653
- }
654
- get value() {
655
- return this._value;
656
- }
657
- get lang() {
658
- return this._lang;
659
- }
660
- set lang(l) {
661
- if (l === this._lang) {
662
- return;
663
- }
664
- if (Object.keys(this.literals).includes(l)) {
665
- this._lang = l;
666
- }
667
- else {
668
- this._lang = 'en';
669
- }
670
- }
671
- writeValue(value) {
672
- this.value = value;
673
- }
674
- registerOnChange(onChange) {
675
- this.onChange = onChange;
676
- }
677
- registerOnTouched(onTouched) {
678
- this.onTouched = onTouched;
679
- }
680
- markAsTouched() {
681
- if (!this.touched && !this.disabled) {
682
- this.onTouched();
683
- this.touched = true;
684
- }
685
- }
686
- setDisabledState(disabled) {
687
- this.disabled = disabled;
688
- }
689
- // End ControlValueAccessor Interface
690
- // Validator interface
691
- registerOnValidatorChange() { }
692
- validate(control) {
693
- const value = control.value;
694
- if (this.required &&
695
- (value === '' || value === null || value === undefined)) {
696
- return { required: { value, reason: 'Required field.' } };
697
- }
698
- return null;
699
- }
700
- // End of Validator interface
701
- ngOnInit() {
702
- this.inputId = this.inputId
703
- ? this.inputId
704
- : `autocompletelist${AutocompleteListComponent.idCounter++}`;
705
- this.autoPopulate =
706
- !!this.resolveLabelsFunction && !!this.populateFunction && this.instance;
707
- this.ensureLabelsForIds();
708
- }
709
- ensureLabelsForIds() {
710
- if (this.autoPopulate && this.resolveLabelsFunction) {
711
- this.resolveLabelsFunction(this.instance, this._value)
712
- .pipe(first())
713
- .subscribe((data) => {
714
- const res = [];
715
- (this._value || []).map((id) => {
716
- const found = data.find((it) => it.key === id);
717
- if (found) {
718
- res.push(found.label);
719
- }
720
- else {
721
- res.push('(unset)');
722
- }
723
- });
724
- this.labels = res;
725
- });
726
- }
727
- else if (this.dataSource) {
728
- const res = [];
729
- (this._value || []).map((id) => {
730
- const found = this.dataSource.find((it) => it.key === id);
731
- if (found) {
732
- res.push(found.label);
733
- }
734
- else {
735
- res.push('(unset)');
736
- }
737
- });
738
- this.labels = res;
739
- }
740
- else {
741
- this.labels = this._value.map((it) => (it ? it.toString() : '(unset)'));
742
- }
743
- }
744
- removeAt(index) {
745
- if (this._value.length > index) {
746
- const key = this._value.splice(index, 1)[0];
747
- const label = this.labels.splice(index, 1)[0];
748
- this.internalDataSource.push({ key, label });
749
- }
750
- this.markAsTouched();
751
- }
752
- onValueChange() {
753
- this.updateCanAdd();
754
- }
755
- onNewEntryChange(event, auto) {
756
- if (event.key === 'Enter' && !!auto.value) {
757
- this.addNew(auto);
758
- }
759
- else if (event.key === 'Delete' || event.key === 'Backspace') {
760
- // todo
761
- }
762
- else {
763
- this.populateWith(auto.label + event.key);
764
- }
765
- this.updateCanAdd();
766
- }
767
- populateWith(searchText) {
768
- if (this.autoPopulate && this.populateFunction && this.instance) {
769
- this.populateFunction(this.instance, searchText)
770
- .pipe(first())
771
- .subscribe((data) => {
772
- this.internalDataSource = data.filter((it) => !(this._value || []).includes(it.key));
773
- });
774
- }
775
- else if (this.dataSource) {
776
- this.internalDataSource = this.dataSource.filter((it) => !(this._value || []).includes(it.key));
777
- }
778
- }
779
- updateCanAdd() {
780
- this.canAdd =
781
- !this.disabled &&
782
- this.auto &&
783
- !!this.auto.value && // has value
784
- !this.value.find((it) => it === this.auto.value); // not already in
785
- }
786
- addNew(auto) {
787
- this.value.push(auto.value);
788
- this.ensureLabelsForIds();
789
- this.newEntry = '';
790
- this.internalDataSource = this.internalDataSource.filter((it) => !this._value.includes(it.key));
791
- this.markAsTouched();
792
- }
793
- getDeleteMessage(label) {
794
- var _a;
795
- return ((_a = this.deleteLabelTemplate) !== null && _a !== void 0 ? _a : this.literals[this.lang].deleteLabelTemplate).replace('<<label>>', label);
796
- }
797
- }
798
- AutocompleteListComponent.idCounter = 0;
799
- AutocompleteListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
800
- AutocompleteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AutocompleteListComponent, selector: "lux-autocomplete-list", inputs: { value: "value", lang: "lang", inputId: "inputId", dataSource: "dataSource", placeholder: "placeholder", disabled: "disabled", deleteLabelTemplate: "deleteLabelTemplate", addMessage: "addMessage", required: "required", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange" }, providers: [
801
- {
802
- provide: NG_VALUE_ACCESSOR,
803
- multi: true,
804
- useExisting: forwardRef(() => AutocompleteListComponent)
805
- },
806
- {
807
- provide: NG_VALIDATORS,
808
- multi: true,
809
- useExisting: forwardRef(() => AutocompleteListComponent)
810
- }
811
- ], viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<div [id]=\"inputId\">\n <ul>\n <li *ngFor=\"let label of labels; let index = index\">\n <span>{{ label }}</span>\n <button\n *ngIf=\"!disabled\"\n class=\"remove-item\"\n (click)=\"removeAt(index)\"\n attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n ></button>\n </li>\n </ul>\n <div *ngIf=\"!disabled\" class=\"new-entry\">\n <lux-autocomplete\n #auto\n [dataSource]=\"internalDataSource\"\n [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n [(value)]=\"newEntry\"\n (valueChange)=\"onValueChange()\"\n (keypress)=\"onNewEntryChange($event, auto)\"\n >\n </lux-autocomplete>\n <button\n *ngIf=\"canAdd\"\n type=\"button\"\n class=\"add-item\"\n attr.aria-label=\"addMessage ?? literals[lang].addMessage\"\n (click)=\"addNew(auto)\"\n ></button>\n </div>\n</div>\n", styles: [".new-entry{margin-left:1.5rem;display:grid;grid-template-columns:-webkit-max-content -webkit-max-content;grid-template-columns:max-content max-content}.new-entry lux-autocomplete{grid-column:1;grid-row:1}.new-entry .add-item{grid-column:2;grid-row:1;border:none;background:url(/assets/img/create.png) no-repeat .2rem .2rem;background:var(--lux-autocomplete-list-add-icon, url(/assets/img/create.png) no-repeat .2rem .2rem);background-size:1.1rem;background-size:var(--lux-autocomplete-list-add-icon-size, 1.1rem);height:1.4rem;height:var(--lux-autocomplete-list-add-icon-height, 1.4rem);width:1.4rem;width:var(--lux-autocomplete-list-add-icon-width, 1.4rem)}.remove-item{margin-left:.5rem;border:none;background:url(/assets/img/delete.svg) no-repeat .2rem .1rem;background:var(--lux-autocomplete-list-remove-icon, url(/assets/img/delete.svg) no-repeat .2rem .1rem);height:1.2rem;height:var(--lux-autocomplete-list-remove-icon-height, 1.2rem);width:1.3rem;width:var(--lux-autocomplete-list-remove-icon-width, 1.3rem);position:relative;top:.2rem;top:var(--lux-autocomplete-list-remove-icon-top, .2rem);background-size:1rem 1rem;background-size:var(--lux-autocomplete-list-remove-icon-size, 1rem 1rem)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }] });
812
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteListComponent, decorators: [{
813
- type: Component,
814
- args: [{ selector: 'lux-autocomplete-list', providers: [
815
- {
816
- provide: NG_VALUE_ACCESSOR,
817
- multi: true,
818
- useExisting: forwardRef(() => AutocompleteListComponent)
819
- },
820
- {
821
- provide: NG_VALIDATORS,
822
- multi: true,
823
- useExisting: forwardRef(() => AutocompleteListComponent)
824
- }
825
- ], template: "<div [id]=\"inputId\">\n <ul>\n <li *ngFor=\"let label of labels; let index = index\">\n <span>{{ label }}</span>\n <button\n *ngIf=\"!disabled\"\n class=\"remove-item\"\n (click)=\"removeAt(index)\"\n attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n ></button>\n </li>\n </ul>\n <div *ngIf=\"!disabled\" class=\"new-entry\">\n <lux-autocomplete\n #auto\n [dataSource]=\"internalDataSource\"\n [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n [(value)]=\"newEntry\"\n (valueChange)=\"onValueChange()\"\n (keypress)=\"onNewEntryChange($event, auto)\"\n >\n </lux-autocomplete>\n <button\n *ngIf=\"canAdd\"\n type=\"button\"\n class=\"add-item\"\n attr.aria-label=\"addMessage ?? literals[lang].addMessage\"\n (click)=\"addNew(auto)\"\n ></button>\n </div>\n</div>\n", styles: [".new-entry{margin-left:1.5rem;display:grid;grid-template-columns:-webkit-max-content -webkit-max-content;grid-template-columns:max-content max-content}.new-entry lux-autocomplete{grid-column:1;grid-row:1}.new-entry .add-item{grid-column:2;grid-row:1;border:none;background:url(/assets/img/create.png) no-repeat .2rem .2rem;background:var(--lux-autocomplete-list-add-icon, url(/assets/img/create.png) no-repeat .2rem .2rem);background-size:1.1rem;background-size:var(--lux-autocomplete-list-add-icon-size, 1.1rem);height:1.4rem;height:var(--lux-autocomplete-list-add-icon-height, 1.4rem);width:1.4rem;width:var(--lux-autocomplete-list-add-icon-width, 1.4rem)}.remove-item{margin-left:.5rem;border:none;background:url(/assets/img/delete.svg) no-repeat .2rem .1rem;background:var(--lux-autocomplete-list-remove-icon, url(/assets/img/delete.svg) no-repeat .2rem .1rem);height:1.2rem;height:var(--lux-autocomplete-list-remove-icon-height, 1.2rem);width:1.3rem;width:var(--lux-autocomplete-list-remove-icon-width, 1.3rem);position:relative;top:.2rem;top:var(--lux-autocomplete-list-remove-icon-top, .2rem);background-size:1rem 1rem;background-size:var(--lux-autocomplete-list-remove-icon-size, 1rem 1rem)}\n"] }]
826
- }], propDecorators: { auto: [{
827
- type: ViewChild,
828
- args: ['auto']
829
- }], value: [{
830
- type: Input
831
- }], lang: [{
832
- type: Input
833
- }], inputId: [{
834
- type: Input
835
- }], dataSource: [{
836
- type: Input
837
- }], placeholder: [{
838
- type: Input
839
- }], disabled: [{
840
- type: Input
841
- }], deleteLabelTemplate: [{
842
- type: Input
843
- }], addMessage: [{
844
- type: Input
845
- }], required: [{
846
- type: Input
847
- }], resolveLabelsFunction: [{
848
- type: Input
849
- }], populateFunction: [{
850
- type: Input
851
- }], instance: [{
852
- type: Input
853
- }], valueChange: [{
854
- type: Output
855
- }] } });
856
-
857
- class LuxBreadcrumbComponent {
858
- constructor(route, activedRoute) {
859
- this.route = route;
860
- this.activedRoute = activedRoute;
861
- this.subs = [];
862
- this.imagePath = '../assets/img/arrow-forward.svg';
863
- }
864
- ngOnInit() {
865
- this.subs.push(this.route.events
866
- .pipe(filter((event) => event instanceof NavigationEnd))
867
- .subscribe((_) => {
868
- this.breadcrumbs = [];
869
- this.addBreadcrumbs(this.activedRoute.snapshot.root, true, null);
870
- }));
871
- }
872
- ngOnDestroy() {
873
- this.subs.forEach((s) => s.unsubscribe());
874
- this.subs = [];
875
- }
876
- addBreadcrumbs(activedRouteSnapshot, isRoot, urlPrefix) {
877
- const routeConfig = activedRouteSnapshot.routeConfig;
878
- let url = urlPrefix || '';
879
- url += routeConfig ? '/' + this.getUrl(activedRouteSnapshot) : '';
880
- const label = routeConfig
881
- ? this.getLabel(activedRouteSnapshot)
882
- : isRoot
883
- ? 'Home'
884
- : '';
885
- if (label && url !== '/') {
886
- const breadcrumb = { label, url };
887
- this.breadcrumbs.push(breadcrumb);
888
- }
889
- if (activedRouteSnapshot.children.length) {
890
- this.addBreadcrumbs(activedRouteSnapshot.children[0], false, url);
891
- }
892
- }
893
- getUrl(activedRouteSnapshot) {
894
- if (!activedRouteSnapshot.url[0]) {
895
- return '';
896
- }
897
- const id = activedRouteSnapshot.params.id;
898
- return id
899
- ? `${activedRouteSnapshot.url[0]}/${id}`
900
- : activedRouteSnapshot.routeConfig.path || '';
901
- }
902
- getLabel(activedRouteSnapshot) {
903
- const routeConfig = activedRouteSnapshot.routeConfig;
904
- if (!routeConfig) {
905
- return null;
906
- }
907
- if (activedRouteSnapshot.data && activedRouteSnapshot.data.title) {
908
- const data = activedRouteSnapshot.data;
909
- if (data.objectTitle) {
910
- return `${data.title} ${data.objectTitle}`;
911
- }
912
- else {
913
- return data.title;
914
- }
915
- }
916
- return activedRouteSnapshot.params.id || routeConfig.path;
917
- }
918
- }
919
- LuxBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxBreadcrumbComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
920
- LuxBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LuxBreadcrumbComponent, selector: "lux-breadcrumb", ngImport: i0, template: "<ul class=\"lux-breadcrumb\">\n <li *ngFor=\"let breadcrumb of breadcrumbs; last as isLast; first as isFirst\"\n class=\"lux-breadcrumb-item\">\n <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{ breadcrumb.label }}</a>\n <div *ngIf=\"!isLast\" class=\"lux-breadcrumb-separator\"></div>\n </li>\n</ul>\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 512 512%22%3E %3Cpath d%3D%22M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
921
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
922
- type: Component,
923
- args: [{ selector: 'lux-breadcrumb', template: "<ul class=\"lux-breadcrumb\">\n <li *ngFor=\"let breadcrumb of breadcrumbs; last as isLast; first as isFirst\"\n class=\"lux-breadcrumb-item\">\n <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{ breadcrumb.label }}</a>\n <div *ngIf=\"!isLast\" class=\"lux-breadcrumb-separator\"></div>\n </li>\n</ul>\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 512 512%22%3E %3Cpath d%3D%22M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;display:inline-block}\n"] }]
924
- }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
925
-
926
- const KEY_SPACE = ' ';
927
- class CheckboxComponent {
928
- constructor() {
929
- this._lang = languageDetector();
930
- this.label = null;
931
- this.name = null;
932
- this._disabled = false;
933
- this.literals = {
934
- en: {
935
- yesLabel: 'Yes',
936
- noLabel: 'No'
937
- },
938
- es: {
939
- yesLabel: 'Sí',
940
- noLabel: 'No'
941
- }
942
- };
943
- this.touched = false;
944
- this.valueChange = new EventEmitter();
945
- // ControlValueAccessor Interface
946
- this.onChange = (value) => { };
947
- this.onTouched = () => { };
948
- }
949
- set lang(l) {
950
- if (l === this._lang) {
951
- return;
952
- }
953
- if (Object.keys(this.literals).includes(l)) {
954
- this._lang = l;
955
- }
956
- else {
957
- this._lang = 'en';
958
- }
959
- }
960
- get lang() {
961
- return this._lang;
962
- }
963
- get value() {
964
- return this.internalValue;
965
- }
966
- set value(v) {
967
- if (this.internalValue === v) {
968
- return;
969
- }
970
- const initialAndEmpty = isInitialAndEmpty(this.internalValue, v);
971
- this.internalValue = v;
972
- this.syncModel();
973
- this.onChange(v);
974
- if (!initialAndEmpty) {
975
- this.valueChange.emit(v);
976
- }
977
- }
978
- get tabindexValue() {
979
- return this.disabled ? null : '0';
980
- }
981
- get disabled() {
982
- return this._disabled;
983
- }
984
- set disabled(v) {
985
- if (v === this._disabled) {
986
- return;
987
- }
988
- this._disabled = v;
989
- this.syncModel();
990
- }
991
- writeValue(value) {
992
- this.value = !!value;
993
- }
994
- registerOnChange(onChange) {
995
- this.onChange = onChange;
996
- }
997
- registerOnTouched(onTouched) {
998
- this.onTouched = onTouched;
999
- }
1000
- markAsTouched() {
1001
- if (!this.touched) {
1002
- this.onTouched();
1003
- this.touched = true;
1004
- }
1005
- }
1006
- setDisabledState(disabled) {
1007
- this.disabled = disabled;
1008
- }
1009
- // End ControlValueAccessor Interface
1010
- ngOnInit() {
1011
- this.inputId = this.inputId
1012
- ? this.inputId
1013
- : `${this.name || 'checkbox'}$${CheckboxComponent.idCounter++}`;
1014
- }
1015
- ngAfterViewInit() {
1016
- this.syncModel();
1017
- }
1018
- clicked() {
1019
- if (!this.disabled) {
1020
- this.value = !this.internalValue;
1021
- this.markAsTouched();
1022
- }
1023
- }
1024
- onKey(event) {
1025
- if (event.key === KEY_SPACE && !this.disabled) {
1026
- this.value = !this.internalValue;
1027
- this.markAsTouched();
1028
- event.preventDefault();
1029
- }
1030
- }
1031
- syncModel() {
1032
- if (this.ck) {
1033
- this.ck.nativeElement.checked = this.internalValue;
1034
- }
1035
- }
1036
- }
1037
- CheckboxComponent.idCounter = 0;
1038
- CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1039
- CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CheckboxComponent, selector: "lux-checkbox", inputs: { lang: "lang", value: "value", label: "label", name: "name", disabled: "disabled", inputId: "inputId" }, outputs: { valueChange: "valueChange" }, providers: [
1040
- {
1041
- provide: NG_VALUE_ACCESSOR,
1042
- multi: true,
1043
- useExisting: forwardRef(() => CheckboxComponent)
1044
- }
1045
- ], viewQueries: [{ propertyName: "ck", first: true, predicate: ["ck"], descendants: true }], ngImport: i0, template: "<div class=\"switch\">\n <div>\n <label *ngIf=\"label\" [for]=\"inputId\">{{ label }}</label>\n </div>\n <div *ngIf=\"!disabled\" class=\"switch-item\" (click)=\"clicked()\">\n <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\n <div\n class=\"slider round\"\n [class.on]=\"value\"\n [class.disabled]=\"disabled\"\n [tabindex]=\"tabindexValue\"\n (keyup)=\"onKey($event)\"\n ></div>\n </div>\n <div>\n <span class=\"checkbox-label\" *ngIf=\"value\">{{\n literals[lang].yesLabel\n }}</span>\n <span class=\"checkbox-label\" *ngIf=\"!value\">{{\n literals[lang].noLabel\n }}</span>\n </div>\n</div>\n", styles: [".switch{display:flex;flex-flow:row wrap;align-items:center}label{padding-right:1.1rem}.switch-item{padding-right:.5em}.slider.round{border-radius:.7rem;width:3.1rem;height:1.4rem}.slider.round:before{border-radius:50%}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;position:relative;top:-.7rem;background-color:#ccc;transition:.4s}.slider.on{background-color:#2196f3}.slider:before{position:absolute;content:\"\";height:1rem;width:1rem;left:.2rem;bottom:.2rem;background-color:#fff;transition:.4s}.slider.on:before{transform:translate(26px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1046
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CheckboxComponent, decorators: [{
1047
- type: Component,
1048
- args: [{ selector: 'lux-checkbox', providers: [
1049
- {
1050
- provide: NG_VALUE_ACCESSOR,
1051
- multi: true,
1052
- useExisting: forwardRef(() => CheckboxComponent)
1053
- }
1054
- ], template: "<div class=\"switch\">\n <div>\n <label *ngIf=\"label\" [for]=\"inputId\">{{ label }}</label>\n </div>\n <div *ngIf=\"!disabled\" class=\"switch-item\" (click)=\"clicked()\">\n <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\n <div\n class=\"slider round\"\n [class.on]=\"value\"\n [class.disabled]=\"disabled\"\n [tabindex]=\"tabindexValue\"\n (keyup)=\"onKey($event)\"\n ></div>\n </div>\n <div>\n <span class=\"checkbox-label\" *ngIf=\"value\">{{\n literals[lang].yesLabel\n }}</span>\n <span class=\"checkbox-label\" *ngIf=\"!value\">{{\n literals[lang].noLabel\n }}</span>\n </div>\n</div>\n", styles: [".switch{display:flex;flex-flow:row wrap;align-items:center}label{padding-right:1.1rem}.switch-item{padding-right:.5em}.slider.round{border-radius:.7rem;width:3.1rem;height:1.4rem}.slider.round:before{border-radius:50%}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;position:relative;top:-.7rem;background-color:#ccc;transition:.4s}.slider.on{background-color:#2196f3}.slider:before{position:absolute;content:\"\";height:1rem;width:1rem;left:.2rem;bottom:.2rem;background-color:#fff;transition:.4s}.slider.on:before{transform:translate(26px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] }]
1055
- }], ctorParameters: function () { return []; }, propDecorators: { ck: [{
1056
- type: ViewChild,
1057
- args: ['ck', { static: false }]
1058
- }], lang: [{
1059
- type: Input
1060
- }], value: [{
1061
- type: Input
1062
- }], label: [{
1063
- type: Input
1064
- }], name: [{
1065
- type: Input
1066
- }], disabled: [{
1067
- type: Input
1068
- }], inputId: [{
1069
- type: Input
1070
- }], valueChange: [{
1071
- type: Output
1072
- }] } });
1073
-
1074
- class DatetimeComponent {
1075
- constructor() {
1076
- this.touched = false;
1077
- this.dirty = false;
1078
- this.lastErrors = null;
1079
- this.dateValue = undefined;
1080
- this.timeValue = undefined;
1081
- this.userErrors = {
1082
- en: {
1083
- required: 'Required field.',
1084
- min: 'Minimum value is $min.',
1085
- max: 'Maximum value is $max.'
1086
- },
1087
- es: {
1088
- required: 'El campo es obligatorio.',
1089
- min: 'El valor mínimo es $min.',
1090
- max: 'El valor máximo es $max.'
1091
- }
1092
- };
1093
- this.min = '1900-01-01T00:00:00Z';
1094
- this.max = '2100-01-01T00:00:00Z';
1095
- this.includeSeconds = true;
1096
- this.localTime = true;
1097
- this.lang = languageDetector();
1098
- this.inlineErrors = false;
1099
- this.readonly = null;
1100
- this.valueChange = new EventEmitter();
1101
- this.keyPress = new EventEmitter();
1102
- this.onChange = (_value) => { };
1103
- this.onTouched = () => { };
1104
- }
1105
- get className() {
1106
- return this.checkClassName();
1107
- }
1108
- set disabled(v) {
1109
- v = typeof v === 'string' && v !== 'false' ? true : v;
1110
- this._disabled = v;
1111
- }
1112
- get disabled() {
1113
- return this._disabled;
1114
- }
1115
- set required(v) {
1116
- this._required = v;
1117
- }
1118
- get required() {
1119
- return this._required;
1120
- }
1121
- set value(v) {
1122
- if (v === this._value) {
1123
- return; // prevent events when there is no changes
1124
- }
1125
- const initialAndEmpty = isInitialAndEmpty(this._value, v);
1126
- const datetime = new Date(v);
1127
- if (!v) {
1128
- this._value = null;
1129
- this.setDateInControl(null);
1130
- this.setTimeInControl(null);
1131
- }
1132
- else if (!isValidDate(datetime)) {
1133
- this._value = v;
1134
- // we don't set value in control if the value is not valid
1135
- // if we do, the content of the control changes and can erase what the user is typing
1136
- }
1137
- else {
1138
- this._value = datetime.toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
1139
- this.setValueInControl(datetime);
1140
- }
1141
- this.onChange(v);
1142
- if (!initialAndEmpty) {
1143
- this.valueChange.emit(v);
1144
- }
1145
- }
1146
- get value() {
1147
- return this._value;
1148
- }
1149
- // ControlValueAccessor Interface implementation
1150
- writeValue(value) {
1151
- this.value = value;
1152
- }
1153
- registerOnChange(onChange) {
1154
- this.onChange = onChange;
1155
- }
1156
- registerOnTouched(onTouched) {
1157
- this.onTouched = onTouched;
1158
- }
1159
- markAsTouched() {
1160
- if (!this.touched) {
1161
- this.onTouched();
1162
- this.touched = true;
1163
- }
1164
- }
1165
- setDisabledState(disabled) {
1166
- this.disabled = disabled;
1167
- }
1168
- // End of ControlValueAccessor Interface implementation
1169
- setDateInControl(date) {
1170
- // this.dateInput.nativeElement.value = date;
1171
- this.dateValue = date;
1172
- }
1173
- setTimeInControl(time) {
1174
- // this.timeInput.nativeElement.value = time;
1175
- this.timeValue = time;
1176
- }
1177
- setValueInControl(datetime) {
1178
- const offsetDatetime = this.localTime
1179
- ? addTimezoneOffset(datetime)
1180
- : datetime;
1181
- const offsetDatetimeString = offsetDatetime.toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
1182
- this.setDateInControl(offsetDatetimeString.slice(0, 10)); // YYYY-MM-DD
1183
- if (this.includeSeconds) {
1184
- this.setTimeInControl(offsetDatetimeString.slice(11, 19)); // hh:mm:ss
1185
- }
1186
- else {
1187
- this.setTimeInControl(offsetDatetimeString.slice(11, 16)); // hh:mm
1188
- }
1189
- }
1190
- clear() {
1191
- this.setDateInControl(null);
1192
- this.setTimeInControl(null);
1193
- this.value = null;
1194
- }
1195
- isClearable() {
1196
- return hasValue(this.value);
1197
- }
1198
- // Validator interface
1199
- registerOnValidatorChange() { }
1200
- validate(control) {
1201
- const value = control.value;
1202
- let result = null;
1203
- if (this.required &&
1204
- !hasValue(value) &&
1205
- !hasValue(this.dateValue) &&
1206
- !hasValue(this.timeValue)) {
1207
- result = result || {};
1208
- result.required = { value, reason: 'Required field.' };
1209
- }
1210
- if (!hasValue(this.dateValue) && hasValue(this.timeValue)) {
1211
- result = result || {};
1212
- result.existsDate = {
1213
- value,
1214
- reason: 'Date not specified.'
1215
- };
1216
- }
1217
- if (hasValue(this.dateValue) && !hasValue(this.timeValue)) {
1218
- result = result || {};
1219
- result.existsTime = {
1220
- value,
1221
- reason: 'Time not specified.'
1222
- };
1223
- }
1224
- if (hasValue(this.min) &&
1225
- hasValue(value) &&
1226
- hasValue(this.dateValue) &&
1227
- hasValue(this.timeValue) &&
1228
- String(value).localeCompare(this.min) === -1) {
1229
- result = result || {};
1230
- result.min = {
1231
- value,
1232
- min: this.min,
1233
- reason: `Value is lower than minimum value: ${this.min}.`
1234
- };
1235
- }
1236
- if (hasValue(this.max) &&
1237
- hasValue(value) &&
1238
- hasValue(this.dateValue) &&
1239
- hasValue(this.timeValue) &&
1240
- String(value).localeCompare(this.max) !== -1) {
1241
- result = result || {};
1242
- result.max = {
1243
- value,
1244
- max: this.max,
1245
- reason: `Value is greater than than maximum value: ${this.max}.`
1246
- };
1247
- }
1248
- this.lastErrors = result;
1249
- return result;
1250
- }
1251
- // End of Validator interface
1252
- ngOnInit() {
1253
- this.inputId = this.inputId
1254
- ? this.inputId
1255
- : `datetime$${DatetimeComponent.idCounter++}`;
1256
- this.setPatterns();
1257
- }
1258
- onLostFocus() {
1259
- this.markAsTouched();
1260
- }
1261
- onKeyPress(event) {
1262
- this.keyPress.emit(event);
1263
- }
1264
- onEventDatetime(newDate, newTime) {
1265
- if (this.disabled || this.readonly) {
1266
- return;
1267
- }
1268
- if (!newDate || !newTime) {
1269
- this.value = null;
1270
- }
1271
- else {
1272
- const newValue = `${newDate}T${newTime}`;
1273
- const datetime = new Date(newValue);
1274
- if (isValidDate(datetime)) {
1275
- let datetimeString;
1276
- if (this.localTime) {
1277
- datetimeString = datetime.toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
1278
- }
1279
- else {
1280
- datetimeString = addTimezoneOffset(datetime).toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
1281
- }
1282
- if (this.includeSeconds) {
1283
- this.value = datetimeString.slice(0, 19) + 'Z'; // YYYY-MM-DDThh:mm:ssZ
1284
- }
1285
- else {
1286
- this.value = datetimeString.slice(0, 16) + 'Z'; // YYYY-MM-DDThh:mmZ
1287
- }
1288
- }
1289
- else {
1290
- this.value = newValue;
1291
- }
1292
- }
1293
- }
1294
- checkClassName() {
1295
- return this.disabled
1296
- ? this.readonly
1297
- ? 'disabled readonly'
1298
- : 'disabled'
1299
- : this.readonly
1300
- ? 'readonly'
1301
- : '';
1302
- }
1303
- setPatterns() {
1304
- this.min = this.min || '1900-01-01';
1305
- this.max = this.max || '2100-01-01';
1306
- }
1307
- }
1308
- DatetimeComponent.idCounter = 0;
1309
- DatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1310
- DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DatetimeComponent, selector: "lux-datetime", inputs: { min: "min", max: "max", includeSeconds: "includeSeconds", localTime: "localTime", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
1311
- {
1312
- provide: NG_VALUE_ACCESSOR,
1313
- multi: true,
1314
- useExisting: forwardRef(() => DatetimeComponent)
1315
- },
1316
- {
1317
- provide: NG_VALIDATORS,
1318
- multi: true,
1319
- useExisting: forwardRef(() => DatetimeComponent)
1320
- }
1321
- ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, static: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, static: true }], ngImport: i0, template: "<input\n #dateInput\n class=\"rounded-left prefix\"\n [ngClass]=\"className\"\n type=\"date\"\n [id]=\"inputId + '$date'\"\n [(ngModel)]=\"dateValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [placeholder]=\"\"\n (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<input\n #timeInput\n [class]=\"(disabled || readonly || !isClearable()) && localTime ? 'rounded-right' : ''\"\n [ngClass]=\"className\"\n type=\"time\"\n [id]=\"inputId + '$time'\"\n [(ngModel)]=\"timeValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [placeholder]=\"\"\n [step]=\"includeSeconds ? 1 : 60\"\n (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<ng-container\n *ngIf=\"!localTime\"\n>\n <div\n [class]=\"disabled || readonly || !isClearable() ? 'rounded-right postfix symbol' : 'postfix symbol'\"\n [ngClass]=\"className\"\n >\n <span>{{ localTime ? '' : 'UTC' }}</span>\n </div>\n</ng-container>\n<button\n #clearButton\n *ngIf=\"!disabled && !readonly && isClearable()\"\n type=\"button\"\n class=\"rounded-right postfix bordered icon-clear\"\n [id]=\"inputId + '$clear'\"\n (click)=\"clear()\"\n aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ userErrors[lang].required }}\n </div>\n <div *ngIf=\"lastErrors.min\">\n {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n </div>\n <div *ngIf=\"lastErrors.max\">\n {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1322
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DatetimeComponent, decorators: [{
1323
- type: Component,
1324
- args: [{ selector: 'lux-datetime', providers: [
1325
- {
1326
- provide: NG_VALUE_ACCESSOR,
1327
- multi: true,
1328
- useExisting: forwardRef(() => DatetimeComponent)
1329
- },
1330
- {
1331
- provide: NG_VALIDATORS,
1332
- multi: true,
1333
- useExisting: forwardRef(() => DatetimeComponent)
1334
- }
1335
- ], template: "<input\n #dateInput\n class=\"rounded-left prefix\"\n [ngClass]=\"className\"\n type=\"date\"\n [id]=\"inputId + '$date'\"\n [(ngModel)]=\"dateValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [placeholder]=\"\"\n (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<input\n #timeInput\n [class]=\"(disabled || readonly || !isClearable()) && localTime ? 'rounded-right' : ''\"\n [ngClass]=\"className\"\n type=\"time\"\n [id]=\"inputId + '$time'\"\n [(ngModel)]=\"timeValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [placeholder]=\"\"\n [step]=\"includeSeconds ? 1 : 60\"\n (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<ng-container\n *ngIf=\"!localTime\"\n>\n <div\n [class]=\"disabled || readonly || !isClearable() ? 'rounded-right postfix symbol' : 'postfix symbol'\"\n [ngClass]=\"className\"\n >\n <span>{{ localTime ? '' : 'UTC' }}</span>\n </div>\n</ng-container>\n<button\n #clearButton\n *ngIf=\"!disabled && !readonly && isClearable()\"\n type=\"button\"\n class=\"rounded-right postfix bordered icon-clear\"\n [id]=\"inputId + '$clear'\"\n (click)=\"clear()\"\n aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ userErrors[lang].required }}\n </div>\n <div *ngIf=\"lastErrors.min\">\n {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n </div>\n <div *ngIf=\"lastErrors.max\">\n {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"] }]
1336
- }], ctorParameters: function () { return []; }, propDecorators: { dateInput: [{
1337
- type: ViewChild,
1338
- args: ['dateInput', { static: true }]
1339
- }], timeInput: [{
1340
- type: ViewChild,
1341
- args: ['timeInput', { static: true }]
1342
- }], min: [{
1343
- type: Input
1344
- }], max: [{
1345
- type: Input
1346
- }], includeSeconds: [{
1347
- type: Input
1348
- }], localTime: [{
1349
- type: Input
1350
- }], lang: [{
1351
- type: Input
1352
- }], inlineErrors: [{
1353
- type: Input
1354
- }], inputId: [{
1355
- type: Input
1356
- }], ariaLabel: [{
1357
- type: Input,
1358
- args: ['aria-label']
1359
- }], readonly: [{
1360
- type: Input
1361
- }], disabled: [{
1362
- type: Input
1363
- }], required: [{
1364
- type: Input
1365
- }], value: [{
1366
- type: Input
1367
- }], valueChange: [{
1368
- type: Output
1369
- }], keyPress: [{
1370
- type: Output
1371
- }] } });
1372
-
1373
- /** Filter component to query for objects. */
1374
- class FilterComponent {
1375
- constructor() {
1376
- this.touched = false;
1377
- this._searchValue = '';
1378
- this.disabled = false;
1379
- /** Placeholder default text. */
1380
- this.placeholder = '';
1381
- /** Search on type: (default true) Auto-search when user types in. */
1382
- this.searchOnType = true;
1383
- this.debounceValue = 300; // 300 ms
1384
- /** Search value changed by user. */
1385
- this.searchValueChange = new EventEmitter();
1386
- this.subject = new Subject();
1387
- // ControlValueAccessor Interface
1388
- this.onChange = (value) => { };
1389
- this.onTouched = () => { };
1390
- this.recreateObservable();
1391
- }
1392
- /** Search value introduced by the user. */
1393
- get searchValue() {
1394
- return this._searchValue;
1395
- }
1396
- set searchValue(v) {
1397
- v = (v || '').toString();
1398
- if (v === this._searchValue) {
1399
- return;
1400
- }
1401
- this.onChange(v);
1402
- this._searchValue = v;
1403
- }
1404
- /** Debounce time in milliseconds. (defaults to 300 ms) */
1405
- set debounce(val) {
1406
- this.debounceValue = val;
1407
- this.recreateObservable();
1408
- }
1409
- get debounce() {
1410
- return this.debounceValue;
1411
- }
1412
- writeValue(value) {
1413
- this.searchValue = (value || '').toString();
1414
- }
1415
- registerOnChange(onChange) {
1416
- this.onChange = onChange;
1417
- }
1418
- registerOnTouched(onTouched) {
1419
- this.onTouched = onTouched;
1420
- }
1421
- markAsTouched() {
1422
- if (!this.touched) {
1423
- this.onTouched();
1424
- this.touched = true;
1425
- }
1426
- }
1427
- setDisabledState(disabled) {
1428
- this.disabled = disabled;
1429
- }
1430
- // End ControlValueAccessor Interface
1431
- ngOnInit() {
1432
- this.inputId = this.inputId
1433
- ? this.inputId
1434
- : `filter$${FilterComponent.idCounter++}`;
1435
- }
1436
- ngOnDestroy() {
1437
- this.freeSubscriptions();
1438
- }
1439
- clear() {
1440
- this.searchValue = '';
1441
- this.search();
1442
- }
1443
- search() {
1444
- this.searchValueChange.emit(this.searchValue);
1445
- }
1446
- keyup(event, newValue) {
1447
- this.markAsTouched();
1448
- this.searchValue = newValue;
1449
- if (event.key === 'Enter') {
1450
- this.searchNow(this.searchValue);
1451
- }
1452
- if (this.searchOnType) {
1453
- this.addEvent();
1454
- }
1455
- }
1456
- onInputValueChange(newValue) {
1457
- this.markAsTouched();
1458
- this.searchValue = newValue;
1459
- }
1460
- recreateObservable() {
1461
- this.searchValue$ = this.subject
1462
- .asObservable()
1463
- .pipe(debounceTime(this.debounce));
1464
- this.freeSubscriptions();
1465
- this.sub = this.searchValue$.subscribe((value) => {
1466
- this.searchValueChange.emit(value);
1467
- });
1468
- }
1469
- freeSubscriptions() {
1470
- if (this.sub) {
1471
- this.sub.unsubscribe();
1472
- this.sub = null;
1473
- }
1474
- }
1475
- searchNow(value) {
1476
- this.searchValueChange.emit(value);
1477
- }
1478
- addEvent() {
1479
- this.subject.next(this.searchValue);
1480
- }
1481
- }
1482
- FilterComponent.idCounter = 0;
1483
- FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1484
- FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: FilterComponent, selector: "lux-filter", inputs: { disabled: "disabled", inputId: "inputId", placeholder: "placeholder", searchValue: "searchValue", searchOnType: "searchOnType", ariaLabel: ["aria-label", "ariaLabel"], debounce: "debounce" }, outputs: { searchValueChange: "searchValueChange" }, providers: [
1485
- {
1486
- provide: NG_VALUE_ACCESSOR,
1487
- multi: true,
1488
- useExisting: forwardRef(() => FilterComponent)
1489
- }
1490
- ], ngImport: i0, template: "<div class=\"filter\">\n <input\n #i0\n type=\"text\"\n [attr.aria-label]=\"ariaLabel\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [disabled]=\"disabled\"\n [value]=\"searchValue\"\n (valueChange)=\"onInputValueChange(i0.value)\"\n (keyup)=\"keyup($event, i0.value)\"\n />\n\n <button\n [class.hide]=\"!searchValue\"\n aria-label=\"Clear\"\n class=\"clear-indicator icon icon-clear\"\n type=\"button\"\n (click)=\"clear()\"\n ></button>\n <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n <button\n class=\"btn-search\"\n *ngIf=\"!searchOnType\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"search()\"\n >\n Search\n </button>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:url(/assets/img/filter-search.png) no-repeat center;background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:1rem;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1491
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: FilterComponent, decorators: [{
1492
- type: Component,
1493
- args: [{ selector: 'lux-filter', providers: [
1494
- {
1495
- provide: NG_VALUE_ACCESSOR,
1496
- multi: true,
1497
- useExisting: forwardRef(() => FilterComponent)
1498
- }
1499
- ], template: "<div class=\"filter\">\n <input\n #i0\n type=\"text\"\n [attr.aria-label]=\"ariaLabel\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [disabled]=\"disabled\"\n [value]=\"searchValue\"\n (valueChange)=\"onInputValueChange(i0.value)\"\n (keyup)=\"keyup($event, i0.value)\"\n />\n\n <button\n [class.hide]=\"!searchValue\"\n aria-label=\"Clear\"\n class=\"clear-indicator icon icon-clear\"\n type=\"button\"\n (click)=\"clear()\"\n ></button>\n <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n <button\n class=\"btn-search\"\n *ngIf=\"!searchOnType\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"search()\"\n >\n Search\n </button>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:url(/assets/img/filter-search.png) no-repeat center;background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:1rem;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"] }]
1500
- }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
1501
- type: Input
1502
- }], inputId: [{
1503
- type: Input
1504
- }], placeholder: [{
1505
- type: Input
1506
- }], searchValue: [{
1507
- type: Input
1508
- }], searchOnType: [{
1509
- type: Input
1510
- }], ariaLabel: [{
1511
- type: Input,
1512
- args: ['aria-label']
1513
- }], debounce: [{
1514
- type: Input
1515
- }], searchValueChange: [{
1516
- type: Output
1517
- }] } });
1518
-
1519
- class ActiveModal {
1520
- close(result) { }
1521
- dismiss(reason) { }
1522
- }
1523
- class ModalRef {
1524
- constructor(_windowCmptRef, _contentRef, _backdropCmptRef, _beforeDismiss) {
1525
- this._windowCmptRef = _windowCmptRef;
1526
- this._contentRef = _contentRef;
1527
- this._backdropCmptRef = _backdropCmptRef;
1528
- this._beforeDismiss = _beforeDismiss;
1529
- _windowCmptRef.instance.dismissEvent.subscribe((reason) => {
1530
- this.dismiss(reason);
1531
- });
1532
- this.result = new Promise((resolve, reject) => {
1533
- this._resolve = resolve;
1534
- this._reject = reject;
1535
- });
1536
- this.result.then(null, () => { });
1537
- }
1538
- /**
1539
- * The instance of a component used for the modal content.
1540
- *
1541
- * When a `TemplateRef` is used as the content, will return `undefined`.
1542
- */
1543
- get componentInstance() {
1544
- if (this._contentRef.componentRef) {
1545
- return this._contentRef.componentRef.instance;
1546
- }
1547
- }
1548
- /**
1549
- * Closes the modal with an optional `result` value.
1550
- *
1551
- * The `NgbMobalRef.result` promise will be resolved with the provided value.
1552
- */
1553
- close(result) {
1554
- if (this._windowCmptRef) {
1555
- if (this._resolve) {
1556
- this._resolve(result);
1557
- }
1558
- this._removeModalElements();
1559
- }
1560
- }
1561
- _dismiss(reason) {
1562
- if (this._reject) {
1563
- this._reject(reason);
1564
- }
1565
- this._removeModalElements();
1566
- }
1567
- /**
1568
- * Dismisses the modal with an optional `reason` value.
1569
- *
1570
- * The `NgbModalRef.result` promise will be rejected with the provided value.
1571
- */
1572
- dismiss(reason) {
1573
- if (this._windowCmptRef) {
1574
- if (!this._beforeDismiss) {
1575
- this._dismiss(reason);
1576
- }
1577
- else {
1578
- const dismiss = this._beforeDismiss();
1579
- if (dismiss && dismiss.then) {
1580
- dismiss.then((result) => {
1581
- if (result !== false) {
1582
- this._dismiss(reason);
1583
- }
1584
- }, () => { });
1585
- }
1586
- else if (dismiss !== false) {
1587
- this._dismiss(reason);
1588
- }
1589
- }
1590
- }
1591
- }
1592
- _removeModalElements() {
1593
- const windowNativeEl = this._windowCmptRef.location.nativeElement;
1594
- windowNativeEl.parentNode.removeChild(windowNativeEl);
1595
- this._windowCmptRef.destroy();
1596
- if (this._backdropCmptRef) {
1597
- const backdropNativeEl = this._backdropCmptRef.location.nativeElement;
1598
- backdropNativeEl.parentNode.removeChild(backdropNativeEl);
1599
- this._backdropCmptRef.destroy();
1600
- }
1601
- if (this._contentRef && this._contentRef.viewRef) {
1602
- this._contentRef.viewRef.destroy();
1603
- }
1604
- this._windowCmptRef = null;
1605
- this._backdropCmptRef = null;
1606
- this._contentRef = null;
1607
- }
1608
- }
1609
-
1610
- const FOCUS = 'focus';
1611
- var Key;
1612
- (function (Key) {
1613
- Key[Key["Tab"] = 9] = "Tab";
1614
- Key[Key["Enter"] = 13] = "Enter";
1615
- Key[Key["Escape"] = 27] = "Escape";
1616
- Key[Key["Space"] = 32] = "Space";
1617
- Key[Key["PageUp"] = 33] = "PageUp";
1618
- Key[Key["PageDown"] = 34] = "PageDown";
1619
- Key[Key["End"] = 35] = "End";
1620
- Key[Key["Home"] = 36] = "Home";
1621
- Key[Key["ArrowLeft"] = 37] = "ArrowLeft";
1622
- Key[Key["ArrowUp"] = 38] = "ArrowUp";
1623
- Key[Key["ArrowRight"] = 39] = "ArrowRight";
1624
- Key[Key["ArrowDown"] = 40] = "ArrowDown";
1625
- })(Key || (Key = {}));
1626
- const isDefined = (value) => value !== undefined && value !== null;
1627
- class ContentRef {
1628
- constructor(nodes, viewRef, componentRef) {
1629
- this.nodes = nodes;
1630
- this.viewRef = viewRef;
1631
- this.componentRef = componentRef;
1632
- }
1633
- }
1634
- const FOCUSABLE_ELEMENTS_SELECTOR = [
1635
- 'a[href]',
1636
- 'button:not([disabled])',
1637
- 'input:not([disabled]):not([type="hidden"])',
1638
- 'select:not([disabled])',
1639
- 'textarea:not([disabled])',
1640
- '[contenteditable]',
1641
- '[tabindex]:not([tabindex="-1"])'
1642
- ].join(', ');
1643
- /**
1644
- * Returns first and last focusable elements inside of a given element based on specific CSS selector
1645
- */
1646
- const getFocusableBoundaryElements = (element) => {
1647
- const list = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)).filter((el) => el.tabIndex !== -1);
1648
- return [list[0], list[list.length - 1]];
1649
- };
1650
- /**
1651
- * Function that enforces browser focus to be trapped inside a DOM element.
1652
- *
1653
- * Works only for clicks inside the element and navigation with 'Tab', ignoring clicks outside of the element
1654
- *
1655
- * @param element The element around which focus will be trapped inside
1656
- * @param stopFocusTrap$ The observable stream. When completed the focus trap will clean up listeners
1657
- * and free internal resources
1658
- * @param refocusOnClick Put the focus back to the last focused element whenever a click occurs on element (default to
1659
- * false)
1660
- */
1661
- const focusTrap = (element, stopFocusTrap$, refocusOnClick = false) => {
1662
- // last focused element
1663
- const lastFocusedElement$ = fromEvent(element, 'focusin').pipe(takeUntil(stopFocusTrap$), map((e) => e.target));
1664
- // 'tab' / 'shift+tab' stream
1665
- fromEvent(element, 'keydown')
1666
- .pipe(takeUntil(stopFocusTrap$),
1667
- /* eslint-disable import/no-deprecated */
1668
- filter((e) => e.which === Key.Tab),
1669
- /* eslint-enable import/no-deprecated */
1670
- withLatestFrom(lastFocusedElement$))
1671
- .subscribe(([tabEvent, focusedElement]) => {
1672
- const [first, last] = getFocusableBoundaryElements(element);
1673
- if ((focusedElement === first || focusedElement === element) &&
1674
- tabEvent.shiftKey) {
1675
- last.focus();
1676
- tabEvent.preventDefault();
1677
- }
1678
- if (focusedElement === last && !tabEvent.shiftKey) {
1679
- first.focus();
1680
- tabEvent.preventDefault();
1681
- }
1682
- });
1683
- // inside click
1684
- if (refocusOnClick) {
1685
- fromEvent(element, 'click')
1686
- .pipe(takeUntil(stopFocusTrap$), withLatestFrom(lastFocusedElement$), map((arr) => arr[1]))
1687
- .subscribe((lastFocusedElement) => lastFocusedElement.focus());
1688
- }
1689
- };
1690
-
1691
- var ModalDismissReasons;
1692
- (function (ModalDismissReasons) {
1693
- ModalDismissReasons[ModalDismissReasons["BackdropClick"] = 0] = "BackdropClick";
1694
- ModalDismissReasons[ModalDismissReasons["Esc"] = 1] = "Esc";
1695
- })(ModalDismissReasons || (ModalDismissReasons = {}));
1696
-
1697
- class LuxModalWindowComponent {
1698
- constructor(_document, _elRef) {
1699
- this._document = _document;
1700
- this._elRef = _elRef;
1701
- this.backdrop = false;
1702
- this.keyboard = true;
1703
- this.dismissEvent = new EventEmitter();
1704
- this.role = 'dialog';
1705
- this.tabindex = '-1';
1706
- this.ariamodal = true;
1707
- }
1708
- get class() {
1709
- return `modal ${this.windowClass || ''}`;
1710
- }
1711
- get hostAriaLabelledBy() {
1712
- return this.ariaLabelledBy;
1713
- }
1714
- get hostAriaDescribedBy() {
1715
- return this.ariaDescribedBy;
1716
- }
1717
- backdropClick(btn) {
1718
- if (this.backdrop === true && this._elRef.nativeElement === btn) {
1719
- this.dismiss(ModalDismissReasons.BackdropClick);
1720
- }
1721
- }
1722
- escKey(event) {
1723
- if (this.keyboard && !event.defaultPrevented) {
1724
- this.dismiss(ModalDismissReasons.Esc);
1725
- }
1726
- }
1727
- dismiss(reason) {
1728
- this.dismissEvent.emit(reason);
1729
- }
1730
- ngOnInit() {
1731
- this._elWithFocus = this._document.activeElement;
1732
- }
1733
- ngAfterViewInit() {
1734
- if (!this._elRef.nativeElement.contains(document.activeElement)) {
1735
- const firstFocusable = getFocusableBoundaryElements(this._elRef.nativeElement)[0];
1736
- const elementToFocus = firstFocusable || this._elRef.nativeElement;
1737
- elementToFocus.focus();
1738
- }
1739
- }
1740
- ngOnDestroy() {
1741
- const body = this._document.body;
1742
- const elWithFocus = this._elWithFocus;
1743
- let elementToFocus;
1744
- if (elWithFocus && elWithFocus[FOCUS] && body.contains(elWithFocus)) {
1745
- elementToFocus = elWithFocus;
1746
- }
1747
- else {
1748
- elementToFocus = body;
1749
- }
1750
- elementToFocus.focus();
1751
- this._elWithFocus = null;
1752
- }
1753
- }
1754
- LuxModalWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalWindowComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1755
- LuxModalWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LuxModalWindowComponent, selector: "lux-modal-window", inputs: { ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy", backdrop: "backdrop", keyboard: "keyboard", windowClass: "windowClass" }, outputs: { dismissEvent: "dismissEvent" }, host: { listeners: { "click": "backdropClick($event.target)", "keyup.esc": "escKey($event)" }, properties: { "class": "this.class", "attr.role": "this.role", "tabindex": "this.tabindex", "attr.aria-modal": "this.ariamodal", "attr.aria-labelledby": "this.hostAriaLabelledBy", "attr.aria-describedby": "this.hostAriaDescribedBy" } }, ngImport: i0, template: `
1756
- <div class="modal-dialog" role="document">
1757
- <div class="modal-content"><ng-content></ng-content></div>
1758
- </div>
1759
- `, isInline: true });
1760
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
1761
- type: Component,
1762
- args: [{
1763
- selector: 'lux-modal-window',
1764
- template: `
1765
- <div class="modal-dialog" role="document">
1766
- <div class="modal-content"><ng-content></ng-content></div>
1767
- </div>
1768
- `
1769
- }]
1770
- }], ctorParameters: function () {
1771
- return [{ type: undefined, decorators: [{
1772
- type: Inject,
1773
- args: [DOCUMENT]
1774
- }] }, { type: i0.ElementRef }];
1775
- }, propDecorators: { ariaDescribedBy: [{
1776
- type: Input
1777
- }], ariaLabelledBy: [{
1778
- type: Input
1779
- }], backdrop: [{
1780
- type: Input
1781
- }], keyboard: [{
1782
- type: Input
1783
- }], windowClass: [{
1784
- type: Input
1785
- }], dismissEvent: [{
1786
- type: Output
1787
- }], class: [{
1788
- type: HostBinding,
1789
- args: ['class']
1790
- }], role: [{
1791
- type: HostBinding,
1792
- args: ['attr.role']
1793
- }], tabindex: [{
1794
- type: HostBinding,
1795
- args: ['tabindex']
1796
- }], ariamodal: [{
1797
- type: HostBinding,
1798
- args: ['attr.aria-modal']
1799
- }], hostAriaLabelledBy: [{
1800
- type: HostBinding,
1801
- args: ['attr.aria-labelledby']
1802
- }], hostAriaDescribedBy: [{
1803
- type: HostBinding,
1804
- args: ['attr.aria-describedby']
1805
- }], backdropClick: [{
1806
- type: HostListener,
1807
- args: ['click', ['$event.target']]
1808
- }], escKey: [{
1809
- type: HostListener,
1810
- args: ['keyup.esc', ['$event']]
1811
- }] } });
1812
-
1813
- class LuxModalBackdropComponent {
1814
- constructor() {
1815
- this.class = 'modal-backdrop fade show';
1816
- this.style = 'z-index: 1050';
1817
- }
1818
- }
1819
- LuxModalBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1820
- LuxModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LuxModalBackdropComponent, selector: "lux-modal-backdrop", inputs: { backdropClass: "backdropClass" }, host: { properties: { "class": "this.class", "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
1821
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
1822
- type: Component,
1823
- args: [{
1824
- selector: 'lux-modal-backdrop',
1825
- template: ''
1826
- }]
1827
- }], propDecorators: { backdropClass: [{
1828
- type: Input
1829
- }], class: [{
1830
- type: HostBinding,
1831
- args: ['class']
1832
- }], style: [{
1833
- type: HostBinding,
1834
- args: ['style']
1835
- }] } });
1836
-
1837
- class LuxModalConfig {
1838
- constructor() {
1839
- this.backdrop = true;
1840
- }
1841
- }
1842
- LuxModalConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1843
- LuxModalConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
1844
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalConfig, decorators: [{
1845
- type: Injectable,
1846
- args: [{ providedIn: 'root' }]
1847
- }] });
1848
-
1849
- class ModalStack {
1850
- constructor(_applicationRef, _document, _injector, _rendererFactory, modalConfig) {
1851
- this._applicationRef = _applicationRef;
1852
- this._document = _document;
1853
- this._injector = _injector;
1854
- this._rendererFactory = _rendererFactory;
1855
- this.modalConfig = modalConfig;
1856
- this._activeWindowCmptHasChanged = new Subject();
1857
- this._modalRefs = [];
1858
- this._windowCmpts = [];
1859
- this._ariaHiddenValues = new Map();
1860
- this._backdropAttributes = ['backdropClass'];
1861
- this._windowAttributes = [
1862
- 'ariaLabelledBy',
1863
- 'backdrop',
1864
- 'centered',
1865
- 'keyboard',
1866
- 'scrollable',
1867
- 'size',
1868
- 'windowClass'
1869
- ];
1870
- this._activeWindowCmptHasChanged.subscribe(() => {
1871
- if (this._windowCmpts.length) {
1872
- const activeWindowCmpt = this._windowCmpts[this._windowCmpts.length - 1];
1873
- focusTrap(activeWindowCmpt.location.nativeElement, this._activeWindowCmptHasChanged);
1874
- this._revertAriaHidden();
1875
- this._setAriaHidden(activeWindowCmpt.location.nativeElement);
1876
- }
1877
- });
1878
- }
1879
- open(moduleCFR, content, options) {
1880
- const config = Object.assign({}, this.modalConfig, options);
1881
- const containerEl = this._document.body;
1882
- const renderer = this._rendererFactory.createRenderer(null, null);
1883
- const removeBodyClass = () => {
1884
- if (!this._modalRefs.length) {
1885
- renderer.removeClass(this._document.body, 'modal-open');
1886
- this._revertAriaHidden();
1887
- }
1888
- };
1889
- const activeModal = new ActiveModal();
1890
- const contentRef = this.getContentRef(moduleCFR, content, activeModal);
1891
- const backdropCmptRef = config.backdrop ? this._attachBackdrop(moduleCFR, containerEl) : null;
1892
- const windowCmptRef = this._attachWindowComponent(moduleCFR, containerEl, contentRef);
1893
- const modalRef = new ModalRef(windowCmptRef, contentRef, backdropCmptRef);
1894
- this._registerModalRef(modalRef);
1895
- this._registerWindowCmpt(windowCmptRef);
1896
- modalRef.result.then(removeBodyClass, removeBodyClass);
1897
- activeModal.close = (result) => {
1898
- modalRef.close(result);
1899
- };
1900
- activeModal.dismiss = (reason) => {
1901
- modalRef.dismiss(reason);
1902
- };
1903
- this._applyWindowOptions(windowCmptRef.instance, config);
1904
- if (this._modalRefs.length === 1) {
1905
- renderer.addClass(this._document.body, 'modal-open');
1906
- }
1907
- if (backdropCmptRef && backdropCmptRef.instance) {
1908
- this._applyBackgroundOptions(backdropCmptRef.instance, config);
1909
- backdropCmptRef.changeDetectorRef.detectChanges();
1910
- }
1911
- windowCmptRef.changeDetectorRef.detectChanges();
1912
- return modalRef;
1913
- }
1914
- _applyWindowOptions(windowInstance, config) {
1915
- this._windowAttributes.forEach((optionName) => {
1916
- if (isDefined(config[optionName])) {
1917
- windowInstance[optionName] = config[optionName];
1918
- }
1919
- });
1920
- }
1921
- _applyBackgroundOptions(backgroudInstance, config) {
1922
- this._backdropAttributes.forEach((optionName) => {
1923
- if (isDefined(config[optionName])) {
1924
- backgroudInstance[optionName] = config[optionName];
1925
- }
1926
- });
1927
- }
1928
- _revertAriaHidden() {
1929
- this._ariaHiddenValues.forEach((value, element) => {
1930
- if (value) {
1931
- element.setAttribute('aria-hidden', value);
1932
- }
1933
- else {
1934
- element.removeAttribute('aria-hidden');
1935
- }
1936
- });
1937
- this._ariaHiddenValues.clear();
1938
- }
1939
- getContentRef(moduleCFR, content, activeModal) {
1940
- if (content instanceof TemplateRef) {
1941
- return this.createFromTemplateRef(content, activeModal);
1942
- }
1943
- }
1944
- createFromTemplateRef(content, activeModal) {
1945
- const context = {
1946
- $implicit: activeModal,
1947
- // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
1948
- close(result) {
1949
- activeModal.close(result);
1950
- },
1951
- // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
1952
- dismiss(reason) {
1953
- activeModal.dismiss(reason);
1954
- }
1955
- };
1956
- const viewRef = content.createEmbeddedView(context);
1957
- this._applicationRef.attachView(viewRef);
1958
- return new ContentRef([viewRef.rootNodes], viewRef);
1959
- }
1960
- _attachBackdrop(moduleCFR, containerEl) {
1961
- const backdropFactory = moduleCFR.resolveComponentFactory(LuxModalBackdropComponent);
1962
- const backdropCmptRef = backdropFactory.create(this._injector);
1963
- this._applicationRef.attachView(backdropCmptRef.hostView);
1964
- containerEl.appendChild(backdropCmptRef.location.nativeElement);
1965
- return backdropCmptRef;
1966
- }
1967
- _attachWindowComponent(moduleCFR, containerEl, contentRef) {
1968
- const windowFactory = moduleCFR.resolveComponentFactory(LuxModalWindowComponent);
1969
- const windowCmptRef = windowFactory.create(this._injector, contentRef.nodes);
1970
- this._applicationRef.attachView(windowCmptRef.hostView);
1971
- containerEl.appendChild(windowCmptRef.location.nativeElement);
1972
- return windowCmptRef;
1973
- }
1974
- _registerModalRef(modalRef) {
1975
- const unregisterModalRef = () => {
1976
- const index = this._modalRefs.indexOf(modalRef);
1977
- if (index > -1) {
1978
- this._modalRefs.splice(index, 1);
1979
- }
1980
- };
1981
- this._modalRefs.push(modalRef);
1982
- modalRef.result.then(unregisterModalRef, unregisterModalRef);
1983
- }
1984
- _registerWindowCmpt(windowCmpt) {
1985
- this._windowCmpts.push(windowCmpt);
1986
- this._activeWindowCmptHasChanged.next(null);
1987
- windowCmpt.onDestroy(() => {
1988
- const index = this._windowCmpts.indexOf(windowCmpt);
1989
- if (index > -1) {
1990
- this._windowCmpts.splice(index, 1);
1991
- this._activeWindowCmptHasChanged.next(null);
1992
- }
1993
- });
1994
- }
1995
- _setAriaHidden(element) {
1996
- const parent = element.parentElement;
1997
- if (parent && element !== this._document.body) {
1998
- Array.from(parent.children).forEach((sibling) => {
1999
- if (sibling !== element && sibling.nodeName !== 'SCRIPT') {
2000
- this._ariaHiddenValues.set(sibling, sibling.getAttribute('aria-hidden'));
2001
- sibling.setAttribute('aria-hidden', 'true');
2002
- }
2003
- });
2004
- this._setAriaHidden(parent);
2005
- }
2006
- }
2007
- }
2008
- ModalStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalStack, deps: [{ token: i0.ApplicationRef }, { token: DOCUMENT }, { token: i0.Injector }, { token: i0.RendererFactory2 }, { token: LuxModalConfig }], target: i0.ɵɵFactoryTarget.Injectable });
2009
- ModalStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalStack, providedIn: 'root' });
2010
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalStack, decorators: [{
2011
- type: Injectable,
2012
- args: [{ providedIn: 'root' }]
2013
- }], ctorParameters: function () {
2014
- return [{ type: i0.ApplicationRef }, { type: undefined, decorators: [{
2015
- type: Inject,
2016
- args: [DOCUMENT]
2017
- }] }, { type: i0.Injector }, { type: i0.RendererFactory2 }, { type: LuxModalConfig }];
2018
- } });
2019
-
2020
- /**
2021
- * A service that it allow open an close modal components
2022
- */
2023
- class ModalService {
2024
- constructor(modalStack, moduleCFR) {
2025
- this.modalStack = modalStack;
2026
- this.moduleCFR = moduleCFR;
2027
- }
2028
- /**Open a modal component
2029
- * @param content TemplateRef
2030
- */
2031
- open(content, options = {}) {
2032
- return this.modalStack.open(this.moduleCFR, content, options);
2033
- }
2034
- }
2035
- ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalService, deps: [{ token: ModalStack }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
2036
- ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalService, providedIn: 'root' });
2037
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalService, decorators: [{
2038
- type: Injectable,
2039
- args: [{ providedIn: 'root' }]
2040
- }], ctorParameters: function () { return [{ type: ModalStack }, { type: i0.ComponentFactoryResolver }]; } });
2041
-
2042
- class GeolocationService {
2043
- constructor(http) {
2044
- this.http = http;
2045
- this.debouncePeriodMs = 300; // ms
2046
- this.cacheSize = 20;
2047
- this.lastQueriesWithResults = new Map();
2048
- this.lastQueriesLru = [];
2049
- this.currentSearch$ = new Subject();
2050
- const typed$ = this.currentSearch$
2051
- .asObservable()
2052
- .pipe(distinctUntilChanged());
2053
- this.currentQuery$ = typed$.pipe(debounceTime(this.debouncePeriodMs), switchMap((currentQuery) => {
2054
- const data = this.getFromCache(currentQuery);
2055
- if (data !== undefined) {
2056
- return of(data);
2057
- }
2058
- // Nominatim search documentation:
2059
- // https://nominatim.org/release-docs/develop/api/Search/
2060
- const url = 'https://nominatim.openstreetmap.org/search?format=json&limit=20&q=' +
2061
- encodeURIComponent(currentQuery);
2062
- const headers = {
2063
- 'Content-Type': 'application/json'
2064
- };
2065
- this.addToCache(currentQuery, []);
2066
- return this.http.get(url, { headers }).pipe(map((response) => {
2067
- const searchResults = response;
2068
- const uniqueResults = distinct(searchResults);
2069
- return this.addToCache(currentQuery, uniqueResults);
2070
- }));
2071
- }));
2072
- }
2073
- searchGeolocation(query) {
2074
- this.currentSearch$.next(query);
2075
- return this.currentQuery$;
2076
- }
2077
- getLabels(instance, keys) {
2078
- const searchResults = instance.lastQueriesWithResults
2079
- .get(instance.getLatestQuery())
2080
- .filter((searchResult) => samePosition(searchResult, keys));
2081
- return of(searchResults.map((searchResult) => {
2082
- const key = {
2083
- type: 'Point',
2084
- coordinates: [searchResult.lon, searchResult.lat]
2085
- };
2086
- return {
2087
- key,
2088
- label: searchResult.display_name
2089
- };
2090
- }));
2091
- }
2092
- getData(instance, search) {
2093
- return instance.searchGeolocation(search).pipe(map((searchResults) => searchResults.map((searchResult) => {
2094
- const key = {
2095
- type: 'Point',
2096
- coordinates: [searchResult.lon, searchResult.lat]
2097
- };
2098
- const label = searchResult.display_name;
2099
- return { key, label };
2100
- })));
2101
- }
2102
- // Cache implemementation ---
2103
- getFromCache(query) {
2104
- if (this.lastQueriesWithResults.has(query)) {
2105
- return this.lastQueriesWithResults.get(query);
2106
- }
2107
- return undefined;
2108
- }
2109
- addToCache(query, data) {
2110
- if (this.lastQueriesWithResults.keys.length >= this.cacheSize) {
2111
- const deletedQuery = this.lastQueriesLru[0];
2112
- this.revomeFromCache(deletedQuery);
2113
- }
2114
- this.lastQueriesWithResults.set(query, data);
2115
- this.lastQueriesLru.push(query);
2116
- return data;
2117
- }
2118
- revomeFromCache(query) {
2119
- this.lastQueriesWithResults.delete(query);
2120
- const index = this.lastQueriesLru.findIndex((it) => it === query);
2121
- this.lastQueriesLru.splice(index, 1);
2122
- }
2123
- getLatestQuery() {
2124
- return this.lastQueriesLru.length
2125
- ? this.lastQueriesLru[this.lastQueriesLru.length - 1]
2126
- : null;
2127
- }
2128
- }
2129
- GeolocationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
2130
- GeolocationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationService, providedIn: 'root' });
2131
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationService, decorators: [{
2132
- type: Injectable,
2133
- args: [{ providedIn: 'root' }]
2134
- }], ctorParameters: function () { return [{ type: i1$3.HttpClient }]; } });
2135
- const samePosition = (searchResult, keys) => {
2136
- let found = false;
2137
- keys.forEach((item) => {
2138
- if (searchResult.lon === item.coordinates[0] &&
2139
- searchResult.lat === item.coordinates[1]) {
2140
- found = true;
2141
- }
2142
- });
2143
- return found;
2144
- };
2145
- const distinct = (data) => {
2146
- const unique = {};
2147
- return data.filter((r) => {
2148
- if (unique[r.display_name]) {
2149
- return false;
2150
- }
2151
- unique[r.display_name] = 1;
2152
- return true;
2153
- });
2154
- };
2155
-
2156
- let openLayersIsInstalled = false;
2157
- class OpenLayerLoaderService {
2158
- load() {
2159
- if (window.ol) {
2160
- return of(true);
2161
- }
2162
- const openLayerJsUrl = 'https://openlayers.org/en/v5.3.0/build/ol.js';
2163
- const openLayerCssUrl = 'https://openlayers.org/en/v5.3.0/css/ol.css';
2164
- if (!openLayersIsInstalled) {
2165
- openLayersIsInstalled = true; // only try to install it once
2166
- loadCss(openLayerCssUrl, () => { });
2167
- return from(new Promise((resolve, _) => {
2168
- loadScript(openLayerJsUrl, () => resolve(true));
2169
- }));
2170
- }
2171
- return of(true);
2172
- }
2173
- }
2174
- OpenLayerLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2175
- OpenLayerLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
2176
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
2177
- type: Injectable,
2178
- args: [{ providedIn: 'root' }]
2179
- }] });
2180
- /** Dynamically load a script from url and return a callback */
2181
- const loadScript = (url, callback) => {
2182
- const script = document.createElement('script');
2183
- script.type = 'text/javascript';
2184
- if (script.readyState) {
2185
- // for old IE
2186
- script.onreadystatechange = () => {
2187
- if (script.readyState === 'loaded' || script.readyState === 'complete') {
2188
- script.onreadystatechange = null;
2189
- callback();
2190
- }
2191
- };
2192
- }
2193
- else {
2194
- // Others browsers
2195
- script.onload = () => {
2196
- callback();
2197
- };
2198
- }
2199
- script.src = url;
2200
- document.getElementsByTagName('head')[0].appendChild(script);
2201
- };
2202
- /** Dynamically load css from url and return a callback */
2203
- const loadCss = (url, callback) => {
2204
- const link = document.createElement('link');
2205
- link.type = 'text/css';
2206
- link.rel = 'stylesheet';
2207
- link.type = 'text/javascript';
2208
- link.href = url;
2209
- link.onload = () => {
2210
- callback();
2211
- };
2212
- document.getElementsByTagName('head')[0].appendChild(link);
2213
- };
2214
-
2215
- class MapComponent {
2216
- constructor(olLoader) {
2217
- this.loaded$ = new BehaviorSubject(false);
2218
- this.valueChange = new EventEmitter();
2219
- olLoader.load().subscribe((_) => {
2220
- // Initialize
2221
- this._markerSource = new ol.source.Vector();
2222
- this._markerStyle = new ol.style.Style({
2223
- image: new ol.style.Icon({
2224
- anchor: [0.5, 1],
2225
- scale: 0.25,
2226
- src: '/assets/img/marker.png'
2227
- })
2228
- });
2229
- this.loaded$.next(true);
2230
- });
2231
- }
2232
- set zoom(zoom) {
2233
- if (!isNaN(zoom)) {
2234
- this._zoom = zoom;
2235
- if (this._map) {
2236
- this._map.getView().setZoom(zoom);
2237
- }
2238
- }
2239
- }
2240
- get zoom() {
2241
- return this._zoom;
2242
- }
2243
- set center(center) {
2244
- if (center && center.coordinates && center.coordinates.length === 2) {
2245
- this._center = center;
2246
- if (this._map) {
2247
- this._map.getView().setCenter(ol.proj.fromLonLat(center.coordinates));
2248
- }
2249
- }
2250
- }
2251
- get center() {
2252
- return this._center;
2253
- }
2254
- set readonly(readonly) {
2255
- if (!readonly) {
2256
- if (this._map) {
2257
- this._map.on('click', (args) => {
2258
- // args.coordinate is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
2259
- const coordinates = ol.proj.toLonLat(args.coordinate);
2260
- // alternatively: const lonLat = ol.proj.transform(args.coordinate,'EPSG:3857','EPSG:4326');
2261
- this.addMarkerAtCoordinates(coordinates);
2262
- });
2263
- this._map.on('pointermove', (event) => {
2264
- const pixel = this._map.getEventPixel(event.originalEvent);
2265
- const hit = this._map.hasFeatureAtPixel(pixel);
2266
- this._map.getViewport().style.cursor = hit ? 'move' : 'grab';
2267
- });
2268
- }
2269
- }
2270
- else {
2271
- if (this._map) {
2272
- this._map.on('click', (args) => { });
2273
- this._map.on('pointermove', (event) => { });
2274
- this._map.getViewport().style.cursor = 'grab';
2275
- }
2276
- }
2277
- this._readonly = readonly;
2278
- // reset marker coordinates so marker interactions can be created or recreated accordingly
2279
- // to the changes to readonly
2280
- this.markerCoordinates = this.markerCoordinates;
2281
- }
2282
- get readonly() {
2283
- return this._readonly;
2284
- }
2285
- set markerCoordinates(markerCoordinates) {
2286
- if (markerCoordinates && markerCoordinates.length === 2) {
2287
- this._markerCoordinates = markerCoordinates;
2288
- if (this._map) {
2289
- this.addMarkerAtCoordinates(markerCoordinates);
2290
- }
2291
- }
2292
- else {
2293
- this._markerCoordinates = undefined;
2294
- if (this._map) {
2295
- this.removeMarker();
2296
- }
2297
- }
2298
- }
2299
- get markerCoordinates() {
2300
- return this._markerCoordinates;
2301
- }
2302
- set markerPoint(markerPoint) {
2303
- if (!markerPoint ||
2304
- !(markerPoint.coordinates && markerPoint.coordinates.length === 2)) {
2305
- this.markerCoordinates = undefined;
2306
- }
2307
- else {
2308
- this.markerCoordinates = [
2309
- +markerPoint.coordinates[0],
2310
- +markerPoint.coordinates[1]
2311
- ];
2312
- }
2313
- this.valueChange.emit(markerPoint);
2314
- }
2315
- get markerPoint() {
2316
- return {
2317
- type: 'Point',
2318
- coordinates: this.markerCoordinates
2319
- };
2320
- }
2321
- ngOnInit() {
2322
- this.mapId = this.mapId ? this.mapId : 'map' + MapComponent.idCounter++;
2323
- }
2324
- ngAfterViewInit() {
2325
- this.loaded$.subscribe((loaded) => {
2326
- if (loaded) {
2327
- this.initMap();
2328
- }
2329
- });
2330
- }
2331
- initMap() {
2332
- this._map = new ol.Map({
2333
- target: this.mapId,
2334
- controls: ol.control.defaults({ attribution: false }),
2335
- layers: [
2336
- new ol.layer.Tile({
2337
- source: new ol.source.OSM()
2338
- }),
2339
- new ol.layer.Vector({
2340
- source: this._markerSource,
2341
- style: this._markerStyle
2342
- })
2343
- ],
2344
- view: new ol.View({
2345
- center: ol.proj.fromLonLat(this.center !== undefined ? this.center.coordinates : [0, 0]),
2346
- zoom: this.zoom
2347
- })
2348
- });
2349
- if (this.center === undefined || this.center === null) {
2350
- // if the center is not set, we set its default value
2351
- if ('geolocation' in navigator) {
2352
- navigator.geolocation.getCurrentPosition((position) => {
2353
- this.center = {
2354
- type: 'Point',
2355
- coordinates: [position.coords.longitude, position.coords.latitude]
2356
- };
2357
- }, (error) => {
2358
- this.center = {
2359
- type: 'Point',
2360
- coordinates: [0, 0]
2361
- };
2362
- });
2363
- }
2364
- else {
2365
- this.center = {
2366
- type: 'Point',
2367
- coordinates: [0, 0]
2368
- };
2369
- }
2370
- }
2371
- else {
2372
- // the center needs the map to be properly set, so if it was set before the map was initialized,
2373
- // we set the center again to perform necessary adjustements
2374
- this.center = this.center;
2375
- }
2376
- if (this.zoom === undefined || this.zoom === null) {
2377
- // if the zoom is not set, we set its default value
2378
- this.zoom = 18;
2379
- }
2380
- else {
2381
- // the zoom needs the map to be properly set, so if it was set before the map was initialized,
2382
- // we set the zoom again to perform necessary adjustements
2383
- this.zoom = this.zoom;
2384
- }
2385
- if (this.readonly === undefined || this.readonly === null) {
2386
- // if readonly is not set, we set its default value
2387
- this.readonly = false;
2388
- }
2389
- else {
2390
- // readonly needs the map to be properly set, so if it was set before the map was initialized,
2391
- // we set readonly again to perform necessary adjustements
2392
- this.readonly = this.readonly;
2393
- }
2394
- if (this.markerCoordinates !== undefined &&
2395
- this.markerCoordinates !== null) {
2396
- // the marker coordinates need the map to be properly set, so if they were set before the map was initialized,
2397
- // we set the marker coordinates again to perform necessary adjustements
2398
- this.markerCoordinates = this.markerCoordinates;
2399
- }
2400
- }
2401
- addMarkerAtCoordinates(coordinates) {
2402
- if (coordinates && coordinates.length === 2) {
2403
- if (this._marker !== undefined) {
2404
- this.removeMarker();
2405
- }
2406
- this._marker = new ol.Feature({
2407
- geometry: new ol.geom.Point(
2408
- // [lon, lat] is in EPSG:4326 (degrees), we transform it into EPSG:3857 (meters)
2409
- ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'))
2410
- });
2411
- this._markerSource.addFeature(this._marker);
2412
- this._markerCoordinates = this.getMarkerCoordinates();
2413
- if (!this.readonly) {
2414
- const dragInteraction = new ol.interaction.Modify({
2415
- features: new ol.Collection([this._marker]),
2416
- style: this._markerStyle,
2417
- pixelTolerance: 50,
2418
- hitDetection: true
2419
- });
2420
- this._markerInteraction = dragInteraction;
2421
- this._map.addInteraction(dragInteraction);
2422
- }
2423
- this._marker.on('change', () => {
2424
- this._markerCoordinates = this.getMarkerCoordinates();
2425
- }, this._marker);
2426
- }
2427
- }
2428
- removeMarker() {
2429
- if (this._marker !== undefined) {
2430
- this._markerSource.removeFeature(this._marker);
2431
- this._marker = undefined;
2432
- }
2433
- if (this._markerInteraction !== undefined) {
2434
- this._map.getInteractions().pop();
2435
- this._markerInteraction = undefined;
2436
- }
2437
- }
2438
- getMarkerCoordinates() {
2439
- if (this._marker === undefined || this._marker == null) {
2440
- return this._marker;
2441
- }
2442
- const coordinates = this._marker.getGeometry().getCoordinates();
2443
- // coordinates is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
2444
- return ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
2445
- }
2446
- onResize() {
2447
- if (this._map) {
2448
- this._map.updateSize();
2449
- }
2450
- }
2451
- }
2452
- MapComponent.idCounter = 0;
2453
- MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MapComponent, deps: [{ token: OpenLayerLoaderService }], target: i0.ɵɵFactoryTarget.Component });
2454
- MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: MapComponent, selector: "lux-map", inputs: { mapId: "mapId", zoom: "zoom", center: "center", readonly: "readonly", markerCoordinates: "markerCoordinates", markerPoint: "markerPoint" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.ResizedDirective, selector: "[resized]", outputs: ["resized"] }] });
2455
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MapComponent, decorators: [{
2456
- type: Component,
2457
- args: [{ selector: 'lux-map', template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] }]
2458
- }], ctorParameters: function () { return [{ type: OpenLayerLoaderService }]; }, propDecorators: { mapId: [{
2459
- type: Input
2460
- }], zoom: [{
2461
- type: Input
2462
- }], center: [{
2463
- type: Input
2464
- }], readonly: [{
2465
- type: Input
2466
- }], markerCoordinates: [{
2467
- type: Input
2468
- }], markerPoint: [{
2469
- type: Input
2470
- }], valueChange: [{
2471
- type: Output
2472
- }] } });
2473
-
2474
- class GeolocationComponent {
2475
- constructor(modalService, locationService) {
2476
- this.modalService = modalService;
2477
- this.locationService = locationService;
2478
- this.touched = false;
2479
- this.dirty = false;
2480
- this.lastErrors = null;
2481
- this.latitudeValue = undefined;
2482
- this.longitudeValue = undefined;
2483
- this.isValidNumber = isValidNumber;
2484
- this.i18n = {
2485
- en: {
2486
- lat: 'latitude',
2487
- lon: 'longitude',
2488
- selectLocation: 'Select location',
2489
- location: 'Location',
2490
- selectAction: 'Select',
2491
- cancelAction: 'Cancel',
2492
- closeAction: 'Close',
2493
- typeToSearch: 'type to search',
2494
- cardinalPoints: {
2495
- north: 'N',
2496
- south: 'S',
2497
- east: 'E',
2498
- west: 'W'
2499
- },
2500
- userErrors: {
2501
- required: 'Required field.',
2502
- minLatitude: 'Minimum latitude is $minLatitude.',
2503
- maxLatitude: 'Maximum latitude is $maxLatitude.',
2504
- minLongitude: 'Minimum longitude is $minLongitude.',
2505
- maxLongitude: 'Maximum longitude is $maxLongitude.'
2506
- }
2507
- },
2508
- es: {
2509
- lat: 'latitud',
2510
- lon: 'longitud',
2511
- selectLocation: 'Seleccione ubicación',
2512
- location: 'Ubicación',
2513
- selectAction: 'Seleccionar',
2514
- cancelAction: 'Cancelar',
2515
- closeAction: 'Cerrar',
2516
- typeToSearch: 'escribe para buscar',
2517
- cardinalPoints: {
2518
- north: 'N',
2519
- south: 'S',
2520
- east: 'E',
2521
- west: 'O'
2522
- },
2523
- userErrors: {
2524
- required: 'El campo es obligatorio.',
2525
- minLatitude: 'La latitud mínima es $minLatitude.',
2526
- maxLatitude: 'La latitud máxima es $maxLatitude.',
2527
- minLongitude: 'La longitud mínima es $minLongitude.',
2528
- maxLongitude: 'La longitud máxima es $maxLongitude.'
2529
- }
2530
- }
2531
- };
2532
- this.lang = languageDetector();
2533
- this.inlineErrors = false;
2534
- this.readonly = null;
2535
- this.valueChange = new EventEmitter();
2536
- this.keyPress = new EventEmitter();
2537
- this.onChange = (value) => { };
2538
- this.onTouched = () => { };
2539
- }
2540
- get className() {
2541
- return this.checkClassName();
2542
- }
2543
- set disabled(v) {
2544
- v = typeof v === 'string' && v !== 'false' ? true : v;
2545
- this._disabled = v;
2546
- }
2547
- get disabled() {
2548
- return this._disabled;
2549
- }
2550
- set required(v) {
2551
- this._required = v;
2552
- }
2553
- get required() {
2554
- return this._required;
2555
- }
2556
- set value(v) {
2557
- if (v === this._value) {
2558
- return; // prevent events when there is no changes
2559
- }
2560
- const initialAndEmpty = isInitialAndEmpty(this._value, v);
2561
- if (v &&
2562
- v.coordinates &&
2563
- v.coordinates.length === 2 &&
2564
- exists(v.coordinates[0] && exists(v.coordinates[1]))) {
2565
- this._value = v;
2566
- this.setLatitudeInControl(v.coordinates[1]);
2567
- this.setLongitudeInControl(v.coordinates[0]);
2568
- }
2569
- else if (!v) {
2570
- this._value = null;
2571
- this.setLatitudeInControl(null);
2572
- this.setLongitudeInControl(null);
2573
- }
2574
- else {
2575
- this._value = v;
2576
- // we don't set value in control if the value is not valid
2577
- // if we do, the content of the control changes and can erase what the user is typing
2578
- }
2579
- this.onChange(v);
2580
- if (!initialAndEmpty) {
2581
- this.valueChange.emit(v);
2582
- }
2583
- }
2584
- get value() {
2585
- return this._value;
2586
- }
2587
- // ControlValueAccessor Interface implementation
2588
- writeValue(value) {
2589
- this.value = value;
2590
- }
2591
- registerOnChange(onChange) {
2592
- this.onChange = onChange;
2593
- }
2594
- registerOnTouched(onTouched) {
2595
- this.onTouched = onTouched;
2596
- }
2597
- markAsTouched() {
2598
- if (!this.touched) {
2599
- this.onTouched();
2600
- this.touched = true;
2601
- }
2602
- }
2603
- setDisabledState(disabled) {
2604
- this.disabled = disabled;
2605
- }
2606
- // End of ControlValueAccessor Interface implementation
2607
- setLatitudeInControl(latitude) {
2608
- // this.latitude.nativeElement.value = latitude;
2609
- this.latitudeValue = latitude;
2610
- }
2611
- setLongitudeInControl(longitude) {
2612
- // this.longitude.nativeElement.value = longitude;
2613
- this.longitudeValue = longitude;
2614
- }
2615
- clear() {
2616
- this.setLatitudeInControl(null);
2617
- this.setLongitudeInControl(null);
2618
- this.value = null;
2619
- }
2620
- isClearable() {
2621
- return (isValidNumber(this.latitudeValue) || isValidNumber(this.longitudeValue));
2622
- }
2623
- // Validator interface
2624
- registerOnValidatorChange() { }
2625
- validate(control) {
2626
- const value = control.value;
2627
- let result = null;
2628
- if (this.required &&
2629
- !hasValue(value) &&
2630
- !exists(this.latitudeValue) &&
2631
- !exists(this.longitudeValue)) {
2632
- result = result || {};
2633
- result.required = { value, reason: 'Required field.' };
2634
- }
2635
- if (!exists(this.latitudeValue) && exists(this.longitudeValue)) {
2636
- result = result || {};
2637
- result.existsLatitude = {
2638
- value,
2639
- reason: 'Latitude not specified.'
2640
- };
2641
- }
2642
- if (exists(this.latitudeValue) && !exists(this.longitudeValue)) {
2643
- result = result || {};
2644
- result.existsLongitude = {
2645
- value,
2646
- reason: 'Longitude not specified.'
2647
- };
2648
- }
2649
- if (exists(this.minLatitude) && this.latitudeValue < this.minLatitude) {
2650
- result = result || {};
2651
- result.minLatitude = {
2652
- value,
2653
- min: this.minLatitude,
2654
- reason: `Latitude is lower than minimum value: ${this.minLatitude}.`
2655
- };
2656
- }
2657
- if (exists(this.maxLatitude) && this.latitudeValue > this.maxLatitude) {
2658
- result = result || {};
2659
- result.maxLatitude = {
2660
- value,
2661
- max: this.maxLatitude,
2662
- reason: `Latitude is higher than maximum value: ${this.maxLatitude}.`
2663
- };
2664
- }
2665
- if (exists(this.minLongitude) && this.longitudeValue < this.minLongitude) {
2666
- result = result || {};
2667
- result.minLongitude = {
2668
- value,
2669
- min: this.minLongitude,
2670
- reason: `Longitude is lower than minimum value: ${this.minLongitude}.`
2671
- };
2672
- }
2673
- if (exists(this.maxLongitude) && this.longitudeValue > this.maxLongitude) {
2674
- result = result || {};
2675
- result.maxLongitude = {
2676
- value,
2677
- max: this.maxLongitude,
2678
- reason: `Longitude is higher than maximum value: ${this.maxLongitude}.`
2679
- };
2680
- }
2681
- this.lastErrors = result;
2682
- return result;
2683
- }
2684
- // End of Validator interface
2685
- ngOnInit() {
2686
- this.inputId = this.inputId
2687
- ? this.inputId
2688
- : `geolocation$${GeolocationComponent.idCounter++}`;
2689
- this.setPatterns();
2690
- }
2691
- roundToStepAndUpdateLatitudeAndLongitude(newLatitudeAndLongitude) {
2692
- const newLatitude = roundToMultipleOf(newLatitudeAndLongitude[1], this.step);
2693
- const newLongitude = roundToMultipleOf(newLatitudeAndLongitude[0], this.step);
2694
- if (this.disabled || this.readonly) {
2695
- return;
2696
- }
2697
- if (!exists(newLatitudeAndLongitude)) {
2698
- this.value = null;
2699
- }
2700
- this.value = {
2701
- type: 'Point',
2702
- coordinates: [newLongitude, newLatitude]
2703
- };
2704
- }
2705
- onLostFocus() {
2706
- this.markAsTouched();
2707
- }
2708
- onEventLatitude(newLatitude) {
2709
- if (this.disabled || this.readonly) {
2710
- return;
2711
- }
2712
- const newLatitudeValue = isValidNumber(newLatitude) ? +newLatitude : null;
2713
- if (!(exists(this.value) && exists(this.value.coordinates[0])) &&
2714
- !exists(newLatitudeValue)) {
2715
- this.value = null;
2716
- }
2717
- else {
2718
- this.value = {
2719
- type: 'Point',
2720
- coordinates: [
2721
- this.value ? this.value.coordinates[0] : undefined,
2722
- newLatitudeValue
2723
- ]
2724
- };
2725
- }
2726
- this.markAsTouched();
2727
- }
2728
- onEventLongitude(newLongitude) {
2729
- if (this.disabled || this.readonly) {
2730
- return;
2731
- }
2732
- const newLongitudeValue = isValidNumber(newLongitude)
2733
- ? +newLongitude
2734
- : null;
2735
- if (!exists(newLongitudeValue) &&
2736
- !(exists(this.value) && exists(this._value.coordinates[1]))) {
2737
- this.value = null;
2738
- }
2739
- else {
2740
- this.value = {
2741
- type: 'Point',
2742
- coordinates: [
2743
- newLongitudeValue,
2744
- this.value ? this.value.coordinates[1] : undefined
2745
- ]
2746
- };
2747
- }
2748
- this.markAsTouched();
2749
- }
2750
- onKeyPress(event) {
2751
- this.keyPress.emit(event);
2752
- }
2753
- checkClassName() {
2754
- return this.disabled
2755
- ? this.readonly
2756
- ? 'disabled readonly'
2757
- : 'disabled'
2758
- : this.readonly
2759
- ? 'readonly'
2760
- : '';
2761
- }
2762
- openModalMap(modal) {
2763
- this.modalService.open(modal).result.then((result) => {
2764
- if (result !== 'cancel') {
2765
- this.roundToStepAndUpdateLatitudeAndLongitude(result);
2766
- }
2767
- }, (_) => { });
2768
- }
2769
- onSearchLocationChanged(newValue, map) {
2770
- map.markerPoint = newValue;
2771
- map.center = map.markerPoint;
2772
- }
2773
- get mapTitle() {
2774
- return this._disabled || !!this.readonly
2775
- ? this.i18n[this.lang].location
2776
- : this.i18n[this.lang].selectLocation;
2777
- }
2778
- get self() {
2779
- return this;
2780
- }
2781
- getLabels(instance, keys) {
2782
- return instance.locationService.getLabels(instance.locationService, keys);
2783
- }
2784
- getData(instance, search) {
2785
- return instance.locationService.getData(instance.locationService, search);
2786
- }
2787
- setPatterns() {
2788
- this.step = this.step || 0.00001; // 0.00001 degrees = 1.11 meters
2789
- this.zoom = this.zoom || 18; // (360/2^18) degrees ~ 0.00137 degrees ~ 153 meters
2790
- this.minLatitude = this.minLatitude || -90;
2791
- this.maxLatitude = this.maxLatitude || +90;
2792
- this.minLongitude = this.minLongitude || -180;
2793
- this.maxLongitude = this.maxLongitude || +180;
2794
- }
2795
- }
2796
- GeolocationComponent.idCounter = 0;
2797
- GeolocationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationComponent, deps: [{ token: ModalService }, { token: GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
2798
- GeolocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GeolocationComponent, selector: "lux-geolocation", inputs: { minLatitude: "minLatitude", maxLatitude: "maxLatitude", minLongitude: "minLongitude", maxLongitude: "maxLongitude", step: "step", zoom: "zoom", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
2799
- {
2800
- provide: NG_VALUE_ACCESSOR,
2801
- multi: true,
2802
- useExisting: forwardRef(() => GeolocationComponent)
2803
- },
2804
- {
2805
- provide: NG_VALIDATORS,
2806
- multi: true,
2807
- useExisting: forwardRef(() => GeolocationComponent)
2808
- }
2809
- ], viewQueries: [{ propertyName: "latitude", first: true, predicate: ["latitude"], descendants: true, static: true }, { propertyName: "longitude", first: true, predicate: ["longitude"], descendants: true, static: true }, { propertyName: "map", first: true, predicate: ["map"], descendants: true }], ngImport: i0, template: "<input\n #latitude\n class=\"rounded-left prefix\"\n [ngClass]=\"className\"\n type=\"number\"\n [id]=\"inputId + '$latitude'\"\n [(ngModel)]=\"latitudeValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.min]=\"\n minLatitude !== undefined && minLatitude !== null\n ? minLatitude.toString()\n : undefined\n \"\n [attr.max]=\"\n maxLatitude !== undefined && maxLatitude !== null\n ? maxLatitude.toString()\n : undefined\n \"\n [attr.step]=\"\n step !== undefined && step !== null ? step.toString() : undefined\n \"\n [placeholder]=\"i18n[lang].lat\"\n (keyup)=\"onEventLatitude(latitude.value)\"\n (change)=\"onEventLatitude(latitude.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<div\n class=\"infix symbol monospace clickable\"\n [ngClass]=\"className\"\n (click)=\"openModalMap(modalMap)\">\n <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n i18n[lang].cardinalPoints.north\n }}</span>\n <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n i18n[lang].cardinalPoints.south\n }}</span>\n <span *ngIf=\"!isValidNumber(latitudeValue)\">-</span>\n</div>\n<input\n #longitude\n class=\"prefix\"\n [ngClass]=\"className\"\n type=\"number\"\n [id]=\"inputId + '$longitude'\"\n [(ngModel)]=\"longitudeValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.min]=\"\n minLongitude !== undefined && minLongitude !== null\n ? minLongitude.toString()\n : undefined\n \"\n [attr.max]=\"\n maxLongitude !== undefined && maxLongitude !== null\n ? maxLongitude.toString()\n : undefined\n \"\n [attr.step]=\"\n step !== undefined && step !== null ? step.toString() : undefined\n \"\n [placeholder]=\"i18n[lang].lon\"\n (keyup)=\"onEventLongitude(longitude.value)\"\n (change)=\"onEventLongitude(longitude.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<div\n class=\"infix symbol monospace clickable\"\n [ngClass]=\"className\"\n (click)=\"openModalMap(modalMap)\"\n>\n <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n i18n[lang].cardinalPoints.east\n }}</span>\n <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n i18n[lang].cardinalPoints.west\n }}</span>\n <span *ngIf=\"!isValidNumber(longitudeValue)\">-</span>\n</div>\n<div\n [class]=\"\n disabled || readonly || !isClearable()\n ? 'clickable rounded-right postfix symbol'\n : 'clickable postfix symbol'\n \"\n [ngClass]=\"className\"\n (click)=\"openModalMap(modalMap)\"\n>\n <span class=\"icon-globe\"></span>\n</div>\n<button\n #clearButton\n *ngIf=\"!disabled && !readonly && isClearable()\"\n class=\"rounded-right postfix bordered icon icon-clear\"\n [id]=\"inputId + '$clear'\"\n type=\"button\"\n (click)=\"clear()\"\n aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ i18n[lang].userErrors.required }}\n </div>\n <div *ngIf=\"lastErrors.minLatitude\">\n {{\n i18n[lang].userErrors.minLatitude.replace(\n '$minLatitude',\n lastErrors.minLatitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLatitude\">\n {{\n i18n[lang].userErrors.maxLatitude.replace(\n '$maxLatitude',\n lastErrors.maxLatitude.max\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.minLongitude\">\n {{\n i18n[lang].userErrors.minLongitude.replace(\n '$minLongitude',\n lastErrors.minLongitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLongitude\">\n {{\n i18n[lang].userErrors.maxLongitude.replace(\n '$maxLongitude',\n lastErrors.maxLongitude.max\n )\n }}\n </div>\n</div>\n\n<ng-template #modalMap let-modal>\n <div class=\"lux-modal-header\">\n <h4 class=\"modal-title default-font\" id=\"modal-basic-title\">{{ mapTitle }}</h4>\n <button\n type=\"button\"\n class=\"close\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss('Cross click')\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n <div class=\"lux-modal-body content\">\n <lux-autocomplete\n #searchBar\n [attr.aria-label]=\"i18n[lang].typeToSearch\"\n [placeholder]=\"i18n[lang].typeToSearch\"\n *ngIf=\"!disabled && !readonly\"\n [instance]=\"self\"\n [resolveLabelsFunction]=\"getLabels\"\n [populateFunction]=\"getData\"\n (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\n ></lux-autocomplete>\n <div class=\"map-container\">\n <lux-map\n #map\n [center]=\"value\"\n [markerPoint]=\"value\"\n [zoom]=\"zoom\"\n [readonly]=\"readonly === true || disabled === true ? true : false\"\n ></lux-map>\n </div>\n </div>\n <div class=\"lux-modal-footer\">\n <button\n *ngIf=\"disabled || readonly\"\n type=\"button\"\n class=\"btn btn-cancel\"\n (click)=\"modal.close('cancel')\"\n >\n {{ i18n[lang].closeAction }}\n </button>\n <button\n *ngIf=\"!disabled && !readonly\"\n type=\"button\"\n class=\"btn btn-cancel\"\n (click)=\"modal.close('cancel')\"\n >\n {{ i18n[lang].cancelAction }}\n </button>\n <button\n *ngIf=\"!disabled && !readonly\"\n type=\"button\"\n class=\"btn btn-select\"\n (click)=\"modal.close(map.markerPoint.coordinates)\"\n >\n {{ i18n[lang].selectAction }}\n </button>\n </div>\n</ng-template>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:url(/assets/img/globe.svg) no-repeat center;background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:45vh;height:var(--lux-geolocation-map-height, 45vh);width:90vw;width:var(--lux-geolocation-map-width, 90vw);max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: MapComponent, selector: "lux-map", inputs: ["mapId", "zoom", "center", "readonly", "markerCoordinates", "markerPoint"], outputs: ["valueChange"] }] });
2810
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationComponent, decorators: [{
2811
- type: Component,
2812
- args: [{ selector: 'lux-geolocation', providers: [
2813
- {
2814
- provide: NG_VALUE_ACCESSOR,
2815
- multi: true,
2816
- useExisting: forwardRef(() => GeolocationComponent)
2817
- },
2818
- {
2819
- provide: NG_VALIDATORS,
2820
- multi: true,
2821
- useExisting: forwardRef(() => GeolocationComponent)
2822
- }
2823
- ], template: "<input\n #latitude\n class=\"rounded-left prefix\"\n [ngClass]=\"className\"\n type=\"number\"\n [id]=\"inputId + '$latitude'\"\n [(ngModel)]=\"latitudeValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.min]=\"\n minLatitude !== undefined && minLatitude !== null\n ? minLatitude.toString()\n : undefined\n \"\n [attr.max]=\"\n maxLatitude !== undefined && maxLatitude !== null\n ? maxLatitude.toString()\n : undefined\n \"\n [attr.step]=\"\n step !== undefined && step !== null ? step.toString() : undefined\n \"\n [placeholder]=\"i18n[lang].lat\"\n (keyup)=\"onEventLatitude(latitude.value)\"\n (change)=\"onEventLatitude(latitude.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<div\n class=\"infix symbol monospace clickable\"\n [ngClass]=\"className\"\n (click)=\"openModalMap(modalMap)\">\n <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n i18n[lang].cardinalPoints.north\n }}</span>\n <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n i18n[lang].cardinalPoints.south\n }}</span>\n <span *ngIf=\"!isValidNumber(latitudeValue)\">-</span>\n</div>\n<input\n #longitude\n class=\"prefix\"\n [ngClass]=\"className\"\n type=\"number\"\n [id]=\"inputId + '$longitude'\"\n [(ngModel)]=\"longitudeValue\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.min]=\"\n minLongitude !== undefined && minLongitude !== null\n ? minLongitude.toString()\n : undefined\n \"\n [attr.max]=\"\n maxLongitude !== undefined && maxLongitude !== null\n ? maxLongitude.toString()\n : undefined\n \"\n [attr.step]=\"\n step !== undefined && step !== null ? step.toString() : undefined\n \"\n [placeholder]=\"i18n[lang].lon\"\n (keyup)=\"onEventLongitude(longitude.value)\"\n (change)=\"onEventLongitude(longitude.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<div\n class=\"infix symbol monospace clickable\"\n [ngClass]=\"className\"\n (click)=\"openModalMap(modalMap)\"\n>\n <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n i18n[lang].cardinalPoints.east\n }}</span>\n <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n i18n[lang].cardinalPoints.west\n }}</span>\n <span *ngIf=\"!isValidNumber(longitudeValue)\">-</span>\n</div>\n<div\n [class]=\"\n disabled || readonly || !isClearable()\n ? 'clickable rounded-right postfix symbol'\n : 'clickable postfix symbol'\n \"\n [ngClass]=\"className\"\n (click)=\"openModalMap(modalMap)\"\n>\n <span class=\"icon-globe\"></span>\n</div>\n<button\n #clearButton\n *ngIf=\"!disabled && !readonly && isClearable()\"\n class=\"rounded-right postfix bordered icon icon-clear\"\n [id]=\"inputId + '$clear'\"\n type=\"button\"\n (click)=\"clear()\"\n aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ i18n[lang].userErrors.required }}\n </div>\n <div *ngIf=\"lastErrors.minLatitude\">\n {{\n i18n[lang].userErrors.minLatitude.replace(\n '$minLatitude',\n lastErrors.minLatitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLatitude\">\n {{\n i18n[lang].userErrors.maxLatitude.replace(\n '$maxLatitude',\n lastErrors.maxLatitude.max\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.minLongitude\">\n {{\n i18n[lang].userErrors.minLongitude.replace(\n '$minLongitude',\n lastErrors.minLongitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLongitude\">\n {{\n i18n[lang].userErrors.maxLongitude.replace(\n '$maxLongitude',\n lastErrors.maxLongitude.max\n )\n }}\n </div>\n</div>\n\n<ng-template #modalMap let-modal>\n <div class=\"lux-modal-header\">\n <h4 class=\"modal-title default-font\" id=\"modal-basic-title\">{{ mapTitle }}</h4>\n <button\n type=\"button\"\n class=\"close\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss('Cross click')\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n <div class=\"lux-modal-body content\">\n <lux-autocomplete\n #searchBar\n [attr.aria-label]=\"i18n[lang].typeToSearch\"\n [placeholder]=\"i18n[lang].typeToSearch\"\n *ngIf=\"!disabled && !readonly\"\n [instance]=\"self\"\n [resolveLabelsFunction]=\"getLabels\"\n [populateFunction]=\"getData\"\n (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\n ></lux-autocomplete>\n <div class=\"map-container\">\n <lux-map\n #map\n [center]=\"value\"\n [markerPoint]=\"value\"\n [zoom]=\"zoom\"\n [readonly]=\"readonly === true || disabled === true ? true : false\"\n ></lux-map>\n </div>\n </div>\n <div class=\"lux-modal-footer\">\n <button\n *ngIf=\"disabled || readonly\"\n type=\"button\"\n class=\"btn btn-cancel\"\n (click)=\"modal.close('cancel')\"\n >\n {{ i18n[lang].closeAction }}\n </button>\n <button\n *ngIf=\"!disabled && !readonly\"\n type=\"button\"\n class=\"btn btn-cancel\"\n (click)=\"modal.close('cancel')\"\n >\n {{ i18n[lang].cancelAction }}\n </button>\n <button\n *ngIf=\"!disabled && !readonly\"\n type=\"button\"\n class=\"btn btn-select\"\n (click)=\"modal.close(map.markerPoint.coordinates)\"\n >\n {{ i18n[lang].selectAction }}\n </button>\n </div>\n</ng-template>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:url(/assets/img/globe.svg) no-repeat center;background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:45vh;height:var(--lux-geolocation-map-height, 45vh);width:90vw;width:var(--lux-geolocation-map-width, 90vw);max-width:100%}\n"] }]
2824
- }], ctorParameters: function () { return [{ type: ModalService }, { type: GeolocationService }]; }, propDecorators: { latitude: [{
2825
- type: ViewChild,
2826
- args: ['latitude', { static: true }]
2827
- }], longitude: [{
2828
- type: ViewChild,
2829
- args: ['longitude', { static: true }]
2830
- }], map: [{
2831
- type: ViewChild,
2832
- args: ['map', { static: false }]
2833
- }], minLatitude: [{
2834
- type: Input
2835
- }], maxLatitude: [{
2836
- type: Input
2837
- }], minLongitude: [{
2838
- type: Input
2839
- }], maxLongitude: [{
2840
- type: Input
2841
- }], step: [{
2842
- type: Input
2843
- }], zoom: [{
2844
- type: Input
2845
- }], lang: [{
2846
- type: Input
2847
- }], inlineErrors: [{
2848
- type: Input
2849
- }], inputId: [{
2850
- type: Input
2851
- }], ariaLabel: [{
2852
- type: Input,
2853
- args: ['aria-label']
2854
- }], readonly: [{
2855
- type: Input
2856
- }], disabled: [{
2857
- type: Input
2858
- }], required: [{
2859
- type: Input
2860
- }], value: [{
2861
- type: Input
2862
- }], valueChange: [{
2863
- type: Output
2864
- }], keyPress: [{
2865
- type: Output
2866
- }] } });
2867
-
2868
- /**
2869
- * A service that holds the functionality for advanced handling of regular expressions
2870
- */
2871
- class RegexpService {
2872
- constructor() { }
2873
- removeOuterRoundBrackets(regularExpressionString) {
2874
- while (regularExpressionString[0] === '(' &&
2875
- regularExpressionString[regularExpressionString.length - 1] === ')') {
2876
- regularExpressionString = regularExpressionString.slice(1, regularExpressionString.length - 1);
2877
- }
2878
- return regularExpressionString;
2879
- }
2880
- isQuantifier(quantifier) {
2881
- switch (quantifier) {
2882
- case '{':
2883
- case '?':
2884
- case '+':
2885
- case '*':
2886
- return true;
2887
- }
2888
- return false;
2889
- }
2890
- parseMinimalAmountOfQuantifier(quantifier) {
2891
- switch (quantifier[0]) {
2892
- case '?':
2893
- case '*':
2894
- return 0;
2895
- case '+':
2896
- return 1;
2897
- case '{':
2898
- for (let index = 1; index < quantifier.length; ++index) {
2899
- if (quantifier[index] < '0' || quantifier[index] > '9') {
2900
- return Number(quantifier.slice(1, index));
2901
- }
2902
- }
2903
- }
2904
- return 0;
2905
- }
2906
- sliceRegexByOr(regularExpressionString) {
2907
- const result = [];
2908
- let slicedRegex = '';
2909
- let lastSliceIndex = 0;
2910
- let roundBracketCount = 0;
2911
- let squareBracketCount = 0;
2912
- let curlyBracketCount = 0;
2913
- let index = 0;
2914
- for (; index < regularExpressionString.length; ++index) {
2915
- switch (regularExpressionString[index]) {
2916
- case '\\':
2917
- // escape sequence; skip the next character
2918
- ++index;
2919
- break;
2920
- case '(':
2921
- roundBracketCount += 1;
2922
- break;
2923
- case ')':
2924
- roundBracketCount -= 1;
2925
- break;
2926
- case '[':
2927
- squareBracketCount += 1;
2928
- break;
2929
- case ']':
2930
- squareBracketCount -= 1;
2931
- break;
2932
- case '{':
2933
- curlyBracketCount += 1;
2934
- break;
2935
- case '}':
2936
- curlyBracketCount -= 1;
2937
- break;
2938
- case '|':
2939
- if (roundBracketCount === 0 &&
2940
- squareBracketCount === 0 &&
2941
- curlyBracketCount === 0) {
2942
- slicedRegex = this.removeOuterRoundBrackets(regularExpressionString.slice(lastSliceIndex, index));
2943
- result.push(slicedRegex);
2944
- lastSliceIndex = index + 1;
2945
- }
2946
- break;
2947
- }
2948
- }
2949
- slicedRegex = this.removeOuterRoundBrackets(regularExpressionString.slice(lastSliceIndex, index));
2950
- result.push(slicedRegex);
2951
- return result;
2952
- }
2953
- sliceRegexByThen(regularExpressionString) {
2954
- // the actual result
2955
- const resultStart = [];
2956
- // the remainder of the regex in each case
2957
- const resultRemainder = [];
2958
- let roundBracketCount = 0;
2959
- let squareBracketCount = 0;
2960
- let curlyBracketCount = 0;
2961
- for (let index = 0; index < regularExpressionString.length; ++index) {
2962
- switch (regularExpressionString[index]) {
2963
- case '\\':
2964
- // escape sequence; skip the next character
2965
- ++index;
2966
- break;
2967
- case '(':
2968
- roundBracketCount += 1;
2969
- break;
2970
- case ')':
2971
- roundBracketCount -= 1;
2972
- break;
2973
- case '[':
2974
- squareBracketCount += 1;
2975
- break;
2976
- case ']':
2977
- squareBracketCount -= 1;
2978
- break;
2979
- case '{':
2980
- curlyBracketCount += 1;
2981
- break;
2982
- case '}':
2983
- curlyBracketCount -= 1;
2984
- break;
2985
- }
2986
- if (roundBracketCount === 0 &&
2987
- squareBracketCount === 0 &&
2988
- curlyBracketCount === 0) {
2989
- if (!this.isQuantifier(regularExpressionString[index + 1])) {
2990
- resultStart.push(regularExpressionString.slice(0, index + 1));
2991
- resultRemainder.push(regularExpressionString.slice(index + 1));
2992
- }
2993
- else {
2994
- // let minimalAmountOfRepeats = parseMinimalAmountOfQuantifier(regularExpressionString.slice(index + 1));
2995
- // TODO
2996
- }
2997
- }
2998
- }
2999
- return [resultStart, resultRemainder];
3000
- }
3001
- suggestion(beginning, regularExpressionString) {
3002
- if (new RegExp(regularExpressionString).test(beginning)) {
3003
- // TODO: RETURN AN EMPTY STRING
3004
- return 'YA ES IGUAL, NO HAY MÁS QUE SUGERIR';
3005
- }
3006
- const regexOptions = this.sliceRegexByOr(regularExpressionString);
3007
- if (regexOptions.length > 1) {
3008
- for (let regexOptionIndex = 0; regexOptionIndex < regexOptions.length; ++regexOptionIndex) {
3009
- const regexParts = this.sliceRegexByThen(regexOptions[regexOptionIndex]);
3010
- const regexPartsStarts = regexParts[0];
3011
- const regexPartsRemainders = regexParts[1];
3012
- // for each option, test if the first part of the regex matches
3013
- // if it doesn't, continue
3014
- // if it does, keep checking until what part it matches
3015
- if (!new RegExp(regexPartsStarts[0]).test(beginning)) {
3016
- // if there are no more options
3017
- if (regexOptionIndex === regexOptions.length - 1) {
3018
- // we return the first option, but we could return any option
3019
- // TODO: RETURN ANY TEXT THAT MATCHES regexOptions[0]
3020
- return regexOptions[0];
3021
- }
3022
- }
3023
- else {
3024
- for (let regexPartIndex = 1; regexPartIndex < regexPartsStarts.length; ++regexPartIndex) {
3025
- if (!new RegExp(regexPartsStarts[regexPartIndex]).test(beginning)) {
3026
- // TODO: RETURN ANY TEXT THAT MATCHES regexPartsRemainders[regexPartIndex - 1]
3027
- return regexPartsRemainders[regexPartIndex - 1];
3028
- }
3029
- }
3030
- }
3031
- }
3032
- }
3033
- else if (regexOptions.length === 1) {
3034
- const regexParts = this.sliceRegexByThen(regexOptions[0]);
3035
- const regexPartsStarts = regexParts[0];
3036
- const regexPartsRemainders = regexParts[1];
3037
- if (!new RegExp(regexPartsStarts[0]).test(beginning)) {
3038
- // TODO: RETURN ANY TEXT THAT MATCHES regularExpressionString
3039
- return regularExpressionString;
3040
- }
3041
- else {
3042
- for (let regexPartIndex = 1; regexPartIndex < regexPartsStarts.length; ++regexPartIndex) {
3043
- if (!new RegExp(regexPartsStarts[regexPartIndex]).test(beginning)) {
3044
- // TODO: RETURN ANY TEXT THAT MATCHES regexPartsRemainders[regexPartIndex - 1]
3045
- return regexPartsRemainders[regexPartIndex - 1];
3046
- }
3047
- }
3048
- }
3049
- }
3050
- // TODO: RETURN AN EMPTY STRING
3051
- return 'NO DEBERÍA SER POSIBLE';
3052
- }
3053
- }
3054
- RegexpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
3055
- RegexpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RegexpService, providedIn: 'root' });
3056
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RegexpService, decorators: [{
3057
- type: Injectable,
3058
- args: [{ providedIn: 'root' }]
3059
- }], ctorParameters: function () { return []; } });
3060
-
3061
- class InputComponent {
3062
- constructor(regexpService) {
3063
- this.regexpService = regexpService;
3064
- this.touched = false;
3065
- this.dirty = false;
3066
- this.lastErrors = null;
3067
- this._value = '';
3068
- this._pattern = undefined;
3069
- this._regexp = undefined;
3070
- this.userErrors = {
3071
- en: {
3072
- required: 'Required field.',
3073
- min: 'Minimum value is $min.',
3074
- max: 'Maximum value is $max.',
3075
- email: 'Format should match example@example.com.',
3076
- url: 'Format should match https://example.com.',
3077
- color: 'Format should match #XXXXXX.'
3078
- },
3079
- es: {
3080
- required: 'El campo es obligatorio.',
3081
- min: 'El valor mínimo es $min.',
3082
- max: 'El valor máximo es $max.',
3083
- email: 'El campo debe tener un formato como ejemplo@ejemplo.com.',
3084
- url: 'El campo debe tener un formato como https://ejemplo.com.',
3085
- color: 'El campo debe tener un formato como #XXXXXX.'
3086
- }
3087
- };
3088
- this.lang = languageDetector();
3089
- this.inlineErrors = false;
3090
- this.readonly = null;
3091
- this.valueChange = new EventEmitter();
3092
- this.keyPress = new EventEmitter();
3093
- this.onChange = (value) => { };
3094
- this.onTouched = () => { };
3095
- }
3096
- get className() {
3097
- return this.checkClassName();
3098
- }
3099
- get color() {
3100
- return this.checkColor();
3101
- }
3102
- set disabled(v) {
3103
- v = typeof v === 'string' ? true : v;
3104
- this._disabled = v;
3105
- }
3106
- get disabled() {
3107
- return this._disabled;
3108
- }
3109
- set pattern(p) {
3110
- this._pattern = p;
3111
- if (p === undefined) {
3112
- this._regexp = undefined;
3113
- }
3114
- else {
3115
- try {
3116
- this._regexp = new RegExp(p);
3117
- }
3118
- catch (e) {
3119
- this._pattern = undefined;
3120
- this._regexp = undefined;
3121
- }
3122
- }
3123
- }
3124
- get pattern() {
3125
- return this._pattern;
3126
- }
3127
- set currency(v) {
3128
- this._currency = v.toUpperCase();
3129
- }
3130
- get currency() {
3131
- return this._currency;
3132
- }
3133
- set placeholder(v) {
3134
- this._placeholder = v;
3135
- }
3136
- get placeholder() {
3137
- return this._placeholder ? this._placeholder : '';
3138
- }
3139
- set required(v) {
3140
- this._required = v;
3141
- }
3142
- get required() {
3143
- return this._required;
3144
- }
3145
- set type(v) {
3146
- this._type = v.toLowerCase();
3147
- this.domain = v.toLowerCase();
3148
- this.checkType(v);
3149
- }
3150
- get type() {
3151
- return this._type ? this._type : 'text';
3152
- }
3153
- set value(v) {
3154
- v = v === undefined ? null : v;
3155
- if (v === this._value) {
3156
- return; // prevent events when there is no changes
3157
- }
3158
- const initialAndEmpty = isInitialAndEmpty(this._value, v);
3159
- if (this.type === 'date') {
3160
- v = normalizeDate(v);
3161
- }
3162
- this._value = v;
3163
- this.onChange(v);
3164
- if (!initialAndEmpty) {
3165
- this.valueChange.emit(v);
3166
- }
3167
- }
3168
- get value() {
3169
- if (this.isPercentage() || this.isPermillage() || this.isNumber()) {
3170
- const numVal = parseFloat(this._value);
3171
- if (!Number.isNaN(numVal)) {
3172
- return numVal;
3173
- }
3174
- }
3175
- return this._value;
3176
- }
3177
- // ControlValueAccessor Interface implementation
3178
- writeValue(value) {
3179
- this.value = value;
3180
- this.setValueInControl(value);
3181
- }
3182
- registerOnChange(onChange) {
3183
- this.onChange = onChange;
3184
- }
3185
- registerOnTouched(onTouched) {
3186
- this.onTouched = onTouched;
3187
- }
3188
- markAsTouched() {
3189
- if (!this.touched) {
3190
- this.onTouched();
3191
- this.touched = true;
3192
- }
3193
- }
3194
- setDisabledState(disabled) {
3195
- this.disabled = disabled;
3196
- }
3197
- // End of ControlValueAccessor Interface implementation
3198
- setValueInControl(v) {
3199
- if (this.domain === 'date') {
3200
- v = normalizeDate(v);
3201
- }
3202
- if (this.input) {
3203
- this.input.nativeElement.value = v;
3204
- }
3205
- if (this.textarea) {
3206
- this.textarea.nativeElement.value = v;
3207
- }
3208
- }
3209
- // Validator interface
3210
- registerOnValidatorChange() { }
3211
- validate(control) {
3212
- const value = control.value;
3213
- let result = null;
3214
- if (this.required && !hasValue(value)) {
3215
- result = result || {};
3216
- result.required = { value, reason: 'Required field.' };
3217
- }
3218
- if (this._regexp && hasValue(value) && !this._regexp.test(value)) {
3219
- result = result || {};
3220
- result.pattern = {
3221
- value,
3222
- reason: `Value must follow the pattern: ${this._pattern}`
3223
- };
3224
- }
3225
- if (this.type === 'email' && hasValue(value) && !isValidEmail(value)) {
3226
- result = result || {};
3227
- result.email = { value, reason: 'Invalid email.' };
3228
- }
3229
- if (this.type === 'url' && hasValue(value) && !isValidRelativeUrl(value)) {
3230
- result = result || {};
3231
- result.url = { value, reason: 'Invalid URL.' };
3232
- }
3233
- if (this.type === 'color' && hasValue(value) && !isValidColor(value)) {
3234
- result = result || {};
3235
- result.color = { value, reason: 'Invalid color.' };
3236
- }
3237
- if (this.type === 'number' && hasValue(value) && !isValidNumber(value)) {
3238
- result = result || {};
3239
- result.numeric = { value, reason: 'Invalid number.' };
3240
- }
3241
- if (this.type === 'date' ||
3242
- this.type === 'time' ||
3243
- this.type === 'timestamp') {
3244
- if (typeof this.min === 'string' &&
3245
- hasValue(value) &&
3246
- String(value).localeCompare(this.min) === -1) {
3247
- result = result || {};
3248
- result.min = {
3249
- value,
3250
- min: this.min,
3251
- reason: `Value is lower than minimum value: ${this.min}.`
3252
- };
3253
- }
3254
- if (typeof this.max === 'string' &&
3255
- hasValue(value) &&
3256
- String(value).localeCompare(this.max) !== -1) {
3257
- result = result || {};
3258
- result.max = {
3259
- value,
3260
- max: this.max,
3261
- reason: `Value is greater than than maximum value: ${this.max}.`
3262
- };
3263
- }
3264
- }
3265
- if (this.type === 'percentage' ||
3266
- this.type === 'permillage' ||
3267
- this.type === 'number' ||
3268
- this.type === 'currency') {
3269
- if (hasValue(this.min) && hasValue(value) && value < +this.min) {
3270
- result = result || {};
3271
- result.min = {
3272
- value,
3273
- min: this.min,
3274
- reason: `Value is lower than minimum value: ${this.min}.`
3275
- };
3276
- }
3277
- if (hasValue(this.max) && hasValue(value) && value > +this.max) {
3278
- result = result || {};
3279
- result.max = {
3280
- value,
3281
- max: this.max,
3282
- reason: `Value is greater than than maximum value: ${this.max}.`
3283
- };
3284
- }
3285
- }
3286
- this.lastErrors = result;
3287
- return result;
3288
- }
3289
- // End of Validator interface
3290
- ngOnInit() {
3291
- this.inputId = this.inputId
3292
- ? this.inputId
3293
- : `${this.type}$${InputComponent.idCounter++}`;
3294
- }
3295
- onLostFocus() {
3296
- this.markAsTouched();
3297
- }
3298
- onKeyUp(newValue) {
3299
- this.value = newValue;
3300
- }
3301
- onChangeValue(newValue) {
3302
- this.value = newValue;
3303
- if (this.isColor()) {
3304
- this.colorpicker.nativeElement.value = undefined;
3305
- }
3306
- this.markAsTouched();
3307
- }
3308
- onKeyPress(event) {
3309
- this.keyPress.emit(event);
3310
- }
3311
- onColorPicked(newValue) {
3312
- this.onChangeValue(newValue);
3313
- this.setValueInControl(newValue);
3314
- }
3315
- isUrl() {
3316
- return this.type === 'url';
3317
- }
3318
- isColor() {
3319
- return this.type === 'color';
3320
- }
3321
- isNumber() {
3322
- return this.type === 'number';
3323
- }
3324
- isPercentage() {
3325
- return this.type === 'percentage';
3326
- }
3327
- isPermillage() {
3328
- return this.type === 'permillage';
3329
- }
3330
- hasPrefix() {
3331
- return this.currency === 'USD';
3332
- }
3333
- hasPostfix() {
3334
- return (this.currency === 'EUR' ||
3335
- this.isPercentage() ||
3336
- this.isPermillage() ||
3337
- (this.isUrl() && !!this.value) ||
3338
- this.isColor());
3339
- }
3340
- checkClassName() {
3341
- return this.disabled
3342
- ? this.readonly
3343
- ? 'disabled readonly'
3344
- : 'disabled'
3345
- : this.readonly
3346
- ? 'readonly'
3347
- : '';
3348
- }
3349
- checkColor() {
3350
- return this.type === 'color' && isValidColor(this.value)
3351
- ? this.value
3352
- : 'initial';
3353
- }
3354
- checkType(type) {
3355
- switch (type) {
3356
- case 'email':
3357
- this.setEmailPatterns();
3358
- break;
3359
- case 'url':
3360
- this.setUrlPatterns();
3361
- break;
3362
- case 'color':
3363
- this.setColorPatterns();
3364
- break;
3365
- case 'date':
3366
- this.setDatePatterns();
3367
- break;
3368
- case 'time':
3369
- this.setTimePatterns();
3370
- break;
3371
- case 'password':
3372
- this.setPasswordPatterns();
3373
- break;
3374
- case 'number':
3375
- this.setNumberPatterns();
3376
- break;
3377
- case 'currency':
3378
- this.setCurrencyPatterns();
3379
- break;
3380
- case 'percentage':
3381
- this.setPercentagePatterns();
3382
- break;
3383
- case 'permillage':
3384
- this.setPermillagePatterns();
3385
- break;
3386
- default:
3387
- break;
3388
- }
3389
- }
3390
- setEmailPatterns() { }
3391
- setUrlPatterns() { }
3392
- setColorPatterns() {
3393
- this.domain = 'text';
3394
- }
3395
- setDatePatterns() {
3396
- this.min = this.min || '1900-01-01';
3397
- this.max = this.max || '2100-01-01';
3398
- }
3399
- setTimePatterns() { }
3400
- setPasswordPatterns() { }
3401
- setNumberPatterns() {
3402
- this.domain = 'number';
3403
- this.placeholder = '0';
3404
- }
3405
- setCurrencyPatterns() {
3406
- this.domain = 'number';
3407
- this.step = this.step || 0.1;
3408
- this.min = this.min || 0.0;
3409
- this.max = this.max || 10000.0;
3410
- this.value = 0.0;
3411
- }
3412
- setPercentagePatterns() {
3413
- this.domain = 'number';
3414
- this.step = this.step || 0.01;
3415
- this.min = this.min || 0.0;
3416
- this.max = this.max || 100.0;
3417
- this.placeholder = '0.00';
3418
- }
3419
- setPermillagePatterns() {
3420
- this.domain = 'number';
3421
- this.step = this.step || 0.01;
3422
- this.min = this.min || 0.0;
3423
- this.max = this.max || 1000.0;
3424
- this.placeholder = '0.00';
3425
- }
3426
- }
3427
- InputComponent.idCounter = 0;
3428
- InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, deps: [{ token: RegexpService }], target: i0.ɵɵFactoryTarget.Component });
3429
- InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: InputComponent, selector: "lux-input", inputs: { rows: "rows", cols: "cols", step: "step", min: "min", max: "max", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", pattern: "pattern", currency: "currency", placeholder: "placeholder", required: "required", type: "type", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
3430
- {
3431
- provide: NG_VALUE_ACCESSOR,
3432
- multi: true,
3433
- useExisting: forwardRef(() => InputComponent)
3434
- },
3435
- {
3436
- provide: NG_VALIDATORS,
3437
- multi: true,
3438
- useExisting: forwardRef(() => InputComponent)
3439
- }
3440
- ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n <span>$</span>\n</div>\n<input\n #input\n *ngIf=\"type !== 'textarea'\"\n [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n [ngClass]=\"className\"\n placement=\"top\"\n [id]=\"inputId\"\n [type]=\"domain\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.min]=\"min?.toString() || undefined\"\n [attr.max]=\"max?.toString() || undefined\"\n [attr.step]=\"step?.toString() || undefined\"\n [attr.pattern]=\"pattern || undefined\"\n [placeholder]=\"placeholder\"\n (keyup)=\"onKeyUp(input.value)\"\n (change)=\"onChangeValue(input.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<textarea\n #textarea\n *ngIf=\"type === 'textarea'\"\n class=\"rounded\"\n [ngClass]=\"className\"\n placement=\"top\"\n [id]=\"inputId\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.cols]=\"cols?.toString() || undefined\"\n [attr.rows]=\"rows?.toString() || undefined\"\n [placeholder]=\"placeholder\"\n (keyup)=\"onKeyUp(textarea.value)\"\n (change)=\"onChangeValue(textarea.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>\u2030</span>\n</div>\n<div *ngIf=\"isUrl() && !!value\" class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\n <a href=\"{{ value }}\" target=\"_blank\">\n <span class=\"icon-external\"></span>\n </a>\n</div>\n<div *ngIf=\"isColor()\" class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\n <div class=\"rounded-right full-space\" [ngStyle]=\"{'background-color': color}\">\n <input\n #colorpicker\n class=\"minimal-space clickable invisible rounded-right full-space\"\n [id]=\"inputId + '$colorpicker'\"\n type=\"color\"\n [attr.value]=\"value\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n (change)=\"onColorPicked(colorpicker.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n />\n </div>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ userErrors[this.lang].required }}\n </div>\n <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n <div *ngIf=\"lastErrors.url\">{{ userErrors[this.lang].url }}</div>\n <div *ngIf=\"lastErrors.min\">\n {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n </div>\n <div *ngIf=\"lastErrors.max\">\n {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:url(/assets/img/external.svg) no-repeat center;background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
3441
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, decorators: [{
3442
- type: Component,
3443
- args: [{ selector: 'lux-input', providers: [
3444
- {
3445
- provide: NG_VALUE_ACCESSOR,
3446
- multi: true,
3447
- useExisting: forwardRef(() => InputComponent)
3448
- },
3449
- {
3450
- provide: NG_VALIDATORS,
3451
- multi: true,
3452
- useExisting: forwardRef(() => InputComponent)
3453
- }
3454
- ], template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n <span>$</span>\n</div>\n<input\n #input\n *ngIf=\"type !== 'textarea'\"\n [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n [ngClass]=\"className\"\n placement=\"top\"\n [id]=\"inputId\"\n [type]=\"domain\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.min]=\"min?.toString() || undefined\"\n [attr.max]=\"max?.toString() || undefined\"\n [attr.step]=\"step?.toString() || undefined\"\n [attr.pattern]=\"pattern || undefined\"\n [placeholder]=\"placeholder\"\n (keyup)=\"onKeyUp(input.value)\"\n (change)=\"onChangeValue(input.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<textarea\n #textarea\n *ngIf=\"type === 'textarea'\"\n class=\"rounded\"\n [ngClass]=\"className\"\n placement=\"top\"\n [id]=\"inputId\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.cols]=\"cols?.toString() || undefined\"\n [attr.rows]=\"rows?.toString() || undefined\"\n [placeholder]=\"placeholder\"\n (keyup)=\"onKeyUp(textarea.value)\"\n (change)=\"onChangeValue(textarea.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>\u2030</span>\n</div>\n<div *ngIf=\"isUrl() && !!value\" class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\n <a href=\"{{ value }}\" target=\"_blank\">\n <span class=\"icon-external\"></span>\n </a>\n</div>\n<div *ngIf=\"isColor()\" class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\n <div class=\"rounded-right full-space\" [ngStyle]=\"{'background-color': color}\">\n <input\n #colorpicker\n class=\"minimal-space clickable invisible rounded-right full-space\"\n [id]=\"inputId + '$colorpicker'\"\n type=\"color\"\n [attr.value]=\"value\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n (change)=\"onColorPicked(colorpicker.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n />\n </div>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ userErrors[this.lang].required }}\n </div>\n <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n <div *ngIf=\"lastErrors.url\">{{ userErrors[this.lang].url }}</div>\n <div *ngIf=\"lastErrors.min\">\n {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n </div>\n <div *ngIf=\"lastErrors.max\">\n {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:url(/assets/img/external.svg) no-repeat center;background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"] }]
3455
- }], ctorParameters: function () { return [{ type: RegexpService }]; }, propDecorators: { input: [{
3456
- type: ViewChild,
3457
- args: ['input', { static: false }]
3458
- }], textarea: [{
3459
- type: ViewChild,
3460
- args: ['textarea', { static: false }]
3461
- }], colorpicker: [{
3462
- type: ViewChild,
3463
- args: ['colorpicker', { static: false }]
3464
- }], rows: [{
3465
- type: Input
3466
- }], cols: [{
3467
- type: Input
3468
- }], step: [{
3469
- type: Input
3470
- }], min: [{
3471
- type: Input
3472
- }], max: [{
3473
- type: Input
3474
- }], lang: [{
3475
- type: Input
3476
- }], inlineErrors: [{
3477
- type: Input
3478
- }], inputId: [{
3479
- type: Input
3480
- }], ariaLabel: [{
3481
- type: Input,
3482
- args: ['aria-label']
3483
- }], readonly: [{
3484
- type: Input
3485
- }], disabled: [{
3486
- type: Input
3487
- }], pattern: [{
3488
- type: Input
3489
- }], currency: [{
3490
- type: Input
3491
- }], placeholder: [{
3492
- type: Input
3493
- }], required: [{
3494
- type: Input
3495
- }], type: [{
3496
- type: Input
3497
- }], value: [{
3498
- type: Input
3499
- }], valueChange: [{
3500
- type: Output
3501
- }], keyPress: [{
3502
- type: Output
3503
- }] } });
3504
-
3505
- var Placement;
3506
- (function (Placement) {
3507
- Placement["Top"] = "top";
3508
- Placement["Bottom"] = "bottom";
3509
- Placement["Left"] = "left";
3510
- Placement["Right"] = "right";
3511
- })(Placement || (Placement = {}));
3512
-
3513
- /**
3514
- * Default Tooltip Component
3515
- */
3516
- class TooltipComponent {
3517
- constructor() { }
3518
- }
3519
- TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3520
- TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TooltipComponent, selector: "ng-component", inputs: { context: "context" }, ngImport: i0, template: `
3521
- <span class="lux-tooltip" style="transition: opacity 200ms">{{context.message}}</span>
3522
- `, isInline: true });
3523
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
3524
- type: Component,
3525
- args: [{
3526
- template: `
3527
- <span class="lux-tooltip" style="transition: opacity 200ms">{{context.message}}</span>
3528
- `
3529
- }]
3530
- }], ctorParameters: function () { return []; }, propDecorators: { context: [{
3531
- type: Input
3532
- }] } });
3533
-
3534
- class TooltipContentRef {
3535
- constructor(viewRef, componentRef) {
3536
- this.viewRef = viewRef;
3537
- this.componentRef = componentRef;
3538
- }
3539
- }
3540
-
3541
- class TooltipService {
3542
- constructor(_injector, _crf, _applicationRef) {
3543
- this._injector = _injector;
3544
- this._crf = _crf;
3545
- this._applicationRef = _applicationRef;
3546
- }
3547
- appendComponentToBody(content, elHost, placement) {
3548
- const tooltipContentRef = this.getTooltipContentRef(content);
3549
- if (tooltipContentRef) {
3550
- let domElem = tooltipContentRef.viewRef
3551
- .rootNodes[0];
3552
- document.body.appendChild(domElem);
3553
- if (tooltipContentRef.componentRef) {
3554
- tooltipContentRef.componentRef.changeDetectorRef.detectChanges();
3555
- }
3556
- domElem = this.setStyle(domElem, placement);
3557
- domElem = this.setPosition(domElem, elHost, placement);
3558
- return tooltipContentRef;
3559
- }
3560
- return null;
3561
- }
3562
- removeComponentFromBody(tooltipContentRef) {
3563
- this._applicationRef.detachView(tooltipContentRef.viewRef);
3564
- if (tooltipContentRef.componentRef) {
3565
- tooltipContentRef.componentRef.destroy();
3566
- }
3567
- }
3568
- getTooltipContentRef(content) {
3569
- if (!content) {
3570
- // nothing to show
3571
- }
3572
- else if (content instanceof TemplateRef) {
3573
- return this.createFromTemplateRef(content);
3574
- }
3575
- else if (typeof content === 'string') {
3576
- return this.createFromComponent(TooltipComponent, { message: content });
3577
- }
3578
- else {
3579
- return this.createFromComponent(content);
3580
- }
3581
- }
3582
- createFromTemplateRef(content) {
3583
- const viewRef = content.createEmbeddedView({});
3584
- this._applicationRef.attachView(viewRef);
3585
- return new TooltipContentRef(viewRef);
3586
- }
3587
- createFromComponent(component, context) {
3588
- const componentRef = this._crf
3589
- .resolveComponentFactory(component)
3590
- .create(this._injector);
3591
- if (context) {
3592
- componentRef.instance.context = context;
3593
- }
3594
- this._applicationRef.attachView(componentRef.hostView);
3595
- return new TooltipContentRef(componentRef.hostView, componentRef);
3596
- }
3597
- setStyle(domElem, placement) {
3598
- domElem.style.position = 'absolute';
3599
- domElem.style.minWidth = 'min-content';
3600
- domElem.style.minHeight = 'min-content';
3601
- const tooltipElement = this.getTooltipElementFromHTMLElemnt(domElem);
3602
- placement =
3603
- placement !== undefined
3604
- ? placement.toLocaleLowerCase()
3605
- : 'top'; // 'Top' is the default value of placement
3606
- tooltipElement.classList.add(`lux-tooltip-${placement}`);
3607
- tooltipElement.classList.add('lux-tooltip-show');
3608
- return domElem;
3609
- }
3610
- getTooltipElementFromHTMLElemnt(domElem) {
3611
- const elementsArray = Array.from(domElem.classList).filter((className) => className === 'lux-tooltip');
3612
- if (elementsArray.length !== 0) {
3613
- return domElem;
3614
- }
3615
- else if (domElem.hasChildNodes()) {
3616
- const childrenArray = Array.from(domElem.children).filter((child) => this.getTooltipElementFromHTMLElemnt(child) !== null);
3617
- if (childrenArray.length !== 0) {
3618
- return this.getTooltipElementFromHTMLElemnt(childrenArray[0]);
3619
- }
3620
- else {
3621
- return null;
3622
- }
3623
- }
3624
- else {
3625
- return null;
3626
- }
3627
- }
3628
- setPosition(domElem, elHost, placement) {
3629
- const hostPos = elHost.nativeElement.getBoundingClientRect();
3630
- const tooltipPos = domElem.getBoundingClientRect();
3631
- const scrollPos = window.pageYOffset ||
3632
- document.documentElement.scrollTop ||
3633
- document.body.scrollTop ||
3634
- 0;
3635
- let top = 0;
3636
- let left = 0;
3637
- const offset = 10;
3638
- switch (placement) {
3639
- case Placement.Bottom:
3640
- top = hostPos.bottom + offset;
3641
- left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
3642
- break;
3643
- case Placement.Left:
3644
- top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
3645
- left = hostPos.left - tooltipPos.width - offset;
3646
- break;
3647
- case Placement.Right:
3648
- top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
3649
- left = hostPos.right + offset;
3650
- break;
3651
- case Placement.Top:
3652
- default:
3653
- top = hostPos.top - tooltipPos.height - offset;
3654
- left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
3655
- break;
3656
- }
3657
- top = Math.max(0, top);
3658
- left = Math.max(0, left);
3659
- domElem.style.top = `${top + scrollPos}px`;
3660
- domElem.style.left = `${left}px`;
3661
- return domElem;
3662
- }
3663
- }
3664
- TooltipService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipService, deps: [{ token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
3665
- TooltipService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipService });
3666
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipService, decorators: [{
3667
- type: Injectable
3668
- }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }]; } });
3669
-
3670
- /**
3671
- * Tooltip directive
3672
- */
3673
- class LuxTooltipDirective {
3674
- constructor(elHost, tooltipService) {
3675
- this.elHost = elHost;
3676
- this.tooltipService = tooltipService;
3677
- }
3678
- onMouseEnter() {
3679
- if (!this.tooltipRef) {
3680
- this.tooltipRef = this.show(this.content, this.elHost, this.placement);
3681
- }
3682
- }
3683
- onMouseLeave() {
3684
- if (this.tooltipRef) {
3685
- this.remove(this.tooltipRef);
3686
- this.tooltipRef = null;
3687
- }
3688
- }
3689
- onClick() {
3690
- if (this.tooltipRef) {
3691
- this.remove(this.tooltipRef);
3692
- this.tooltipRef = null;
3693
- }
3694
- }
3695
- show(component, elHost, placement) {
3696
- return this.tooltipService.appendComponentToBody(component, elHost, placement);
3697
- }
3698
- remove(tooltipRef) {
3699
- this.tooltipService.removeComponentFromBody(tooltipRef);
3700
- }
3701
- }
3702
- LuxTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Directive });
3703
- LuxTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
3704
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxTooltipDirective, decorators: [{
3705
- type: Directive,
3706
- args: [{
3707
- selector: '[luxTooltip]'
3708
- }]
3709
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TooltipService }]; }, propDecorators: { luxTooltip: [{
3710
- type: Input
3711
- }], content: [{
3712
- type: Input
3713
- }], placement: [{
3714
- type: Input
3715
- }], onMouseEnter: [{
3716
- type: HostListener,
3717
- args: ['mouseenter']
3718
- }], onMouseLeave: [{
3719
- type: HostListener,
3720
- args: ['mouseleave']
3721
- }], onClick: [{
3722
- type: HostListener,
3723
- args: ['click']
3724
- }] } });
3725
-
3726
- class PaginationComponent {
3727
- constructor() {
3728
- this.literals = {
3729
- en: {
3730
- first: 'First',
3731
- previous: 'Previous',
3732
- next: 'Next',
3733
- last: 'Last'
3734
- },
3735
- es: {
3736
- first: 'Primero',
3737
- previous: 'Anterior',
3738
- next: 'Siguiente',
3739
- last: 'Último'
3740
- }
3741
- };
3742
- this.showPagination = false;
3743
- this.hidePrevious = false;
3744
- this.lastPage = false;
3745
- this.totalPages = 0;
3746
- this.displayNextEllipsis = false;
3747
- this.displayPreviousEllipsis = false;
3748
- this.pages = [];
3749
- this.goToPage = new EventEmitter();
3750
- this.pageSizeChange = new EventEmitter();
3751
- this.lang = languageDetector();
3752
- }
3753
- set lang(l) {
3754
- if (l === this._lang) {
3755
- return;
3756
- }
3757
- if (Object.keys(this.literals).includes(l)) {
3758
- this._lang = l;
3759
- }
3760
- else {
3761
- this._lang = 'en';
3762
- }
3763
- this.loadLanguage();
3764
- }
3765
- get lang() {
3766
- return this._lang;
3767
- }
3768
- set paginationInfo(value) {
3769
- this.paginationInfoValue = value;
3770
- this.syncState();
3771
- }
3772
- get paginationInfo() {
3773
- return this.paginationInfoValue;
3774
- }
3775
- ngOnInit() {
3776
- this.calculatePages();
3777
- }
3778
- pageSizeChanged(pageSize) {
3779
- this.paginationInfo.pageSize = pageSize;
3780
- this.syncState();
3781
- this.pageSizeChange.emit(pageSize);
3782
- }
3783
- onPage(n) {
3784
- this.goToPage.emit(n);
3785
- }
3786
- onFirst() {
3787
- this.goToPage.emit(0);
3788
- }
3789
- onLast() {
3790
- this.goToPage.emit(this.totalPages - 1);
3791
- }
3792
- onNext() {
3793
- const page = (this.paginationInfo.page || 0) + 1;
3794
- this.goToPage.emit(page);
3795
- }
3796
- onPrevious() {
3797
- const page = (this.paginationInfo.page || 0) - 1;
3798
- this.goToPage.emit(page);
3799
- }
3800
- syncState() {
3801
- this.pages = this.calculatePages();
3802
- this.showPagination =
3803
- this.paginationInfo.total > this.paginationInfo.pageSize;
3804
- this.hidePrevious = this.paginationInfo.page === 0;
3805
- this.lastPage =
3806
- this.paginationInfo.pageSize * (this.paginationInfo.page + 1) >=
3807
- this.paginationInfo.total;
3808
- this.totalPages =
3809
- Math.ceil(this.paginationInfo.total / this.paginationInfo.pageSize) || 0;
3810
- this.displayNextEllipsis = !this.pages.includes(this.totalPages - 1);
3811
- this.displayPreviousEllipsis = !this.pages.includes(0);
3812
- }
3813
- calculatePages() {
3814
- const totalPages = Math.ceil(this.paginationInfo.total / this.paginationInfo.pageSize) - 1; // 0-index
3815
- const p = this.paginationInfo.page || 0;
3816
- const pagesToShow = this.paginationInfo.pagesToShow;
3817
- const pages = [];
3818
- pages.push(p);
3819
- const times = pagesToShow - 1;
3820
- for (let i = 0; i < times; i++) {
3821
- if (pages.length < pagesToShow) {
3822
- if (Math.min(...pages) > 0) {
3823
- pages.unshift(Math.min(...pages) - 1);
3824
- }
3825
- }
3826
- if (pages.length < pagesToShow) {
3827
- if (Math.max(...pages) < totalPages) {
3828
- pages.push(Math.max(...pages) + 1);
3829
- }
3830
- }
3831
- }
3832
- pages.sort((a, b) => a - b);
3833
- return pages;
3834
- }
3835
- loadLanguage() {
3836
- const l = this.literals[this.lang];
3837
- this.first = l.first;
3838
- this.previous = l.previous;
3839
- this.next = l.next;
3840
- this.last = l.last;
3841
- }
3842
- }
3843
- PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3844
- PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PaginationComponent, selector: "lux-pagination", inputs: { lang: "lang", paginationInfo: "paginationInfo" }, outputs: { goToPage: "goToPage", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n <ng-container *ngIf=\"!hidePrevious\">\n <a\n luxTooltip\n [content]=\"first\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onFirst()\"\n [ngClass]=\"{\n enabledFirstLast: !hidePrevious\n }\"\n class=\"button-pagination icon arrow-left-end\"\n ></a>\n <a\n luxTooltip\n [content]=\"previous\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onPrevious()\"\n [ngClass]=\"{\n enabledFirstLast: !hidePrevious\n }\"\n class=\"button-pagination icon arrow-left\"\n ></a>\n </ng-container>\n\n <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n <ng-container *ngFor=\"let pageNum of pages\">\n <a\n placement=\"top\"\n delay=\"500\"\n [ngClass]=\"{\n disabled: pageNum === paginationInfo.page,\n enabled: pageNum !== paginationInfo.page\n }\"\n class=\"button-pagination\"\n (click)=\"onPage(pageNum)\"\n >{{ pageNum + 1 }}</a\n >\n </ng-container>\n\n <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n <ng-container *ngIf=\"!lastPage\">\n <a\n luxTooltip\n [content]=\"next\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onNext()\"\n [ngClass]=\"{\n enabledFirstLast: !lastPage\n }\"\n class=\"button-pagination icon arrow-right\"\n ></a>\n <a\n luxTooltip\n [content]=\"last\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onLast()\"\n [ngClass]=\"{\n enabledFirstLast: !lastPage\n }\"\n class=\"button-pagination icon arrow-right-end\"\n ></a>\n </ng-container>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:1px solid #325c81;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:10%;border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#fff;color:var(--lux-pagination-disabled-color, white);background-color:#325c81;background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:1px solid rgb(207,207,207);border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:-webkit-min-content;width:-moz-min-content;width:min-content}.button-pagination{width:1em;width:var(--lux-pagination-button-width, 1em);height:1.2em;height:var(--lux-pagination-button-height, 1.2em);font-size:80%;font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: ["luxTooltip", "content", "placement"] }] });
3845
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PaginationComponent, decorators: [{
3846
- type: Component,
3847
- args: [{ selector: 'lux-pagination', template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n <ng-container *ngIf=\"!hidePrevious\">\n <a\n luxTooltip\n [content]=\"first\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onFirst()\"\n [ngClass]=\"{\n enabledFirstLast: !hidePrevious\n }\"\n class=\"button-pagination icon arrow-left-end\"\n ></a>\n <a\n luxTooltip\n [content]=\"previous\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onPrevious()\"\n [ngClass]=\"{\n enabledFirstLast: !hidePrevious\n }\"\n class=\"button-pagination icon arrow-left\"\n ></a>\n </ng-container>\n\n <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n <ng-container *ngFor=\"let pageNum of pages\">\n <a\n placement=\"top\"\n delay=\"500\"\n [ngClass]=\"{\n disabled: pageNum === paginationInfo.page,\n enabled: pageNum !== paginationInfo.page\n }\"\n class=\"button-pagination\"\n (click)=\"onPage(pageNum)\"\n >{{ pageNum + 1 }}</a\n >\n </ng-container>\n\n <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n <ng-container *ngIf=\"!lastPage\">\n <a\n luxTooltip\n [content]=\"next\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onNext()\"\n [ngClass]=\"{\n enabledFirstLast: !lastPage\n }\"\n class=\"button-pagination icon arrow-right\"\n ></a>\n <a\n luxTooltip\n [content]=\"last\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onLast()\"\n [ngClass]=\"{\n enabledFirstLast: !lastPage\n }\"\n class=\"button-pagination icon arrow-right-end\"\n ></a>\n </ng-container>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:1px solid #325c81;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:10%;border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#fff;color:var(--lux-pagination-disabled-color, white);background-color:#325c81;background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:1px solid rgb(207,207,207);border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:-webkit-min-content;width:-moz-min-content;width:min-content}.button-pagination{width:1em;width:var(--lux-pagination-button-width, 1em);height:1.2em;height:var(--lux-pagination-button-height, 1.2em);font-size:80%;font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E %3Ctitle%3Ebackground%3C%2Ftitle%3E %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E %3Ctitle%3ELayer 1%3C%2Ftitle%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24 %22%2F%3E %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24 %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"] }]
3848
- }], ctorParameters: function () { return []; }, propDecorators: { goToPage: [{
3849
- type: Output
3850
- }], pageSizeChange: [{
3851
- type: Output
3852
- }], lang: [{
3853
- type: Input
3854
- }], paginationInfo: [{
3855
- type: Input
3856
- }] } });
3857
-
3858
- class RadiogroupComponent {
3859
- constructor() {
3860
- this.touched = false;
3861
- this.name = 'radiogroup1';
3862
- this.disabled = false;
3863
- this.readonly = false;
3864
- this.required = false;
3865
- this.itemsChange = new EventEmitter();
3866
- this.valueChange = new EventEmitter();
3867
- this._value = undefined;
3868
- this._items = [];
3869
- // ControlValueAccessor Interface
3870
- this.onChange = (value) => { };
3871
- this.onTouched = () => { };
3872
- }
3873
- set items(col) {
3874
- this._items = (col || []).map((it, index) => this.ensureHasUniqueName(it, index));
3875
- this.itemsChange.emit(col);
3876
- }
3877
- get items() {
3878
- return this._items;
3879
- }
3880
- set value(v) {
3881
- if (v === this._value) {
3882
- return;
3883
- }
3884
- const initialAndEmpty = isInitialAndEmpty(this._value, v);
3885
- this._value = v;
3886
- this.onChange(v);
3887
- if (!initialAndEmpty) {
3888
- this.valueChange.emit(v);
3889
- }
3890
- }
3891
- get value() {
3892
- return this._value;
3893
- }
3894
- writeValue(value) {
3895
- this.value = value;
3896
- }
3897
- registerOnChange(onChange) {
3898
- this.onChange = onChange;
3899
- }
3900
- registerOnTouched(onTouched) {
3901
- this.onTouched = onTouched;
3902
- }
3903
- markAsTouched() {
3904
- if (!this.touched) {
3905
- this.onTouched();
3906
- this.touched = true;
3907
- }
3908
- }
3909
- setDisabledState(disabled) {
3910
- this.disabled = disabled;
3911
- }
3912
- // End ControlValueAccessor Interface
3913
- // Validator interface
3914
- registerOnValidatorChange() { }
3915
- validate(control) {
3916
- const value = control.value;
3917
- if (this.required &&
3918
- (value === '' || value === null || value === undefined)) {
3919
- return { required: { value, reason: 'Required field.' } };
3920
- }
3921
- return null;
3922
- }
3923
- // End of Validator interface
3924
- setValue(event, item) {
3925
- if (!this.disabled && !this.readonly) {
3926
- this.value = item.value;
3927
- this.markAsTouched();
3928
- }
3929
- event.preventDefault();
3930
- }
3931
- ensureHasUniqueName(item, index) {
3932
- if (!item.name) {
3933
- item.name = `${this.name}_${index}`;
3934
- }
3935
- return item;
3936
- }
3937
- }
3938
- RadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3939
- RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: RadiogroupComponent, selector: "lux-radiogroup", inputs: { name: "name", disabled: "disabled", readonly: "readonly", required: "required", items: "items", value: "value" }, outputs: { itemsChange: "itemsChange", valueChange: "valueChange" }, providers: [
3940
- {
3941
- provide: NG_VALUE_ACCESSOR,
3942
- multi: true,
3943
- useExisting: forwardRef(() => RadiogroupComponent)
3944
- },
3945
- {
3946
- provide: NG_VALIDATORS,
3947
- multi: true,
3948
- useExisting: forwardRef(() => RadiogroupComponent)
3949
- }
3950
- ], ngImport: i0, template: "<div class=\"radiogroup\"\n [class.disabled]=\"disabled || readonly\"\n >\n <ng-container *ngFor=\"let item of items; let first=first; let last=last\">\n <div [class.radio-start]=\"first\"\n [class.radio-end]=\"last\"\n class=\"radio-item\"\n [class.selected]=\"item.value === value\"\n (click)=\"setValue($event, item)\"\n >\n <input [id]=\"item.name\"\n type=\"radio\"\n [name]=\"name\"\n [attr.disabled]=\"disabled || null\"\n [attr.readonly]=\"readonly || null\"\n [value]=\"item.value\">\n <label [for]=\"item.name\"\n class=\"unselectable\"\n >{{ item.label }}</label>\n </div>\n</ng-container>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:0rem .5rem;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:initial;color:var(--lux-radiogroup-color, initial);font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:#2e2eac;background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
3951
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RadiogroupComponent, decorators: [{
3952
- type: Component,
3953
- args: [{ selector: 'lux-radiogroup', providers: [
3954
- {
3955
- provide: NG_VALUE_ACCESSOR,
3956
- multi: true,
3957
- useExisting: forwardRef(() => RadiogroupComponent)
3958
- },
3959
- {
3960
- provide: NG_VALIDATORS,
3961
- multi: true,
3962
- useExisting: forwardRef(() => RadiogroupComponent)
3963
- }
3964
- ], template: "<div class=\"radiogroup\"\n [class.disabled]=\"disabled || readonly\"\n >\n <ng-container *ngFor=\"let item of items; let first=first; let last=last\">\n <div [class.radio-start]=\"first\"\n [class.radio-end]=\"last\"\n class=\"radio-item\"\n [class.selected]=\"item.value === value\"\n (click)=\"setValue($event, item)\"\n >\n <input [id]=\"item.name\"\n type=\"radio\"\n [name]=\"name\"\n [attr.disabled]=\"disabled || null\"\n [attr.readonly]=\"readonly || null\"\n [value]=\"item.value\">\n <label [for]=\"item.name\"\n class=\"unselectable\"\n >{{ item.label }}</label>\n </div>\n</ng-container>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:0rem .5rem;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:initial;color:var(--lux-radiogroup-color, initial);font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:#2e2eac;background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"] }]
3965
- }], ctorParameters: function () { return []; }, propDecorators: { name: [{
3966
- type: Input
3967
- }], disabled: [{
3968
- type: Input
3969
- }], readonly: [{
3970
- type: Input
3971
- }], required: [{
3972
- type: Input
3973
- }], items: [{
3974
- type: Input
3975
- }], itemsChange: [{
3976
- type: Output
3977
- }], value: [{
3978
- type: Input
3979
- }], valueChange: [{
3980
- type: Output
3981
- }] } });
3982
-
3983
- let sequencer = 0;
3984
- class SelectComponent {
3985
- constructor() {
3986
- this.id = 'stringList' + sequencer++;
3987
- this.disabled = false;
3988
- this.required = false;
3989
- /** Allow multiple elements */
3990
- this.multiple = true;
3991
- this.value = [];
3992
- this.valueChange = new EventEmitter();
3993
- this.placeholder = 'Add new';
3994
- /** If set, check there is no duplicates in the data. */
3995
- this.unique = true;
3996
- /** Validation function for new items. Returns error or null if valid */
3997
- this.validateItem = (_) => null;
3998
- this.newEntry = '';
3999
- this.error = null;
4000
- this.isValidNewEntry = false;
4001
- this.touched = false;
4002
- // ControlValueAccessor Interface
4003
- this.onChange = (value) => { };
4004
- this.onTouched = () => { };
4005
- }
4006
- writeValue(value) {
4007
- this.value = value;
4008
- }
4009
- registerOnChange(onChange) {
4010
- this.onChange = onChange;
4011
- }
4012
- registerOnTouched(onTouched) {
4013
- this.onTouched = onTouched;
4014
- }
4015
- markAsTouched() {
4016
- if (!this.touched) {
4017
- this.onTouched();
4018
- this.touched = true;
4019
- }
4020
- }
4021
- setDisabledState(disabled) {
4022
- this.disabled = disabled;
4023
- }
4024
- // End ControlValueAccessor Interface
4025
- // Validator interface
4026
- registerOnValidatorChange() { }
4027
- validate(control) {
4028
- const value = control.value;
4029
- if (this.required &&
4030
- (value === '' || value === null || value === undefined)) {
4031
- return { required: { value, reason: 'Required field.' } };
4032
- }
4033
- return null;
4034
- }
4035
- // End of Validator interface
4036
- get canAdd() {
4037
- return this.multiple || this.value.length === 0;
4038
- }
4039
- add(val) {
4040
- this.value.push(val);
4041
- this.newEntry = '';
4042
- this.markAsTouched();
4043
- this.valueChange.emit(this.value);
4044
- }
4045
- remove(index) {
4046
- if (this.value.length > index) {
4047
- this.value.splice(index, 1);
4048
- this.markAsTouched();
4049
- this.valueChange.emit(this.value);
4050
- }
4051
- }
4052
- onKeyPress(event) {
4053
- if (event.key === 'Enter' && !this.error && this.newEntry !== '') {
4054
- // Add on pressing Enter/Return
4055
- this.markAsTouched();
4056
- this.add(this.newEntry);
4057
- }
4058
- }
4059
- onChangeNewEntry(newValue) {
4060
- this.markAsTouched();
4061
- if (!newValue) {
4062
- this.isValidNewEntry = false;
4063
- this.error = null;
4064
- return;
4065
- }
4066
- if (this.unique) {
4067
- const found = (this.value || []).find((it) => it === newValue);
4068
- this.isValidNewEntry = !found;
4069
- this.error = found
4070
- ? `Value '${newValue}' is already in. Cannot add duplicates.`
4071
- : null;
4072
- if (!this.isValidNewEntry) {
4073
- return;
4074
- }
4075
- }
4076
- this.error = this.validateItem(newValue);
4077
- this.isValidNewEntry = !this.error;
4078
- }
4079
- }
4080
- SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4081
- SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SelectComponent, selector: "lux-select", inputs: { id: "id", disabled: "disabled", required: "required", multiple: "multiple", value: "value", placeholder: "placeholder", unique: "unique", validateItem: "validateItem" }, outputs: { valueChange: "valueChange" }, providers: [
4082
- {
4083
- provide: NG_VALUE_ACCESSOR,
4084
- multi: true,
4085
- useExisting: forwardRef(() => SelectComponent)
4086
- },
4087
- {
4088
- provide: NG_VALIDATORS,
4089
- multi: true,
4090
- useExisting: forwardRef(() => SelectComponent)
4091
- }
4092
- ], ngImport: i0, template: "<div class=\"lux-select\">\n <ul class=\"list\">\n <li *ngFor=\"let item of value; let i = index\">\n <span>{{ item }}</span>\n <button *ngIf=\"!disabled\"\n class=\"remove\"\n type=\"button\"\n (click)=\"remove(i)\"\n [attr.aria-label]=\"'Remove ' + item\"\n >Remove</button>\n </li>\n </ul>\n <div class=\"add-new-item\" *ngIf=\"!disabled\">\n <lux-input\n id=\"{{ id + 'addNew' }}\"\n type=\"string\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"placeholder\"\n [disabled]=\"disabled\"\n [(value)]=\"newEntry\"\n (keyPress)=\"onKeyPress($event)\"\n (valueChange)=\"onChangeNewEntry($event)\"\n >\n </lux-input>\n <div *ngIf=\"canAdd\">\n <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n </div>\n <div class=\"error\">\n {{ error }}\n </div>\n </div>\n</div>\n", styles: [".lux-select{margin-bottom:.5em}.lux-select .list{margin:1em;padding-bottom:.2em;list-style-type:square}.lux-select .list span{margin-bottom:.3em}.remove{margin-left:2em;font-size:.65em;color:#b22222;background:transparent;border:2px solid #BBB}.add-new-item{display:inline-flex;margin-left:2.2em;height:1.6em}.error{margin:.5em 0;color:#b22222}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }] });
4093
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SelectComponent, decorators: [{
4094
- type: Component,
4095
- args: [{ selector: 'lux-select', providers: [
4096
- {
4097
- provide: NG_VALUE_ACCESSOR,
4098
- multi: true,
4099
- useExisting: forwardRef(() => SelectComponent)
4100
- },
4101
- {
4102
- provide: NG_VALIDATORS,
4103
- multi: true,
4104
- useExisting: forwardRef(() => SelectComponent)
4105
- }
4106
- ], template: "<div class=\"lux-select\">\n <ul class=\"list\">\n <li *ngFor=\"let item of value; let i = index\">\n <span>{{ item }}</span>\n <button *ngIf=\"!disabled\"\n class=\"remove\"\n type=\"button\"\n (click)=\"remove(i)\"\n [attr.aria-label]=\"'Remove ' + item\"\n >Remove</button>\n </li>\n </ul>\n <div class=\"add-new-item\" *ngIf=\"!disabled\">\n <lux-input\n id=\"{{ id + 'addNew' }}\"\n type=\"string\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"placeholder\"\n [disabled]=\"disabled\"\n [(value)]=\"newEntry\"\n (keyPress)=\"onKeyPress($event)\"\n (valueChange)=\"onChangeNewEntry($event)\"\n >\n </lux-input>\n <div *ngIf=\"canAdd\">\n <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n </div>\n <div class=\"error\">\n {{ error }}\n </div>\n </div>\n</div>\n", styles: [".lux-select{margin-bottom:.5em}.lux-select .list{margin:1em;padding-bottom:.2em;list-style-type:square}.lux-select .list span{margin-bottom:.3em}.remove{margin-left:2em;font-size:.65em;color:#b22222;background:transparent;border:2px solid #BBB}.add-new-item{display:inline-flex;margin-left:2.2em;height:1.6em}.error{margin:.5em 0;color:#b22222}\n"] }]
4107
- }], ctorParameters: function () { return []; }, propDecorators: { id: [{
4108
- type: Input
4109
- }], disabled: [{
4110
- type: Input
4111
- }], required: [{
4112
- type: Input
4113
- }], multiple: [{
4114
- type: Input
4115
- }], value: [{
4116
- type: Input
4117
- }], valueChange: [{
4118
- type: Output
4119
- }], placeholder: [{
4120
- type: Input
4121
- }], unique: [{
4122
- type: Input
4123
- }], validateItem: [{
4124
- type: Input
4125
- }] } });
4126
-
4127
- class VoiceRecognitionDirective {
4128
- constructor(el, renderer) {
4129
- this.el = el;
4130
- this.renderer = renderer;
4131
- this.isRecognizing = false;
4132
- const speechRecognition = window.webkitSpeechRecognition;
4133
- if (speechRecognition) {
4134
- this.recognition = new speechRecognition();
4135
- }
4136
- }
4137
- ngOnInit() {
4138
- if (this.recognition) {
4139
- // API is available
4140
- this.recognition.lang = this.language || window.navigator.language;
4141
- this.recognition.interimResults = false;
4142
- this.recognition.maxAlternatives = 1;
4143
- // Add mic icon
4144
- this.mic = document.createElement('div');
4145
- this.mic.setAttribute('class', 'lux-microphone');
4146
- const parent = this.el.nativeElement.parentElement;
4147
- parent.appendChild(this.mic);
4148
- // Add event handlers
4149
- this.mic.onclick = () => this.microphoneClick();
4150
- this.recognition.onresult = (event) => this.onRecognized(event);
4151
- }
4152
- }
4153
- microphoneClick() {
4154
- if (this.isRecognizing) {
4155
- // stop
4156
- this.isRecognizing = false;
4157
- this.renderer.removeClass(this.mic, 'lux-recording');
4158
- this.recognition.abort();
4159
- }
4160
- else {
4161
- // start
4162
- this.el.nativeElement.value = getRecordingMessage(this.language);
4163
- this.isRecognizing = true;
4164
- this.renderer.addClass(this.mic, 'lux-recording');
4165
- this.recognition.start();
4166
- }
4167
- }
4168
- onRecognized(event) {
4169
- const recognizedText = event.results[0][0].transcript;
4170
- this.isRecognizing = false;
4171
- this.el.nativeElement.value = recognizedText;
4172
- this.renderer.removeClass(this.mic, 'lux-recording');
4173
- }
4174
- }
4175
- VoiceRecognitionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: VoiceRecognitionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
4176
- VoiceRecognitionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: VoiceRecognitionDirective, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
4177
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
4178
- type: Directive,
4179
- args: [{
4180
- selector: '[luxVoiceRecognition]'
4181
- }]
4182
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { language: [{
4183
- type: Input
4184
- }] } });
4185
- const getRecordingMessage = (lang) => {
4186
- switch (lang.toLowerCase()) {
4187
- case 'es':
4188
- case 'es-es':
4189
- return 'Grabando...';
4190
- case 'en':
4191
- case 'en-uk':
4192
- case 'en-us':
4193
- default:
4194
- return 'Recording...';
4195
- }
4196
- };
4197
-
4198
- /* Create a new injection token for injecting the window into a component. */
4199
- const WINDOW = new InjectionToken('WindowToken');
4200
- /* Define abstract class for obtaining reference to the global window object. */
4201
- class WindowRef {
4202
- // eslint-disable-next-line @typescript-eslint/ban-types
4203
- get nativeWindow() {
4204
- throw new Error('Not implemented.');
4205
- }
4206
- }
4207
- /* Define class that implements the abstract class and returns the native window object. */
4208
- class BrowserWindowRef extends WindowRef {
4209
- constructor() {
4210
- super();
4211
- }
4212
- // eslint-disable-next-line @typescript-eslint/ban-types
4213
- get nativeWindow() {
4214
- return window;
4215
- }
4216
- }
4217
- /* Create an factory function that returns the native window object. */
4218
- // eslint-disable-next-line @typescript-eslint/ban-types
4219
- const windowFactory = (browserWindowRef, platformId) => {
4220
- if (isPlatformBrowser(platformId)) {
4221
- return browserWindowRef.nativeWindow;
4222
- }
4223
- return new Object();
4224
- };
4225
- /* Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. */
4226
- const browserWindowProvider = {
4227
- provide: WindowRef,
4228
- useClass: BrowserWindowRef
4229
- };
4230
- /* Create an injectable provider that uses the windowFactory function for returning the native window object. */
4231
- const windowProvider = {
4232
- provide: WINDOW,
4233
- useFactory: windowFactory,
4234
- deps: [WindowRef, PLATFORM_ID]
4235
- };
4236
- /* Create an array of providers. */
4237
- const WINDOW_PROVIDERS = [
4238
- browserWindowProvider,
4239
- windowProvider
4240
- ];
4241
-
4242
- class LuxModule {
4243
- }
4244
- LuxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4245
- LuxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, declarations: [AutocompleteComponent,
4246
- AutocompleteListComponent,
4247
- FilterComponent,
4248
- CheckboxComponent,
4249
- DatetimeComponent,
4250
- InputComponent,
4251
- GeolocationComponent,
4252
- LuxTooltipDirective,
4253
- LuxModalWindowComponent,
4254
- LuxModalBackdropComponent,
4255
- LuxBreadcrumbComponent,
4256
- MapComponent,
4257
- SelectComponent,
4258
- TooltipComponent,
4259
- PaginationComponent,
4260
- RadiogroupComponent,
4261
- VoiceRecognitionDirective], imports: [AngularResizeEventModule,
4262
- FormsModule,
4263
- HttpClientModule,
4264
- ReactiveFormsModule,
4265
- RouterModule,
4266
- CommonModule], exports: [AutocompleteComponent,
4267
- AutocompleteListComponent,
4268
- FilterComponent,
4269
- CheckboxComponent,
4270
- DatetimeComponent,
4271
- InputComponent,
4272
- GeolocationComponent,
4273
- LuxTooltipDirective,
4274
- LuxBreadcrumbComponent,
4275
- LuxBreadcrumbComponent,
4276
- MapComponent,
4277
- SelectComponent,
4278
- PaginationComponent,
4279
- RadiogroupComponent,
4280
- VoiceRecognitionDirective] });
4281
- LuxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [AngularResizeEventModule,
4282
- FormsModule,
4283
- HttpClientModule,
4284
- ReactiveFormsModule,
4285
- RouterModule,
4286
- CommonModule] });
4287
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, decorators: [{
4288
- type: NgModule,
4289
- args: [{
4290
- declarations: [
4291
- AutocompleteComponent,
4292
- AutocompleteListComponent,
4293
- FilterComponent,
4294
- CheckboxComponent,
4295
- DatetimeComponent,
4296
- InputComponent,
4297
- GeolocationComponent,
4298
- LuxTooltipDirective,
4299
- LuxModalWindowComponent,
4300
- LuxModalBackdropComponent,
4301
- LuxBreadcrumbComponent,
4302
- MapComponent,
4303
- SelectComponent,
4304
- TooltipComponent,
4305
- PaginationComponent,
4306
- RadiogroupComponent,
4307
- VoiceRecognitionDirective
4308
- ],
4309
- entryComponents: [
4310
- LuxModalWindowComponent,
4311
- LuxModalBackdropComponent,
4312
- TooltipComponent
4313
- ],
4314
- providers: [ModalService, TooltipService, WINDOW_PROVIDERS],
4315
- imports: [
4316
- AngularResizeEventModule,
4317
- FormsModule,
4318
- HttpClientModule,
4319
- ReactiveFormsModule,
4320
- RouterModule,
4321
- CommonModule
4322
- ],
4323
- exports: [
4324
- AutocompleteComponent,
4325
- AutocompleteListComponent,
4326
- FilterComponent,
4327
- CheckboxComponent,
4328
- DatetimeComponent,
4329
- InputComponent,
4330
- GeolocationComponent,
4331
- LuxTooltipDirective,
4332
- LuxBreadcrumbComponent,
4333
- LuxBreadcrumbComponent,
4334
- MapComponent,
4335
- SelectComponent,
4336
- PaginationComponent,
4337
- RadiogroupComponent,
4338
- VoiceRecognitionDirective
4339
- ]
4340
- }]
4341
- }] });
4342
-
4343
- /*
4344
- * Public API Surface of lux
4345
- */
4346
-
4347
- /**
4348
- * Generated bundle index. Do not edit.
4349
- */
4350
-
4351
- export { AutocompleteComponent, AutocompleteListComponent, CheckboxComponent, DatetimeComponent, FilterComponent, GeolocationComponent, InputComponent, LuxBreadcrumbComponent, LuxModule, LuxTooltipDirective, MapComponent, ModalRef, ModalService, PaginationComponent, RadiogroupComponent, SelectComponent, VoiceRecognitionDirective };
4352
- //# sourceMappingURL=metadev-lux.mjs.map