@metadev/lux 0.16.2 → 0.18.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 +107 -27
- package/bundles/metadev-lux.umd.js.map +1 -1
- package/esm2015/lib/autocomplete/autocomplete.component.js +24 -12
- package/esm2015/lib/autocomplete-list/autocomplete-list.component.js +2 -2
- package/esm2015/lib/datetime/datetime.component.js +3 -3
- package/esm2015/lib/filter/filter.component.js +3 -3
- package/esm2015/lib/geolocation/geolocation.component.js +3 -3
- package/esm2015/lib/helperFns.js +17 -1
- package/esm2015/lib/input/input.component.js +55 -7
- package/esm2015/lib/pagination/pagination.component.js +3 -3
- package/esm2015/lib/radiogroup/radiogroup.component.js +1 -1
- package/esm2015/lib/select/select.component.js +2 -2
- package/fesm2015/metadev-lux.js +103 -27
- package/fesm2015/metadev-lux.js.map +1 -1
- package/lib/autocomplete/autocomplete.component.d.ts +1 -0
- package/lib/helperFns.d.ts +2 -0
- package/lib/input/input.component.d.ts +12 -0
- package/metadev-lux.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -35,6 +35,22 @@
|
|
|
35
35
|
var 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])?$/;
|
|
36
36
|
return re.test(String(value).toLowerCase().trim());
|
|
37
37
|
};
|
|
38
|
+
var isValidUrl = function (value) {
|
|
39
|
+
var re = /^([a-z]+?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i;
|
|
40
|
+
return re.test(String(value).toLowerCase().trim());
|
|
41
|
+
};
|
|
42
|
+
var isValidColor = function (value) {
|
|
43
|
+
value = String(value).toLowerCase();
|
|
44
|
+
// valid values for CSS color property, yet not valid colors by themselves
|
|
45
|
+
if (value === 'currentcolor' ||
|
|
46
|
+
value === 'inherit' ||
|
|
47
|
+
value === 'initial' ||
|
|
48
|
+
value === 'revert' ||
|
|
49
|
+
value === 'unset') {
|
|
50
|
+
return false;
|
|
51
|
+
}
|
|
52
|
+
return CSS.supports('color', value);
|
|
53
|
+
};
|
|
38
54
|
// date functions
|
|
39
55
|
var isValidDate = function (date) { return exists(date) ? !isNaN(date.getTime()) : false; };
|
|
40
56
|
var normalizeDate = function (value) {
|
|
@@ -310,9 +326,8 @@
|
|
|
310
326
|
var _this = this;
|
|
311
327
|
var list = this.completionList || [];
|
|
312
328
|
var index = list.findIndex(function (it) { return _this.focusItem && it.key === _this.focusItem.key; });
|
|
313
|
-
var
|
|
314
|
-
|
|
315
|
-
: list[list.length - 1];
|
|
329
|
+
var indexNext = -1 && list.length > index + offset ? index + offset : list.length - 1;
|
|
330
|
+
var next = list[indexNext];
|
|
316
331
|
this.focusItem = next;
|
|
317
332
|
this.ensureItemVisible(index);
|
|
318
333
|
};
|
|
@@ -320,7 +335,8 @@
|
|
|
320
335
|
var _this = this;
|
|
321
336
|
var list = this.completionList || [];
|
|
322
337
|
var index = list.findIndex(function (it) { return _this.focusItem && it.key === _this.focusItem.key; });
|
|
323
|
-
var
|
|
338
|
+
var indexPrevious = index !== -1 && index > offset ? index - offset : 0;
|
|
339
|
+
var next = list[indexPrevious];
|
|
324
340
|
this.focusItem = next;
|
|
325
341
|
this.ensureItemVisible(index);
|
|
326
342
|
};
|
|
@@ -419,13 +435,18 @@
|
|
|
419
435
|
this.value = text;
|
|
420
436
|
this.label = text;
|
|
421
437
|
};
|
|
438
|
+
/** Pick selection based on text filtering (ingnores drowdown state) */
|
|
422
439
|
AutocompleteComponent.prototype.pickSelectionOrFirstMatch = function (text) {
|
|
423
440
|
var _this = this;
|
|
424
441
|
if (this.canAddNewValues) {
|
|
425
442
|
this.syncCustomValue(text);
|
|
426
443
|
return;
|
|
427
444
|
}
|
|
428
|
-
|
|
445
|
+
var focusIndex = this.completionList.findIndex(function (it) { return _this.focusItem && it.key === _this.focusItem.key; });
|
|
446
|
+
if (this.showCompletion &&
|
|
447
|
+
focusIndex > 0 &&
|
|
448
|
+
this.focusItem &&
|
|
449
|
+
this.focusItem.label) {
|
|
429
450
|
if (text === this.focusItem.label && this.focusItem.key === this.value) {
|
|
430
451
|
// do nothing if value does not change & close dropdow
|
|
431
452
|
this.showCompletion = false;
|
|
@@ -436,13 +457,18 @@
|
|
|
436
457
|
return;
|
|
437
458
|
}
|
|
438
459
|
var source = (text || '').trim();
|
|
439
|
-
if (source
|
|
460
|
+
if (!source) {
|
|
440
461
|
this.showCompletion = false;
|
|
462
|
+
// select null value
|
|
463
|
+
if (this.value !== null) {
|
|
464
|
+
this.value = null;
|
|
465
|
+
}
|
|
441
466
|
return;
|
|
442
467
|
}
|
|
443
468
|
this.completionList = [];
|
|
444
469
|
this.computeCompletionList(source).subscribe(function (suggestions) {
|
|
445
|
-
|
|
470
|
+
var candidate = suggestions && suggestions.length > 0 ? suggestions[0] : null;
|
|
471
|
+
_this.complete(candidate);
|
|
446
472
|
});
|
|
447
473
|
};
|
|
448
474
|
AutocompleteComponent.prototype.showCompletionList = function (text) {
|
|
@@ -486,8 +512,10 @@
|
|
|
486
512
|
}
|
|
487
513
|
else if (this.instance && this.populateFunction) {
|
|
488
514
|
return this.populateFunction(this.instance, searchText).pipe(operators.debounceTime(1), operators.first(), operators.map(function (ds) {
|
|
489
|
-
|
|
490
|
-
|
|
515
|
+
var dsFiltered = ds
|
|
516
|
+
.filter(function (it) { return ignoreAccentsInclude(it.label, searchText); })
|
|
517
|
+
.sort(function (a, b) { return a.label.localeCompare(b.label); });
|
|
518
|
+
return decorateDataSource(dsFiltered, searchText);
|
|
491
519
|
}));
|
|
492
520
|
}
|
|
493
521
|
else {
|
|
@@ -500,7 +528,7 @@
|
|
|
500
528
|
AutocompleteComponent.decorators = [
|
|
501
529
|
{ type: i0.Component, args: [{
|
|
502
530
|
selector: 'lux-autocomplete',
|
|
503
|
-
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; 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",
|
|
531
|
+
template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\n <div class=\"lux-autocomplete-box\">\n <input\n #i0\n [id]=\"inputId\"\n [(ngModel)]=\"label\"\n [placeholder]=\"placeholder\"\n [attr.disabled]=\"disabled || null\"\n [attr.readonly]=\"readonly || null\"\n (keydown)=\"onKeydown($event, i0.value)\"\n (keypress)=\"onKeypress($event, i0.value)\"\n (keyup)=\"onKeyup($event, i0.value)\"\n (blur)=\"onLostFocus(i0.value)\"\n (focus)=\"toggleCompletion(true, i0.value)\"\n (click)=\"toggleCompletion(true, i0.value)\"\n (resized)=\"onInputResized()\"\n (window:resize)=\"onInputResized()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"showCompletion\"\n aria-haspopup=\"true\"\n attr.aria-owns=\"{{ inputId + '_list' }}\"\n [attr.aria-activedescendant]=\"selectedOption\"\n />\n <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n <ng-template #noLoading>\n <button\n *ngIf=\"!disabled && i0.value && !showCompletion; else dropdown\"\n type=\"button\"\n class=\"icon-clear\"\n aria-label=\"Clear\"\n (click)=\"clear()\"\n ></button>\n <ng-template #dropdown>\n <div\n class=\"icon-dropdown\"\n (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n ></div>\n </ng-template>\n </ng-template>\n </div>\n <div\n #completeDiv\n [class.showCompletion]=\"showCompletion\"\n class=\"lux-completion-list\"\n id=\"{{ inputId + '_list' }}\"\n >\n <ul>\n <li\n *ngFor=\"let item of completionList; let index = index\"\n id=\"{{ inputId + '_' + index }}\"\n class=\"lux-completion-item\"\n [class.selected]=\"focusItem && item.key === focusItem.key\"\n (click)=\"complete(item)\"\n [attr.aria-label]=\"item.label\"\n >\n <span>{{ item.labelPrefix }}</span>\n <span class=\"bold\">{{ item.labelMatch }}</span>\n <span>{{ item.labelPostfix }}</span>\n </li>\n </ul>\n </div>\n</div>\n",
|
|
504
532
|
providers: [
|
|
505
533
|
{
|
|
506
534
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -513,7 +541,7 @@
|
|
|
513
541
|
useExisting: i0.forwardRef(function () { return AutocompleteComponent; })
|
|
514
542
|
}
|
|
515
543
|
],
|
|
516
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
544
|
+
styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin: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);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.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"]
|
|
517
545
|
},] }
|
|
518
546
|
];
|
|
519
547
|
AutocompleteComponent.ctorParameters = function () { return [
|
|
@@ -794,7 +822,7 @@
|
|
|
794
822
|
AutocompleteListComponent.decorators = [
|
|
795
823
|
{ type: i0.Component, args: [{
|
|
796
824
|
selector: 'lux-autocomplete-list',
|
|
797
|
-
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",
|
|
825
|
+
template: "<div [id]=\"inputId\">\n <ul>\n <li *ngFor=\"let label of labels; let index = index\">\n <span>{{ label }}</span>\n <button\n *ngIf=\"!disabled\"\n class=\"remove-item\"\n (click)=\"removeAt(index)\"\n attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n ></button>\n </li>\n </ul>\n <div *ngIf=\"!disabled\" class=\"new-entry\">\n <lux-autocomplete\n #auto\n [dataSource]=\"internalDataSource\"\n [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n [(value)]=\"newEntry\"\n (valueChange)=\"onValueChange()\"\n (keypress)=\"onNewEntryChange($event, auto)\"\n >\n </lux-autocomplete>\n <button\n *ngIf=\"canAdd\"\n type=\"button\"\n class=\"add-item\"\n attr.aria-label=\"addMessage ?? literals[lang].addMessage\"\n (click)=\"addNew(auto)\"\n ></button>\n </div>\n</div>\n",
|
|
798
826
|
providers: [
|
|
799
827
|
{
|
|
800
828
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1234,7 +1262,7 @@
|
|
|
1234
1262
|
DatetimeComponent.decorators = [
|
|
1235
1263
|
{ type: i0.Component, args: [{
|
|
1236
1264
|
selector: 'lux-datetime',
|
|
1237
|
-
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",
|
|
1265
|
+
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 type=\"button\"\n class=\"rounded-right postfix bordered icon-clear\"\n [id]=\"inputId + '$clear'\"\n (click)=\"clear()\"\n aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ userErrors[lang].required }}\n </div>\n <div *ngIf=\"lastErrors.min\">\n {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n </div>\n <div *ngIf=\"lastErrors.max\">\n {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n </div>\n</div>\n",
|
|
1238
1266
|
providers: [
|
|
1239
1267
|
{
|
|
1240
1268
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1247,7 +1275,7 @@
|
|
|
1247
1275
|
useExisting: i0.forwardRef(function () { return DatetimeComponent; })
|
|
1248
1276
|
}
|
|
1249
1277
|
],
|
|
1250
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
1278
|
+
styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin: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);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}: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"]
|
|
1251
1279
|
},] }
|
|
1252
1280
|
];
|
|
1253
1281
|
DatetimeComponent.ctorParameters = function () { return []; };
|
|
@@ -1478,13 +1506,17 @@
|
|
|
1478
1506
|
required: 'Required field.',
|
|
1479
1507
|
min: 'Minimum value is $min.',
|
|
1480
1508
|
max: 'Maximum value is $max.',
|
|
1481
|
-
email: 'Format should match example@example.com.'
|
|
1509
|
+
email: 'Format should match example@example.com.',
|
|
1510
|
+
url: 'Format should match https://example.com.',
|
|
1511
|
+
color: 'Format should match #XXXXXX.'
|
|
1482
1512
|
},
|
|
1483
1513
|
es: {
|
|
1484
1514
|
required: 'El campo es obligatorio.',
|
|
1485
1515
|
min: 'El valor mínimo es $min.',
|
|
1486
1516
|
max: 'El valor máximo es $max.',
|
|
1487
|
-
email: 'El campo debe tener un formato como ejemplo@ejemplo.com.'
|
|
1517
|
+
email: 'El campo debe tener un formato como ejemplo@ejemplo.com.',
|
|
1518
|
+
url: 'El campo debe tener un formato como https://ejemplo.com.',
|
|
1519
|
+
color: 'El campo debe tener un formato como #XXXXXX.'
|
|
1488
1520
|
}
|
|
1489
1521
|
};
|
|
1490
1522
|
this.lang = languageDetector();
|
|
@@ -1502,6 +1534,13 @@
|
|
|
1502
1534
|
enumerable: false,
|
|
1503
1535
|
configurable: true
|
|
1504
1536
|
});
|
|
1537
|
+
Object.defineProperty(InputComponent.prototype, "color", {
|
|
1538
|
+
get: function () {
|
|
1539
|
+
return this.checkColor();
|
|
1540
|
+
},
|
|
1541
|
+
enumerable: false,
|
|
1542
|
+
configurable: true
|
|
1543
|
+
});
|
|
1505
1544
|
Object.defineProperty(InputComponent.prototype, "disabled", {
|
|
1506
1545
|
get: function () {
|
|
1507
1546
|
return this._disabled;
|
|
@@ -1657,6 +1696,14 @@
|
|
|
1657
1696
|
result = result || {};
|
|
1658
1697
|
result.email = { value: value, reason: 'Invalid email.' };
|
|
1659
1698
|
}
|
|
1699
|
+
if (this.type === 'url' && hasValue(value) && !isValidUrl(value)) {
|
|
1700
|
+
result = result || {};
|
|
1701
|
+
result.url = { value: value, reason: 'Invalid URL.' };
|
|
1702
|
+
}
|
|
1703
|
+
if (this.type === 'color' && hasValue(value) && !isValidColor(value)) {
|
|
1704
|
+
result = result || {};
|
|
1705
|
+
result.color = { value: value, reason: 'Invalid color.' };
|
|
1706
|
+
}
|
|
1660
1707
|
if (this.type === 'number' && hasValue(value) && !isValidNumber(value)) {
|
|
1661
1708
|
result = result || {};
|
|
1662
1709
|
result.numeric = { value: value, reason: 'Invalid number.' };
|
|
@@ -1723,11 +1770,24 @@
|
|
|
1723
1770
|
};
|
|
1724
1771
|
InputComponent.prototype.onChangeValue = function (newValue) {
|
|
1725
1772
|
this.value = newValue;
|
|
1773
|
+
if (this.isColor()) {
|
|
1774
|
+
this.colorpicker.nativeElement.value = undefined;
|
|
1775
|
+
}
|
|
1726
1776
|
this.markAsTouched();
|
|
1727
1777
|
};
|
|
1728
1778
|
InputComponent.prototype.onKeyPress = function (event) {
|
|
1729
1779
|
this.keyPress.emit(event);
|
|
1730
1780
|
};
|
|
1781
|
+
InputComponent.prototype.onColorPicked = function (newValue) {
|
|
1782
|
+
this.onChangeValue(newValue);
|
|
1783
|
+
this.setValueInControl(newValue);
|
|
1784
|
+
};
|
|
1785
|
+
InputComponent.prototype.isUrl = function () {
|
|
1786
|
+
return this.type === 'url';
|
|
1787
|
+
};
|
|
1788
|
+
InputComponent.prototype.isColor = function () {
|
|
1789
|
+
return this.type === 'color';
|
|
1790
|
+
};
|
|
1731
1791
|
InputComponent.prototype.isNumber = function () {
|
|
1732
1792
|
return this.type === 'number';
|
|
1733
1793
|
};
|
|
@@ -1741,7 +1801,11 @@
|
|
|
1741
1801
|
return this.currency === 'USD';
|
|
1742
1802
|
};
|
|
1743
1803
|
InputComponent.prototype.hasPostfix = function () {
|
|
1744
|
-
return (this.currency === 'EUR' ||
|
|
1804
|
+
return (this.currency === 'EUR' ||
|
|
1805
|
+
this.isPercentage() ||
|
|
1806
|
+
this.isPermillage() ||
|
|
1807
|
+
(this.isUrl() && !!this.value) ||
|
|
1808
|
+
this.isColor());
|
|
1745
1809
|
};
|
|
1746
1810
|
InputComponent.prototype.checkClassName = function () {
|
|
1747
1811
|
return this.disabled
|
|
@@ -1752,11 +1816,22 @@
|
|
|
1752
1816
|
? 'readonly'
|
|
1753
1817
|
: '';
|
|
1754
1818
|
};
|
|
1819
|
+
InputComponent.prototype.checkColor = function () {
|
|
1820
|
+
return this.type === 'color' && isValidColor(this.value)
|
|
1821
|
+
? this.value
|
|
1822
|
+
: 'initial';
|
|
1823
|
+
};
|
|
1755
1824
|
InputComponent.prototype.checkType = function (type) {
|
|
1756
1825
|
switch (type) {
|
|
1757
1826
|
case 'email':
|
|
1758
1827
|
this.setEmailPatterns();
|
|
1759
1828
|
break;
|
|
1829
|
+
case 'url':
|
|
1830
|
+
this.setUrlPatterns();
|
|
1831
|
+
break;
|
|
1832
|
+
case 'color':
|
|
1833
|
+
this.setColorPatterns();
|
|
1834
|
+
break;
|
|
1760
1835
|
case 'date':
|
|
1761
1836
|
this.setDatePatterns();
|
|
1762
1837
|
break;
|
|
@@ -1783,6 +1858,10 @@
|
|
|
1783
1858
|
}
|
|
1784
1859
|
};
|
|
1785
1860
|
InputComponent.prototype.setEmailPatterns = function () { };
|
|
1861
|
+
InputComponent.prototype.setUrlPatterns = function () { };
|
|
1862
|
+
InputComponent.prototype.setColorPatterns = function () {
|
|
1863
|
+
this.domain = 'text';
|
|
1864
|
+
};
|
|
1786
1865
|
InputComponent.prototype.setDatePatterns = function () {
|
|
1787
1866
|
this.min = this.min || '1900-01-01';
|
|
1788
1867
|
this.max = this.max || '2100-01-01';
|
|
@@ -1820,7 +1899,7 @@
|
|
|
1820
1899
|
InputComponent.decorators = [
|
|
1821
1900
|
{ type: i0.Component, args: [{
|
|
1822
1901
|
selector: 'lux-input',
|
|
1823
|
-
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",
|
|
1902
|
+
template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n <span>$</span>\n</div>\n<input\n #input\n *ngIf=\"type !== 'textarea'\"\n [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n [ngClass]=\"className\"\n placement=\"top\"\n [id]=\"inputId\"\n [type]=\"domain\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.min]=\"min?.toString() || undefined\"\n [attr.max]=\"max?.toString() || undefined\"\n [attr.step]=\"step?.toString() || undefined\"\n [attr.pattern]=\"pattern || undefined\"\n [placeholder]=\"placeholder\"\n (keyup)=\"onKeyUp(input.value)\"\n (change)=\"onChangeValue(input.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n/>\n<textarea\n #textarea\n *ngIf=\"type === 'textarea'\"\n class=\"rounded\"\n [ngClass]=\"className\"\n placement=\"top\"\n [id]=\"inputId\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n [attr.cols]=\"cols?.toString() || undefined\"\n [attr.rows]=\"rows?.toString() || undefined\"\n [placeholder]=\"placeholder\"\n (keyup)=\"onKeyUp(textarea.value)\"\n (change)=\"onChangeValue(textarea.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n <span>\u2030</span>\n</div>\n<div *ngIf=\"isUrl() && !!value\" class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\n <a href=\"{{ value }}\" target=\"_blank\">\n <span class=\"icon-external\"></span>\n </a>\n</div>\n<div *ngIf=\"isColor()\" class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\n <div class=\"rounded-right full-space\" [ngStyle]=\"{'background-color': color}\">\n <input\n #colorpicker\n class=\"minimal-space clickable invisible rounded-right full-space\"\n [id]=\"inputId + '$colorpicker'\"\n type=\"color\"\n [attr.value]=\"value\"\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n (change)=\"onColorPicked(colorpicker.value)\"\n (keypress)=\"onKeyPress($event)\"\n (blur)=\"onLostFocus()\"\n />\n </div>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ userErrors[this.lang].required }}\n </div>\n <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n <div *ngIf=\"lastErrors.url\">{{ userErrors[this.lang].url }}</div>\n <div *ngIf=\"lastErrors.min\">\n {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n </div>\n <div *ngIf=\"lastErrors.max\">\n {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n </div>\n</div>\n",
|
|
1824
1903
|
providers: [
|
|
1825
1904
|
{
|
|
1826
1905
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1833,7 +1912,7 @@
|
|
|
1833
1912
|
useExisting: i0.forwardRef(function () { return InputComponent; })
|
|
1834
1913
|
}
|
|
1835
1914
|
],
|
|
1836
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
1915
|
+
styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin: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);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}:host{display:flex;align-items:stretch;min-height:1.5rem}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:url(/assets/img/external.svg) no-repeat center;background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"]
|
|
1837
1916
|
},] }
|
|
1838
1917
|
];
|
|
1839
1918
|
InputComponent.ctorParameters = function () { return [
|
|
@@ -1842,6 +1921,7 @@
|
|
|
1842
1921
|
InputComponent.propDecorators = {
|
|
1843
1922
|
input: [{ type: i0.ViewChild, args: ['input', { static: false },] }],
|
|
1844
1923
|
textarea: [{ type: i0.ViewChild, args: ['textarea', { static: false },] }],
|
|
1924
|
+
colorpicker: [{ type: i0.ViewChild, args: ['colorpicker', { static: false },] }],
|
|
1845
1925
|
rows: [{ type: i0.Input }],
|
|
1846
1926
|
cols: [{ type: i0.Input }],
|
|
1847
1927
|
step: [{ type: i0.Input }],
|
|
@@ -1986,7 +2066,7 @@
|
|
|
1986
2066
|
FilterComponent.decorators = [
|
|
1987
2067
|
{ type: i0.Component, args: [{
|
|
1988
2068
|
selector: 'lux-filter',
|
|
1989
|
-
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",
|
|
2069
|
+
template: "<div class=\"filter\">\n <input\n #i0\n type=\"text\"\n [attr.aria-label]=\"ariaLabel\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [disabled]=\"disabled\"\n [value]=\"searchValue\"\n (valueChange)=\"onInputValueChange(i0.value)\"\n (keyup)=\"keyup($event, i0.value)\"\n />\n\n <button\n [class.hide]=\"!searchValue\"\n aria-label=\"Clear\"\n class=\"clear-indicator icon icon-clear\"\n type=\"button\"\n (click)=\"clear()\"\n ></button>\n <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n <button\n class=\"btn-search\"\n *ngIf=\"!searchOnType\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"search()\"\n >\n Search\n </button>\n</div>\n",
|
|
1990
2070
|
providers: [
|
|
1991
2071
|
{
|
|
1992
2072
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1994,7 +2074,7 @@
|
|
|
1994
2074
|
useExisting: i0.forwardRef(function () { return FilterComponent; })
|
|
1995
2075
|
}
|
|
1996
2076
|
],
|
|
1997
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
2077
|
+
styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin: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);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.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"]
|
|
1998
2078
|
},] }
|
|
1999
2079
|
];
|
|
2000
2080
|
FilterComponent.ctorParameters = function () { return []; };
|
|
@@ -3316,7 +3396,7 @@
|
|
|
3316
3396
|
GeolocationComponent.decorators = [
|
|
3317
3397
|
{ type: i0.Component, args: [{
|
|
3318
3398
|
selector: 'lux-geolocation',
|
|
3319
|
-
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",
|
|
3399
|
+
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 bordered icon icon-clear\"\n [id]=\"inputId + '$clear'\"\n type=\"button\"\n (click)=\"clear()\"\n aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n <div *ngIf=\"lastErrors.required\">\n {{ i18n[lang].userErrors.required }}\n </div>\n <div *ngIf=\"lastErrors.minLatitude\">\n {{\n i18n[lang].userErrors.minLatitude.replace(\n '$minLatitude',\n lastErrors.minLatitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLatitude\">\n {{\n i18n[lang].userErrors.maxLatitude.replace(\n '$maxLatitude',\n lastErrors.maxLatitude.max\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.minLongitude\">\n {{\n i18n[lang].userErrors.minLongitude.replace(\n '$minLongitude',\n lastErrors.minLongitude.min\n )\n }}\n </div>\n <div *ngIf=\"lastErrors.maxLongitude\">\n {{\n i18n[lang].userErrors.maxLongitude.replace(\n '$maxLongitude',\n lastErrors.maxLongitude.max\n )\n }}\n </div>\n</div>\n\n<ng-template #modalMap let-modal>\n <div class=\"lux-modal-header\">\n <h4 class=\"modal-title\" 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",
|
|
3320
3400
|
providers: [
|
|
3321
3401
|
{
|
|
3322
3402
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -3329,7 +3409,7 @@
|
|
|
3329
3409
|
useExisting: i0.forwardRef(function () { return GeolocationComponent; })
|
|
3330
3410
|
}
|
|
3331
3411
|
],
|
|
3332
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
3412
|
+
styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin: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);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}: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"]
|
|
3333
3413
|
},] }
|
|
3334
3414
|
];
|
|
3335
3415
|
GeolocationComponent.ctorParameters = function () { return [
|
|
@@ -4128,8 +4208,8 @@
|
|
|
4128
4208
|
PaginationComponent.decorators = [
|
|
4129
4209
|
{ type: i0.Component, args: [{
|
|
4130
4210
|
selector: 'lux-pagination',
|
|
4131
|
-
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
|
|
4132
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
4211
|
+
template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n <ng-container *ngIf=\"!hidePrevious\">\n <a\n luxTooltip\n [content]=\"first\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onFirst()\"\n [ngClass]=\"{\n enabledFirstLast: !hidePrevious\n }\"\n class=\"button-pagination icon arrow-left-end\"\n ></a>\n <a\n luxTooltip\n [content]=\"previous\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onPrevious()\"\n [ngClass]=\"{\n enabledFirstLast: !hidePrevious\n }\"\n class=\"button-pagination icon arrow-left\"\n ></a>\n </ng-container>\n\n <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n <ng-container *ngFor=\"let pageNum of pages\">\n <a\n placement=\"top\"\n delay=\"500\"\n [ngClass]=\"{\n disabled: pageNum === paginationInfo.page,\n enabled: pageNum !== paginationInfo.page\n }\"\n class=\"button-pagination\"\n (click)=\"onPage(pageNum)\"\n >{{ pageNum + 1 }}</a\n >\n </ng-container>\n\n <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n <ng-container *ngIf=\"!lastPage\">\n <a\n luxTooltip\n [content]=\"next\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onNext()\"\n [ngClass]=\"{\n enabledFirstLast: !lastPage\n }\"\n class=\"button-pagination icon arrow-right\"\n ></a>\n <a\n luxTooltip\n [content]=\"last\"\n placement=\"top\"\n delay=\"500\"\n (click)=\"onLast()\"\n [ngClass]=\"{\n enabledFirstLast: !lastPage\n }\"\n class=\"button-pagination icon arrow-right-end\"\n ></a>\n </ng-container>\n</div>\n",
|
|
4212
|
+
styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin: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);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.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"]
|
|
4133
4213
|
},] }
|
|
4134
4214
|
];
|
|
4135
4215
|
PaginationComponent.ctorParameters = function () { return []; };
|
|
@@ -4246,7 +4326,7 @@
|
|
|
4246
4326
|
useExisting: i0.forwardRef(function () { return RadiogroupComponent; })
|
|
4247
4327
|
}
|
|
4248
4328
|
],
|
|
4249
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
4329
|
+
styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin: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);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.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"]
|
|
4250
4330
|
},] }
|
|
4251
4331
|
];
|
|
4252
4332
|
RadiogroupComponent.ctorParameters = function () { return []; };
|
|
@@ -4366,7 +4446,7 @@
|
|
|
4366
4446
|
SelectComponent.decorators = [
|
|
4367
4447
|
{ type: i0.Component, args: [{
|
|
4368
4448
|
selector: 'lux-select',
|
|
4369
|
-
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",
|
|
4449
|
+
template: "<div class=\"lux-select\">\n <ul class=\"list\">\n <li *ngFor=\"let item of value; let i = index\">\n <span>{{ item }}</span>\n <button *ngIf=\"!disabled\"\n class=\"remove\"\n type=\"button\"\n (click)=\"remove(i)\"\n [attr.aria-label]=\"'Remove ' + item\"\n >Remove</button>\n </li>\n </ul>\n <div class=\"add-new-item\" *ngIf=\"!disabled\">\n <lux-input\n id=\"{{ id + 'addNew' }}\"\n type=\"string\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"placeholder\"\n [disabled]=\"disabled\"\n [(value)]=\"newEntry\"\n (keyPress)=\"onKeyPress($event)\"\n (valueChange)=\"onChangeNewEntry($event)\"\n >\n </lux-input>\n <div *ngIf=\"canAdd\">\n <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n </div>\n <div class=\"error\">\n {{ error }}\n </div>\n </div>\n</div>\n",
|
|
4370
4450
|
providers: [
|
|
4371
4451
|
{
|
|
4372
4452
|
provide: forms.NG_VALUE_ACCESSOR,
|