@metadev/lux 0.31.0 → 21.0.0

package/fesm2022/metadev-lux.mjs

@@ -1,15 +1,14 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Input, Output, ViewChild, Component, HostBinding, Injectable, HostListener, Inject, TemplateRef, Directive, InjectionToken, PLATFORM_ID, NgModule } 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 * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } 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$1 from '@angular/common';
-import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
-import { of, Subject, fromEvent, from, BehaviorSubject } from 'rxjs';
-import * as i1$2 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i1$3 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
+import * as i1$2 from '@angular/common';
+import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
+import { of, Subject, from, 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';
 
 /* eslint-disable no-useless-escape */
 // undefined and null functions
@@ -129,18 +128,11 @@ const isInitialAndEmpty = (previousValue, newValue) => {
         (isNewArray ? newValue.length !== 0 : Boolean(newValue)));
 };
 
-/** Language detector based on Navigator preferences */
-const languageDetector = () => {
-    const lang = navigator.language.split('-')[0];
-    if (lang === 'es' || lang === 'en') {
-        return lang;
-    }
-    return 'en'; // default
-};
-
 const LOST_FOCUS_TIME_WINDOW_MS = 200; // ms
 class AutocompleteComponent {
-    cd;
+    cd = inject(ChangeDetectorRef);
+    document = inject(DOCUMENT);
+    appendToContainer = null;
     static idCounter = 0;
     i0;
     completeDiv;
@@ -167,6 +159,8 @@ class AutocompleteComponent {
      *  true: keep open (when the action most likely is to pick another one).
      */
     keepOpenAfterDelete = false;
+    /** Append dropdown to body or custom selector. Uses position absolute. */
+    appendTo;
     get value() {
         return this._value;
     }
@@ -196,9 +190,6 @@ class AutocompleteComponent {
     resolveLabelsFunction = undefined;
     populateFunction = undefined;
     instance;
-    constructor(cd) {
-        this.cd = cd;
-    }
     // ControlValueAccessor Interface
     onChange = (value) => { };
     onTouched = () => { };
@@ -261,13 +252,69 @@ class AutocompleteComponent {
     }
     ngAfterViewInit() {
         this.setSameWidth();
+        this.handleAppendTo();
+    }
+    ngOnDestroy() {
+        this.removeDropdownFromContainer();
+    }
+    handleAppendTo() {
+        if (!this.appendTo) {
+            return;
+        }
+        const container = this.appendTo === 'body'
+            ? this.document.body
+            : this.document.querySelector(this.appendTo);
+        if (container) {
+            this.appendToContainer = container;
+            this.appendToContainer.appendChild(this.completeDiv.nativeElement);
+        }
+    }
+    removeDropdownFromContainer() {
+        if (this.appendToContainer && this.completeDiv) {
+            const dropdown = this.completeDiv.nativeElement;
+            if (dropdown.parentElement === this.appendToContainer) {
+                this.appendToContainer.removeChild(dropdown);
+            }
+        }
+    }
+    updateDropdownPosition() {
+        if (!this.appendTo || !this.appendToContainer) {
+            return;
+        }
+        const inputRect = this.i0.nativeElement.getBoundingClientRect();
+        const dropdown = this.completeDiv.nativeElement;
+        let top;
+        let left;
+        if (this.appendToContainer === this.document.body) {
+            // For body, use viewport coordinates + scroll
+            top = inputRect.bottom + window.scrollY;
+            left = inputRect.left + window.scrollX;
+        }
+        else {
+            // For custom containers, calculate relative position
+            const containerRect = this.appendToContainer.getBoundingClientRect();
+            top =
+                inputRect.bottom -
+                    containerRect.top +
+                    this.appendToContainer.scrollTop;
+            left =
+                inputRect.left - containerRect.left + this.appendToContainer.scrollLeft;
+        }
+        dropdown.style.top = `${top}px`;
+        dropdown.style.left = `${left}px`;
+        dropdown.style.width = `${inputRect.width}px`;
     }
     onInputResized() {
         this.setSameWidth();
     }
     setSameWidth() {
-        const width = this.i0.nativeElement.getBoundingClientRect().width;
-        this.completeDiv.nativeElement.style.width = `${width}px`;
+        if (this.appendTo) {
+            this.updateDropdownPosition();
+        }
+        else {
+            const width = this.i0.nativeElement.getBoundingClientRect().width;
+            this.completeDiv.nativeElement.style.width = `${width}px`;
+        }
     }
     onKeydown(event, label) {
         switch (event.key) {
@@ -402,6 +449,9 @@ class AutocompleteComponent {
     toggleCompletion(show, label) {
         if (show && !this.disabled) {
             this.i0.nativeElement.focus();
+            if (this.appendTo) {
+                this.updateDropdownPosition();
+            }
             this.showCompletionList(label);
         }
         else {
@@ -515,8 +565,8 @@ class AutocompleteComponent {
             return of([]);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AutocompleteComponent, isStandalone: false, selector: "lux-autocomplete", inputs: { inputId: "inputId", disabled: "disabled", readonly: "readonly", label: "label", canAddNewValues: "canAddNewValues", keepOpenAfterDelete: "keepOpenAfterDelete", 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: "21.1.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AutocompleteComponent, isStandalone: true, selector: "lux-autocomplete", inputs: { inputId: "inputId", disabled: "disabled", readonly: "readonly", label: "label", canAddNewValues: "canAddNewValues", keepOpenAfterDelete: "keepOpenAfterDelete", appendTo: "appendTo", value: "value", dataSource: "dataSource", required: "required", placeholder: "placeholder", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange", dataSourceChange: "dataSourceChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -527,11 +577,11 @@ 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)\">\n  <div class=\"lux-autocomplete-box\">\n    <input\n      #i0\n      [id]=\"inputId\"\n      [(ngModel)]=\"label\"\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled || null\"\n      [attr.readonly]=\"readonly || null\"\n      (keydown)=\"onKeydown($event, i0.value)\"\n      (keypress)=\"onKeypress($event, i0.value)\"\n      (keyup)=\"onKeyup($event, i0.value)\"\n      (blur)=\"onLostFocus(i0.value)\"\n      (focus)=\"toggleCompletion(true, i0.value)\"\n      (click)=\"toggleCompletion(true, i0.value)\"\n      (resized)=\"onInputResized()\"\n      (window:resize)=\"onInputResized()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"showCompletion\"\n      aria-haspopup=\"true\"\n      attr.aria-owns=\"{{ inputId + '_list' }}\"\n      [attr.aria-activedescendant]=\"selectedOption\"\n    />\n    <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n    <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n    <ng-template #noLoading>\n      <button\n        *ngIf=\"!disabled && i0.value && !showCompletion; else dropdown\"\n        type=\"button\"\n        class=\"icon-clear\"\n        aria-label=\"Clear\"\n        (click)=\"clear()\"\n      ></button>\n      <ng-template #dropdown>\n        <div\n          class=\"icon-dropdown\"\n          (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n        ></div>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div\n    #completeDiv\n    [class.showCompletion]=\"showCompletion\"\n    class=\"lux-completion-list\"\n    id=\"{{ inputId + '_list' }}\"\n  >\n    <ul>\n      <li\n        *ngFor=\"let item of completionList; let index = index\"\n        id=\"{{ inputId + '_' + index }}\"\n        class=\"lux-completion-item\"\n        [class.selected]=\"focusItem && item.key === focusItem.key\"\n        (click)=\"complete(item)\"\n        [attr.aria-label]=\"item.label\"\n      >\n        <span class=\"preserve-white-space\">{{ item.labelPrefix }}</span>\n        <span class=\"preserve-white-space bold\">{{ item.labelMatch }}</span>\n        <span class=\"preserve-white-space\">{{ item.labelPostfix }}</span>\n      </li>\n    </ul>\n  </div>\n</div>\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}.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: "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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-autocomplete', providers: [
+            args: [{ selector: 'lux-autocomplete', imports: [FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -542,8 +592,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => AutocompleteComponent)
                         }
-                    ], template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\n  <div class=\"lux-autocomplete-box\">\n    <input\n      #i0\n      [id]=\"inputId\"\n      [(ngModel)]=\"label\"\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled || null\"\n      [attr.readonly]=\"readonly || null\"\n      (keydown)=\"onKeydown($event, i0.value)\"\n      (keypress)=\"onKeypress($event, i0.value)\"\n      (keyup)=\"onKeyup($event, i0.value)\"\n      (blur)=\"onLostFocus(i0.value)\"\n      (focus)=\"toggleCompletion(true, i0.value)\"\n      (click)=\"toggleCompletion(true, i0.value)\"\n      (resized)=\"onInputResized()\"\n      (window:resize)=\"onInputResized()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"showCompletion\"\n      aria-haspopup=\"true\"\n      attr.aria-owns=\"{{ inputId + '_list' }}\"\n      [attr.aria-activedescendant]=\"selectedOption\"\n    />\n    <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n    <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n    <ng-template #noLoading>\n      <button\n        *ngIf=\"!disabled && i0.value && !showCompletion; else dropdown\"\n        type=\"button\"\n        class=\"icon-clear\"\n        aria-label=\"Clear\"\n        (click)=\"clear()\"\n      ></button>\n      <ng-template #dropdown>\n        <div\n          class=\"icon-dropdown\"\n          (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n        ></div>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div\n    #completeDiv\n    [class.showCompletion]=\"showCompletion\"\n    class=\"lux-completion-list\"\n    id=\"{{ inputId + '_list' }}\"\n  >\n    <ul>\n      <li\n        *ngFor=\"let item of completionList; let index = index\"\n        id=\"{{ inputId + '_' + index }}\"\n        class=\"lux-completion-item\"\n        [class.selected]=\"focusItem && item.key === focusItem.key\"\n        (click)=\"complete(item)\"\n        [attr.aria-label]=\"item.label\"\n      >\n        <span class=\"preserve-white-space\">{{ item.labelPrefix }}</span>\n        <span class=\"preserve-white-space bold\">{{ item.labelMatch }}</span>\n        <span class=\"preserve-white-space\">{{ item.labelPostfix }}</span>\n      </li>\n    </ul>\n  </div>\n</div>\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}.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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { 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"] }]
+        }], propDecorators: { i0: [{
                 type: ViewChild,
                 args: ['i0', { static: true }]
             }], completeDiv: [{
@@ -565,6 +615,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], keepOpenAfterDelete: [{
                 type: Input
+            }], appendTo: [{
+                type: Input
             }], value: [{
                 type: Input
             }], dataSource: [{
@@ -620,6 +672,15 @@ const selectElement = (completionList, label) => {
     return found || completionList[0];
 };
 
+/** Language detector based on Navigator preferences */
+const languageDetector = () => {
+    const lang = navigator.language.split('-')[0];
+    if (lang === 'es' || lang === 'en') {
+        return lang;
+    }
+    return 'en'; // default
+};
+
 class AutocompleteListComponent {
     static idCounter = 0;
     auto;
@@ -812,8 +873,8 @@ class AutocompleteListComponent {
     getDeleteMessage(label) {
         return (this.deleteLabelTemplate ?? this.literals[this.lang].deleteLabelTemplate).replace('<<label>>', label);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AutocompleteListComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AutocompleteListComponent, isStandalone: true, selector: "lux-autocomplete-list", inputs: { value: "value", lang: "lang", inputId: "inputId", dataSource: "dataSource", placeholder: "placeholder", disabled: "disabled", deleteLabelTemplate: "deleteLabelTemplate", addMessage: "addMessage", required: "required", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -824,11 +885,11 @@ class AutocompleteListComponent {
                 multi: true,
                 useExisting: forwardRef(() => AutocompleteListComponent)
             }
-        ], viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<div [id]=\"inputId\">\n  <ul>\n    <li *ngFor=\"let label of labels; let index = index\">\n      <span>{{ label }}</span>\n      <button\n        *ngIf=\"!disabled\"\n        class=\"remove-item\"\n        (click)=\"removeAt(index)\"\n        attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n      ></button>\n    </li>\n  </ul>\n  <div *ngIf=\"!disabled\" class=\"new-entry\">\n    <lux-autocomplete\n      #auto\n      [dataSource]=\"internalDataSource\"\n      [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n      [(value)]=\"newEntry\"\n      (valueChange)=\"onValueChange()\"\n      (keypress)=\"onNewEntryChange($event, auto)\"\n    >\n    </lux-autocomplete>\n    <button\n      *ngIf=\"canAdd\"\n      type=\"button\"\n      class=\"add-item\"\n      aria-label=\"addMessage ?? literals[lang].addMessage\"\n      (click)=\"addNew(auto)\"\n    ></button>\n  </div>\n</div>\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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "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: "19.2.1", ngImport: i0, type: AutocompleteListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutocompleteListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-autocomplete-list', providers: [
+            args: [{ selector: 'lux-autocomplete-list', imports: [AutocompleteComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -839,7 +900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => AutocompleteListComponent)
                         }
-                    ], template: "<div [id]=\"inputId\">\n  <ul>\n    <li *ngFor=\"let label of labels; let index = index\">\n      <span>{{ label }}</span>\n      <button\n        *ngIf=\"!disabled\"\n        class=\"remove-item\"\n        (click)=\"removeAt(index)\"\n        attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n      ></button>\n    </li>\n  </ul>\n  <div *ngIf=\"!disabled\" class=\"new-entry\">\n    <lux-autocomplete\n      #auto\n      [dataSource]=\"internalDataSource\"\n      [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n      [(value)]=\"newEntry\"\n      (valueChange)=\"onValueChange()\"\n      (keypress)=\"onNewEntryChange($event, auto)\"\n    >\n    </lux-autocomplete>\n    <button\n      *ngIf=\"canAdd\"\n      type=\"button\"\n      class=\"add-item\"\n      aria-label=\"addMessage ?? literals[lang].addMessage\"\n      (click)=\"addNew(auto)\"\n    ></button>\n  </div>\n</div>\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']
@@ -872,15 +933,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             }] } });
 
 class LuxBreadcrumbComponent {
-    route;
-    activedRoute;
+    route = inject(Router);
+    activedRoute = inject(ActivatedRoute);
     breadcrumbs;
     subs = [];
     imagePath = '../assets/img/arrow-forward.svg';
-    constructor(route, activedRoute) {
-        this.route = route;
-        this.activedRoute = activedRoute;
-    }
     ngOnInit() {
         this.subs.push(this.route.events
             .pipe(filter((event) => event instanceof NavigationEnd))
@@ -935,13 +992,13 @@ class LuxBreadcrumbComponent {
         }
         return activedRouteSnapshot.params.id || routeConfig.path;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxBreadcrumbComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: LuxBreadcrumbComponent, isStandalone: false, selector: "lux-breadcrumb", ngImport: i0, template: "<ul class=\"lux-breadcrumb\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs; last as isLast; first as isFirst\"\n      class=\"lux-breadcrumb-item\">\n    <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{ breadcrumb.label }}</a>\n    <div *ngIf=\"!isLast\" class=\"lux-breadcrumb-separator\"></div>\n  </li>\n</ul>\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: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LuxBreadcrumbComponent, isStandalone: true, selector: "lux-breadcrumb", ngImport: i0, template: "<ul class=\"lux-breadcrumb\">\r\n  @for (breadcrumb of breadcrumbs; track breadcrumb.url; let isLast = $last; let\r\n  isFirst = $first) {\r\n  <li class=\"lux-breadcrumb-item\">\r\n    <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{\r\n      breadcrumb.label\r\n    }}</a>\r\n    @if (!isLast) {\r\n    <div class=\"lux-breadcrumb-separator\"></div>\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">%0A    <path d=\"M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z\"/>%0A</svg>%0A');background-repeat:no-repeat;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-breadcrumb', template: "<ul class=\"lux-breadcrumb\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs; last as isLast; first as isFirst\"\n      class=\"lux-breadcrumb-item\">\n    <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{ breadcrumb.label }}</a>\n    <div *ngIf=\"!isLast\" class=\"lux-breadcrumb-separator\"></div>\n  </li>\n</ul>\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"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }] });
+            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 = ' ';
 class CheckboxComponent {
@@ -962,7 +1019,7 @@ class CheckboxComponent {
     get lang() {
         return this._lang;
     }
-    internalValue;
+    internalValue = false;
     get value() {
         return this.internalValue;
     }
@@ -977,6 +1034,7 @@ class CheckboxComponent {
         if (!initialAndEmpty) {
             this.valueChange.emit(v);
         }
+        this.cdr.markForCheck();
     }
     get tabindexValue() {
         return this.disabled ? null : '0';
@@ -993,6 +1051,7 @@ class CheckboxComponent {
         }
         this._disabled = v;
         this.syncModel();
+        this.cdr.markForCheck();
     }
     inputId;
     literals = {
@@ -1007,7 +1066,7 @@ class CheckboxComponent {
     };
     touched = false;
     valueChange = new EventEmitter();
-    constructor() { }
+    cdr = inject(ChangeDetectorRef);
     // ControlValueAccessor Interface
     onChange = (value) => { };
     onTouched = () => { };
@@ -1036,7 +1095,9 @@ class CheckboxComponent {
             : `${this.name || 'checkbox'}$${CheckboxComponent.idCounter++}`;
     }
     ngAfterViewInit() {
-        this.syncModel();
+        setTimeout(() => {
+            this.syncModel();
+        });
     }
     clicked() {
         if (!this.disabled) {
@@ -1056,25 +1117,25 @@ class CheckboxComponent {
             this.ck.nativeElement.checked = this.internalValue;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: CheckboxComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CheckboxComponent, isStandalone: true, selector: "lux-checkbox", inputs: { lang: "lang", value: "value", label: "label", name: "name", disabled: "disabled", inputId: "inputId" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => CheckboxComponent)
             }
-        ], viewQueries: [{ propertyName: "ck", first: true, predicate: ["ck"], descendants: true }], ngImport: i0, template: "<div class=\"switch\">\n  <div>\n    <label *ngIf=\"label\" [for]=\"inputId\">{{ label }}</label>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"switch-item\" (click)=\"clicked()\">\n    <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\n    <div\n      class=\"slider round\"\n      [class.on]=\"value\"\n      [class.disabled]=\"disabled\"\n      [tabindex]=\"tabindexValue\"\n      (keyup)=\"onKey($event)\"\n    ></div>\n  </div>\n  <div>\n    <span class=\"checkbox-label\" *ngIf=\"value\">{{\n      literals[lang].yesLabel\n    }}</span>\n    <span class=\"checkbox-label\" *ngIf=\"!value\">{{\n      literals[lang].noLabel\n    }}</span>\n  </div>\n</div>\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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], 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: "19.2.1", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-checkbox', providers: [
+            args: [{ selector: 'lux-checkbox', imports: [], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => CheckboxComponent)
                         }
-                    ], template: "<div class=\"switch\">\n  <div>\n    <label *ngIf=\"label\" [for]=\"inputId\">{{ label }}</label>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"switch-item\" (click)=\"clicked()\">\n    <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\n    <div\n      class=\"slider round\"\n      [class.on]=\"value\"\n      [class.disabled]=\"disabled\"\n      [tabindex]=\"tabindexValue\"\n      (keyup)=\"onKey($event)\"\n    ></div>\n  </div>\n  <div>\n    <span class=\"checkbox-label\" *ngIf=\"value\">{{\n      literals[lang].yesLabel\n    }}</span>\n    <span class=\"checkbox-label\" *ngIf=\"!value\">{{\n      literals[lang].noLabel\n    }}</span>\n  </div>\n</div>\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: [{
+                    ], 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"] }]
+        }], propDecorators: { ck: [{
                 type: ViewChild,
                 args: ['ck', { static: false }]
             }], lang: [{
@@ -1333,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: "19.2.1", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: DatetimeComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DatetimeComponent, isStandalone: true, selector: "lux-datetime", inputs: { min: "min", max: "max", includeSeconds: "includeSeconds", localTime: "localTime", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1345,11 +1406,11 @@ 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\n  #dateInput\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"date\"\n  [id]=\"inputId + '$date'\"\n  [(ngModel)]=\"dateValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<input\n  #timeInput\n  [class]=\"(disabled || readonly || !isClearable()) && localTime ? 'rounded-right' : ''\"\n  [ngClass]=\"className\"\n  type=\"time\"\n  [id]=\"inputId + '$time'\"\n  [(ngModel)]=\"timeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  [step]=\"includeSeconds ? 1 : 60\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<ng-container\n  *ngIf=\"!localTime\"\n>\n  <div\n    [class]=\"disabled || readonly || !isClearable() ? 'rounded-right postfix symbol' : 'postfix symbol'\"\n    [ngClass]=\"className\"\n  >\n    <span>{{ localTime ? '' : 'UTC' }}</span>\n  </div>\n</ng-container>\n<button\n  #clearButton\n  *ngIf=\"!disabled && !readonly && isClearable()\"\n  type=\"button\"\n  class=\"rounded-right postfix bordered icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n", 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: "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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-datetime', providers: [
+            args: [{ selector: 'lux-datetime', imports: [FormsModule, CommonModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -1360,7 +1421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => DatetimeComponent)
                         }
-                    ], template: "<input\n  #dateInput\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"date\"\n  [id]=\"inputId + '$date'\"\n  [(ngModel)]=\"dateValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<input\n  #timeInput\n  [class]=\"(disabled || readonly || !isClearable()) && localTime ? 'rounded-right' : ''\"\n  [ngClass]=\"className\"\n  type=\"time\"\n  [id]=\"inputId + '$time'\"\n  [(ngModel)]=\"timeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  [step]=\"includeSeconds ? 1 : 60\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<ng-container\n  *ngIf=\"!localTime\"\n>\n  <div\n    [class]=\"disabled || readonly || !isClearable() ? 'rounded-right postfix symbol' : 'postfix symbol'\"\n    [ngClass]=\"className\"\n  >\n    <span>{{ localTime ? '' : 'UTC' }}</span>\n  </div>\n</ng-container>\n<button\n  #clearButton\n  *ngIf=\"!disabled && !readonly && isClearable()\"\n  type=\"button\"\n  class=\"rounded-right postfix bordered icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n", 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { dateInput: [{
                 type: ViewChild,
                 args: ['dateInput', { static: true }]
@@ -1513,24 +1574,24 @@ class FilterComponent {
     addEvent() {
         this.subject.next(this.searchValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: FilterComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: FilterComponent, isStandalone: true, selector: "lux-filter", inputs: { disabled: "disabled", inputId: "inputId", placeholder: "placeholder", searchValue: "searchValue", searchOnType: "searchOnType", ariaLabel: ["aria-label", "ariaLabel"], debounce: "debounce" }, outputs: { searchValueChange: "searchValueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => FilterComponent)
             }
-        ], ngImport: i0, template: "<div class=\"filter\">\n  <input\n    #i0\n    type=\"text\"\n    [attr.aria-label]=\"ariaLabel\"\n    [placeholder]=\"placeholder\"\n    [id]=\"inputId\"\n    [disabled]=\"disabled\"\n    [value]=\"searchValue\"\n    (valueChange)=\"onInputValueChange(i0.value)\"\n    (keyup)=\"keyup($event, i0.value)\"\n  />\n\n  <button\n    [class.hide]=\"!searchValue\"\n    aria-label=\"Clear\"\n    class=\"clear-indicator icon icon-clear\"\n    type=\"button\"\n    (click)=\"clear()\"\n  ></button>\n  <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n  <button\n    class=\"btn-search\"\n    *ngIf=\"!searchOnType\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    (click)=\"search()\"\n  >\n    Search\n  </button>\n</div>\n", 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: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], 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: "19.2.1", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-filter', providers: [
+            args: [{ selector: 'lux-filter', imports: [FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => FilterComponent)
                         }
-                    ], template: "<div class=\"filter\">\n  <input\n    #i0\n    type=\"text\"\n    [attr.aria-label]=\"ariaLabel\"\n    [placeholder]=\"placeholder\"\n    [id]=\"inputId\"\n    [disabled]=\"disabled\"\n    [value]=\"searchValue\"\n    (valueChange)=\"onInputValueChange(i0.value)\"\n    (keyup)=\"keyup($event, i0.value)\"\n  />\n\n  <button\n    [class.hide]=\"!searchValue\"\n    aria-label=\"Clear\"\n    class=\"clear-indicator icon icon-clear\"\n    type=\"button\"\n    (click)=\"clear()\"\n  ></button>\n  <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n  <button\n    class=\"btn-search\"\n    *ngIf=\"!searchOnType\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    (click)=\"search()\"\n  >\n    Search\n  </button>\n</div>\n", 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], inputId: [{
@@ -1550,993 +1611,975 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Output
             }] } });
 
-class LuxModalBackdropComponent {
-    backdropClass;
-    class = 'modal-backdrop fade show';
-    style = 'z-index: 1050';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: LuxModalBackdropComponent, isStandalone: false, 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: "19.2.1", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'lux-modal-backdrop',
-                    template: ''
-                }]
-        }], propDecorators: { backdropClass: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
-
-class LuxModalConfig {
-    backdrop = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
+let openLayersIsInstalled = false;
+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
+            loadCss(openLayerCssUrl, () => { });
+            return from(new Promise((resolve, _) => {
+                loadScript(openLayerJsUrl, () => resolve(true));
+            }));
+        }
+        return of(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModalConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
+/** Dynamically load a script from url and return a callback */
+const loadScript = (url, callback) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    if (script.readyState) {
+        // for old IE
+        script.onreadystatechange = () => {
+            if (script.readyState === 'loaded' || script.readyState === 'complete') {
+                script.onreadystatechange = null;
+                callback();
+            }
+        };
+    }
+    else {
+        // Others browsers
+        script.onload = () => {
+            callback();
+        };
+    }
+    script.src = url;
+    document.getElementsByTagName('head')[0].appendChild(script);
+};
+/** Dynamically load css from url and return a callback */
+const loadCss = (url, callback) => {
+    const link = document.createElement('link');
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
+    link.type = 'text/javascript';
+    link.href = url;
+    link.onload = () => {
+        callback();
+    };
+    document.getElementsByTagName('head')[0].appendChild(link);
+};
 
-class ActiveModal {
-    close(result) { }
-    dismiss(reason) { }
-}
-class ModalRef {
-    _windowCmptRef;
-    _contentRef;
-    _backdropCmptRef;
-    _beforeDismiss;
-    _resolve;
-    _reject;
-    /**
-     * The instance of a component used for the modal content.
-     *
-     * When a `TemplateRef` is used as the content, will return `undefined`.
-     */
-    get componentInstance() {
-        if (this._contentRef.componentRef) {
-            return this._contentRef.componentRef.instance;
+/* eslint-disable no-self-assign */
+class MapComponent {
+    static idCounter = 0;
+    loaded$ = new BehaviorSubject(false);
+    _map;
+    mapId;
+    _zoom;
+    set zoom(zoom) {
+        if (!isNaN(zoom)) {
+            this._zoom = zoom;
+            if (this._map) {
+                this._map.getView().setZoom(zoom);
+            }
         }
     }
-    /**
-     * The promise that is resolved when the modal is closed and rejected when the modal is dismissed.
-     */
-    result;
-    constructor(_windowCmptRef, _contentRef, _backdropCmptRef, _beforeDismiss) {
-        this._windowCmptRef = _windowCmptRef;
-        this._contentRef = _contentRef;
-        this._backdropCmptRef = _backdropCmptRef;
-        this._beforeDismiss = _beforeDismiss;
-        _windowCmptRef.instance.dismissEvent.subscribe((reason) => {
-            this.dismiss(reason);
-        });
-        this.result = new Promise((resolve, reject) => {
-            this._resolve = resolve;
-            this._reject = reject;
-        });
-        this.result.then(null, () => { });
+    get zoom() {
+        return this._zoom;
     }
-    /**
-     * Closes the modal with an optional `result` value.
-     *
-     * The `NgbMobalRef.result` promise will be resolved with the provided value.
-     */
-    close(result) {
-        if (this._windowCmptRef) {
-            if (this._resolve) {
-                this._resolve(result);
+    _center;
+    set center(center) {
+        if (center && center.coordinates && center.coordinates.length === 2) {
+            this._center = center;
+            if (this._map) {
+                this._map.getView().setCenter(ol.proj.fromLonLat(center.coordinates));
             }
-            this._removeModalElements();
         }
     }
-    _dismiss(reason) {
-        if (this._reject) {
-            this._reject(reason);
-        }
-        this._removeModalElements();
+    get center() {
+        return this._center;
     }
-    /**
-     * Dismisses the modal with an optional `reason` value.
-     *
-     * The `NgbModalRef.result` promise will be rejected with the provided value.
-     */
-    dismiss(reason) {
-        if (this._windowCmptRef) {
-            if (!this._beforeDismiss) {
-                this._dismiss(reason);
+    _readonly;
+    set readonly(readonly) {
+        if (!readonly) {
+            if (this._map) {
+                this._map.on('click', (args) => {
+                    // args.coordinate is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
+                    const coordinates = ol.proj.toLonLat(args.coordinate);
+                    // alternatively: const lonLat = ol.proj.transform(args.coordinate,'EPSG:3857','EPSG:4326');
+                    this.addMarkerAtCoordinates(coordinates);
+                });
+                this._map.on('pointermove', (event) => {
+                    const pixel = this._map.getEventPixel(event.originalEvent);
+                    const hit = this._map.hasFeatureAtPixel(pixel);
+                    this._map.getViewport().style.cursor = hit ? 'move' : 'grab';
+                });
             }
-            else {
-                const dismiss = this._beforeDismiss();
-                if (dismiss && dismiss.then) {
-                    dismiss.then((result) => {
-                        if (result !== false) {
-                            this._dismiss(reason);
-                        }
-                    }, () => { });
-                }
-                else if (dismiss !== false) {
-                    this._dismiss(reason);
-                }
+        }
+        else {
+            if (this._map) {
+                this._map.on('click', (args) => { });
+                this._map.on('pointermove', (event) => { });
+                this._map.getViewport().style.cursor = 'grab';
             }
         }
+        this._readonly = readonly;
+        // reset marker coordinates so marker interactions can be created or recreated accordingly
+        // to the changes to readonly
+        this.markerCoordinates = this.markerCoordinates;
     }
-    _removeModalElements() {
-        const windowNativeEl = this._windowCmptRef.location.nativeElement;
-        windowNativeEl.parentNode.removeChild(windowNativeEl);
-        this._windowCmptRef.destroy();
-        if (this._backdropCmptRef) {
-            const backdropNativeEl = this._backdropCmptRef.location.nativeElement;
-            backdropNativeEl.parentNode.removeChild(backdropNativeEl);
-            this._backdropCmptRef.destroy();
-        }
-        if (this._contentRef && this._contentRef.viewRef) {
-            this._contentRef.viewRef.destroy();
-        }
-        this._windowCmptRef = null;
-        this._backdropCmptRef = null;
-        this._contentRef = null;
+    get readonly() {
+        return this._readonly;
     }
-}
-
-const FOCUS = 'focus';
-var Key;
-(function (Key) {
-    Key[Key["Tab"] = 9] = "Tab";
-    Key[Key["Enter"] = 13] = "Enter";
-    Key[Key["Escape"] = 27] = "Escape";
-    Key[Key["Space"] = 32] = "Space";
-    Key[Key["PageUp"] = 33] = "PageUp";
-    Key[Key["PageDown"] = 34] = "PageDown";
-    Key[Key["End"] = 35] = "End";
-    Key[Key["Home"] = 36] = "Home";
-    Key[Key["ArrowLeft"] = 37] = "ArrowLeft";
-    Key[Key["ArrowUp"] = 38] = "ArrowUp";
-    Key[Key["ArrowRight"] = 39] = "ArrowRight";
-    Key[Key["ArrowDown"] = 40] = "ArrowDown";
-})(Key || (Key = {}));
-const isDefined = (value) => value !== undefined && value !== null;
-class ContentRef {
-    nodes;
-    viewRef;
-    componentRef;
-    constructor(nodes, viewRef, componentRef) {
-        this.nodes = nodes;
-        this.viewRef = viewRef;
-        this.componentRef = componentRef;
-    }
-}
-const FOCUSABLE_ELEMENTS_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled]):not([type="hidden"])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[contenteditable]',
-    '[tabindex]:not([tabindex="-1"])'
-].join(', ');
-/**
- * Returns first and last focusable elements inside of a given element based on specific CSS selector
- */
-const getFocusableBoundaryElements = (element) => {
-    const list = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)).filter((el) => el.tabIndex !== -1);
-    return [list[0], list[list.length - 1]];
-};
-/**
- * Function that enforces browser focus to be trapped inside a DOM element.
- *
- * Works only for clicks inside the element and navigation with 'Tab', ignoring clicks outside of the element
- *
- * @param element The element around which focus will be trapped inside
- * @param stopFocusTrap$ The observable stream. When completed the focus trap will clean up listeners
- * and free internal resources
- * @param refocusOnClick Put the focus back to the last focused element whenever a click occurs on element (default to
- * false)
- */
-const focusTrap = (element, stopFocusTrap$, refocusOnClick = false) => {
-    // last focused element
-    const lastFocusedElement$ = fromEvent(element, 'focusin').pipe(takeUntil(stopFocusTrap$), map((e) => e.target));
-    // 'tab' / 'shift+tab' stream
-    fromEvent(element, 'keydown')
-        .pipe(takeUntil(stopFocusTrap$), filter((e) => e.which === Key.Tab), withLatestFrom(lastFocusedElement$))
-        .subscribe(([tabEvent, focusedElement]) => {
-        const [first, last] = getFocusableBoundaryElements(element);
-        if ((focusedElement === first || focusedElement === element) &&
-            tabEvent.shiftKey) {
-            last.focus();
-            tabEvent.preventDefault();
+    _marker;
+    _markerInteraction;
+    _markerCoordinates;
+    set markerCoordinates(markerCoordinates) {
+        if (markerCoordinates && markerCoordinates.length === 2) {
+            this._markerCoordinates = markerCoordinates;
+            if (this._map) {
+                this.addMarkerAtCoordinates(markerCoordinates);
+            }
         }
-        if (focusedElement === last && !tabEvent.shiftKey) {
-            first.focus();
-            tabEvent.preventDefault();
+        else {
+            this._markerCoordinates = undefined;
+            if (this._map) {
+                this.removeMarker();
+            }
         }
-    });
-    // inside click
-    if (refocusOnClick) {
-        fromEvent(element, 'click')
-            .pipe(takeUntil(stopFocusTrap$), withLatestFrom(lastFocusedElement$), map((arr) => arr[1]))
-            .subscribe((lastFocusedElement) => lastFocusedElement.focus());
-    }
-};
-
-var ModalDismissReasons;
-(function (ModalDismissReasons) {
-    ModalDismissReasons[ModalDismissReasons["BackdropClick"] = 0] = "BackdropClick";
-    ModalDismissReasons[ModalDismissReasons["Esc"] = 1] = "Esc";
-})(ModalDismissReasons || (ModalDismissReasons = {}));
-
-class LuxModalWindowComponent {
-    _document;
-    _elRef;
-    _elWithFocus; // element that is focused prior to modal opening
-    ariaDescribedBy;
-    ariaLabelledBy;
-    backdrop = false;
-    keyboard = true;
-    windowClass;
-    dismissEvent = new EventEmitter();
-    get class() {
-        return `modal ${this.windowClass || ''}`;
-    }
-    role = 'dialog';
-    tabindex = '-1';
-    ariamodal = true;
-    get hostAriaLabelledBy() {
-        return this.ariaLabelledBy;
     }
-    get hostAriaDescribedBy() {
-        return this.ariaDescribedBy;
+    get markerCoordinates() {
+        return this._markerCoordinates;
     }
-    backdropClick(btn) {
-        if (this.backdrop === true && this._elRef.nativeElement === btn) {
-            this.dismiss(ModalDismissReasons.BackdropClick);
+    set markerPoint(markerPoint) {
+        if (!markerPoint ||
+            !(markerPoint.coordinates && markerPoint.coordinates.length === 2)) {
+            this.markerCoordinates = undefined;
         }
-    }
-    escKey(event) {
-        if (this.keyboard && !event.defaultPrevented) {
-            this.dismiss(ModalDismissReasons.Esc);
+        else {
+            this.markerCoordinates = [
+                +markerPoint.coordinates[0],
+                +markerPoint.coordinates[1]
+            ];
         }
+        this.valueChange.emit(markerPoint);
     }
-    constructor(_document, _elRef) {
-        this._document = _document;
-        this._elRef = _elRef;
+    get markerPoint() {
+        return {
+            type: 'Point',
+            coordinates: this.markerCoordinates
+        };
     }
-    dismiss(reason) {
-        this.dismissEvent.emit(reason);
+    valueChange = new EventEmitter();
+    _markerSource;
+    _markerStyle;
+    constructor() {
+        const olLoader = inject(OpenLayerLoaderService);
+        olLoader.load().subscribe((_) => {
+            // Initialize
+            this._markerSource = new ol.source.Vector();
+            this._markerStyle = new ol.style.Style({
+                image: new ol.style.Icon({
+                    anchor: [0.5, 1],
+                    scale: 0.25,
+                    src: '/assets/img/marker.png'
+                })
+            });
+            this.loaded$.next(true);
+        });
     }
     ngOnInit() {
-        this._elWithFocus = this._document.activeElement;
+        this.mapId = this.mapId ? this.mapId : 'map' + MapComponent.idCounter++;
     }
     ngAfterViewInit() {
-        if (!this._elRef.nativeElement.contains(document.activeElement)) {
-            const firstFocusable = getFocusableBoundaryElements(this._elRef.nativeElement)[0];
-            const elementToFocus = firstFocusable || this._elRef.nativeElement;
-            elementToFocus.focus();
-        }
+        this.loaded$.subscribe((loaded) => {
+            if (loaded) {
+                this.initMap();
+            }
+        });
     }
-    ngOnDestroy() {
-        const body = this._document.body;
-        const elWithFocus = this._elWithFocus;
-        let elementToFocus;
-        if (elWithFocus && elWithFocus[FOCUS] && body.contains(elWithFocus)) {
-            elementToFocus = elWithFocus;
+    initMap() {
+        this._map = new ol.Map({
+            target: this.mapId,
+            controls: ol.control.defaults({ attribution: false }),
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.OSM()
+                }),
+                new ol.layer.Vector({
+                    source: this._markerSource,
+                    style: this._markerStyle
+                })
+            ],
+            view: new ol.View({
+                center: ol.proj.fromLonLat(this.center !== undefined ? this.center.coordinates : [0, 0]),
+                zoom: this.zoom
+            })
+        });
+        if (this.center === undefined || this.center === null) {
+            // if the center is not set, we set its default value
+            if ('geolocation' in navigator) {
+                navigator.geolocation.getCurrentPosition((position) => {
+                    this.center = {
+                        type: 'Point',
+                        coordinates: [position.coords.longitude, position.coords.latitude]
+                    };
+                }, (error) => {
+                    this.center = {
+                        type: 'Point',
+                        coordinates: [0, 0]
+                    };
+                });
+            }
+            else {
+                this.center = {
+                    type: 'Point',
+                    coordinates: [0, 0]
+                };
+            }
         }
         else {
-            elementToFocus = body;
+            // the center needs the map to be properly set, so if it was set before the map was initialized,
+            // we set the center again to perform necessary adjustements
+            this.center = this.center;
+        }
+        if (this.zoom === undefined || this.zoom === null) {
+            // if the zoom is not set, we set its default value
+            this.zoom = 18;
+        }
+        else {
+            // the zoom needs the map to be properly set, so if it was set before the map was initialized,
+            // we set the zoom again to perform necessary adjustements
+            this.zoom = this.zoom;
+        }
+        if (this.readonly === undefined || this.readonly === null) {
+            // if readonly is not set, we set its default value
+            this.readonly = false;
+        }
+        else {
+            // readonly needs the map to be properly set, so if it was set before the map was initialized,
+            // we set readonly again to perform necessary adjustements
+            this.readonly = this.readonly;
+        }
+        if (this.markerCoordinates !== undefined &&
+            this.markerCoordinates !== null) {
+            // the marker coordinates need the map to be properly set, so if they were set before the map was initialized,
+            // we set the marker coordinates again to perform necessary adjustements
+            this.markerCoordinates = this.markerCoordinates;
         }
-        elementToFocus.focus();
-        this._elWithFocus = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModalWindowComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: LuxModalWindowComponent, isStandalone: false, 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: `
-    <div class="modal-dialog" role="document">
-      <div class="modal-content"><ng-content></ng-content></div>
-    </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'lux-modal-window',
-                    template: `
-    <div class="modal-dialog" role="document">
-      <div class="modal-content"><ng-content></ng-content></div>
-    </div>
-  `
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }], propDecorators: { ariaDescribedBy: [{
+    addMarkerAtCoordinates(coordinates) {
+        if (coordinates && coordinates.length === 2) {
+            if (this._marker !== undefined) {
+                this.removeMarker();
+            }
+            this._marker = new ol.Feature({
+                geometry: new ol.geom.Point(
+                // [lon, lat] is in EPSG:4326 (degrees), we transform it into EPSG:3857 (meters)
+                ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'))
+            });
+            this._markerSource.addFeature(this._marker);
+            this._markerCoordinates = this.getMarkerCoordinates();
+            if (!this.readonly) {
+                const dragInteraction = new ol.interaction.Modify({
+                    features: new ol.Collection([this._marker]),
+                    style: this._markerStyle,
+                    pixelTolerance: 50,
+                    hitDetection: true
+                });
+                this._markerInteraction = dragInteraction;
+                this._map.addInteraction(dragInteraction);
+            }
+            this._marker.on('change', () => {
+                this._markerCoordinates = this.getMarkerCoordinates();
+            }, this._marker);
+        }
+    }
+    removeMarker() {
+        if (this._marker !== undefined) {
+            this._markerSource.removeFeature(this._marker);
+            this._marker = undefined;
+        }
+        if (this._markerInteraction !== undefined) {
+            this._map.getInteractions().pop();
+            this._markerInteraction = undefined;
+        }
+    }
+    getMarkerCoordinates() {
+        if (this._marker === undefined || this._marker == null) {
+            return this._marker;
+        }
+        const coordinates = this._marker.getGeometry().getCoordinates();
+        // coordinates is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
+        return ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
+    }
+    onResize() {
+        if (this._map) {
+            this._map.updateSize();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MapComponent, isStandalone: true, selector: "lux-map", inputs: { mapId: "mapId", zoom: "zoom", center: "center", readonly: "readonly", markerCoordinates: "markerCoordinates", markerPoint: "markerPoint" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MapComponent, decorators: [{
+            type: Component,
+            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
-            }], ariaLabelledBy: [{
+            }], zoom: [{
                 type: Input
-            }], backdrop: [{
+            }], center: [{
                 type: Input
-            }], keyboard: [{
+            }], readonly: [{
                 type: Input
-            }], windowClass: [{
+            }], markerCoordinates: [{
                 type: Input
-            }], dismissEvent: [{
+            }], markerPoint: [{
+                type: Input
+            }], valueChange: [{
                 type: Output
+            }] } });
+
+class LuxModalBackdropComponent {
+    backdropClass;
+    class = 'modal-backdrop fade show';
+    style = 'z-index: 1050';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LuxModalBackdropComponent, isStandalone: true, selector: "lux-modal-backdrop", inputs: { backdropClass: "backdropClass" }, host: { properties: { "class": "this.class", "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [],
+                    selector: 'lux-modal-backdrop',
+                    template: ''
+                }]
+        }], propDecorators: { backdropClass: [{
+                type: Input
             }], class: [{
                 type: HostBinding,
                 args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['tabindex']
-            }], ariamodal: [{
-                type: HostBinding,
-                args: ['attr.aria-modal']
-            }], hostAriaLabelledBy: [{
-                type: HostBinding,
-                args: ['attr.aria-labelledby']
-            }], hostAriaDescribedBy: [{
+            }], style: [{
                 type: HostBinding,
-                args: ['attr.aria-describedby']
-            }], backdropClick: [{
-                type: HostListener,
-                args: ['click', ['$event.target']]
-            }], escKey: [{
-                type: HostListener,
-                args: ['keyup.esc', ['$event']]
+                args: ['style']
             }] } });
 
-class ModalStack {
-    _applicationRef;
-    _document;
-    _injector;
-    _rendererFactory;
-    modalConfig;
-    _activeWindowCmptHasChanged = new Subject();
-    _modalRefs = [];
-    _windowCmpts = [];
-    _ariaHiddenValues = new Map();
-    _backdropAttributes = ['backdropClass'];
-    _windowAttributes = [
-        'ariaLabelledBy',
-        'backdrop',
-        'centered',
-        'keyboard',
-        'scrollable',
-        'size',
-        'windowClass'
-    ];
-    constructor(_applicationRef, _document, _injector, _rendererFactory, modalConfig) {
-        this._applicationRef = _applicationRef;
-        this._document = _document;
-        this._injector = _injector;
-        this._rendererFactory = _rendererFactory;
-        this.modalConfig = modalConfig;
-        this._activeWindowCmptHasChanged.subscribe(() => {
-            if (this._windowCmpts.length) {
-                const activeWindowCmpt = this._windowCmpts[this._windowCmpts.length - 1];
-                focusTrap(activeWindowCmpt.location.nativeElement, this._activeWindowCmptHasChanged);
-                this._revertAriaHidden();
-                this._setAriaHidden(activeWindowCmpt.location.nativeElement);
-            }
-        });
-    }
-    open(moduleCFR, content, options) {
-        const config = Object.assign({}, this.modalConfig, options);
-        const containerEl = this._document.body;
-        const renderer = this._rendererFactory.createRenderer(null, null);
-        const removeBodyClass = () => {
-            if (!this._modalRefs.length) {
-                renderer.removeClass(this._document.body, 'modal-open');
-                this._revertAriaHidden();
-            }
-        };
-        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 modalRef = new ModalRef(windowCmptRef, contentRef, backdropCmptRef);
-        this._registerModalRef(modalRef);
-        this._registerWindowCmpt(windowCmptRef);
-        modalRef.result.then(removeBodyClass, removeBodyClass);
-        activeModal.close = (result) => {
-            modalRef.close(result);
-        };
-        activeModal.dismiss = (reason) => {
-            modalRef.dismiss(reason);
-        };
-        this._applyWindowOptions(windowCmptRef.instance, config);
-        if (this._modalRefs.length === 1) {
-            renderer.addClass(this._document.body, 'modal-open');
-        }
-        if (backdropCmptRef && backdropCmptRef.instance) {
-            this._applyBackgroundOptions(backdropCmptRef.instance, config);
-            backdropCmptRef.changeDetectorRef.detectChanges();
+class LuxModalConfig {
+    backdrop = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ActiveModal {
+    close(result) { }
+    dismiss(reason) { }
+}
+class ModalRef {
+    _windowCmptRef;
+    _contentRef;
+    _backdropCmptRef;
+    _beforeDismiss;
+    _resolve;
+    _reject;
+    /**
+     * The instance of a component used for the modal content.
+     *
+     * When a `TemplateRef` is used as the content, will return `undefined`.
+     */
+    get componentInstance() {
+        if (this._contentRef.componentRef) {
+            return this._contentRef.componentRef.instance;
         }
-        windowCmptRef.changeDetectorRef.detectChanges();
-        return modalRef;
     }
-    _applyWindowOptions(windowInstance, config) {
-        this._windowAttributes.forEach((optionName) => {
-            if (isDefined(config[optionName])) {
-                windowInstance[optionName] = config[optionName];
-            }
+    /**
+     * The promise that is resolved when the modal is closed and rejected when the modal is dismissed.
+     */
+    result;
+    constructor(_windowCmptRef, _contentRef, _backdropCmptRef, _beforeDismiss) {
+        this._windowCmptRef = _windowCmptRef;
+        this._contentRef = _contentRef;
+        this._backdropCmptRef = _backdropCmptRef;
+        this._beforeDismiss = _beforeDismiss;
+        _windowCmptRef.instance.dismissEvent.subscribe((reason) => {
+            this.dismiss(reason);
         });
-    }
-    _applyBackgroundOptions(backgroudInstance, config) {
-        this._backdropAttributes.forEach((optionName) => {
-            if (isDefined(config[optionName])) {
-                backgroudInstance[optionName] = config[optionName];
-            }
+        this.result = new Promise((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
         });
+        this.result.then(null, () => { });
     }
-    _revertAriaHidden() {
-        this._ariaHiddenValues.forEach((value, element) => {
-            if (value) {
-                element.setAttribute('aria-hidden', value);
-            }
-            else {
-                element.removeAttribute('aria-hidden');
+    /**
+     * Closes the modal with an optional `result` value.
+     *
+     * The `NgbMobalRef.result` promise will be resolved with the provided value.
+     */
+    close(result) {
+        if (this._windowCmptRef) {
+            if (this._resolve) {
+                this._resolve(result);
             }
-        });
-        this._ariaHiddenValues.clear();
+            this._removeModalElements();
+        }
     }
-    getContentRef(moduleCFR, content, activeModal) {
-        if (content instanceof TemplateRef) {
-            return this.createFromTemplateRef(content, activeModal);
+    _dismiss(reason) {
+        if (this._reject) {
+            this._reject(reason);
         }
+        this._removeModalElements();
     }
-    createFromTemplateRef(content, activeModal) {
-        const context = {
-            $implicit: activeModal,
-            close(result) {
-                activeModal.close(result);
-            },
-            dismiss(reason) {
-                activeModal.dismiss(reason);
+    /**
+     * Dismisses the modal with an optional `reason` value.
+     *
+     * The `NgbModalRef.result` promise will be rejected with the provided value.
+     */
+    dismiss(reason) {
+        if (this._windowCmptRef) {
+            if (!this._beforeDismiss) {
+                this._dismiss(reason);
             }
-        };
-        const viewRef = content.createEmbeddedView(context);
-        this._applicationRef.attachView(viewRef);
-        return new ContentRef([viewRef.rootNodes], viewRef);
-    }
-    _attachBackdrop(moduleCFR, containerEl) {
-        const backdropFactory = moduleCFR.resolveComponentFactory(LuxModalBackdropComponent);
-        const backdropCmptRef = backdropFactory.create(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);
-        this._applicationRef.attachView(windowCmptRef.hostView);
-        containerEl.appendChild(windowCmptRef.location.nativeElement);
-        return windowCmptRef;
-    }
-    _registerModalRef(modalRef) {
-        const unregisterModalRef = () => {
-            const index = this._modalRefs.indexOf(modalRef);
-            if (index > -1) {
-                this._modalRefs.splice(index, 1);
-            }
-        };
-        this._modalRefs.push(modalRef);
-        modalRef.result.then(unregisterModalRef, unregisterModalRef);
-    }
-    _registerWindowCmpt(windowCmpt) {
-        this._windowCmpts.push(windowCmpt);
-        this._activeWindowCmptHasChanged.next(null);
-        windowCmpt.onDestroy(() => {
-            const index = this._windowCmpts.indexOf(windowCmpt);
-            if (index > -1) {
-                this._windowCmpts.splice(index, 1);
-                this._activeWindowCmptHasChanged.next(null);
+            else {
+                const dismiss = this._beforeDismiss();
+                if (dismiss && dismiss.then) {
+                    dismiss.then((result) => {
+                        if (result !== false) {
+                            this._dismiss(reason);
+                        }
+                    }, () => { });
+                }
+                else if (dismiss !== false) {
+                    this._dismiss(reason);
+                }
             }
-        });
+        }
     }
-    _setAriaHidden(element) {
-        const parent = element.parentElement;
-        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'));
-                    sibling.setAttribute('aria-hidden', 'true');
-                }
-            });
-            this._setAriaHidden(parent);
+    _removeModalElements() {
+        const windowNativeEl = this._windowCmptRef.location.nativeElement;
+        windowNativeEl.parentNode.removeChild(windowNativeEl);
+        this._windowCmptRef.destroy();
+        if (this._backdropCmptRef) {
+            const backdropNativeEl = this._backdropCmptRef.location.nativeElement;
+            backdropNativeEl.parentNode.removeChild(backdropNativeEl);
+            this._backdropCmptRef.destroy();
+        }
+        if (this._contentRef && this._contentRef.viewRef) {
+            this._contentRef.viewRef.destroy();
         }
+        this._windowCmptRef = null;
+        this._backdropCmptRef = null;
+        this._contentRef = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalStack, deps: [{ token: i0.ApplicationRef }, { token: DOCUMENT }, { token: i0.Injector }, { token: i0.RendererFactory2 }, { token: LuxModalConfig }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalStack, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalStack, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Injector }, { type: i0.RendererFactory2 }, { type: LuxModalConfig }] });
 
+var ModalDismissReasons;
+(function (ModalDismissReasons) {
+    ModalDismissReasons[ModalDismissReasons["BackdropClick"] = 0] = "BackdropClick";
+    ModalDismissReasons[ModalDismissReasons["Esc"] = 1] = "Esc";
+})(ModalDismissReasons || (ModalDismissReasons = {}));
+
+const FOCUS = 'focus';
+var Key;
+(function (Key) {
+    Key[Key["Tab"] = 9] = "Tab";
+    Key[Key["Enter"] = 13] = "Enter";
+    Key[Key["Escape"] = 27] = "Escape";
+    Key[Key["Space"] = 32] = "Space";
+    Key[Key["PageUp"] = 33] = "PageUp";
+    Key[Key["PageDown"] = 34] = "PageDown";
+    Key[Key["End"] = 35] = "End";
+    Key[Key["Home"] = 36] = "Home";
+    Key[Key["ArrowLeft"] = 37] = "ArrowLeft";
+    Key[Key["ArrowUp"] = 38] = "ArrowUp";
+    Key[Key["ArrowRight"] = 39] = "ArrowRight";
+    Key[Key["ArrowDown"] = 40] = "ArrowDown";
+})(Key || (Key = {}));
+const isDefined = (value) => value !== undefined && value !== null;
+class ContentRef {
+    nodes;
+    viewRef;
+    componentRef;
+    constructor(nodes, viewRef, componentRef) {
+        this.nodes = nodes;
+        this.viewRef = viewRef;
+        this.componentRef = componentRef;
+    }
+}
+const FOCUSABLE_ELEMENTS_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[contenteditable]',
+    '[tabindex]:not([tabindex="-1"])'
+].join(', ');
 /**
- * A service that it allow open an close modal components
+ * Returns first and last focusable elements inside of a given element based on specific CSS selector
  */
-class ModalService {
-    modalStack;
-    moduleCFR;
-    constructor(modalStack, moduleCFR) {
-        this.modalStack = modalStack;
-        this.moduleCFR = moduleCFR;
-    }
-    /**Open a modal component
-     * @param content TemplateRef
-     */
-    open(content, options = {}) {
-        return this.modalStack.open(this.moduleCFR, content, options);
+const getFocusableBoundaryElements = (element) => {
+    const list = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)).filter((el) => el.tabIndex !== -1);
+    return [list[0], list[list.length - 1]];
+};
+/**
+ * Function that enforces browser focus to be trapped inside a DOM element.
+ *
+ * Works only for clicks inside the element and navigation with 'Tab', ignoring clicks outside of the element
+ *
+ * @param element The element around which focus will be trapped inside
+ * @param stopFocusTrap$ The observable stream. When completed the focus trap will clean up listeners
+ * and free internal resources
+ * @param refocusOnClick Put the focus back to the last focused element whenever a click occurs on element (default to
+ * false)
+ */
+const focusTrap = (element, stopFocusTrap$, refocusOnClick = false) => {
+    // last focused element
+    const lastFocusedElement$ = fromEvent(element, 'focusin').pipe(takeUntil(stopFocusTrap$), map((e) => e.target));
+    // 'tab' / 'shift+tab' stream
+    fromEvent(element, 'keydown')
+        .pipe(takeUntil(stopFocusTrap$), filter((e) => e.which === Key.Tab), withLatestFrom(lastFocusedElement$))
+        .subscribe(([tabEvent, focusedElement]) => {
+        const [first, last] = getFocusableBoundaryElements(element);
+        if ((focusedElement === first || focusedElement === element) &&
+            tabEvent.shiftKey) {
+            last.focus();
+            tabEvent.preventDefault();
+        }
+        if (focusedElement === last && !tabEvent.shiftKey) {
+            first.focus();
+            tabEvent.preventDefault();
+        }
+    });
+    // inside click
+    if (refocusOnClick) {
+        fromEvent(element, 'click')
+            .pipe(takeUntil(stopFocusTrap$), withLatestFrom(lastFocusedElement$), map((arr) => arr[1]))
+            .subscribe((lastFocusedElement) => lastFocusedElement.focus());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalService, deps: [{ token: ModalStack }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: ModalStack }, { type: i0.ComponentFactoryResolver }] });
+};
 
-class GeolocationService {
-    http;
-    debouncePeriodMs = 300; // ms
-    cacheSize = 20;
-    lastQueriesWithResults = new Map();
-    lastQueriesLru = [];
-    currentSearch$;
-    currentQuery$;
-    constructor(http) {
-        this.http = http;
-        this.currentSearch$ = new Subject();
-        const typed$ = this.currentSearch$
-            .asObservable()
-            .pipe(distinctUntilChanged());
-        this.currentQuery$ = typed$.pipe(debounceTime(this.debouncePeriodMs), switchMap((currentQuery) => {
-            const data = this.getFromCache(currentQuery);
-            if (data !== undefined) {
-                return of(data);
-            }
-            // Nominatim search documentation:
-            // https://nominatim.org/release-docs/develop/api/Search/
-            const url = 'https://nominatim.openstreetmap.org/search?format=json&limit=20&q=' +
-                encodeURIComponent(currentQuery);
-            const headers = {
-                'Content-Type': 'application/json'
-            };
-            this.addToCache(currentQuery, []);
-            return this.http.get(url, { headers }).pipe(map((response) => {
-                const searchResults = response;
-                const uniqueResults = distinct(searchResults);
-                return this.addToCache(currentQuery, uniqueResults);
-            }));
-        }));
-    }
-    searchGeolocation(query) {
-        this.currentSearch$.next(query);
-        return this.currentQuery$;
+class LuxModalWindowComponent {
+    _document = inject(DOCUMENT);
+    _elRef = inject(ElementRef);
+    _elWithFocus; // element that is focused prior to modal opening
+    ariaDescribedBy;
+    ariaLabelledBy;
+    backdrop = false;
+    keyboard = true;
+    windowClass;
+    dismissEvent = new EventEmitter();
+    get class() {
+        return `modal ${this.windowClass || ''}`;
     }
-    getLabels(instance, keys) {
-        const searchResults = instance.lastQueriesWithResults
-            .get(instance.getLatestQuery())
-            .filter((searchResult) => samePosition(searchResult, keys));
-        return of(searchResults.map((searchResult) => {
-            const key = {
-                type: 'Point',
-                coordinates: [searchResult.lon, searchResult.lat]
-            };
-            return {
-                key,
-                label: searchResult.display_name
-            };
-        }));
+    role = 'dialog';
+    tabindex = '-1';
+    ariamodal = true;
+    get hostAriaLabelledBy() {
+        return this.ariaLabelledBy;
     }
-    getData(instance, search) {
-        return instance.searchGeolocation(search).pipe(map((searchResults) => searchResults.map((searchResult) => {
-            const key = {
-                type: 'Point',
-                coordinates: [searchResult.lon, searchResult.lat]
-            };
-            const label = searchResult.display_name;
-            return { key, label };
-        })));
+    get hostAriaDescribedBy() {
+        return this.ariaDescribedBy;
     }
-    // Cache implemementation ---
-    getFromCache(query) {
-        if (this.lastQueriesWithResults.has(query)) {
-            return this.lastQueriesWithResults.get(query);
+    backdropClick(event) {
+        const btn = event.target;
+        if (this.backdrop === true && this._elRef.nativeElement === btn) {
+            this.dismiss(ModalDismissReasons.BackdropClick);
         }
-        return undefined;
     }
-    addToCache(query, data) {
-        if (this.lastQueriesWithResults.keys.length >= this.cacheSize) {
-            const deletedQuery = this.lastQueriesLru[0];
-            this.revomeFromCache(deletedQuery);
+    escKey(event) {
+        if (this.keyboard && !event.defaultPrevented) {
+            this.dismiss(ModalDismissReasons.Esc);
         }
-        this.lastQueriesWithResults.set(query, data);
-        this.lastQueriesLru.push(query);
-        return data;
     }
-    revomeFromCache(query) {
-        this.lastQueriesWithResults.delete(query);
-        const index = this.lastQueriesLru.findIndex((it) => it === query);
-        this.lastQueriesLru.splice(index, 1);
+    dismiss(reason) {
+        this.dismissEvent.emit(reason);
     }
-    getLatestQuery() {
-        return this.lastQueriesLru.length
-            ? this.lastQueriesLru[this.lastQueriesLru.length - 1]
-            : null;
+    ngOnInit() {
+        this._elWithFocus = this._document.activeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeolocationService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeolocationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeolocationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }] });
-const samePosition = (searchResult, keys) => {
-    let found = false;
-    keys.forEach((item) => {
-        if (searchResult.lon === item.coordinates[0] &&
-            searchResult.lat === item.coordinates[1]) {
-            found = true;
-        }
-    });
-    return found;
-};
-const distinct = (data) => {
-    const unique = {};
-    return data.filter((r) => {
-        if (unique[r.display_name]) {
-            return false;
+    ngAfterViewInit() {
+        if (!this._elRef.nativeElement.contains(document.activeElement)) {
+            const firstFocusable = getFocusableBoundaryElements(this._elRef.nativeElement)[0];
+            const elementToFocus = firstFocusable || this._elRef.nativeElement;
+            elementToFocus.focus();
         }
-        unique[r.display_name] = 1;
-        return true;
-    });
-};
-
-let openLayersIsInstalled = false;
-class OpenLayerLoaderService {
-    load() {
-        if (window.ol) {
-            return of(true);
+    }
+    ngOnDestroy() {
+        const body = this._document.body;
+        const elWithFocus = this._elWithFocus;
+        let elementToFocus;
+        if (elWithFocus && elWithFocus[FOCUS] && body.contains(elWithFocus)) {
+            elementToFocus = elWithFocus;
         }
-        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
-            loadCss(openLayerCssUrl, () => { });
-            return from(new Promise((resolve, _) => {
-                loadScript(openLayerJsUrl, () => resolve(true));
-            }));
+        else {
+            elementToFocus = body;
         }
-        return of(true);
+        elementToFocus.focus();
+        this._elWithFocus = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LuxModalWindowComponent, isStandalone: true, selector: "lux-modal-window", inputs: { ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy", backdrop: "backdrop", keyboard: "keyboard", windowClass: "windowClass" }, outputs: { dismissEvent: "dismissEvent" }, host: { listeners: { "click": "backdropClick($event)", "keyup.esc": "escKey($event)" }, properties: { "class": "this.class", "attr.role": "this.role", "tabindex": "this.tabindex", "attr.aria-modal": "this.ariamodal", "attr.aria-labelledby": "this.hostAriaLabelledBy", "attr.aria-describedby": "this.hostAriaDescribedBy" } }, ngImport: i0, template: `
+    <div class="modal-dialog" role="document">
+      <div class="modal-content"><ng-content></ng-content></div>
+    </div>
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-/** Dynamically load a script from url and return a callback */
-const loadScript = (url, callback) => {
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    if (script.readyState) {
-        // for old IE
-        script.onreadystatechange = () => {
-            if (script.readyState === 'loaded' || script.readyState === 'complete') {
-                script.onreadystatechange = null;
-                callback();
-            }
-        };
-    }
-    else {
-        // Others browsers
-        script.onload = () => {
-            callback();
-        };
-    }
-    script.src = url;
-    document.getElementsByTagName('head')[0].appendChild(script);
-};
-/** Dynamically load css from url and return a callback */
-const loadCss = (url, callback) => {
-    const link = document.createElement('link');
-    link.type = 'text/css';
-    link.rel = 'stylesheet';
-    link.type = 'text/javascript';
-    link.href = url;
-    link.onload = () => {
-        callback();
-    };
-    document.getElementsByTagName('head')[0].appendChild(link);
-};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lux-modal-window',
+                    imports: [],
+                    template: `
+    <div class="modal-dialog" role="document">
+      <div class="modal-content"><ng-content></ng-content></div>
+    </div>
+  `
+                }]
+        }], propDecorators: { ariaDescribedBy: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
+            }], keyboard: [{
+                type: Input
+            }], windowClass: [{
+                type: Input
+            }], dismissEvent: [{
+                type: Output
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['tabindex']
+            }], ariamodal: [{
+                type: HostBinding,
+                args: ['attr.aria-modal']
+            }], hostAriaLabelledBy: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], hostAriaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], backdropClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], escKey: [{
+                type: HostListener,
+                args: ['keyup.esc', ['$event']]
+            }] } });
 
-/* eslint-disable no-self-assign */
-class MapComponent {
-    static idCounter = 0;
-    loaded$ = new BehaviorSubject(false);
-    _map;
-    mapId;
-    _zoom;
-    set zoom(zoom) {
-        if (!isNaN(zoom)) {
-            this._zoom = zoom;
-            if (this._map) {
-                this._map.getView().setZoom(zoom);
-            }
-        }
-    }
-    get zoom() {
-        return this._zoom;
-    }
-    _center;
-    set center(center) {
-        if (center && center.coordinates && center.coordinates.length === 2) {
-            this._center = center;
-            if (this._map) {
-                this._map.getView().setCenter(ol.proj.fromLonLat(center.coordinates));
+class ModalStack {
+    _applicationRef = inject(ApplicationRef);
+    _document = inject(DOCUMENT);
+    _injector = inject(Injector);
+    _rendererFactory = inject(RendererFactory2);
+    modalConfig = inject(LuxModalConfig);
+    _activeWindowCmptHasChanged = new Subject();
+    _modalRefs = [];
+    _windowCmpts = [];
+    _ariaHiddenValues = new Map();
+    _backdropAttributes = ['backdropClass'];
+    _windowAttributes = [
+        'ariaLabelledBy',
+        'backdrop',
+        'centered',
+        'keyboard',
+        'scrollable',
+        'size',
+        'windowClass'
+    ];
+    constructor() {
+        this._activeWindowCmptHasChanged.subscribe(() => {
+            if (this._windowCmpts.length) {
+                const activeWindowCmpt = this._windowCmpts[this._windowCmpts.length - 1];
+                focusTrap(activeWindowCmpt.location.nativeElement, this._activeWindowCmptHasChanged);
+                this._revertAriaHidden();
+                this._setAriaHidden(activeWindowCmpt.location.nativeElement);
             }
-        }
-    }
-    get center() {
-        return this._center;
+        });
     }
-    _readonly;
-    set readonly(readonly) {
-        if (!readonly) {
-            if (this._map) {
-                this._map.on('click', (args) => {
-                    // args.coordinate is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
-                    const coordinates = ol.proj.toLonLat(args.coordinate);
-                    // alternatively: const lonLat = ol.proj.transform(args.coordinate,'EPSG:3857','EPSG:4326');
-                    this.addMarkerAtCoordinates(coordinates);
-                });
-                this._map.on('pointermove', (event) => {
-                    const pixel = this._map.getEventPixel(event.originalEvent);
-                    const hit = this._map.hasFeatureAtPixel(pixel);
-                    this._map.getViewport().style.cursor = hit ? 'move' : 'grab';
-                });
+    open(moduleCFR, content, options) {
+        const config = Object.assign({}, this.modalConfig, options);
+        const containerEl = this._document.body;
+        const renderer = this._rendererFactory.createRenderer(null, null);
+        const removeBodyClass = () => {
+            if (!this._modalRefs.length) {
+                renderer.removeClass(this._document.body, 'modal-open');
+                this._revertAriaHidden();
             }
+        };
+        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 modalRef = new ModalRef(windowCmptRef, contentRef, backdropCmptRef);
+        this._registerModalRef(modalRef);
+        this._registerWindowCmpt(windowCmptRef);
+        modalRef.result.then(removeBodyClass, removeBodyClass);
+        activeModal.close = (result) => {
+            modalRef.close(result);
+        };
+        activeModal.dismiss = (reason) => {
+            modalRef.dismiss(reason);
+        };
+        this._applyWindowOptions(windowCmptRef.instance, config);
+        if (this._modalRefs.length === 1) {
+            renderer.addClass(this._document.body, 'modal-open');
         }
-        else {
-            if (this._map) {
-                this._map.on('click', (args) => { });
-                this._map.on('pointermove', (event) => { });
-                this._map.getViewport().style.cursor = 'grab';
-            }
+        if (backdropCmptRef && backdropCmptRef.instance) {
+            this._applyBackgroundOptions(backdropCmptRef.instance, config);
+            backdropCmptRef.changeDetectorRef.detectChanges();
         }
-        this._readonly = readonly;
-        // reset marker coordinates so marker interactions can be created or recreated accordingly
-        // to the changes to readonly
-        this.markerCoordinates = this.markerCoordinates;
-    }
-    get readonly() {
-        return this._readonly;
+        windowCmptRef.changeDetectorRef.detectChanges();
+        return modalRef;
     }
-    _marker;
-    _markerInteraction;
-    _markerCoordinates;
-    set markerCoordinates(markerCoordinates) {
-        if (markerCoordinates && markerCoordinates.length === 2) {
-            this._markerCoordinates = markerCoordinates;
-            if (this._map) {
-                this.addMarkerAtCoordinates(markerCoordinates);
-            }
-        }
-        else {
-            this._markerCoordinates = undefined;
-            if (this._map) {
-                this.removeMarker();
+    _applyWindowOptions(windowInstance, config) {
+        this._windowAttributes.forEach((optionName) => {
+            if (isDefined(config[optionName])) {
+                windowInstance[optionName] = config[optionName];
             }
-        }
-    }
-    get markerCoordinates() {
-        return this._markerCoordinates;
-    }
-    set markerPoint(markerPoint) {
-        if (!markerPoint ||
-            !(markerPoint.coordinates && markerPoint.coordinates.length === 2)) {
-            this.markerCoordinates = undefined;
-        }
-        else {
-            this.markerCoordinates = [
-                +markerPoint.coordinates[0],
-                +markerPoint.coordinates[1]
-            ];
-        }
-        this.valueChange.emit(markerPoint);
-    }
-    get markerPoint() {
-        return {
-            type: 'Point',
-            coordinates: this.markerCoordinates
-        };
-    }
-    valueChange = new EventEmitter();
-    _markerSource;
-    _markerStyle;
-    constructor(olLoader) {
-        olLoader.load().subscribe((_) => {
-            // Initialize
-            this._markerSource = new ol.source.Vector();
-            this._markerStyle = new ol.style.Style({
-                image: new ol.style.Icon({
-                    anchor: [0.5, 1],
-                    scale: 0.25,
-                    src: '/assets/img/marker.png'
-                })
-            });
-            this.loaded$.next(true);
         });
     }
-    ngOnInit() {
-        this.mapId = this.mapId ? this.mapId : 'map' + MapComponent.idCounter++;
-    }
-    ngAfterViewInit() {
-        this.loaded$.subscribe((loaded) => {
-            if (loaded) {
-                this.initMap();
+    _applyBackgroundOptions(backgroudInstance, config) {
+        this._backdropAttributes.forEach((optionName) => {
+            if (isDefined(config[optionName])) {
+                backgroudInstance[optionName] = config[optionName];
             }
         });
     }
-    initMap() {
-        this._map = new ol.Map({
-            target: this.mapId,
-            controls: ol.control.defaults({ attribution: false }),
-            layers: [
-                new ol.layer.Tile({
-                    source: new ol.source.OSM()
-                }),
-                new ol.layer.Vector({
-                    source: this._markerSource,
-                    style: this._markerStyle
-                })
-            ],
-            view: new ol.View({
-                center: ol.proj.fromLonLat(this.center !== undefined ? this.center.coordinates : [0, 0]),
-                zoom: this.zoom
-            })
-        });
-        if (this.center === undefined || this.center === null) {
-            // if the center is not set, we set its default value
-            if ('geolocation' in navigator) {
-                navigator.geolocation.getCurrentPosition((position) => {
-                    this.center = {
-                        type: 'Point',
-                        coordinates: [position.coords.longitude, position.coords.latitude]
-                    };
-                }, (error) => {
-                    this.center = {
-                        type: 'Point',
-                        coordinates: [0, 0]
-                    };
-                });
+    _revertAriaHidden() {
+        this._ariaHiddenValues.forEach((value, element) => {
+            if (value) {
+                element.setAttribute('aria-hidden', value);
             }
             else {
-                this.center = {
-                    type: 'Point',
-                    coordinates: [0, 0]
-                };
+                element.removeAttribute('aria-hidden');
             }
-        }
-        else {
-            // the center needs the map to be properly set, so if it was set before the map was initialized,
-            // we set the center again to perform necessary adjustements
-            this.center = this.center;
-        }
-        if (this.zoom === undefined || this.zoom === null) {
-            // if the zoom is not set, we set its default value
-            this.zoom = 18;
-        }
-        else {
-            // the zoom needs the map to be properly set, so if it was set before the map was initialized,
-            // we set the zoom again to perform necessary adjustements
-            this.zoom = this.zoom;
-        }
-        if (this.readonly === undefined || this.readonly === null) {
-            // if readonly is not set, we set its default value
-            this.readonly = false;
-        }
-        else {
-            // readonly needs the map to be properly set, so if it was set before the map was initialized,
-            // we set readonly again to perform necessary adjustements
-            this.readonly = this.readonly;
-        }
-        if (this.markerCoordinates !== undefined &&
-            this.markerCoordinates !== null) {
-            // the marker coordinates need the map to be properly set, so if they were set before the map was initialized,
-            // we set the marker coordinates again to perform necessary adjustements
-            this.markerCoordinates = this.markerCoordinates;
+        });
+        this._ariaHiddenValues.clear();
+    }
+    getContentRef(moduleCFR, content, activeModal) {
+        if (content instanceof TemplateRef) {
+            return this.createFromTemplateRef(content, activeModal);
         }
     }
-    addMarkerAtCoordinates(coordinates) {
-        if (coordinates && coordinates.length === 2) {
-            if (this._marker !== undefined) {
-                this.removeMarker();
+    createFromTemplateRef(content, activeModal) {
+        const context = {
+            $implicit: activeModal,
+            close(result) {
+                activeModal.close(result);
+            },
+            dismiss(reason) {
+                activeModal.dismiss(reason);
+            }
+        };
+        const viewRef = content.createEmbeddedView(context);
+        this._applicationRef.attachView(viewRef);
+        return new ContentRef([viewRef.rootNodes], viewRef);
+    }
+    _attachBackdrop(moduleCFR, containerEl) {
+        const backdropFactory = moduleCFR.resolveComponentFactory(LuxModalBackdropComponent);
+        const backdropCmptRef = backdropFactory.create(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);
+        this._applicationRef.attachView(windowCmptRef.hostView);
+        containerEl.appendChild(windowCmptRef.location.nativeElement);
+        return windowCmptRef;
+    }
+    _registerModalRef(modalRef) {
+        const unregisterModalRef = () => {
+            const index = this._modalRefs.indexOf(modalRef);
+            if (index > -1) {
+                this._modalRefs.splice(index, 1);
+            }
+        };
+        this._modalRefs.push(modalRef);
+        modalRef.result.then(unregisterModalRef, unregisterModalRef);
+    }
+    _registerWindowCmpt(windowCmpt) {
+        this._windowCmpts.push(windowCmpt);
+        this._activeWindowCmptHasChanged.next(null);
+        windowCmpt.onDestroy(() => {
+            const index = this._windowCmpts.indexOf(windowCmpt);
+            if (index > -1) {
+                this._windowCmpts.splice(index, 1);
+                this._activeWindowCmptHasChanged.next(null);
             }
-            this._marker = new ol.Feature({
-                geometry: new ol.geom.Point(
-                // [lon, lat] is in EPSG:4326 (degrees), we transform it into EPSG:3857 (meters)
-                ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'))
+        });
+    }
+    _setAriaHidden(element) {
+        const parent = element.parentElement;
+        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'));
+                    sibling.setAttribute('aria-hidden', 'true');
+                }
             });
-            this._markerSource.addFeature(this._marker);
-            this._markerCoordinates = this.getMarkerCoordinates();
-            if (!this.readonly) {
-                const dragInteraction = new ol.interaction.Modify({
-                    features: new ol.Collection([this._marker]),
-                    style: this._markerStyle,
-                    pixelTolerance: 50,
-                    hitDetection: true
-                });
-                this._markerInteraction = dragInteraction;
-                this._map.addInteraction(dragInteraction);
-            }
-            this._marker.on('change', () => {
-                this._markerCoordinates = this.getMarkerCoordinates();
-            }, this._marker);
+            this._setAriaHidden(parent);
         }
     }
-    removeMarker() {
-        if (this._marker !== undefined) {
-            this._markerSource.removeFeature(this._marker);
-            this._marker = undefined;
-        }
-        if (this._markerInteraction !== undefined) {
-            this._map.getInteractions().pop();
-            this._markerInteraction = undefined;
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalStack, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalStack, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * A service that it allow open an close modal components
+ */
+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);
     }
-    getMarkerCoordinates() {
-        if (this._marker === undefined || this._marker == null) {
-            return this._marker;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class GeolocationService {
+    http = inject(HttpClient);
+    debouncePeriodMs = 300; // ms
+    cacheSize = 20;
+    lastQueriesWithResults = new Map();
+    lastQueriesLru = [];
+    currentSearch$;
+    currentQuery$;
+    constructor() {
+        this.currentSearch$ = new Subject();
+        const typed$ = this.currentSearch$
+            .asObservable()
+            .pipe(distinctUntilChanged());
+        this.currentQuery$ = typed$.pipe(debounceTime(this.debouncePeriodMs), switchMap((currentQuery) => {
+            const data = this.getFromCache(currentQuery);
+            if (data !== undefined) {
+                return of(data);
+            }
+            // Nominatim search documentation:
+            // https://nominatim.org/release-docs/develop/api/Search/
+            const url = 'https://nominatim.openstreetmap.org/search?format=json&limit=20&q=' +
+                encodeURIComponent(currentQuery);
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            this.addToCache(currentQuery, []);
+            return this.http.get(url, { headers }).pipe(map((response) => {
+                const searchResults = response;
+                const uniqueResults = distinct(searchResults);
+                return this.addToCache(currentQuery, uniqueResults);
+            }));
+        }));
+    }
+    searchGeolocation(query) {
+        this.currentSearch$.next(query);
+        return this.currentQuery$;
+    }
+    getLabels(instance, keys) {
+        const searchResults = instance.lastQueriesWithResults
+            .get(instance.getLatestQuery())
+            .filter((searchResult) => samePosition(searchResult, keys));
+        return of(searchResults.map((searchResult) => {
+            const key = {
+                type: 'Point',
+                coordinates: [searchResult.lon, searchResult.lat]
+            };
+            return {
+                key,
+                label: searchResult.display_name
+            };
+        }));
+    }
+    getData(instance, search) {
+        return instance.searchGeolocation(search).pipe(map((searchResults) => searchResults.map((searchResult) => {
+            const key = {
+                type: 'Point',
+                coordinates: [searchResult.lon, searchResult.lat]
+            };
+            const label = searchResult.display_name;
+            return { key, label };
+        })));
+    }
+    // Cache implemementation ---
+    getFromCache(query) {
+        if (this.lastQueriesWithResults.has(query)) {
+            return this.lastQueriesWithResults.get(query);
         }
-        const coordinates = this._marker.getGeometry().getCoordinates();
-        // coordinates is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
-        return ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
+        return undefined;
     }
-    onResize() {
-        if (this._map) {
-            this._map.updateSize();
+    addToCache(query, data) {
+        if (this.lastQueriesWithResults.keys.length >= this.cacheSize) {
+            const deletedQuery = this.lastQueriesLru[0];
+            this.revomeFromCache(deletedQuery);
         }
+        this.lastQueriesWithResults.set(query, data);
+        this.lastQueriesLru.push(query);
+        return data;
+    }
+    revomeFromCache(query) {
+        this.lastQueriesWithResults.delete(query);
+        const index = this.lastQueriesLru.findIndex((it) => it === query);
+        this.lastQueriesLru.splice(index, 1);
+    }
+    getLatestQuery() {
+        return this.lastQueriesLru.length
+            ? this.lastQueriesLru[this.lastQueriesLru.length - 1]
+            : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MapComponent, deps: [{ token: OpenLayerLoaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: MapComponent, isStandalone: false, 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MapComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'lux-map', template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: OpenLayerLoaderService }], propDecorators: { mapId: [{
-                type: Input
-            }], zoom: [{
-                type: Input
-            }], center: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], markerCoordinates: [{
-                type: Input
-            }], markerPoint: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+const samePosition = (searchResult, keys) => {
+    let found = false;
+    keys.forEach((item) => {
+        if (searchResult.lon === item.coordinates[0] &&
+            searchResult.lat === item.coordinates[1]) {
+            found = true;
+        }
+    });
+    return found;
+};
+const distinct = (data) => {
+    const unique = {};
+    return data.filter((r) => {
+        if (unique[r.display_name]) {
+            return false;
+        }
+        unique[r.display_name] = 1;
+        return true;
+    });
+};
 
 class GeolocationComponent {
-    modalService;
-    locationService;
+    modalService = inject(ModalService);
+    locationService = inject(GeolocationService);
     static idCounter = 0;
     latitude;
     longitude;
@@ -2660,10 +2703,6 @@ class GeolocationComponent {
     keyPress = new EventEmitter();
     onChange = (value) => { };
     onTouched = () => { };
-    constructor(modalService, locationService) {
-        this.modalService = modalService;
-        this.locationService = locationService;
-    }
     // ControlValueAccessor Interface implementation
     writeValue(value) {
         this.value = value;
@@ -2872,8 +2911,8 @@ class GeolocationComponent {
         this.minLongitude = this.minLongitude || -180;
         this.maxLongitude = this.maxLongitude || +180;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeolocationComponent, deps: [{ token: ModalService }, { token: GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: GeolocationComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: GeolocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: GeolocationComponent, isStandalone: true, selector: "lux-geolocation", inputs: { minLatitude: "minLatitude", maxLatitude: "maxLatitude", minLongitude: "minLongitude", maxLongitude: "maxLongitude", step: "step", zoom: "zoom", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -2884,11 +2923,17 @@ 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\n  #latitude\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$latitude'\"\n  [(ngModel)]=\"latitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLatitude !== undefined && minLatitude !== null\n      ? minLatitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLatitude !== undefined && maxLatitude !== null\n      ? maxLatitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lat\"\n  (keyup)=\"onEventLatitude(latitude.value)\"\n  (change)=\"onEventLatitude(latitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol monospace clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\">\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.north\n  }}</span>\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.south\n  }}</span>\n  <span *ngIf=\"!isValidNumber(latitudeValue)\">-</span>\n</div>\n<input\n  #longitude\n  class=\"prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$longitude'\"\n  [(ngModel)]=\"longitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLongitude !== undefined && minLongitude !== null\n      ? minLongitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLongitude !== undefined && maxLongitude !== null\n      ? maxLongitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lon\"\n  (keyup)=\"onEventLongitude(longitude.value)\"\n  (change)=\"onEventLongitude(longitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol monospace clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.east\n  }}</span>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.west\n  }}</span>\n  <span *ngIf=\"!isValidNumber(longitudeValue)\">-</span>\n</div>\n<div\n  [class]=\"\n    disabled || readonly || !isClearable()\n      ? 'clickable rounded-right postfix symbol'\n      : 'clickable postfix symbol'\n  \"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span class=\"icon-globe\"></span>\n</div>\n<button\n  #clearButton\n  *ngIf=\"!disabled && !readonly && isClearable()\"\n  class=\"rounded-right postfix bordered icon icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  type=\"button\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ i18n[lang].userErrors.required }}\n  </div>\n  <div *ngIf=\"lastErrors.minLatitude\">\n    {{\n      i18n[lang].userErrors.minLatitude.replace(\n        '$minLatitude',\n        lastErrors.minLatitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLatitude\">\n    {{\n      i18n[lang].userErrors.maxLatitude.replace(\n        '$maxLatitude',\n        lastErrors.maxLatitude.max\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.minLongitude\">\n    {{\n      i18n[lang].userErrors.minLongitude.replace(\n        '$minLongitude',\n        lastErrors.minLongitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLongitude\">\n    {{\n      i18n[lang].userErrors.maxLongitude.replace(\n        '$maxLongitude',\n        lastErrors.maxLongitude.max\n      )\n    }}\n  </div>\n</div>\n\n<ng-template #modalMap let-modal>\n  <div class=\"lux-modal-header\">\n    <h4 class=\"modal-title default-font\" id=\"modal-basic-title\">{{ mapTitle }}</h4>\n    <button\n      type=\"button\"\n      class=\"close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss('Cross click')\"\n    >\n      <span aria-hidden=\"true\">\u00D7</span>\n    </button>\n  </div>\n  <div class=\"lux-modal-body content\">\n    <lux-autocomplete\n      #searchBar\n      [attr.aria-label]=\"i18n[lang].typeToSearch\"\n      [placeholder]=\"i18n[lang].typeToSearch\"\n      *ngIf=\"!disabled && !readonly\"\n      [instance]=\"self\"\n      [resolveLabelsFunction]=\"getLabels\"\n      [populateFunction]=\"getData\"\n      (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\n    ></lux-autocomplete>\n    <div class=\"map-container\">\n      <lux-map\n        #map\n        [center]=\"value\"\n        [markerPoint]=\"value\"\n        [zoom]=\"zoom\"\n        [readonly]=\"readonly === true || disabled === true ? true : false\"\n      ></lux-map>\n    </div>\n  </div>\n  <div class=\"lux-modal-footer\">\n    <button\n      *ngIf=\"disabled || readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].closeAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].cancelAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-select\"\n      (click)=\"modal.close(map.markerPoint.coordinates)\"\n    >\n      {{ i18n[lang].selectAction }}\n    </button>\n  </div>\n</ng-template>\n", 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: "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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "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  } @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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeolocationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GeolocationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-geolocation', providers: [
+            args: [{ selector: 'lux-geolocation', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        AutocompleteComponent,
+                        MapComponent
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -2899,8 +2944,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => GeolocationComponent)
                         }
-                    ], template: "<input\n  #latitude\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$latitude'\"\n  [(ngModel)]=\"latitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLatitude !== undefined && minLatitude !== null\n      ? minLatitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLatitude !== undefined && maxLatitude !== null\n      ? maxLatitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lat\"\n  (keyup)=\"onEventLatitude(latitude.value)\"\n  (change)=\"onEventLatitude(latitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol monospace clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\">\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.north\n  }}</span>\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.south\n  }}</span>\n  <span *ngIf=\"!isValidNumber(latitudeValue)\">-</span>\n</div>\n<input\n  #longitude\n  class=\"prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$longitude'\"\n  [(ngModel)]=\"longitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLongitude !== undefined && minLongitude !== null\n      ? minLongitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLongitude !== undefined && maxLongitude !== null\n      ? maxLongitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lon\"\n  (keyup)=\"onEventLongitude(longitude.value)\"\n  (change)=\"onEventLongitude(longitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol monospace clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.east\n  }}</span>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.west\n  }}</span>\n  <span *ngIf=\"!isValidNumber(longitudeValue)\">-</span>\n</div>\n<div\n  [class]=\"\n    disabled || readonly || !isClearable()\n      ? 'clickable rounded-right postfix symbol'\n      : 'clickable postfix symbol'\n  \"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span class=\"icon-globe\"></span>\n</div>\n<button\n  #clearButton\n  *ngIf=\"!disabled && !readonly && isClearable()\"\n  class=\"rounded-right postfix bordered icon icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  type=\"button\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ i18n[lang].userErrors.required }}\n  </div>\n  <div *ngIf=\"lastErrors.minLatitude\">\n    {{\n      i18n[lang].userErrors.minLatitude.replace(\n        '$minLatitude',\n        lastErrors.minLatitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLatitude\">\n    {{\n      i18n[lang].userErrors.maxLatitude.replace(\n        '$maxLatitude',\n        lastErrors.maxLatitude.max\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.minLongitude\">\n    {{\n      i18n[lang].userErrors.minLongitude.replace(\n        '$minLongitude',\n        lastErrors.minLongitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLongitude\">\n    {{\n      i18n[lang].userErrors.maxLongitude.replace(\n        '$maxLongitude',\n        lastErrors.maxLongitude.max\n      )\n    }}\n  </div>\n</div>\n\n<ng-template #modalMap let-modal>\n  <div class=\"lux-modal-header\">\n    <h4 class=\"modal-title default-font\" id=\"modal-basic-title\">{{ mapTitle }}</h4>\n    <button\n      type=\"button\"\n      class=\"close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss('Cross click')\"\n    >\n      <span aria-hidden=\"true\">\u00D7</span>\n    </button>\n  </div>\n  <div class=\"lux-modal-body content\">\n    <lux-autocomplete\n      #searchBar\n      [attr.aria-label]=\"i18n[lang].typeToSearch\"\n      [placeholder]=\"i18n[lang].typeToSearch\"\n      *ngIf=\"!disabled && !readonly\"\n      [instance]=\"self\"\n      [resolveLabelsFunction]=\"getLabels\"\n      [populateFunction]=\"getData\"\n      (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\n    ></lux-autocomplete>\n    <div class=\"map-container\">\n      <lux-map\n        #map\n        [center]=\"value\"\n        [markerPoint]=\"value\"\n        [zoom]=\"zoom\"\n        [readonly]=\"readonly === true || disabled === true ? true : false\"\n      ></lux-map>\n    </div>\n  </div>\n  <div class=\"lux-modal-footer\">\n    <button\n      *ngIf=\"disabled || readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].closeAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].cancelAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-select\"\n      (click)=\"modal.close(map.markerPoint.coordinates)\"\n    >\n      {{ i18n[lang].selectAction }}\n    </button>\n  </div>\n</ng-template>\n", 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"] }]
-        }], ctorParameters: () => [{ type: ModalService }, { type: GeolocationService }], propDecorators: { latitude: [{
+                    ], 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"] }]
+        }], propDecorators: { latitude: [{
                 type: ViewChild,
                 args: ['latitude', { static: true }]
             }], longitude: [{
@@ -3129,16 +3174,17 @@ class RegexpService {
         // TODO: RETURN AN EMPTY STRING
         return 'NO DEBERÍA SER POSIBLE';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RegexpService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RegexpService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RegexpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RegexpService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 class InputComponent {
-    regexpService;
+    regexpService = inject(RegexpService);
+    cdr = inject(ChangeDetectorRef);
     static idCounter = 0;
     input;
     textarea;
@@ -3146,7 +3192,7 @@ class InputComponent {
     touched = false;
     dirty = false;
     lastErrors = null;
-    _disabled;
+    _disabled = false;
     _value = '';
     _type;
     _placeholder;
@@ -3192,6 +3238,7 @@ class InputComponent {
     set disabled(v) {
         v = typeof v === 'string' ? true : v;
         this._disabled = v;
+        this.cdr.markForCheck();
     }
     get disabled() {
         return this._disabled;
@@ -3268,9 +3315,6 @@ class InputComponent {
     keyPress = new EventEmitter();
     onChange = (value) => { };
     onTouched = () => { };
-    constructor(regexpService) {
-        this.regexpService = regexpService;
-    }
     // ControlValueAccessor Interface implementation
     writeValue(value) {
         this.value = value;
@@ -3520,8 +3564,8 @@ class InputComponent {
         this.max = this.max || 1000.0;
         this.placeholder = '0.00';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputComponent, deps: [{ token: RegexpService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: InputComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputComponent, isStandalone: true, selector: "lux-input", inputs: { rows: "rows", cols: "cols", step: "step", min: "min", max: "max", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", pattern: "pattern", currency: "currency", placeholder: "placeholder", required: "required", type: "type", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3532,11 +3576,11 @@ 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: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n  <span>$</span>\n</div>\n<input\n  #input\n  *ngIf=\"type !== 'textarea'\"\n  [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [type]=\"domain\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"min?.toString() || undefined\"\n  [attr.max]=\"max?.toString() || undefined\"\n  [attr.step]=\"step?.toString() || undefined\"\n  [attr.pattern]=\"pattern || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(input.value)\"\n  (change)=\"onChangeValue(input.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<textarea\n  #textarea\n  *ngIf=\"type === 'textarea'\"\n  class=\"rounded\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.cols]=\"cols?.toString() || undefined\"\n  [attr.rows]=\"rows?.toString() || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(textarea.value)\"\n  (change)=\"onChangeValue(textarea.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u2030</span>\n</div>\n<div *ngIf=\"isUrl() && !!value\" class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\n  <a href=\"{{ value }}\" target=\"_blank\">\n    <span class=\"icon-external\"></span>\n  </a>\n</div>\n<div *ngIf=\"isColor()\" class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\n  <div class=\"rounded-right full-space\" [ngStyle]=\"{'background-color': color}\">\n    <input\n      #colorpicker\n      class=\"minimal-space clickable invisible rounded-right full-space\"\n      [id]=\"inputId + '$colorpicker'\"\n      type=\"color\"\n      [attr.value]=\"value\"\n      [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n      [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n      (change)=\"onColorPicked(colorpicker.value)\"\n      (keypress)=\"onKeyPress($event)\"\n      (blur)=\"onLostFocus()\"\n    />\n  </div>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[this.lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n  <div *ngIf=\"lastErrors.url\">{{ userErrors[this.lang].url }}</div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n", 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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }], ngImport: i0, template: "@if (currency && currency === 'USD') {\r\n<div class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\r\n  <span>$</span>\r\n</div>\r\n} @if (type !== 'textarea') {\r\n<input\r\n  #input\r\n  [class]=\"\r\n    hasPrefix()\r\n      ? hasPostfix()\r\n        ? 'infix'\r\n        : 'postfix rounded-right'\r\n      : hasPostfix()\r\n      ? 'prefix rounded-left'\r\n      : 'rounded'\r\n  \"\r\n  [ngClass]=\"className\"\r\n  placement=\"top\"\r\n  [id]=\"inputId\"\r\n  [type]=\"domain\"\r\n  [attr.value]=\"value\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [disabled]=\"disabled === true\"\r\n  [readonly]=\"readonly === true\"\r\n  [attr.min]=\"min?.toString() || undefined\"\r\n  [attr.max]=\"max?.toString() || undefined\"\r\n  [attr.step]=\"step?.toString() || undefined\"\r\n  [attr.pattern]=\"pattern || undefined\"\r\n  [placeholder]=\"placeholder\"\r\n  (keyup)=\"onKeyUp(input.value)\"\r\n  (change)=\"onChangeValue(input.value)\"\r\n  (keypress)=\"onKeyPress($event)\"\r\n  (blur)=\"onLostFocus()\"\r\n/>\r\n} @if (type === 'textarea') {\r\n<textarea\r\n  #textarea\r\n  class=\"rounded\"\r\n  [ngClass]=\"className\"\r\n  placement=\"top\"\r\n  [id]=\"inputId\"\r\n  [attr.value]=\"value\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [disabled]=\"disabled === true\"\r\n  [readonly]=\"readonly === true\"\r\n  [attr.cols]=\"cols?.toString() || undefined\"\r\n  [attr.rows]=\"rows?.toString() || undefined\"\r\n  [placeholder]=\"placeholder\"\r\n  (keyup)=\"onKeyUp(textarea.value)\"\r\n  (change)=\"onChangeValue(textarea.value)\"\r\n  (keypress)=\"onKeyPress($event)\"\r\n  (blur)=\"onLostFocus()\"\r\n></textarea>\r\n} @if (currency && currency === 'EUR') {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n  <span>\u20AC</span>\r\n</div>\r\n} @if (isPercentage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n  <span>%</span>\r\n</div>\r\n} @if (isPermillage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n  <span>\u2030</span>\r\n</div>\r\n} @if (isUrl() && !!value) {\r\n<div class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\r\n  <a href=\"{{ value }}\" target=\"_blank\">\r\n    <span class=\"icon-external\"></span>\r\n  </a>\r\n</div>\r\n} @if (isColor()) {\r\n<div class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\r\n  <div\r\n    class=\"rounded-right full-space\"\r\n    [ngStyle]=\"{ 'background-color': color }\"\r\n  >\r\n    <input\r\n      #colorpicker\r\n      class=\"minimal-space clickable invisible rounded-right full-space\"\r\n      [id]=\"inputId + '$colorpicker'\"\r\n      type=\"color\"\r\n      [attr.value]=\"value\"\r\n      [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n      [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n      (change)=\"onColorPicked(colorpicker.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n  </div>\r\n</div>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n  @if (lastErrors.required) {\r\n  <div>\r\n    {{ userErrors[this.lang].required }}\r\n  </div>\r\n  } @if (lastErrors.email) {\r\n  <div>{{ userErrors[this.lang].email }}</div>\r\n  } @if (lastErrors.url) {\r\n  <div>{{ userErrors[this.lang].url }}</div>\r\n  } @if (lastErrors.min) {\r\n  <div>\r\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n  </div>\r\n  } @if (lastErrors.max) {\r\n  <div>\r\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(#fff 0deg 90deg,#d3d3d3 90deg 180deg,#fff 180deg 270deg,#d3d3d3 270deg 360deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-input', providers: [
+            args: [{ selector: 'lux-input', imports: [CommonModule, FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -3547,8 +3591,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => InputComponent)
                         }
-                    ], template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n  <span>$</span>\n</div>\n<input\n  #input\n  *ngIf=\"type !== 'textarea'\"\n  [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [type]=\"domain\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"min?.toString() || undefined\"\n  [attr.max]=\"max?.toString() || undefined\"\n  [attr.step]=\"step?.toString() || undefined\"\n  [attr.pattern]=\"pattern || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(input.value)\"\n  (change)=\"onChangeValue(input.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<textarea\n  #textarea\n  *ngIf=\"type === 'textarea'\"\n  class=\"rounded\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.cols]=\"cols?.toString() || undefined\"\n  [attr.rows]=\"rows?.toString() || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(textarea.value)\"\n  (change)=\"onChangeValue(textarea.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u2030</span>\n</div>\n<div *ngIf=\"isUrl() && !!value\" class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\n  <a href=\"{{ value }}\" target=\"_blank\">\n    <span class=\"icon-external\"></span>\n  </a>\n</div>\n<div *ngIf=\"isColor()\" class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\n  <div class=\"rounded-right full-space\" [ngStyle]=\"{'background-color': color}\">\n    <input\n      #colorpicker\n      class=\"minimal-space clickable invisible rounded-right full-space\"\n      [id]=\"inputId + '$colorpicker'\"\n      type=\"color\"\n      [attr.value]=\"value\"\n      [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n      [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n      (change)=\"onColorPicked(colorpicker.value)\"\n      (keypress)=\"onKeyPress($event)\"\n      (blur)=\"onLostFocus()\"\n    />\n  </div>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[this.lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n  <div *ngIf=\"lastErrors.url\">{{ userErrors[this.lang].url }}</div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n", 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"] }]
-        }], ctorParameters: () => [{ type: RegexpService }], propDecorators: { input: [{
+                    ], template: "@if (currency && currency === 'USD') {\r\n<div class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\r\n  <span>$</span>\r\n</div>\r\n} @if (type !== 'textarea') {\r\n<input\r\n  #input\r\n  [class]=\"\r\n    hasPrefix()\r\n      ? hasPostfix()\r\n        ? 'infix'\r\n        : 'postfix rounded-right'\r\n      : hasPostfix()\r\n      ? 'prefix rounded-left'\r\n      : 'rounded'\r\n  \"\r\n  [ngClass]=\"className\"\r\n  placement=\"top\"\r\n  [id]=\"inputId\"\r\n  [type]=\"domain\"\r\n  [attr.value]=\"value\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [disabled]=\"disabled === true\"\r\n  [readonly]=\"readonly === true\"\r\n  [attr.min]=\"min?.toString() || undefined\"\r\n  [attr.max]=\"max?.toString() || undefined\"\r\n  [attr.step]=\"step?.toString() || undefined\"\r\n  [attr.pattern]=\"pattern || undefined\"\r\n  [placeholder]=\"placeholder\"\r\n  (keyup)=\"onKeyUp(input.value)\"\r\n  (change)=\"onChangeValue(input.value)\"\r\n  (keypress)=\"onKeyPress($event)\"\r\n  (blur)=\"onLostFocus()\"\r\n/>\r\n} @if (type === 'textarea') {\r\n<textarea\r\n  #textarea\r\n  class=\"rounded\"\r\n  [ngClass]=\"className\"\r\n  placement=\"top\"\r\n  [id]=\"inputId\"\r\n  [attr.value]=\"value\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [disabled]=\"disabled === true\"\r\n  [readonly]=\"readonly === true\"\r\n  [attr.cols]=\"cols?.toString() || undefined\"\r\n  [attr.rows]=\"rows?.toString() || undefined\"\r\n  [placeholder]=\"placeholder\"\r\n  (keyup)=\"onKeyUp(textarea.value)\"\r\n  (change)=\"onChangeValue(textarea.value)\"\r\n  (keypress)=\"onKeyPress($event)\"\r\n  (blur)=\"onLostFocus()\"\r\n></textarea>\r\n} @if (currency && currency === 'EUR') {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n  <span>\u20AC</span>\r\n</div>\r\n} @if (isPercentage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n  <span>%</span>\r\n</div>\r\n} @if (isPermillage()) {\r\n<div class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\r\n  <span>\u2030</span>\r\n</div>\r\n} @if (isUrl() && !!value) {\r\n<div class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\r\n  <a href=\"{{ value }}\" target=\"_blank\">\r\n    <span class=\"icon-external\"></span>\r\n  </a>\r\n</div>\r\n} @if (isColor()) {\r\n<div class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\r\n  <div\r\n    class=\"rounded-right full-space\"\r\n    [ngStyle]=\"{ 'background-color': color }\"\r\n  >\r\n    <input\r\n      #colorpicker\r\n      class=\"minimal-space clickable invisible rounded-right full-space\"\r\n      [id]=\"inputId + '$colorpicker'\"\r\n      type=\"color\"\r\n      [attr.value]=\"value\"\r\n      [attr.disabled]=\"disabled === true ? 'true' : undefined\"\r\n      [attr.readonly]=\"readonly === true ? 'true' : undefined\"\r\n      (change)=\"onColorPicked(colorpicker.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n  </div>\r\n</div>\r\n} @if (inlineErrors && lastErrors && (dirty || touched)) {\r\n<div class=\"alert\">\r\n  @if (lastErrors.required) {\r\n  <div>\r\n    {{ userErrors[this.lang].required }}\r\n  </div>\r\n  } @if (lastErrors.email) {\r\n  <div>{{ userErrors[this.lang].email }}</div>\r\n  } @if (lastErrors.url) {\r\n  <div>{{ userErrors[this.lang].url }}</div>\r\n  } @if (lastErrors.min) {\r\n  <div>\r\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\r\n  </div>\r\n  } @if (lastErrors.max) {\r\n  <div>\r\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(#fff 0deg 90deg,#d3d3d3 90deg 180deg,#fff 180deg 270deg,#d3d3d3 270deg 360deg)}\n"] }]
+        }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
             }], textarea: [{
@@ -3612,17 +3656,18 @@ var Placement;
 class TooltipComponent {
     context;
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TooltipComponent, isStandalone: false, selector: "ng-component", inputs: { context: "context" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TooltipComponent, isStandalone: true, selector: "lux-tooltip", inputs: { context: "context" }, ngImport: i0, template: `
     <span class="lux-tooltip" style="transition: opacity 200ms">{{
       context.message
     }}</span>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{
-                    standalone: false,
+                    selector: 'lux-tooltip',
+                    imports: [],
                     template: `
     <span class="lux-tooltip" style="transition: opacity 200ms">{{
       context.message
@@ -3643,14 +3688,9 @@ class TooltipContentRef {
 }
 
 class TooltipService {
-    _injector;
-    _crf;
-    _applicationRef;
-    constructor(_injector, _crf, _applicationRef) {
-        this._injector = _injector;
-        this._crf = _crf;
-        this._applicationRef = _applicationRef;
-    }
+    _injector = inject(Injector);
+    _crf = inject(ComponentFactoryResolver);
+    _applicationRef = inject(ApplicationRef);
     appendComponentToBody(content, elHost, placement) {
         const tooltipContentRef = this.getTooltipContentRef(content);
         if (tooltipContentRef) {
@@ -3767,19 +3807,19 @@ class TooltipService {
         domElem.style.left = `${left}px`;
         return domElem;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TooltipService, deps: [{ token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TooltipService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TooltipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }] });
+        }] });
 
 /**
  * Tooltip directive
  */
 class LuxTooltipDirective {
-    elHost;
-    tooltipService;
+    elHost = inject(ElementRef);
+    tooltipService = inject(TooltipService);
     /** Tooltip title */
     luxTooltip;
     /** Component, TemplateRef or String */
@@ -3787,13 +3827,13 @@ class LuxTooltipDirective {
     /** Placement */
     placement;
     tooltipRef;
-    constructor(elHost, tooltipService) {
-        this.elHost = elHost;
-        this.tooltipService = tooltipService;
-    }
     onMouseEnter() {
         if (!this.tooltipRef) {
-            this.tooltipRef = this.show(this.content, this.elHost, this.placement);
+            // Use luxTooltip if provided, otherwise use content
+            const tooltipContent = this.luxTooltip || this.content;
+            if (tooltipContent) {
+                this.tooltipRef = this.show(tooltipContent, this.elHost, this.placement);
+            }
         }
     }
     onMouseLeave() {
@@ -3814,16 +3854,17 @@ class LuxTooltipDirective {
     remove(tooltipRef) {
         this.tooltipService.removeComponentFromBody(tooltipRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: LuxTooltipDirective, isStandalone: false, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: LuxTooltipDirective, isStandalone: true, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, providers: [TooltipService], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: false,
-                    selector: '[luxTooltip]'
+                    selector: '[luxTooltip]',
+                    standalone: true,
+                    providers: [TooltipService]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: TooltipService }], propDecorators: { luxTooltip: [{
+        }], propDecorators: { luxTooltip: [{
                 type: Input
             }], content: [{
                 type: Input
@@ -3963,12 +4004,12 @@ class PaginationComponent {
         this.next = l.next;
         this.last = l.last;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: PaginationComponent, isStandalone: false, selector: "lux-pagination", inputs: { lang: "lang", paginationInfo: "paginationInfo" }, outputs: { goToPage: "goToPage", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n  <ng-container *ngIf=\"!hidePrevious\">\n    <a\n      luxTooltip\n      [content]=\"first\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onFirst()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left-end\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"previous\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onPrevious()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left\"\n    ></a>\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n  <ng-container *ngFor=\"let pageNum of pages\">\n    <a\n      placement=\"top\"\n      delay=\"500\"\n      [ngClass]=\"{\n        disabled: pageNum === paginationInfo.page,\n        enabled: pageNum !== paginationInfo.page\n      }\"\n      class=\"button-pagination\"\n      (click)=\"onPage(pageNum)\"\n      >{{ pageNum + 1 }}</a\n    >\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n  <ng-container *ngIf=\"!lastPage\">\n    <a\n      luxTooltip\n      [content]=\"next\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onNext()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"last\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onLast()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right-end\"\n    ></a>\n  </ng-container>\n</div>\n", 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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: ["luxTooltip", "content", "placement"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PaginationComponent, isStandalone: true, selector: "lux-pagination", inputs: { lang: "lang", paginationInfo: "paginationInfo" }, outputs: { goToPage: "goToPage", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "@if (showPagination) {\r\n<div class=\"lux-pagination\">\r\n  @if (!hidePrevious) {\r\n  <a\r\n    luxTooltip\r\n    [content]=\"first\"\r\n    placement=\"top\"\r\n    delay=\"500\"\r\n    (click)=\"onFirst()\"\r\n    [ngClass]=\"{\r\n      enabledFirstLast: !hidePrevious\r\n    }\"\r\n    class=\"button-pagination icon arrow-left-end\"\r\n  ></a>\r\n  <a\r\n    luxTooltip\r\n    [content]=\"previous\"\r\n    placement=\"top\"\r\n    delay=\"500\"\r\n    (click)=\"onPrevious()\"\r\n    [ngClass]=\"{\r\n      enabledFirstLast: !hidePrevious\r\n    }\"\r\n    class=\"button-pagination icon arrow-left\"\r\n  ></a>\r\n  } @if (displayPreviousEllipsis) {\r\n  <span class=\"ellipsis\">...</span>\r\n  } @for (pageNum of pages; track pageNum) {\r\n  <a\r\n    placement=\"top\"\r\n    delay=\"500\"\r\n    [ngClass]=\"{\r\n      disabled: pageNum === paginationInfo.page,\r\n      enabled: pageNum !== paginationInfo.page\r\n    }\"\r\n    class=\"button-pagination\"\r\n    (click)=\"onPage(pageNum)\"\r\n    >{{ pageNum + 1 }}</a\r\n  >\r\n  } @if (displayNextEllipsis) {\r\n  <span class=\"ellipsis\">...</span>\r\n  } @if (!lastPage) {\r\n  <a\r\n    luxTooltip\r\n    [content]=\"next\"\r\n    placement=\"top\"\r\n    delay=\"500\"\r\n    (click)=\"onNext()\"\r\n    [ngClass]=\"{\r\n      enabledFirstLast: !lastPage\r\n    }\"\r\n    class=\"button-pagination icon arrow-right\"\r\n  ></a>\r\n  <a\r\n    luxTooltip\r\n    [content]=\"last\"\r\n    placement=\"top\"\r\n    delay=\"500\"\r\n    (click)=\"onLast()\"\r\n    [ngClass]=\"{\r\n      enabledFirstLast: !lastPage\r\n    }\"\r\n    class=\"button-pagination icon arrow-right-end\"\r\n  ></a>\r\n  }\r\n</div>\r\n}\r\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:#fff;align-items:center}.disabled{cursor:not-allowed;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-disabled-color, white);background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-enabled-color, #325c81);width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:min-content}.button-pagination{width:var(--lux-pagination-button-width, 1em);height:var(--lux-pagination-button-height, 1.2em);font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A  <title>background</title>%0A  <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A  <title>Layer 1</title>%0A  <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24  \"/>%0A </g>%0A</svg>%0A');background-position:.4em}.arrow-left{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A  <title>background</title>%0A  <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A  <title>Layer 1</title>%0A  <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24  \"/>%0A </g>%0A</svg>%0A');transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A  <title>background</title>%0A  <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A  <title>Layer 1</title>%0A  <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24  \"/>%0A    <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24  \"/>%0A </g>%0A</svg>%0A');background-position:.1em}.arrow-left-end{background-image:url('data:image/svg+xml,<svg width=\"68\" height=\"48\" xmlns=\"http://www.w3.org/2000/svg\">%0A%0A <g>%0A  <title>background</title>%0A  <rect fill=\"none\" id=\"canvas_background\" height=\"402\" width=\"1082\" y=\"-1\" x=\"-1\"/>%0A </g>%0A <g>%0A  <title>Layer 1</title>%0A  <polygon fill=\"%23325C81\" id=\"svg_2\" points=\"21.8,45.7 10.4,44.3 30.8,24 10.4,3.7 21.8,2.3 43.5,24  \"/>%0A    <polygon fill=\"%23325C81\" id=\"svg_3\" points=\"41.8,45.7 30.4,44.3 50.8,24 30.4,3.7 41.8,2.3 63.5,24  \"/>%0A </g>%0A</svg>%0A');background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width:300px)and (max-width:500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width:500px)and (max-width:850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width:900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: ["luxTooltip", "content", "placement"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-pagination', template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n  <ng-container *ngIf=\"!hidePrevious\">\n    <a\n      luxTooltip\n      [content]=\"first\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onFirst()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left-end\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"previous\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onPrevious()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left\"\n    ></a>\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n  <ng-container *ngFor=\"let pageNum of pages\">\n    <a\n      placement=\"top\"\n      delay=\"500\"\n      [ngClass]=\"{\n        disabled: pageNum === paginationInfo.page,\n        enabled: pageNum !== paginationInfo.page\n      }\"\n      class=\"button-pagination\"\n      (click)=\"onPage(pageNum)\"\n      >{{ pageNum + 1 }}</a\n    >\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n  <ng-container *ngIf=\"!lastPage\">\n    <a\n      luxTooltip\n      [content]=\"next\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onNext()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"last\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onLast()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right-end\"\n    ></a>\n  </ng-container>\n</div>\n", 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: [{
@@ -4057,8 +4098,8 @@ class RadiogroupComponent {
         }
         return item;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: RadiogroupComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RadiogroupComponent, isStandalone: true, selector: "lux-radiogroup", inputs: { name: "name", disabled: "disabled", readonly: "readonly", required: "required", items: "items", value: "value" }, outputs: { itemsChange: "itemsChange", valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -4069,11 +4110,11 @@ class RadiogroupComponent {
                 multi: true,
                 useExisting: forwardRef(() => RadiogroupComponent)
             }
-        ], ngImport: i0, template: "<div class=\"radiogroup\"\n    [class.disabled]=\"disabled || readonly\"\n    >\n  <ng-container *ngFor=\"let item of items; let first=first; let last=last\">\n    <div [class.radio-start]=\"first\"\n         [class.radio-end]=\"last\"\n         class=\"radio-item\"\n         [class.selected]=\"item.value === value\"\n         (click)=\"setValue($event, item)\"\n      >\n      <input [id]=\"item.name\"\n             type=\"radio\"\n             [name]=\"name\"\n             [attr.disabled]=\"disabled || null\"\n             [attr.readonly]=\"readonly || null\"\n             [value]=\"item.value\">\n      <label [for]=\"item.name\"\n             class=\"unselectable\"\n             >{{ item.label }}</label>\n  </div>\n</ng-container>\n</div>\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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        ], 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: "19.2.1", ngImport: i0, type: RadiogroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadiogroupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-radiogroup', providers: [
+            args: [{ selector: 'lux-radiogroup', imports: [], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -4084,7 +4125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => RadiogroupComponent)
                         }
-                    ], template: "<div class=\"radiogroup\"\n    [class.disabled]=\"disabled || readonly\"\n    >\n  <ng-container *ngFor=\"let item of items; let first=first; let last=last\">\n    <div [class.radio-start]=\"first\"\n         [class.radio-end]=\"last\"\n         class=\"radio-item\"\n         [class.selected]=\"item.value === value\"\n         (click)=\"setValue($event, item)\"\n      >\n      <input [id]=\"item.name\"\n             type=\"radio\"\n             [name]=\"name\"\n             [attr.disabled]=\"disabled || null\"\n             [attr.readonly]=\"readonly || null\"\n             [value]=\"item.value\">\n      <label [for]=\"item.name\"\n             class=\"unselectable\"\n             >{{ item.label }}</label>\n  </div>\n</ng-container>\n</div>\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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{
                 type: Input
             }], disabled: [{
@@ -4198,8 +4239,8 @@ class SelectComponent {
         this.error = this.validateItem(newValue);
         this.isValidNewEntry = !this.error;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SelectComponent, isStandalone: false, 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: "21.1.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SelectComponent, isStandalone: true, selector: "lux-select", inputs: { id: "id", disabled: "disabled", required: "required", multiple: "multiple", value: "value", placeholder: "placeholder", unique: "unique", validateItem: "validateItem" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -4210,11 +4251,11 @@ class SelectComponent {
                 multi: true,
                 useExisting: forwardRef(() => SelectComponent)
             }
-        ], ngImport: i0, template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            type=\"button\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n", 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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "19.2.1", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lux-select', providers: [
+            args: [{ selector: 'lux-select', imports: [InputComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -4225,7 +4266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SelectComponent)
                         }
-                    ], template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            type=\"button\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n", 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
@@ -4247,16 +4288,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             }] } });
 
 class VoiceRecognitionDirective {
-    el;
-    renderer;
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
     language;
     // See API at: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
     recognition;
     isRecognizing = false;
     mic;
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
+    constructor() {
         const speechRecognition = window.webkitSpeechRecognition;
         if (speechRecognition) {
             this.recognition = new speechRecognition();
@@ -4299,16 +4338,15 @@ class VoiceRecognitionDirective {
         this.el.nativeElement.value = recognizedText;
         this.renderer.removeClass(this.mic, 'lux-recording');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VoiceRecognitionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: VoiceRecognitionDirective, isStandalone: false, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VoiceRecognitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: VoiceRecognitionDirective, isStandalone: true, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: false,
                     selector: '[luxVoiceRecognition]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { language: [{
+        }], ctorParameters: () => [], propDecorators: { language: [{
                 type: Input
             }] } });
 const getRecordingMessage = (lang) => {
@@ -4363,28 +4401,29 @@ const windowProvider = {
 const WINDOW_PROVIDERS = [browserWindowProvider, windowProvider];
 
 class LuxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: LuxModule, declarations: [AutocompleteComponent,
-            AutocompleteListComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, imports: [FormsModule,
             FilterComponent,
+            GeolocationComponent,
+            InputComponent,
+            AutocompleteListComponent,
+            AutocompleteComponent,
             CheckboxComponent,
             DatetimeComponent,
-            InputComponent,
-            GeolocationComponent,
+            LuxBreadcrumbComponent,
             LuxTooltipDirective,
             LuxModalWindowComponent,
             LuxModalBackdropComponent,
-            LuxBreadcrumbComponent,
             MapComponent,
-            SelectComponent,
-            TooltipComponent,
             PaginationComponent,
             RadiogroupComponent,
-            VoiceRecognitionDirective], imports: [FormsModule,
             HttpClientModule,
             ReactiveFormsModule,
             RouterModule,
-            CommonModule], exports: [AutocompleteComponent,
+            SelectComponent,
+            CommonModule,
+            TooltipComponent,
+            VoiceRecognitionDirective], exports: [AutocompleteComponent,
             AutocompleteListComponent,
             FilterComponent,
             CheckboxComponent,
@@ -4392,48 +4431,54 @@ class LuxModule {
             InputComponent,
             GeolocationComponent,
             LuxTooltipDirective,
-            LuxBreadcrumbComponent,
-            LuxBreadcrumbComponent,
             MapComponent,
             SelectComponent,
             PaginationComponent,
             RadiogroupComponent,
             VoiceRecognitionDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
+            FilterComponent,
+            GeolocationComponent,
+            InputComponent,
+            AutocompleteListComponent,
+            AutocompleteComponent,
+            DatetimeComponent,
+            LuxBreadcrumbComponent,
+            PaginationComponent,
             HttpClientModule,
             ReactiveFormsModule,
             RouterModule,
+            SelectComponent,
             CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LuxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LuxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        AutocompleteComponent,
-                        AutocompleteListComponent,
+                    declarations: [],
+                    providers: [ModalService, TooltipService, WINDOW_PROVIDERS],
+                    imports: [
+                        FormsModule,
                         FilterComponent,
+                        GeolocationComponent,
+                        InputComponent,
+                        AutocompleteListComponent,
+                        AutocompleteComponent,
                         CheckboxComponent,
                         DatetimeComponent,
-                        InputComponent,
-                        GeolocationComponent,
+                        LuxBreadcrumbComponent,
                         LuxTooltipDirective,
                         LuxModalWindowComponent,
                         LuxModalBackdropComponent,
-                        LuxBreadcrumbComponent,
                         MapComponent,
-                        SelectComponent,
-                        TooltipComponent,
                         PaginationComponent,
                         RadiogroupComponent,
-                        VoiceRecognitionDirective
-                    ],
-                    providers: [ModalService, TooltipService, WINDOW_PROVIDERS],
-                    imports: [
-                        FormsModule,
                         HttpClientModule,
                         ReactiveFormsModule,
                         RouterModule,
-                        CommonModule
+                        SelectComponent,
+                        CommonModule,
+                        TooltipComponent,
+                        VoiceRecognitionDirective
                     ],
                     exports: [
                         AutocompleteComponent,
@@ -4444,8 +4489,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         InputComponent,
                         GeolocationComponent,
                         LuxTooltipDirective,
-                        LuxBreadcrumbComponent,
-                        LuxBreadcrumbComponent,
                         MapComponent,
                         SelectComponent,
                         PaginationComponent,