@metadev/lux 0.16.1 → 0.17.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 +51 -31
- package/bundles/metadev-lux.umd.js.map +1 -1
- package/esm2015/lib/autocomplete/autocomplete.component.js +39 -19
- 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/input/input.component.js +3 -3
- 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 +51 -31
- package/fesm2015/metadev-lux.js.map +1 -1
- package/lib/autocomplete/autocomplete.component.d.ts +1 -0
- package/metadev-lux.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
var AutocompleteComponent = /** @class */ (function () {
|
|
124
124
|
function AutocompleteComponent(cd) {
|
|
125
125
|
this.cd = cd;
|
|
126
|
-
this.lostFocusHandled =
|
|
126
|
+
this.lostFocusHandled = true;
|
|
127
127
|
this.t0 = 0;
|
|
128
128
|
this.showSpinner = false;
|
|
129
129
|
this.touched = false;
|
|
@@ -310,9 +310,8 @@
|
|
|
310
310
|
var _this = this;
|
|
311
311
|
var list = this.completionList || [];
|
|
312
312
|
var index = list.findIndex(function (it) { return _this.focusItem && it.key === _this.focusItem.key; });
|
|
313
|
-
var
|
|
314
|
-
|
|
315
|
-
: list[list.length - 1];
|
|
313
|
+
var indexNext = -1 && list.length > index + offset ? index + offset : list.length - 1;
|
|
314
|
+
var next = list[indexNext];
|
|
316
315
|
this.focusItem = next;
|
|
317
316
|
this.ensureItemVisible(index);
|
|
318
317
|
};
|
|
@@ -320,7 +319,8 @@
|
|
|
320
319
|
var _this = this;
|
|
321
320
|
var list = this.completionList || [];
|
|
322
321
|
var index = list.findIndex(function (it) { return _this.focusItem && it.key === _this.focusItem.key; });
|
|
323
|
-
var
|
|
322
|
+
var indexPrevious = index !== -1 && index > offset ? index - offset : 0;
|
|
323
|
+
var next = list[indexPrevious];
|
|
324
324
|
this.focusItem = next;
|
|
325
325
|
this.ensureItemVisible(index);
|
|
326
326
|
};
|
|
@@ -342,9 +342,12 @@
|
|
|
342
342
|
// 'label:',
|
|
343
343
|
// label
|
|
344
344
|
// );
|
|
345
|
-
if (label) {
|
|
345
|
+
if (label && _this.label !== label) {
|
|
346
346
|
_this.pickSelectionOrFirstMatch(label);
|
|
347
347
|
}
|
|
348
|
+
else {
|
|
349
|
+
_this.lostFocusHandled = true;
|
|
350
|
+
}
|
|
348
351
|
_this.toggleCompletion(false, label);
|
|
349
352
|
}
|
|
350
353
|
else {
|
|
@@ -359,12 +362,17 @@
|
|
|
359
362
|
}, LOST_FOCUS_TIME_WINDOW_MS);
|
|
360
363
|
};
|
|
361
364
|
AutocompleteComponent.prototype.complete = function (item) {
|
|
362
|
-
this.lostFocusHandled
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
365
|
+
if (!this.lostFocusHandled) {
|
|
366
|
+
this.lostFocusHandled = true; // prevent a previous lostFocus to trigger a side effect
|
|
367
|
+
var ellapsed = performance.now() - this.t0;
|
|
368
|
+
if (ellapsed > LOST_FOCUS_TIME_WINDOW_MS) {
|
|
369
|
+
console.warn('complete. lostfocus->click timeout of ', LOST_FOCUS_TIME_WINDOW_MS, 'ms exceed: ', performance.now() - this.t0, ' ms');
|
|
370
|
+
}
|
|
371
|
+
// console.log(
|
|
372
|
+
// 'complete. set to true. CANCELED side effect',
|
|
373
|
+
// performance.now() - this.t0
|
|
374
|
+
// );
|
|
366
375
|
}
|
|
367
|
-
console.log('complete. set to true. CANCELED side effect', performance.now() - this.t0);
|
|
368
376
|
if (item !== null) {
|
|
369
377
|
this.value = item.key;
|
|
370
378
|
this.label = item.label;
|
|
@@ -411,13 +419,18 @@
|
|
|
411
419
|
this.value = text;
|
|
412
420
|
this.label = text;
|
|
413
421
|
};
|
|
422
|
+
/** Pick selection based on text filtering (ingnores drowdown state) */
|
|
414
423
|
AutocompleteComponent.prototype.pickSelectionOrFirstMatch = function (text) {
|
|
415
424
|
var _this = this;
|
|
416
425
|
if (this.canAddNewValues) {
|
|
417
426
|
this.syncCustomValue(text);
|
|
418
427
|
return;
|
|
419
428
|
}
|
|
420
|
-
|
|
429
|
+
var focusIndex = this.completionList.findIndex(function (it) { return _this.focusItem && it.key === _this.focusItem.key; });
|
|
430
|
+
if (this.showCompletion &&
|
|
431
|
+
focusIndex > 0 &&
|
|
432
|
+
this.focusItem &&
|
|
433
|
+
this.focusItem.label) {
|
|
421
434
|
if (text === this.focusItem.label && this.focusItem.key === this.value) {
|
|
422
435
|
// do nothing if value does not change & close dropdow
|
|
423
436
|
this.showCompletion = false;
|
|
@@ -428,13 +441,18 @@
|
|
|
428
441
|
return;
|
|
429
442
|
}
|
|
430
443
|
var source = (text || '').trim();
|
|
431
|
-
if (source
|
|
444
|
+
if (!source) {
|
|
432
445
|
this.showCompletion = false;
|
|
446
|
+
// select null value
|
|
447
|
+
if (this.value !== null) {
|
|
448
|
+
this.value = null;
|
|
449
|
+
}
|
|
433
450
|
return;
|
|
434
451
|
}
|
|
435
452
|
this.completionList = [];
|
|
436
453
|
this.computeCompletionList(source).subscribe(function (suggestions) {
|
|
437
|
-
|
|
454
|
+
var candidate = suggestions && suggestions.length > 0 ? suggestions[0] : null;
|
|
455
|
+
_this.complete(candidate);
|
|
438
456
|
});
|
|
439
457
|
};
|
|
440
458
|
AutocompleteComponent.prototype.showCompletionList = function (text) {
|
|
@@ -478,8 +496,10 @@
|
|
|
478
496
|
}
|
|
479
497
|
else if (this.instance && this.populateFunction) {
|
|
480
498
|
return this.populateFunction(this.instance, searchText).pipe(operators.debounceTime(1), operators.first(), operators.map(function (ds) {
|
|
481
|
-
|
|
482
|
-
|
|
499
|
+
var dsFiltered = ds
|
|
500
|
+
.filter(function (it) { return ignoreAccentsInclude(it.label, searchText); })
|
|
501
|
+
.sort(function (a, b) { return a.label.localeCompare(b.label); });
|
|
502
|
+
return decorateDataSource(dsFiltered, searchText);
|
|
483
503
|
}));
|
|
484
504
|
}
|
|
485
505
|
else {
|
|
@@ -492,7 +512,7 @@
|
|
|
492
512
|
AutocompleteComponent.decorators = [
|
|
493
513
|
{ type: i0.Component, args: [{
|
|
494
514
|
selector: 'lux-autocomplete',
|
|
495
|
-
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",
|
|
515
|
+
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",
|
|
496
516
|
providers: [
|
|
497
517
|
{
|
|
498
518
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -505,7 +525,7 @@
|
|
|
505
525
|
useExisting: i0.forwardRef(function () { return AutocompleteComponent; })
|
|
506
526
|
}
|
|
507
527
|
],
|
|
508
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
528
|
+
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"]
|
|
509
529
|
},] }
|
|
510
530
|
];
|
|
511
531
|
AutocompleteComponent.ctorParameters = function () { return [
|
|
@@ -786,7 +806,7 @@
|
|
|
786
806
|
AutocompleteListComponent.decorators = [
|
|
787
807
|
{ type: i0.Component, args: [{
|
|
788
808
|
selector: 'lux-autocomplete-list',
|
|
789
|
-
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",
|
|
809
|
+
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",
|
|
790
810
|
providers: [
|
|
791
811
|
{
|
|
792
812
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1226,7 +1246,7 @@
|
|
|
1226
1246
|
DatetimeComponent.decorators = [
|
|
1227
1247
|
{ type: i0.Component, args: [{
|
|
1228
1248
|
selector: 'lux-datetime',
|
|
1229
|
-
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",
|
|
1249
|
+
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",
|
|
1230
1250
|
providers: [
|
|
1231
1251
|
{
|
|
1232
1252
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1239,7 +1259,7 @@
|
|
|
1239
1259
|
useExisting: i0.forwardRef(function () { return DatetimeComponent; })
|
|
1240
1260
|
}
|
|
1241
1261
|
],
|
|
1242
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
1262
|
+
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"]
|
|
1243
1263
|
},] }
|
|
1244
1264
|
];
|
|
1245
1265
|
DatetimeComponent.ctorParameters = function () { return []; };
|
|
@@ -1812,7 +1832,7 @@
|
|
|
1812
1832
|
InputComponent.decorators = [
|
|
1813
1833
|
{ type: i0.Component, args: [{
|
|
1814
1834
|
selector: 'lux-input',
|
|
1815
|
-
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 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
|
|
1835
|
+
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",
|
|
1816
1836
|
providers: [
|
|
1817
1837
|
{
|
|
1818
1838
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1825,7 +1845,7 @@
|
|
|
1825
1845
|
useExisting: i0.forwardRef(function () { return InputComponent; })
|
|
1826
1846
|
}
|
|
1827
1847
|
],
|
|
1828
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
1848
|
+
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)}\n"]
|
|
1829
1849
|
},] }
|
|
1830
1850
|
];
|
|
1831
1851
|
InputComponent.ctorParameters = function () { return [
|
|
@@ -1978,7 +1998,7 @@
|
|
|
1978
1998
|
FilterComponent.decorators = [
|
|
1979
1999
|
{ type: i0.Component, args: [{
|
|
1980
2000
|
selector: 'lux-filter',
|
|
1981
|
-
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",
|
|
2001
|
+
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",
|
|
1982
2002
|
providers: [
|
|
1983
2003
|
{
|
|
1984
2004
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1986,7 +2006,7 @@
|
|
|
1986
2006
|
useExisting: i0.forwardRef(function () { return FilterComponent; })
|
|
1987
2007
|
}
|
|
1988
2008
|
],
|
|
1989
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
2009
|
+
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"]
|
|
1990
2010
|
},] }
|
|
1991
2011
|
];
|
|
1992
2012
|
FilterComponent.ctorParameters = function () { return []; };
|
|
@@ -3308,7 +3328,7 @@
|
|
|
3308
3328
|
GeolocationComponent.decorators = [
|
|
3309
3329
|
{ type: i0.Component, args: [{
|
|
3310
3330
|
selector: 'lux-geolocation',
|
|
3311
|
-
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",
|
|
3331
|
+
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",
|
|
3312
3332
|
providers: [
|
|
3313
3333
|
{
|
|
3314
3334
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -3321,7 +3341,7 @@
|
|
|
3321
3341
|
useExisting: i0.forwardRef(function () { return GeolocationComponent; })
|
|
3322
3342
|
}
|
|
3323
3343
|
],
|
|
3324
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
3344
|
+
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"]
|
|
3325
3345
|
},] }
|
|
3326
3346
|
];
|
|
3327
3347
|
GeolocationComponent.ctorParameters = function () { return [
|
|
@@ -4120,8 +4140,8 @@
|
|
|
4120
4140
|
PaginationComponent.decorators = [
|
|
4121
4141
|
{ type: i0.Component, args: [{
|
|
4122
4142
|
selector: 'lux-pagination',
|
|
4123
|
-
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
|
|
4124
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
4143
|
+
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",
|
|
4144
|
+
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"]
|
|
4125
4145
|
},] }
|
|
4126
4146
|
];
|
|
4127
4147
|
PaginationComponent.ctorParameters = function () { return []; };
|
|
@@ -4238,7 +4258,7 @@
|
|
|
4238
4258
|
useExisting: i0.forwardRef(function () { return RadiogroupComponent; })
|
|
4239
4259
|
}
|
|
4240
4260
|
],
|
|
4241
|
-
styles: [":focus{z-index:1}input,select,textarea{border:solid
|
|
4261
|
+
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"]
|
|
4242
4262
|
},] }
|
|
4243
4263
|
];
|
|
4244
4264
|
RadiogroupComponent.ctorParameters = function () { return []; };
|
|
@@ -4358,7 +4378,7 @@
|
|
|
4358
4378
|
SelectComponent.decorators = [
|
|
4359
4379
|
{ type: i0.Component, args: [{
|
|
4360
4380
|
selector: 'lux-select',
|
|
4361
|
-
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",
|
|
4381
|
+
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",
|
|
4362
4382
|
providers: [
|
|
4363
4383
|
{
|
|
4364
4384
|
provide: forms.NG_VALUE_ACCESSOR,
|