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