@metadev/lux 0.15.0 → 0.16.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.
- package/bundles/metadev-lux.umd.js +151 -78
- package/bundles/metadev-lux.umd.js.map +1 -1
- package/esm2015/lib/autocomplete/autocomplete.component.js +29 -7
- package/esm2015/lib/datetime/datetime.component.js +3 -3
- package/esm2015/lib/filter/filter.component.js +1 -1
- package/esm2015/lib/geolocation/geolocation.component.js +110 -63
- package/esm2015/lib/input/input.component.js +9 -3
- package/esm2015/lib/map/map.component.js +5 -7
- package/esm2015/lib/pagination/pagination.component.js +1 -1
- package/esm2015/lib/radiogroup/radiogroup.component.js +1 -1
- package/fesm2015/metadev-lux.js +151 -78
- package/fesm2015/metadev-lux.js.map +1 -1
- package/lib/autocomplete/autocomplete.component.d.ts +3 -0
- package/lib/geolocation/geolocation.component.d.ts +48 -30
- package/lib/input/input.component.d.ts +2 -0
- package/metadev-lux.metadata.json +1 -1
- package/package.json +1 -1
package/fesm2015/metadev-lux.js
CHANGED
|
@@ -103,9 +103,12 @@ const isInitialAndEmpty = (previousValue, newValue) => {
|
|
|
103
103
|
(isNewArray ? newValue.length !== 0 : Boolean(newValue)));
|
|
104
104
|
};
|
|
105
105
|
|
|
106
|
+
const LOST_FOCUS_TIME_WINDOW_MS = 200; // ms
|
|
106
107
|
class AutocompleteComponent {
|
|
107
108
|
constructor(cd) {
|
|
108
109
|
this.cd = cd;
|
|
110
|
+
this.lostFocusHandled = false;
|
|
111
|
+
this.t0 = 0;
|
|
109
112
|
this.showSpinner = false;
|
|
110
113
|
this.touched = false;
|
|
111
114
|
this.completionList = [];
|
|
@@ -291,14 +294,33 @@ class AutocompleteComponent {
|
|
|
291
294
|
this.ensureItemVisible(index);
|
|
292
295
|
}
|
|
293
296
|
onLostFocus(label) {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
+
this.lostFocusHandled = false;
|
|
298
|
+
this.t0 = performance.now();
|
|
299
|
+
console.log('Init LostFocus');
|
|
297
300
|
setTimeout(() => {
|
|
298
|
-
|
|
299
|
-
|
|
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('Lost focus 2', this.lostFocusHandled, 'SIDE EFFECT', performance.now() - this.t0, 'label:', label);
|
|
306
|
+
if (label) {
|
|
307
|
+
this.pickSelectionOrFirstMatch(label);
|
|
308
|
+
}
|
|
309
|
+
this.toggleCompletion(false, label);
|
|
310
|
+
}
|
|
311
|
+
else {
|
|
312
|
+
// do nothing (list selection took place)
|
|
313
|
+
console.log('onlost focus 2', this.lostFocusHandled, 'nothing', performance.now() - this.t0);
|
|
314
|
+
}
|
|
315
|
+
}, LOST_FOCUS_TIME_WINDOW_MS);
|
|
300
316
|
}
|
|
301
317
|
complete(item) {
|
|
318
|
+
this.lostFocusHandled = true; // prevent a previous lostFocus to trigger a side effect
|
|
319
|
+
const ellapsed = performance.now() - this.t0;
|
|
320
|
+
if (ellapsed > LOST_FOCUS_TIME_WINDOW_MS) {
|
|
321
|
+
console.warn('complete. lostfocus->click timeout of ', LOST_FOCUS_TIME_WINDOW_MS, 'ms exceed: ', performance.now() - this.t0, ' ms');
|
|
322
|
+
}
|
|
323
|
+
console.log('complete. set to true. CANCELED side effect', performance.now() - this.t0);
|
|
302
324
|
if (item !== null) {
|
|
303
325
|
this.value = item.key;
|
|
304
326
|
this.label = item.label;
|
|
@@ -426,7 +448,7 @@ AutocompleteComponent.decorators = [
|
|
|
426
448
|
useExisting: forwardRef(() => AutocompleteComponent)
|
|
427
449
|
}
|
|
428
450
|
],
|
|
429
|
-
styles: ["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
|
|
451
|
+
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"]
|
|
430
452
|
},] }
|
|
431
453
|
];
|
|
432
454
|
AutocompleteComponent.ctorParameters = () => [
|
|
@@ -1059,7 +1081,7 @@ DatetimeComponent.idCounter = 0;
|
|
|
1059
1081
|
DatetimeComponent.decorators = [
|
|
1060
1082
|
{ type: Component, args: [{
|
|
1061
1083
|
selector: 'lux-datetime',
|
|
1062
|
-
template: "<input\n #dateInput\n class=\"prefix\"\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 [ngClass]=\"className\"\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=\"
|
|
1084
|
+
template: "<input\n #dateInput\n class=\"rounded-left prefix\"\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 [ngClass]=\"className\"\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=\"\"\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 [ngClass]=\"className\"\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 *ngIf=\"!localTime\">\n <div [class]=\"disabled || readonly ? 'rounded-right postfix symbol' : 'postfix symbol'\">\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 [ngClass]=\"className\"\n (click)=\"updateDatetime(undefined)\"\n aria-label=\"clear\"\n></button>\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.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",
|
|
1063
1085
|
providers: [
|
|
1064
1086
|
{
|
|
1065
1087
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1072,7 +1094,7 @@ DatetimeComponent.decorators = [
|
|
|
1072
1094
|
useExisting: forwardRef(() => DatetimeComponent)
|
|
1073
1095
|
}
|
|
1074
1096
|
],
|
|
1075
|
-
styles: ["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
|
|
1097
|
+
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{position:relative;display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.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"]
|
|
1076
1098
|
},] }
|
|
1077
1099
|
];
|
|
1078
1100
|
DatetimeComponent.ctorParameters = () => [];
|
|
@@ -1528,6 +1550,12 @@ class InputComponent {
|
|
|
1528
1550
|
isPermillage() {
|
|
1529
1551
|
return this.type === 'permillage';
|
|
1530
1552
|
}
|
|
1553
|
+
hasPrefix() {
|
|
1554
|
+
return this.currency === 'USD';
|
|
1555
|
+
}
|
|
1556
|
+
hasPostfix() {
|
|
1557
|
+
return (this.currency === 'EUR' || this.isPercentage() || this.isPermillage());
|
|
1558
|
+
}
|
|
1531
1559
|
checkClassName() {
|
|
1532
1560
|
if (this.readonly === true) {
|
|
1533
1561
|
return 'readonly';
|
|
@@ -1601,7 +1629,7 @@ InputComponent.idCounter = 0;
|
|
|
1601
1629
|
InputComponent.decorators = [
|
|
1602
1630
|
{ type: Component, args: [{
|
|
1603
1631
|
selector: 'lux-input',
|
|
1604
|
-
template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix symbol\">\n <span>$</span>\n</div>\n<input\n #input\n *ngIf=\"type !== 'textarea'\"\n class=\"infix\"\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 [ngClass]=\"className\"\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
|
|
1632
|
+
template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\">\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 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 [ngClass]=\"className\"\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 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 [ngClass]=\"className\"\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\">\n <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\">\n <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\">\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",
|
|
1605
1633
|
providers: [
|
|
1606
1634
|
{
|
|
1607
1635
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1614,7 +1642,7 @@ InputComponent.decorators = [
|
|
|
1614
1642
|
useExisting: forwardRef(() => InputComponent)
|
|
1615
1643
|
}
|
|
1616
1644
|
],
|
|
1617
|
-
styles: ["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
|
|
1645
|
+
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{position:relative;display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}\n"]
|
|
1618
1646
|
},] }
|
|
1619
1647
|
];
|
|
1620
1648
|
InputComponent.ctorParameters = () => [
|
|
@@ -1765,7 +1793,7 @@ FilterComponent.decorators = [
|
|
|
1765
1793
|
useExisting: forwardRef(() => FilterComponent)
|
|
1766
1794
|
}
|
|
1767
1795
|
],
|
|
1768
|
-
styles: ["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
|
|
1796
|
+
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"]
|
|
1769
1797
|
},] }
|
|
1770
1798
|
];
|
|
1771
1799
|
FilterComponent.ctorParameters = () => [];
|
|
@@ -2396,36 +2424,52 @@ class GeolocationComponent {
|
|
|
2396
2424
|
this.latitudeValue = null;
|
|
2397
2425
|
this.longitudeValue = null;
|
|
2398
2426
|
this.isValidNumber = isValidNumber;
|
|
2399
|
-
this.
|
|
2400
|
-
en: {
|
|
2401
|
-
required: 'Required field.',
|
|
2402
|
-
minLatitude: 'Minimum latitude is $minLatitude.',
|
|
2403
|
-
maxLatitude: 'Maximum latitude is $maxLatitude.',
|
|
2404
|
-
minLongitude: 'Minimum longitude is $minLongitude.',
|
|
2405
|
-
maxLongitude: 'Maximum longitude is $maxLongitude.'
|
|
2406
|
-
},
|
|
2407
|
-
es: {
|
|
2408
|
-
required: 'El campo es obligatorio.',
|
|
2409
|
-
minLatitude: 'La latitud mínima es $minLatitude.',
|
|
2410
|
-
maxLatitude: 'La latitud máxima es $maxLatitude.',
|
|
2411
|
-
minLongitude: 'La longitud mínima es $minLongitude.',
|
|
2412
|
-
maxLongitude: 'La longitud máxima es $maxLongitude.'
|
|
2413
|
-
}
|
|
2414
|
-
};
|
|
2415
|
-
this.cardinalPoints = {
|
|
2427
|
+
this.i18n = {
|
|
2416
2428
|
en: {
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2429
|
+
lat: 'latitude',
|
|
2430
|
+
lon: 'longitude',
|
|
2431
|
+
selectLocation: 'Select location',
|
|
2432
|
+
location: 'Location',
|
|
2433
|
+
selectAction: 'Select',
|
|
2434
|
+
cancelAction: 'Cancel',
|
|
2435
|
+
closeAction: 'Close',
|
|
2436
|
+
typeToSearch: 'type to search',
|
|
2437
|
+
cardinalPoints: {
|
|
2438
|
+
north: 'N',
|
|
2439
|
+
south: 'S',
|
|
2440
|
+
east: 'E',
|
|
2441
|
+
west: 'W'
|
|
2442
|
+
},
|
|
2443
|
+
userErrors: {
|
|
2444
|
+
required: 'Required field.',
|
|
2445
|
+
minLatitude: 'Minimum latitude is $minLatitude.',
|
|
2446
|
+
maxLatitude: 'Maximum latitude is $maxLatitude.',
|
|
2447
|
+
minLongitude: 'Minimum longitude is $minLongitude.',
|
|
2448
|
+
maxLongitude: 'Maximum longitude is $maxLongitude.'
|
|
2449
|
+
}
|
|
2422
2450
|
},
|
|
2423
2451
|
es: {
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2452
|
+
lat: 'latitud',
|
|
2453
|
+
lon: 'longitud',
|
|
2454
|
+
selectLocation: 'Seleccione ubicación',
|
|
2455
|
+
location: 'Ubicación',
|
|
2456
|
+
selectAction: 'Seleccionar',
|
|
2457
|
+
cancelAction: 'Cancelar',
|
|
2458
|
+
closeAction: 'Cerrar',
|
|
2459
|
+
typeToSearch: 'escribe para buscar',
|
|
2460
|
+
cardinalPoints: {
|
|
2461
|
+
north: 'N',
|
|
2462
|
+
south: 'S',
|
|
2463
|
+
east: 'E',
|
|
2464
|
+
west: 'O'
|
|
2465
|
+
},
|
|
2466
|
+
userErrors: {
|
|
2467
|
+
required: 'El campo es obligatorio.',
|
|
2468
|
+
minLatitude: 'La latitud mínima es $minLatitude.',
|
|
2469
|
+
maxLatitude: 'La latitud máxima es $maxLatitude.',
|
|
2470
|
+
minLongitude: 'La longitud mínima es $minLongitude.',
|
|
2471
|
+
maxLongitude: 'La longitud máxima es $maxLongitude.'
|
|
2472
|
+
}
|
|
2429
2473
|
}
|
|
2430
2474
|
};
|
|
2431
2475
|
this.lang = languageDetector();
|
|
@@ -2510,48 +2554,40 @@ class GeolocationComponent {
|
|
|
2510
2554
|
validate(control) {
|
|
2511
2555
|
const value = control.value;
|
|
2512
2556
|
let result = null;
|
|
2513
|
-
if (this.required && (value
|
|
2557
|
+
if (this.required && !exists(value)) {
|
|
2514
2558
|
result = result || {};
|
|
2515
2559
|
result.required = { value, reason: 'Required field.' };
|
|
2516
2560
|
}
|
|
2517
|
-
if (this.minLatitude
|
|
2518
|
-
this.minLatitude !== null &&
|
|
2519
|
-
this.latitudeValue < this.minLatitude) {
|
|
2561
|
+
if (exists(this.minLatitude) && this.latitudeValue < this.minLatitude) {
|
|
2520
2562
|
result = result || {};
|
|
2521
2563
|
result.minLatitude = {
|
|
2522
2564
|
value,
|
|
2523
2565
|
min: this.minLatitude,
|
|
2524
|
-
reason: `
|
|
2566
|
+
reason: `Latitude is lower than minimum value: ${this.minLatitude}.`
|
|
2525
2567
|
};
|
|
2526
2568
|
}
|
|
2527
|
-
if (this.maxLatitude
|
|
2528
|
-
this.maxLatitude !== null &&
|
|
2529
|
-
this.latitudeValue < this.maxLatitude) {
|
|
2569
|
+
if (exists(this.maxLatitude) && this.latitudeValue > this.maxLatitude) {
|
|
2530
2570
|
result = result || {};
|
|
2531
2571
|
result.maxLatitude = {
|
|
2532
2572
|
value,
|
|
2533
2573
|
max: this.maxLatitude,
|
|
2534
|
-
reason: `
|
|
2574
|
+
reason: `Latitude is higher than maximum value: ${this.maxLatitude}.`
|
|
2535
2575
|
};
|
|
2536
2576
|
}
|
|
2537
|
-
if (this.minLongitude
|
|
2538
|
-
this.minLongitude !== null &&
|
|
2539
|
-
this.longitudeValue < this.minLongitude) {
|
|
2577
|
+
if (exists(this.minLongitude) && this.longitudeValue < this.minLongitude) {
|
|
2540
2578
|
result = result || {};
|
|
2541
2579
|
result.minLongitude = {
|
|
2542
2580
|
value,
|
|
2543
2581
|
min: this.minLongitude,
|
|
2544
|
-
reason: `
|
|
2582
|
+
reason: `Longitude is lower than minimum value: ${this.minLongitude}.`
|
|
2545
2583
|
};
|
|
2546
2584
|
}
|
|
2547
|
-
if (this.maxLongitude
|
|
2548
|
-
this.maxLongitude !== null &&
|
|
2549
|
-
this.longitudeValue < this.maxLongitude) {
|
|
2585
|
+
if (exists(this.maxLongitude) && this.longitudeValue > this.maxLongitude) {
|
|
2550
2586
|
result = result || {};
|
|
2551
2587
|
result.maxLongitude = {
|
|
2552
2588
|
value,
|
|
2553
2589
|
max: this.maxLongitude,
|
|
2554
|
-
reason: `
|
|
2590
|
+
reason: `Longitude is higher than maximum value: ${this.maxLongitude}.`
|
|
2555
2591
|
};
|
|
2556
2592
|
}
|
|
2557
2593
|
this.lastErrors = result;
|
|
@@ -2568,28 +2604,49 @@ class GeolocationComponent {
|
|
|
2568
2604
|
if (this.disabled || this.readonly) {
|
|
2569
2605
|
return;
|
|
2570
2606
|
}
|
|
2571
|
-
this.
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2607
|
+
if (isValidNumber(this.longitudeValue)) {
|
|
2608
|
+
this.value = {
|
|
2609
|
+
type: 'Point',
|
|
2610
|
+
coordinates: [this.longitudeValue, newLatitude]
|
|
2611
|
+
};
|
|
2612
|
+
}
|
|
2613
|
+
else {
|
|
2614
|
+
this.value = {
|
|
2615
|
+
type: 'Point',
|
|
2616
|
+
coordinates: [0, newLatitude]
|
|
2617
|
+
};
|
|
2618
|
+
}
|
|
2575
2619
|
}
|
|
2576
2620
|
updateLongitude(newLongitude) {
|
|
2577
2621
|
if (this.disabled || this.readonly) {
|
|
2578
2622
|
return;
|
|
2579
2623
|
}
|
|
2580
|
-
this.
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2624
|
+
if (isValidNumber(this.latitudeValue)) {
|
|
2625
|
+
this.value = {
|
|
2626
|
+
type: 'Point',
|
|
2627
|
+
coordinates: [newLongitude, this.latitudeValue]
|
|
2628
|
+
};
|
|
2629
|
+
}
|
|
2630
|
+
else {
|
|
2631
|
+
this.value = {
|
|
2632
|
+
type: 'Point',
|
|
2633
|
+
coordinates: [newLongitude, 0]
|
|
2634
|
+
};
|
|
2635
|
+
}
|
|
2584
2636
|
}
|
|
2585
2637
|
updateLatitudeAndLongitude(newLatitudeAndLongitude) {
|
|
2586
2638
|
if (this.disabled || this.readonly) {
|
|
2587
2639
|
return;
|
|
2588
2640
|
}
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2641
|
+
if (!exists(newLatitudeAndLongitude)) {
|
|
2642
|
+
this.value = undefined;
|
|
2643
|
+
}
|
|
2644
|
+
else {
|
|
2645
|
+
this.value = {
|
|
2646
|
+
type: 'Point',
|
|
2647
|
+
coordinates: newLatitudeAndLongitude
|
|
2648
|
+
};
|
|
2649
|
+
}
|
|
2593
2650
|
}
|
|
2594
2651
|
roundToStepAndUpdateLatitudeAndLongitude(newLatitudeAndLongitude) {
|
|
2595
2652
|
const newLatitude = roundToMultipleOf(newLatitudeAndLongitude[1], this.step);
|
|
@@ -2597,6 +2654,9 @@ class GeolocationComponent {
|
|
|
2597
2654
|
if (this.disabled || this.readonly) {
|
|
2598
2655
|
return;
|
|
2599
2656
|
}
|
|
2657
|
+
if (!exists(newLatitudeAndLongitude)) {
|
|
2658
|
+
this.value = undefined;
|
|
2659
|
+
}
|
|
2600
2660
|
this.value = {
|
|
2601
2661
|
type: 'Point',
|
|
2602
2662
|
coordinates: [newLongitude, newLatitude]
|
|
@@ -2609,11 +2669,19 @@ class GeolocationComponent {
|
|
|
2609
2669
|
if (isValidNumber(newLatitude)) {
|
|
2610
2670
|
this.updateLatitude(+newLatitude);
|
|
2611
2671
|
}
|
|
2672
|
+
else {
|
|
2673
|
+
this.updateLatitude(undefined);
|
|
2674
|
+
}
|
|
2675
|
+
this.markAsTouched();
|
|
2612
2676
|
}
|
|
2613
2677
|
onEventLongitude(newLongitude) {
|
|
2614
2678
|
if (isValidNumber(newLongitude)) {
|
|
2615
2679
|
this.updateLongitude(+newLongitude);
|
|
2616
2680
|
}
|
|
2681
|
+
else {
|
|
2682
|
+
this.updateLongitude(undefined);
|
|
2683
|
+
}
|
|
2684
|
+
this.markAsTouched();
|
|
2617
2685
|
}
|
|
2618
2686
|
onKeyPress(event) {
|
|
2619
2687
|
this.keyPress.emit(event);
|
|
@@ -2631,8 +2699,14 @@ class GeolocationComponent {
|
|
|
2631
2699
|
}
|
|
2632
2700
|
}, (_) => { });
|
|
2633
2701
|
}
|
|
2702
|
+
onSearchLocationChanged(newValue, map) {
|
|
2703
|
+
map.markerPoint = newValue;
|
|
2704
|
+
map.center = map.markerPoint;
|
|
2705
|
+
}
|
|
2634
2706
|
get mapTitle() {
|
|
2635
|
-
return this._disabled || !!this.readonly
|
|
2707
|
+
return this._disabled || !!this.readonly
|
|
2708
|
+
? this.i18n[this.lang].location
|
|
2709
|
+
: this.i18n[this.lang].selectLocation;
|
|
2636
2710
|
}
|
|
2637
2711
|
get self() {
|
|
2638
2712
|
return this;
|
|
@@ -2656,7 +2730,7 @@ GeolocationComponent.idCounter = 0;
|
|
|
2656
2730
|
GeolocationComponent.decorators = [
|
|
2657
2731
|
{ type: Component, args: [{
|
|
2658
2732
|
selector: 'lux-geolocation',
|
|
2659
|
-
template: "<
|
|
2733
|
+
template: "<input\n #latitude\n class=\"rounded-left prefix\"\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 [ngClass]=\"className\"\n (keyup)=\"onEventLatitude(latitude.value)\"\n (change)=\"onEventLatitude(latitude.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<div class=\"infix symbol clickable\" (click)=\"openModalMap(modalMap)\">\n <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n i18n[this.lang].cardinalPoints.north\n }}</span>\n <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n i18n[this.lang].cardinalPoints.south\n }}</span>\n <span *ngIf=\"!isValidNumber(latitudeValue)\" class=\"icon-globe\"></span>\n</div>\n<input\n #longitude\n class=\"prefix\"\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 [ngClass]=\"className\"\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 (click)=\"openModalMap(modalMap)\"\n>\n <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n i18n[this.lang].cardinalPoints.east\n }}</span>\n <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n i18n[this.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 [ngClass]=\"className\"\n (click)=\"updateLatitudeAndLongitude(undefined)\"\n aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ i18n[this.lang].userErrors.required }}\n </div>\n <div *ngIf=\"lastErrors.minLatitude\">\n {{\n i18n[this.lang].userErrors.minLatitude.replace(\n '$minLatitude',\n lastErrors.minLatitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLatitude\">\n {{\n i18n[this.lang].userErrors.maxLatitude.replace(\n '$maxLatitude',\n lastErrors.maxLatitude.max\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.minLongitude\">\n {{\n i18n[this.lang].userErrors.minLongitude.replace(\n '$minLongitude',\n lastErrors.minLongitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLongitude\">\n {{\n i18n[this.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",
|
|
2660
2734
|
providers: [
|
|
2661
2735
|
{
|
|
2662
2736
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -2669,7 +2743,7 @@ GeolocationComponent.decorators = [
|
|
|
2669
2743
|
useExisting: forwardRef(() => GeolocationComponent)
|
|
2670
2744
|
}
|
|
2671
2745
|
],
|
|
2672
|
-
styles: ["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
|
|
2746
|
+
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{position:relative;display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly:focus{outline:none}.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"]
|
|
2673
2747
|
},] }
|
|
2674
2748
|
];
|
|
2675
2749
|
GeolocationComponent.ctorParameters = () => [
|
|
@@ -2679,6 +2753,7 @@ GeolocationComponent.ctorParameters = () => [
|
|
|
2679
2753
|
GeolocationComponent.propDecorators = {
|
|
2680
2754
|
latitude: [{ type: ViewChild, args: ['latitude', { static: true },] }],
|
|
2681
2755
|
longitude: [{ type: ViewChild, args: ['longitude', { static: true },] }],
|
|
2756
|
+
map: [{ type: ViewChild, args: ['map', { static: false },] }],
|
|
2682
2757
|
minLatitude: [{ type: Input }],
|
|
2683
2758
|
maxLatitude: [{ type: Input }],
|
|
2684
2759
|
minLongitude: [{ type: Input }],
|
|
@@ -3074,12 +3149,10 @@ class MapComponent {
|
|
|
3074
3149
|
return this._zoom;
|
|
3075
3150
|
}
|
|
3076
3151
|
set center(center) {
|
|
3077
|
-
if (center) {
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
this._map.getView().setCenter(ol.proj.fromLonLat(center.coordinates));
|
|
3082
|
-
}
|
|
3152
|
+
if (center && center.coordinates && center.coordinates.length === 2) {
|
|
3153
|
+
this._center = center;
|
|
3154
|
+
if (this._map) {
|
|
3155
|
+
this._map.getView().setCenter(ol.proj.fromLonLat(center.coordinates));
|
|
3083
3156
|
}
|
|
3084
3157
|
}
|
|
3085
3158
|
}
|
|
@@ -3426,7 +3499,7 @@ PaginationComponent.decorators = [
|
|
|
3426
3499
|
{ type: Component, args: [{
|
|
3427
3500
|
selector: 'lux-pagination',
|
|
3428
3501
|
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",
|
|
3429
|
-
styles: ["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
|
|
3502
|
+
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"]
|
|
3430
3503
|
},] }
|
|
3431
3504
|
];
|
|
3432
3505
|
PaginationComponent.ctorParameters = () => [];
|
|
@@ -3533,7 +3606,7 @@ RadiogroupComponent.decorators = [
|
|
|
3533
3606
|
useExisting: forwardRef(() => RadiogroupComponent)
|
|
3534
3607
|
}
|
|
3535
3608
|
],
|
|
3536
|
-
styles: ["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
|
|
3609
|
+
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"]
|
|
3537
3610
|
},] }
|
|
3538
3611
|
];
|
|
3539
3612
|
RadiogroupComponent.ctorParameters = () => [];
|