@metadev/lux 0.32.0 → 21.0.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.
@@ -565,8 +565,8 @@ class AutocompleteComponent {
565
565
  return of([]);
566
566
  }
567
567
  }
568
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
569
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutocompleteComponent, isStandalone: true, selector: "lux-autocomplete", inputs: { inputId: "inputId", disabled: "disabled", readonly: "readonly", label: "label", canAddNewValues: "canAddNewValues", keepOpenAfterDelete: "keepOpenAfterDelete", appendTo: "appendTo", value: "value", dataSource: "dataSource", required: "required", placeholder: "placeholder", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange", dataSourceChange: "dataSourceChange" }, providers: [
568
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
569
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AutocompleteComponent, isStandalone: true, selector: "lux-autocomplete", inputs: { inputId: "inputId", disabled: "disabled", readonly: "readonly", label: "label", canAddNewValues: "canAddNewValues", keepOpenAfterDelete: "keepOpenAfterDelete", appendTo: "appendTo", value: "value", dataSource: "dataSource", required: "required", placeholder: "placeholder", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange", dataSourceChange: "dataSourceChange" }, providers: [
570
570
  {
571
571
  provide: NG_VALUE_ACCESSOR,
572
572
  multi: true,
@@ -579,7 +579,7 @@ class AutocompleteComponent {
579
579
  }
580
580
  ], viewQueries: [{ propertyName: "i0", first: true, predicate: ["i0"], descendants: true, static: true }, { propertyName: "completeDiv", first: true, predicate: ["completeDiv"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\r\n <div class=\"lux-autocomplete-box\">\r\n <input\r\n #i0\r\n [id]=\"inputId\"\r\n [(ngModel)]=\"label\"\r\n [placeholder]=\"placeholder\"\r\n [attr.disabled]=\"disabled || null\"\r\n [attr.readonly]=\"readonly || null\"\r\n (keydown)=\"onKeydown($event, i0.value)\"\r\n (keypress)=\"onKeypress($event, i0.value)\"\r\n (keyup)=\"onKeyup($event, i0.value)\"\r\n (blur)=\"onLostFocus(i0.value)\"\r\n (focus)=\"toggleCompletion(true, i0.value)\"\r\n (click)=\"toggleCompletion(true, i0.value)\"\r\n (resized)=\"onInputResized()\"\r\n (window:resize)=\"onInputResized()\"\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-expanded]=\"showCompletion\"\r\n aria-haspopup=\"true\"\r\n attr.aria-owns=\"{{ inputId + '_list' }}\"\r\n [attr.aria-activedescendant]=\"selectedOption\"\r\n />\r\n @if (canAddNewValues) {\r\n <div class=\"icon-suggestions\"></div>\r\n } @if (showSpinner) {\r\n <div class=\"icon-spinner\"></div>\r\n } @if (!disabled && i0.value && !showCompletion) {\r\n <button\r\n type=\"button\"\r\n class=\"icon-clear\"\r\n aria-label=\"Clear\"\r\n (click)=\"clear()\"\r\n ></button>\r\n } @else {\r\n <div\r\n class=\"icon-dropdown\"\r\n (click)=\"toggleCompletion(!showCompletion, i0.value)\"\r\n ></div>\r\n }\r\n </div>\r\n <div\r\n #completeDiv\r\n [class.showCompletion]=\"showCompletion\"\r\n [class.lux-completion-list-appended]=\"appendTo\"\r\n class=\"lux-completion-list\"\r\n id=\"{{ inputId + '_list' }}\"\r\n >\r\n <ul>\r\n @for (item of completionList; track item.key; let index = $index) {\r\n <li\r\n id=\"{{ inputId + '_' + index }}\"\r\n class=\"lux-completion-item\"\r\n [class.selected]=\"focusItem && item.key === focusItem.key\"\r\n (click)=\"complete(item)\"\r\n [attr.aria-label]=\"item.label\"\r\n >\r\n <span class=\"preserve-white-space\">{{ item.labelPrefix }}</span>\r\n <span class=\"preserve-white-space bold\">{{ item.labelMatch }}</span>\r\n <span class=\"preserve-white-space\">{{ item.labelPostfix }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr max-content}.lux-autocomplete input{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:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin:0rem;padding:0rem;max-height:10rem;overflow:auto;z-index:2}.lux-completion-list ul{list-style:none;margin:0rem;padding:0rem}.lux-completion-list.lux-completion-list-appended{position:absolute}.showCompletion{visibility:visible}.lux-completion-item{background-color:#fff;color:#000;padding:.1rem .5rem;cursor:pointer}.selected{background-color:#2e2eac;color:#fff}.disabled{background-color:#f0f0f0;color:#444}.disabled .selected{background-color:#9898ec;color:#fff}.bold{font-weight:700}.preserve-white-space{white-space:pre}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
581
581
  }
582
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteComponent, decorators: [{
582
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
583
583
  type: Component,
584
584
  args: [{ selector: 'lux-autocomplete', imports: [FormsModule], providers: [
585
585
  {
@@ -873,8 +873,8 @@ class AutocompleteListComponent {
873
873
  getDeleteMessage(label) {
874
874
  return (this.deleteLabelTemplate ?? this.literals[this.lang].deleteLabelTemplate).replace('<<label>>', label);
875
875
  }
876
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
877
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutocompleteListComponent, isStandalone: true, selector: "lux-autocomplete-list", inputs: { value: "value", lang: "lang", inputId: "inputId", dataSource: "dataSource", placeholder: "placeholder", disabled: "disabled", deleteLabelTemplate: "deleteLabelTemplate", addMessage: "addMessage", required: "required", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange" }, providers: [
876
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
877
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AutocompleteListComponent, isStandalone: true, selector: "lux-autocomplete-list", inputs: { value: "value", lang: "lang", inputId: "inputId", dataSource: "dataSource", placeholder: "placeholder", disabled: "disabled", deleteLabelTemplate: "deleteLabelTemplate", addMessage: "addMessage", required: "required", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange" }, providers: [
878
878
  {
879
879
  provide: NG_VALUE_ACCESSOR,
880
880
  multi: true,
@@ -887,7 +887,7 @@ class AutocompleteListComponent {
887
887
  }
888
888
  ], viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<div [id]=\"inputId\">\r\n <ul>\r\n @for (label of labels; track label; let index = $index) {\r\n <li>\r\n <span>{{ label }}</span>\r\n @if (!disabled) {\r\n <button\r\n class=\"remove-item\"\r\n (click)=\"removeAt(index)\"\r\n attr.aria-label=\"{{ getDeleteMessage(label) }}\"\r\n ></button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n @if (!disabled) {\r\n <div class=\"new-entry\">\r\n <lux-autocomplete\r\n #auto\r\n [dataSource]=\"internalDataSource\"\r\n [placeholder]=\"placeholder ?? literals[lang].placeholder\"\r\n [(value)]=\"newEntry\"\r\n (valueChange)=\"onValueChange()\"\r\n (keypress)=\"onNewEntryChange($event, auto)\"\r\n >\r\n </lux-autocomplete>\r\n @if (canAdd) {\r\n <button\r\n type=\"button\"\r\n class=\"add-item\"\r\n aria-label=\"addMessage ?? literals[lang].addMessage\"\r\n (click)=\"addNew(auto)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".new-entry{margin-left:1.5rem;display:grid;grid-template-columns:max-content max-content}.new-entry lux-autocomplete{grid-column:1;grid-row:1}.new-entry .add-item{grid-column:2;grid-row:1;border:none;background:var(--lux-autocomplete-list-add-icon, url(/assets/img/create.png) no-repeat .2rem .2rem);background-size:var(--lux-autocomplete-list-add-icon-size, 1.1rem);height:var(--lux-autocomplete-list-add-icon-height, 1.4rem);width:var(--lux-autocomplete-list-add-icon-width, 1.4rem)}.remove-item{margin-left:.5rem;border:none;background:var(--lux-autocomplete-list-remove-icon, url(/assets/img/delete.svg) no-repeat .2rem .1rem);height:var(--lux-autocomplete-list-remove-icon-height, 1.2rem);width:var(--lux-autocomplete-list-remove-icon-width, 1.3rem);position:relative;top:var(--lux-autocomplete-list-remove-icon-top, .2rem);background-size:var(--lux-autocomplete-list-remove-icon-size, 1rem 1rem)}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "appendTo", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }] });
889
889
  }
890
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteListComponent, decorators: [{
890
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutocompleteListComponent, decorators: [{
891
891
  type: Component,
892
892
  args: [{ selector: 'lux-autocomplete-list', imports: [AutocompleteComponent], providers: [
893
893
  {
@@ -992,12 +992,12 @@ class LuxBreadcrumbComponent {
992
992
  }
993
993
  return activedRouteSnapshot.params.id || routeConfig.path;
994
994
  }
995
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
996
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LuxBreadcrumbComponent, isStandalone: true, selector: "lux-breadcrumb", ngImport: i0, template: "<ul class=\"lux-breadcrumb\">\r\n @for (breadcrumb of breadcrumbs; track breadcrumb.url; let isLast = $last; let\r\n isFirst = $first) {\r\n <li class=\"lux-breadcrumb-item\">\r\n <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{\r\n breadcrumb.label\r\n }}</a>\r\n @if (!isLast) {\r\n <div class=\"lux-breadcrumb-separator\"></div>\r\n }\r\n </li>\r\n }\r\n</ul>\r\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">%0A <path d=\"M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z\"/>%0A</svg>%0A');background-repeat:no-repeat;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
995
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
996
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LuxBreadcrumbComponent, isStandalone: true, selector: "lux-breadcrumb", ngImport: i0, template: "<ul class=\"lux-breadcrumb\">\r\n @for (breadcrumb of breadcrumbs; track breadcrumb.url; let isLast = $last; let\r\n isFirst = $first) {\r\n <li class=\"lux-breadcrumb-item\">\r\n <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{\r\n breadcrumb.label\r\n }}</a>\r\n @if (!isLast) {\r\n <div class=\"lux-breadcrumb-separator\"></div>\r\n }\r\n </li>\r\n }\r\n</ul>\r\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">%0A <path d=\"M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z\"/>%0A</svg>%0A');background-repeat:no-repeat;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
997
997
  }
998
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
998
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
999
999
  type: Component,
1000
- args: [{ selector: 'lux-breadcrumb', imports: [CommonModule, RouterModule], template: "<ul class=\"lux-breadcrumb\">\r\n @for (breadcrumb of breadcrumbs; track breadcrumb.url; let isLast = $last; let\r\n isFirst = $first) {\r\n <li class=\"lux-breadcrumb-item\">\r\n <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{\r\n breadcrumb.label\r\n }}</a>\r\n @if (!isLast) {\r\n <div class=\"lux-breadcrumb-separator\"></div>\r\n }\r\n </li>\r\n }\r\n</ul>\r\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">%0A <path d=\"M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z\"/>%0A</svg>%0A');background-repeat:no-repeat;display:inline-block}\n"] }]
1000
+ args: [{ selector: 'lux-breadcrumb', imports: [RouterModule], template: "<ul class=\"lux-breadcrumb\">\r\n @for (breadcrumb of breadcrumbs; track breadcrumb.url; let isLast = $last; let\r\n isFirst = $first) {\r\n <li class=\"lux-breadcrumb-item\">\r\n <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{\r\n breadcrumb.label\r\n }}</a>\r\n @if (!isLast) {\r\n <div class=\"lux-breadcrumb-separator\"></div>\r\n }\r\n </li>\r\n }\r\n</ul>\r\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">%0A <path d=\"M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z\"/>%0A</svg>%0A');background-repeat:no-repeat;display:inline-block}\n"] }]
1001
1001
  }] });
1002
1002
 
1003
1003
  const KEY_SPACE = ' ';
@@ -1019,7 +1019,7 @@ class CheckboxComponent {
1019
1019
  get lang() {
1020
1020
  return this._lang;
1021
1021
  }
1022
- internalValue;
1022
+ internalValue = false;
1023
1023
  get value() {
1024
1024
  return this.internalValue;
1025
1025
  }
@@ -1034,6 +1034,7 @@ class CheckboxComponent {
1034
1034
  if (!initialAndEmpty) {
1035
1035
  this.valueChange.emit(v);
1036
1036
  }
1037
+ this.cdr.markForCheck();
1037
1038
  }
1038
1039
  get tabindexValue() {
1039
1040
  return this.disabled ? null : '0';
@@ -1050,6 +1051,7 @@ class CheckboxComponent {
1050
1051
  }
1051
1052
  this._disabled = v;
1052
1053
  this.syncModel();
1054
+ this.cdr.markForCheck();
1053
1055
  }
1054
1056
  inputId;
1055
1057
  literals = {
@@ -1064,7 +1066,7 @@ class CheckboxComponent {
1064
1066
  };
1065
1067
  touched = false;
1066
1068
  valueChange = new EventEmitter();
1067
- constructor() { }
1069
+ cdr = inject(ChangeDetectorRef);
1068
1070
  // ControlValueAccessor Interface
1069
1071
  onChange = (value) => { };
1070
1072
  onTouched = () => { };
@@ -1093,7 +1095,9 @@ class CheckboxComponent {
1093
1095
  : `${this.name || 'checkbox'}$${CheckboxComponent.idCounter++}`;
1094
1096
  }
1095
1097
  ngAfterViewInit() {
1096
- this.syncModel();
1098
+ setTimeout(() => {
1099
+ this.syncModel();
1100
+ });
1097
1101
  }
1098
1102
  clicked() {
1099
1103
  if (!this.disabled) {
@@ -1113,8 +1117,8 @@ class CheckboxComponent {
1113
1117
  this.ck.nativeElement.checked = this.internalValue;
1114
1118
  }
1115
1119
  }
1116
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1117
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxComponent, isStandalone: true, selector: "lux-checkbox", inputs: { lang: "lang", value: "value", label: "label", name: "name", disabled: "disabled", inputId: "inputId" }, outputs: { valueChange: "valueChange" }, providers: [
1120
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1121
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CheckboxComponent, isStandalone: true, selector: "lux-checkbox", inputs: { lang: "lang", value: "value", label: "label", name: "name", disabled: "disabled", inputId: "inputId" }, outputs: { valueChange: "valueChange" }, providers: [
1118
1122
  {
1119
1123
  provide: NG_VALUE_ACCESSOR,
1120
1124
  multi: true,
@@ -1122,7 +1126,7 @@ class CheckboxComponent {
1122
1126
  }
1123
1127
  ], viewQueries: [{ propertyName: "ck", first: true, predicate: ["ck"], descendants: true }], ngImport: i0, template: "<div class=\"switch\">\r\n <div>\r\n @if (label) {\r\n <label [for]=\"inputId\">{{ label }}</label>\r\n }\r\n </div>\r\n @if (!disabled) {\r\n <div class=\"switch-item\" (click)=\"clicked()\">\r\n <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\r\n <div\r\n class=\"slider round\"\r\n [class.on]=\"value\"\r\n [class.disabled]=\"disabled\"\r\n [tabindex]=\"tabindexValue\"\r\n (keyup)=\"onKey($event)\"\r\n ></div>\r\n </div>\r\n }\r\n <div>\r\n @if (value) {\r\n <span class=\"checkbox-label\">{{ literals[lang].yesLabel }}</span>\r\n } @if (!value) {\r\n <span class=\"checkbox-label\">{{ literals[lang].noLabel }}</span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".switch{display:flex;flex-flow:row wrap;align-items:center}label{padding-right:1.1rem}.switch-item{padding-right:.5em}.slider.round{border-radius:.7rem;width:3.1rem;height:1.4rem}.slider.round:before{border-radius:50%}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;position:relative;top:-.7rem;background-color:#ccc;transition:.4s}.slider.on{background-color:#2196f3}.slider:before{position:absolute;content:\"\";height:1rem;width:1rem;left:.2rem;bottom:.2rem;background-color:#fff;transition:.4s}.slider.on:before{transform:translate(26px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] });
1124
1128
  }
1125
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, decorators: [{
1129
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CheckboxComponent, decorators: [{
1126
1130
  type: Component,
1127
1131
  args: [{ selector: 'lux-checkbox', imports: [], providers: [
1128
1132
  {
@@ -1131,7 +1135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1131
1135
  useExisting: forwardRef(() => CheckboxComponent)
1132
1136
  }
1133
1137
  ], template: "<div class=\"switch\">\r\n <div>\r\n @if (label) {\r\n <label [for]=\"inputId\">{{ label }}</label>\r\n }\r\n </div>\r\n @if (!disabled) {\r\n <div class=\"switch-item\" (click)=\"clicked()\">\r\n <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\r\n <div\r\n class=\"slider round\"\r\n [class.on]=\"value\"\r\n [class.disabled]=\"disabled\"\r\n [tabindex]=\"tabindexValue\"\r\n (keyup)=\"onKey($event)\"\r\n ></div>\r\n </div>\r\n }\r\n <div>\r\n @if (value) {\r\n <span class=\"checkbox-label\">{{ literals[lang].yesLabel }}</span>\r\n } @if (!value) {\r\n <span class=\"checkbox-label\">{{ literals[lang].noLabel }}</span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".switch{display:flex;flex-flow:row wrap;align-items:center}label{padding-right:1.1rem}.switch-item{padding-right:.5em}.slider.round{border-radius:.7rem;width:3.1rem;height:1.4rem}.slider.round:before{border-radius:50%}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;position:relative;top:-.7rem;background-color:#ccc;transition:.4s}.slider.on{background-color:#2196f3}.slider:before{position:absolute;content:\"\";height:1rem;width:1rem;left:.2rem;bottom:.2rem;background-color:#fff;transition:.4s}.slider.on:before{transform:translate(26px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] }]
1134
- }], ctorParameters: () => [], propDecorators: { ck: [{
1138
+ }], propDecorators: { ck: [{
1135
1139
  type: ViewChild,
1136
1140
  args: ['ck', { static: false }]
1137
1141
  }], lang: [{
@@ -1390,8 +1394,8 @@ class DatetimeComponent {
1390
1394
  this.min = this.min || '1900-01-01';
1391
1395
  this.max = this.max || '2100-01-01';
1392
1396
  }
1393
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1394
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DatetimeComponent, isStandalone: true, selector: "lux-datetime", inputs: { min: "min", max: "max", includeSeconds: "includeSeconds", localTime: "localTime", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
1397
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1398
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DatetimeComponent, isStandalone: true, selector: "lux-datetime", inputs: { min: "min", max: "max", includeSeconds: "includeSeconds", localTime: "localTime", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
1395
1399
  {
1396
1400
  provide: NG_VALUE_ACCESSOR,
1397
1401
  multi: true,
@@ -1404,7 +1408,7 @@ class DatetimeComponent {
1404
1408
  }
1405
1409
  ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, static: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, static: true }], ngImport: i0, template: "<input\r\n #dateInput\r\n class=\"rounded-left prefix\"\r\n [ngClass]=\"className\"\r\n type=\"date\"\r\n [id]=\"inputId + '$date'\"\r\n [(ngModel)]=\"dateValue\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [placeholder]=\"\"\r\n (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\r\n (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n<input\r\n #timeInput\r\n [class]=\"\r\n (disabled || readonly || !isClearable()) && localTime ? 'rounded-right' : ''\r\n \"\r\n [ngClass]=\"className\"\r\n type=\"time\"\r\n [id]=\"inputId + '$time'\"\r\n [(ngModel)]=\"timeValue\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [placeholder]=\"\"\r\n [step]=\"includeSeconds ? 1 : 60\"\r\n (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\r\n (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n@if (!localTime) {\r\n<div\r\n [class]=\"\r\n disabled || readonly || !isClearable()\r\n ? 'rounded-right postfix symbol'\r\n : 'postfix symbol'\r\n \"\r\n [ngClass]=\"className\"\r\n>\r\n <span>{{ localTime ? '' : 'UTC' }}</span>\r\n</div>\r\n} @if (!disabled && !readonly && isClearable()) {\r\n<button\r\n #clearButton\r\n type=\"button\"\r\n class=\"rounded-right postfix bordered icon-clear\"\r\n [id]=\"inputId + '$clear'\"\r\n (click)=\"clear()\"\r\n aria-label=\"clear\"\r\n></button>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n @if (lastErrors.required) {\r\n <div>{{ userErrors[lang].required }}</div>\r\n } @if (lastErrors.min) {\r\n <div>{{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}</div>\r\n } @if (lastErrors.max) {\r\n <div>{{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}</div>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1406
1410
  }
1407
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatetimeComponent, decorators: [{
1411
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimeComponent, decorators: [{
1408
1412
  type: Component,
1409
1413
  args: [{ selector: 'lux-datetime', imports: [FormsModule, CommonModule], providers: [
1410
1414
  {
@@ -1570,18 +1574,18 @@ class FilterComponent {
1570
1574
  addEvent() {
1571
1575
  this.subject.next(this.searchValue);
1572
1576
  }
1573
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1574
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FilterComponent, isStandalone: true, selector: "lux-filter", inputs: { disabled: "disabled", inputId: "inputId", placeholder: "placeholder", searchValue: "searchValue", searchOnType: "searchOnType", ariaLabel: ["aria-label", "ariaLabel"], debounce: "debounce" }, outputs: { searchValueChange: "searchValueChange" }, providers: [
1577
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1578
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: FilterComponent, isStandalone: true, selector: "lux-filter", inputs: { disabled: "disabled", inputId: "inputId", placeholder: "placeholder", searchValue: "searchValue", searchOnType: "searchOnType", ariaLabel: ["aria-label", "ariaLabel"], debounce: "debounce" }, outputs: { searchValueChange: "searchValueChange" }, providers: [
1575
1579
  {
1576
1580
  provide: NG_VALUE_ACCESSOR,
1577
1581
  multi: true,
1578
1582
  useExisting: forwardRef(() => FilterComponent)
1579
1583
  }
1580
- ], ngImport: i0, template: "<div class=\"filter\">\r\n <input\r\n #i0\r\n type=\"text\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [placeholder]=\"placeholder\"\r\n [id]=\"inputId\"\r\n [disabled]=\"disabled\"\r\n [value]=\"searchValue\"\r\n (valueChange)=\"onInputValueChange(i0.value)\"\r\n (keyup)=\"keyup($event, i0.value)\"\r\n />\r\n\r\n <button\r\n [class.hide]=\"!searchValue\"\r\n aria-label=\"Clear\"\r\n class=\"clear-indicator icon icon-clear\"\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n ></button>\r\n @if (searchOnType) {\r\n <i class=\"search-indicator icon icon-search\"></i>\r\n } @if (!searchOnType) {\r\n <button\r\n class=\"btn-search\"\r\n type=\"button\"\r\n [disabled]=\"disabled\"\r\n (click)=\"search()\"\r\n >\r\n Search\r\n </button>\r\n }\r\n</div>\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
1584
+ ], ngImport: i0, template: "<div class=\"filter\">\r\n <input\r\n #i0\r\n type=\"text\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [placeholder]=\"placeholder\"\r\n [id]=\"inputId\"\r\n [disabled]=\"disabled\"\r\n [value]=\"searchValue\"\r\n (valueChange)=\"onInputValueChange(i0.value)\"\r\n (keyup)=\"keyup($event, i0.value)\"\r\n />\r\n\r\n <button\r\n [class.hide]=\"!searchValue\"\r\n aria-label=\"Clear\"\r\n class=\"clear-indicator icon icon-clear\"\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n ></button>\r\n @if (searchOnType) {\r\n <i class=\"search-indicator icon icon-search\"></i>\r\n } @if (!searchOnType) {\r\n <button\r\n class=\"btn-search\"\r\n type=\"button\"\r\n [disabled]=\"disabled\"\r\n (click)=\"search()\"\r\n >\r\n Search\r\n </button>\r\n }\r\n</div>\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
1581
1585
  }
1582
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FilterComponent, decorators: [{
1586
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterComponent, decorators: [{
1583
1587
  type: Component,
1584
- args: [{ selector: 'lux-filter', imports: [CommonModule, FormsModule], providers: [
1588
+ args: [{ selector: 'lux-filter', imports: [FormsModule], providers: [
1585
1589
  {
1586
1590
  provide: NG_VALUE_ACCESSOR,
1587
1591
  multi: true,
@@ -1624,10 +1628,10 @@ class OpenLayerLoaderService {
1624
1628
  }
1625
1629
  return of(true);
1626
1630
  }
1627
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1628
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
1631
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1632
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
1629
1633
  }
1630
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
1634
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
1631
1635
  type: Injectable,
1632
1636
  args: [{ providedIn: 'root' }]
1633
1637
  }] });
@@ -1915,12 +1919,12 @@ class MapComponent {
1915
1919
  this._map.updateSize();
1916
1920
  }
1917
1921
  }
1918
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1919
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MapComponent, isStandalone: true, selector: "lux-map", inputs: { mapId: "mapId", zoom: "zoom", center: "center", readonly: "readonly", markerCoordinates: "markerCoordinates", markerPoint: "markerPoint" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
1922
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1923
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MapComponent, isStandalone: true, selector: "lux-map", inputs: { mapId: "mapId", zoom: "zoom", center: "center", readonly: "readonly", markerCoordinates: "markerCoordinates", markerPoint: "markerPoint" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] });
1920
1924
  }
1921
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MapComponent, decorators: [{
1925
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MapComponent, decorators: [{
1922
1926
  type: Component,
1923
- args: [{ selector: 'lux-map', imports: [CommonModule], template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] }]
1927
+ args: [{ selector: 'lux-map', imports: [], template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] }]
1924
1928
  }], ctorParameters: () => [], propDecorators: { mapId: [{
1925
1929
  type: Input
1926
1930
  }], zoom: [{
@@ -1941,13 +1945,13 @@ class LuxModalBackdropComponent {
1941
1945
  backdropClass;
1942
1946
  class = 'modal-backdrop fade show';
1943
1947
  style = 'z-index: 1050';
1944
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1945
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: LuxModalBackdropComponent, isStandalone: true, selector: "lux-modal-backdrop", inputs: { backdropClass: "backdropClass" }, host: { properties: { "class": "this.class", "style": "this.style" } }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
1948
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1949
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LuxModalBackdropComponent, isStandalone: true, selector: "lux-modal-backdrop", inputs: { backdropClass: "backdropClass" }, host: { properties: { "class": "this.class", "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
1946
1950
  }
1947
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
1951
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
1948
1952
  type: Component,
1949
1953
  args: [{
1950
- imports: [CommonModule],
1954
+ imports: [],
1951
1955
  selector: 'lux-modal-backdrop',
1952
1956
  template: ''
1953
1957
  }]
@@ -1963,10 +1967,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1963
1967
 
1964
1968
  class LuxModalConfig {
1965
1969
  backdrop = true;
1966
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1967
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
1970
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1971
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
1968
1972
  }
1969
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalConfig, decorators: [{
1973
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalConfig, decorators: [{
1970
1974
  type: Injectable,
1971
1975
  args: [{ providedIn: 'root' }]
1972
1976
  }] });
@@ -2180,7 +2184,8 @@ class LuxModalWindowComponent {
2180
2184
  get hostAriaDescribedBy() {
2181
2185
  return this.ariaDescribedBy;
2182
2186
  }
2183
- backdropClick(btn) {
2187
+ backdropClick(event) {
2188
+ const btn = event.target;
2184
2189
  if (this.backdrop === true && this._elRef.nativeElement === btn) {
2185
2190
  this.dismiss(ModalDismissReasons.BackdropClick);
2186
2191
  }
@@ -2216,18 +2221,18 @@ class LuxModalWindowComponent {
2216
2221
  elementToFocus.focus();
2217
2222
  this._elWithFocus = null;
2218
2223
  }
2219
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2220
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: LuxModalWindowComponent, isStandalone: true, selector: "lux-modal-window", inputs: { ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy", backdrop: "backdrop", keyboard: "keyboard", windowClass: "windowClass" }, outputs: { dismissEvent: "dismissEvent" }, host: { listeners: { "click": "backdropClick($event.target)", "keyup.esc": "escKey($event)" }, properties: { "class": "this.class", "attr.role": "this.role", "tabindex": "this.tabindex", "attr.aria-modal": "this.ariamodal", "attr.aria-labelledby": "this.hostAriaLabelledBy", "attr.aria-describedby": "this.hostAriaDescribedBy" } }, ngImport: i0, template: `
2224
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2225
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LuxModalWindowComponent, isStandalone: true, selector: "lux-modal-window", inputs: { ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy", backdrop: "backdrop", keyboard: "keyboard", windowClass: "windowClass" }, outputs: { dismissEvent: "dismissEvent" }, host: { listeners: { "click": "backdropClick($event)", "keyup.esc": "escKey($event)" }, properties: { "class": "this.class", "attr.role": "this.role", "tabindex": "this.tabindex", "attr.aria-modal": "this.ariamodal", "attr.aria-labelledby": "this.hostAriaLabelledBy", "attr.aria-describedby": "this.hostAriaDescribedBy" } }, ngImport: i0, template: `
2221
2226
  <div class="modal-dialog" role="document">
2222
2227
  <div class="modal-content"><ng-content></ng-content></div>
2223
2228
  </div>
2224
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
2229
+ `, isInline: true });
2225
2230
  }
2226
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
2231
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
2227
2232
  type: Component,
2228
2233
  args: [{
2229
2234
  selector: 'lux-modal-window',
2230
- imports: [CommonModule],
2235
+ imports: [],
2231
2236
  template: `
2232
2237
  <div class="modal-dialog" role="document">
2233
2238
  <div class="modal-content"><ng-content></ng-content></div>
@@ -2266,7 +2271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2266
2271
  args: ['attr.aria-describedby']
2267
2272
  }], backdropClick: [{
2268
2273
  type: HostListener,
2269
- args: ['click', ['$event.target']]
2274
+ args: ['click', ['$event']]
2270
2275
  }], escKey: [{
2271
2276
  type: HostListener,
2272
2277
  args: ['keyup.esc', ['$event']]
@@ -2428,10 +2433,10 @@ class ModalStack {
2428
2433
  this._setAriaHidden(parent);
2429
2434
  }
2430
2435
  }
2431
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2432
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalStack, providedIn: 'root' });
2436
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2437
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalStack, providedIn: 'root' });
2433
2438
  }
2434
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalStack, decorators: [{
2439
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalStack, decorators: [{
2435
2440
  type: Injectable,
2436
2441
  args: [{ providedIn: 'root' }]
2437
2442
  }], ctorParameters: () => [] });
@@ -2448,10 +2453,10 @@ class ModalService {
2448
2453
  open(content, options = {}) {
2449
2454
  return this.modalStack.open(this.moduleCFR, content, options);
2450
2455
  }
2451
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2452
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalService, providedIn: 'root' });
2456
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2457
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalService, providedIn: 'root' });
2453
2458
  }
2454
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalService, decorators: [{
2459
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalService, decorators: [{
2455
2460
  type: Injectable,
2456
2461
  args: [{ providedIn: 'root' }]
2457
2462
  }] });
@@ -2544,10 +2549,10 @@ class GeolocationService {
2544
2549
  ? this.lastQueriesLru[this.lastQueriesLru.length - 1]
2545
2550
  : null;
2546
2551
  }
2547
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2548
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationService, providedIn: 'root' });
2552
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2553
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationService, providedIn: 'root' });
2549
2554
  }
2550
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationService, decorators: [{
2555
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationService, decorators: [{
2551
2556
  type: Injectable,
2552
2557
  args: [{ providedIn: 'root' }]
2553
2558
  }], ctorParameters: () => [] });
@@ -2906,8 +2911,8 @@ class GeolocationComponent {
2906
2911
  this.minLongitude = this.minLongitude || -180;
2907
2912
  this.maxLongitude = this.maxLongitude || +180;
2908
2913
  }
2909
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2910
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: GeolocationComponent, isStandalone: true, selector: "lux-geolocation", inputs: { minLatitude: "minLatitude", maxLatitude: "maxLatitude", minLongitude: "minLongitude", maxLongitude: "maxLongitude", step: "step", zoom: "zoom", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
2914
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2915
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: GeolocationComponent, isStandalone: true, selector: "lux-geolocation", inputs: { minLatitude: "minLatitude", maxLatitude: "maxLatitude", minLongitude: "minLongitude", maxLongitude: "maxLongitude", step: "step", zoom: "zoom", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
2911
2916
  {
2912
2917
  provide: NG_VALUE_ACCESSOR,
2913
2918
  multi: true,
@@ -2920,7 +2925,7 @@ class GeolocationComponent {
2920
2925
  }
2921
2926
  ], viewQueries: [{ propertyName: "latitude", first: true, predicate: ["latitude"], descendants: true, static: true }, { propertyName: "longitude", first: true, predicate: ["longitude"], descendants: true, static: true }, { propertyName: "map", first: true, predicate: ["map"], descendants: true }], ngImport: i0, template: "<input\r\n #latitude\r\n class=\"rounded-left prefix\"\r\n [ngClass]=\"className\"\r\n type=\"number\"\r\n [id]=\"inputId + '$latitude'\"\r\n [(ngModel)]=\"latitudeValue\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [attr.min]=\"\r\n minLatitude !== undefined && minLatitude !== null\r\n ? minLatitude.toString()\r\n : undefined\r\n \"\r\n [attr.max]=\"\r\n maxLatitude !== undefined && maxLatitude !== null\r\n ? maxLatitude.toString()\r\n : undefined\r\n \"\r\n [attr.step]=\"\r\n step !== undefined && step !== null ? step.toString() : undefined\r\n \"\r\n [placeholder]=\"i18n[lang].lat\"\r\n (keyup)=\"onEventLatitude(latitude.value)\"\r\n (change)=\"onEventLatitude(latitude.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n<div\r\n class=\"infix symbol monospace clickable\"\r\n [ngClass]=\"className\"\r\n (click)=\"openModalMap(modalMap)\"\r\n>\r\n @if (isValidNumber(latitudeValue) && latitudeValue >= 0) {\r\n <span>{{ i18n[lang].cardinalPoints.north }}</span>\r\n } @if (isValidNumber(latitudeValue) && latitudeValue < 0) {\r\n <span>{{ i18n[lang].cardinalPoints.south }}</span>\r\n } @if (!isValidNumber(latitudeValue)) {\r\n <span>-</span>\r\n }\r\n</div>\r\n<input\r\n #longitude\r\n class=\"prefix\"\r\n [ngClass]=\"className\"\r\n type=\"number\"\r\n [id]=\"inputId + '$longitude'\"\r\n [(ngModel)]=\"longitudeValue\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [attr.min]=\"\r\n minLongitude !== undefined && minLongitude !== null\r\n ? minLongitude.toString()\r\n : undefined\r\n \"\r\n [attr.max]=\"\r\n maxLongitude !== undefined && maxLongitude !== null\r\n ? maxLongitude.toString()\r\n : undefined\r\n \"\r\n [attr.step]=\"\r\n step !== undefined && step !== null ? step.toString() : undefined\r\n \"\r\n [placeholder]=\"i18n[lang].lon\"\r\n (keyup)=\"onEventLongitude(longitude.value)\"\r\n (change)=\"onEventLongitude(longitude.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n<div\r\n class=\"infix symbol monospace clickable\"\r\n [ngClass]=\"className\"\r\n (click)=\"openModalMap(modalMap)\"\r\n>\r\n @if (isValidNumber(longitudeValue) && longitudeValue >= 0) {\r\n <span>{{ i18n[lang].cardinalPoints.east }}</span>\r\n } @if (isValidNumber(longitudeValue) && longitudeValue < 0) {\r\n <span>{{ i18n[lang].cardinalPoints.west }}</span>\r\n } @if (!isValidNumber(longitudeValue)) {\r\n <span>-</span>\r\n }\r\n</div>\r\n<div\r\n [class]=\"\r\n disabled || readonly || !isClearable()\r\n ? 'clickable rounded-right postfix symbol'\r\n : 'clickable postfix symbol'\r\n \"\r\n [ngClass]=\"className\"\r\n (click)=\"openModalMap(modalMap)\"\r\n>\r\n <span class=\"icon-globe\"></span>\r\n</div>\r\n@if (!disabled && !readonly && isClearable()) {\r\n<button\r\n #clearButton\r\n class=\"rounded-right postfix bordered icon icon-clear\"\r\n [id]=\"inputId + '$clear'\"\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n aria-label=\"clear\"\r\n></button>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n @if (lastErrors.required) {\r\n <div>\r\n {{ i18n[lang].userErrors.required }}\r\n </div>\r\n } @if (lastErrors.minLatitude) {\r\n <div>\r\n {{\r\n i18n[lang].userErrors.minLatitude.replace(\r\n '$minLatitude',\r\n lastErrors.minLatitude.min\r\n )\r\n }}\r\n </div>\r\n } @if (lastErrors.maxLatitude) {\r\n <div>\r\n {{\r\n i18n[lang].userErrors.maxLatitude.replace(\r\n '$maxLatitude',\r\n lastErrors.maxLatitude.max\r\n )\r\n }}\r\n </div>\r\n } @if (lastErrors.minLongitude) {\r\n <div>\r\n {{\r\n i18n[lang].userErrors.minLongitude.replace(\r\n '$minLongitude',\r\n lastErrors.minLongitude.min\r\n )\r\n }}\r\n </div>\r\n } @if (lastErrors.maxLongitude) {\r\n <div>\r\n {{\r\n i18n[lang].userErrors.maxLongitude.replace(\r\n '$maxLongitude',\r\n lastErrors.maxLongitude.max\r\n )\r\n }}\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<ng-template #modalMap let-modal>\r\n <div class=\"lux-modal-header\">\r\n <h4 class=\"modal-title default-font\" id=\"modal-basic-title\">\r\n {{ mapTitle }}\r\n </h4>\r\n <button\r\n type=\"button\"\r\n class=\"close\"\r\n aria-label=\"Close\"\r\n (click)=\"modal.dismiss('Cross click')\"\r\n >\r\n <span aria-hidden=\"true\">\u00D7</span>\r\n </button>\r\n </div>\r\n <div class=\"lux-modal-body content\">\r\n @if (!disabled && !readonly) {\r\n <lux-autocomplete\r\n #searchBar\r\n [attr.aria-label]=\"i18n[lang].typeToSearch\"\r\n [placeholder]=\"i18n[lang].typeToSearch\"\r\n [instance]=\"self\"\r\n [resolveLabelsFunction]=\"getLabels\"\r\n [populateFunction]=\"getData\"\r\n (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\r\n ></lux-autocomplete>\r\n }\r\n <div class=\"map-container\">\r\n <lux-map\r\n #map\r\n [center]=\"value\"\r\n [markerPoint]=\"value\"\r\n [zoom]=\"zoom\"\r\n [readonly]=\"readonly === true || disabled === true ? true : false\"\r\n ></lux-map>\r\n </div>\r\n </div>\r\n <div class=\"lux-modal-footer\">\r\n @if (disabled || readonly) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-cancel\"\r\n (click)=\"modal.close('cancel')\"\r\n >\r\n {{ i18n[lang].closeAction }}\r\n </button>\r\n } @if (!disabled && !readonly) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-cancel\"\r\n (click)=\"modal.close('cancel')\"\r\n >\r\n {{ i18n[lang].cancelAction }}\r\n </button>\r\n } @if (!disabled && !readonly) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-select\"\r\n (click)=\"modal.close(map.markerPoint.coordinates)\"\r\n >\r\n {{ i18n[lang].selectAction }}\r\n </button>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);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:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:var(--lux-autocomplete-icon-width, 1.5rem);background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:var(--lux-geolocation-map-height, 45vh);width:var(--lux-geolocation-map-width, 90vw);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "appendTo", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: MapComponent, selector: "lux-map", inputs: ["mapId", "zoom", "center", "readonly", "markerCoordinates", "markerPoint"], outputs: ["valueChange"] }] });
2922
2927
  }
2923
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationComponent, decorators: [{
2928
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationComponent, decorators: [{
2924
2929
  type: Component,
2925
2930
  args: [{ selector: 'lux-geolocation', imports: [
2926
2931
  CommonModule,
@@ -3169,16 +3174,17 @@ class RegexpService {
3169
3174
  // TODO: RETURN AN EMPTY STRING
3170
3175
  return 'NO DEBERÍA SER POSIBLE';
3171
3176
  }
3172
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
3173
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RegexpService, providedIn: 'root' });
3177
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
3178
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RegexpService, providedIn: 'root' });
3174
3179
  }
3175
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RegexpService, decorators: [{
3180
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RegexpService, decorators: [{
3176
3181
  type: Injectable,
3177
3182
  args: [{ providedIn: 'root' }]
3178
3183
  }], ctorParameters: () => [] });
3179
3184
 
3180
3185
  class InputComponent {
3181
3186
  regexpService = inject(RegexpService);
3187
+ cdr = inject(ChangeDetectorRef);
3182
3188
  static idCounter = 0;
3183
3189
  input;
3184
3190
  textarea;
@@ -3186,7 +3192,7 @@ class InputComponent {
3186
3192
  touched = false;
3187
3193
  dirty = false;
3188
3194
  lastErrors = null;
3189
- _disabled;
3195
+ _disabled = false;
3190
3196
  _value = '';
3191
3197
  _type;
3192
3198
  _placeholder;
@@ -3232,6 +3238,7 @@ class InputComponent {
3232
3238
  set disabled(v) {
3233
3239
  v = typeof v === 'string' ? true : v;
3234
3240
  this._disabled = v;
3241
+ this.cdr.markForCheck();
3235
3242
  }
3236
3243
  get disabled() {
3237
3244
  return this._disabled;
@@ -3557,8 +3564,8 @@ class InputComponent {
3557
3564
  this.max = this.max || 1000.0;
3558
3565
  this.placeholder = '0.00';
3559
3566
  }
3560
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3561
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: InputComponent, isStandalone: true, selector: "lux-input", inputs: { rows: "rows", cols: "cols", step: "step", min: "min", max: "max", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", pattern: "pattern", currency: "currency", placeholder: "placeholder", required: "required", type: "type", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
3567
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3568
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputComponent, isStandalone: true, selector: "lux-input", inputs: { rows: "rows", cols: "cols", step: "step", min: "min", max: "max", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", pattern: "pattern", currency: "currency", placeholder: "placeholder", required: "required", type: "type", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
3562
3569
  {
3563
3570
  provide: NG_VALUE_ACCESSOR,
3564
3571
  multi: true,
@@ -3569,9 +3576,9 @@ class InputComponent {
3569
3576
  multi: true,
3570
3577
  useExisting: forwardRef(() => InputComponent)
3571
3578
  }
3572
- ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }], ngImport: i0, template: "@if (currency && currency === 'USD') {\r\n<div class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\r\n <span>$</span>\r\n</div>\r\n} @if (type !== 'textarea') {\r\n<input\r\n #input\r\n [class]=\"\r\n hasPrefix()\r\n ? hasPostfix()\r\n ? 'infix'\r\n : 'postfix rounded-right'\r\n : hasPostfix()\r\n ? 'prefix rounded-left'\r\n : 'rounded'\r\n \"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [type]=\"domain\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [attr.min]=\"min?.toString() || undefined\"\r\n [attr.max]=\"max?.toString() || undefined\"\r\n [attr.step]=\"step?.toString() || undefined\"\r\n [attr.pattern]=\"pattern || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(input.value)\"\r\n (change)=\"onChangeValue(input.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n} @if (type === 'textarea') {\r\n<textarea\r\n #textarea\r\n class=\"rounded\"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [attr.cols]=\"cols?.toString() || undefined\"\r\n [attr.rows]=\"rows?.toString() || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(textarea.value)\"\r\n (change)=\"onChangeValue(textarea.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n></textarea>\r\n} @if (currency && currency === 'EUR') {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u20AC</span>\r\n</div>\r\n} @if (isPercentage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>%</span>\r\n</div>\r\n} @if (isPermillage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u2030</span>\r\n</div>\r\n} @if (isUrl() && !!value) {\r\n<div class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\r\n <a href=\"{{ value }}\" target=\"_blank\">\r\n <span class=\"icon-external\"></span>\r\n </a>\r\n</div>\r\n} @if (isColor()) {\r\n<div class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\r\n <div\r\n class=\"rounded-right full-space\"\r\n [ngStyle]=\"{ 'background-color': color }\"\r\n >\r\n <input\r\n #colorpicker\r\n class=\"minimal-space clickable invisible rounded-right full-space\"\r\n [id]=\"inputId + '$colorpicker'\"\r\n type=\"color\"\r\n [attr.value]=\"value\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n (change)=\"onColorPicked(colorpicker.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n />\r\n </div>\r\n</div>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n @if (lastErrors.required) {\r\n <div>\r\n {{ userErrors[this.lang].required }}\r\n </div>\r\n } @if (lastErrors.email) {\r\n <div>{{ userErrors[this.lang].email }}</div>\r\n } @if (lastErrors.url) {\r\n <div>{{ userErrors[this.lang].url }}</div>\r\n } @if (lastErrors.min) {\r\n <div>\r\n {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n </div>\r\n } @if (lastErrors.max) {\r\n <div>\r\n {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\r\n </div>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{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(#fff 0deg 90deg,#d3d3d3 90deg 180deg,#fff 180deg 270deg,#d3d3d3 270deg 360deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
3579
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }], ngImport: i0, template: "@if (currency && currency === 'USD') {\r\n<div class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\r\n <span>$</span>\r\n</div>\r\n} @if (type !== 'textarea') {\r\n<input\r\n #input\r\n [class]=\"\r\n hasPrefix()\r\n ? hasPostfix()\r\n ? 'infix'\r\n : 'postfix rounded-right'\r\n : hasPostfix()\r\n ? 'prefix rounded-left'\r\n : 'rounded'\r\n \"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [type]=\"domain\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [disabled]=\"disabled === true\"\r\n [readonly]=\"readonly === true\"\r\n [attr.min]=\"min?.toString() || undefined\"\r\n [attr.max]=\"max?.toString() || undefined\"\r\n [attr.step]=\"step?.toString() || undefined\"\r\n [attr.pattern]=\"pattern || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(input.value)\"\r\n (change)=\"onChangeValue(input.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n} @if (type === 'textarea') {\r\n<textarea\r\n #textarea\r\n class=\"rounded\"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [disabled]=\"disabled === true\"\r\n [readonly]=\"readonly === true\"\r\n [attr.cols]=\"cols?.toString() || undefined\"\r\n [attr.rows]=\"rows?.toString() || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(textarea.value)\"\r\n (change)=\"onChangeValue(textarea.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n></textarea>\r\n} @if (currency && currency === 'EUR') {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u20AC</span>\r\n</div>\r\n} @if (isPercentage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>%</span>\r\n</div>\r\n} @if (isPermillage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u2030</span>\r\n</div>\r\n} @if (isUrl() && !!value) {\r\n<div class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\r\n <a href=\"{{ value }}\" target=\"_blank\">\r\n <span class=\"icon-external\"></span>\r\n </a>\r\n</div>\r\n} @if (isColor()) {\r\n<div class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\r\n <div\r\n class=\"rounded-right full-space\"\r\n [ngStyle]=\"{ 'background-color': color }\"\r\n >\r\n <input\r\n #colorpicker\r\n class=\"minimal-space clickable invisible rounded-right full-space\"\r\n [id]=\"inputId + '$colorpicker'\"\r\n type=\"color\"\r\n [attr.value]=\"value\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n (change)=\"onColorPicked(colorpicker.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n />\r\n </div>\r\n</div>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n @if (lastErrors.required) {\r\n <div>\r\n {{ userErrors[this.lang].required }}\r\n </div>\r\n } @if (lastErrors.email) {\r\n <div>{{ userErrors[this.lang].email }}</div>\r\n } @if (lastErrors.url) {\r\n <div>{{ userErrors[this.lang].url }}</div>\r\n } @if (lastErrors.min) {\r\n <div>\r\n {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n </div>\r\n } @if (lastErrors.max) {\r\n <div>\r\n {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\r\n </div>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{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(#fff 0deg 90deg,#d3d3d3 90deg 180deg,#fff 180deg 270deg,#d3d3d3 270deg 360deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
3573
3580
  }
3574
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, decorators: [{
3581
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputComponent, decorators: [{
3575
3582
  type: Component,
3576
3583
  args: [{ selector: 'lux-input', imports: [CommonModule, FormsModule], providers: [
3577
3584
  {
@@ -3584,7 +3591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
3584
3591
  multi: true,
3585
3592
  useExisting: forwardRef(() => InputComponent)
3586
3593
  }
3587
- ], template: "@if (currency && currency === 'USD') {\r\n<div class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\r\n <span>$</span>\r\n</div>\r\n} @if (type !== 'textarea') {\r\n<input\r\n #input\r\n [class]=\"\r\n hasPrefix()\r\n ? hasPostfix()\r\n ? 'infix'\r\n : 'postfix rounded-right'\r\n : hasPostfix()\r\n ? 'prefix rounded-left'\r\n : 'rounded'\r\n \"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [type]=\"domain\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [attr.min]=\"min?.toString() || undefined\"\r\n [attr.max]=\"max?.toString() || undefined\"\r\n [attr.step]=\"step?.toString() || undefined\"\r\n [attr.pattern]=\"pattern || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(input.value)\"\r\n (change)=\"onChangeValue(input.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n} @if (type === 'textarea') {\r\n<textarea\r\n #textarea\r\n class=\"rounded\"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n [attr.cols]=\"cols?.toString() || undefined\"\r\n [attr.rows]=\"rows?.toString() || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(textarea.value)\"\r\n (change)=\"onChangeValue(textarea.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n></textarea>\r\n} @if (currency && currency === 'EUR') {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u20AC</span>\r\n</div>\r\n} @if (isPercentage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>%</span>\r\n</div>\r\n} @if (isPermillage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u2030</span>\r\n</div>\r\n} @if (isUrl() && !!value) {\r\n<div class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\r\n <a href=\"{{ value }}\" target=\"_blank\">\r\n <span class=\"icon-external\"></span>\r\n </a>\r\n</div>\r\n} @if (isColor()) {\r\n<div class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\r\n <div\r\n class=\"rounded-right full-space\"\r\n [ngStyle]=\"{ 'background-color': color }\"\r\n >\r\n <input\r\n #colorpicker\r\n class=\"minimal-space clickable invisible rounded-right full-space\"\r\n [id]=\"inputId + '$colorpicker'\"\r\n type=\"color\"\r\n [attr.value]=\"value\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n (change)=\"onColorPicked(colorpicker.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n />\r\n </div>\r\n</div>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n @if (lastErrors.required) {\r\n <div>\r\n {{ userErrors[this.lang].required }}\r\n </div>\r\n } @if (lastErrors.email) {\r\n <div>{{ userErrors[this.lang].email }}</div>\r\n } @if (lastErrors.url) {\r\n <div>{{ userErrors[this.lang].url }}</div>\r\n } @if (lastErrors.min) {\r\n <div>\r\n {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n </div>\r\n } @if (lastErrors.max) {\r\n <div>\r\n {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\r\n </div>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{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(#fff 0deg 90deg,#d3d3d3 90deg 180deg,#fff 180deg 270deg,#d3d3d3 270deg 360deg)}\n"] }]
3594
+ ], template: "@if (currency && currency === 'USD') {\r\n<div class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\r\n <span>$</span>\r\n</div>\r\n} @if (type !== 'textarea') {\r\n<input\r\n #input\r\n [class]=\"\r\n hasPrefix()\r\n ? hasPostfix()\r\n ? 'infix'\r\n : 'postfix rounded-right'\r\n : hasPostfix()\r\n ? 'prefix rounded-left'\r\n : 'rounded'\r\n \"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [type]=\"domain\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [disabled]=\"disabled === true\"\r\n [readonly]=\"readonly === true\"\r\n [attr.min]=\"min?.toString() || undefined\"\r\n [attr.max]=\"max?.toString() || undefined\"\r\n [attr.step]=\"step?.toString() || undefined\"\r\n [attr.pattern]=\"pattern || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(input.value)\"\r\n (change)=\"onChangeValue(input.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n/>\r\n} @if (type === 'textarea') {\r\n<textarea\r\n #textarea\r\n class=\"rounded\"\r\n [ngClass]=\"className\"\r\n placement=\"top\"\r\n [id]=\"inputId\"\r\n [attr.value]=\"value\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [disabled]=\"disabled === true\"\r\n [readonly]=\"readonly === true\"\r\n [attr.cols]=\"cols?.toString() || undefined\"\r\n [attr.rows]=\"rows?.toString() || undefined\"\r\n [placeholder]=\"placeholder\"\r\n (keyup)=\"onKeyUp(textarea.value)\"\r\n (change)=\"onChangeValue(textarea.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n></textarea>\r\n} @if (currency && currency === 'EUR') {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u20AC</span>\r\n</div>\r\n} @if (isPercentage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>%</span>\r\n</div>\r\n} @if (isPermillage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n <span>\u2030</span>\r\n</div>\r\n} @if (isUrl() && !!value) {\r\n<div class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\r\n <a href=\"{{ value }}\" target=\"_blank\">\r\n <span class=\"icon-external\"></span>\r\n </a>\r\n</div>\r\n} @if (isColor()) {\r\n<div class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\r\n <div\r\n class=\"rounded-right full-space\"\r\n [ngStyle]=\"{ 'background-color': color }\"\r\n >\r\n <input\r\n #colorpicker\r\n class=\"minimal-space clickable invisible rounded-right full-space\"\r\n [id]=\"inputId + '$colorpicker'\"\r\n type=\"color\"\r\n [attr.value]=\"value\"\r\n [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n (change)=\"onColorPicked(colorpicker.value)\"\r\n (keypress)=\"onKeyPress($event)\"\r\n (blur)=\"onLostFocus()\"\r\n />\r\n </div>\r\n</div>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n @if (lastErrors.required) {\r\n <div>\r\n {{ userErrors[this.lang].required }}\r\n </div>\r\n } @if (lastErrors.email) {\r\n <div>{{ userErrors[this.lang].email }}</div>\r\n } @if (lastErrors.url) {\r\n <div>{{ userErrors[this.lang].url }}</div>\r\n } @if (lastErrors.min) {\r\n <div>\r\n {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n </div>\r\n } @if (lastErrors.max) {\r\n <div>\r\n {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\r\n </div>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{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(#fff 0deg 90deg,#d3d3d3 90deg 180deg,#fff 180deg 270deg,#d3d3d3 270deg 360deg)}\n"] }]
3588
3595
  }], propDecorators: { input: [{
3589
3596
  type: ViewChild,
3590
3597
  args: ['input', { static: false }]
@@ -3649,18 +3656,18 @@ var Placement;
3649
3656
  class TooltipComponent {
3650
3657
  context;
3651
3658
  constructor() { }
3652
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3653
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TooltipComponent, isStandalone: true, selector: "lux-tooltip", inputs: { context: "context" }, ngImport: i0, template: `
3659
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3660
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TooltipComponent, isStandalone: true, selector: "lux-tooltip", inputs: { context: "context" }, ngImport: i0, template: `
3654
3661
  <span class="lux-tooltip" style="transition: opacity 200ms">{{
3655
3662
  context.message
3656
3663
  }}</span>
3657
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
3664
+ `, isInline: true });
3658
3665
  }
3659
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipComponent, decorators: [{
3666
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipComponent, decorators: [{
3660
3667
  type: Component,
3661
3668
  args: [{
3662
3669
  selector: 'lux-tooltip',
3663
- imports: [CommonModule],
3670
+ imports: [],
3664
3671
  template: `
3665
3672
  <span class="lux-tooltip" style="transition: opacity 200ms">{{
3666
3673
  context.message
@@ -3800,10 +3807,10 @@ class TooltipService {
3800
3807
  domElem.style.left = `${left}px`;
3801
3808
  return domElem;
3802
3809
  }
3803
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
3804
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipService });
3810
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
3811
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipService });
3805
3812
  }
3806
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipService, decorators: [{
3813
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipService, decorators: [{
3807
3814
  type: Injectable
3808
3815
  }] });
3809
3816
 
@@ -3847,10 +3854,10 @@ class LuxTooltipDirective {
3847
3854
  remove(tooltipRef) {
3848
3855
  this.tooltipService.removeComponentFromBody(tooltipRef);
3849
3856
  }
3850
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
3851
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: LuxTooltipDirective, isStandalone: true, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, providers: [TooltipService], ngImport: i0 });
3857
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
3858
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: LuxTooltipDirective, isStandalone: true, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, providers: [TooltipService], ngImport: i0 });
3852
3859
  }
3853
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxTooltipDirective, decorators: [{
3860
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxTooltipDirective, decorators: [{
3854
3861
  type: Directive,
3855
3862
  args: [{
3856
3863
  selector: '[luxTooltip]',
@@ -3997,12 +4004,12 @@ class PaginationComponent {
3997
4004
  this.next = l.next;
3998
4005
  this.last = l.last;
3999
4006
  }
4000
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4001
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: PaginationComponent, isStandalone: true, selector: "lux-pagination", inputs: { lang: "lang", paginationInfo: "paginationInfo" }, outputs: { goToPage: "goToPage", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "@if (showPagination) {\r\n<div class=\"lux-pagination\">\r\n @if (!hidePrevious) {\r\n <a\r\n luxTooltip\r\n [content]=\"first\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onFirst()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left-end\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"previous\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onPrevious()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left\"\r\n ></a>\r\n } @if (displayPreviousEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @for (pageNum of pages; track pageNum) {\r\n <a\r\n placement=\"top\"\r\n delay=\"500\"\r\n [ngClass]=\"{\r\n disabled: pageNum === paginationInfo.page,\r\n enabled: pageNum !== paginationInfo.page\r\n }\"\r\n class=\"button-pagination\"\r\n (click)=\"onPage(pageNum)\"\r\n >{{ pageNum + 1 }}</a\r\n >\r\n } @if (displayNextEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @if (!lastPage) {\r\n <a\r\n luxTooltip\r\n [content]=\"next\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onNext()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"last\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onLast()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right-end\"\r\n ></a>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:#fff;align-items:center}.disabled{cursor:not-allowed;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-disabled-color, white);background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-enabled-color, #325c81);width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:min-content}.button-pagination{width:var(--lux-pagination-button-width, 1em);height:var(--lux-pagination-button-height, 1.2em);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,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.4em}.arrow-left{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em}.arrow-left-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: ["luxTooltip", "content", "placement"] }] });
4007
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4008
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PaginationComponent, isStandalone: true, selector: "lux-pagination", inputs: { lang: "lang", paginationInfo: "paginationInfo" }, outputs: { goToPage: "goToPage", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "@if (showPagination) {\r\n<div class=\"lux-pagination\">\r\n @if (!hidePrevious) {\r\n <a\r\n luxTooltip\r\n [content]=\"first\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onFirst()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left-end\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"previous\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onPrevious()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left\"\r\n ></a>\r\n } @if (displayPreviousEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @for (pageNum of pages; track pageNum) {\r\n <a\r\n placement=\"top\"\r\n delay=\"500\"\r\n [ngClass]=\"{\r\n disabled: pageNum === paginationInfo.page,\r\n enabled: pageNum !== paginationInfo.page\r\n }\"\r\n class=\"button-pagination\"\r\n (click)=\"onPage(pageNum)\"\r\n >{{ pageNum + 1 }}</a\r\n >\r\n } @if (displayNextEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @if (!lastPage) {\r\n <a\r\n luxTooltip\r\n [content]=\"next\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onNext()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"last\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onLast()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right-end\"\r\n ></a>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:#fff;align-items:center}.disabled{cursor:not-allowed;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-disabled-color, white);background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-enabled-color, #325c81);width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:min-content}.button-pagination{width:var(--lux-pagination-button-width, 1em);height:var(--lux-pagination-button-height, 1.2em);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,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.4em}.arrow-left{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em}.arrow-left-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width:300px)and (max-width:500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width:500px)and (max-width:850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width:900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: ["luxTooltip", "content", "placement"] }] });
4002
4009
  }
4003
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PaginationComponent, decorators: [{
4010
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginationComponent, decorators: [{
4004
4011
  type: Component,
4005
- args: [{ selector: 'lux-pagination', imports: [CommonModule, FormsModule, LuxTooltipDirective], template: "@if (showPagination) {\r\n<div class=\"lux-pagination\">\r\n @if (!hidePrevious) {\r\n <a\r\n luxTooltip\r\n [content]=\"first\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onFirst()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left-end\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"previous\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onPrevious()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left\"\r\n ></a>\r\n } @if (displayPreviousEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @for (pageNum of pages; track pageNum) {\r\n <a\r\n placement=\"top\"\r\n delay=\"500\"\r\n [ngClass]=\"{\r\n disabled: pageNum === paginationInfo.page,\r\n enabled: pageNum !== paginationInfo.page\r\n }\"\r\n class=\"button-pagination\"\r\n (click)=\"onPage(pageNum)\"\r\n >{{ pageNum + 1 }}</a\r\n >\r\n } @if (displayNextEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @if (!lastPage) {\r\n <a\r\n luxTooltip\r\n [content]=\"next\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onNext()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"last\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onLast()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right-end\"\r\n ></a>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:#fff;align-items:center}.disabled{cursor:not-allowed;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-disabled-color, white);background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-enabled-color, #325c81);width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:min-content}.button-pagination{width:var(--lux-pagination-button-width, 1em);height:var(--lux-pagination-button-height, 1.2em);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,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.4em}.arrow-left{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em}.arrow-left-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"] }]
4012
+ args: [{ selector: 'lux-pagination', imports: [CommonModule, FormsModule, LuxTooltipDirective], template: "@if (showPagination) {\r\n<div class=\"lux-pagination\">\r\n @if (!hidePrevious) {\r\n <a\r\n luxTooltip\r\n [content]=\"first\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onFirst()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left-end\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"previous\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onPrevious()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !hidePrevious\r\n }\"\r\n class=\"button-pagination icon arrow-left\"\r\n ></a>\r\n } @if (displayPreviousEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @for (pageNum of pages; track pageNum) {\r\n <a\r\n placement=\"top\"\r\n delay=\"500\"\r\n [ngClass]=\"{\r\n disabled: pageNum === paginationInfo.page,\r\n enabled: pageNum !== paginationInfo.page\r\n }\"\r\n class=\"button-pagination\"\r\n (click)=\"onPage(pageNum)\"\r\n >{{ pageNum + 1 }}</a\r\n >\r\n } @if (displayNextEllipsis) {\r\n <span class=\"ellipsis\">...</span>\r\n } @if (!lastPage) {\r\n <a\r\n luxTooltip\r\n [content]=\"next\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onNext()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right\"\r\n ></a>\r\n <a\r\n luxTooltip\r\n [content]=\"last\"\r\n placement=\"top\"\r\n delay=\"500\"\r\n (click)=\"onLast()\"\r\n [ngClass]=\"{\r\n enabledFirstLast: !lastPage\r\n }\"\r\n class=\"button-pagination icon arrow-right-end\"\r\n ></a>\r\n }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:#fff;align-items:center}.disabled{cursor:not-allowed;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-disabled-color, white);background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-enabled-color, #325c81);width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:min-content}.button-pagination{width:var(--lux-pagination-button-width, 1em);height:var(--lux-pagination-button-height, 1.2em);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,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.4em}.arrow-left{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A </g>%0A</svg>%0A');transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em}.arrow-left-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A <title>background</title>%0A <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A <title>Layer 1</title>%0A <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24 \"/>%0A <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24 \"/>%0A </g>%0A</svg>%0A');background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width:300px)and (max-width:500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width:500px)and (max-width:850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width:900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"] }]
4006
4013
  }], ctorParameters: () => [], propDecorators: { goToPage: [{
4007
4014
  type: Output
4008
4015
  }], pageSizeChange: [{
@@ -4091,8 +4098,8 @@ class RadiogroupComponent {
4091
4098
  }
4092
4099
  return item;
4093
4100
  }
4094
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4095
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RadiogroupComponent, isStandalone: true, selector: "lux-radiogroup", inputs: { name: "name", disabled: "disabled", readonly: "readonly", required: "required", items: "items", value: "value" }, outputs: { itemsChange: "itemsChange", valueChange: "valueChange" }, providers: [
4101
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4102
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RadiogroupComponent, isStandalone: true, selector: "lux-radiogroup", inputs: { name: "name", disabled: "disabled", readonly: "readonly", required: "required", items: "items", value: "value" }, outputs: { itemsChange: "itemsChange", valueChange: "valueChange" }, providers: [
4096
4103
  {
4097
4104
  provide: NG_VALUE_ACCESSOR,
4098
4105
  multi: true,
@@ -4103,11 +4110,11 @@ class RadiogroupComponent {
4103
4110
  multi: true,
4104
4111
  useExisting: forwardRef(() => RadiogroupComponent)
4105
4112
  }
4106
- ], ngImport: i0, template: "<div class=\"radiogroup\" [class.disabled]=\"disabled || readonly\">\r\n @for (item of items; track item.value; let first = $first; let last = $last) {\r\n <div\r\n [class.radio-start]=\"first\"\r\n [class.radio-end]=\"last\"\r\n class=\"radio-item\"\r\n [class.selected]=\"item.value === value\"\r\n (click)=\"setValue($event, item)\"\r\n >\r\n <input\r\n [id]=\"item.name\"\r\n type=\"radio\"\r\n [name]=\"name\"\r\n [attr.disabled]=\"disabled || null\"\r\n [attr.readonly]=\"readonly || null\"\r\n [value]=\"item.value\"\r\n />\r\n <label [for]=\"item.name\" class=\"unselectable\">{{ item.label }}</label>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:var(--lux-radiogroup-color, initial);font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:var(--lux-radiogroup-font-size, initial);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:var(--lux-radiogroup-selected-disabled-font-size, initial);color:var(--lux-radiogroup-selected-disabled-color, white);background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
4113
+ ], ngImport: i0, template: "<div class=\"radiogroup\" [class.disabled]=\"disabled || readonly\">\r\n @for (item of items; track item.value; let first = $first; let last = $last) {\r\n <div\r\n [class.radio-start]=\"first\"\r\n [class.radio-end]=\"last\"\r\n class=\"radio-item\"\r\n [class.selected]=\"item.value === value\"\r\n (click)=\"setValue($event, item)\"\r\n >\r\n <input\r\n [id]=\"item.name\"\r\n type=\"radio\"\r\n [name]=\"name\"\r\n [attr.disabled]=\"disabled || null\"\r\n [attr.readonly]=\"readonly || null\"\r\n [value]=\"item.value\"\r\n />\r\n <label [for]=\"item.name\" class=\"unselectable\">{{ item.label }}</label>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:var(--lux-radiogroup-color, initial);font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:var(--lux-radiogroup-font-size, initial);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:var(--lux-radiogroup-selected-disabled-font-size, initial);color:var(--lux-radiogroup-selected-disabled-color, white);background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n"] });
4107
4114
  }
4108
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadiogroupComponent, decorators: [{
4115
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadiogroupComponent, decorators: [{
4109
4116
  type: Component,
4110
- args: [{ selector: 'lux-radiogroup', imports: [CommonModule], providers: [
4117
+ args: [{ selector: 'lux-radiogroup', imports: [], providers: [
4111
4118
  {
4112
4119
  provide: NG_VALUE_ACCESSOR,
4113
4120
  multi: true,
@@ -4232,8 +4239,8 @@ class SelectComponent {
4232
4239
  this.error = this.validateItem(newValue);
4233
4240
  this.isValidNewEntry = !this.error;
4234
4241
  }
4235
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4236
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SelectComponent, isStandalone: true, selector: "lux-select", inputs: { id: "id", disabled: "disabled", required: "required", multiple: "multiple", value: "value", placeholder: "placeholder", unique: "unique", validateItem: "validateItem" }, outputs: { valueChange: "valueChange" }, providers: [
4242
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4243
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SelectComponent, isStandalone: true, selector: "lux-select", inputs: { id: "id", disabled: "disabled", required: "required", multiple: "multiple", value: "value", placeholder: "placeholder", unique: "unique", validateItem: "validateItem" }, outputs: { valueChange: "valueChange" }, providers: [
4237
4244
  {
4238
4245
  provide: NG_VALUE_ACCESSOR,
4239
4246
  multi: true,
@@ -4244,11 +4251,11 @@ class SelectComponent {
4244
4251
  multi: true,
4245
4252
  useExisting: forwardRef(() => SelectComponent)
4246
4253
  }
4247
- ], ngImport: i0, template: "<div class=\"lux-select\">\r\n <ul class=\"list\">\r\n @for (item of value; track i; let i = $index) {\r\n <li>\r\n <span>{{ item }}</span>\r\n @if (!disabled) {\r\n <button\r\n class=\"remove\"\r\n type=\"button\"\r\n (click)=\"remove(i)\"\r\n [attr.aria-label]=\"'Remove ' + item\"\r\n >\r\n Remove\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n @if (!disabled) {\r\n <div class=\"add-new-item\">\r\n <lux-input\r\n id=\"{{ id + 'addNew' }}\"\r\n type=\"string\"\r\n [placeholder]=\"placeholder\"\r\n [attr.aria-label]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"newEntry\"\r\n (keyPress)=\"onKeyPress($event)\"\r\n (valueChange)=\"onChangeNewEntry($event)\"\r\n >\r\n </lux-input>\r\n @if (canAdd) {\r\n <div>\r\n @if (isValidNewEntry) {\r\n <button type=\"button\" (click)=\"add(newEntry)\">Add</button>\r\n }\r\n </div>\r\n }\r\n <div class=\"error\">\r\n {{ error }}\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".lux-select{margin-bottom:.5em}.lux-select .list{margin:1em;padding-bottom:.2em;list-style-type:square}.lux-select .list span{margin-bottom:.3em}.remove{margin-left:2em;font-size:.65em;color:#b22222;background:transparent;border:2px solid #BBB}.add-new-item{display:inline-flex;margin-left:2.2em;height:1.6em}.error{margin:.5em 0;color:#b22222}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }] });
4254
+ ], ngImport: i0, template: "<div class=\"lux-select\">\r\n <ul class=\"list\">\r\n @for (item of value; track i; let i = $index) {\r\n <li>\r\n <span>{{ item }}</span>\r\n @if (!disabled) {\r\n <button\r\n class=\"remove\"\r\n type=\"button\"\r\n (click)=\"remove(i)\"\r\n [attr.aria-label]=\"'Remove ' + item\"\r\n >\r\n Remove\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n @if (!disabled) {\r\n <div class=\"add-new-item\">\r\n <lux-input\r\n id=\"{{ id + 'addNew' }}\"\r\n type=\"string\"\r\n [placeholder]=\"placeholder\"\r\n [attr.aria-label]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"newEntry\"\r\n (keyPress)=\"onKeyPress($event)\"\r\n (valueChange)=\"onChangeNewEntry($event)\"\r\n >\r\n </lux-input>\r\n @if (canAdd) {\r\n <div>\r\n @if (isValidNewEntry) {\r\n <button type=\"button\" (click)=\"add(newEntry)\">Add</button>\r\n }\r\n </div>\r\n }\r\n <div class=\"error\">\r\n {{ error }}\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".lux-select{margin-bottom:.5em}.lux-select .list{margin:1em;padding-bottom:.2em;list-style-type:square}.lux-select .list span{margin-bottom:.3em}.remove{margin-left:2em;font-size:.65em;color:#b22222;background:transparent;border:2px solid #BBB}.add-new-item{display:inline-flex;margin-left:2.2em;height:1.6em}.error{margin:.5em 0;color:#b22222}\n"], dependencies: [{ kind: "component", type: InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }] });
4248
4255
  }
4249
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, decorators: [{
4256
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectComponent, decorators: [{
4250
4257
  type: Component,
4251
- args: [{ selector: 'lux-select', imports: [CommonModule, InputComponent], providers: [
4258
+ args: [{ selector: 'lux-select', imports: [InputComponent], providers: [
4252
4259
  {
4253
4260
  provide: NG_VALUE_ACCESSOR,
4254
4261
  multi: true,
@@ -4331,10 +4338,10 @@ class VoiceRecognitionDirective {
4331
4338
  this.el.nativeElement.value = recognizedText;
4332
4339
  this.renderer.removeClass(this.mic, 'lux-recording');
4333
4340
  }
4334
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: VoiceRecognitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
4335
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: VoiceRecognitionDirective, isStandalone: true, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
4341
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VoiceRecognitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
4342
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: VoiceRecognitionDirective, isStandalone: true, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
4336
4343
  }
4337
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
4344
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
4338
4345
  type: Directive,
4339
4346
  args: [{
4340
4347
  selector: '[luxVoiceRecognition]'
@@ -4394,8 +4401,8 @@ const windowProvider = {
4394
4401
  const WINDOW_PROVIDERS = [browserWindowProvider, windowProvider];
4395
4402
 
4396
4403
  class LuxModule {
4397
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4398
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, imports: [FormsModule,
4404
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4405
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, imports: [FormsModule,
4399
4406
  FilterComponent,
4400
4407
  GeolocationComponent,
4401
4408
  InputComponent,
@@ -4429,7 +4436,7 @@ class LuxModule {
4429
4436
  PaginationComponent,
4430
4437
  RadiogroupComponent,
4431
4438
  VoiceRecognitionDirective] });
4432
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
4439
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
4433
4440
  FilterComponent,
4434
4441
  GeolocationComponent,
4435
4442
  InputComponent,
@@ -4437,19 +4444,14 @@ class LuxModule {
4437
4444
  AutocompleteComponent,
4438
4445
  DatetimeComponent,
4439
4446
  LuxBreadcrumbComponent,
4440
- LuxModalWindowComponent,
4441
- LuxModalBackdropComponent,
4442
- MapComponent,
4443
4447
  PaginationComponent,
4444
- RadiogroupComponent,
4445
4448
  HttpClientModule,
4446
4449
  ReactiveFormsModule,
4447
4450
  RouterModule,
4448
4451
  SelectComponent,
4449
- CommonModule,
4450
- TooltipComponent] });
4452
+ CommonModule] });
4451
4453
  }
4452
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, decorators: [{
4454
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, decorators: [{
4453
4455
  type: NgModule,
4454
4456
  args: [{
4455
4457
  declarations: [],