@metadev/lux 0.32.0 → 22.0.0

package/fesm2022/metadev-lux.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, forwardRef, Input, Output, ViewChild, Component, Injectable, HostBinding, ElementRef, HostListener, ApplicationRef, Injector, RendererFactory2, TemplateRef, ComponentFactoryResolver, Directive, Renderer2, InjectionToken, PLATFORM_ID, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, forwardRef, Input, Output, ViewChild, Component, Injectable, HostBinding, ElementRef, HostListener, ApplicationRef, EnvironmentInjector, Injector, RendererFactory2, TemplateRef, createComponent, Directive, Renderer2, InjectionToken, PLATFORM_ID, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
 import { debounceTime, first, map, filter, takeUntil, withLatestFrom, distinctUntilChanged, switchMap } from 'rxjs/operators';
 import * as i1$2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
-import { of, Subject, from, BehaviorSubject, fromEvent } from 'rxjs';
+import { of, Subject, from, shareReplay, BehaviorSubject, fromEvent } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
@@ -48,7 +48,7 @@ const isValidColor = (value) => {
 const isValidDate = (date) => exists(date) ? !isNaN(date.getTime()) : false;
 const normalizeDate = (value) => {
     if (typeof value === 'string' && value.length > 10) {
-        return value.substr(0, 10);
+        return value.substring(0, 10);
     }
     return value ? value.toString() : null;
 };
@@ -115,8 +115,8 @@ const roundToMultipleOf = (x, modulo) => {
     const approximation = Math.round(x / modulo) * modulo;
     const approximationString = String(approximation);
     // remove useless decimals
-    const uselessDecimalsInApproximation = numberOfDecimalDigits(approximationString) -
-        numberOfDecimalDigits(moduloString);
+    const uselessDecimalsInApproximation = (numberOfDecimalDigits(approximationString) ?? 1) -
+        (numberOfDecimalDigits(moduloString) ?? 0);
     const resultString = approximationString.slice(0, approximationString.length - uselessDecimalsInApproximation);
     return Number(resultString);
 };
@@ -145,7 +145,7 @@ class AutocompleteComponent {
     touched = false;
     completionList = [];
     showCompletion = false;
-    focusItem;
+    focusItem = null;
     valueChange = new EventEmitter();
     dataSourceChange = new EventEmitter();
     inputId;
@@ -294,9 +294,7 @@ class AutocompleteComponent {
             // For custom containers, calculate relative position
             const containerRect = this.appendToContainer.getBoundingClientRect();
             top =
-                inputRect.bottom -
-                    containerRect.top +
-                    this.appendToContainer.scrollTop;
+                inputRect.bottom - containerRect.top + this.appendToContainer.scrollTop;
             left =
                 inputRect.left - containerRect.left + this.appendToContainer.scrollLeft;
         }
@@ -452,7 +450,7 @@ class AutocompleteComponent {
             if (this.appendTo) {
                 this.updateDropdownPosition();
             }
-            this.showCompletionList(label);
+            this.showCompletionList(label ?? '');
         }
         else {
             this.showCompletion = false;
@@ -464,7 +462,7 @@ class AutocompleteComponent {
         this.cd.markForCheck();
     }
     get selectedOption() {
-        const index = this.completionList.findIndex((i) => i.key === this.focusItem.key);
+        const index = this.completionList.findIndex((i) => i.key === this.focusItem?.key);
         if (index === -1 || !this.focusItem) {
             return null;
         }
@@ -524,7 +522,8 @@ class AutocompleteComponent {
             this.computeCompletionList(text).subscribe({
                 next: (cl) => {
                     this.completionList = cl;
-                    this.focusItem = selectElement(this.completionList, text);
+                    const selected = selectElement(this.completionList, text);
+                    this.focusItem = selected;
                     this.showCompletion = true;
                     this.spinnerVisibility(useSpinner, false);
                 },
@@ -565,8 +564,8 @@ class AutocompleteComponent {
             return of([]);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -577,9 +576,9 @@ class AutocompleteComponent {
                 multi: true,
                 useExisting: forwardRef(() => AutocompleteComponent)
             }
-        ], 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"] }] });
+        ], 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-autocomplete', imports: [FormsModule], providers: [
                         {
@@ -871,10 +870,11 @@ class AutocompleteListComponent {
         this.markAsTouched();
     }
     getDeleteMessage(label) {
-        return (this.deleteLabelTemplate ?? this.literals[this.lang].deleteLabelTemplate).replace('<<label>>', label);
+        const i18n = this.literals[this.lang];
+        return (this.deleteLabelTemplate ?? i18n.deleteLabelTemplate).replace('<<label>>', label);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -885,9 +885,9 @@ class AutocompleteListComponent {
                 multi: true,
                 useExisting: forwardRef(() => AutocompleteListComponent)
             }
-        ], 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"] }] });
+        ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutocompleteListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AutocompleteListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-autocomplete-list', imports: [AutocompleteComponent], providers: [
                         {
@@ -900,7 +900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => AutocompleteListComponent)
                         }
-                    ], 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"] }]
+                    ], 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"] }]
         }], propDecorators: { auto: [{
                 type: ViewChild,
                 args: ['auto']
@@ -935,7 +935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class LuxBreadcrumbComponent {
     route = inject(Router);
     activedRoute = inject(ActivatedRoute);
-    breadcrumbs;
+    breadcrumbs = [];
     subs = [];
     imagePath = '../assets/img/arrow-forward.svg';
     ngOnInit() {
@@ -974,7 +974,7 @@ class LuxBreadcrumbComponent {
         const id = activedRouteSnapshot.params.id;
         return id
             ? `${activedRouteSnapshot.url[0]}/${id}`
-            : activedRouteSnapshot.routeConfig.path || '';
+            : activedRouteSnapshot.routeConfig?.path || '';
     }
     getLabel(activedRouteSnapshot) {
         const routeConfig = activedRouteSnapshot.routeConfig;
@@ -992,12 +992,12 @@ class LuxBreadcrumbComponent {
         }
         return activedRouteSnapshot.params.id || routeConfig.path;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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", "browserUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }] });
 
 const KEY_SPACE = ' ';
@@ -1019,7 +1019,7 @@ class CheckboxComponent {
     get lang() {
         return this._lang;
     }
-    internalValue;
+    internalValue = false;
     get value() {
         return this.internalValue;
     }
@@ -1034,12 +1034,13 @@ class CheckboxComponent {
         if (!initialAndEmpty) {
             this.valueChange.emit(v);
         }
+        this.cdr.markForCheck();
     }
     get tabindexValue() {
-        return this.disabled ? null : '0';
+        return this.disabled ? undefined : '0';
     }
-    label = null;
-    name = null;
+    label = undefined;
+    name = undefined;
     _disabled = false;
     get disabled() {
         return this._disabled;
@@ -1050,6 +1051,7 @@ class CheckboxComponent {
         }
         this._disabled = v;
         this.syncModel();
+        this.cdr.markForCheck();
     }
     inputId;
     literals = {
@@ -1064,7 +1066,7 @@ class CheckboxComponent {
     };
     touched = false;
     valueChange = new EventEmitter();
-    constructor() { }
+    cdr = inject(ChangeDetectorRef);
     // ControlValueAccessor Interface
     onChange = (value) => { };
     onTouched = () => { };
@@ -1093,7 +1095,9 @@ class CheckboxComponent {
             : `${this.name || 'checkbox'}$${CheckboxComponent.idCounter++}`;
     }
     ngAfterViewInit() {
-        this.syncModel();
+        setTimeout(() => {
+            this.syncModel();
+        });
     }
     clicked() {
         if (!this.disabled) {
@@ -1113,8 +1117,8 @@ class CheckboxComponent {
             this.ck.nativeElement.checked = this.internalValue;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CheckboxComponent, isStandalone: true, selector: "lux-checkbox", inputs: { lang: "lang", value: "value", label: "label", name: "name", disabled: "disabled", inputId: "inputId" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1122,7 +1126,7 @@ class CheckboxComponent {
             }
         ], 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-checkbox', imports: [], providers: [
                         {
@@ -1131,7 +1135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                             useExisting: forwardRef(() => CheckboxComponent)
                         }
                     ], 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"] }]
-        }], ctorParameters: () => [], propDecorators: { ck: [{
+        }], propDecorators: { ck: [{
                 type: ViewChild,
                 args: ['ck', { static: false }]
             }], lang: [{
@@ -1157,9 +1161,9 @@ class DatetimeComponent {
     touched = false;
     dirty = false;
     lastErrors = null;
-    _disabled;
-    _required;
-    _value;
+    _disabled = undefined;
+    _required = undefined;
+    _value = undefined;
     dateValue = undefined;
     timeValue = undefined;
     userErrors = {
@@ -1191,24 +1195,24 @@ class DatetimeComponent {
         this._disabled = v;
     }
     get disabled() {
-        return this._disabled;
+        return !!this._disabled;
     }
     set required(v) {
         this._required = v;
     }
     get required() {
-        return this._required;
+        return !!this._required;
     }
     set value(v) {
         if (v === this._value) {
             return; // prevent events when there is no changes
         }
         const initialAndEmpty = isInitialAndEmpty(this._value, v);
-        const datetime = new Date(v);
+        const datetime = new Date(v ?? '');
         if (!v) {
-            this._value = null;
-            this.setDateInControl(null);
-            this.setTimeInControl(null);
+            this._value = undefined;
+            this.setDateInControl(undefined);
+            this.setTimeInControl(undefined);
         }
         else if (!isValidDate(datetime)) {
             this._value = v;
@@ -1274,9 +1278,9 @@ class DatetimeComponent {
         }
     }
     clear() {
-        this.setDateInControl(null);
-        this.setTimeInControl(null);
-        this.value = null;
+        this.setDateInControl(undefined);
+        this.setTimeInControl(undefined);
+        this.value = undefined;
     }
     isClearable() {
         return hasValue(this.value);
@@ -1352,7 +1356,7 @@ class DatetimeComponent {
             return;
         }
         if (!newDate || !newTime) {
-            this.value = null;
+            this.value = undefined;
         }
         else {
             const newValue = `${newDate}T${newTime}`;
@@ -1390,8 +1394,8 @@ class DatetimeComponent {
         this.min = this.min || '1900-01-01';
         this.max = this.max || '2100-01-01';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1402,9 +1406,9 @@ class DatetimeComponent {
                 multi: true,
                 useExisting: forwardRef(() => DatetimeComponent)
             }
-        ], 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"] }] });
+        ], 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-datetime', imports: [FormsModule, CommonModule], providers: [
                         {
@@ -1561,7 +1565,7 @@ class FilterComponent {
     freeSubscriptions() {
         if (this.sub) {
             this.sub.unsubscribe();
-            this.sub = null;
+            this.sub = undefined;
         }
     }
     searchNow(value) {
@@ -1570,18 +1574,18 @@ class FilterComponent {
     addEvent() {
         this.subject.next(this.searchValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => FilterComponent)
             }
-        ], 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 }] });
+        ], 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 }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lux-filter', imports: [CommonModule, FormsModule], providers: [
+            args: [{ selector: 'lux-filter', imports: [FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -1607,27 +1611,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
-let openLayersIsInstalled = false;
+let loading$ = null;
 class OpenLayerLoaderService {
     load() {
         if (window.ol) {
             return of(true);
         }
-        const openLayerJsUrl = 'https://openlayers.org/en/v5.3.0/build/ol.js';
-        const openLayerCssUrl = 'https://openlayers.org/en/v5.3.0/css/ol.css';
-        if (!openLayersIsInstalled) {
-            openLayersIsInstalled = true; // only try to install it once
+        if (!loading$) {
+            const openLayerJsUrl = 'https://openlayers.org/en/v5.3.0/build/ol.js';
+            const openLayerCssUrl = 'https://openlayers.org/en/v5.3.0/css/ol.css';
             loadCss(openLayerCssUrl, () => { });
-            return from(new Promise((resolve, _) => {
+            loading$ = from(new Promise((resolve, _) => {
                 loadScript(openLayerJsUrl, () => resolve(true));
-            }));
+            })).pipe(shareReplay(1));
         }
-        return of(true);
+        return loading$;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1674,7 +1677,7 @@ class MapComponent {
     mapId;
     _zoom;
     set zoom(zoom) {
-        if (!isNaN(zoom)) {
+        if (zoom != null && !isNaN(zoom)) {
             this._zoom = zoom;
             if (this._map) {
                 this._map.getView().setZoom(zoom);
@@ -1726,7 +1729,7 @@ class MapComponent {
         this.markerCoordinates = this.markerCoordinates;
     }
     get readonly() {
-        return this._readonly;
+        return !!this._readonly;
     }
     _marker;
     _markerInteraction;
@@ -1764,7 +1767,7 @@ class MapComponent {
     get markerPoint() {
         return {
             type: 'Point',
-            coordinates: this.markerCoordinates
+            coordinates: this.markerCoordinates ?? [0, 0]
         };
     }
     valueChange = new EventEmitter();
@@ -1876,7 +1879,7 @@ class MapComponent {
                 ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'))
             });
             this._markerSource.addFeature(this._marker);
-            this._markerCoordinates = this.getMarkerCoordinates();
+            this._markerCoordinates = this.getMarkerCoordinates() ?? undefined;
             if (!this.readonly) {
                 const dragInteraction = new ol.interaction.Modify({
                     features: new ol.Collection([this._marker]),
@@ -1915,12 +1918,12 @@ class MapComponent {
             this._map.updateSize();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { mapId: [{
                 type: Input
             }], zoom: [{
@@ -1941,13 +1944,13 @@ class LuxModalBackdropComponent {
     backdropClass;
     class = 'modal-backdrop fade show';
     style = 'z-index: 1050';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: LuxModalBackdropComponent, isStandalone: true, selector: "lux-modal-backdrop", inputs: { backdropClass: "backdropClass" }, host: { properties: { "class": "this.class", "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [CommonModule],
+                    imports: [],
                     selector: 'lux-modal-backdrop',
                     template: ''
                 }]
@@ -1963,10 +1966,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 class LuxModalConfig {
     backdrop = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModalConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1980,8 +1983,8 @@ class ModalRef {
     _contentRef;
     _backdropCmptRef;
     _beforeDismiss;
-    _resolve;
-    _reject;
+    _resolve = undefined;
+    _reject = undefined;
     /**
      * The instance of a component used for the modal content.
      *
@@ -2066,9 +2069,9 @@ class ModalRef {
         if (this._contentRef && this._contentRef.viewRef) {
             this._contentRef.viewRef.destroy();
         }
-        this._windowCmptRef = null;
-        this._backdropCmptRef = null;
-        this._contentRef = null;
+        this._windowCmptRef = undefined;
+        this._backdropCmptRef = undefined;
+        this._contentRef = undefined;
     }
 }
 
@@ -2180,7 +2183,8 @@ class LuxModalWindowComponent {
     get hostAriaDescribedBy() {
         return this.ariaDescribedBy;
     }
-    backdropClick(btn) {
+    backdropClick(event) {
+        const btn = event.target;
         if (this.backdrop === true && this._elRef.nativeElement === btn) {
             this.dismiss(ModalDismissReasons.BackdropClick);
         }
@@ -2207,7 +2211,9 @@ class LuxModalWindowComponent {
         const body = this._document.body;
         const elWithFocus = this._elWithFocus;
         let elementToFocus;
-        if (elWithFocus && elWithFocus[FOCUS] && body.contains(elWithFocus)) {
+        if (elWithFocus &&
+            elWithFocus[FOCUS] &&
+            body.contains(elWithFocus)) {
             elementToFocus = elWithFocus;
         }
         else {
@@ -2216,18 +2222,18 @@ class LuxModalWindowComponent {
         elementToFocus.focus();
         this._elWithFocus = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModalWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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: `
     <div class="modal-dialog" role="document">
       <div class="modal-content"><ng-content></ng-content></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lux-modal-window',
-                    imports: [CommonModule],
+                    imports: [],
                     template: `
     <div class="modal-dialog" role="document">
       <div class="modal-content"><ng-content></ng-content></div>
@@ -2266,7 +2272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 args: ['attr.aria-describedby']
             }], backdropClick: [{
                 type: HostListener,
-                args: ['click', ['$event.target']]
+                args: ['click', ['$event']]
             }], escKey: [{
                 type: HostListener,
                 args: ['keyup.esc', ['$event']]
@@ -2275,6 +2281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class ModalStack {
     _applicationRef = inject(ApplicationRef);
     _document = inject(DOCUMENT);
+    _environmentInjector = inject(EnvironmentInjector);
     _injector = inject(Injector);
     _rendererFactory = inject(RendererFactory2);
     modalConfig = inject(LuxModalConfig);
@@ -2302,7 +2309,7 @@ class ModalStack {
             }
         });
     }
-    open(moduleCFR, content, options) {
+    open(content, options) {
         const config = Object.assign({}, this.modalConfig, options);
         const containerEl = this._document.body;
         const renderer = this._rendererFactory.createRenderer(null, null);
@@ -2313,9 +2320,9 @@ class ModalStack {
             }
         };
         const activeModal = new ActiveModal();
-        const contentRef = this.getContentRef(moduleCFR, content, activeModal);
-        const backdropCmptRef = config.backdrop ? this._attachBackdrop(moduleCFR, containerEl) : null;
-        const windowCmptRef = this._attachWindowComponent(moduleCFR, containerEl, contentRef);
+        const contentRef = this.getContentRef(content, activeModal);
+        const backdropCmptRef = config.backdrop ? this._attachBackdrop(containerEl) : null;
+        const windowCmptRef = this._attachWindowComponent(containerEl, contentRef);
         const modalRef = new ModalRef(windowCmptRef, contentRef, backdropCmptRef);
         this._registerModalRef(modalRef);
         this._registerWindowCmpt(windowCmptRef);
@@ -2362,10 +2369,11 @@ class ModalStack {
         });
         this._ariaHiddenValues.clear();
     }
-    getContentRef(moduleCFR, content, activeModal) {
+    getContentRef(content, activeModal) {
         if (content instanceof TemplateRef) {
             return this.createFromTemplateRef(content, activeModal);
         }
+        return undefined;
     }
     createFromTemplateRef(content, activeModal) {
         const context = {
@@ -2381,16 +2389,21 @@ class ModalStack {
         this._applicationRef.attachView(viewRef);
         return new ContentRef([viewRef.rootNodes], viewRef);
     }
-    _attachBackdrop(moduleCFR, containerEl) {
-        const backdropFactory = moduleCFR.resolveComponentFactory(LuxModalBackdropComponent);
-        const backdropCmptRef = backdropFactory.create(this._injector);
+    _attachBackdrop(containerEl) {
+        const backdropCmptRef = createComponent(LuxModalBackdropComponent, {
+            environmentInjector: this._environmentInjector,
+            elementInjector: this._injector
+        });
         this._applicationRef.attachView(backdropCmptRef.hostView);
         containerEl.appendChild(backdropCmptRef.location.nativeElement);
         return backdropCmptRef;
     }
-    _attachWindowComponent(moduleCFR, containerEl, contentRef) {
-        const windowFactory = moduleCFR.resolveComponentFactory(LuxModalWindowComponent);
-        const windowCmptRef = windowFactory.create(this._injector, contentRef.nodes);
+    _attachWindowComponent(containerEl, contentRef) {
+        const windowCmptRef = createComponent(LuxModalWindowComponent, {
+            environmentInjector: this._environmentInjector,
+            elementInjector: this._injector,
+            projectableNodes: contentRef.nodes
+        });
         this._applicationRef.attachView(windowCmptRef.hostView);
         containerEl.appendChild(windowCmptRef.location.nativeElement);
         return windowCmptRef;
@@ -2421,17 +2434,17 @@ class ModalStack {
         if (parent && element !== this._document.body) {
             Array.from(parent.children).forEach((sibling) => {
                 if (sibling !== element && sibling.nodeName !== 'SCRIPT') {
-                    this._ariaHiddenValues.set(sibling, sibling.getAttribute('aria-hidden'));
+                    this._ariaHiddenValues.set(sibling, sibling.getAttribute('aria-hidden') ?? '');
                     sibling.setAttribute('aria-hidden', 'true');
                 }
             });
             this._setAriaHidden(parent);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalStack, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalStack, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalStack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalStack, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2441,17 +2454,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  */
 class ModalService {
     modalStack = inject(ModalStack);
-    moduleCFR = inject(ComponentFactoryResolver);
     /**Open a modal component
      * @param content TemplateRef
      */
     open(content, options = {}) {
-        return this.modalStack.open(this.moduleCFR, content, options);
+        return this.modalStack.open(content, options);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2494,9 +2506,7 @@ class GeolocationService {
         return this.currentQuery$;
     }
     getLabels(instance, keys) {
-        const searchResults = instance.lastQueriesWithResults
-            .get(instance.getLatestQuery())
-            .filter((searchResult) => samePosition(searchResult, keys));
+        const searchResults = (instance.lastQueriesWithResults.get(instance.getLatestQuery() ?? '') ?? []).filter((searchResult) => samePosition(searchResult, keys));
         return of(searchResults.map((searchResult) => {
             const key = {
                 type: 'Point',
@@ -2544,10 +2554,10 @@ class GeolocationService {
             ? this.lastQueriesLru[this.lastQueriesLru.length - 1]
             : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GeolocationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GeolocationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GeolocationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2582,8 +2592,8 @@ class GeolocationComponent {
     touched = false;
     dirty = false;
     lastErrors = null;
-    _disabled;
-    _required;
+    _disabled = false;
+    _required = false;
     _value;
     latitudeValue = undefined;
     longitudeValue = undefined;
@@ -2677,9 +2687,9 @@ class GeolocationComponent {
             this.setLongitudeInControl(v.coordinates[0]);
         }
         else if (!v) {
-            this._value = null;
-            this.setLatitudeInControl(null);
-            this.setLongitudeInControl(null);
+            this._value = undefined;
+            this.setLatitudeInControl(undefined);
+            this.setLongitudeInControl(undefined);
         }
         else {
             this._value = v;
@@ -2727,9 +2737,9 @@ class GeolocationComponent {
         this.longitudeValue = longitude;
     }
     clear() {
-        this.setLatitudeInControl(null);
-        this.setLongitudeInControl(null);
-        this.value = null;
+        this.setLatitudeInControl(undefined);
+        this.setLongitudeInControl(undefined);
+        this.value = undefined;
     }
     isClearable() {
         return (isValidNumber(this.latitudeValue) || isValidNumber(this.longitudeValue));
@@ -2776,7 +2786,8 @@ class GeolocationComponent {
                 reason: `Latitude is higher than maximum value: ${this.maxLatitude}.`
             };
         }
-        if (exists(this.minLongitude) && this.longitudeValue < this.minLongitude) {
+        if (exists(this.minLongitude) &&
+            this.longitudeValue < this.minLongitude) {
             result = result || {};
             result.minLongitude = {
                 value,
@@ -2784,7 +2795,8 @@ class GeolocationComponent {
                 reason: `Longitude is lower than minimum value: ${this.minLongitude}.`
             };
         }
-        if (exists(this.maxLongitude) && this.longitudeValue > this.maxLongitude) {
+        if (exists(this.maxLongitude) &&
+            this.longitudeValue > this.maxLongitude) {
             result = result || {};
             result.maxLongitude = {
                 value,
@@ -2803,13 +2815,15 @@ class GeolocationComponent {
         this.setPatterns();
     }
     roundToStepAndUpdateLatitudeAndLongitude(newLatitudeAndLongitude) {
-        const newLatitude = roundToMultipleOf(newLatitudeAndLongitude[1], this.step);
-        const newLongitude = roundToMultipleOf(newLatitudeAndLongitude[0], this.step);
+        const newLatitude = roundToMultipleOf(newLatitudeAndLongitude[1], this.step ?? 1 // review value 1??
+        );
+        const newLongitude = roundToMultipleOf(newLatitudeAndLongitude[0], this.step ?? 1 // review value 1??
+        );
         if (this.disabled || this.readonly) {
             return;
         }
         if (!exists(newLatitudeAndLongitude)) {
-            this.value = null;
+            this.value = undefined;
         }
         this.value = {
             type: 'Point',
@@ -2824,16 +2838,16 @@ class GeolocationComponent {
             return;
         }
         const newLatitudeValue = isValidNumber(newLatitude) ? +newLatitude : null;
-        if (!(exists(this.value) && exists(this.value.coordinates[0])) &&
+        if (!(exists(this.value) && exists(this.value?.coordinates[0])) &&
             !exists(newLatitudeValue)) {
-            this.value = null;
+            this.value = undefined;
         }
         else {
             this.value = {
                 type: 'Point',
                 coordinates: [
-                    this.value ? this.value.coordinates[0] : undefined,
-                    newLatitudeValue
+                    this.value ? this.value?.coordinates[0] : 0,
+                    newLatitudeValue ?? 0
                 ]
             };
         }
@@ -2848,14 +2862,14 @@ class GeolocationComponent {
             : null;
         if (!exists(newLongitudeValue) &&
             !(exists(this.value) && exists(this._value.coordinates[1]))) {
-            this.value = null;
+            this.value = undefined;
         }
         else {
             this.value = {
                 type: 'Point',
                 coordinates: [
-                    newLongitudeValue,
-                    this.value ? this.value.coordinates[1] : undefined
+                    newLongitudeValue ?? 0,
+                    this.value ? this.value.coordinates[1] : 0
                 ]
             };
         }
@@ -2885,9 +2899,10 @@ class GeolocationComponent {
         map.center = map.markerPoint;
     }
     get mapTitle() {
+        const i18n = this.i18n[this.lang];
         return this._disabled || !!this.readonly
-            ? this.i18n[this.lang].location
-            : this.i18n[this.lang].selectLocation;
+            ? i18n.location
+            : i18n.selectLocation;
     }
     get self() {
         return this;
@@ -2906,8 +2921,8 @@ class GeolocationComponent {
         this.minLongitude = this.minLongitude || -180;
         this.maxLongitude = this.maxLongitude || +180;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GeolocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -2918,9 +2933,9 @@ class GeolocationComponent {
                 multi: true,
                 useExisting: forwardRef(() => GeolocationComponent)
             }
-        ], 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"] }] });
+        ], 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  }\r\n  @if (isValidNumber(latitudeValue) && latitudeValue! < 0) {\r\n    <span>{{ i18n[lang].cardinalPoints.south }}</span>\r\n  }\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  }\r\n  @if (isValidNumber(longitudeValue) && longitudeValue! < 0) {\r\n    <span>{{ i18n[lang].cardinalPoints.west }}</span>\r\n  }\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}\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    }\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    }\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    }\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    }\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    }\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    }\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeolocationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GeolocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-geolocation', imports: [
                         CommonModule,
@@ -2939,7 +2954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => GeolocationComponent)
                         }
-                    ], 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"] }]
+                    ], 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  }\r\n  @if (isValidNumber(latitudeValue) && latitudeValue! < 0) {\r\n    <span>{{ i18n[lang].cardinalPoints.south }}</span>\r\n  }\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  }\r\n  @if (isValidNumber(longitudeValue) && longitudeValue! < 0) {\r\n    <span>{{ i18n[lang].cardinalPoints.west }}</span>\r\n  }\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}\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    }\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    }\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    }\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    }\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    }\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    }\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"] }]
         }], propDecorators: { latitude: [{
                 type: ViewChild,
                 args: ['latitude', { static: true }]
@@ -3024,7 +3039,7 @@ class RegexpService {
     }
     sliceRegexByOr(regularExpressionString) {
         const result = [];
-        let slicedRegex = '';
+        let slicedRegex;
         let lastSliceIndex = 0;
         let roundBracketCount = 0;
         let squareBracketCount = 0;
@@ -3169,16 +3184,17 @@ class RegexpService {
         // TODO: RETURN AN EMPTY STRING
         return 'NO DEBERÍA SER POSIBLE';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RegexpService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RegexpService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RegexpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RegexpService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 class InputComponent {
     regexpService = inject(RegexpService);
+    cdr = inject(ChangeDetectorRef);
     static idCounter = 0;
     input;
     textarea;
@@ -3186,7 +3202,7 @@ class InputComponent {
     touched = false;
     dirty = false;
     lastErrors = null;
-    _disabled;
+    _disabled = false;
     _value = '';
     _type;
     _placeholder;
@@ -3232,6 +3248,7 @@ class InputComponent {
     set disabled(v) {
         v = typeof v === 'string' ? true : v;
         this._disabled = v;
+        this.cdr.markForCheck();
     }
     get disabled() {
         return this._disabled;
@@ -3270,7 +3287,7 @@ class InputComponent {
         this._required = v;
     }
     get required() {
-        return this._required;
+        return !!this._required;
     }
     set type(v) {
         this._type = v.toLowerCase();
@@ -3557,8 +3574,8 @@ class InputComponent {
         this.max = this.max || 1000.0;
         this.placeholder = '0.00';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3569,9 +3586,9 @@ class InputComponent {
                 multi: true,
                 useExisting: forwardRef(() => InputComponent)
             }
-        ], 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 }] });
+        ], 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}\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}\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}\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}\r\n@if (isPercentage()) {\r\n  <div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n    <span>%</span>\r\n  </div>\r\n}\r\n@if (isPermillage()) {\r\n  <div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n    <span>\u2030</span>\r\n  </div>\r\n}\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}\r\n@if (isColor()) {\r\n  <div\r\n    class=\"postfix rounded-right bordered transparency\"\r\n    [ngClass]=\"className\"\r\n  >\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}\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    }\r\n    @if (lastErrors.email) {\r\n      <div>{{ userErrors[this.lang].email }}</div>\r\n    }\r\n    @if (lastErrors.url) {\r\n      <div>{{ userErrors[this.lang].url }}</div>\r\n    }\r\n    @if (lastErrors.min) {\r\n      <div>\r\n        {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n      </div>\r\n    }\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 }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-input', imports: [CommonModule, FormsModule], providers: [
                         {
@@ -3584,7 +3601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => InputComponent)
                         }
-                    ], 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"] }]
+                    ], template: "@if (currency && currency === 'USD') {\r\n  <div class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\r\n    <span>$</span>\r\n  </div>\r\n}\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}\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}\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}\r\n@if (isPercentage()) {\r\n  <div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n    <span>%</span>\r\n  </div>\r\n}\r\n@if (isPermillage()) {\r\n  <div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n    <span>\u2030</span>\r\n  </div>\r\n}\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}\r\n@if (isColor()) {\r\n  <div\r\n    class=\"postfix rounded-right bordered transparency\"\r\n    [ngClass]=\"className\"\r\n  >\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}\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    }\r\n    @if (lastErrors.email) {\r\n      <div>{{ userErrors[this.lang].email }}</div>\r\n    }\r\n    @if (lastErrors.url) {\r\n      <div>{{ userErrors[this.lang].url }}</div>\r\n    }\r\n    @if (lastErrors.min) {\r\n      <div>\r\n        {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n      </div>\r\n    }\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"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -3649,21 +3666,21 @@ var Placement;
 class TooltipComponent {
     context;
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: TooltipComponent, isStandalone: true, selector: "lux-tooltip", inputs: { context: "context" }, ngImport: i0, template: `
     <span class="lux-tooltip" style="transition: opacity 200ms">{{
-      context.message
+      context?.message
     }}</span>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lux-tooltip',
-                    imports: [CommonModule],
+                    imports: [],
                     template: `
     <span class="lux-tooltip" style="transition: opacity 200ms">{{
-      context.message
+      context?.message
     }}</span>
   `
                 }]
@@ -3682,7 +3699,7 @@ class TooltipContentRef {
 
 class TooltipService {
     _injector = inject(Injector);
-    _crf = inject(ComponentFactoryResolver);
+    _environmentInjector = inject(EnvironmentInjector);
     _applicationRef = inject(ApplicationRef);
     appendComponentToBody(content, elHost, placement) {
         const tooltipContentRef = this.getTooltipContentRef(content);
@@ -3694,13 +3711,15 @@ class TooltipService {
                 tooltipContentRef.componentRef.changeDetectorRef.detectChanges();
             }
             domElem = this.setStyle(domElem, placement);
-            domElem = this.setPosition(domElem, elHost, placement);
+            this.setPosition(domElem, elHost, placement);
             return tooltipContentRef;
         }
         return null;
     }
     removeComponentFromBody(tooltipContentRef) {
-        this._applicationRef.detachView(tooltipContentRef.viewRef);
+        if (tooltipContentRef.viewRef) {
+            this._applicationRef.detachView(tooltipContentRef.viewRef);
+        }
         if (tooltipContentRef.componentRef) {
             tooltipContentRef.componentRef.destroy();
         }
@@ -3708,6 +3727,7 @@ class TooltipService {
     getTooltipContentRef(content) {
         if (!content) {
             // nothing to show
+            return null;
         }
         else if (content instanceof TemplateRef) {
             return this.createFromTemplateRef(content);
@@ -3725,9 +3745,10 @@ class TooltipService {
         return new TooltipContentRef(viewRef);
     }
     createFromComponent(component, context) {
-        const componentRef = this._crf
-            .resolveComponentFactory(component)
-            .create(this._injector);
+        const componentRef = createComponent(component, {
+            environmentInjector: this._environmentInjector,
+            elementInjector: this._injector
+        });
         if (context) {
             componentRef.instance.context = context;
         }
@@ -3772,8 +3793,8 @@ class TooltipService {
             document.documentElement.scrollTop ||
             document.body.scrollTop ||
             0;
-        let top = 0;
-        let left = 0;
+        let top;
+        let left;
         const offset = 10;
         switch (placement) {
             case Placement.Bottom:
@@ -3800,10 +3821,10 @@ class TooltipService {
         domElem.style.left = `${left}px`;
         return domElem;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TooltipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipService, decorators: [{
             type: Injectable
         }] });
 
@@ -3847,10 +3868,16 @@ class LuxTooltipDirective {
     remove(tooltipRef) {
         this.tooltipService.removeComponentFromBody(tooltipRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    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 });
+    ngOnDestroy() {
+        if (this.tooltipRef) {
+            this.remove(this.tooltipRef);
+            this.tooltipRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luxTooltip]',
@@ -3904,7 +3931,7 @@ class PaginationComponent {
     pageSizeChange = new EventEmitter();
     /** Current page, total items and items to show per page */
     paginationInfoValue;
-    _lang;
+    _lang = 'en';
     set lang(l) {
         if (l === this._lang) {
             return;
@@ -3997,12 +4024,12 @@ class PaginationComponent {
         this.next = l.next;
         this.last = l.last;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { goToPage: [{
                 type: Output
             }], pageSizeChange: [{
@@ -4091,8 +4118,8 @@ class RadiogroupComponent {
         }
         return item;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -4103,11 +4130,11 @@ class RadiogroupComponent {
                 multi: true,
                 useExisting: forwardRef(() => RadiogroupComponent)
             }
-        ], 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 }] });
+        ], 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadiogroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RadiogroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lux-radiogroup', imports: [CommonModule], providers: [
+            args: [{ selector: 'lux-radiogroup', imports: [], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -4232,8 +4259,8 @@ class SelectComponent {
         this.error = this.validateItem(newValue);
         this.isValidNewEntry = !this.error;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -4244,11 +4271,11 @@ class SelectComponent {
                 multi: true,
                 useExisting: forwardRef(() => SelectComponent)
             }
-        ], 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"] }] });
+        ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lux-select', imports: [CommonModule, InputComponent], providers: [
+            args: [{ selector: 'lux-select', imports: [InputComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -4283,7 +4310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class VoiceRecognitionDirective {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
-    language;
+    language = 'en-US';
     // See API at: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
     recognition;
     isRecognizing = false;
@@ -4331,10 +4358,10 @@ class VoiceRecognitionDirective {
         this.el.nativeElement.value = recognizedText;
         this.renderer.removeClass(this.mic, 'lux-recording');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: VoiceRecognitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: VoiceRecognitionDirective, isStandalone: true, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecognitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: VoiceRecognitionDirective, isStandalone: true, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luxVoiceRecognition]'
@@ -4394,8 +4421,8 @@ const windowProvider = {
 const WINDOW_PROVIDERS = [browserWindowProvider, windowProvider];
 
 class LuxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, imports: [FormsModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LuxModule, imports: [FormsModule,
             FilterComponent,
             GeolocationComponent,
             InputComponent,
@@ -4429,7 +4456,7 @@ class LuxModule {
             PaginationComponent,
             RadiogroupComponent,
             VoiceRecognitionDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
             FilterComponent,
             GeolocationComponent,
             InputComponent,
@@ -4437,19 +4464,14 @@ class LuxModule {
             AutocompleteComponent,
             DatetimeComponent,
             LuxBreadcrumbComponent,
-            LuxModalWindowComponent,
-            LuxModalBackdropComponent,
-            MapComponent,
             PaginationComponent,
-            RadiogroupComponent,
             HttpClientModule,
             ReactiveFormsModule,
             RouterModule,
             SelectComponent,
-            CommonModule,
-            TooltipComponent] });
+            CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LuxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],